126 lines
6.4 KiB
Plaintext
126 lines
6.4 KiB
Plaintext
---
|
|
import Layout from "@layouts/Layout.astro";
|
|
import TitleBar from "@components/TitleBar.astro";
|
|
import { format } from "date-fns";
|
|
import { zhCN } from "date-fns/locale";
|
|
import MetadataRow from "@components/InfoPage/MetadataRow.astro";
|
|
import { getAllSnapshots } from "src/db/snapshots/getAllSnapshots";
|
|
import { getAidFromBV } from "src/db/bilibili_metadata/getAidFromBV";
|
|
import { getVideoMetadata } from "src/db/bilibili_metadata/getVideoMetadata";
|
|
import { aidExists as idExists } from "src/db/bilibili_metadata/aidExists";
|
|
|
|
const { id } = Astro.params;
|
|
|
|
async function getVideoAid(id: string) {
|
|
if (id.startsWith("av")) {
|
|
return parseInt(id.slice(2));
|
|
} else if (id.startsWith("BV")) {
|
|
return getAidFromBV(id);
|
|
}
|
|
return parseInt(id);
|
|
}
|
|
|
|
if (!id) {
|
|
Astro.response.status = 404;
|
|
return new Response(null, { status: 404 });
|
|
}
|
|
const aid = await getVideoAid(id);
|
|
if (!aid || isNaN(aid)) {
|
|
Astro.response.status = 404;
|
|
return new Response(null, { status: 404 });
|
|
}
|
|
const aidExists = await idExists(aid);
|
|
if (!aidExists) {
|
|
Astro.response.status = 404;
|
|
return new Response(null, { status: 404 });
|
|
}
|
|
const videoInfo = await getVideoMetadata(aid);
|
|
const snapshots = await getAllSnapshots(aid);
|
|
---
|
|
|
|
<Layout>
|
|
<TitleBar />
|
|
<main class="flex flex-col items-center min-h-screen gap-8 mt-10 md:mt-6 relative z-0 overflow-x-auto pb-8">
|
|
<div class="w-full lg:max-w-4xl lg:mx-auto lg:p-6">
|
|
<h1 class="text-2xl font-medium ml-2 mb-4">
|
|
视频信息: <a href={`https://www.bilibili.com/video/av${aid}`} class="underline">av{aid}</a>
|
|
</h1>
|
|
|
|
<div class="mb-6">
|
|
<h2 class="px-2 mb-2 text-xl font-medium">基本信息</h2>
|
|
<div class="overflow-x-auto max-w-full px-2">
|
|
<table class="table-fixed">
|
|
<tbody>
|
|
<MetadataRow title="ID" description={videoInfo?.id} />
|
|
<MetadataRow title="av 号" description={videoInfo?.aid} />
|
|
<MetadataRow title="BV 号" description={videoInfo?.bvid} />
|
|
<MetadataRow title="标题" description={videoInfo?.title} />
|
|
<MetadataRow title="描述" description={videoInfo?.description} />
|
|
<MetadataRow title="UID" description={videoInfo?.uid} />
|
|
<MetadataRow title="标签" description={videoInfo?.tags} />
|
|
<MetadataRow
|
|
title="发布时间"
|
|
description={format(new Date(videoInfo?.published_at), "yyyy-MM-dd HH:mm:ss", {
|
|
locale: zhCN,
|
|
})}
|
|
/>
|
|
<MetadataRow title="时长 (秒)" description={videoInfo?.duration} />
|
|
<MetadataRow
|
|
title="创建时间"
|
|
description={format(new Date(videoInfo?.created_at), "yyyy-MM-dd HH:mm:ss", {
|
|
locale: zhCN,
|
|
})}
|
|
/>
|
|
<MetadataRow title="封面" description={videoInfo?.cover_url} />
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 class="px-2 mb-2 text-xl font-medium">播放量历史数据</h2>
|
|
{
|
|
snapshots && snapshots.length > 0 ? (
|
|
<div class="overflow-x-auto px-2">
|
|
<table class="table-auto w-full">
|
|
<thead>
|
|
<tr>
|
|
<th class="border dark:border-zinc-500 px-4 py-2 font-medium">创建时间</th>
|
|
<th class="border dark:border-zinc-500 px-4 py-2 font-medium">观看</th>
|
|
<th class="border dark:border-zinc-500 px-4 py-2 font-medium">硬币</th>
|
|
<th class="border dark:border-zinc-500 px-4 py-2 font-medium">点赞</th>
|
|
<th class="border dark:border-zinc-500 px-4 py-2 font-medium">收藏</th>
|
|
<th class="border dark:border-zinc-500 px-4 py-2 font-medium">分享</th>
|
|
<th class="border dark:border-zinc-500 px-4 py-2 font-medium">弹幕</th>
|
|
<th class="border dark:border-zinc-500 px-4 py-2 font-medium">评论</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{snapshots.map((snapshot) => (
|
|
<tr>
|
|
<td class="border dark:border-zinc-500 px-4 py-2">
|
|
{format(new Date(snapshot.created_at), "yyyy-MM-dd HH:mm:ss", {
|
|
locale: zhCN,
|
|
})}
|
|
</td>
|
|
<td class="border dark:border-zinc-500 px-4 py-2">{snapshot.views}</td>
|
|
<td class="border dark:border-zinc-500 px-4 py-2">{snapshot.coins}</td>
|
|
<td class="border dark:border-zinc-500 px-4 py-2">{snapshot.likes}</td>
|
|
<td class="border dark:border-zinc-500 px-4 py-2">{snapshot.favorites}</td>
|
|
<td class="border dark:border-zinc-500 px-4 py-2">{snapshot.shares}</td>
|
|
<td class="border dark:border-zinc-500 px-4 py-2">{snapshot.danmakus}</td>
|
|
<td class="border dark:border-zinc-500 px-4 py-2">{snapshot.replies}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
<p>暂无历史数据。</p>
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</Layout>
|