346 lines
11 KiB
TypeScript
346 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useRef } from 'react';
|
|
import { X, Play, Pause, Volume2, VolumeX, Maximize, Star, Bookmark } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { createPortal } from 'react-dom';
|
|
|
|
interface Video {
|
|
id: number;
|
|
title: string;
|
|
path: string;
|
|
size: number;
|
|
thumbnail: string;
|
|
type: string;
|
|
bookmark_count: number;
|
|
avg_rating: number;
|
|
star_count: number;
|
|
}
|
|
|
|
interface FileSystemItem {
|
|
name: string;
|
|
path: string;
|
|
isDirectory: boolean;
|
|
size: number;
|
|
thumbnail?: string;
|
|
type?: string;
|
|
id?: number;
|
|
}
|
|
|
|
interface VideoViewerProps {
|
|
video: Video | FileSystemItem;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
showBookmarks?: boolean;
|
|
showRatings?: boolean;
|
|
formatFileSize?: (bytes: number) => string;
|
|
onBookmark?: (videoId: number) => void;
|
|
onUnbookmark?: (videoId: number) => void;
|
|
onRate?: (videoId: number, rating: number) => void;
|
|
}
|
|
|
|
export default function VideoViewer({
|
|
video,
|
|
isOpen,
|
|
onClose,
|
|
showBookmarks = false,
|
|
showRatings = false,
|
|
formatFileSize,
|
|
onBookmark,
|
|
onUnbookmark,
|
|
onRate
|
|
}: VideoViewerProps) {
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
const [isMuted, setIsMuted] = useState(false);
|
|
const [volume, setVolume] = useState(1);
|
|
const [currentTime, setCurrentTime] = useState(0);
|
|
const [duration, setDuration] = useState(0);
|
|
const [showControls, setShowControls] = useState(true);
|
|
const [isBookmarked, setIsBookmarked] = useState(false);
|
|
const [bookmarkCount, setBookmarkCount] = useState(0);
|
|
const videoRef = useRef<HTMLVideoElement>(null);
|
|
|
|
// Update local bookmark state when video changes
|
|
useEffect(() => {
|
|
if (video && 'bookmark_count' in video) {
|
|
setIsBookmarked(video.bookmark_count > 0);
|
|
setBookmarkCount(video.bookmark_count);
|
|
}
|
|
}, [video]);
|
|
|
|
useEffect(() => {
|
|
if (isOpen && videoRef.current && video) {
|
|
videoRef.current.src = `/api/stream/${('id' in video ? video.id : video.id) || ''}`;
|
|
videoRef.current.load();
|
|
|
|
// Auto-play when video is loaded
|
|
videoRef.current.addEventListener('loadeddata', () => {
|
|
if (videoRef.current) {
|
|
videoRef.current.play().then(() => {
|
|
setIsPlaying(true);
|
|
}).catch((error) => {
|
|
console.log('Auto-play prevented by browser:', error);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}, [isOpen, video]);
|
|
|
|
const handlePlayPause = () => {
|
|
if (videoRef.current) {
|
|
if (isPlaying) {
|
|
videoRef.current.pause();
|
|
} else {
|
|
videoRef.current.play();
|
|
}
|
|
setIsPlaying(!isPlaying);
|
|
}
|
|
};
|
|
|
|
const handleMute = () => {
|
|
if (videoRef.current) {
|
|
videoRef.current.muted = !isMuted;
|
|
setIsMuted(!isMuted);
|
|
}
|
|
};
|
|
|
|
const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const newVolume = parseFloat(e.target.value);
|
|
setVolume(newVolume);
|
|
if (videoRef.current) {
|
|
videoRef.current.volume = newVolume;
|
|
}
|
|
};
|
|
|
|
const handleTimeUpdate = () => {
|
|
if (videoRef.current) {
|
|
setCurrentTime(videoRef.current.currentTime);
|
|
}
|
|
};
|
|
|
|
const handleLoadedMetadata = () => {
|
|
if (videoRef.current) {
|
|
setDuration(videoRef.current.duration);
|
|
}
|
|
};
|
|
|
|
const handleSeek = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const newTime = parseFloat(e.target.value);
|
|
if (videoRef.current) {
|
|
videoRef.current.currentTime = newTime;
|
|
setCurrentTime(newTime);
|
|
}
|
|
};
|
|
|
|
const handleFullscreen = () => {
|
|
if (videoRef.current) {
|
|
if (document.fullscreenElement) {
|
|
document.exitFullscreen();
|
|
} else {
|
|
videoRef.current.requestFullscreen();
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleBookmark = () => {
|
|
if (onBookmark && video && 'id' in video && video.id !== undefined) {
|
|
onBookmark(video.id);
|
|
// Update local state immediately
|
|
setIsBookmarked(true);
|
|
setBookmarkCount(prev => prev + 1);
|
|
}
|
|
};
|
|
|
|
const handleUnbookmark = () => {
|
|
if (onUnbookmark && video && 'id' in video && video.id !== undefined) {
|
|
onUnbookmark(video.id);
|
|
// Update local state immediately
|
|
setIsBookmarked(false);
|
|
setBookmarkCount(prev => Math.max(0, prev - 1));
|
|
}
|
|
};
|
|
|
|
const handleRate = (rating: number) => {
|
|
if (onRate && video && 'id' in video && video.id !== undefined) {
|
|
onRate(video.id, rating);
|
|
}
|
|
};
|
|
|
|
const getVideoTitle = () => {
|
|
if (video && 'title' in video) return video.title;
|
|
if (video && 'name' in video) return video.name;
|
|
return 'Video';
|
|
};
|
|
|
|
const getVideoSize = () => {
|
|
if (!video) return '0 Bytes';
|
|
if (formatFileSize) {
|
|
return formatFileSize(video.size);
|
|
}
|
|
// Default format function
|
|
const bytes = video.size;
|
|
if (bytes === 0) return '0 Bytes';
|
|
const k = 1024;
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
};
|
|
|
|
const getBookmarkCount = () => {
|
|
if (video && 'bookmark_count' in video) return video.bookmark_count;
|
|
return 0;
|
|
};
|
|
|
|
const getAvgRating = () => {
|
|
if (video && 'avg_rating' in video) return video.avg_rating;
|
|
return 0;
|
|
};
|
|
|
|
const getVideoId = () => {
|
|
if (video && 'id' in video && video.id !== undefined) return video.id;
|
|
return 0;
|
|
};
|
|
|
|
const formatTime = (time: number) => {
|
|
const minutes = Math.floor(time / 60);
|
|
const seconds = Math.floor(time % 60);
|
|
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
|
};
|
|
|
|
if (!isOpen || typeof window === 'undefined') return null;
|
|
|
|
return createPortal(
|
|
<div className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center">
|
|
<div className="relative w-full h-full max-w-7xl max-h-[90vh] mx-auto my-8">
|
|
{/* Close button */}
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute top-4 right-4 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 transition-colors"
|
|
>
|
|
<X className="h-6 w-6" />
|
|
</button>
|
|
|
|
{/* Video container */}
|
|
<div
|
|
className="relative w-full h-full bg-black rounded-lg overflow-hidden"
|
|
onMouseMove={() => setShowControls(true)}
|
|
onMouseLeave={() => setShowControls(false)}
|
|
>
|
|
<video
|
|
ref={videoRef}
|
|
className="w-full h-full object-contain"
|
|
onTimeUpdate={handleTimeUpdate}
|
|
onLoadedMetadata={handleLoadedMetadata}
|
|
onPlay={() => setIsPlaying(true)}
|
|
onPause={() => setIsPlaying(false)}
|
|
onMouseMove={() => setShowControls(true)}
|
|
onMouseLeave={() => setShowControls(false)}
|
|
>
|
|
<source src={`/api/stream/${getVideoId()}`} type="video/mp4" />
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
|
|
{/* Title overlay */}
|
|
<div className={`absolute top-0 left-0 right-0 bg-gradient-to-b from-black/60 to-transparent p-4 transition-opacity duration-300 ${showControls ? 'opacity-100' : 'opacity-0'}`}>
|
|
<h2 className="text-white text-lg font-semibold">{getVideoTitle()}</h2>
|
|
</div>
|
|
|
|
{/* Controls overlay */}
|
|
<div className={`absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-4 transition-opacity duration-300 ${showControls ? 'opacity-100' : 'opacity-0'}`}>
|
|
{/* Progress bar */}
|
|
<div className="mb-4">
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max={duration || 0}
|
|
value={currentTime}
|
|
onChange={handleSeek}
|
|
className="w-full h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer slider"
|
|
/>
|
|
<div className="flex justify-between text-white text-sm mt-1">
|
|
<span>{formatTime(currentTime)}</span>
|
|
<span>{formatTime(duration)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Video Info Bar (similar to photo viewer) */}
|
|
<div className="bg-black/70 backdrop-blur-sm rounded-lg p-4 mb-2">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h3 className="text-white font-medium">{getVideoTitle()}</h3>
|
|
<p className="text-gray-300 text-sm">{getVideoSize()}</p>
|
|
</div>
|
|
{(showBookmarks || showRatings) && (
|
|
<div className="flex items-center gap-4">
|
|
{showBookmarks && (
|
|
<button
|
|
onClick={isBookmarked ? handleUnbookmark : handleBookmark}
|
|
className="flex items-center gap-1 text-white hover:text-yellow-400 transition-colors"
|
|
>
|
|
<Bookmark className={`h-4 w-4 ${isBookmarked ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
|
</button>
|
|
)}
|
|
{showRatings && (
|
|
<div className="flex gap-1">
|
|
{[1, 2, 3, 4, 5].map((rating) => (
|
|
<button
|
|
key={rating}
|
|
onClick={() => handleRate(rating)}
|
|
className="text-white hover:text-yellow-400 transition-colors"
|
|
>
|
|
<Star className={`h-4 w-4 ${rating <= Math.round(getAvgRating()) ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Control buttons */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={handlePlayPause}
|
|
className="text-white hover:text-gray-300 transition-colors"
|
|
>
|
|
{isPlaying ? <Pause className="h-6 w-6" /> : <Play className="h-6 w-6" />}
|
|
</button>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={handleMute}
|
|
className="text-white hover:text-gray-300 transition-colors"
|
|
>
|
|
{isMuted ? <VolumeX className="h-4 w-4" /> : <Volume2 className="h-4 w-4" />}
|
|
</button>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.1"
|
|
value={volume}
|
|
onChange={handleVolumeChange}
|
|
className="w-20 h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer slider"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={handleFullscreen}
|
|
className="text-white hover:text-gray-300 transition-colors"
|
|
>
|
|
<Maximize className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
);
|
|
}
|