"use client"; import { use as usePromise } from "react"; export default function Page({ params, }: { params: Promise<{ bookId: string }>; }) { const { bookId } = usePromise(params); return ; } /* ================= CLIENT ================= */ import clsx from "clsx"; import { useEffect, useMemo, useRef, useState } from "react"; import { useDramaDetail } from "@/hooks/useDramaDetail"; import { usePlyrPlayer } from "@/hooks/usePlyrPlayer"; import type { PlayerSource } from "@/types/drama"; import { useDramaChaptersInfinite } from "@/hooks/useDramaChaptersInfinite"; import Image from "next/image"; import Iklan from "@/app/components/Iklan"; import Head from "next/head"; export function WatchClient({ bookId }: { bookId: string }) { const { meta, episodes, isLoadingMore, isReachingEnd, loadMore } = useDramaChaptersInfinite(bookId); const { detail } = useDramaDetail(bookId, 1); const [episodeIdx, setEpisodeIdx] = useState(0); const videoRef = useRef(null); // safe guards const ep = episodes[episodeIdx]; const cover = meta.bookCover ?? ""; const poster = ep?.thumbnail || cover || ""; // --- CDN selection (di luar Plyr) const cdnOptions = useMemo( () => Array.from(new Set((ep?.sources ?? []).map((s) => s.cdn))), [ep?.sources] ); const [cdn, setCdn] = useState(null); const filteredSources: PlayerSource[] = useMemo(() => { // const list = (ep?.sources ?? []).filter((s) => !s.isVip); const list = ep?.sources ?? []; const onCdn = cdn ? list.filter((s) => s.cdn === cdn) : list; return onCdn.slice().sort((a, b) => { if (!!b.isDefault !== !!a.isDefault) return b.isDefault ? 1 : -1; return b.quality - a.quality; }); }, [ep?.sources, cdn]); const qualities = useMemo( () => Array.from(new Set((filteredSources ?? []).map((s) => s.quality))).sort( (a, b) => b - a ), [filteredSources] ); // defaultQuality dari detail/uiHints atau kualitas tertinggi const defaultQ = useMemo( () => detail?.uiHints?.defaultQuality ?? qualities[0], [detail?.uiHints?.defaultQuality, qualities] ); useEffect(() => { const def = ep?.sources?.find((s) => s.isDefault) ?? ep?.sources?.slice().sort((a, b) => b.quality - a.quality)[0]; setCdn(def?.cdn ?? ep?.sources?.[0]?.cdn ?? null); setQuality(defaultQ); }, [defaultQ, episodeIdx, ep?.sources]); const { switchQuality } = usePlyrPlayer(videoRef, filteredSources, { poster: ep?.thumbnail ?? detail?.cover ?? null, orientation: detail?.orientation ?? "portrait", defaultQuality: detail?.uiHints?.defaultQuality ?? 720, controls: [ "quality", "play", "progress", "current-time", "mute", "fullscreen", "settings", "pip", "sources", "airplay", "volume", ], }); const [quality, setQuality] = useState(qualities[0]); useEffect(() => { setQuality(qualities[0]); }, [episodeIdx, cdn, qualities]); const onSetQuality = async (q: number) => { setQuality(q); switchQuality(q); }; return ( <> {`Tonton ${meta?.bookName ?? "Drama"} - MySite`} {meta?.tags?.length && ( )}
{/* Header area */}

Tonton Drama

{detail?.title ?? "Memuat…"}

{detail?.playCount ?? "—"} {detail?.chapterCount ?? 0} Episode {!!detail?.corner?.name && ( {detail.corner.name} )}
{/* Layout */}
{/* Player */}
{/* poster bg */}
{/* Description */}

{detail?.description ?? ""}

{(detail?.tags ?? []).map((t) => ( {t} ))}
{/* Aside */}
); }