mirror of
https://github.com/KuekHaoYang/KVideo.git
synced 2026-08-16 09:13:42 +08:00
kuekhaoyang
ad9e75bc8c
- Added EpisodeList component for displaying a list of episodes with selection functionality. - Created PlayerError component to handle and display video playback errors. - Developed VideoMetadata component to show detailed information about the video. - Implemented VideoPlayer component for video playback with error handling and loading states. - Introduced EmptyState and NoResults components for search results handling. - Created ResultsHeader component to display search results summary. - Developed SearchForm component for user input and search initiation. - Implemented SourceBadges component to show available video sources. - Created VideoGrid component to display search results in a grid format. - Added useSearchCache and useSearchStream hooks for managing search state and caching results. - Implemented useVideoPlayer hook for fetching and managing video details. - Added utility function to map source IDs to their respective names.
74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { Card } from '@/components/ui/Card';
|
|
import { Badge } from '@/components/ui/Badge';
|
|
import { Icons } from '@/components/ui/Icon';
|
|
import { getSourceName } from '@/lib/utils/source-names';
|
|
|
|
interface VideoMetadataProps {
|
|
videoData: any;
|
|
source: string | null;
|
|
title?: string | null;
|
|
}
|
|
|
|
export function VideoMetadata({ videoData, source, title }: VideoMetadataProps) {
|
|
return (
|
|
<Card hover={false}>
|
|
<div className="flex items-start gap-4">
|
|
{videoData?.vod_pic && (
|
|
<img
|
|
src={videoData.vod_pic}
|
|
alt={videoData.vod_name}
|
|
className="w-32 h-48 object-cover rounded-[var(--radius-2xl)] border border-[var(--glass-border)]"
|
|
/>
|
|
)}
|
|
<div className="flex-1">
|
|
<h1 className="text-3xl font-bold text-[var(--text-color)] mb-3">
|
|
{videoData?.vod_name || title}
|
|
</h1>
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|
{source && (
|
|
<Badge variant="primary" className="backdrop-blur-md">
|
|
<Icons.Check size={14} className="mr-1" />
|
|
{getSourceName(source)}
|
|
</Badge>
|
|
)}
|
|
{videoData?.type_name && (
|
|
<Badge variant="secondary">{videoData.type_name}</Badge>
|
|
)}
|
|
{videoData?.vod_year && (
|
|
<Badge variant="secondary">
|
|
<Icons.Calendar size={14} className="mr-1" />
|
|
{videoData.vod_year}
|
|
</Badge>
|
|
)}
|
|
{videoData?.vod_area && (
|
|
<Badge variant="secondary">
|
|
<Icons.Globe size={14} className="mr-1" />
|
|
{videoData.vod_area}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
{videoData?.vod_content && (
|
|
<p className="text-[var(--text-secondary)] line-clamp-3">
|
|
{videoData.vod_content.replace(/<[^>]*>/g, '')}
|
|
</p>
|
|
)}
|
|
{videoData?.vod_actor && (
|
|
<p className="text-sm text-[var(--text-tertiary)] mt-2">
|
|
<span className="font-semibold">主演：</span>
|
|
{videoData.vod_actor}
|
|
</p>
|
|
)}
|
|
{videoData?.vod_director && (
|
|
<p className="text-sm text-[var(--text-tertiary)] mt-1">
|
|
<span className="font-semibold">导演：</span>
|
|
{videoData.vod_director}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|