feat: add interaction handling for autoplay block in video player

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 && (
         <>