4f: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"] 50: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"] 51:T1def,"use client" import { useState } from "react" import { Bookmark, MoreHorizontal, Share, EyeOff, Flag } from "lucide-react" import { demoYouTubePost } from './demo/social' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" /** * ═══════════════════════════════════════════════════════════════════════════ * YouTubePostProps * ═══════════════════════════════════════════════════════════════════════════ * * Props for the YouTubePost component, which displays a YouTube video embed * with thumbnail preview and click-to-play functionality. */ export interface YouTubePostProps { data?: { /** YouTube channel name. */ channel?: string /** Channel avatar letter fallback or image URL. */ avatar?: string /** Video title. */ title?: string /** Formatted view count (e.g., "1M views"). */ views?: string /** Time since video was published (e.g., "2 weeks ago"). */ time?: string /** Video duration in MM:SS or HH:MM:SS format. */ duration?: string /** URL of the video thumbnail image. */ thumbnail?: string /** Formatted subscriber count for the channel. */ subscribers?: string /** Whether the channel has a verified badge. */ verified?: boolean /** YouTube video ID used for embedding the player. */ videoId?: string } } /** * A YouTube video embed component with thumbnail preview and playback. * Click the play button to load and play the embedded video. * * Features: * - Thumbnail preview with YouTube play button * - Duration badge overlay * - Channel avatar and info * - Verified channel badge * - View count and publish time * - Click-to-play video embedding * - Dropdown menu (save, share, not interested, report) * * @component * @example * ```tsx * * ``` */ export function YouTubePost({ data }: YouTubePostProps) { const resolved: NonNullable = data ?? demoYouTubePost const channel = resolved?.channel const avatar = resolved?.avatar const title = resolved?.title const views = resolved?.views const time = resolved?.time const duration = resolved?.duration const thumbnail = resolved?.thumbnail const verified = resolved?.verified const videoId = resolved?.videoId const [isPlaying, setIsPlaying] = useState(false) if (!title && !thumbnail && !videoId) { return null } return (

{/* Thumbnail / Video */} {(thumbnail || videoId) && (

{isPlaying && videoId ? (