"use client";
import { Music, Server } from "lucide-react";
import type { DiscordServer } from "@/types/music";
import { serverIconUrl } from "@/hooks/useServers";
/** 유튜브 뮤직 로고 형태(빨간 원 + 흰 링 + 재생 삼각형) */
export function Logo({ className = "" }: { className?: string }) {
return (
MusicBot
);
}
/** 유튜브 기본 썸네일(hq/mq/sd/0.jpg)은 4:3 안에 16:9 영상이 위아래 검은 띠와 함께 들어 있다. */
const LETTERBOXED_YT = /i\.ytimg\.com\/vi\/[^/]+\/(hqdefault|mqdefault|sddefault|0)\.jpg/;
/** 앨범아트/썸네일(이미지가 없으면 음표 아이콘) */
export function Thumb({
src,
className = "",
rounded = "rounded-sm",
iconSize = 18,
wide = false,
}: {
src?: string | null;
className?: string;
rounded?: string;
iconSize?: number;
/** 16:9 상자(동영상 행)면 true. 정사각형 상자에서만 검은 띠를 잘라낸다. */
wide?: boolean;
}) {
// 정사각형 상자에 4:3 유튜브 썸네일을 넣으면 검은 띠가 보이므로 4/3 배 확대해 띠를 잘라낸다.
const cropBars = !wide && !!src && LETTERBOXED_YT.test(src);
return (
{src ? (
// eslint-disable-next-line @next/next/no-img-element
) : (
)}
);
}
/** 디스코드 서버 아이콘(원형, 없으면 서버 아이콘) */
export function ServerAvatar({
server,
className = "",
iconSize = 20,
size = 128,
rounded = "rounded-full",
}: {
server: DiscordServer;
className?: string;
iconSize?: number;
size?: number;
rounded?: string;
}) {
const url = serverIconUrl(server, size);
return (
{url ? (
// eslint-disable-next-line @next/next/no-img-element
) : (
)}
);
}
/** 유튜브 뮤직 스타일 원형 로딩 표시 */
export function Spinner({ size = 32, label = "불러오는 중" }: { size?: number; label?: string }) {
return (
);
}
/** 재생 중 이퀄라이저 표시 */
export function Equalizer({ paused = false, className = "" }: { paused?: boolean; className?: string }) {
return (
);
}