48 lines
1.5 KiB
TypeScript
Executable File
48 lines
1.5 KiB
TypeScript
Executable File
import { TooltipContent, TooltipTrigger } from "@radix-ui/react-tooltip";
|
|
import { TvMinimalPlay } from "lucide-react";
|
|
import Link from "next/link";
|
|
import type { YoutubeLiveInfo } from "@/app/api/live/route";
|
|
import Image from "@/components/image";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Tooltip } from "@/components/ui/tooltip";
|
|
|
|
export async function LiveButton() {
|
|
const live: YoutubeLiveInfo = await fetch(`http://localhost:3000/api/live`)
|
|
.then((e) => e.json())
|
|
.catch(() => "none");
|
|
if (live === "none") return;
|
|
const { url, thumbnails, title } = live;
|
|
|
|
const targetWidth = 220;
|
|
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Link href={url}>
|
|
<Button variant="outline" type="button">
|
|
<TvMinimalPlay className="animate-pulse text-red-500" /> LIVE
|
|
</Button>
|
|
</Link>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<div className="m-2 flex flex-col gap-2 rounded border bg-card p-2">
|
|
<Image
|
|
height={thumbnails.height * (targetWidth / thumbnails.width)}
|
|
width={targetWidth}
|
|
src={thumbnails.url}
|
|
alt="yt thumbnail"
|
|
className="rounded border"
|
|
/>
|
|
<div
|
|
// oxlint-disable-next-line tailwindcss/no-conflicting-classes
|
|
className="line-clamp-2 truncate"
|
|
style={{ maxWidth: targetWidth }}
|
|
>
|
|
{title}
|
|
</div>
|
|
</div>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|