513 lines
18 KiB
TypeScript
513 lines
18 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useRef, useCallback } from 'react';
|
|
import Artplayer from 'artplayer';
|
|
import { detectVideoFormat, VideoFormat, VideoFile } from '@/lib/video-format-detector';
|
|
import { Bookmark, Star } from 'lucide-react';
|
|
|
|
interface ArtPlayerWrapperProps {
|
|
video: VideoFile;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onProgress?: (time: number) => void;
|
|
onBookmark?: (videoId: number) => void;
|
|
onUnbookmark?: (videoId: number) => void;
|
|
onRate?: (videoId: number, rating: number) => void;
|
|
useArtPlayer: boolean;
|
|
isBookmarked?: boolean;
|
|
bookmarkCount?: number;
|
|
avgRating?: number;
|
|
showBookmarks?: boolean;
|
|
showRatings?: boolean;
|
|
}
|
|
|
|
export default function ArtPlayerWrapper({
|
|
video,
|
|
isOpen,
|
|
onClose,
|
|
onProgress,
|
|
onBookmark,
|
|
onUnbookmark,
|
|
onRate,
|
|
useArtPlayer,
|
|
isBookmarked = false,
|
|
bookmarkCount = 0,
|
|
avgRating = 0,
|
|
showBookmarks = false,
|
|
showRatings = false
|
|
}: ArtPlayerWrapperProps) {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const playerRef = useRef<Artplayer | null>(null);
|
|
const [format, setFormat] = useState<VideoFormat | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [currentTime, setCurrentTime] = useState(0);
|
|
const [duration, setDuration] = useState(0);
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
const [volume, setVolume] = useState(1);
|
|
const [isMuted, setIsMuted] = useState(false);
|
|
const [showControls, setShowControls] = useState(true);
|
|
const [localIsBookmarked, setLocalIsBookmarked] = useState(isBookmarked);
|
|
const [localBookmarkCount, setLocalBookmarkCount] = useState(bookmarkCount);
|
|
const [localAvgRating, setLocalAvgRating] = useState(avgRating);
|
|
|
|
// Update local state when props change
|
|
useEffect(() => {
|
|
setLocalIsBookmarked(isBookmarked);
|
|
setLocalBookmarkCount(bookmarkCount);
|
|
setLocalAvgRating(avgRating);
|
|
}, [isBookmarked, bookmarkCount, avgRating]);
|
|
|
|
// Initialize ArtPlayer
|
|
useEffect(() => {
|
|
if (!useArtPlayer || !isOpen || !containerRef.current) return;
|
|
|
|
setIsLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const detectedFormat = detectVideoFormat(video);
|
|
setFormat(detectedFormat);
|
|
|
|
const player = new Artplayer({
|
|
container: containerRef.current,
|
|
url: detectedFormat.url,
|
|
type: detectedFormat.type === 'hls' ? 'm3u8' : 'mp4',
|
|
|
|
// Core playback settings
|
|
autoplay: false,
|
|
muted: false,
|
|
volume: volume,
|
|
|
|
// UI controls
|
|
fullscreen: true,
|
|
fullscreenWeb: true,
|
|
pip: true,
|
|
playbackRate: true,
|
|
aspectRatio: true,
|
|
screenshot: true,
|
|
hotkey: true,
|
|
|
|
// Display settings
|
|
theme: '#3b82f6', // Blue theme
|
|
|
|
// Quality control (for HLS)
|
|
quality: detectedFormat.qualities || [],
|
|
|
|
// Subtitle support
|
|
subtitle: {
|
|
url: '', // Will be populated if subtitles are available
|
|
type: 'vtt',
|
|
style: {
|
|
color: '#fff',
|
|
fontSize: '20px',
|
|
textShadow: '0 0 2px rgba(0,0,0,0.8)'
|
|
}
|
|
},
|
|
|
|
// Settings
|
|
settings: [
|
|
{
|
|
html: 'Quality',
|
|
icon: '<span class="artplayer-icon-settings-quality">⚙️</span>',
|
|
selector: detectedFormat.qualities || [],
|
|
onSelect: function(item: any) {
|
|
console.log('Quality selected:', item);
|
|
}
|
|
}
|
|
],
|
|
|
|
// Custom layer for bookmark and rating controls
|
|
layers: [
|
|
{
|
|
html: `<div class="artplayer-custom-controls absolute top-4 right-4 flex items-center gap-2 z-10">
|
|
<div class="artplayer-bookmark-control flex items-center gap-1 px-2 py-1 rounded hover:bg-white/20 transition-colors cursor-pointer text-white">
|
|
<svg class="h-4 w-4" fill="${localIsBookmarked ? 'currentColor' : 'none'}" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
|
|
</svg>
|
|
<span class="text-xs">${localBookmarkCount}</span>
|
|
</div>
|
|
<div class="artplayer-rating-control flex items-center gap-1 px-2 py-1 rounded hover:bg-white/20 transition-colors cursor-pointer text-white">
|
|
<span class="text-xs">★ ${localAvgRating.toFixed(1)}</span>
|
|
</div>
|
|
</div>`,
|
|
style: {
|
|
position: 'absolute',
|
|
top: '16px',
|
|
right: '16px',
|
|
zIndex: '10'
|
|
} as any,
|
|
click: function(this: any, component: any, event: Event) {
|
|
const target = event.target as HTMLElement;
|
|
if (target.closest('.artplayer-bookmark-control')) {
|
|
handleBookmarkToggle();
|
|
} else if (target.closest('.artplayer-rating-control')) {
|
|
handleRatingClick();
|
|
}
|
|
}
|
|
}
|
|
]
|
|
});
|
|
|
|
// Event listeners
|
|
player.on('ready', () => {
|
|
console.log('ArtPlayer ready');
|
|
setIsLoading(false);
|
|
});
|
|
|
|
player.on('play', () => {
|
|
setIsPlaying(true);
|
|
});
|
|
|
|
player.on('pause', () => {
|
|
setIsPlaying(false);
|
|
});
|
|
|
|
player.on('timeupdate', () => {
|
|
const currentTime = player.currentTime;
|
|
setCurrentTime(currentTime);
|
|
if (onProgress) {
|
|
onProgress(currentTime);
|
|
}
|
|
});
|
|
|
|
player.on('video:loadedmetadata', () => {
|
|
setDuration(player.duration);
|
|
});
|
|
|
|
player.on('volumechange', () => {
|
|
setVolume(player.volume);
|
|
setIsMuted(player.muted);
|
|
});
|
|
|
|
player.on('error', (error) => {
|
|
console.error('ArtPlayer error:', error);
|
|
setError(`Failed to load video: ${error.message || 'Unknown error'}`);
|
|
setIsLoading(false);
|
|
|
|
// Fallback to current player if ArtPlayer fails
|
|
if (format?.supportLevel === 'native') {
|
|
console.log('ArtPlayer failed for native format, falling back to current player');
|
|
// This will trigger the parent component to switch to current player
|
|
}
|
|
});
|
|
|
|
// Custom event listeners
|
|
player.on('controls:show', () => {
|
|
setShowControls(true);
|
|
});
|
|
|
|
player.on('controls:hidden', () => {
|
|
setShowControls(false);
|
|
});
|
|
|
|
playerRef.current = player;
|
|
|
|
return () => {
|
|
if (playerRef.current) {
|
|
playerRef.current.destroy();
|
|
playerRef.current = null;
|
|
}
|
|
};
|
|
} catch (error) {
|
|
console.error('Failed to initialize ArtPlayer:', error);
|
|
setError(`Failed to initialize player: ${error instanceof Error ? error.message : 'Unknown error'}`);
|
|
setIsLoading(false);
|
|
}
|
|
}, [useArtPlayer, isOpen, video, onProgress, volume, format?.supportLevel, localIsBookmarked, localBookmarkCount, localAvgRating]);
|
|
|
|
// Handle bookmark toggle
|
|
const handleBookmarkToggle = useCallback(async () => {
|
|
if (!video.id) return;
|
|
|
|
try {
|
|
if (localIsBookmarked) {
|
|
if (onUnbookmark) {
|
|
onUnbookmark(video.id);
|
|
}
|
|
setLocalIsBookmarked(false);
|
|
setLocalBookmarkCount(prev => Math.max(0, prev - 1));
|
|
} else {
|
|
if (onBookmark) {
|
|
onBookmark(video.id);
|
|
}
|
|
setLocalIsBookmarked(true);
|
|
setLocalBookmarkCount(prev => prev + 1);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error toggling bookmark:', error);
|
|
}
|
|
}, [video.id, localIsBookmarked, onBookmark, onUnbookmark]);
|
|
|
|
// Handle rating click
|
|
const handleRatingClick = useCallback(() => {
|
|
if (!video.id || !onRate) return;
|
|
|
|
const currentRating = Math.round(localAvgRating);
|
|
const newRating = currentRating >= 5 ? 1 : currentRating + 1;
|
|
|
|
onRate(video.id, newRating);
|
|
setLocalAvgRating(newRating);
|
|
}, [video.id, localAvgRating, onRate]);
|
|
|
|
// Format time display
|
|
const formatTime = (time: number) => {
|
|
const minutes = Math.floor(time / 60);
|
|
const seconds = Math.floor(time % 60);
|
|
return `${minutes}:${seconds.toString().padStart(2, '0')}`;
|
|
};
|
|
|
|
// Format file size
|
|
const formatFileSize = (bytes: number) => {
|
|
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];
|
|
};
|
|
|
|
// Handle keyboard shortcuts
|
|
useEffect(() => {
|
|
if (!isOpen || !playerRef.current) return;
|
|
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
switch (e.key) {
|
|
case 'Escape':
|
|
e.preventDefault();
|
|
onClose();
|
|
break;
|
|
case ' ':
|
|
e.preventDefault();
|
|
if (isPlaying) {
|
|
playerRef.current?.pause();
|
|
} else {
|
|
playerRef.current?.play();
|
|
}
|
|
break;
|
|
case 'ArrowLeft':
|
|
e.preventDefault();
|
|
playerRef.current!.currentTime = Math.max(0, playerRef.current!.currentTime - 10);
|
|
break;
|
|
case 'ArrowRight':
|
|
e.preventDefault();
|
|
playerRef.current!.currentTime = Math.min(playerRef.current!.duration || 0, playerRef.current!.currentTime + 10);
|
|
break;
|
|
case 'f':
|
|
case 'F':
|
|
e.preventDefault();
|
|
playerRef.current!.fullscreen = !playerRef.current!.fullscreen;
|
|
break;
|
|
case 'm':
|
|
case 'M':
|
|
e.preventDefault();
|
|
playerRef.current!.muted = !playerRef.current!.muted;
|
|
break;
|
|
}
|
|
};
|
|
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
}, [isOpen, onClose, isPlaying]);
|
|
|
|
// Cleanup on unmount
|
|
useEffect(() => {
|
|
return () => {
|
|
if (playerRef.current) {
|
|
playerRef.current.destroy();
|
|
playerRef.current = null;
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<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-20 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 transition-colors"
|
|
>
|
|
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
|
|
{/* Loading indicator */}
|
|
{isLoading && (
|
|
<div className="absolute top-4 left-4 z-20 bg-blue-500/20 text-blue-400 rounded-full px-3 py-1.5 flex items-center gap-2">
|
|
<div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
|
|
<span className="text-sm">Loading ArtPlayer...</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Error indicator */}
|
|
{error && (
|
|
<div className="absolute top-4 left-4 right-4 z-20 bg-red-500/20 border border-red-500/50 text-red-400 rounded-lg px-4 py-3 flex items-center gap-3">
|
|
<div className="w-3 h-3 bg-red-500 rounded-full flex-shrink-0"></div>
|
|
<div className="flex-1">
|
|
<div className="text-sm font-medium">ArtPlayer Error</div>
|
|
<div className="text-xs opacity-90">{error}</div>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
setError(null);
|
|
setIsLoading(true);
|
|
}}
|
|
className="text-red-400 hover:text-red-300 text-xs underline flex-shrink-0"
|
|
>
|
|
Retry
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Format info */}
|
|
{format && (
|
|
<div className="absolute top-4 left-4 z-20 bg-green-500/20 text-green-400 rounded-full px-3 py-1.5 flex items-center gap-2">
|
|
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
|
|
<span className="text-xs">
|
|
{format.supportLevel === 'native' ? 'Native' :
|
|
format.supportLevel === 'hls' ? 'HLS' : 'Fallback'}
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Video container */}
|
|
<div
|
|
className="relative w-full h-full bg-black rounded-lg overflow-hidden"
|
|
onMouseMove={() => setShowControls(true)}
|
|
onMouseLeave={() => setShowControls(false)}
|
|
>
|
|
{/* ArtPlayer will be mounted here */}
|
|
<div
|
|
ref={containerRef}
|
|
className="w-full h-full artplayer-container"
|
|
style={{ display: isLoading ? 'none' : 'block' }}
|
|
/>
|
|
|
|
{/* Loading overlay */}
|
|
{isLoading && (
|
|
<div className="absolute inset-0 flex items-center justify-center bg-black">
|
|
<div className="text-white text-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4"></div>
|
|
<p>Loading ArtPlayer...</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Video info 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'}`}>
|
|
<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">{video.title}</h3>
|
|
<p className="text-gray-300 text-sm">{formatFileSize(video.size)}</p>
|
|
{duration > 0 && (
|
|
<p className="text-gray-300 text-sm">
|
|
Duration: {formatTime(duration)}
|
|
{format?.type === 'hls' && <span className="text-green-400 ml-1">(HLS)</span>}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{(showBookmarks || showRatings) && (
|
|
<div className="flex items-center gap-4">
|
|
{showBookmarks && (
|
|
<button
|
|
onClick={handleBookmarkToggle}
|
|
className={`flex items-center gap-1 text-white hover:text-yellow-400 transition-colors ${localIsBookmarked ? 'text-yellow-400' : ''}`}
|
|
>
|
|
<Bookmark className={`h-4 w-4 ${localIsBookmarked ? 'fill-current' : ''}`} />
|
|
<span className="text-xs">{localBookmarkCount}</span>
|
|
</button>
|
|
)}
|
|
{showRatings && (
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
onClick={handleRatingClick}
|
|
className="text-white hover:text-yellow-400 transition-colors"
|
|
>
|
|
<Star className={`h-4 w-4 ${localAvgRating > 0 ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
|
</button>
|
|
<span className="text-xs text-gray-300">{localAvgRating.toFixed(1)}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Controls */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={() => {
|
|
if (playerRef.current) {
|
|
if (isPlaying) {
|
|
playerRef.current.pause();
|
|
} else {
|
|
playerRef.current.play();
|
|
}
|
|
}
|
|
}}
|
|
className="text-white hover:text-gray-300 transition-colors"
|
|
>
|
|
{isPlaying ? (
|
|
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
|
|
</svg>
|
|
) : (
|
|
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z"/>
|
|
</svg>
|
|
)}
|
|
</button>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => {
|
|
if (playerRef.current) {
|
|
playerRef.current.muted = !isMuted;
|
|
}
|
|
}}
|
|
className="text-white hover:text-gray-300 transition-colors"
|
|
>
|
|
{isMuted ? (
|
|
<svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
|
|
</svg>
|
|
) : (
|
|
<svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
|
|
</svg>
|
|
)}
|
|
</button>
|
|
<span className="text-xs text-gray-300">{Math.round(volume * 100)}%</span>
|
|
</div>
|
|
|
|
<span className="text-sm text-white">
|
|
{formatTime(currentTime)} / {formatTime(duration)}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => {
|
|
if (playerRef.current) {
|
|
playerRef.current.fullscreen = !playerRef.current.fullscreen;
|
|
}
|
|
}}
|
|
className="text-white hover:text-gray-300 transition-colors"
|
|
>
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |