{/* Center column */}

{/* Video area */}

{/* shimmer overlay */}

{/* Bottom creator row */}

{/* Progress bar */}

{/* Right action bar */}

{/* Avatar */}

{/* Action icons */} {Array.from({ length: 4 }).map((_, i) => (

))}

{/* Nav buttons */}

{/* Right panel */}

{/* Title */}

{/* Filter chips */}

{FILTERS.map((f) => (

))}

{/* List cards */}

{Array.from({ length: 5 }).map((_, i) => (

{/* Thumb */}

{/* Meta */}

))}

); } interface ReelsPageProps { initialId?: string; } export default function ReelsPage({ initialId }: ReelsPageProps) { const dispatch = useAppDispatch(); const router = useRouter(); const { share, copied: reelCopied } = useShare(); const goToCreator = useCallback( (channelUserId: string) => { if (channelUserId) router.push(`/profile/${channelUserId}`); }, [router], ); /* snapshot queue at first render before any effects run */ const reelQueueSelector = useAppSelector((s) => s.reelQueue); const initQueueRef = useRef({ queue: reelQueueSelector.queue, startId: reelQueueSelector.startId, }); /* local reel list — populated from queue or API */ const [reels, setReels] = useState([]); const [apiPage, setApiPage] = useState(0); const [apiHasMore, setApiHasMore] = useState(true); const [isLoading, setIsLoading] = useState(true); const [isLoadingMore, setIsLoadingMore] = useState(false); const [idx, setIdx] = useState(0); const [playing, setPlaying] = useState(true); const [muted, setMuted] = useState(false); const [progress, setProgress] = useState(0); // 0 → 1 const [filter, setFilter] = useState<(typeof FILTERS)[number]>("For You"); const [captionOpen, setCaptionOpen] = useState(false); const [commentReelId, setCommentReelId] = useState(null); const [giftOpen, setGiftOpen] = useState(false); const [reelActionsOpen, setReelActionsOpen] = useState(false); const stageRef = useRef(null); const videoRef = useRef(null); const listRef = useRef(null); const touchStartY = useRef(0); const touchStartX = useRef(0); const touchStartTime = useRef(0); const isSwiping = useRef(false); /* fetch a page from the API and append/replace local reels */ const fetchPage = useCallback(async (page: number) => { if (page === 1) setIsLoading(true); else setIsLoadingMore(true); try { const res = await reelsListService.getReelsList(page); const mapped = res.result.map(reelsListService.mapReel); setReels((prev) => (page === 1 ? mapped : [...prev, ...mapped])); setApiPage(res.current_page); setApiHasMore(res.more_page); } catch { /* silently ignore load-more failures */ } finally { setIsLoading(false); setIsLoadingMore(false); } }, []); /* mount: use queue if available, otherwise fetch page 1 */ useEffect(() => { const { queue, startId } = initQueueRef.current; if (queue.length > 0) { setReels(queue); setIsLoading(false); setApiPage(0); // not fetched from API yet setApiHasMore(true); const found = startId ? queue.findIndex((r) => r.id === startId) : -1; if (found >= 0) setIdx(found); dispatch(clearReelQueue()); } else { fetchPage(1); } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); /* for direct /reel/[id] URL visits without a queue: seek to initialId once loaded */ useEffect(() => { if ( !initialId || reels.length === 0 || initQueueRef.current.queue.length > 0 ) return; const found = reels.findIndex((r) => r.id === initialId); if (found >= 0) setIdx(found); }, [initialId, reels]); /* load more from API when approaching the end of the current list */ useEffect(() => { if (reels.length === 0 || isLoading || isLoadingMore) return; if (idx >= reels.length - PRELOAD_THRESHOLD && apiHasMore) { const nextPage = apiPage === 0 ? 1 : apiPage + 1; fetchPage(nextPage); } }, [ idx, reels.length, apiHasMore, apiPage, isLoading, isLoadingMore, fetchPage, ]); /* keyboard navigation */ useEffect(() => { const onKey = (e: KeyboardEvent) => { if (e.key === "ArrowDown") setIdx((i) => Math.min(reels.length - 1, i + 1)); else if (e.key === "ArrowUp") setIdx((i) => Math.max(0, i - 1)); else if (e.key === " ") { e.preventDefault(); setPlaying((p) => !p); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [reels.length]); /* scroll-wheel navigation */ useEffect(() => { const el = stageRef.current; if (!el) return; let cooldown = false; const onWheel = (e: WheelEvent) => { if (cooldown || Math.abs(e.deltaY) < 20) return; cooldown = true; setTimeout(() => { cooldown = false; }, 380); if (e.deltaY > 0) setIdx((i) => Math.min(reels.length - 1, i + 1)); else setIdx((i) => Math.max(0, i - 1)); }; el.addEventListener("wheel", onWheel, { passive: true }); return () => el.removeEventListener("wheel", onWheel); }, [reels.length]); /* touch-swipe navigation (mobile) */ useEffect(() => { const el = stageRef.current; if (!el) return; const onTouchStart = (e: TouchEvent) => { touchStartY.current = e.touches[0].clientY; touchStartX.current = e.touches[0].clientX; touchStartTime.current = Date.now(); isSwiping.current = false; }; const onTouchMove = (e: TouchEvent) => { const dy = Math.abs(e.touches[0].clientY - touchStartY.current); const dx = Math.abs(e.touches[0].clientX - touchStartX.current); // Mark as a vertical swipe once moved enough vertically if (dy > 10 && dy > dx) isSwiping.current = true; }; const onTouchEnd = (e: TouchEvent) => { if (!isSwiping.current) return; const endY = e.changedTouches[0].clientY; const deltaY = touchStartY.current - endY; // positive = swipe up const elapsed = Date.now() - touchStartTime.current; // Min 55px swipe within 700ms if (Math.abs(deltaY) < 55 || elapsed > 700) return; if (deltaY > 0) setIdx((i) => Math.min(reels.length - 1, i + 1)); else setIdx((i) => Math.max(0, i - 1)); }; el.addEventListener("touchstart", onTouchStart, { passive: true }); el.addEventListener("touchmove", onTouchMove, { passive: true }); el.addEventListener("touchend", onTouchEnd, { passive: true }); return () => { el.removeEventListener("touchstart", onTouchStart); el.removeEventListener("touchmove", onTouchMove); el.removeEventListener("touchend", onTouchEnd); }; }, [reels.length]); const handleListLoadMore = useCallback(() => { fetchPage(apiPage === 0 ? 1 : apiPage + 1); }, [fetchPage, apiPage]); const listSentinelRef = useInfiniteScroll({ hasMore: apiHasMore, isLoading: isLoadingMore, onLoadMore: handleListLoadMore, rootRef: listRef, }); /* reset caption on reel change */ useEffect(() => { setCaptionOpen(false); }, [idx]); /* Fire add_view whenever the active reel changes — must be before any early returns */ useAddView(3, reels[idx]?.id); /* ── loading / empty states ─────────────────────────────────────────── */ if (isLoading && reels.length === 0) { return ; } if (!isLoading && reels.length === 0) { return (

No reels available

); } const reel = reels[idx]; if (!reel) return null; return (

{/* ── Center column ──────────────────────────────────────────────── */}

{/* Reel player — tap toggles play, swipe navigates */}

{ if (isSwiping.current) return; // ignore tap if user was swiping setPlaying((p) => !p); }} > {/*

*/} {/* Dark gradient overlay — matches Flutter black.withValues(alpha:0.25) */}

{/* Mute button */} {/* Big play overlay */} {!playing && (

)} {/* Bottom overlay */}

{ e.stopPropagation(); goToCreator(reel.channelUserId); }} > {reel.channelImage ? ( {reel.creator}

) : ( reel.initial )}

{ e.stopPropagation(); goToCreator(reel.channelUserId); }} > {reel.creator}

{ e.stopPropagation(); setCaptionOpen((o) => !o); }} > {reel.caption} {!captionOpen && reel.caption.length > 80 && ( …more )}

e.stopPropagation()}>

{reel.sound}

{/* ── Mobile-only action overlay (Flutter Stack equivalent) ─────── */}

e.stopPropagation()} > {/* Creator avatar */}

goToCreator(reel.channelUserId)} >

{reel.channelImage ? ( {reel.creator}

) : ( reel.initial )}

{/* Like */} {/* Gift */}

setGiftOpen(true)}>

Gift

{/* Comment */}

setCommentReelId(reel.id)} >

{reel.comments}

{/* Share */}

share({ title: reel.caption || reel.channelName, path: `/reel/${reel.id}`, }) } >

{reelCopied ? "Copied!" : "Share"}

{/* More */}

setReelActionsOpen(true)} >

{/* Progress bar */}

{ e.stopPropagation(); const rect = e.currentTarget.getBoundingClientRect(); const percent = (e.clientX - rect.left) / rect.width; if (videoRef.current && videoRef.current.duration) { const video = videoRef.current; const newTime = percent * video.duration; video.currentTime = newTime; // 🔥 IMPORTANT FIX if (video.paused) { video.play().catch(() => { }); } } }} >

{/* Right action bar */}

goToCreator(reel.channelUserId)} >

{reel.channelImage ? ( {reel.creator}

) : ( reel.initial )}

{/* Like */} {/* Gift */}

setGiftOpen(true)} >

Gift

{/* Comment */}

setCommentReelId(reel.id)} >

{reel.comments}

{/* Share */}

{ e.stopPropagation(); share({ title: reel.caption || reel.channelName, path: `/reel/${reel.id}`, }); }} >

{reelCopied ? "Copied!" : "Share"}

{/* More */}

setReelActionsOpen(true)} >

{/* Up / Down nav */}

{/* ── Right panel ────────────────────────────────────────────────── */}

More Reels

{FILTERS.map((f) => ( ))}

{reels.map((r, i) => (

setIdx(i)} >

{i === idx && (

)}

{r.creator}

{r.caption}

{r.likes} {r.comments}

))} {/* Sentinel triggers next page when scrolled into view */}

{isLoadingMore && (

)}

{/* Comment bottom sheet */} {commentReelId && ( setCommentReelId(null)} contentType={3} contentId={commentReelId} totalComments={0} canComment /> )} {/* Gift modal */} {giftOpen && reel && ( setGiftOpen(false)} /> )} {/* Content actions modal (Watch Later, Playlist, Report) */} {reelActionsOpen && reel && ( setReelActionsOpen(false)} /> )}

); }