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

Make fullscreen video fill the viewport

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-06 04:12:25 +08:00
parent 034b3df7ae
commit af38affdbe
9 changed files with 35 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/fullscreen-orientation.js
View File

@@ -11,15 +11,23 @@
if (angle === -90) return { x: rect.bottom - y, y: x - rect.left, width: rect.height, height: rect.width };
return { x: x - rect.left, y: y - rect.top, width: rect.width, height: rect.height };
}
function normalizeFit(value) { return value === 'fit' ? 'fit' : 'fill'; }
function create(options) {
const { stage, settings, persist, toggle, seek, state } = options;
let active = false, custom = false, native = false, locked = false, angle = 0, timer, hideTimer;
const ancestors = [];
for (let el = stage.parentElement; el && el !== document.body; el = el.parentElement) ancestors.push(el);
const hud = document.createElement('div'); hud.className = 'fullscreen-hud'; hud.hidden = true;
hud.innerHTML = '<button type="button" aria-label="Play or pause" title="Play or pause"><svg class="fill" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg></button><input type="range" min="0" max="1000" value="0" aria-label="Seek video"><button type="button" class="fullscreen-orientation" aria-label="Change fullscreen orientation" title="Change fullscreen orientation"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 8V4h4M20 16v4h-4M4 4l6 6m4 4 6 6M20 8V4h-4M4 16v4h4M20 4l-6 6m-4 4-6 6"/></svg></button><button type="button" aria-label="Exit fullscreen" title="Exit fullscreen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 4H4v5m0-5 6 6m5 9h5v-5m0 5-6-6"/></svg></button>';
hud.innerHTML = '<div class="fullscreen-top"><div class="fullscreen-title" aria-live="polite"></div><button type="button" aria-label="Exit fullscreen" title="Exit fullscreen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 4H4v5m0-5 6 6m5 9h5v-5m0 5-6-6"/></svg></button></div><div class="fullscreen-controls"><button type="button" aria-label="Play or pause" title="Play or pause"><svg class="fill" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg></button><input type="range" min="0" max="1000" value="0" aria-label="Seek video"><button type="button" class="fullscreen-orientation" aria-label="Change fullscreen orientation" title="Change fullscreen orientation"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 8V4h4M20 16v4h-4M4 4l6 6m4 4 6 6M20 8V4h-4M4 16v4h4M20 4l-6 6m-4 4-6 6"/></svg></button><button type="button" class="fullscreen-fit" aria-label="Change video fit" title="Change video fit"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7V4h3M17 4h3v3M20 17v3h-3M7 20H4v-3M7 9h10v6H7z"/></svg></button></div>';
stage.append(hud);
const [play, orientation, exit] = hud.querySelectorAll('button'), range = hud.querySelector('input');
const play = hud.querySelector('button[aria-label="Play or pause"]'), orientation = hud.querySelector('.fullscreen-orientation'), fitButton = hud.querySelector('.fullscreen-fit'), exit = hud.querySelector('button[aria-label="Exit fullscreen"]'), range = hud.querySelector('input');
const title = hud.querySelector('.fullscreen-title');
function setFit(value) {
const fit = normalizeFit(value); settings().fullscreenFit = fit; persist();
stage.dataset.fullscreenFit = fit;
fitButton.setAttribute('aria-label', `Video fill mode: ${fit === 'fill' ? 'Fill' : 'Fit'}`);
fitButton.title = `${fit === 'fill' ? 'Fill' : 'Fit'} video frame`;
}
function revealControls() {
if (!active) return;
hud.classList.remove('hud-hidden'); clearTimeout(hideTimer);
@@ -33,10 +41,24 @@
hud.addEventListener('focusout', () => setTimeout(revealControls, 0));
hud.addEventListener('click', revealControls);
play.onclick = toggle; exit.onclick = leave;
fitButton.onclick = () => setFit(settings().fullscreenFit === 'fill' ? 'fit' : 'fill');
let lastTap = 0, pointers = new Set();
stage.addEventListener('pointerdown', event => {
if (!active || hud.contains(event.target)) return;
pointers.add(event.pointerId);
if (pointers.size > 1) { setFit(settings().fullscreenFit === 'fill' ? 'fit' : 'fill'); pointers.clear(); return; }
const now = performance.now(), rect = stage.getBoundingClientRect();
const center = Math.abs(event.clientX - rect.left - rect.width / 2) < rect.width * .24 && Math.abs(event.clientY - rect.top - rect.height / 2) < rect.height * .24;
if (center && now - lastTap < 330) { setFit(settings().fullscreenFit === 'fill' ? 'fit' : 'fill'); lastTap = 0; }
else lastTap = center ? now : 0;
}, { passive: true });
stage.addEventListener('pointerup', event => pointers.delete(event.pointerId), { passive: true });
stage.addEventListener('pointercancel', event => pointers.delete(event.pointerId), { passive: true });
function layout() {
if (!active) return;
angle = custom ? rotation(settings().fullscreenOrientation, innerWidth, innerHeight) : 0;
stage.dataset.fullscreenRotation = String(angle);
title.textContent = state().title || '';
orientation.setAttribute('aria-label', `Change fullscreen orientation (currently ${normalize(settings().fullscreenOrientation)})`);
orientation.title = `Orientation: ${normalize(settings().fullscreenOrientation)}`;
}
@@ -65,6 +87,7 @@
ancestors.forEach(el => el.classList.remove('orientation-ancestor'));
hud.hidden = true; hud.classList.remove('hud-hidden'); stage.classList.remove('orientation-overlay', 'orientation-fullscreen');
delete stage.dataset.fullscreenRotation; document.body.classList.remove('landscape-fs');
delete stage.dataset.fullscreenFit;
if (locked) { screen.orientation?.unlock?.(); locked = false; }
}
function leave() {
@@ -74,6 +97,7 @@
async function enter() {
if (active) { leave(); return; }
active = true; ancestors.forEach(el => el.classList.add('orientation-ancestor')); stage.classList.add('orientation-fullscreen'); hud.hidden = false; revealControls();
setFit(normalizeFit(settings().fullscreenFit));
document.body.classList.add('landscape-fs');
try {
if (!stage.requestFullscreen) throw new Error('Custom fullscreen');
@@ -86,6 +110,7 @@
timer = setInterval(() => {
const s = state();
range.value = String(s.duration ? s.time / s.duration * 1000 : 0);
range.style.setProperty('--seek-progress', `${s.duration ? Math.min(100, s.time / s.duration * 100) : 0}%`);
play.setAttribute('aria-label', s.paused ? 'Play video' : 'Pause video');
play.title = s.paused ? 'Play' : 'Pause';
play.innerHTML = s.paused
@@ -98,6 +123,6 @@
window.addEventListener('resize', layout);
return { enter, leave, point: event => coordinates(event.clientX, event.clientY, stage.getBoundingClientRect(), angle) };
}
const api = { normalize, rotation, coordinates, create };
const api = { normalize, normalizeFit, rotation, coordinates, create };
if (typeof module !== 'undefined' && module.exports) module.exports = api; else root.FullscreenOrientation = api;
})(globalThis);