b23042andClaude Fable 5
d38b842e8d
기존 GhiVideo 저장소 HEAD의 트래킹 소스 362개 파일을 복제. (node_modules·storage·빌드 산출물·대용량 미디어는 .gitignore 규칙대로 제외) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { usePlayerStore } from '../../store/playerStore';
|
|
|
|
interface VideoItem { videoId: string; filename: string; }
|
|
|
|
interface Props {
|
|
onSelect: (videoId: string, filename: string) => void;
|
|
}
|
|
|
|
export default function VideoList({ onSelect }: Props) {
|
|
const [videos, setVideos] = useState<VideoItem[]>([]);
|
|
const { source } = usePlayerStore();
|
|
const activeId = source?.kind === 'server' ? source.videoId : null;
|
|
|
|
useEffect(() => {
|
|
fetch('/api/videos')
|
|
.then((r) => r.json())
|
|
.then(setVideos)
|
|
.catch(() => {});
|
|
}, []);
|
|
|
|
if (videos.length === 0) {
|
|
return (
|
|
<div className="text-gray-500 text-sm p-4 text-center">
|
|
서버에 영상이 없습니다
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="divide-y divide-gray-800">
|
|
{videos.map((v) => (
|
|
<button
|
|
key={v.videoId}
|
|
onClick={() => onSelect(v.videoId, v.filename)}
|
|
className={`w-full text-left px-4 py-3 hover:bg-gray-800 transition-colors ${
|
|
activeId === v.videoId ? 'bg-gray-800 border-l-2 border-blue-500' : ''
|
|
}`}
|
|
>
|
|
<div className="text-sm text-white truncate">{v.filename}</div>
|
|
<div className="text-xs text-gray-500 mt-0.5">{v.videoId}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|