feat: chat widget

app/api/live/route.ts

@@ -66,8 +66,10 @@ export async function GET() {
     },
   );
 
-  if (!response.ok)
-    throw new Error(`YouTube API error: ${response.statusText}`);
+  if (!response.ok) {
+    console.error(`YouTube API error: ${response.statusText}`);
+    return NextResponse.json("none");
+  }
 
   const data: APISearchResponse = await response.json();
 
@@ -88,4 +90,6 @@ export async function GET() {
   return NextResponse.json<YoutubeLiveInfo>(res);
 }
 
-export const revalidate = 60;
+export const POST = GET;
+
+export const revalidate = 60;

app/widget/chat/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { Countdown } from "@/app/(ui)/rubgram/client";
+import type { YoutubeLiveInfo } from "@/app/api/live/route";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { throwNotOk } from "@/lib/utils";
+import { RefreshCw } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
+import { MessageCircleOff } from "lucide-react";
+
+export default function ChatWidget() {
+  const [cooldown, setCooldown] = useState<Date>();
+  const [loading, setLoading] = useState(false);
+  const [notFound, setNotFound] = useState(false);
+  const router = useRouter();
+
+  const load = useCallback(async () => {
+    try {
+      setLoading(true);
+      // post prevents caching
+      const data: YoutubeLiveInfo = await fetch("/api/live", { method: "POST" })
+        .then(throwNotOk)
+        .then((r) => r.json());
+      if (data === "none") return setNotFound(true);
+      const vid = new URL(data.url).searchParams.get("v");
+      router.push(`https://studio.youtube.com/live_chat?is_popout=1&v=${vid}`);
+    } catch (e) {
+      console.error(e);
+      setNotFound(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [router]);
+
+  useEffect(() => {
+    if (!notFound) load();
+  }, [load, notFound]);
+
+  return notFound ? (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-5 rounded-xl border bg-zinc-800/50 text-4xl">
+      <MessageCircleOff size={64} className="opacity-50" />
+      <Button
+        onClick={() => {
+          load().finally(() => setCooldown(new Date(Date.now() + 60_000)));
+        }}
+        size="lg"
+        disabled={!!cooldown || loading}
+      >
+        {loading ? <Spinner /> : <RefreshCw />}
+        {cooldown ? <Countdown time={cooldown} /> : "รีโหลดใหม่"}
+      </Button>
+    </div>
+  ) : (
+    <div className="flex h-full w-full items-center justify-center">
+      <Spinner />
+    </div>
+  );
+}