';
items.forEach(function(item){
var pct=Math.min(99,Math.round((item.position/item.duration)*100));
var remaining=Math.round((item.duration-item.position)/60);
@@ -906,7 +930,7 @@ function escHtml(s){var d=document.createElement('div');d.appendChild(document.c
+'
'
+'';
});
- html+='
';
+ html+='
';
container.innerHTML=html;
})();
diff --git a/functions.php b/functions.php
index 1a4d7b7..1c9b20f 100644
--- a/functions.php
+++ b/functions.php
@@ -365,12 +365,20 @@ function sharebox_log(string $msg, string $channel = 'stream'): void {
*/
function find_php_cli(): string {
if (defined('PHP_CLI_BINARY') && PHP_CLI_BINARY) return PHP_CLI_BINARY;
- // PHP_BINARY peut être /usr/local/sbin/php-fpm ; on regarde /usr/local/bin/php aussi
+ // PHP_BINARY en contexte FPM pointe vers php-fpm, pas le CLI.
+ // Priorité au binaire versionné (ex: php8.2 sur Debian multi-PHP) pour éviter
+ // de tomber sur /usr/bin/php qui peut être une version différente sans pdo_sqlite.
+ $ver = PHP_MAJOR_VERSION . '.' . PHP_MINOR_VERSION;
$binDir = dirname(PHP_BINARY);
- foreach ([$binDir . '/php', dirname($binDir) . '/bin/php', '/usr/local/bin/php', '/usr/bin/php'] as $candidate) {
+ foreach ([
+ '/usr/local/bin/php', // Alpine/Docker (version unique)
+ '/usr/bin/php' . $ver, // Debian multi-PHP: php8.2, php8.4…
+ $binDir . '/php', // même répertoire que PHP_BINARY
+ '/usr/bin/php', // fallback générique (peut être une version différente)
+ ] as $candidate) {
if (is_executable($candidate)) return $candidate;
}
- return 'php'; // fallback sur PATH
+ return 'php';
}
// Aliases pour compatibilité et lisibilité
diff --git a/player.css b/player.css
index 5856422..6df80ef 100644
--- a/player.css
+++ b/player.css
@@ -61,7 +61,7 @@ body::before {
.player-card:fullscreen video,
.player-card:-webkit-full-screen video { position:absolute; inset:0; width:100%; height:100%; max-height:none; }
.player-card:fullscreen .player-controls,
-.player-card:-webkit-full-screen .player-controls { position:absolute; bottom:0; left:0; right:0; z-index:20; background:linear-gradient(transparent 0%, rgba(0,0,0,.75) 100%) !important; padding-top:3rem; transition:opacity .25s; border-top:none !important; padding-left:max(1.5rem, env(safe-area-inset-left)); padding-right:max(1.5rem, env(safe-area-inset-right)); padding-bottom:max(.5rem, env(safe-area-inset-bottom)); }
+.player-card:-webkit-full-screen .player-controls { position:absolute; bottom:0; left:0; right:0; z-index:20; background:linear-gradient(transparent 0%, rgba(0,0,0,.75) 100%) !important; padding-top:3rem; transition:opacity .3s ease, transform .3s ease; transform:translateY(0); border-top:none !important; padding-left:max(1.5rem, env(safe-area-inset-left)); padding-right:max(1.5rem, env(safe-area-inset-right)); padding-bottom:max(.5rem, env(safe-area-inset-bottom)); }
.player-card:fullscreen .player-controls .ctrl-row button,
.player-card:-webkit-full-screen .player-controls .ctrl-row button,
.player-card:fullscreen .player-controls .ctrl-row svg,
@@ -77,7 +77,7 @@ body::before {
.player-card:fullscreen .player-controls .track-bar,
.player-card:-webkit-full-screen .player-controls .track-bar { border-top:none; }
.player-card:fullscreen .player-controls.fs-hidden,
-.player-card:-webkit-full-screen .player-controls.fs-hidden { opacity:0; pointer-events:none; }
+.player-card:-webkit-full-screen .player-controls.fs-hidden { opacity:0; pointer-events:none; transform:translateY(100%); }
.player-card.hide-cursor,.player-card.hide-cursor * { cursor:none !important; }
video { display:block; width:100%; max-height:78vh; background:#000; object-fit:contain; }
.sub-overlay { position:absolute; left:0; right:0; text-align:center; pointer-events:none; padding:0 6%; z-index:10; font-size:1.5rem; }
@@ -91,6 +91,9 @@ video { display:block; width:100%; max-height:78vh; background:#000; object-fit:
.play-icon-overlay.pop-play { animation:popPlay .4s ease forwards; }
#vol-osd { position:absolute; top:clamp(1rem,3vh,2rem); right:clamp(1rem,3vw,2rem); z-index:20; background:rgba(0,0,0,.72); color:#fff; padding:clamp(.5rem,1.2vh,.9rem) clamp(1rem,2vw,1.6rem); border-radius:clamp(.5rem,1vh,.75rem); font-size:clamp(1.35rem,2.8vh,2.4rem); font-weight:700; letter-spacing:.03em; pointer-events:none; opacity:0; transition:opacity .2s; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.08); text-shadow:0 1px 4px rgba(0,0,0,.5); }
#vol-osd.visible { opacity:1; }
+.dt-flash{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.18);border-radius:8px;padding:.4rem .8rem;font-size:.9rem;color:#fff;font-weight:700;pointer-events:none;opacity:0;transition:opacity .15s;z-index:20}
+.dt-flash.dt-flash-active{opacity:1;animation:dt-pop .6s ease-out forwards}
+@keyframes dt-pop{0%{opacity:1;transform:translateY(-50%) scale(1)}80%{opacity:.8;transform:translateY(-50%) scale(1.05)}100%{opacity:0;transform:translateY(-50%) scale(.95)}}
audio { display:block; width:100%; padding:2rem 1.5rem; background:rgba(26,29,40,.8); }
.player-hint { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:10; }
.player-hint-text { font-family:var(--font-sans); font-size:.78rem; font-weight:600; padding:.4rem 1rem; border-radius:var(--radius-sm); background:rgba(12,14,20,.82); border:1px solid rgba(255,255,255,.08); color:var(--text-muted); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); letter-spacing:.01em; transition:color .2s; white-space:nowrap; }
@@ -138,16 +141,17 @@ audio { display:block; width:100%; padding:2rem 1.5rem; background:rgba(26,29,40
.player-card{border-radius:0;border:none;position:fixed;inset:0;z-index:10}
.player-video-wrap{height:100vh;height:100dvh}
video{max-height:100vh !important;height:100vh !important;max-height:100dvh !important;height:100dvh !important}
-.player-controls{position:fixed;bottom:0;left:0;right:0;z-index:20;background:linear-gradient(transparent 0%,rgba(0,0,0,.75) 100%) !important;padding-top:2rem;border-top:none !important;transition:opacity .25s;padding-left:max(1.5rem,env(safe-area-inset-left));padding-right:max(1.5rem,env(safe-area-inset-right));padding-bottom:max(.5rem,env(safe-area-inset-bottom))}
+.player-controls{position:fixed;bottom:0;left:0;right:0;z-index:20;background:linear-gradient(transparent 0%,rgba(0,0,0,.75) 100%) !important;padding-top:2rem;border-top:none !important;transition:opacity .3s ease, transform .3s ease;padding-left:max(1.5rem,env(safe-area-inset-left));padding-right:max(1.5rem,env(safe-area-inset-right));padding-bottom:max(.5rem,env(safe-area-inset-bottom))}
.fs-title{display:block;position:fixed;top:0;left:0;right:0;z-index:30;padding:.8rem max(1rem,env(safe-area-inset-left)) .8rem max(1rem,env(safe-area-inset-right));background:linear-gradient(rgba(8,10,18,.8) 0%,transparent 100%);transition:opacity .25s}
-.player-controls.fs-hidden{opacity:0;pointer-events:none}
+.player-controls.fs-hidden{opacity:0;pointer-events:none;transform:translateY(100%)}
.player-card.hide-cursor .player-toolbar{opacity:0;pointer-events:none}
.track-bar{gap:.25rem !important;padding:.3rem 0 .15rem !important;margin-top:.2rem !important;border-top:none !important;flex-wrap:nowrap !important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.track-bar::-webkit-scrollbar{display:none}
.track-bar label{display:none !important}
.player-name{display:none}
}
-.seek-tooltip { position:absolute; bottom:calc(100% + 6px); background:rgba(12,14,20,.9); border:1px solid rgba(255,255,255,.1); color:var(--text-primary); font-family:var(--font-mono); font-size:.68rem; padding:.18rem .45rem; border-radius:4px; pointer-events:none; white-space:nowrap; transform:translateX(-50%); display:none; z-index:5; }
+.seek-tooltip { position:absolute; bottom:calc(100% + 8px); background:rgba(12,14,20,.9); border:1px solid rgba(255,255,255,.1); color:var(--text-primary); font-family:var(--font-mono); font-size:.68rem; padding:.25rem .55rem; border-radius:4px; pointer-events:none; white-space:nowrap; transform:translateX(-50%); display:none; z-index:5; text-align:center; }
+.seek-tooltip img { display:block; width:160px; height:90px; object-fit:contain; border-radius:2px; margin-bottom:.2rem; }
.vol-wrap { display:flex; align-items:center; gap:.3rem; }
.vol-slider { -webkit-appearance:none; appearance:none; width:60px; height:28px; background:transparent; outline:none; cursor:pointer; vertical-align:middle; }
.vol-slider::-webkit-slider-runnable-track { height:3px; border-radius:2px; background:linear-gradient(to right,#f0a030 0%,#f0a030 var(--vol-pct,100%),rgba(255,255,255,.15) var(--vol-pct,100%),rgba(255,255,255,.15) 100%); }
@@ -184,3 +188,4 @@ video{max-height:100vh !important;height:100vh !important;max-height:100dvh !imp
outline: 2px solid var(--accent, #f0a030) !important;
outline-offset: 2px !important;
}
+.seek-marker { position:absolute; top:0; bottom:0; width:2px; background:rgba(255,255,255,.6); pointer-events:none; border-radius:1px; z-index:1; }
diff --git a/player.js b/player.js
index e74bed2..eff734f 100644
--- a/player.js
+++ b/player.js
@@ -197,15 +197,16 @@ function plog(tag, msg, data) {
else (document.exitFullscreen || document.webkitExitFullscreen || function(){}).call(document);
}
var fsTitle = document.getElementById('fs-title');
+ var autoHideDelay = ('ontouchstart' in window) ? 3000 : 2000; // snapshot at load — hybrid touch/mouse inherit touch delay
function showFsControls() {
playerCtrl.classList.remove('fs-hidden');
if (fsTitle) fsTitle.classList.remove('fs-hidden');
playerCard.classList.remove('hide-cursor');
clearTimeout(S.fsHideTimer);
- if (isImmersive() && !player.paused) S.fsHideTimer = setTimeout(function() { playerCtrl.classList.add('fs-hidden'); if (fsTitle) fsTitle.classList.add('fs-hidden'); playerCard.classList.add('hide-cursor'); }, 3000);
+ if (isImmersive() && !player.paused) S.fsHideTimer = setTimeout(function() { playerCtrl.classList.add('fs-hidden'); if (fsTitle) fsTitle.classList.add('fs-hidden'); playerCard.classList.add('hide-cursor'); }, autoHideDelay);
}
function onFsChange() {
- if (fsBtn) fsBtn.innerHTML = isFs() ? svgFsExit : svgFs; // safe: static SVG constants
+ if (fsBtn) { fsBtn.innerHTML = isFs() ? svgFsExit : svgFs; fsBtn.setAttribute('aria-pressed', isFs() ? 'true' : 'false'); } // safe: static SVG constants
if (isFs()) {
player.style.height = ''; showFsControls();
try { if (screen.orientation && screen.orientation.lock) screen.orientation.lock('landscape').catch(function(){}); } catch(e){}
@@ -453,13 +454,30 @@ function plog(tag, msg, data) {
}
// Reset stallCount après 30s de lecture stable (évite les délais de 2min après une reprise réseau)
var stableTimer = null;
- // Fallback durée si probe échoue et stream natif d'un vrai MP4
+ // CHAPTER_MARKERS must be set synchronously before the page script runs; runtime
+ // assignment after loadedmetadata fires won't take effect until next video load.
+ function renderChapterMarkers() {
+ var chapters = window.CHAPTER_MARKERS;
+ seekBar.querySelectorAll('.seek-marker').forEach(function(m) { m.remove(); });
+ var dur = S.duration > 0 ? S.duration : (player.duration && isFinite(player.duration) ? player.duration : 0);
+ if (!chapters || !chapters.length || !dur) return;
+ chapters.forEach(function(ch) {
+ if (typeof ch.time !== 'number' || ch.time <= 0 || ch.time >= dur) return;
+ var mark = document.createElement('span');
+ mark.className = 'seek-marker';
+ mark.style.left = (ch.time / dur * 100) + '%';
+ if (ch.title) mark.title = ch.title;
+ seekBar.appendChild(mark);
+ });
+ }
+
player.addEventListener('loadedmetadata', function() {
if (S.duration <= 0 && player.duration && isFinite(player.duration)) {
S.duration = player.duration;
timeTotal.textContent = fmtTime(S.duration);
seekBar.style.display = 'flex';
}
+ renderChapterMarkers();
});
player.addEventListener('waiting', function() { plog('EVENT', 'waiting | stallCount=' + S.stallCount + ' ct=' + (player.currentTime||0).toFixed(1)); clearTimeout(stableTimer); stableTimer = null; startStallWatchdog(); });
@@ -718,6 +736,7 @@ function plog(tag, msg, data) {
seekFill.style.width = pct + '%'; seekThumb.style.left = pct + '%'; timeCurrent.textContent = fmtTime(t);
clearTimeout(S.seekDebounce);
if (S.confirmed === 'native') {
+ S.offset = 0; // safety: ensure no stale offset from an earlier unconfirmed seek
S.seekPending = false; player.currentTime = t; hint.textContent = '';
Subs.resetIdx(); Subs._syncTrack();
} else {
@@ -737,7 +756,10 @@ function plog(tag, msg, data) {
.then(function(r) { return r.json(); })
.then(function(d) {
if (seekGen === S.seekGen && typeof d.pts === 'number' && d.pts >= 0) {
- S.offset = d.pts; Subs.resetIdx();
+ // Native mode uses player.currentTime for absolute position — S.offset must stay 0.
+ // Updating it here would cause realTime() = offset + currentTime = 2× the seek target.
+ if (S.confirmed !== 'native' && S.step !== 'native') S.offset = d.pts;
+ Subs.resetIdx();
Subs._syncTrack();
}
})
@@ -772,19 +794,59 @@ function plog(tag, msg, data) {
seekBar.addEventListener('touchmove', function(e) { if (S.dragging) { e.preventDefault(); seekToFraction(getFraction(e)); if (seekTooltip) { var f = getFraction(e); seekTooltip.textContent = fmtTime(f * S.duration); seekTooltip.style.left = (f * 100) + '%'; seekTooltip.style.display = 'block'; } } }, {passive:false});
document.addEventListener('mouseup', function() { if (S.dragging) { S.dragging = false; seekBar.classList.remove('dragging'); } }, _sig);
document.addEventListener('touchend', function() { if (S.dragging) { S.dragging = false; seekBar.classList.remove('dragging'); if (seekTooltip) seekTooltip.style.display = 'none'; } }, _sig);
+ var _thumbCache = {};
+ var _thumbAbort = null;
+ var _thumbDebounce = null;
seekBar.addEventListener('mousemove', function(e) {
if (!S.duration || !seekTooltip) return;
var rect = seekBar.getBoundingClientRect(), frac = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
- seekTooltip.textContent = fmtTime(frac * S.duration);
+ var t = frac * S.duration;
+ var span = seekTooltip.querySelector('span');
+ if (span) { span.textContent = fmtTime(t); } else { seekTooltip.textContent = fmtTime(t); }
seekTooltip.style.left = (frac * 100) + '%'; seekTooltip.style.display = 'block';
+ clearTimeout(_thumbDebounce);
+ _thumbDebounce = setTimeout(function() {
+ var ts5 = Math.round(t / 5) * 5;
+ if (_thumbCache[ts5]) { _setThumb(seekTooltip, _thumbCache[ts5], fmtTime(t)); return; }
+ if (_thumbAbort) { try { _thumbAbort.abort(); } catch(x) {} }
+ var ctrl = typeof AbortController !== 'undefined' ? new AbortController() : null;
+ _thumbAbort = ctrl;
+ fetch(base + '?' + pp + 'keyframe_thumb=' + ts5.toFixed(0), ctrl ? {signal: ctrl.signal, credentials: 'same-origin'} : {credentials: 'same-origin'})
+ .then(function(r) { if (!r.ok || r.status === 204) throw new Error('no-thumb'); return r.blob(); })
+ .then(function(blob) {
+ var url = URL.createObjectURL(blob);
+ _thumbCache[ts5] = url;
+ _setThumb(seekTooltip, url, fmtTime(t));
+ })
+ .catch(function() {});
+ }, 100);
+ });
+ seekBar.addEventListener('mouseleave', function() {
+ if (seekTooltip) seekTooltip.style.display = 'none';
+ clearTimeout(_thumbDebounce);
});
- seekBar.addEventListener('mouseleave', function() { if (seekTooltip) seekTooltip.style.display = 'none'; });
+ function _setThumb(tooltip, url, label) {
+ var img = tooltip.querySelector('img');
+ var span = tooltip.querySelector('span');
+ if (!img) {
+ tooltip.innerHTML = '';
+ img = tooltip.querySelector('img');
+ span = tooltip.querySelector('span');
+ }
+ img.src = url;
+ span.textContent = label;
+ }
// ── Volume ────────────────────────────────────────────────────────────────
function updateVolUI() {
var pct = (player.muted ? 0 : player.volume) * 100;
if (volSlider) { volSlider.value = player.muted ? 0 : player.volume; volSlider.style.setProperty('--vol-pct', pct + '%'); }
- muteBtn.innerHTML = (player.muted || player.volume === 0) ? svgMute : svgVol;
+ var isMuted = player.muted || player.volume === 0;
+ muteBtn.innerHTML = isMuted ? svgMute : svgVol;
+ muteBtn.setAttribute('aria-pressed', isMuted ? 'true' : 'false');
+ // Icône orange si amplification active
+ if (!isMuted && _gainValue > 1) muteBtn.style.color = 'var(--accent, #f0a030)';
+ else muteBtn.style.color = '';
}
function updateModeUI() {
if (!modeBtn) return;
@@ -946,8 +1008,8 @@ function plog(tag, msg, data) {
var osd = document.getElementById('vol-osd');
var osdTimer = null;
function showVolOsd() {
- var pct = player.muted ? 0 : Math.round(player.volume * 100);
- var icon = player.muted || pct === 0 ? '\uD83D\uDD07' : pct < 50 ? '\uD83D\uDD09' : '\uD83D\uDD0A';
+ var pct = getEffectivePct();
+ var icon = player.muted || pct === 0 ? '\uD83D\uDD07' : pct < 50 ? '\uD83D\uDD09' : pct > 100 ? '\uD83D\uDD0A\uD83D\uDD0A' : '\uD83D\uDD0A';
osd.textContent = icon + ' ' + pct + '%';
osd.classList.add('visible');
clearTimeout(osdTimer);
@@ -1029,15 +1091,53 @@ function plog(tag, msg, data) {
seekToFraction(t / S.duration);
});
})();
+
+ // Double-tap mobile : zones gauche/droite pour −10s/+10s
+ (function() {
+ if (!('ontouchstart' in window)) return; // desktop : skip
+ var lastTouchTime = 0, lastTouchX = 0;
+ var dtFlash = document.createElement('div');
+ dtFlash.className = 'dt-flash';
+ clickArea.appendChild(dtFlash);
+
+ clickArea.addEventListener('touchstart', function(e) {
+ if (e.touches.length !== 1) return;
+ var now = Date.now();
+ var tx = e.touches[0].clientX;
+ if (now - lastTouchTime < 250 && Math.abs(tx - lastTouchX) < 60) {
+ // Double-tap détecté
+ e.preventDefault(); // annule le click qui suivrait
+ lastTouchTime = 0; // reset pour éviter triple-tap
+ var rect = clickArea.getBoundingClientRect();
+ var isRight = (tx - rect.left) > rect.width / 2;
+ var skip = isRight ? 10 : -10;
+ if (!S.duration) return;
+ var t = Math.max(0, Math.min(S.duration, realTime() + skip));
+ seekToFraction(t / S.duration);
+ osd.textContent = (skip > 0 ? '+' : '') + skip + 's';
+ osd.classList.add('visible');
+ clearTimeout(osdTimer);
+ osdTimer = setTimeout(function() { osd.classList.remove('visible'); }, 800);
+ // Flash animation
+ dtFlash.textContent = (skip > 0 ? '+10s ▶▶' : '◄◄ −10s');
+ dtFlash.style.left = isRight ? '60%' : '10%';
+ dtFlash.classList.add('dt-flash-active');
+ setTimeout(function() { dtFlash.classList.remove('dt-flash-active'); }, 600);
+ } else {
+ lastTouchTime = now;
+ lastTouchX = tx;
+ }
+ }, {passive: false});
+ })();
playBtn.addEventListener('click', function() {
if (player.paused) { playIconEl.classList.remove('visible','pop-pause','pop-play'); player.play().catch(function(){}); }
else player.pause();
});
- player.addEventListener('play', function() { playBtn.innerHTML = svgPause; updateTitle(); });
- player.addEventListener('playing', function() { playBtn.innerHTML = svgPause; playIconEl.classList.remove('visible', 'pop-pause'); if (isFs()) showFsControls(); });
- player.addEventListener('pause', function() { playBtn.innerHTML = svgPlay; playIconEl.innerHTML = svgPauseIcon; playIconEl.classList.remove('pop-pause','pop-play'); playIconEl.classList.add('visible'); updateTitle(); });
- player.addEventListener('waiting', function() { playBtn.innerHTML = svgPause; });
- player.addEventListener('ended', function() { playBtn.innerHTML = svgPlay; document.title = originalTitle; });
+ player.addEventListener('play', function() { playBtn.innerHTML = svgPause; playBtn.setAttribute('aria-pressed', 'true'); updateTitle(); });
+ player.addEventListener('playing', function() { playBtn.innerHTML = svgPause; playBtn.setAttribute('aria-pressed', 'true'); playIconEl.classList.remove('visible', 'pop-pause'); if (isFs()) showFsControls(); });
+ player.addEventListener('pause', function() { playBtn.innerHTML = svgPlay; playBtn.setAttribute('aria-pressed', 'false'); playIconEl.innerHTML = svgPauseIcon; playIconEl.classList.remove('pop-pause','pop-play'); playIconEl.classList.add('visible'); updateTitle(); });
+ player.addEventListener('waiting', function() { playBtn.innerHTML = svgPause; playBtn.setAttribute('aria-pressed', 'true'); });
+ player.addEventListener('ended', function() { playBtn.innerHTML = svgPlay; playBtn.setAttribute('aria-pressed', 'false'); document.title = originalTitle; });
// Fullscreen
if (fsBtn) fsBtn.addEventListener('click', toggleFs);
// Zoom
@@ -1057,17 +1157,51 @@ function plog(tag, msg, data) {
});
}
// Volume
+ // WebAudio GainNode — lazy init au premier geste volume utilisateur
+ var _audioCtx = null, _gainNode = null, _gainValue = 1;
+
+ function _initGain() {
+ if (_audioCtx) return;
+ try {
+ _audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+ var src = _audioCtx.createMediaElementSource(player);
+ _gainNode = _audioCtx.createGain();
+ _gainNode.gain.value = _gainValue;
+ src.connect(_gainNode);
+ _gainNode.connect(_audioCtx.destination);
+ } catch(e) { _audioCtx = null; _gainNode = null; }
+ }
+
+ function setGain(v) {
+ _gainValue = Math.max(1, Math.min(2, v));
+ if (_gainNode) _gainNode.gain.value = _gainValue;
+ lsSet('sb_volume_gain', _gainValue);
+ }
+
+ function getEffectivePct() {
+ return player.muted ? 0 : Math.round(player.volume * _gainValue * 100);
+ }
+
var savedVol = parseFloat(lsGet('player_volume', '1'));
player.volume = isNaN(savedVol) ? 1 : Math.max(0, Math.min(1, savedVol));
player.muted = lsGet('player_muted', 'false') === 'true';
- updateVolUI();
+ var savedGain = parseFloat(lsGet('sb_volume_gain', '1'));
+ if (!isNaN(savedGain) && savedGain > 1) {
+ _gainValue = Math.min(2, savedGain);
+ // Le GainNode sera initialisé au premier geste (lazy), mais on préserve la valeur
+ }
+ updateVolUI(); // also sets muteBtn aria-pressed via isMuted
+ playBtn.setAttribute('aria-pressed', player.paused ? 'false' : 'true');
+ if (fsBtn) fsBtn.setAttribute('aria-pressed', 'false');
// iOS Safari ignore player.volume/muted via JS — cacher les contrôles volume
if (isIOS) {
muteBtn.style.display = 'none';
var volWrap = muteBtn.closest('.vol-wrap') || (volSlider ? volSlider.parentNode : null);
if (volWrap) volWrap.style.display = 'none';
}
+ player.addEventListener('volumechange', updateVolUI);
muteBtn.addEventListener('click', function() {
+ _initGain(); // lazy init au premier geste volume
player.muted = !player.muted;
lsSet('player_muted', player.muted);
updateVolUI();
@@ -1075,6 +1209,7 @@ function plog(tag, msg, data) {
});
var volSaveTimer = null;
if (volSlider) volSlider.addEventListener('input', function() {
+ _initGain(); // lazy init au premier geste volume
player.volume = parseFloat(volSlider.value);
player.muted = player.volume === 0;
updateVolUI();
@@ -1086,11 +1221,35 @@ function plog(tag, msg, data) {
}, 500);
});
// Molette : volume (pas sur iOS — volume contrôlé par boutons physiques uniquement)
- if (!isIOS) playerCard.addEventListener('wheel', function(e) {
- e.preventDefault();
- var delta = e.deltaY < 0 ? 0.05 : -0.05;
- player.volume = Math.min(1, Math.max(0, player.volume + delta));
- player.muted = player.volume === 0;
+ function handleWheelVolume(e) {
+ var inverted = !!e.webkitDirectionInvertedFromDevice; // Safari trackpad: natural scroll inversion
+ var dx = e.deltaX, dy = -e.deltaY;
+ if (inverted) { dx = -dx; dy = -dy; }
+ var direction = Math.sign(Math.abs(dx) > Math.abs(dy) ? dx : dy);
+ if (!direction) return;
+
+ // Si on est à 100% et direction monte → amplification GainNode
+ if (direction === 1 && player.volume >= 1 && !player.muted) {
+ _initGain();
+ setGain(_gainValue + 0.1);
+ updateVolUI(); showVolOsd();
+ e.preventDefault();
+ return;
+ }
+ // Si on descend et gain > 1 → réduire le gain d'abord
+ if (direction === -1 && _gainValue > 1) {
+ setGain(_gainValue - 0.1);
+ if (_gainValue <= 1) { _gainValue = 1; if (_gainNode) _gainNode.gain.value = 1; }
+ updateVolUI(); showVolOsd();
+ clearTimeout(volSaveTimer);
+ volSaveTimer = setTimeout(function() { lsSet('sb_volume_gain', _gainValue); }, 500);
+ e.preventDefault();
+ return;
+ }
+
+ var next = Math.min(1, Math.max(0, player.volume + direction * 0.02));
+ player.volume = next;
+ player.muted = next === 0;
updateVolUI();
showVolOsd();
clearTimeout(volSaveTimer);
@@ -1098,7 +1257,10 @@ function plog(tag, msg, data) {
lsSet('player_volume', player.volume);
lsSet('player_muted', player.muted);
}, 500);
- }, { passive: false });
+ if ((direction === 1 && next < 1) || (direction === -1 && next > 0))
+ e.preventDefault();
+ }
+ if (!isIOS) playerCard.addEventListener('wheel', handleWheelVolume, { passive: false });
// Vitesse
var speeds = [0.5, 0.75, 1, 1.5, 2];
var savedSpd = parseFloat(lsGet('player_speed', '1'));
@@ -1279,7 +1441,7 @@ function plog(tag, msg, data) {
kbCard.appendChild(kbTitle);
var kbShortcuts = [['Espace / K','Lecture / Pause'],['← →','\u221210s / +10s'],['J / L','\u221230s / +30s'],
['\u2191 \u2193','Volume \u00B15\u00A0%'],['0\u20139','Aller \u00e0 N\u00d710\u00a0%'],
- ['F','Plein \u00e9cran'],['Z','Zoom (Fit/Fill/Stretch)'],['P','Picture-in-Picture'],['M','Muet'],['R','Resync son/image'],['?','Cette aide']];
+ ['F','Plein \u00e9cran'],['Z','Zoom (Fit/Fill/Stretch)'],['P','Picture-in-Picture'],['M','Muet'],['R','Resync son/image'],[', / .','Vitesse \u22120.25\u00d7 / +0.25\u00d7'],['?','Cette aide']];
if (episodeNav.prev || episodeNav.next) kbShortcuts.push(['N / B','\u00c9pisode suivant / pr\u00e9c\u00e9dent']);
kbShortcuts.forEach(function(r) {
var row = document.createElement('div'); row.className = 'kb-row';
@@ -1360,6 +1522,24 @@ function plog(tag, msg, data) {
e.preventDefault();
toggleZoom();
}
+ else if (e.key === '>' || e.key === '.') {
+ e.preventDefault();
+ S.speed = parseFloat(Math.min(2, S.speed + 0.25).toFixed(2));
+ player.playbackRate = S.speed;
+ if (speedBtn) speedBtn.textContent = S.speed + '×';
+ lsSet('player_speed', S.speed);
+ osd.textContent = S.speed + '×'; osd.classList.add('visible');
+ clearTimeout(osdTimer); osdTimer = setTimeout(function() { osd.classList.remove('visible'); }, 1000);
+ }
+ else if (e.key === '<' || e.key === ',') {
+ e.preventDefault();
+ S.speed = parseFloat(Math.max(0.5, S.speed - 0.25).toFixed(2));
+ player.playbackRate = S.speed;
+ if (speedBtn) speedBtn.textContent = S.speed + '×';
+ lsSet('player_speed', S.speed);
+ osd.textContent = S.speed + '×'; osd.classList.add('visible');
+ clearTimeout(osdTimer); osdTimer = setTimeout(function() { osd.classList.remove('visible'); }, 1000);
+ }
else if ((e.key === 'n' || e.key === 'N') && episodeNav.next) {
e.preventDefault(); navigateEpisode('next');
}
diff --git a/tests/e2e/player-ux.spec.ts b/tests/e2e/player-ux.spec.ts
new file mode 100644
index 0000000..c999983
--- /dev/null
+++ b/tests/e2e/player-ux.spec.ts
@@ -0,0 +1,357 @@
+/**
+ * Playwright E2E tests — Player UX observable contracts
+ *
+ * Tests the OBSERVABLE behaviour of 5 UX improvements to the video player.
+ * Does NOT access implementation — only what a browser user/assistive tech sees.
+ *
+ * CSS-only tests (1, 3) run without a live server.
+ * Live-player tests (2, 4, 5) target the demo URL and skip gracefully when unavailable.
+ *
+ * Usage:
+ * npx playwright test tests/e2e/player-ux.spec.ts
+ * SHAREBOX_TEST_URL=http://localhost:8088 npx playwright test tests/e2e/player-ux.spec.ts
+ */
+
+import { test, expect, Page } from '@playwright/test';
+
+// ---------------------------------------------------------------------------
+// Constants & helpers
+// ---------------------------------------------------------------------------
+
+const DEMO_BASE = process.env.SHAREBOX_TEST_URL ?? 'http://199.231.187.166:8282';
+
+// Public browse root — auto-share token seeded by entrypoint.sh
+const BROWSE_ROOT = '/dl/browse';
+
+// Demo video path (seeded by demo-data.sh)
+const DEMO_VIDEO_PATH = 'Anime/Attack on Titan/Season 1/Attack.on.Titan.S01E01.mkv';
+
+/** Navigate to the demo player page for the seeded video. */
+async function gotoPlayerPage(page: Page): Promise {
+ const url = `${DEMO_BASE}${BROWSE_ROOT}?p=${encodeURIComponent(DEMO_VIDEO_PATH)}&play=1`;
+ const resp = await page.goto(url, { timeout: 20000 });
+ if (!resp || resp.status() === 404) return false;
+ // Wait for the video element or the player controls to mount
+ const video = page.locator('video#player, video');
+ try {
+ await expect(video.first()).toBeAttached({ timeout: 10000 });
+ } catch {
+ return false;
+ }
+ return true;
+}
+
+// ---------------------------------------------------------------------------
+// 1 — fs-hidden slide transition (CSS-only, no server needed)
+// ---------------------------------------------------------------------------
+
+test.describe('Feature 1 — .fs-hidden slide transition', () => {
+ // critical: OUI
+ // target: Les contrôles player se déplacent hors cadre (translateY(100%)) quand cachés,
+ // évitant les faux clics sous les contrôles invisibles.
+ test('player-controls.fs-hidden has transform translateY(100%) via CSS rule', async ({ page }) => {
+ // Navigate to the player page so that player.css is loaded
+ const available = await gotoPlayerPage(page);
+ if (!available) {
+ test.skip(true, 'Demo player page not available');
+ return;
+ }
+
+ const hasRule = await page.evaluate((): boolean => {
+ function scanRules(rules: CSSRuleList): boolean {
+ for (const rule of Array.from(rules)) {
+ if (rule instanceof CSSStyleRule) {
+ const sel = rule.selectorText ?? '';
+ if (sel.includes('player-controls') && sel.includes('fs-hidden')) {
+ const transform = rule.style.transform;
+ if (transform && transform.includes('translateY(100%)')) return true;
+ }
+ } else if (rule instanceof CSSMediaRule || rule instanceof CSSSupportsRule) {
+ if (scanRules(rule.cssRules)) return true;
+ }
+ }
+ return false;
+ }
+ for (const sheet of Array.from(document.styleSheets)) {
+ let rules: CSSRuleList;
+ try { rules = sheet.cssRules; } catch { continue; }
+ if (scanRules(rules)) return true;
+ }
+ return false;
+ });
+
+ expect(hasRule, '.player-controls.fs-hidden must have transform: translateY(100%) in CSS').toBe(true);
+ });
+});
+
+// ---------------------------------------------------------------------------
+// 2 — aria-pressed on #play-btn
+// ---------------------------------------------------------------------------
+
+test.describe('Feature 2 — aria-pressed on play / mute / fullscreen buttons', () => {
+ // critical: OUI
+ // target: Les boutons de contrôle exposent leur état aux technologies d'assistance
+ // via aria-pressed, garantissant l'accessibilité du player.
+ test('#play-btn has aria-pressed="false" initially and "true" after play', async ({ page }) => {
+ const available = await gotoPlayerPage(page);
+ if (!available) {
+ test.skip(true, 'Demo player not available');
+ return;
+ }
+
+ const playBtn = page.locator('#play-btn');
+ await expect(playBtn).toBeAttached({ timeout: 8000 });
+
+ // Initially the video is paused / loading — aria-pressed must be "false"
+ const initialPressed = await playBtn.getAttribute('aria-pressed');
+ // Accept null (attribute not yet set at load time) as a known-failing state —
+ // but if set it must be "false".
+ if (initialPressed !== null) {
+ expect(initialPressed, '#play-btn aria-pressed should be "false" when paused').toBe('false');
+ } else {
+ // Attribute not present yet — player not fully initialised. Skip assertion.
+ test.skip(true, 'Player did not initialise aria-pressed (media may not be playable in CI)');
+ return;
+ }
+
+ // Click play and wait for aria-pressed to flip to "true"
+ await playBtn.click({ timeout: 5000 });
+ await expect(playBtn).toHaveAttribute('aria-pressed', 'true', { timeout: 5000 });
+ });
+
+ // critical: OUI
+ // target: Le bouton mute reflète l'état muted pour les utilisateurs assistive.
+ test('#mute-btn has aria-pressed reflecting muted state', async ({ page }) => {
+ const available = await gotoPlayerPage(page);
+ if (!available) {
+ test.skip(true, 'Demo player not available');
+ return;
+ }
+
+ const muteBtn = page.locator('#mute-btn');
+ await expect(muteBtn).toBeAttached({ timeout: 8000 });
+
+ const initialPressed = await muteBtn.getAttribute('aria-pressed');
+ if (initialPressed === null) {
+ test.skip(true, 'aria-pressed not set on mute-btn (player not initialised)');
+ return;
+ }
+
+ // Mute the player via JS, then check that aria-pressed flips to "true"
+ await page.evaluate(() => {
+ const v = document.getElementById('player') as HTMLVideoElement | null;
+ if (v) { v.muted = true; v.dispatchEvent(new Event('volumechange')); }
+ });
+ await expect(muteBtn).toHaveAttribute('aria-pressed', 'true', { timeout: 3000 });
+
+ // Unmute — aria-pressed must go back to "false"
+ await page.evaluate(() => {
+ const v = document.getElementById('player') as HTMLVideoElement | null;
+ if (v) { v.muted = false; v.dispatchEvent(new Event('volumechange')); }
+ });
+ await expect(muteBtn).toHaveAttribute('aria-pressed', 'false', { timeout: 3000 });
+ });
+});
+
+// ---------------------------------------------------------------------------
+// 3 — pointer-events: none on .fs-hidden (CSS-only, no server needed)
+// ---------------------------------------------------------------------------
+
+test.describe('Feature 3 — pointer-events: none on .fs-hidden', () => {
+ // critical: OUI
+ // target: Les contrôles cachés (.fs-hidden) ne capturent pas les clics/taps,
+ // permettant l'interaction avec la vidéo en dessous.
+ test('.player-controls.fs-hidden has pointer-events: none via CSS rule', async ({ page }) => {
+ const available = await gotoPlayerPage(page);
+ if (!available) {
+ test.skip(true, 'Demo player page not available');
+ return;
+ }
+
+ const hasRule = await page.evaluate((): boolean => {
+ function scanRules(rules: CSSRuleList): boolean {
+ for (const rule of Array.from(rules)) {
+ if (rule instanceof CSSStyleRule) {
+ const sel = rule.selectorText ?? '';
+ if (sel.includes('player-controls') && sel.includes('fs-hidden')) {
+ if (rule.style.pointerEvents === 'none') return true;
+ }
+ } else if (rule instanceof CSSMediaRule || rule instanceof CSSSupportsRule) {
+ if (scanRules(rule.cssRules)) return true;
+ }
+ }
+ return false;
+ }
+ for (const sheet of Array.from(document.styleSheets)) {
+ let rules: CSSRuleList;
+ try { rules = sheet.cssRules; } catch { continue; }
+ if (scanRules(rules)) return true;
+ }
+ return false;
+ });
+
+ expect(hasRule, '.player-controls.fs-hidden must have pointer-events: none in CSS').toBe(true);
+ });
+
+ // critical: NON (behaviour test complémentaire)
+ // target: Un élément DOM portant .player-controls.fs-hidden ne reçoit pas
+ // les événements souris une fois la règle CSS appliquée.
+ test('DOM element with .player-controls.fs-hidden gets pointer-events: none from computed style', async ({ page, browser }) => {
+ // The fs-hidden rule applies in landscape + max-height:500px — emulate that viewport
+ const ctx = await browser.newContext({ viewport: { width: 800, height: 400 } });
+ const p = await ctx.newPage();
+
+ const available = await gotoPlayerPage(p);
+ if (!available) {
+ await ctx.close();
+ test.skip(true, 'Demo player page not available');
+ return;
+ }
+
+ const pointerEvents = await p.evaluate((): string => {
+ const el = document.createElement('div');
+ el.className = 'player-controls fs-hidden';
+ el.style.position = 'fixed';
+ el.style.top = '-9999px';
+ document.body.appendChild(el);
+ const pe = getComputedStyle(el).pointerEvents;
+ document.body.removeChild(el);
+ return pe;
+ });
+
+ await ctx.close();
+ expect(pointerEvents, 'Computed pointer-events should be "none" for .player-controls.fs-hidden in landscape mode').toBe('none');
+ });
+});
+
+// ---------------------------------------------------------------------------
+// 4 — Chapter markers render on seekbar
+// ---------------------------------------------------------------------------
+
+test.describe('Feature 4 — Chapter markers on seekbar', () => {
+ // critical: NON
+ // target: Les marqueurs de chapitres (window.CHAPTER_MARKERS) sont rendus
+ // comme éléments .seek-marker positionnés sur la seekbar.
+ test('.seek-marker elements appear on seekbar when CHAPTER_MARKERS injected', async ({ page }) => {
+ // Inject CHAPTER_MARKERS before the page script runs
+ // Use short time values compatible with demo clips (some are only ~10s)
+ await page.addInitScript(() => {
+ (window as unknown as Record).CHAPTER_MARKERS = [
+ { time: 2, title: 'Intro' },
+ { time: 6, title: 'Acte 1' },
+ ];
+ });
+
+ const available = await gotoPlayerPage(page);
+ if (!available) {
+ test.skip(true, 'Demo player not available');
+ return;
+ }
+
+ // The seekbar only appears after probe/loadedmetadata — wait for it
+ const seekBar = page.locator('#seek-bar');
+ try {
+ await expect(seekBar).toBeVisible({ timeout: 15000 });
+ } catch {
+ test.skip(true, 'Seekbar not visible — video did not load metadata (CI/network)');
+ return;
+ }
+
+ // renderChapterMarkers() is called on loadedmetadata and uses S.duration or player.duration.
+ // In headless without real HLS, both may be 0. Force-set player.duration and dispatch
+ // loadedmetadata so the function runs with a valid duration.
+ await page.evaluate(() => {
+ const vid = document.getElementById('player') as HTMLVideoElement | null;
+ if (!vid) return;
+ // duration is non-configurable on the instance in headless Chromium.
+ // Patch the prototype getter instead — dispatchEvent is synchronous so the
+ // handler sees duration=1200, then we restore the original descriptor.
+ const proto = HTMLVideoElement.prototype;
+ const orig = Object.getOwnPropertyDescriptor(proto, 'duration');
+ Object.defineProperty(proto, 'duration', { get: () => 1200, configurable: true });
+ vid.dispatchEvent(new Event('loadedmetadata'));
+ if (orig) Object.defineProperty(proto, 'duration', orig);
+ });
+
+ // Markers should be appended to #seek-bar as .seek-marker spans
+ const markers = seekBar.locator('.seek-marker');
+ await expect(markers).toHaveCount(2, { timeout: 5000 });
+
+ // Each marker must have a left % style set
+ const leftStyles = await markers.evaluateAll((els) =>
+ els.map((el) => (el as HTMLElement).style.left)
+ );
+ for (const left of leftStyles) {
+ expect(left).toMatch(/^\d+(\.\d+)?%$/);
+ }
+ });
+});
+
+// ---------------------------------------------------------------------------
+// 5 — Wheel volume increment 2%
+// ---------------------------------------------------------------------------
+
+test.describe('Feature 5 — Wheel volume increment 2%', () => {
+ // critical: OUI
+ // target: La molette change le volume par paliers de 2% (pas 5%), offrant un
+ // contrôle plus précis du volume sans sauts brusques.
+ test('wheel event on .player-card changes volume by ~0.02', async ({ page }) => {
+ const available = await gotoPlayerPage(page);
+ if (!available) {
+ test.skip(true, 'Demo player not available');
+ return;
+ }
+
+ // Wait for the player card to be present
+ const playerCard = page.locator('.player-card');
+ await expect(playerCard).toBeVisible({ timeout: 8000 });
+
+ // Set volume to a known mid-range value via JS
+ await page.evaluate(() => {
+ const v = document.getElementById('player') as HTMLVideoElement | null;
+ if (v) {
+ v.volume = 0.5;
+ v.muted = false;
+ v.dispatchEvent(new Event('volumechange'));
+ }
+ });
+
+ // Give the player time to react
+ await page.waitForTimeout(200);
+
+ const volumeBefore = await page.evaluate((): number => {
+ const v = document.getElementById('player') as HTMLVideoElement | null;
+ return v ? v.volume : -1;
+ });
+
+ if (volumeBefore < 0) {
+ test.skip(true, 'Could not read player volume (player not initialised)');
+ return;
+ }
+
+ // Dispatch a wheel-up event on the player card (scroll up = louder)
+ await page.evaluate(() => {
+ const card = document.querySelector('.player-card') as Element | null;
+ if (!card) return;
+ const evt = new WheelEvent('wheel', {
+ deltaY: -100, // negative = scroll up = volume up
+ bubbles: true,
+ cancelable: true,
+ });
+ card.dispatchEvent(evt);
+ });
+
+ await page.waitForTimeout(150);
+
+ const volumeAfter = await page.evaluate((): number => {
+ const v = document.getElementById('player') as HTMLVideoElement | null;
+ return v ? v.volume : -1;
+ });
+
+ const delta = Math.abs(volumeAfter - volumeBefore);
+
+ // Should be ~0.02 (±0.005 tolerance for floating-point rounding)
+ expect(delta, `Volume delta should be ~0.02 (2%), got ${delta.toFixed(4)}`).toBeGreaterThan(0.01);
+ expect(delta, `Volume delta should be ~0.02 (2%), not 5%, got ${delta.toFixed(4)}`).toBeLessThan(0.04);
+ });
+});
diff --git a/tools/tmdb-worker.php b/tools/tmdb-worker.php
index 921376a..0636837 100755
--- a/tools/tmdb-worker.php
+++ b/tools/tmdb-worker.php
@@ -60,6 +60,8 @@ function (SplFileInfo $current, string $key, RecursiveDirectoryIterator $iterato
$real = $current->getRealPath();
if ($real && isset($seenPaths[$real])) return false;
if ($real) $seenPaths[$real] = true;
+ static $SKIP_DIRS = ['vendor', 'node_modules', 'var', 'cache', '__pycache__'];
+ if (in_array($current->getFilename(), $SKIP_DIRS, true)) return false;
return true;
}
),
@@ -75,6 +77,24 @@ function (SplFileInfo $current, string $key, RecursiveDirectoryIterator $iterato
$depth = substr_count($rel, '/') + 1;
if ($depth < $minDepth) continue;
+ // Skip folders that contain only non-streamable files (CBR, EPUB, PDF, etc.).
+ // Folders with subdirectories are kept — they might be series with season subfolders.
+ $contents = @scandir($path, SCANDIR_SORT_NONE);
+ if ($contents !== false) {
+ $hasVideo = false;
+ $hasSubdir = false;
+ foreach ($contents as $item) {
+ if ($item === '.' || $item === '..') continue;
+ if (is_dir($path . '/' . $item)) { $hasSubdir = true; break; }
+ $ext = strtolower(pathinfo($item, PATHINFO_EXTENSION));
+ if (in_array($ext, ['mp4','mkv','avi','m4v','mov','wmv','flv','webm','ts','m2ts','mpg','mpeg'], true)) {
+ $hasVideo = true;
+ break;
+ }
+ }
+ if (!$hasVideo && !$hasSubdir) continue;
+ }
+
try {
$stmt->execute([':p' => $path]);
if ($stmt->rowCount() > 0) $inserted++;