Commit 57b3780770a829ff81e62d8dc658683bf51d5155 | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-10-09 23:13:32-07:00
committer	GitHub <noreply@github.com> 2026-10-09 23:13:32-07:00
log	57b3780770a829ff81e62d8dc658683bf51d5155
tree	f6d390bdd1fd5460261bc6a9a4a918e6ea04231d
parent	a7223f3969428170cc13bd7859aa59098b2f94b1
signature	Signed by PGP key B5690EEEBB952194

fix(mobile): browser picture in picture opens from the header button (#17731)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

1 files changed, 49 insertions(+), 31 deletions(-)

apps
- mobile
  - src
    features
    browser
    preview-stream.browser.ts

apps/mobile/src/features/browser/preview-stream.browser.ts+49-31

 @@ -50,7 +50,7 @@ const AGENT_CURSOR_SVG =
 interface Viewer {
   readonly stop: () => void;
   readonly command: (input: PreviewStreamInput) => void;
-  readonly togglePictureInPicture: () => Promise<void>;
+  readonly togglePictureInPicture: () => void;
 }
 let activeViewer: Viewer | null = null;
 @@ -66,7 +66,7 @@ export function command(input: PreviewStreamInput) {
 }
 export function pictureInPicture() {
-  void activeViewer?.togglePictureInPicture();
+  activeViewer?.togglePictureInPicture();
 }
 export function start(configuration: PreviewStreamConfiguration) {
 @@ -147,6 +147,7 @@ export function start(configuration: PreviewStreamConfiguration) {
   };
   const painter = createPreviewFramePainter(canvas, () => {
     if (!streaming && !stopped) reportStatus("streaming");
+    sendPictureInPictureFrame();
   });
   const send = (message: PreviewStreamInput) => client?.send(message) ?? false;
   const clearInput = () => {
 @@ -620,10 +621,16 @@ export function start(configuration: PreviewStreamConfiguration) {
   const pictureInPictureSupported =
     interactive &&
     typeof canvas.captureStream === "function" &&
+    typeof CanvasCaptureMediaStreamTrack === "function" &&
     ((document.pictureInPictureEnabled === true &&
       typeof videoPrototype.requestPictureInPicture === "function") ||
       typeof videoPrototype.webkitSetPresentationMode === "function");
+  // Since the iOS 17 SDK, WebKit revokes the activation it grants an injected script when
+  // the script returns, so the native button's request must start before any await. The
+  // video is ready ahead of the tap: paused, and fed a frame only when it has none or
+  // floats, so the inline view captures nothing.
   let video: PresentationVideo | null = null;
+  let track: CanvasCaptureMediaStreamTrack | null = null;
   const pictureInPictureActive = () =>
     video !== null &&
     (document.pictureInPictureElement === video ||
 @@ -635,16 +642,20 @@ export function start(configuration: PreviewStreamConfiguration) {
       active: pictureInPictureActive(),
       ...(detail ? { detail } : {}),
     });
-  const ensureVideo = () => {
+  // Called after each paint. A frame drawn before the player attached is lost, so retry.
-    if (video) return video;
+  const sendPictureInPictureFrame = () => {
+    if (video && (video.readyState === HTMLMediaElement.HAVE_NOTHING || pictureInPictureActive())) {
+      track?.requestFrame();
+    }
+  };
+  if (pictureInPictureSupported) {
+    const stream = canvas.captureStream(0);
+    const [captured] = stream.getVideoTracks();
     const element: PresentationVideo = document.createElement("video");
     element.muted = true;
     element.playsInline = true;
-    element.autoplay = true;
     // Under the canvas at full size: WebKit pauses muted video it considers off screen.
-    element.srcObject = canvas.captureStream();
+    element.srcObject = stream;
-    // A static page sends no new frames; repaint once so the stream has one.
-    if (canvas.width > 0 && canvas.height > 0) canvas.getContext("2d")?.drawImage(canvas, 0, 0);
     for (const name of [
       "enterpictureinpicture",
       "leavepictureinpicture",
 @@ -656,25 +667,38 @@ export function start(configuration: PreviewStreamConfiguration) {
       });
     }
     container.prepend(element);
+    // Covers the letterbox, where a stale frame of another shape would show through.
+    canvas.style.background = configuration.background;
     video = element;
-    return element;
+    track = captured instanceof CanvasCaptureMediaStreamTrack ? captured : null;
-  };
+  }
-  const togglePictureInPicture = async () => {
+  const togglePictureInPicture = () => {
-    if (!pictureInPictureSupported) return;
+    const element = video;
-    try {
+    if (!element) return;
-      if (pictureInPictureActive()) {
+    if (pictureInPictureActive()) {
-        if (document.pictureInPictureElement) await document.exitPictureInPicture();
+      if (document.pictureInPictureElement) void document.exitPictureInPicture().catch(() => {});
-        else video?.webkitSetPresentationMode?.("inline");
+      else element.webkitSetPresentationMode?.("inline");
-        return;
+      return;
-      }
+    }
-      const element = ensureVideo();
+    if (element.readyState === HTMLMediaElement.HAVE_NOTHING) {
-      await element.play();
+      reportPictureInPicture("The page has not shown yet. Try again in a moment.");
-      if (document.pictureInPictureEnabled) await element.requestPictureInPicture();
+      return;
-      else element.webkitSetPresentationMode?.("picture-in-picture");
+    }
-    } catch (error) {
+    // The page may have changed since the video's last frame. WebKit captures only on a draw.
+    track?.requestFrame();
+    canvas.getContext("2d")?.drawImage(canvas, 0, 0);
+    const fail = (error: unknown) => {
+      element.pause();
       reportPictureInPicture(
         error instanceof Error ? error.message : "Picture in picture is unavailable.",
       );
+    };
+    if (document.pictureInPictureEnabled) {
+      const entering = element.requestPictureInPicture();
+      void Promise.all([entering, element.play()]).catch(fail);
+    } else {
+      element.webkitSetPresentationMode?.("picture-in-picture");
+      void element.play().catch(fail);
     }
   };
 @@ -691,14 +715,8 @@ export function start(configuration: PreviewStreamConfiguration) {
       painter.stop();
       client?.stop();
       client = null;
-      if (video) {
+      track?.stop();
-        for (const track of video.srcObject instanceof MediaStream
+      if (video) video.srcObject = null;
-          ? video.srcObject.getTracks()
-          : []) {
-          track.stop();
-        }
-        video.srcObject = null;
-      }
     },
     command: (message) => {
       send(message);