From 6a64742ea390e61102b0af382decb2fa1ba98af3 Mon Sep 17 00:00:00 2001
From: Hanshal Bobate <hanshalbobate2006@gmail.com>
Date: Wed, 20 May 2026 03:53:17 +0530
Subject: [PATCH] Fix Windows media session metadata and hardware controls

---
 index.js                  |  26 ++++-
 package-lock.json         |  39 -------
 preload.js                |   4 +
 src/pages/MoviePage.jsx   |  82 ++++++++++++++
 src/pages/TVPage.jsx      |  97 ++++++++++++++++
 src/utils/mediaSession.js | 225 ++++++++++++++++++++++++++++++++++++++
 6 files changed, 432 insertions(+), 41 deletions(-)
 create mode 100644 src/utils/mediaSession.js

diff --git a/index.js b/index.js
index 0e8d89a..50984df 100644
--- a/index.js
+++ b/index.js
@@ -19,10 +19,15 @@ app.commandLine.appendSwitch(
 );
 app.commandLine.appendSwitch(
   "disable-features",
-  "HardwareMediaKeyHandling,MediaSessionService,UseSandboxedXdgPortal",
+  "UseSandboxedXdgPortal",
 );
 // Run the network stack in the browser process → one less utility process
-app.commandLine.appendSwitch("enable-features", "NetworkServiceInProcess2");
+// Also enable hardware media key handling so Bluetooth earbuds, keyboard
+// media keys and the Windows media flyout (FluentFlyout) can control playback.
+app.commandLine.appendSwitch(
+  "enable-features",
+  "HardwareMediaKeyHandling,MediaSessionService,NetworkServiceInProcess2",
+);
 // NOTE: enable-low-end-device-mode removed, it cuts the GPU texture tile budget
 // and causes visible seams/stripes/dots on large images.
 
@@ -326,6 +331,23 @@ blockStats.init(getMainWindow);
 // get-block-stats lives with its data
 ipcMain.handle("get-block-stats", () => blockStats.getBlockStats());
 
+// -- Media Session: inject JS into ALL webview frames -------------------------
+// The renderer's executeJavaScript() only reaches the top-level frame.
+// VidSrc (and similar) load their video player in a cross-origin iframe, so
+// we need the main process to walk the WebFrameMain tree and inject into every
+// frame — including cross-origin ones that the renderer cannot touch.
+ipcMain.handle("inject-all-frames", async (_, { webContentsId, script }) => {
+  try {
+    const wc = webContents.fromId(webContentsId);
+    if (!wc || wc.isDestroyed()) return;
+    const injectFrame = async (frame) => {
+      try { await frame.executeJavaScript(script); } catch {}
+      for (const child of frame.frames ?? []) await injectFrame(child);
+    };
+    await injectFrame(wc.mainFrame);
+  } catch {}
+});
+
 // -- Player memory cleanup ---------------------------------------------
 // Called by MoviePage / TVPage on component unmount.
 // Destroys the player webview WebContents by tracked ID, then flushes caches and GCs.
diff --git a/package-lock.json b/package-lock.json
index 23f8dfd..ad738d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1443,9 +1443,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1460,9 +1457,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1477,9 +1471,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1494,9 +1485,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1511,9 +1499,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1528,9 +1513,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1545,9 +1527,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1562,9 +1541,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1579,9 +1555,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1596,9 +1569,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1613,9 +1583,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1630,9 +1597,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1647,9 +1611,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
diff --git a/preload.js b/preload.js
index f2b17c3..6037577 100644
--- a/preload.js
+++ b/preload.js
@@ -184,4 +184,8 @@ contextBridge.exposeInMainWorld("electron", {
   },
   offScheduledBackupRequested: (h) =>
     ipcRenderer.removeListener("scheduled-backup-requested", h),
+
+  // Webframe main injection for frames
+  injectAllFrames: (webContentsId, script) =>
+    ipcRenderer.invoke("inject-all-frames", { webContentsId, script }),
 });
diff --git a/src/pages/MoviePage.jsx b/src/pages/MoviePage.jsx
index 3cee4fe..11f8d58 100644
--- a/src/pages/MoviePage.jsx
+++ b/src/pages/MoviePage.jsx
@@ -50,6 +50,13 @@ import {
   getAgeLimitSetting,
   getRatingCountry,
 } from "../utils/ageRating";
+import {
+  setMediaSessionMetadata,
+  buildWebviewMetadataScript,
+  registerMediaSessionHandlers,
+  clearMediaSession,
+  syncPlaybackState,
+} from "../utils/mediaSession";
 
 export default function MoviePage({
   item,
@@ -478,6 +485,9 @@ export default function MoviePage({
           if (result && result.duration > 0) {
             const ct = result.currentTime;
 
+            // Sync OS playback state on every progress tick
+            syncPlaybackState("playing");
+
             // ── Resolution-change reset detection ──────────────────────────
             // Videasy resets to 0 on quality change. We only seek back if:
             // - ct is near zero (≤5s)
@@ -544,6 +554,78 @@ export default function MoviePage({
     onHistory({ ...d, media_type: "movie" });
   }, [d, onHistory]);
 
+  // ── Media Session API integration ─────────────────────────────────────────
+  // The OS reads media metadata from the renderer that OWNS the playing
+  // <video> — which is the webview, not this React renderer. So we must
+  // inject MediaMetadata overrides into the webview via executeJavaScript.
+  // We also keep main-renderer calls as a secondary layer for compatibility.
+  useEffect(() => {
+    if (!playing) {
+      clearMediaSession();
+      return;
+    }
+
+    const metadata = {
+      title:      title || "Movie",
+      artist:     "StreamBert",
+      album:      year || "",
+      posterPath: d.poster_path ?? null,
+    };
+
+    // ─ Secondary: set in main renderer (picked up by some Electron builds) ─
+    setMediaSessionMetadata(metadata);
+    syncPlaybackState("playing");
+
+    // ─ Register main-renderer handlers (play/pause delegated to webview) ─
+    registerMediaSessionHandlers(
+      async () => {
+        try {
+          const wv = webviewRef.current;
+          if (wv) await wv.executeJavaScript(`(() => { const v = document.querySelector('video'); if (v) v.play(); })()`);
+          syncPlaybackState("playing");
+        } catch {}
+      },
+      async () => {
+        try {
+          const wv = webviewRef.current;
+          if (wv) await wv.executeJavaScript(`(() => { const v = document.querySelector('video'); if (v) v.pause(); })()`);
+          syncPlaybackState("paused");
+        } catch {}
+      },
+    );
+
+    // ─ Primary: inject directly into the webview renderer ───────────────
+    // The script re-applies itself at +0 ms, +600 ms, and +2 s to reliably
+    // override any async metadata the embed page sets after initial load.
+    const script = buildWebviewMetadataScript(metadata);
+    const injectIntoWebview = () => {
+      const wv = webviewRef.current;
+      if (wv && window.electron?.injectAllFrames) {
+        window.electron.injectAllFrames(wv.getWebContentsId(), script).catch(() => {});
+      } else if (wv) {
+        wv.executeJavaScript(script).catch(() => {});
+      }
+    };
+
+    const wv = webviewRef.current;
+    if (wv) {
+      wv.addEventListener("dom-ready",       injectIntoWebview);
+      wv.addEventListener("did-finish-load", injectIntoWebview);
+      // Try immediately — succeeds if the webview is already loaded,
+      // fails silently if dom-ready hasn't fired yet (dom-ready handles it).
+      try { injectIntoWebview(); } catch {}
+    }
+
+    return () => {
+      clearMediaSession();
+      const wv = webviewRef.current;
+      if (wv) {
+        wv.removeEventListener("dom-ready",       injectIntoWebview);
+        wv.removeEventListener("did-finish-load", injectIntoWebview);
+      }
+    };
+  }, [playing, title, year, d.poster_path]);
+
   // Intercept fullscreen requests from embedded players (vidsrc / 2embed use
   // the native Fullscreen API which would otherwise fullscreen the entire app).
   // Videasy and AllManga handle fullscreen internally via CSS, skip those.
diff --git a/src/pages/TVPage.jsx b/src/pages/TVPage.jsx
index 397fa56..8fc817e 100644
--- a/src/pages/TVPage.jsx
+++ b/src/pages/TVPage.jsx
@@ -57,6 +57,13 @@ import {
   getAgeLimitSetting,
   getRatingCountry,
 } from "../utils/ageRating";
+import {
+  setMediaSessionMetadata,
+  buildWebviewMetadataScript,
+  registerMediaSessionHandlers,
+  clearMediaSession,
+  syncPlaybackState,
+} from "../utils/mediaSession";
 
 // ── Partial-circle progress icon (cached per pct tier) ───────────────────────
 // Uses a single SVG arc. Three instances (25/50/75)
@@ -1223,6 +1230,9 @@ export default function TVPage({
             durationRef.current = result.duration;
             const ct = result.currentTime;
 
+            // Sync OS playback state on every progress tick
+            syncPlaybackState("playing");
+
             // ── Resolution-change reset detection ──────────────────────────
             // Videasy resets to 0 on quality change. We only seek back if:
             // - ct is near zero (≤5s)
@@ -1355,6 +1365,93 @@ export default function TVPage({
     [d, selectedSeason, onHistory],
   );
 
+  // ── Media Session API integration ─────────────────────────────────────────
+  // The OS reads media metadata from the renderer that OWNS the playing
+  // <video> — which is the webview, not this React renderer. So we must
+  // inject MediaMetadata overrides into the webview via executeJavaScript.
+  // We also keep main-renderer calls as a secondary layer for compatibility.
+  useEffect(() => {
+    if (!playing || !selectedEp) {
+      clearMediaSession();
+      return;
+    }
+
+    // Build episode-aware title: "Show Name — S01E03"
+    const showTitle  = d.name || d.title || "TV Show";
+    const epNum      = String(selectedEp.episode_number).padStart(2, "0");
+    const snNum      = String(selectedSeason).padStart(2, "0");
+    const epLabel    = `S${snNum}E${epNum}`;
+    const epName     = selectedEp.name || epLabel;
+    const mediaTitle = `${showTitle} — ${epLabel}`;
+
+    const metadata = {
+      title:      mediaTitle,
+      artist:     epName,           // episode title shown as "artist" subtitle
+      album:      showTitle,        // show name shown as "album"
+      posterPath: selectedEp.still_path ?? d.poster_path ?? null,
+    };
+
+    // ─ Secondary: set in main renderer (picked up by some Electron builds) ─
+    setMediaSessionMetadata(metadata);
+    syncPlaybackState("playing");
+
+    // ─ Register main-renderer handlers (play/pause delegated to webview) ─
+    registerMediaSessionHandlers(
+      async () => {
+        try {
+          const wv = webviewRef.current;
+          if (wv) await wv.executeJavaScript(`(() => { const v = document.querySelector('video'); if (v) v.play(); })()`);
+          syncPlaybackState("playing");
+        } catch {}
+      },
+      async () => {
+        try {
+          const wv = webviewRef.current;
+          if (wv) await wv.executeJavaScript(`(() => { const v = document.querySelector('video'); if (v) v.pause(); })()`);
+          syncPlaybackState("paused");
+        } catch {}
+      },
+    );
+
+    // ─ Primary: inject directly into the webview renderer ───────────────
+    // The script re-applies itself at +0 ms, +600 ms, and +2 s to reliably
+    // override any async metadata the embed page sets after initial load.
+    const script = buildWebviewMetadataScript(metadata);
+    const injectIntoWebview = () => {
+      const wv = webviewRef.current;
+      if (wv && window.electron?.injectAllFrames) {
+        window.electron.injectAllFrames(wv.getWebContentsId(), script).catch(() => {});
+      } else if (wv) {
+        wv.executeJavaScript(script).catch(() => {});
+      }
+    };
+
+    const wv = webviewRef.current;
+    if (wv) {
+      wv.addEventListener("dom-ready",       injectIntoWebview);
+      wv.addEventListener("did-finish-load", injectIntoWebview);
+      // Try immediately — succeeds if the webview is already loaded,
+      // fails silently if dom-ready hasn't fired yet (dom-ready handles it).
+      try { injectIntoWebview(); } catch {}
+    }
+
+    return () => {
+      clearMediaSession();
+      const wv = webviewRef.current;
+      if (wv) {
+        wv.removeEventListener("dom-ready",       injectIntoWebview);
+        wv.removeEventListener("did-finish-load", injectIntoWebview);
+      }
+    };
+  }, [
+    playing,
+    selectedEp,
+    selectedSeason,
+    d.name,
+    d.title,
+    d.poster_path,
+  ]);
+
   const handleSetDownloaderFolder = useCallback((folder) => {
     setDownloaderFolder(folder);
     storage.set("downloaderFolder", folder);
diff --git a/src/utils/mediaSession.js b/src/utils/mediaSession.js
new file mode 100644
index 0000000..82d801a
--- /dev/null
+++ b/src/utils/mediaSession.js
@@ -0,0 +1,225 @@
+// -- Media Session API integration -------------------------------------------
+// Registers StreamBert as an active media player with the OS so that
+// Bluetooth earbuds, keyboard media keys, Windows media flyout (FluentFlyout),
+// and lock-screen overlays can control playback.
+//
+// ── Why we inject into the webview ──────────────────────────────────────────
+// The actual <video> element lives inside a sandboxed <webview>, which runs in
+// a completely separate Chromium renderer process with its own isolated
+// navigator.mediaSession. The OS reads media metadata from THAT process —
+// specifically from whichever renderer owns the playing <video>. Any metadata
+// we set in the main React renderer (this process) is in a different process
+// and gets silently ignored or overridden by the embed page's own metadata
+// (e.g. "vidsrc.to/embed/tv/...").
+//
+// Fix: we use webview.executeJavaScript() to inject a MediaMetadata override
+// directly into the webview's renderer context. We re-inject on every
+// dom-ready and did-finish-load event (with a 600ms delay to beat any
+// async metadata set by the embed page itself).
+//
+// The main renderer's navigator.mediaSession calls are kept as a secondary
+// layer — some Electron versions / OS combinations may pick them up.
+
+const SUPPORTED = "mediaSession" in navigator;
+
+// TMDB image base — same constant used across the app.
+const IMG_BASE = "https://image.tmdb.org/t/p";
+
+/**
+ * Build an array of MediaImage objects from a TMDB poster path.
+ * Provides multiple sizes so the OS picks the most appropriate one.
+ *
+ * @param {string|null} posterPath  e.g. "/abc123.jpg"
+ * @returns {MediaImage[]}
+ */
+function buildArtwork(posterPath) {
+  if (!posterPath) return [];
+  const sizes = [
+    { size: "w92",  wh: "92x138"   },
+    { size: "w185", wh: "185x278"  },
+    { size: "w342", wh: "342x513"  },
+    { size: "w500", wh: "500x750"  },
+    { size: "w780", wh: "780x1170" },
+  ];
+  return sizes.map(({ size, wh }) => ({
+    src: `${IMG_BASE}/${size}${posterPath}`,
+    sizes: wh,
+    type: "image/jpeg",
+  }));
+}
+
+/**
+ * Build a self-contained JavaScript string that, when executed inside a
+ * webview via executeJavaScript(), overrides the page's Media Session metadata
+ * with our human-readable StreamBert values.
+ *
+ * We inject at two points:
+ *   1. Immediately on dom-ready / did-finish-load
+ *   2. After a 600 ms delay — to override any async metadata set by the embed
+ *      page after the initial page load (most embed players set metadata once
+ *      the video starts buffering, which can be several hundred ms after load).
+ *
+ * @param {object}      opts
+ * @param {string}      opts.title
+ * @param {string}      [opts.artist]
+ * @param {string}      [opts.album]
+ * @param {string|null} [opts.posterPath]  TMDB poster path, e.g. "/abc123.jpg"
+ * @returns {string}  JavaScript to execute in the webview context
+ */
+export function buildWebviewMetadataScript({ title, artist, album, posterPath }) {
+  const artwork = buildArtwork(posterPath ?? null);
+
+  // Serialize values safely for embedding inside the script string.
+  const t  = JSON.stringify(title  || "StreamBert");
+  const ar = JSON.stringify(artist || "StreamBert");
+  const al = JSON.stringify(album  || "");
+  const aw = JSON.stringify(artwork);
+
+  // 1. Lock metadata so the embed page cannot override it.
+  // 2. Set action handlers for play/pause inside each frame so the OS keys control the local video.
+  // 3. Inject spacebar listener to toggle video play/pause when focused inside the frame.
+  return `
+(function() {
+  if (!('mediaSession' in navigator)) return;
+  
+  // Set metadata
+  try {
+    var _meta = new MediaMetadata({
+      title:   ${t},
+      artist:  ${ar},
+      album:   ${al},
+      artwork: ${aw}
+    });
+    Object.defineProperty(navigator.mediaSession, 'metadata', {
+      get: function()  { return _meta; },
+      set: function()  { /* swallow */ },
+      configurable: true,
+      enumerable:   true
+    });
+  } catch(e) {
+    try {
+      navigator.mediaSession.metadata = new MediaMetadata({
+        title: ${t}, artist: ${ar}, album: ${al}, artwork: ${aw}
+      });
+    } catch {}
+  }
+
+  // Set action handlers directly inside the frame
+  try {
+    navigator.mediaSession.setActionHandler("play", function() {
+      try {
+        var v = document.querySelector("video");
+        if (v) v.play();
+      } catch(e) {}
+    });
+    navigator.mediaSession.setActionHandler("pause", function() {
+      try {
+        var v = document.querySelector("video");
+        if (v) v.pause();
+      } catch(e) {}
+    });
+  } catch(e) {}
+
+  // Spacebar hotkey listener in capture phase
+  if (!window.__streambertSpacebarInjected) {
+    window.__streambertSpacebarInjected = true;
+    window.addEventListener("keydown", function(e) {
+      if (e.key === " " || e.code === "Space") {
+        var active = document.activeElement;
+        if (active && (
+          active.tagName === "INPUT" || 
+          active.tagName === "TEXTAREA" || 
+          active.isContentEditable
+        )) {
+          return;
+        }
+        var v = document.querySelector("video");
+        if (v) {
+          e.preventDefault();
+          e.stopPropagation();
+          if (v.paused) {
+            v.play();
+          } else {
+            v.pause();
+          }
+        }
+      }
+    }, true);
+  }
+})();
+`.trim();
+}
+
+/**
+ * Set the Media Session metadata in the MAIN renderer.
+ * Called as a secondary layer alongside the webview injection.
+ *
+ * @param {object} opts
+ * @param {string}      opts.title
+ * @param {string}      [opts.artist]
+ * @param {string}      [opts.album]
+ * @param {string|null} [opts.posterPath]
+ */
+export function setMediaSessionMetadata({ title, artist, album, posterPath }) {
+  if (!SUPPORTED) return;
+  try {
+    navigator.mediaSession.metadata = new MediaMetadata({
+      title:   title  || "StreamBert",
+      artist:  artist || "StreamBert",
+      album:   album  || "",
+      artwork: buildArtwork(posterPath ?? null),
+    });
+  } catch (e) {
+    console.warn("[MediaSession] setMetadata failed:", e);
+  }
+}
+
+/**
+ * Register play/pause action handlers that delegate into the webview.
+ *
+ * @param {() => Promise<void>} onPlay   Async fn that resumes the video
+ * @param {() => Promise<void>} onPause  Async fn that pauses the video
+ */
+export function registerMediaSessionHandlers(onPlay, onPause) {
+  if (!SUPPORTED) return;
+  try {
+    navigator.mediaSession.setActionHandler("play",  () => { onPlay?.().catch(() => {}); });
+    navigator.mediaSession.setActionHandler("pause", () => { onPause?.().catch(() => {}); });
+  } catch (e) {
+    console.warn("[MediaSession] registerHandlers failed:", e);
+  }
+}
+
+/**
+ * Unregister all action handlers and clear metadata.
+ * Call this when the player is stopped or unmounted.
+ */
+export function clearMediaSession() {
+  if (!SUPPORTED) return;
+  try {
+    navigator.mediaSession.setActionHandler("play",  null);
+    navigator.mediaSession.setActionHandler("pause", null);
+    navigator.mediaSession.playbackState = "none";
+    navigator.mediaSession.metadata = null;
+  } catch (e) {
+    console.warn("[MediaSession] clear failed:", e);
+  }
+}
+
+/**
+ * Sync the OS playback state indicator.
+ * Call this from the existing 5-second progress-polling interval so the
+ * Windows media flyout shows the correct play/pause icon.
+ *
+ * @param {"playing"|"paused"|"none"} state
+ */
+export function syncPlaybackState(state) {
+  if (!SUPPORTED) return;
+  try {
+    if (navigator.mediaSession.playbackState !== state) {
+      navigator.mediaSession.playbackState = state;
+    }
+  } catch (e) {
+    // Ignore – non-critical.
+  }
+}