From 62549faffa127ec6369ad1144c2ee31c52a5dfb3 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Wed, 11 Mar 2026 22:06:10 +0100
Subject: [PATCH] feat: add buffering spinner to VideoPlayer component

---
 .../app/(main)/tv/components/video-player.tsx      | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/k-tv-frontend/app/(main)/tv/components/video-player.tsx b/k-tv-frontend/app/(main)/tv/components/video-player.tsx
index 35d2f61..537e2b8 100644
--- a/k-tv-frontend/app/(main)/tv/components/video-player.tsx
+++ b/k-tv-frontend/app/(main)/tv/components/video-player.tsx
@@ -1,5 +1,6 @@
-import { forwardRef, useEffect, useRef } from "react";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import Hls from "hls.js";
+import { Loader2 } from "lucide-react";
 
 export interface SubtitleTrack {
   id: number;
@@ -34,6 +35,7 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
   ) => {
     const internalRef = useRef<HTMLVideoElement | null>(null);
     const hlsRef = useRef<Hls | null>(null);
+    const [isBuffering, setIsBuffering] = useState(true);
 
     const setRef = (el: HTMLVideoElement | null) => {
       internalRef.current = el;
@@ -55,6 +57,7 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
       hlsRef.current?.destroy();
       hlsRef.current = null;
       onSubtitleTracksChange?.([]);
+      setIsBuffering(true);
 
       const isHls = src.includes(".m3u8");
 
@@ -117,9 +120,18 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
           ref={setRef}
           poster={poster}
           playsInline
+          onPlaying={() => setIsBuffering(false)}
+          onWaiting={() => setIsBuffering(true)}
           onError={onStreamError}
           className="h-full w-full object-contain"
         />
+
+        {/* Buffering spinner — shown until frames are actually rendering */}
+        {isBuffering && (
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+            <Loader2 className="h-10 w-10 animate-spin text-zinc-500" />
+          </div>
+        )}
       </div>
     );
   },