Reapply media-playback hibernation fix (issue 5409)

Sources/Panels/BrowserHiddenWebViewDiscardManager.swift

@@ -36,6 +36,7 @@ final class BrowserHiddenWebViewDiscardManager {
         let isReactGrabActive: Bool
         let hasPopups: Bool
         let isCapturingMedia: Bool
+        let isPlayingMedia: Bool
     }
 
     weak var delegate: BrowserHiddenWebViewDiscardManagerDelegate?
@@ -77,6 +78,7 @@ final class BrowserHiddenWebViewDiscardManager {
         if snapshot.hasActiveMainFrameProvisionalNavigation { blockers.append("provisional_navigation") }
         if snapshot.isDownloading || snapshot.activeDownloadCount != 0 { blockers.append("download") }
         if snapshot.isCapturingMedia { blockers.append("media_capture") }
+        if snapshot.isPlayingMedia { blockers.append("media_playback") }
         if snapshot.preferredDeveloperToolsVisible || snapshot.isDeveloperToolsVisible {
             blockers.append("developer_tools")
         }

Sources/Panels/BrowserMediaPlaybackMessageHandler.swift

@@ -0,0 +1,34 @@
+import Foundation
+import WebKit
+
+/// Receives `{ frameID, playing }` from the injected media-playback hook and
+/// forwards it to the owning ``BrowserPanel`` on the main actor.
+///
+/// Mirrors ``ReactGrabMessageHandler``: a thin `NSObject` adapter so the panel
+/// itself never has to conform to `WKScriptMessageHandler`.
+final class BrowserMediaPlaybackMessageHandler: NSObject, WKScriptMessageHandler {
+    private let onReport: @MainActor (BrowserMediaPlaybackReport) -> Void
+
+    init(onReport: @escaping @MainActor (BrowserMediaPlaybackReport) -> Void) {
+        self.onReport = onReport
+    }
+
+    func userContentController(
+        _ userContentController: WKUserContentController,
+        didReceive message: WKScriptMessage
+    ) {
+        guard let body = message.body as? [String: Any],
+              let frameID = body["frameID"] as? String,
+              let playing = body["playing"] as? Bool else { return }
+        let report = BrowserMediaPlaybackReport(frameID: frameID, isPlaying: playing)
+        // WebKit delivers script messages on the main thread. Apply the report
+        // synchronously instead of hopping through a `Task` so it lands in
+        // WebKit's delivery order relative to navigation callbacks: a report
+        // emitted by a document before it navigates away is applied before the
+        // matching `didCommit` reset, so a stale `playing: true` cannot re-add a
+        // dead frame id after the reset and pin the pane against discard.
+        MainActor.assumeIsolated {
+            onReport(report)
+        }
+    }
+}

Sources/Panels/BrowserMediaPlaybackReport.swift

@@ -0,0 +1,10 @@
+import Foundation
+
+/// A per-frame media-playback report from the injected media-playback hook.
+struct BrowserMediaPlaybackReport: Sendable {
+    /// Stable id for the reporting frame's document, so the native side can
+    /// aggregate playback across the main frame and any (cross-origin) iframes.
+    let frameID: String
+    /// Whether that frame currently has any actively-playing media.
+    let isPlaying: Bool
+}

Sources/Panels/BrowserPanel+MediaPlayback.swift

@@ -0,0 +1,207 @@
+import Foundation
+import WebKit
+
+/// Name of the `WKScriptMessageHandler` the injected media-playback hook posts to.
+private let mediaPlaybackMessageHandlerName = "cmuxMediaPlayback"
+
+extension BrowserPanel {
+    /// Isolated content world for the media-playback hook.
+    ///
+    /// Both the injected script and the message handler live here, not the page
+    /// world, so arbitrary page JavaScript cannot reach
+    /// the private media-playback message handler and post a fake `{ playing:
+    /// true }` report that would pin the pane alive forever and defeat
+    /// hidden-webview discard. A content world shares the DOM, so the script's
+    /// media event listeners and `MutationObserver` still observe page playback.
+    static let mediaPlaybackContentWorld = WKContentWorld.world(name: mediaPlaybackMessageHandlerName)
+
+    /// Injected document-start hook that reports whether the current frame has
+    /// any actively-playing `<video>`/`<audio>` element.
+    ///
+    /// Runs in every frame (main frame and cross-origin iframes) so an embedded
+    /// player (a news site embedding a YouTube/Vimeo/Twitch iframe, etc.) keeps
+    /// its hidden pane alive too. Each frame tags its report with a stable
+    /// per-document id; the native side keeps a pane alive while any frame is
+    /// playing and releases it once every frame has stopped
+    /// (https://github.com/manaflow-ai/cmux/issues/5409).
+    ///
+    /// Reports only on change (debounced via `lastReported`) and on `pagehide`.
+    /// Uses `paused`/`ended`, so playback that the user has muted still counts as
+    /// "playing media" (matching Chrome's keep-alive). Uses only public DOM APIs,
+    /// so it is stable across WebKit/macOS versions, unlike the private
+    /// `_isPlayingAudio` KVO property (which would also drop user-muted video).
+    ///
+    /// The script is purely passive (capture-phase listeners only; no console,
+    /// prototype, or enumerable-global tampering) so it does not trip the
+    /// fingerprinting checks of CAPTCHA providers that live in cross-origin
+    /// iframes. `WKUserScript` injects it once per document, so no install guard
+    /// is needed. Known limitation: media produced via the Web Audio API with no
+    /// `<video>`/`<audio>` element (some web games) is not detected, since a
+    /// running `AudioContext` is not a reliable "audible" signal and would
+    /// over-retain idle panes.
+    static let mediaPlaybackTrackingBootstrapScriptSource = """
+    (() => {
+      try {
+        const frameID = (() => {
+          try {
+            if (window.crypto && typeof window.crypto.randomUUID === "function") {
+              return window.crypto.randomUUID();
+            }
+          } catch (_) {}
+          return Date.now().toString(36) + "-" + Math.random().toString(36).slice(2);
+        })();
+
+        let lastReported = null;
+        let mediaObserver = null;
+
+        const isElementPlaying = (el) => {
+          try {
+            return !!el && !el.paused && !el.ended;
+          } catch (_) {
+            return false;
+          }
+        };
+
+        const anyPlaying = () => {
+          try {
+            const media = document.querySelectorAll("video, audio");
+            for (let i = 0; i < media.length; i++) {
+              if (isElementPlaying(media[i])) return true;
+            }
+          } catch (_) {}
+          return false;
+        };
+
+        const post = (playing) => {
+          try {
+            window.webkit.messageHandlers["\(mediaPlaybackMessageHandlerName)"].postMessage({
+              frameID: frameID,
+              playing: playing
+            });
+          } catch (_) {}
+        };
+
+        const disconnectObserver = () => {
+          if (!mediaObserver) return;
+          try { mediaObserver.disconnect(); } catch (_) {}
+          mediaObserver = null;
+        };
+
+        const removedMedia = (node) => {
+          try {
+            if (!node || node.nodeType !== 1) return false;
+            if (node.matches && node.matches("video, audio")) return true;
+            return !!(node.querySelector && node.querySelector("video, audio"));
+          } catch (_) {
+            return false;
+          }
+        };
+
+        // Removing a playing element from the DOM fires no media event, so while
+        // anything is playing watch for DOM mutations and recheck. This is the
+        // only signal that survives while the page is hidden (timers are
+        // throttled, MutationObserver is not), so a player that tears down its
+        // <video> still clears the blocker and lets the pane be discarded.
+        //
+        // Only recheck when a mutation actually removes a media element; added
+        // media already fires a `play` event. This avoids a full-document
+        // querySelectorAll on every DOM change of a mutation-heavy SPA (live
+        // chat, infinite scroll) while a video plays.
+        function syncObserver(playing) {
+          if (playing) {
+            if (mediaObserver) return;
+            try {
+              mediaObserver = new MutationObserver((records) => {
+                for (let i = 0; i < records.length; i++) {
+                  const removed = records[i].removedNodes;
+                  for (let j = 0; j < removed.length; j++) {
+                    if (removedMedia(removed[j])) {
+                      report();
+                      return;
+                    }
+                  }
+                }
+              });
+              mediaObserver.observe(document.documentElement || document, {
+                childList: true,
+                subtree: true
+              });
+            } catch (_) {}
+          } else {
+            disconnectObserver();
+          }
+        }
+
+        function report() {
+          const playing = anyPlaying();
+          syncObserver(playing);
+          if (playing === lastReported) return;
+          lastReported = playing;
+          post(playing);
+        }
+
+        // Media events do not bubble, but capture-phase listeners on `document`
+        // still observe them as the event travels down to the target element.
+        const events = [
+          "play", "playing", "pause", "ended", "emptied",
+          "waiting", "stalled", "suspend", "abort", "loadeddata"
+        ];
+        for (let i = 0; i < events.length; i++) {
+          document.addEventListener(events[i], report, true);
+        }
+
+        window.addEventListener("pagehide", () => {
+          disconnectObserver();
+          if (lastReported === false) return;
+          lastReported = false;
+          post(false);
+        }, true);
+
+        document.addEventListener("DOMContentLoaded", report, true);
+        report();
+      } catch (_) {}
+      return true;
+    })();
+    """
+
+    /// Installs the media-playback message handler on `webView`.
+    ///
+    /// Each `BrowserPanel` webview is created with a fresh `WKWebViewConfiguration`
+    /// (`makeWebView`), so the handler name is never registered twice on one
+    /// content controller. Reset `isPlayingMedia` for the freshly bound webview.
+    func setupMediaPlaybackMessageHandler(for webView: WKWebView) {
+        resetMediaPlaybackTracking()
+        // Bind the handler to this webview generation. The handler stays alive on
+        // the old content controller until the old webview deallocates, so a late
+        // report from a replaced document must be ignored or it would repopulate
+        // playingMediaFrameIDs for a page that is gone and block discard forever.
+        let boundWebViewInstanceID = webViewInstanceID
+        let handler = BrowserMediaPlaybackMessageHandler { [weak self] report in
+            self?.handleMediaPlaybackReport(report, fromWebViewInstanceID: boundWebViewInstanceID)
+        }
+        mediaPlaybackMessageHandler = handler
+        webView.configuration.userContentController.add(
+            handler,
+            contentWorld: Self.mediaPlaybackContentWorld,
+            name: mediaPlaybackMessageHandlerName
+        )
+    }
+
+    /// Applies a per-frame playback report from the injected hook, aggregating
+    /// across the main frame and any iframes. Reports from a superseded webview
+    /// generation are dropped.
+    func handleMediaPlaybackReport(
+        _ report: BrowserMediaPlaybackReport,
+        fromWebViewInstanceID instanceID: UUID
+    ) {
+        guard instanceID == webViewInstanceID else { return }
+        applyMediaPlaybackReport(frameID: report.frameID, isPlaying: report.isPlaying)
+#if DEBUG
+        cmuxDebugLog(
+            "browser.media.playback panel=\(id.uuidString.prefix(5)) " +
+            "frame=\(report.frameID.prefix(5)) playing=\(report.isPlaying ? 1 : 0) " +
+            "anyPlaying=\(isPlayingMedia ? 1 : 0)"
+        )
+#endif
+    }
+}

Sources/Panels/BrowserPanel.swift

@@ -3570,6 +3570,39 @@ final class BrowserPanel: Panel, ObservableObject {
         }
     }
     var reactGrabMessageHandler: ReactGrabMessageHandler?
+    /// Whether the live page currently has any actively-playing `<video>` or
+    /// `<audio>` element, in the main frame or any iframe, reported by the
+    /// injected media-playback hook. Keeps an actively-playing pane alive in the
+    /// background instead of being discarded after the hidden delay
+    /// (https://github.com/manaflow-ai/cmux/issues/5409).
+    private(set) var isPlayingMedia: Bool = false {
+        didSet {
+            guard oldValue != isPlayingMedia else { return }
+            reevaluateHiddenWebViewDiscardScheduling(reason: "media_playback_changed")
+        }
+    }
+    /// Document ids of the frames currently reporting playing media. The pane is
+    /// kept alive while this is non-empty.
+    private var playingMediaFrameIDs: Set<String> = []
+    var mediaPlaybackMessageHandler: BrowserMediaPlaybackMessageHandler?
+
+    /// Folds a per-frame playback report into ``isPlayingMedia``. Lives here so
+    /// the `private(set)` setter stays confined to this file.
+    func applyMediaPlaybackReport(frameID: String, isPlaying: Bool) {
+        if isPlaying {
+            playingMediaFrameIDs.insert(frameID)
+        } else {
+            playingMediaFrameIDs.remove(frameID)
+        }
+        isPlayingMedia = !playingMediaFrameIDs.isEmpty
+    }
+
+    /// Clears all tracked playing frames (new webview bind or main-frame
+    /// navigation, where the prior frame hooks are gone).
+    func resetMediaPlaybackTracking() {
+        playingMediaFrameIDs.removeAll()
+        isPlayingMedia = false
+    }
     var pendingReactGrabReturnTargetPanelId: UUID?
     var pendingReactGrabRoundTripToken: String?
     let reactGrabBridgeSessionUpdaterName = "__cmuxReactGrabBridgeSync_\(UUID().uuidString.replacingOccurrences(of: "-", with: ""))"
@@ -4144,6 +4177,22 @@ final class BrowserPanel: Panel, ObservableObject {
                 forMainFrameOnly: true
             )
         )
+        // Report <video>/<audio> playback so a hidden pane with actively-playing
+        // media is exempted from memory discard
+        // (https://github.com/manaflow-ai/cmux/issues/5409). Injected into every
+        // frame so embedded players in cross-origin iframes keep the pane alive
+        // too. Runs in an isolated content world (shared DOM, separate JS scope)
+        // so the handler is hidden from page JavaScript that could otherwise post
+        // a fake playing report; this also keeps it clear of CAPTCHA fingerprint
+        // checks in those iframes.
+        configuration.userContentController.addUserScript(
+            WKUserScript(
+                source: Self.mediaPlaybackTrackingBootstrapScriptSource,
+                injectionTime: .atDocumentStart,
+                forMainFrameOnly: false,
+                in: Self.mediaPlaybackContentWorld
+            )
+        )
     }
 
     private func bindWebView(_ webView: CmuxWebView) {
@@ -4168,6 +4217,7 @@ final class BrowserPanel: Panel, ObservableObject {
         webView.uiDelegate = uiDelegate
         setupObservers(for: webView)
         setupReactGrabMessageHandler(for: webView)
+        setupMediaPlaybackMessageHandler(for: webView)
         applyMuteState(to: webView, reason: "bindWebView")
     }
 
@@ -4188,6 +4238,13 @@ final class BrowserPanel: Panel, ObservableObject {
             MainActor.assumeIsolated {
                 guard let self, self.isCurrentWebView(webView, instanceID: boundWebViewInstanceID) else { return }
                 self.isMainFrameProvisionalNavigationActive = false
+                // Reset playback tracking only once the new top-level document has
+                // actually replaced the old one. Resetting earlier (on provisional
+                // start) would drop a still-playing page's frames if the
+                // navigation then fails or is canceled, letting a playing pane be
+                // discarded. didCommit does not fire for same-document (pushState)
+                // navigations, so a persisting SPA video keeps its frame id.
+                self.resetMediaPlaybackTracking()
                 self.publishCommittedURL(from: webView)
                 self.applyMuteState(to: webView, reason: "navigationCommit")
             }
@@ -6263,7 +6320,8 @@ extension BrowserPanel: BrowserHiddenWebViewDiscardManagerDelegate {
             isElementFullscreenActive: isElementFullscreenActive,
             isReactGrabActive: isReactGrabActive,
             hasPopups: !popupControllers.isEmpty,
-            isCapturingMedia: webView.cameraCaptureState != .none || webView.microphoneCaptureState != .none
+            isCapturingMedia: webView.cameraCaptureState != .none || webView.microphoneCaptureState != .none,
+            isPlayingMedia: isPlayingMedia
         )
     }