50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T445d,"use client" import * as React from "react" import { cn } from "@/lib/utils" import { classifyUrl, type EmbedSource } from "@/lib/embed" import { Image, type ImageProps } from "@/components/ui/image" import { Skeleton } from "@/components/ui/skeleton" import type { LinkPreviewData } from "@/lib/link-preview" // iPadOS reports itself as a Mac, distinguishable only by the touch points a // real Mac doesn't have. function isIOS(nav: Pick): boolean { return ( /iP(hone|ad|od)/.test(nav.userAgent) || (nav.platform === "MacIntel" && nav.maxTouchPoints > 1) ) } // loading="lazy" does defer the request, but the browser starts it thousands // of pixels before the viewport, so a player far down a page still loads with // it. Holding the src back until the element is about to be seen is tighter. function useNearViewport( ref: React.RefObject, rootMargin = "200px" ): boolean { const [near, setNear] = React.useState(false) React.useEffect(() => { if (near) return const el = ref.current if (!el) return const observer = new IntersectionObserver( (entries) => { if (!entries.some((entry) => entry.isIntersecting)) return setNear(true) observer.disconnect() }, { rootMargin } ) observer.observe(el) return () => observer.disconnect() }, [ref, near, rootMargin]) return near } interface EmbedProps { url: string className?: string /** Where `LinkPreview` fetches a plain link's title, description and image * from. `null` turns the fetch off. */ endpoint?: string | null } /** Turns an arbitrary URL into whichever embed fits it, or nothing at all. * Trusts `classifyUrl` completely — a `link` classification renders as a * card, not an iframe, and anything it refuses renders nothing. */ function Embed({ url, className, endpoint }: EmbedProps) { const source = classifyUrl(url) if (!source) return null return } function EmbedFromSource({ source, className, endpoint, }: { source: EmbedSource className?: string endpoint?: string | null }) { switch (source.kind) { case "youtube": return case "spotify": return case "image": return case "video": return case "link": return } } interface YouTubeEmbedProps { videoId: string title?: string className?: string } // YouTube answers a missing maxresdefault with a 4:3 grey 120x90, where the // real one is 16:9. function isPlaceholderThumbnail(image: HTMLImageElement): boolean { return image.currentSrc.includes("maxresdefault") && image.naturalWidth / image.naturalHeight < 1.5 } // A facade: the real player is close to a megabyte of third-party script, and // a page shouldn't pay for it until someone actually presses play. Until // then this is a thumbnail and a button. function YouTubeEmbed({ videoId, title = "YouTube video", className }: YouTubeEmbedProps) { // A cross-origin iframe doesn't inherit the tap that landed on our facade, // so on iOS `autoplay=1` with sound just shows YouTube's own play button — // muted autoplay used to be the workaround. Android Chrome and desktop DO // honour that tap through `allow="autoplay"`, so they play with sound on // one tap. On iOS the player is mounted up front instead, once the block // nears the viewport, so the one tap lands inside YouTube's player and // plays with sound; the cost is the player script loading for every video // on iOS, which is the trade the site chose. const [playing, setPlaying] = React.useState(false) const [eager, setEager] = React.useState(false) React.useEffect(() => setEager(isIOS(navigator)), []) const ref = React.useRef(null) const near = useNearViewport(ref) const showIframe = playing || (eager && near) const [thumbnailLoaded, setThumbnailLoaded] = React.useState(false) const [playerLoaded, setPlayerLoaded] = React.useState(false) const thumbRef = React.useRef(null) // A cached thumbnail can finish loading before hydration, which means // React's onLoad below never fires for it. React.useEffect(() => { const image = thumbRef.current if (!image?.complete || !image.naturalWidth) return if (isPlaceholderThumbnail(image)) setWithoutLargeThumbnail(videoId) else setThumbnailLoaded(true) }, [videoId]) // 1280x720 is the largest thumbnail YouTube publishes, and it only exists // for some videos. A missing one is not an error: YouTube answers 404 with // a valid grey placeholder, which loads fine — `isPlaceholderThumbnail` // above is how both the mount check and `onLoad` tell it apart from the // real thing. Keyed on the id so a new video gets a fresh try. const [withoutLargeThumbnail, setWithoutLargeThumbnail] = React.useState(null) const thumbnailSrc = withoutLargeThumbnail === videoId ? `https://i.ytimg.com/vi/${encodeURIComponent(videoId)}/hqdefault.jpg` : `https://i.ytimg.com/vi_webp/${encodeURIComponent(videoId)}/maxresdefault.webp` return (

{showIframe && (