feat(release): v0.0.16 - deep recursive iframe window tree broadcast, fix remote D-pad settings drawer navigation, auto-switch Kodik for movies

package.json

@@ -1,7 +1,7 @@
 {
   "name": "has",
   "private": true,
-  "version": "0.0.15",
+  "version": "0.0.16",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "has"
-version = "0.0.15"
+version = "0.0.16"
 description = "has"
 authors = ["autli"]
 edition = "2024"

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "has",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "identifier": "com.has.tauri-app",
   "build": {
     "beforeDevCommand": "npm run dev",

src/components/UpdaterBanner.tsx

@@ -88,7 +88,7 @@ const isNewerSemver = (remote: string, current: string): boolean => {
 
 export function UpdaterBanner({ isTvEnvironment }: UpdaterBannerProps = {}) {
   const [isTv, setIsTv] = useState<boolean>(() => isTvEnvironment ?? detectTvEnvironment());
-  const [currentAppVersion, setCurrentAppVersion] = useState<string>("0.0.15");
+  const [currentAppVersion, setCurrentAppVersion] = useState<string>("0.0.16");
   const [updateAvailable, setUpdateAvailable] = useState(false);
   const [updateInfo, setUpdateInfo] = useState<UpdateInfo | null>(null);
   const [downloading, setDownloading] = useState(false);

src/pages/cinema/Cinema.tsx

@@ -654,55 +654,78 @@ export default function Cinema({
 
   const [isPlayingState, setIsPlayingState] = useState(true);
 
-  // Dedicated multi-protocol command dispatcher to balancer iframes
+  // Robust multi-level recursive window broadcast to reach nested balancer iframes
-  const sendIframePlaybackCommand = useCallback((command: "play" | "pause" | "toggle") => {
+  const broadcastToWindowTree = useCallback((payload: any) => {
     const iframe = document.querySelector<HTMLIFrameElement>(".has-cinema-iframe-elem");
     if (!iframe || !iframe.contentWindow) return;
 
-    const win = iframe.contentWindow;
+    const send = (target: Window) => {
-
-    // Never focus iframe directly — focus must strictly remain on our app controls for TV remote
-
-    const post = (payload: any) => {
       try {
-        win.postMessage(payload, "*");
+        target.postMessage(payload, "*");
       } catch {}
       try {
-        win.postMessage(JSON.stringify(payload), "*");
+        if (typeof payload === "object") {
+          target.postMessage(JSON.stringify(payload), "*");
+        }
       } catch {}
     };
 
+    const rootWin = iframe.contentWindow;
+    send(rootWin);
+
+    // Broadcast down into subframes (VidLink, Alloha, Playerjs, AutoEmbed nested wrappers)
+    try {
+      if (rootWin.frames && rootWin.frames.length > 0) {
+        for (let i = 0; i < rootWin.frames.length; i++) {
+          try {
+            send(rootWin.frames[i]);
+            if (rootWin.frames[i].frames && rootWin.frames[i].frames.length > 0) {
+              for (let j = 0; j < rootWin.frames[i].frames.length; j++) {
+                try {
+                  send(rootWin.frames[i].frames[j]);
+                } catch {}
+              }
+            }
+          } catch {}
+        }
+      }
+    } catch {}
+  }, []);
+
+  // Dedicated multi-protocol command dispatcher to balancer iframes
+  const sendIframePlaybackCommand = useCallback((command: "play" | "pause" | "toggle") => {
     const isPlay = command === "play";
     const isToggle = command === "toggle";
 
     // 1. Kodik Player API (Supports both object and stringified commands)
-    post({ key: "kodik_player_api", value: { method: isToggle ? "toggle" : (isPlay ? "play" : "pause") } });
+    broadcastToWindowTree({ key: "kodik_player_api", value: { method: isToggle ? "toggle" : (isPlay ? "play" : "pause") } });
     if (!isToggle) {
-      post({ key: "kodik_player_api", value: { method: isPlay ? "play" : "pause" } });
+      broadcastToWindowTree({ key: "kodik_player_api", value: { method: isPlay ? "play" : "pause" } });
     }
 
     // 2. Playerjs API (Used by Alloha, Kinoplay, Collaps, VideoCDN, Ashdi, HDRezka)
-    post({ api: isToggle ? "toggle" : (isPlay ? "play" : "pause") });
+    broadcastToWindowTree({ api: isToggle ? "toggle" : (isPlay ? "play" : "pause") });
     if (!isToggle) {
-      post({ api: isPlay ? "play" : "pause" });
+      broadcastToWindowTree({ api: isPlay ? "play" : "pause" });
     }
 
     // 3. Alloha API
-    post({ action: isPlay ? "play" : "pause" });
+    broadcastToWindowTree({ action: isPlay ? "play" : "pause" });
-    post({ method: isPlay ? "play" : "pause" });
+    broadcastToWindowTree({ method: isPlay ? "play" : "pause" });
 
     // 4. VidLink Pro / Video.js API
-    post({ type: isPlay ? "PLAYER_PLAY" : "PLAYER_PAUSE" });
+    broadcastToWindowTree({ type: isPlay ? "PLAYER_PLAY" : "PLAYER_PAUSE" });
-    post({ type: isPlay ? "play" : "pause" });
+    broadcastToWindowTree({ type: isPlay ? "play" : "pause" });
-    post({ action: isPlay ? "play" : "pause" });
+    broadcastToWindowTree({ action: isPlay ? "play" : "pause" });
+    broadcastToWindowTree({ event: isPlay ? "play" : "pause" });
 
     // 5. YouTube / VidSrc / AutoEmbed HTML5 API
-    post({ event: "command", func: isPlay ? "playVideo" : "pauseVideo", args: "" });
+    broadcastToWindowTree({ event: "command", func: isPlay ? "playVideo" : "pauseVideo", args: "" });
 
     // 6. Generic HTML5 postMessage
-    post({ method: isPlay ? "play" : "pause" });
+    broadcastToWindowTree({ method: isPlay ? "play" : "pause" });
-    post({ command: isPlay ? "play" : "pause" });
+    broadcastToWindowTree({ command: isPlay ? "play" : "pause" });
-  }, []);
+  }, [broadcastToWindowTree]);
 
   const setPlayerVolumeMax = useCallback((showToast: boolean = false) => {
     // 1. Native HTML5 Video Element
@@ -713,58 +736,50 @@ export default function Cinema({
       } catch {}
     }
 
-    // 2. Iframe Players (Kodik, Alloha, Playerjs, VidLink, YouTube/AutoEmbed, etc.)
+    // 2. Kodik API
-    const iframe = document.querySelector<HTMLIFrameElement>(".has-cinema-iframe-elem");
+    broadcastToWindowTree({ key: "kodik_player_api", value: { method: "volume", volume: 1 } });
-    if (iframe && iframe.contentWindow) {
+    broadcastToWindowTree({ key: "kodik_player_api", value: { method: "volume", volume: 100 } });
-      const win = iframe.contentWindow;
+    broadcastToWindowTree({ key: "kodik_player_api", value: { method: "unmute" } });
-      const post = (payload: any) => {
-        try { win.postMessage(payload, "*"); } catch {}
-        try { win.postMessage(JSON.stringify(payload), "*"); } catch {}
-      };
 
-      // 1. Kodik API
+    // 3. Playerjs API (Alloha, Kinoplay, Collaps, VideoCDN, Ashdi, HDRezka)
-      post({ key: "kodik_player_api", value: { method: "volume", volume: 1 } });
+    broadcastToWindowTree({ api: "volume", set: 100 });
-      post({ key: "kodik_player_api", value: { method: "volume", volume: 100 } });
+    broadcastToWindowTree({ api: "volume", set: 1 });
-      post({ key: "kodik_player_api", value: { method: "unmute" } });
+    broadcastToWindowTree({ api: "volume", volume: 100 });
+    broadcastToWindowTree({ api: "volume", volume: 1 });
+    broadcastToWindowTree({ api: "unmute" });
 
-      // 2. Playerjs API (Alloha, Kinoplay, Collaps, VideoCDN, Ashdi, HDRezka)
+    // 4. Alloha API
-      post({ api: "volume", volume: 1 });
+    broadcastToWindowTree({ action: "volume", volume: 1 });
-      post({ api: "volume", volume: 100 });
+    broadcastToWindowTree({ action: "volume", value: 100 });
-      post({ api: "volume", value: 100 });
+    broadcastToWindowTree({ action: "volume", set: 100 });
-      post({ api: "unmute" });
+    broadcastToWindowTree({ action: "unmute" });
+    broadcastToWindowTree({ method: "volume", value: 1 });
+    broadcastToWindowTree({ method: "setVolume", value: 100 });
+    broadcastToWindowTree({ method: "unmute" });
 
-      // 3. Alloha API
+    // 5. VidLink Pro / Video.js API
-      post({ action: "volume", volume: 1 });
+    broadcastToWindowTree({ type: "VOLUME", volume: 1 });
-      post({ action: "volume", value: 100 });
+    broadcastToWindowTree({ type: "SET_VOLUME", data: { volume: 1 } });
-      post({ action: "unmute" });
+    broadcastToWindowTree({ type: "SET_VOLUME", data: { volume: 100 } });
-      post({ method: "volume", value: 1 });
+    broadcastToWindowTree({ type: "unmute" });
-      post({ method: "setVolume", value: 100 });
+    broadcastToWindowTree({ action: "volume", value: 1 });
-      post({ method: "unmute" });
+    broadcastToWindowTree({ action: "unmute" });
 
-      // 4. VidLink Pro / Video.js API
+    // 6. YouTube / VidSrc / AutoEmbed HTML5 API
-      post({ type: "VOLUME", volume: 1 });
+    broadcastToWindowTree({ event: "command", func: "setVolume", args: [100] });
-      post({ type: "SET_VOLUME", data: { volume: 1 } });
+    broadcastToWindowTree({ event: "command", func: "unMute", args: "" });
-      post({ type: "SET_VOLUME", data: { volume: 100 } });
-      post({ type: "unmute" });
-      post({ action: "volume", value: 1 });
-      post({ action: "unmute" });
 
-      // 5. YouTube / VidSrc / AutoEmbed HTML5 API
+    // 7. Generic HTML5 postMessage
-      post({ event: "command", func: "setVolume", args: [100] });
+    broadcastToWindowTree({ method: "setVolume", volume: 100 });
-      post({ event: "command", func: "unMute", args: "" });
+    broadcastToWindowTree({ method: "setVolume", value: 100 });
-
+    broadcastToWindowTree({ method: "unmute" });
-      // 6. Generic HTML5 postMessage
+    broadcastToWindowTree({ command: "setVolume", volume: 100 });
-      post({ method: "setVolume", volume: 100 });
+    broadcastToWindowTree({ command: "unmute" });
-      post({ method: "setVolume", value: 100 });
-      post({ method: "unmute" });
-      post({ command: "setVolume", volume: 100 });
-      post({ command: "unmute" });
-    }
 
     if (showToast) {
       showTvToast("Громкость плеера: 100%", "🔊", 1500);
     }
-  }, [showTvToast]);
+  }, [broadcastToWindowTree, showTvToast]);
 
   const triggerPlayerPlay = useCallback(() => {
     if (videoRef.current) {
@@ -775,6 +790,17 @@ export default function Cinema({
       videoRef.current.play().catch(() => {});
     } else {
       sendIframePlaybackCommand("play");
+      // Awaken iframe user activation without permanently trapping focus
+      const iframe = document.querySelector<HTMLIFrameElement>(".has-cinema-iframe-elem");
+      if (iframe) {
+        try {
+          iframe.focus();
+        } catch {}
+        setTimeout(() => {
+          const playBtn = document.querySelector<HTMLElement>(".has-cinema-player-ctrl-btn.primary");
+          if (playBtn) playBtn.focus();
+        }, 120);
+      }
     }
     setPlayerVolumeMax(false);
     setIsPlayingState(true);
@@ -804,8 +830,9 @@ export default function Cinema({
       } else {
         triggerPlayerPlay();
       }
+      sendIframePlaybackCommand("toggle");
     }
-  }, [isPlayingState, triggerPlayerPlay, triggerPlayerPause]);
+  }, [isPlayingState, triggerPlayerPlay, triggerPlayerPause, sendIframePlaybackCommand]);
 
   const triggerPlayerSeek = useCallback((secondsDelta: number) => {
     if (videoRef.current) {
@@ -815,53 +842,54 @@ export default function Cinema({
       );
       currentPlaybackRef.current.currentTime = videoRef.current.currentTime;
     } else {
-      const iframe = document.querySelector<HTMLIFrameElement>(".has-cinema-iframe-elem");
-      if (iframe && iframe.contentWindow) {
-        const win = iframe.contentWindow;
-        const post = (payload: any) => {
-          try { win.postMessage(payload, "*"); } catch {}
-          try { win.postMessage(JSON.stringify(payload), "*"); } catch {}
-        };
-
       const curTime = currentPlaybackRef.current.currentTime || 0;
       const targetTime = Math.max(0, curTime + secondsDelta);
       currentPlaybackRef.current.currentTime = targetTime;
 
       // 1. Kodik API (Seek to absolute seconds & relative seek delta)
-        post({ key: "kodik_player_api", value: { method: "seek", time: targetTime } });
+      broadcastToWindowTree({ key: "kodik_player_api", value: { method: "seek", time: targetTime } });
-        post({ key: "kodik_player_api", value: { method: "seek_delta", time: secondsDelta } });
+      broadcastToWindowTree({ key: "kodik_player_api", value: { method: "seek_delta", time: secondsDelta } });
-        post({ key: "kodik_player_api", value: { method: secondsDelta > 0 ? "forward" : "rewind", time: Math.abs(secondsDelta) } });
+      broadcastToWindowTree({ key: "kodik_player_api", value: { method: secondsDelta > 0 ? "forward" : "rewind", time: Math.abs(secondsDelta) } });
 
       // 2. Playerjs API (Used by Alloha, Kinoplay, Collaps, VideoCDN, Ashdi, HDRezka)
-        post({ api: "seek", time: targetTime });
+      broadcastToWindowTree({ api: "seek", set: targetTime });
-        post({ api: "seek", delta: secondsDelta });
+      broadcastToWindowTree({ api: "seek", set: secondsDelta > 0 ? `+${secondsDelta}` : `${secondsDelta}` });
-        post({ api: "seek_delta", time: secondsDelta });
+      broadcastToWindowTree({ api: "seek", time: targetTime });
-        post({ api: "seek", time: secondsDelta > 0 ? `+${secondsDelta}` : `${secondsDelta}` });
+      broadcastToWindowTree({ api: "seek", delta: secondsDelta });
+      broadcastToWindowTree({ api: "seek_delta", time: secondsDelta });
 
       // 3. Alloha API
-        post({ action: "seek", time: targetTime });
+      broadcastToWindowTree({ action: "seek", time: targetTime });
-        post({ action: "seek", delta: secondsDelta });
+      broadcastToWindowTree({ action: "seek", delta: secondsDelta });
-        post({ method: "seek", time: targetTime });
+      broadcastToWindowTree({ method: "seek", time: targetTime });
-        post({ method: "seekTo", value: targetTime });
+      broadcastToWindowTree({ method: "seekTo", value: targetTime });
 
       // 4. VidLink Pro / Video.js API
-        post({ type: "SEEK", data: { time: targetTime } });
+      broadcastToWindowTree({ type: "SEEK", data: { time: targetTime } });
-        post({ type: "PLAYER_SEEK", time: targetTime });
+      broadcastToWindowTree({ type: "PLAYER_SEEK", time: targetTime });
-        post({ type: "seek", time: targetTime });
+      broadcastToWindowTree({ type: "seek", time: targetTime });
-        post({ action: "seek", time: targetTime });
+      broadcastToWindowTree({ action: "seek", time: targetTime });
-        post({ action: "seek", delta: secondsDelta });
+      broadcastToWindowTree({ action: "seek", delta: secondsDelta });
 
       // 5. YouTube / VidSrc / AutoEmbed HTML5 API
-        post({ event: "command", func: "seekTo", args: [targetTime, true] });
+      broadcastToWindowTree({ event: "command", func: "seekTo", args: [targetTime, true] });
-        post({ event: "command", func: "seek", args: [targetTime] });
+      broadcastToWindowTree({ event: "command", func: "seek", args: [targetTime] });
-        post({ action: "seekTo", value: targetTime });
+      broadcastToWindowTree({ action: "seekTo", value: targetTime });
 
       // 6. Generic HTML5 postMessage
-        post({ method: "seek", time: targetTime });
+      broadcastToWindowTree({ method: "seek", time: targetTime });
-        post({ command: "seek", time: targetTime });
+      broadcastToWindowTree({ command: "seek", time: targetTime });
-      }
     }
     showTvToast(secondsDelta > 0 ? `+${secondsDelta} сек` : `${secondsDelta} сек`, secondsDelta > 0 ? "⏩" : "⏪", 1000);
+  }, [broadcastToWindowTree, showTvToast]);
+
+  // Give TV remote control directly to iframe if a user needs to interact with in-player controls
+  const triggerIframeDirectFocus = useCallback(() => {
+    const iframe = document.querySelector<HTMLIFrameElement>(".has-cinema-iframe-elem");
+    if (iframe) {
+      iframe.focus();
+      showTvToast("Управление передано плееру. Нажмите [Back] на пульте для возврата в меню HAS", "🎮", 3000);
+    }
   }, [showTvToast]);
 
   // Universal helper to convert a TMDB item into CinemaMediaItem
@@ -1653,6 +1681,9 @@ export default function Cinema({
     setTimeout(() => {
       setPlayerVolumeMax(false);
     }, 2800);
+    setTimeout(() => {
+      setPlayerVolumeMax(false);
+    }, 4500);
   }, [sendIframePlaybackCommand, setPlayerVolumeMax]);
 
   // Start playback for a media item (movie or specific series episode)
@@ -1797,8 +1828,8 @@ export default function Cinema({
         .catch(() => {});
     }
 
-    // Search Kodik in background for anime or studio translations
+    // Search Kodik in background and auto-switch to clean stream if Russian dubbing is found
-    searchKodikDubbings(media.original_title || media.title, isAnime);
+    searchKodikDubbings(media.original_title || media.title, true);
   };
 
   // Card Click Action: Opens rich media details modal (DOES NOT start player immediately)
@@ -2244,6 +2275,24 @@ export default function Cinema({
           return;
         }
 
+        // 1.1.1 If Settings or Episodes drawer is open in player:
+        if (showPlayerSettings || showPlayerEpisodes) {
+          if (isOk) {
+            const active = document.activeElement as HTMLElement | null;
+            if (
+              active &&
+              (active.tagName === "BUTTON" ||
+                active.getAttribute("role") === "button" ||
+                active.hasAttribute("data-tv-focusable"))
+            ) {
+              e.preventDefault();
+              playTvSelectBeep();
+              active.click();
+              return;
+            }
+          }
+          // Do NOT run HUD navigation! Skip HUD logic so spatial navigation below handles drawer chips and buttons!
+        } else {
           // 1.2 When HUD is HIDDEN:
           if (!isHudVisible) {
             // OK / Space / PlayPause: Toggle Play/Pause and show HUD
@@ -2434,6 +2483,7 @@ export default function Cinema({
             }
           }
         }
+      }
 
       // 2. OK / Select Button outside player (Immediate activation of focused card/button/tab/chip)
       if (isOk && !isInput) {
@@ -2804,14 +2854,35 @@ export default function Cinema({
   useEffect(() => {
     if (showPlayerSettings) {
       const t = setTimeout(() => {
-        const firstFocus = document.querySelector<HTMLElement>(
+        const firstFocus =
-          ".has-cinema-player-settings-sheet [data-tv-focusable='true']"
+          document.querySelector<HTMLElement>(".has-cinema-player-settings-sheet .has-cinema-drawer-chip") ||
-        );
+          document.querySelector<HTMLElement>(".has-cinema-player-settings-sheet .has-cinema-drawer-option-btn") ||
-        if (firstFocus) firstFocus.focus();
+          document.querySelector<HTMLElement>(".has-cinema-player-settings-sheet [data-tv-focusable='true']");
-      }, 50);
+        if (firstFocus) {
+          firstFocus.focus();
+          playTvBeep(640, 0.025);
+        }
+      }, 60);
       return () => clearTimeout(t);
     }
-  }, [showPlayerSettings]);
+  }, [showPlayerSettings, playTvBeep]);
+
+  // Auto-focus current or first episode when episodes drawer opens
+  useEffect(() => {
+    if (showPlayerEpisodes) {
+      const t = setTimeout(() => {
+        const targetEp =
+          document.querySelector<HTMLElement>(".has-cinema-player-episodes-sheet .has-cinema-drawer-chip.active") ||
+          document.querySelector<HTMLElement>(".has-cinema-player-episodes-sheet .has-cinema-drawer-chip") ||
+          document.querySelector<HTMLElement>(".has-cinema-player-episodes-sheet [data-tv-focusable='true']");
+        if (targetEp) {
+          targetEp.focus();
+          playTvBeep(640, 0.025);
+        }
+      }, 60);
+      return () => clearTimeout(t);
+    }
+  }, [showPlayerEpisodes, playTvBeep]);
 
   // Handle Android TV hardware back & browser popstate for details modal
   useEffect(() => {
@@ -4947,6 +5018,54 @@ export default function Cinema({
                       ⏩ Быстрое управление и экран
                     </h4>
                     <div className="has-cinema-drawer-chips-wrap">
+                      <button
+                        type="button"
+                        className="has-cinema-drawer-chip primary"
+                        onClick={() => {
+                          triggerPlayerPlayPause();
+                          setShowPlayerSettings(false);
+                        }}
+                        data-tv-focusable="true"
+                        title="Воспроизведение / Пауза"
+                      >
+                        {isPlayingState ? "⏸ Пауза" : "▶ Воспроизведение"}
+                      </button>
+                      <button
+                        type="button"
+                        className="has-cinema-drawer-chip"
+                        onClick={() => {
+                          triggerPlayerSeek(-10);
+                          setShowPlayerSettings(false);
+                        }}
+                        data-tv-focusable="true"
+                        title="Перемотать на 10 секунд назад"
+                      >
+                        ⏪ -10с
+                      </button>
+                      <button
+                        type="button"
+                        className="has-cinema-drawer-chip"
+                        onClick={() => {
+                          triggerPlayerSeek(10);
+                          setShowPlayerSettings(false);
+                        }}
+                        data-tv-focusable="true"
+                        title="Перемотать на 10 секунд вперед"
+                      >
+                        ⏩ +10с
+                      </button>
+                      <button
+                        type="button"
+                        className="has-cinema-drawer-chip"
+                        onClick={() => {
+                          setPlayerVolumeMax(true);
+                          setShowPlayerSettings(false);
+                        }}
+                        data-tv-focusable="true"
+                        title="Выставить громкость плеера на максимум (100%)"
+                      >
+                        🔊 Громкость 100%
+                      </button>
                       <button
                         type="button"
                         className="has-cinema-drawer-chip"
@@ -4957,7 +5076,7 @@ export default function Cinema({
                         data-tv-focusable="true"
                         title="Перемотать заставку на 20 секунд вперед"
                       >
-                        ⏩ Пропуск рекламы / заставки (+20с)
+                        ⏩ Пропуск рекламы (+20с)
                       </button>
                       <button
                         type="button"
@@ -4975,13 +5094,13 @@ export default function Cinema({
                         type="button"
                         className="has-cinema-drawer-chip"
                         onClick={() => {
-                          setPlayerVolumeMax(true);
+                          triggerIframeDirectFocus();
                           setShowPlayerSettings(false);
                         }}
                         data-tv-focusable="true"
-                        title="Выставить громкость плеера на максимум (100%)"
+                        title="Передать управление с пульта напрямую в плеер"
                       >
-                        🔊 Громкость 100%
+                        🎮 Управление в плеере
                       </button>
                       <button
                         type="button"