simon/jacuzzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reach picture-in-picture the way iOS offers it

Browse Source 
Safari on iPhone and iPad has picture-in-picture but never implemented
requestPictureInPicture; it exposes WebKit's older presentation-mode switch
instead, and document.pictureInPictureEnabled is undefined there. Every
capability check in the player and the feed was that one property, so they
all answered "no" and the button was hidden outright on the platform where
people most want it.

The difference is confined to customPlayer: supportsPiP, pipElement, enterPiP
and exitPiP speak for both APIs, and bindPiPEvents re-fires WebKit's
webkitpresentationmodechanged -- which does not bubble -- as the standard
enter/leave events, so the feed's delegated listeners, the pane pin and the
media-key stepping work unchanged. Capability is read from the method's
presence rather than webkitSupportsPresentationMode(), which answers false
until a video track is loaded and would hide the button on preload="none"
feed videos.

There is no iPhone here, so smoke_ios_pip.py reshapes the browser to iOS's
API surface -- deleting the standard entry points and installing WebKit's --
and drives the button through it. That covers what actually broke: which API
the code reaches for.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QBDkEXP4htyXTCZUwMLphd
This commit is contained in:
Simon
2026-09-10 21:49:16 +00:00
parent 2abdc31f56
commit 191c81e55e
3 changed files with 282 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
frontend/js/customPlayer.js
View File

@@ -194,24 +194,107 @@ App.customPlayer = App.customPlayer || {};
// tab/app is backgrounded while a video is playing (Safari does this
// natively for inline video; Chrome/Android need an explicit call).
// -----------------------------------------------------------------
App.customPlayer.supportsPiP = function() {
return !!(document.pictureInPictureEnabled);
// iOS has picture-in-picture, but not this API: Safari on iPhone and iPad
// never implemented requestPictureInPicture, and exposes WebKit's older
// presentation-mode switch instead. document.pictureInPictureEnabled is
// undefined there, so every check below it used to answer "no" and the
// button was hidden on the one platform where people most want it.
//
// The difference is confined here. enterPiP/exitPiP/pipElement speak for
// both, and bindPiPEvents re-fires WebKit's non-bubbling
// webkitpresentationmodechanged as the standard enter/leave events, so the
// delegated listeners elsewhere work unchanged.
const WEBKIT_PIP = 'picture-in-picture';
let webkitPipElement = null;
const standardPiP = () => !!document.pictureInPictureEnabled;
const webkitPiP = (video) => !!(video && typeof video.webkitSetPresentationMode === 'function');
// No element to ask about: does this browser have either API at all?
let webkitProbe = null;
const webkitAvailable = function() {
if (webkitProbe === null) {
webkitProbe = typeof HTMLVideoElement !== 'undefined' &&
(typeof HTMLVideoElement.prototype.webkitSetPresentationMode === 'function' ||
webkitPiP(document.createElement('video')));
}
return webkitProbe;
};
App.customPlayer.togglePiP = async function(video) {
if (!video || !document.pictureInPictureEnabled || video.disablePictureInPicture) return false;
try {
if (document.pictureInPictureElement === video) {
await document.exitPictureInPicture();
} else {
// Deliberately the method's presence rather than
// video.webkitSupportsPresentationMode(): that answers false until a video
// track is loaded, and feed videos are preload="none" until they go active
// -- it would hide the button on exactly the videos about to be able to
// use it.
App.customPlayer.supportsPiP = function() {
return standardPiP() || webkitAvailable();
};
App.customPlayer.pipElement = function() {
return document.pictureInPictureElement || webkitPipElement || null;
};
App.customPlayer.enterPiP = async function(video) {
if (!video) return false;
if (standardPiP()) {
if (video.disablePictureInPicture) return false;
try {
await video.requestPictureInPicture();
return true;
} catch (err) {
return false;
}
}
if (!webkitPiP(video)) return false;
try {
// Synchronous, and it needs the user gesture that got us here.
video.webkitSetPresentationMode(WEBKIT_PIP);
return true;
} catch (err) {
return false;
}
};
App.customPlayer.exitPiP = async function() {
if (document.pictureInPictureElement) {
await document.exitPictureInPicture().catch(() => {});
return;
}
const video = webkitPipElement;
if (!webkitPiP(video)) return;
try { video.webkitSetPresentationMode('inline'); } catch (err) { /* already gone */ }
};
App.customPlayer.bindPiPEvents = function(video) {
if (standardPiP() || !webkitPiP(video)) return function destroy() {};
// The same event announces fullscreen and inline, so only a real change
// in picture-in-picture-ness is worth reporting.
let wasPip = video.webkitPresentationMode === WEBKIT_PIP;
const onChange = function() {
const isPip = video.webkitPresentationMode === WEBKIT_PIP;
if (isPip === wasPip) return;
wasPip = isPip;
if (isPip) webkitPipElement = video;
else if (webkitPipElement === video) webkitPipElement = null;
video.dispatchEvent(new CustomEvent(
isPip ? 'enterpictureinpicture' : 'leavepictureinpicture', { bubbles: true }));
};
video.addEventListener('webkitpresentationmodechanged', onChange);
return function destroy() {
video.removeEventListener('webkitpresentationmodechanged', onChange);
if (webkitPipElement === video) webkitPipElement = null;
};
};
App.customPlayer.togglePiP = async function(video) {
if (!video) return false;
if (App.customPlayer.pipElement() === video) {
await App.customPlayer.exitPiP();
return true;
}
return App.customPlayer.enterPiP(video);
};
// Asking for picture-in-picture the moment a tab is hidden is a request
// with no user gesture behind it, and browsers refuse those -- which is why
// the imperative call below fails silently. `autoPictureInPicture` is the
@@ -230,17 +313,19 @@ App.customPlayer = App.customPlayer || {};
App.customPlayer.bindAutoPiP = function(video) {
if (!video) return function destroy() {};
App.customPlayer.setAutoPiP(video, true);
const unbindEvents = App.customPlayer.bindPiPEvents(video);
const trigger = () => {
if (document.visibilityState !== 'hidden') return;
if (!document.pictureInPictureEnabled || video.disablePictureInPicture) return;
if (document.pictureInPictureElement) return;
if (!App.customPlayer.supportsPiP() || video.disablePictureInPicture) return;
if (App.customPlayer.pipElement()) return;
if (video.paused || video.ended) return;
video.requestPictureInPicture().catch(() => {});
App.customPlayer.enterPiP(video);
};
document.addEventListener('visibilitychange', trigger);
window.addEventListener('pagehide', trigger);
return function destroy() {
App.customPlayer.setAutoPiP(video, false);
unbindEvents();
document.removeEventListener('visibilitychange', trigger);
window.removeEventListener('pagehide', trigger);
};

33
frontend/js/feed.js
View File

@@ -287,6 +287,10 @@ App.feed = App.feed || {};
wakeHud();
};
// On iOS these are the only source of enter/leave events; everywhere
// else this is a no-op and the browser fires them itself.
cleanups.push(App.customPlayer.bindPiPEvents(video));
const pipBtn = pane.querySelector('.feed-pip-btn');
if (pipBtn) {
pipBtn.hidden = !App.customPlayer.supportsPiP() && !App.feed.docPipSupported();
@@ -296,8 +300,8 @@ App.feed = App.feed || {};
App.feed.closeDocPip();
return;
}
if (document.pictureInPictureElement) {
await document.exitPictureInPicture().catch(() => {});
if (App.customPlayer.pipElement()) {
await App.customPlayer.exitPiP();
return;
}
// The whole feed in a real window beats one pane's frames in a
@@ -1183,7 +1187,7 @@ App.feed = App.feed || {};
// the rest of the session, so any leave that finds nothing left in
// a window releases it -- being wrong here costs a rebuild, being
// stuck costs a frozen feed.
if (pane && pane !== pipPane && document.pictureInPictureElement) return;
if (pane && pane !== pipPane && App.customPlayer.pipElement()) return;
const landed = (pipPane.dataset && pipPane.dataset.videoId) || null;
pipPane = null;
unbindMediaSession();
@@ -1199,17 +1203,12 @@ App.feed = App.feed || {};
};
App.feed.openPip = async function(pane) {
if (!document.pictureInPictureEnabled) return false;
if (!App.customPlayer.supportsPiP()) return false;
const target = pane || (slidesByIndex.get(state.feedActiveIndex) &&
panesOf(slidesByIndex.get(state.feedActiveIndex))[0]);
const video = target && target.querySelector('.feed-video');
if (!video || video.disablePictureInPicture) return false;
try {
await video.requestPictureInPicture();
return true;
} catch (err) {
return false;
}
return App.customPlayer.enterPiP(video);
};
// ------------------------------------------------------------------
@@ -1312,8 +1311,8 @@ App.feed = App.feed || {};
if (!root || !state.feedOpen) return false;
// Two picture-in-picture windows cannot both hold this feed, and the
// video one holds an element that is about to move.
if (document.pictureInPictureElement) {
await document.exitPictureInPicture().catch(() => {});
if (App.customPlayer.pipElement()) {
await App.customPlayer.exitPiP();
}
let win;
try {
@@ -1382,14 +1381,14 @@ App.feed = App.feed || {};
const onFeedHidden = function() {
if (!state.feedOpen) return;
if (document.visibilityState !== 'hidden') return;
if (!document.pictureInPictureEnabled) return;
if (document.pictureInPictureElement) return;
if (!App.customPlayer.supportsPiP()) return;
if (App.customPlayer.pipElement()) return;
const video = autoPipVideo();
if (!video || video.paused || video.ended || video.disablePictureInPicture) return;
// The browser may already be doing this itself, from the attribute
// updateAutoPiPTarget put on this very element; the request is only for
// where the attribute is ignored but a request would be allowed.
video.requestPictureInPicture().catch(() => {});
App.customPlayer.enterPiP(video);
};
let autoPipBound = false;
@@ -1516,8 +1515,8 @@ App.feed = App.feed || {};
setHudIdle(false);
updateAutoPiPTarget(); // feedOpen is false now, so this clears them
unbindMediaSession();
if (pipPane && document.pictureInPictureElement) {
document.exitPictureInPicture().catch(() => {});
if (pipPane && App.customPlayer.pipElement()) {
App.customPlayer.exitPiP();
}
pipPane = null;
slidesByIndex.forEach((slide) => panesOf(slide).forEach(destroySlidePlayback));