"use client"; import Link from "next/link"; import { useRouter, usePathname } from "next/navigation"; import { useCallback, useEffect, useRef, useState } from "react"; import { useSession } from "@/components/session-provider"; import { Avatar, IconButton } from "@/components/ui"; import { InstallButton } from "@/components/install-button"; import { NotificationBell } from "@/components/notification-bell"; import { api } from "@/lib/api-client"; import { LANGUAGES } from "@/lib/constants"; import { formatCount } from "@/lib/format"; type Suggestion = { text: string; source: string }; type SubscribedChannel = { channelId: string; name: string; handle: string; avatarUrl: string | null; isLive: boolean; subscriberCount: number; }; function Logo() { return ( PlayTube ); } function SearchBar({ onNavigate }: { onNavigate?: () => void }) { const router = useRouter(); const [value, setValue] = useState(""); const [suggestions, setSuggestions] = useState([]); const [trending, setTrending] = useState([]); const [open, setOpen] = useState(false); const [activeIndex, setActiveIndex] = useState(-1); const boxRef = useRef(null); useEffect(() => { const handler = (event: MouseEvent) => { if (boxRef.current && !boxRef.current.contains(event.target as Node)) setOpen(false); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, []); useEffect(() => { const handle = setTimeout(() => { if (!value.trim()) { setSuggestions([]); return; } void api<{ suggestions: Suggestion[] }>(`/api/search/suggest?q=${encodeURIComponent(value)}`) .then((data) => setSuggestions(data.suggestions)) .catch(() => undefined); }, 180); return () => clearTimeout(handle); }, [value]); useEffect(() => { void api<{ trending: string[] }>("/api/search/suggest?q=") .then((data) => setTrending(data.trending)) .catch(() => undefined); }, []); const submit = (query: string) => { const q = query.trim(); if (!q) return; setOpen(false); onNavigate?.(); router.push(`/results?q=${encodeURIComponent(q)}`); }; const list = value.trim() ? suggestions : trending.map((t) => ({ text: t, source: "trending" })); return (
{ event.preventDefault(); submit(value); }} role="search" className="flex" >
{open ? ( ) : null} { setValue(event.target.value); setOpen(true); setActiveIndex(-1); }} onFocus={() => setOpen(true)} onKeyDown={(event) => { if (event.key === "ArrowDown") { event.preventDefault(); setActiveIndex((i) => Math.min(i + 1, list.length - 1)); } else if (event.key === "ArrowUp") { event.preventDefault(); setActiveIndex((i) => Math.max(i - 1, -1)); } else if (event.key === "Enter" && activeIndex >= 0) { event.preventDefault(); submit(list[activeIndex].text); } }} placeholder="Search PlayTube" aria-label="Search PlayTube" className="h-full w-full bg-transparent text-sm outline-none placeholder:text-muted" />
{open && list.length > 0 ? (
{list.map((item, index) => ( ))}
) : null}
); } const MAIN_NAV = [ { href: "/", key: "home", icon: "M12 3 2 12h3v9h6v-6h2v6h6v-9h3z" }, { href: "/shorts", key: "shorts", icon: "M10 8l6 4-6 4zM4 6h3v12H4zm13 0h3v12h-3z" }, { href: "/subscriptions", key: "subscriptions", icon: "M4 6h16v2H4zm2-3h12v2H6zM4 11h16v10H4zm6 2v6l5-3z" }, { href: "/live", key: "live", icon: "M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm-5 3a5 5 0 0 1 .2-1.4L5 8.4A7.9 7.9 0 0 0 4 12c0 1.3.3 2.6.9 3.6l2.2-2.2A5 5 0 0 1 7 12zm10 0a5 5 0 0 1-.2 1.4l2.2 2.2A7.9 7.9 0 0 0 20 12c0-1.3-.3-2.6-.9-3.6l-2.2 2.2A5 5 0 0 1 17 12zM2 12a10 10 0 0 1 3-7.1L3.6 3.5A12 12 0 0 0 0 12s1.5 5 4.5 7.5l1.4-1.4A10 10 0 0 1 2 12zm20 0a10 10 0 0 1-3 7.1l1.4 1.4A12 12 0 0 0 24 12s-1.5-5-4.5-7.5l-1.4 1.4A10 10 0 0 1 22 12z" }, ]; const YOU_NAV = [ { href: "/history", key: "history" }, { href: "/playlists", key: "playlists" }, { href: "/playlist/watch_later", key: "watchLater" }, { href: "/playlist/liked", key: "liked" }, ]; function NavIcon({ path }: { path: string }) { return ( ); } function SidebarContent({ onNavigate }: { onNavigate?: () => void }) { const { user, channel, categories, t, lang, setLang } = useSession(); const [subs, setSubs] = useState([]); useEffect(() => { if (!user) return; void api<{ items: SubscribedChannel[] }>("/api/subscriptions") .then((data) => setSubs(data.items)) .catch(() => undefined); }, [user]); return ( ); } function AccountMenu() { const { user, channel, theme, setTheme, logout, t } = useSession(); const [open, setOpen] = useState(false); const ref = useRef(null); const router = useRouter(); useEffect(() => { const handler = (event: MouseEvent) => { if (ref.current && !ref.current.contains(event.target as Node)) setOpen(false); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, []); if (!user) { return ( ๐Ÿ‘ค {t("signIn")} ); } return (
{open ? (

{user.displayName}

{user.email}

{channel ? ( setOpen(false)} className="mt-3 block rounded-full bg-surface px-3 py-1.5 text-center text-sm font-semibold text-brand" > View my channel ) : ( )}
setOpen(false)} className="flex items-center gap-3 rounded-lg px-3 py-2 hover:bg-surface"> ๐ŸŽ›๏ธ Creator Studio setOpen(false)} className="flex items-center gap-3 rounded-lg px-3 py-2 hover:bg-surface"> โš™๏ธ {t("settings")}
) : null}
); } export function AppShell({ children }: { children: React.ReactNode }) { const { t, theme, setTheme } = useSession(); const pathname = usePathname(); const [collapsed, setCollapsed] = useState(false); const [drawerOpen, setDrawerOpen] = useState(false); const [uploadOpen, setUploadOpen] = useState(false); const isShorts = pathname?.startsWith("/shorts"); const isWatch = pathname?.startsWith("/watch") || pathname?.startsWith("/live"); useEffect(() => { try { setCollapsed(localStorage.getItem("playtube-sidebar") === "1"); } catch {} }, []); const closeDrawer = useCallback(() => setDrawerOpen(false), []); // Android hardware back button / browser back closes overlays first. useEffect(() => { if (!drawerOpen) return; window.history.pushState({ drawer: true }, ""); const onPop = () => setDrawerOpen(false); window.addEventListener("popstate", onPop); return () => window.removeEventListener("popstate", onPop); }, [drawerOpen]); useEffect(() => { const onBackButton = (event: Event) => { if (drawerOpen) { event.preventDefault(); setDrawerOpen(false); } }; document.addEventListener("backbutton", onBackButton); return () => document.removeEventListener("backbutton", onBackButton); }, [drawerOpen]); return (
{ if (window.innerWidth < 1024) setDrawerOpen(true); else { setCollapsed((v) => { try { localStorage.setItem("playtube-sidebar", v ? "0" : "1"); } catch {} return !v; }); } }} >
๐ŸŽฅ Create setTheme(theme === "dark" ? "light" : "dark")}> {theme === "dark" ? "โ˜€๏ธ" : "๐ŸŒ™"}
{drawerOpen ? (
) : null}
{children}
{uploadOpen ? null : null}
); }