129 lines
9.1 KiB
JavaScript
129 lines
9.1 KiB
JavaScript
(function (root) {
|
|
'use strict';
|
|
const choices = ['auto', 'landscape', 'portrait'];
|
|
const normalize = value => choices.includes(value) ? value : 'auto';
|
|
function rotation(value, width, height) {
|
|
value = normalize(value);
|
|
return value === 'landscape' && width < height ? 90 : value === 'portrait' && width > height ? -90 : 0;
|
|
}
|
|
function coordinates(x, y, rect, angle = 0) {
|
|
if (angle === 90) return { x: y - rect.top, y: rect.right - x, width: rect.height, height: rect.width };
|
|
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 = '<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 = 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);
|
|
hideTimer = setTimeout(() => {
|
|
if (!hud.contains(document.activeElement)) hud.classList.add('hud-hidden');
|
|
}, 3200);
|
|
}
|
|
stage.addEventListener('pointerdown', revealControls, { passive: true });
|
|
stage.addEventListener('pointermove', event => { if (event.pointerType === 'mouse') revealControls(); }, { passive: true });
|
|
hud.addEventListener('focusin', () => { clearTimeout(hideTimer); hud.classList.remove('hud-hidden'); });
|
|
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)}`;
|
|
}
|
|
async function orient() {
|
|
if (locked) { screen.orientation?.unlock?.(); locked = false; }
|
|
const value = normalize(settings().fullscreenOrientation);
|
|
if (!custom && value !== 'auto') {
|
|
try { await screen.orientation.lock(value); locked = true; if (!active) { screen.orientation.unlock(); locked = false; return; } }
|
|
catch { if (!active) return; custom = true; stage.classList.add('orientation-overlay'); }
|
|
}
|
|
layout();
|
|
}
|
|
orientation.onclick = () => { settings().fullscreenOrientation = choices[(choices.indexOf(normalize(settings().fullscreenOrientation)) + 1) % choices.length]; persist(); orient(); };
|
|
range.oninput = () => seek(Number(range.value) / 1000 * (state().duration || 0));
|
|
// Explicit inverse coordinates also work for rotated range controls on WebKit.
|
|
const rangeSeek = event => {
|
|
const point = coordinates(event.clientX, event.clientY, range.getBoundingClientRect(), angle);
|
|
seek(Math.max(0, Math.min(1, point.x / point.width)) * (state().duration || 0));
|
|
};
|
|
range.onpointerdown = event => { event.preventDefault(); range.setPointerCapture(event.pointerId); rangeSeek(event); };
|
|
range.onpointermove = event => { if (range.hasPointerCapture(event.pointerId)) rangeSeek(event); };
|
|
hud.addEventListener('pointerdown', event => event.stopPropagation());
|
|
hud.addEventListener('pointerup', event => event.stopPropagation());
|
|
function cleanup() {
|
|
active = false; custom = false; native = false; angle = 0; clearInterval(timer); clearTimeout(hideTimer);
|
|
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() {
|
|
if (document.fullscreenElement === stage) document.exitFullscreen().catch(() => {});
|
|
cleanup();
|
|
}
|
|
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');
|
|
await stage.requestFullscreen();
|
|
native = true;
|
|
} catch { custom = true; stage.classList.add('orientation-overlay'); }
|
|
if (!active) return;
|
|
await orient();
|
|
if (!active) return;
|
|
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
|
|
? '<svg class="fill" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>'
|
|
: '<svg class="fill" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 5h4v14H6zm8 0h4v14h-4z"/></svg>';
|
|
}, 250);
|
|
}
|
|
document.addEventListener('fullscreenchange', () => { if (active && !document.fullscreenElement && native) cleanup(); });
|
|
document.addEventListener('keydown', event => { if (active && event.key === 'Escape') leave(); });
|
|
window.addEventListener('resize', layout);
|
|
return { enter, leave, point: event => coordinates(event.clientX, event.clientY, stage.getBoundingClientRect(), angle) };
|
|
}
|
|
const api = { normalize, normalizeFit, rotation, coordinates, create };
|
|
if (typeof module !== 'undefined' && module.exports) module.exports = api; else root.FullscreenOrientation = api;
|
|
})(globalThis);
|