josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: fullscreen video button not working in pwa mode

Browse Source 
Task #52 completed by ClaudeQueue

ClaudeQueue
This commit is contained in:
Claude Worker
2026-07-01 02:18:50 +00:00
parent ffeef5d520
commit 50cf655b71
2 changed files with 136 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/app.js
View File

@@ -2420,8 +2420,44 @@ document.querySelectorAll('.chip').forEach((c) => {
els.repeatBtn.addEventListener('click', toggleRepeat);
els.fsBtn.addEventListener('click', () => {
const stage = els.video.parentElement;
if (document.fullscreenElement) document.exitFullscreen();
else stage.requestFullscreen?.();
const video = els.video;
// iOS Safari — including an installed PWA running in standalone mode —
// does not implement the standard Fullscreen API for arbitrary elements.
// stage.requestFullscreen is simply undefined there, so the button did
// nothing (this is the iPhone-in-portrait-PWA bug report). WebKit instead
// exposes a video-only, non-standard fullscreen API that *does* work in
// standalone mode: HTMLVideoElement.webkitEnterFullscreen/ExitFullscreen.
// Try the standard API first everywhere else, then fall back to the
// WebKit video API before giving up.
if (document.fullscreenElement || video.webkitDisplayingFullscreen) {
try {
if (document.exitFullscreen) document.exitFullscreen()?.catch(() => {});
else if (video.webkitExitFullscreen) video.webkitExitFullscreen();
} catch { /* e.g. InvalidStateError — nothing more we can do */ }
return;
}
if (stage.requestFullscreen) {
// requestFullscreen() can both throw synchronously (e.g.
// InvalidStateError when preconditions like active user-gesture
// transient activation aren't met) and return a promise that rejects
// asynchronously. Guard against both instead of letting either surface
// as an uncaught error.
try {
stage.requestFullscreen()?.catch(() => {});
} catch { /* no-op — fullscreen simply won't engage this time */ }
} else if (video.webkitEnterFullscreen) {
if (Player.mode === 'audio') {
toast('Fullscreen isn’t available in audio-only mode');
return;
}
try {
// Throws InvalidStateError if the element has no loaded media (e.g.
// no video source yet) — nothing to show fullscreen in that case.
video.webkitEnterFullscreen();
} catch { /* no-op — no media loaded to go fullscreen with */ }
} else {
toast('Fullscreen isn’t supported on this device');
}
});
els.seek.addEventListener('input', () => {