504 lines
15 KiB
TypeScript
504 lines
15 KiB
TypeScript
import type { Route } from "./+types/index";
|
||
import { treaty } from "@elysiajs/eden";
|
||
import type { App } from "@backend/src";
|
||
import { memo, useEffect, useState, useMemo } from "react";
|
||
import { Skeleton } from "@/components/ui/skeleton";
|
||
import { TriangleAlert } from "lucide-react";
|
||
import { Title } from "@/components/Title";
|
||
import { toast } from "sonner";
|
||
import { Error } from "@/components/Error";
|
||
import { Layout } from "@/components/Layout";
|
||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
import { formatDateTime } from "@/components/SearchResults";
|
||
import { ViewsChart } from "./views-chart";
|
||
import { processSnapshots, detectMilestoneAchievements, type MilestoneAchievement } from "./lib";
|
||
import { DataTable } from "./data-table";
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||
import { If, Then } from "react-if";
|
||
import {
|
||
AlertDialog,
|
||
AlertDialogAction,
|
||
AlertDialogCancel,
|
||
AlertDialogContent,
|
||
AlertDialogDescription,
|
||
AlertDialogFooter,
|
||
AlertDialogHeader,
|
||
AlertDialogTitle,
|
||
AlertDialogTrigger,
|
||
} from "@/components/ui/alert-dialog";
|
||
import { av2bv } from "@backend/lib/bilibiliID";
|
||
import { columns, type Snapshot } from "./columns";
|
||
import { HOUR } from "@core/lib";
|
||
|
||
// @ts-ignore idk
|
||
const app = treaty<App>(import.meta.env.VITE_API_URL!);
|
||
|
||
type SongInfo = Awaited<ReturnType<ReturnType<typeof app.song>["info"]["get"]>>["data"];
|
||
type EtaInfo = Awaited<ReturnType<ReturnType<typeof app.video>["eta"]["get"]>>["data"];
|
||
export type Snapshots = Awaited<ReturnType<ReturnType<typeof app.video>["snapshots"]["get"]>>["data"];
|
||
type SongInfoError = Awaited<ReturnType<ReturnType<typeof app.song>["info"]["get"]>>["error"];
|
||
type SnapshotsError = Awaited<ReturnType<ReturnType<typeof app.video>["snapshots"]["get"]>>["error"];
|
||
type EtaInfoError = Awaited<ReturnType<ReturnType<typeof app.video>["eta"]["get"]>>["error"];
|
||
|
||
export async function clientLoader({ params }: Route.LoaderArgs) {
|
||
return { id: params.id };
|
||
}
|
||
|
||
export function formatHours(hours: number): string {
|
||
if (hours >= 24 * 14) return `${Math.floor(hours / 24)} 天`;
|
||
if (hours >= 24) return `${Math.floor(hours / 24)} 天 ${Math.round(hours) % 24} 小时`;
|
||
if (hours >= 1) return `${Math.floor(hours)} 时 ${Math.round((hours % 1) * 60)} 分`;
|
||
return `${Math.round(hours * 60)} 分钟`;
|
||
}
|
||
|
||
export function addHoursToNow(hours: number): string {
|
||
const d = new Date();
|
||
d.setSeconds(d.getSeconds() + hours * 3600);
|
||
return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, "0")}-${d.getDate().toString().padStart(2, "0")} ${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}`;
|
||
}
|
||
|
||
const StatsTable = ({ snapshots }: { snapshots: Snapshots | null }) => {
|
||
if (!snapshots || snapshots.length === 0) {
|
||
return null;
|
||
}
|
||
|
||
const tableData: Snapshot[] = snapshots.map((snapshot) => ({
|
||
createdAt: snapshot.createdAt,
|
||
views: snapshot.views,
|
||
likes: snapshot.likes || 0,
|
||
favorites: snapshot.favorites || 0,
|
||
coins: snapshot.coins || 0,
|
||
danmakus: snapshot.danmakus || 0,
|
||
shares: snapshot.shares || 0,
|
||
}));
|
||
|
||
return <DataTable columns={columns} data={tableData} />;
|
||
};
|
||
|
||
const getMileStoneName = (views: number) => {
|
||
if (views < 100000) return "殿堂";
|
||
if (views < 1000000) return "传说";
|
||
return "神话";
|
||
};
|
||
|
||
const SnapshotsView = ({
|
||
snapshots,
|
||
etaData,
|
||
publishedAt,
|
||
}: {
|
||
snapshots: Snapshots | null;
|
||
etaData: EtaInfo | null;
|
||
publishedAt?: string;
|
||
}) => {
|
||
const [timeRange, setTimeRange] = useState<string>("7d");
|
||
const [timeOffsetHours, setTimeOffsetHours] = useState(0);
|
||
|
||
// Calculate time range in hours
|
||
const timeRangeHours = useMemo(() => {
|
||
switch (timeRange) {
|
||
case "6h":
|
||
return 6;
|
||
case "24h":
|
||
return 24;
|
||
case "7d":
|
||
return 7 * 24;
|
||
case "14d":
|
||
return 14 * 24;
|
||
case "30d":
|
||
return 30 * 24;
|
||
case "90d":
|
||
return 90 * 24;
|
||
case "365d":
|
||
return 365 * 24;
|
||
default:
|
||
return undefined; // "all"
|
||
}
|
||
}, [timeRange]);
|
||
|
||
const sortedSnapshots = useMemo(() => {
|
||
if (!snapshots) return null;
|
||
return [...snapshots]
|
||
.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())
|
||
.map((s) => ({
|
||
...s,
|
||
timestamp: new Date(s.createdAt).getTime(),
|
||
}));
|
||
}, [snapshots]);
|
||
|
||
const canGoBack = useMemo(() => {
|
||
if (!sortedSnapshots || !timeRangeHours || timeRangeHours <= 0) return false;
|
||
const oldestTimestamp = sortedSnapshots[0].timestamp;
|
||
const newestTimestamp = sortedSnapshots[sortedSnapshots.length - 1].timestamp;
|
||
const timeDiff = newestTimestamp - oldestTimestamp;
|
||
return timeOffsetHours * HOUR + timeRangeHours * HOUR < timeDiff;
|
||
}, [snapshots, timeRangeHours, timeOffsetHours]);
|
||
|
||
const canGoForward = useMemo(() => {
|
||
if (!sortedSnapshots || !timeRangeHours || timeRangeHours <= 0 || timeOffsetHours <= 0) return false;
|
||
return true;
|
||
}, [snapshots, timeRangeHours, timeOffsetHours]);
|
||
|
||
const processedData = useMemo(
|
||
() => processSnapshots(sortedSnapshots, timeRangeHours, timeOffsetHours),
|
||
[snapshots, timeRangeHours, timeOffsetHours],
|
||
);
|
||
|
||
if (!snapshots) {
|
||
return <Skeleton className="w-full h-50 rounded-lg mt-4" />;
|
||
}
|
||
|
||
if (snapshots.length === 0) {
|
||
return (
|
||
<div className="mt-4">
|
||
<p>暂无数据</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const milestoneAchievements = detectMilestoneAchievements(snapshots, publishedAt);
|
||
|
||
const handleBack = () => {
|
||
if (timeRangeHours && timeRangeHours > 0) {
|
||
setTimeOffsetHours((prev) => prev + timeRangeHours);
|
||
}
|
||
};
|
||
|
||
const handleForward = () => {
|
||
if (timeRangeHours && timeRangeHours > 0) {
|
||
setTimeOffsetHours((prev) => Math.max(0, prev - timeRangeHours));
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="mt-4 stat-num">
|
||
<p>
|
||
播放: {snapshots[0].views.toLocaleString()}
|
||
<span className="text-secondary-foreground">
|
||
{" "}
|
||
更新于 {formatDateTime(new Date(snapshots[0].createdAt))}
|
||
</span>
|
||
</p>
|
||
{etaData && (
|
||
<>
|
||
{etaData!.views <= 10000000 && (
|
||
<p>
|
||
下一个成就：{getMileStoneName(etaData!.views)}
|
||
<span className="text-secondary-foreground">
|
||
{" "}
|
||
预计 {formatHours(etaData!.eta)} 后（{addHoursToNow(etaData!.eta)}）达成
|
||
</span>
|
||
</p>
|
||
)}
|
||
|
||
{milestoneAchievements.length > 0 && (
|
||
<div className="mt-2">
|
||
<p className="text-sm text-secondary-foreground">成就达成时间：</p>
|
||
{milestoneAchievements.map((achievement) => (
|
||
<p key={achievement.milestone} className="text-sm text-secondary-foreground ml-2">
|
||
{achievement.milestoneName}（{achievement.milestone.toLocaleString()}） -{" "}
|
||
{formatDateTime(new Date(achievement.achievedAt))}
|
||
{achievement.timeTaken && ` - 用时 ${achievement.timeTaken}`}
|
||
</p>
|
||
))}
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
<Tabs defaultValue="chart" className="mt-4">
|
||
<div className="flex justify-between items-center mb-4">
|
||
<h2 className="text-2xl font-medium">数据</h2>
|
||
<TabsList>
|
||
<TabsTrigger value="chart">图表</TabsTrigger>
|
||
<TabsTrigger value="table">表格</TabsTrigger>
|
||
</TabsList>
|
||
</div>
|
||
|
||
<TabsContent value="chart">
|
||
<div className="flex flex-col gap-2">
|
||
<div className="flex justify-between items-center">
|
||
<Button variant="outline" size="sm" onClick={handleBack} disabled={!canGoBack}>
|
||
上一页
|
||
</Button>
|
||
<Select value={timeRange} onValueChange={setTimeRange}>
|
||
<SelectTrigger className="w-32">
|
||
<SelectValue placeholder="时间范围" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="6h">6小时</SelectItem>
|
||
<SelectItem value="24h">24小时</SelectItem>
|
||
<SelectItem value="7d">7天</SelectItem>
|
||
<SelectItem value="14d">14天</SelectItem>
|
||
<SelectItem value="30d">30天</SelectItem>
|
||
<SelectItem value="90d">90天</SelectItem>
|
||
<SelectItem value="365d">1年</SelectItem>
|
||
<SelectItem value="all">全部</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<Button variant="outline" size="sm" onClick={handleForward} disabled={!canGoForward}>
|
||
下一页
|
||
</Button>
|
||
</div>
|
||
<ViewsChart chartData={processedData} />
|
||
</div>
|
||
</TabsContent>
|
||
<TabsContent value="table">
|
||
<StatsTable snapshots={snapshots} />
|
||
</TabsContent>
|
||
</Tabs>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const MemoizedSnapshotsView = memo(SnapshotsView);
|
||
|
||
export default function SongInfo({ loaderData }: Route.ComponentProps) {
|
||
const [songInfo, setData] = useState<SongInfo | null>(null);
|
||
const [snapshots, setSnapshots] = useState<Snapshots | null>(null);
|
||
const [etaData, setEtaData] = useState<EtaInfo | null>(null);
|
||
const [error, setError] = useState<SongInfoError | SnapshotsError | EtaInfoError | null>(null);
|
||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||
const [songName, setSongName] = useState("");
|
||
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
||
const [isDeleting, setIsDeleting] = useState(false);
|
||
const [isSaving, setIsSaving] = useState(false);
|
||
|
||
const getEta = async (aid: number) => {
|
||
const { data, error } = await app.video({ id: `av${aid}` }).eta.get();
|
||
if (error) {
|
||
console.log(error);
|
||
return;
|
||
}
|
||
setEtaData(data);
|
||
};
|
||
|
||
const getSnapshots = async (aid: number) => {
|
||
const { data, error } = await app.video({ id: `av${aid}` }).snapshots.get();
|
||
if (error) {
|
||
console.log(error);
|
||
return;
|
||
}
|
||
setSnapshots(data);
|
||
};
|
||
|
||
const getInfo = async () => {
|
||
const { data, error } = await app.song({ id: loaderData.id }).info.get();
|
||
if (error) {
|
||
console.log(error);
|
||
setError(error);
|
||
return;
|
||
}
|
||
setData(data);
|
||
};
|
||
|
||
useEffect(() => {
|
||
getInfo();
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (!songInfo) return;
|
||
const aid = songInfo.aid;
|
||
if (!aid) return;
|
||
getSnapshots(aid);
|
||
getEta(aid);
|
||
}, [songInfo]);
|
||
|
||
useEffect(() => {
|
||
if (songInfo?.name) {
|
||
setSongName(songInfo.name);
|
||
}
|
||
}, [songInfo?.name]);
|
||
|
||
if (!songInfo && !error) {
|
||
return (
|
||
<Layout>
|
||
<Title title="加载中" />
|
||
<Skeleton className="mt-6 w-full aspect-video rounded-lg" />
|
||
<div className="mt-6 flex justify-between items-baseline">
|
||
<Skeleton className="w-60 h-10 rounded-sm" />
|
||
<Skeleton className="w-25 h-10 rounded-sm" />
|
||
</div>
|
||
</Layout>
|
||
);
|
||
}
|
||
|
||
if (error?.status === 404) {
|
||
return (
|
||
<div className="w-screen min-h-screen flex items-center justify-center">
|
||
<Title title="未找到曲目" />
|
||
<div className="max-w-md w-full bg-gray-100 dark:bg-neutral-900 rounded-2xl shadow-lg p-6 flex flex-col gap-4 items-center text-center">
|
||
<div className="w-16 h-16 flex items-center justify-center rounded-full bg-red-500 text-white text-3xl">
|
||
<TriangleAlert size={34} className="-translate-y-0.5" />
|
||
</div>
|
||
<h1 className="text-3xl font-semibold text-neutral-900 dark:text-neutral-100">无法找到曲目</h1>
|
||
<a href={`/song/${loaderData.id}/add`} className="text-secondary-foreground">
|
||
点此收录
|
||
</a>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (error) {
|
||
return <Error error={error} />;
|
||
}
|
||
|
||
const formatDuration = (duration: number) => {
|
||
return `${Math.floor(duration / 60)}:${(duration % 60).toString().padStart(2, "0")}`;
|
||
};
|
||
|
||
const handleSongNameChange = async () => {
|
||
if (songName.trim() === "") return;
|
||
setIsSaving(true);
|
||
const { data, error } = await app.song({ id: loaderData.id }).info.patch(
|
||
{ name: songName },
|
||
{
|
||
headers: {
|
||
Authorization: `Bearer ${localStorage.getItem("sessionID") || ""}`,
|
||
},
|
||
},
|
||
);
|
||
setIsDialogOpen(false);
|
||
setIsSaving(false);
|
||
if (error || !data) {
|
||
toast.error(`无法更新：${error.value.message || "未知错误"}`);
|
||
}
|
||
getInfo();
|
||
};
|
||
|
||
const handleDeleteSong = async () => {
|
||
if (!songInfo) return;
|
||
setIsDeleting(true);
|
||
try {
|
||
const { data, error } = await app.song({ id: songInfo.id }).delete(undefined, {
|
||
headers: {
|
||
Authorization: `Bearer ${localStorage.getItem("sessionID") || ""}`,
|
||
},
|
||
});
|
||
|
||
if (error) {
|
||
toast.error(`删除失败：${error.value.message || "未知错误"}`);
|
||
return;
|
||
}
|
||
|
||
toast.success("歌曲删除成功");
|
||
// Redirect to home page after successful deletion
|
||
setTimeout(() => {
|
||
window.location.href = "/";
|
||
}, 1000);
|
||
} catch (err) {
|
||
toast.error("删除失败：网络错误");
|
||
} finally {
|
||
setIsDeleting(false);
|
||
setIsDeleteDialogOpen(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Layout>
|
||
<Title title={songInfo!.name ? songInfo!.name : "未知歌曲名"} />
|
||
{songInfo!.cover && (
|
||
<img
|
||
src={songInfo!.cover}
|
||
referrerPolicy="no-referrer"
|
||
className="w-full aspect-video object-cover rounded-lg mt-6"
|
||
/>
|
||
)}
|
||
<div className="mt-6 flex items-center gap-2">
|
||
<h1 className="text-4xl font-medium" onDoubleClick={() => setIsDialogOpen(true)}>
|
||
{songInfo!.name ? songInfo!.name : "未知歌曲名"}
|
||
</h1>
|
||
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>编辑歌曲名称</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="space-y-4">
|
||
<Input
|
||
value={songName}
|
||
onChange={(e) => setSongName(e.target.value)}
|
||
placeholder="请输入歌曲名称"
|
||
className="w-full"
|
||
/>
|
||
<div className="flex justify-end gap-2">
|
||
<Button variant="outline" onClick={() => setIsDialogOpen(false)}>
|
||
取消
|
||
</Button>
|
||
<Button onClick={handleSongNameChange}>{isSaving ? "保存中..." : "保存"}</Button>
|
||
</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
<div className="flex justify-between mt-3 stat-num">
|
||
<div>
|
||
<If condition={songInfo!.aid}>
|
||
<Then>
|
||
<p>
|
||
<span>av{songInfo!.aid}</span> · <span>{av2bv(songInfo!.aid!)}</span>
|
||
</p>
|
||
</Then>
|
||
</If>
|
||
<p>
|
||
<If condition={songInfo!.duration}>
|
||
<Then>
|
||
<span>
|
||
时长：
|
||
{formatDuration(songInfo!.duration!)}
|
||
</span>
|
||
</Then>
|
||
</If>
|
||
<span> · </span>
|
||
<If condition={songInfo!.publishedAt}>
|
||
<Then>
|
||
<span>发布于 {formatDateTime(new Date(songInfo!.publishedAt!))}</span>
|
||
</Then>
|
||
</If>
|
||
</p>
|
||
|
||
<span>
|
||
P主：
|
||
{songInfo!.producer ? songInfo!.producer : "未知P主"}
|
||
</span>
|
||
</div>
|
||
<div className="flex flex-col gap-3">
|
||
{songInfo!.aid && (
|
||
<Button className="bg-pink-400">
|
||
<a href={`https://www.bilibili.com/video/${av2bv(songInfo!.aid)}`}>哔哩哔哩</a>
|
||
</Button>
|
||
)}
|
||
<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
|
||
<AlertDialogTrigger asChild>
|
||
<Button variant="destructive">删除</Button>
|
||
</AlertDialogTrigger>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>确认删除</AlertDialogTitle>
|
||
<AlertDialogDescription>你确定要删除本歌曲吗？</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||
<AlertDialogAction
|
||
onClick={handleDeleteSong}
|
||
disabled={isDeleting}
|
||
className="bg-red-600 hover:bg-red-700"
|
||
>
|
||
{isDeleting ? "删除中..." : "确认删除"}
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
</div>
|
||
</div>
|
||
<MemoizedSnapshotsView
|
||
snapshots={snapshots}
|
||
etaData={etaData}
|
||
publishedAt={songInfo!.publishedAt || undefined}
|
||
/>
|
||
</Layout>
|
||
);
|
||
}
|