feat: add interaction handling for autoplay block in video player

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

@@ -18,6 +18,8 @@ interface VideoPlayerProps {
   subtitleTrack?: number;
   onStreamError?: () => void;
   onSubtitleTracksChange?: (tracks: SubtitleTrack[]) => void;
+  /** Called when the browser blocks autoplay and user interaction is required. */
+  onNeedsInteraction?: () => void;
 }
 
 const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
@@ -30,6 +32,7 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
       subtitleTrack = -1,
       onStreamError,
       onSubtitleTracksChange,
+      onNeedsInteraction,
     },
     ref,
   ) => {
@@ -69,7 +72,7 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
         hlsRef.current = hls;
 
         hls.on(Hls.Events.MANIFEST_PARSED, () => {
-          video.play().catch(() => {});
+          video.play().catch(() => onNeedsInteraction?.());
         });
 
         hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, (_event, data) => {
@@ -95,7 +98,7 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
           "loadedmetadata",
           () => {
             if (initialOffset > 0) video.currentTime = initialOffset;
-            video.play().catch(() => {});
+            video.play().catch(() => onNeedsInteraction?.());
           },
           { once: true },
         );

k-tv-frontend/app/(main)/tv/page.tsx

@@ -56,6 +56,9 @@ export default function TvPage() {
   // Stream error recovery
   const [streamError, setStreamError] = useState(false);
 
+  // Autoplay blocked by browser — cleared on first interaction via resetIdle
+  const [needsInteraction, setNeedsInteraction] = useState(false);
+
   // Subtitles
   const [subtitleTracks, setSubtitleTracks] = useState<SubtitleTrack[]>([]);
   const [activeSubtitleTrack, setActiveSubtitleTrack] = useState(-1);
@@ -141,6 +144,7 @@ export default function TvPage() {
 
   const resetIdle = useCallback(() => {
     setShowOverlays(true);
+    setNeedsInteraction(false);
     if (idleTimer.current) clearTimeout(idleTimer.current);
     idleTimer.current = setTimeout(() => {
       setShowOverlays(false);
@@ -325,6 +329,7 @@ export default function TvPage() {
           subtitleTrack={activeSubtitleTrack}
           onSubtitleTracksChange={setSubtitleTracks}
           onStreamError={handleStreamError}
+          onNeedsInteraction={() => setNeedsInteraction(true)}
         />
       );
     }
@@ -348,6 +353,15 @@ export default function TvPage() {
       {/* ── Base layer ─────────────────────────────────────────────── */}
       <div className="absolute inset-0">{renderBase()}</div>
 
+      {/* ── Autoplay blocked prompt ─────────────────────────────────── */}
+      {needsInteraction && (
+        <div className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center">
+          <div className="rounded-xl bg-black/70 px-8 py-5 text-center backdrop-blur-sm">
+            <p className="text-sm font-medium text-zinc-200">Click or move the mouse to play</p>
+          </div>
+        </div>
+      )}
+
       {/* ── Overlays — only when channels available ─────────────────── */}
       {channel && (
         <>