Skip to content

Better youtube preview #1939

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
simo6529 merged 3 commits into from
Feb 17, 2026
Merged

Better youtube preview #1939

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
30b4bec
wip
simo6529 Feb 17, 2026
692fa5c
Merge branch 'main' into better-youtube-preview
simo6529 Feb 17, 2026
5de34d3
wip
simo6529 Feb 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 16 additions & 8 deletions __tests__/components/drops/view/part/DropPartMarkdown.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -393,9 +393,11 @@ describe("DropPartMarkdown", () => {
);

const stableFrame = screen.getByTestId("youtube-preview-stable-frame");
const mediaFrame = screen.getByTestId("youtube-preview-media-frame");
expect(stableFrame).toBeInTheDocument();
expect(stableFrame.className).toContain("tw-h-[13rem]");
expect(stableFrame.className).toContain("md:tw-h-[15rem]");
expect(stableFrame.className).not.toContain("tw-h-[13rem]");
expect(stableFrame.className).not.toContain("md:tw-h-[15rem]");
expect(mediaFrame.className).toContain("tw-aspect-video");

resolvePreview?.(preview);

Expand Down Expand Up @@ -501,8 +503,10 @@ describe("DropPartMarkdown", () => {
);

const stableFrame = screen.getByTestId("youtube-preview-stable-frame");
expect(stableFrame.className).toContain("tw-h-[13rem]");
expect(stableFrame.className).toContain("md:tw-h-[15rem]");
const mediaFrame = screen.getByTestId("youtube-preview-media-frame");
expect(stableFrame.className).not.toContain("tw-h-[13rem]");
expect(stableFrame.className).not.toContain("md:tw-h-[15rem]");
expect(mediaFrame.className).toContain("tw-aspect-video");

const fallbackLink = await screen.findByTestId(
"youtube-preview-fallback-link"
Expand All @@ -526,8 +530,10 @@ describe("DropPartMarkdown", () => {
);

const stableFrame = screen.getByTestId("youtube-preview-stable-frame");
expect(stableFrame.className).toContain("tw-h-[13rem]");
expect(stableFrame.className).toContain("md:tw-h-[15rem]");
const mediaFrame = screen.getByTestId("youtube-preview-media-frame");
expect(stableFrame.className).not.toContain("tw-h-[13rem]");
expect(stableFrame.className).not.toContain("md:tw-h-[15rem]");
expect(mediaFrame.className).toContain("tw-aspect-video");

const fallbackLink = await screen.findByTestId(
"youtube-preview-fallback-link"
Expand All @@ -551,8 +557,10 @@ describe("DropPartMarkdown", () => {
);

const stableFrame = screen.getByTestId("youtube-preview-stable-frame");
expect(stableFrame.className).toContain("tw-h-[13rem]");
expect(stableFrame.className).toContain("md:tw-h-[15rem]");
const mediaFrame = screen.getByTestId("youtube-preview-media-frame");
expect(stableFrame.className).not.toContain("tw-h-[13rem]");
expect(stableFrame.className).not.toContain("md:tw-h-[15rem]");
expect(mediaFrame.className).toContain("tw-aspect-video");

const fallbackLink = await screen.findByTestId(
"youtube-preview-fallback-link"
Expand Down
25 changes: 18 additions & 7 deletions components/drops/view/part/dropPartMarkdown/youtubePreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,11 +230,13 @@ type PreviewState = {
readonly showEmbed: boolean;
};

const YOUTUBE_STABLE_FRAME_CLASSES =
"tw-h-[13rem] tw-min-h-[13rem] tw-max-h-[13rem] tw-w-full md:tw-h-[15rem] md:tw-min-h-[15rem] md:tw-max-h-[15rem]";
const YOUTUBE_STABLE_FRAME_CLASSES = "tw-min-w-0 tw-flex-1";

const YOUTUBE_CARD_CLASSES =
"tw-flex tw-h-full tw-w-full tw-flex-col tw-overflow-hidden tw-rounded-lg";
"tw-flex tw-w-full tw-flex-col tw-overflow-hidden tw-rounded-lg";

const YOUTUBE_MEDIA_FRAME_CLASSES =
"tw-relative tw-aspect-video tw-w-full tw-overflow-hidden tw-bg-black";

const YOUTUBE_META_CLASSES =
"tw-flex tw-h-11 tw-shrink-0 tw-flex-col tw-justify-center tw-gap-y-0.5 tw-overflow-hidden tw-border-0 tw-border-t tw-border-solid tw-border-iron-800 tw-bg-iron-900/95 tw-px-3";
Expand Down Expand Up @@ -363,7 +365,10 @@ const YoutubePreview = ({ href }: YoutubePreviewProps) => {
if (isLoading) {
return (
<div className={`${YOUTUBE_CARD_CLASSES} tw-bg-iron-900`}>
<div className="tw-h-full tw-w-full tw-animate-pulse tw-bg-iron-800" />
<div
className={`${YOUTUBE_MEDIA_FRAME_CLASSES} tw-animate-pulse tw-bg-iron-800`}
data-testid="youtube-preview-media-frame"
/>
<div className={YOUTUBE_META_CLASSES}>
<div className="tw-h-3 tw-w-4/5 tw-animate-pulse tw-rounded tw-bg-iron-700" />
<div className="tw-h-2.5 tw-w-1/2 tw-animate-pulse tw-rounded tw-bg-iron-700/80" />
Expand All @@ -379,7 +384,10 @@ const YoutubePreview = ({ href }: YoutubePreviewProps) => {

return (
<div className={`${YOUTUBE_CARD_CLASSES} tw-bg-iron-900`}>
<div className="tw-relative tw-min-h-0 tw-flex-1 tw-overflow-hidden tw-bg-black">
<div
className={YOUTUBE_MEDIA_FRAME_CLASSES}
data-testid="youtube-preview-media-frame"
>
{showEmbed ? (
<div
className="tw-h-full tw-w-full tw-bg-black"
Expand Down Expand Up @@ -443,7 +451,10 @@ const YoutubePreview = ({ href }: YoutubePreviewProps) => {
data-testid="youtube-preview-fallback-link"
className={`${YOUTUBE_CARD_CLASSES} tw-border tw-border-solid tw-border-iron-700 tw-bg-iron-900/40 tw-no-underline tw-transition-colors tw-duration-200 hover:tw-border-iron-500 focus-visible:tw-outline focus-visible:tw-outline-2 focus-visible:tw-outline-offset-2 focus-visible:tw-outline-primary-400`}
>
<div className="tw-flex tw-min-h-0 tw-flex-1 tw-items-center tw-justify-center tw-px-4 tw-text-center">
<div
className={`${YOUTUBE_MEDIA_FRAME_CLASSES} tw-flex tw-items-center tw-justify-center tw-px-4 tw-text-center`}
data-testid="youtube-preview-media-frame"
>
<span className="tw-line-clamp-2 tw-text-sm tw-font-medium tw-text-iron-100">
{fallbackMessage}
</span>
Expand All @@ -463,7 +474,7 @@ const YoutubePreview = ({ href }: YoutubePreviewProps) => {
return (
<div className="tw-flex tw-w-full tw-items-stretch tw-gap-x-1">
<div
className={`tw-min-w-0 tw-flex-1 ${YOUTUBE_STABLE_FRAME_CLASSES}`}
className={YOUTUBE_STABLE_FRAME_CLASSES}
data-testid="youtube-preview-stable-frame"
>
{card()}
Expand Down
1 change: 1 addition & 0 deletions components/user/utils/icons/SocialStatementIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,5 +105,6 @@ export default function SocialStatementIcon({
return <TransientIcon />;
default:
assertUnreachable(statementType);
return null;
}
}