feat(tv): update video player to handle ended event and improve channel navigation

k-tv-frontend/app/(main)/tv/components/video-player.tsx

@@ -20,6 +20,8 @@ interface VideoPlayerProps {
   onSubtitleTracksChange?: (tracks: SubtitleTrack[]) => void;
   /** Called when the browser blocks autoplay and user interaction is required. */
   onNeedsInteraction?: () => void;
+  /** Called when the video element fires its ended event. */
+  onEnded?: () => void;
 }
 
 const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
@@ -33,12 +35,15 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
       onStreamError,
       onSubtitleTracksChange,
       onNeedsInteraction,
+      onEnded,
     },
     ref,
   ) => {
     const internalRef = useRef<HTMLVideoElement | null>(null);
     const hlsRef = useRef<Hls | null>(null);
     const [isBuffering, setIsBuffering] = useState(true);
+    const onEndedRef = useRef(onEnded);
+    onEndedRef.current = onEnded;
 
     const setRef = (el: HTMLVideoElement | null) => {
       internalRef.current = el;
@@ -126,6 +131,7 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
           onPlaying={() => setIsBuffering(false)}
           onWaiting={() => setIsBuffering(true)}
           onError={onStreamError}
+          onEnded={() => onEndedRef.current?.()}
           className="h-full w-full object-contain"
         />