"use client"; import Image from "next/image"; import { useState } from "react"; import { useRouter } from "next/navigation"; import { Play, Download, MoreVertical, Music2, Headphones, Radio, RotateCcw, CheckCircle2, } from "lucide-react"; import { useAppDispatch } from "@/store/hooks"; import { stopAll } from "@/store/slices/playerSlice"; import { setReelQueue } from "@/store/slices/reelQueueSlice"; import { useSidebar } from "@/lib/SidebarContext"; import { ContentItem } from "@/types/content"; import { getLayout, CONTENT_TYPE_MAP } from "@/config/contentTypes"; import { reelsListService, type MappedReel } from "@/services/reelsListService"; import { ContentActionsModal, type ContentActionContext, } from "@/components/shared/ContentActionsModal"; /* ───────────────────────────────────────────────────────────────────────────── Shared helpers ───────────────────────────────────────────────────────────────────────────── */ function contentItemToMappedReel(item: ContentItem): MappedReel { const idNum = parseInt(item.id) || 0; return { id: item.id, contentType: item.contentType, caption: item.title, likes: item.likes, totalLikeCount: 0, totalDislikeCount: 0, isUserLikeDislike: 0, isLike: 0, image: item.portraitImg || item.thumbnail, hue: (idNum * 47) % 360, channelName: item.channelName, channelImage: item.channelImage || "", channelId: "", channelUserId: "", videoUrl: item.videoUrl, totalComments: item.totalComments, totalView: item.views, creator: item.channelName, initial: (item.channelName[0] ?? "?").toUpperCase(), sound: item.title.slice(0, 40) || "Original Sound", comments: String(item.totalComments), }; } function useNavigate() { const dispatch = useAppDispatch(); const router = useRouter(); const { collapse } = useSidebar(); return (item: ContentItem) => { dispatch(stopAll()); collapse(); let href: string; if (item.contentType === 3) { href = `/reel/${item.id}`; } else if ( item.contentType === 2 || item.contentType === 4 || item.contentType === 6 ) { href = `/content/${item.contentType}/${item.id}`; } else { href = `/video/${item.id}`; } router.push(href); }; } function ProgressPill({ pct }: { pct: number }) { if (pct <= 0) return null; const done = pct >= 95; return ( {done && } {done ? "Watched" : `${pct}%`} ); } function ChannelAvatar({ item }: { item: ContentItem }) { return (
{item.channelImage ? ( {item.channelName} ) : (
{item.channelName[0]?.toUpperCase()}
)}
); } /* ───────────────────────────────────────────────────────────────────────────── LAYOUT 1 — video-grid (content_type 1 = Video, 5 = Live Event) Responsive 4-col grid, landscape thumbnail, progress bar, meta row ───────────────────────────────────────────────────────────────────────────── */ export function VideoCard({ item, index, onDeleteItem, }: { item: ContentItem; index: number; onDeleteItem?: () => void; }) { const go = useNavigate(); const delay = Math.min(index * 40, 640); const isLive = item.isLive; const [actionCtx, setActionCtx] = useState(null); return ( <>
go(item)} > {/* Thumbnail */}
{item.thumbnail ? ( {item.title} ) : null}
{/* Live badge */} {isLive && ( LIVE )} {/* Duration */} {item.duration && !isLive && ( {item.duration} )} {/* Play overlay */}
{/* Watch progress */} {item.progressPct > 0 && (
= 95 ? "#4ade80" : "var(--accent)", }} />
)}
{/* Meta */}

{item.title}

{item.channelName}

{item.views} · {item.uploadedAt} {item.progressPct > 0 && ( <> · )}
{onDeleteItem && ( )}
{actionCtx && ( setActionCtx(null)} /> )} ); } export function VideoGrid({ items, onDeleteItem, }: { items: ContentItem[]; onDeleteItem?: (item: ContentItem) => void; }) { return (
{items.map((item, i) => ( onDeleteItem(item) : undefined} /> ))}
); } export function VideoGridSkeleton({ count = 8 }: { count?: number }) { return (
{Array.from({ length: count }).map((_, i) => (
))}
); } /* ───────────────────────────────────────────────────────────────────────────── LAYOUT 2 — music-list (content_type 2 = Music) Numbered track rows, album art, progress dot, duration ───────────────────────────────────────────────────────────────────────────── */ export function MusicRow({ item, index, onDeleteItem, }: { item: ContentItem; index: number; onDeleteItem?: () => void; }) { const go = useNavigate(); const delay = Math.min(index * 35, 500); const [actionCtx, setActionCtx] = useState(null); return (
0 ? "2px solid rgba(var(--accent-rgb),0.4)" : "2px solid transparent", }} onMouseEnter={(e) => ((e.currentTarget as HTMLElement).style.background = "var(--card)") } onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.background = "transparent") } onClick={() => go(item)} > {/* Index / play */}
{String(index + 1).padStart(2, "0")}
{/* Album art */}
{item.thumbnail ? ( {item.title} ) : (
)} {item.progressPct > 0 && (
)}
{/* Title + artist */}

{item.title}

{item.channelName}

{item.progressPct > 0 && }
{/* Actions */}
{item.isDownload && ( )} {item.duration} {onDeleteItem && ( )}
{actionCtx && ( setActionCtx(null)} /> )}
); } export function MusicList({ items, onDeleteItem, }: { items: ContentItem[]; onDeleteItem?: (item: ContentItem) => void; }) { return (
{items.map((item, i) => (
onDeleteItem(item) : undefined} /> {i < items.length - 1 && (
)}
))}
); } export function MusicListSkeleton({ count = 7 }: { count?: number }) { return (
{Array.from({ length: count }).map((_, i) => (
))}
); } /* ───────────────────────────────────────────────────────────────────────────── LAYOUT 3 — reel-grid (content_type 3 = Reel) Portrait-ratio cards in a 2/3/4-col grid ───────────────────────────────────────────────────────────────────────────── */ export function ReelCard({ item, index, onCardClick, }: { item: ContentItem; index: number; onCardClick?: () => void; }) { const go = useNavigate(); const delay = Math.min(index * 40, 640); const img = item.portraitImg || item.thumbnail; return (
go(item))} >
{img ? ( {item.title} ) : null}
{item.duration && ( {item.duration} )} {item.progressPct > 0 && (
)}

{item.title}

{item.channelName}

{item.progressPct > 0 && }
); } export function ReelGrid({ items }: { items: ContentItem[] }) { const dispatch = useAppDispatch(); const router = useRouter(); const { collapse } = useSidebar(); const handleReelClick = (item: ContentItem) => { dispatch(stopAll()); collapse(); const queue = items.map(contentItemToMappedReel); dispatch(setReelQueue({ queue, startId: item.id })); router.push(`/reel/${item.id}`); }; return (
{items.map((item, i) => ( handleReelClick(item)} /> ))}
); } export function ReelGridSkeleton({ count = 10 }: { count?: number }) { return (
{Array.from({ length: count }).map((_, i) => (
))}
); } /* ───────────────────────────────────────────────────────────────────────────── LAYOUT 4 — podcast-list (content_type 4 = Podcast, 6 = Radio) Large cover art, episode info, progress bar, resume button ───────────────────────────────────────────────────────────────────────────── */ export function PodcastRow({ item, index, onDeleteItem, }: { item: ContentItem; index: number; onDeleteItem?: () => void; }) { const go = useNavigate(); const delay = Math.min(index * 50, 500); const isRadio = item.contentType === 6; const [actionCtx, setActionCtx] = useState(null); return (
((e.currentTarget as HTMLElement).style.background = "var(--card)") } onMouseLeave={(e) => ((e.currentTarget as HTMLElement).style.background = "transparent") } onClick={() => go(item)} > {/* Cover art */}
{item.thumbnail ? ( {item.title} ) : (
{isRadio ? ( ) : ( )}
)} {item.progressPct > 0 && (
= 95 ? "#4ade80" : "var(--accent)", }} />
)}
{/* Info */}

{item.title}

{item.channelName}

{item.category && ( {item.category} )} {item.duration && ( {item.duration} )} {item.progressPct > 0 && }
{item.progressPct > 0 && (
= 95 ? "#4ade80" : "var(--accent)", borderRadius: 2, }} />
)}
{/* More + optional delete — no Play/Resume: clicking the row navigates to detail */}
{onDeleteItem && ( )}
{actionCtx && ( setActionCtx(null)} /> )}
); } export function PodcastList({ items, onDeleteItem, }: { items: ContentItem[]; onDeleteItem?: (item: ContentItem) => void; }) { return (
{items.map((item, i) => (
onDeleteItem(item) : undefined} /> {i < items.length - 1 && (
)}
))}
); } export function PodcastListSkeleton({ count = 5 }: { count?: number }) { return (
{Array.from({ length: count }).map((_, i) => (
))}
); } /* ───────────────────────────────────────────────────────────────────────────── ContentRenderer — picks layout from active content type ───────────────────────────────────────────────────────────────────────────── */ export function ContentRenderer({ items, contentTypeId, onDeleteItem, }: { items: ContentItem[]; contentTypeId: number; onDeleteItem?: (item: ContentItem) => void; }) { const layout = getLayout(contentTypeId); if (layout === "music-list") return ; if (layout === "reel-grid") return ; if (layout === "podcast-list") return ; return ; } export function SkeletonRenderer({ contentTypeId, count, }: { contentTypeId: number; count?: number; }) { const layout = getLayout(contentTypeId); if (layout === "music-list") return ; if (layout === "reel-grid") return ; if (layout === "podcast-list") return ; return ; } /* ───────────────────────────────────────────────────────────────────────────── Reusable Tab Bar ───────────────────────────────────────────────────────────────────────────── */ export function ContentTabBar({ tabIds, activeId, onChange, }: { tabIds: number[]; activeId: number; onChange: (id: number) => void; }) { return (
{tabIds.map((id) => { const cfg = CONTENT_TYPE_MAP[id]; if (!cfg) return null; const isActive = activeId === id; return ( ); })}
); }