vndangkhoa/kv-tiktok
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add loading spinner to prevent black screen while video buffers

Browse source
This commit is contained in:
Khoa.vo 2025-12-19 19:20:15 +07:00
parent 929df62342
commit dc3caed430
1 changed files with 16 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/components/VideoPlayer.tsx
View file

@ -42,6 +42,7 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
const [localMuted, setLocalMuted] = useState(true);
const isMuted = externalMuted !== undefined ? externalMuted : localMuted;
const [hearts, setHearts] = useState<HeartParticle[]>([]);
const [isLoading, setIsLoading] = useState(true); // Show loading spinner until video is ready
const lastTapRef = useRef<number>(0);
// Full proxy URL (yt-dlp, always works but heavier)
@ -105,9 +106,10 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
return () => window.removeEventListener('keydown', handleKeyDown);
}, [isActive]);
// Reset fallback when video changes
// Reset fallback and loading state when video changes
useEffect(() => {
setUseFallback(false);
setIsLoading(true); // Show loading for new video
}, [video.id]);
// Progress tracking
@ -309,8 +311,21 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
muted={isMuted}
className="w-full h-full"
style={{ objectFit }}
onCanPlay={() => setIsLoading(false)}
onWaiting={() => setIsLoading(true)}
onPlaying={() => setIsLoading(false)}
/>
{/* Loading Spinner Overlay */}
{isLoading && (
<div className="absolute inset-0 flex items-center justify-center bg-black/60 z-20">
<div className="flex flex-col items-center gap-4">
<div className="w-12 h-12 border-4 border-white/20 border-t-cyan-400 rounded-full animate-spin" />
<span className="text-white/60 text-sm">Loading...</span>
</div>
</div>
)}
{/* Heart Animation Particles */}
{hearts.map(heart => (
<div