96 lines
2.6 KiB
TypeScript
96 lines
2.6 KiB
TypeScript
import { formatDateTime } from "@/components/SearchResults";
|
||
import { treaty } from "@elysiajs/eden";
|
||
import type { App } from "@backend/src";
|
||
|
||
// @ts-expect-error anyway...
|
||
const app = treaty<App>(import.meta.env.VITE_API_URL!);
|
||
|
||
type VideosResponse = Awaited<ReturnType<Awaited<typeof app.videos.unlabelled>["get"]>>["data"];
|
||
|
||
|
||
interface VideoInfoProps {
|
||
video: Exclude<VideosResponse, null>[number];
|
||
}
|
||
|
||
export function VideoInfo({ video }: VideoInfoProps) {
|
||
const formatDuration = (duration: number) => {
|
||
return `${Math.floor(duration / 60)}:${(duration % 60).toString().padStart(2, "0")}`;
|
||
};
|
||
|
||
return (
|
||
<div className="mb-24">
|
||
<div className="flex flex-col sm:flex-row sm:gap-4">
|
||
{video.cover_url && (
|
||
<a
|
||
href={`https://www.bilibili.com/video/${video.bvid}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="min-w-full sm:min-w-60 md:min-w-80 max-w-full
|
||
sm:max-w-60 md:max-w-80 aspect-video"
|
||
>
|
||
<img
|
||
src={video.cover_url}
|
||
referrerPolicy="no-referrer"
|
||
className="w-full h-full object-cover rounded-lg"
|
||
alt="Video cover"
|
||
/>
|
||
</a>
|
||
)}
|
||
<div>
|
||
<div className="max-sm:mt-6 flex items-center gap-2">
|
||
<h1 className="text-2xl font-medium">
|
||
<a
|
||
href={`https://www.bilibili.com/video/${video.bvid}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="hover:underline"
|
||
>
|
||
{video.title ? video.title : "未知视频标题"}
|
||
</a>
|
||
</h1>
|
||
</div>
|
||
|
||
<div className="flex justify-between mt-3">
|
||
<div>
|
||
<p>
|
||
<span>{video.bvid}</span> · <span>av{video.aid}</span>
|
||
</p>
|
||
<p>
|
||
<span>发布于 {formatDateTime(new Date(video.published_at!))}</span>
|
||
<br />
|
||
<span>播放：{(video.views ?? 0).toLocaleString()}</span>
|
||
<span>时长：{formatDuration(video.duration || 0)}</span>
|
||
</p>
|
||
<p>
|
||
UP主：
|
||
<a
|
||
className="underline"
|
||
href={`https://space.bilibili.com/${video.uid}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
{video.username}
|
||
</a>
|
||
</p>
|
||
<p>
|
||
<span>
|
||
<b>标签</b>
|
||
<br />
|
||
{video.tags?.replaceAll(",", "，")}
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-6">
|
||
<h3 className="font-medium text-lg mb-2">简介</h3>
|
||
<pre className="max-w-full wrap-anywhere break-all text-on-surface-variant text-sm md:text-base whitespace-pre-wrap dark:text-dark-on-surface-variant font-zh">
|
||
{video.description || "暂无简介"}
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|