fix stuff + add stuff

This commit is contained in:
ashley 2025-10-05 20:15:02 +02:00
parent 2dd8889c50
commit ee81da93bd

View File

@ -22,7 +22,9 @@ document.addEventListener("DOMContentLoaded", () => {
const audio = document.getElementById('aud'); const audio = document.getElementById('aud');
const audioEl = document.getElementById('aud'); const audioEl = document.getElementById('aud');
let volGuard = false; let volGuard = false;
let syncing = false; // prevents play/pause ping-pong
let syncing = false;
let restarting = false;
// determine if looping is forced // determine if looping is forced
const shouldLoop = const shouldLoop =
@ -116,7 +118,7 @@ document.addEventListener("DOMContentLoaded", () => {
} }
function tryStart() { function tryStart() {
if (audioReady && videoReady) { if (audioReady && videoReady && !restarting) {
const t = Number(video.currentTime()); const t = Number(video.currentTime());
if (isFinite(t) && Math.abs(Number(audio.currentTime) - t) > 0.1) safeSetCT(audio, t); if (isFinite(t) && Math.abs(Number(audio.currentTime) - t) > 0.1) safeSetCT(audio, t);
if (bothPlayableAt(t)) { if (bothPlayableAt(t)) {
@ -155,10 +157,16 @@ document.addEventListener("DOMContentLoaded", () => {
} catch {} } catch {}
navigator.mediaSession.setActionHandler('play', () => { navigator.mediaSession.setActionHandler('play', () => {
if (syncing || restarting) return;
syncing = true;
video.play()?.catch(()=>{}); audio.play()?.catch(()=>{}); video.play()?.catch(()=>{}); audio.play()?.catch(()=>{});
syncing = false;
}); });
navigator.mediaSession.setActionHandler('pause', () => { navigator.mediaSession.setActionHandler('pause', () => {
if (syncing || restarting) return;
syncing = true;
video.pause(); audio.pause(); video.pause(); audio.pause();
syncing = false;
}); });
navigator.mediaSession.setActionHandler('seekbackward', ({ seekOffset }) => { navigator.mediaSession.setActionHandler('seekbackward', ({ seekOffset }) => {
const skip = seekOffset || 10; const skip = seekOffset || 10;
@ -180,23 +188,31 @@ document.addEventListener("DOMContentLoaded", () => {
video.currentTime(seekTime); video.currentTime(seekTime);
}); });
navigator.mediaSession.setActionHandler('stop', () => { navigator.mediaSession.setActionHandler('stop', () => {
if (syncing || restarting) return;
syncing = true;
video.pause(); audio.pause(); video.pause(); audio.pause();
try { video.currentTime(0); } catch {} try { video.currentTime(0); } catch {}
try { audio.currentTime = 0; } catch {} try { audio.currentTime = 0; } catch {}
clearSyncLoop(); clearSyncLoop();
syncing = false;
}); });
} }
} }
document.addEventListener('keydown', e => { document.addEventListener('keydown', e => {
if (syncing || restarting) return;
switch (e.code) { switch (e.code) {
case 'AudioPlay': case 'AudioPlay':
case 'MediaPlayPause': case 'MediaPlayPause':
syncing = true;
if (video.paused()) { video.play()?.catch(()=>{}); audio.play()?.catch(()=>{}); } if (video.paused()) { video.play()?.catch(()=>{}); audio.play()?.catch(()=>{}); }
else { video.pause(); audio.pause(); } else { video.pause(); audio.pause(); }
syncing = false;
break; break;
case 'AudioPause': case 'AudioPause':
syncing = true;
video.pause(); audio.pause(); video.pause(); audio.pause();
syncing = false;
break; break;
case 'AudioNext': case 'AudioNext':
case 'MediaTrackNext': { case 'MediaTrackNext': {
@ -232,36 +248,36 @@ document.addEventListener("DOMContentLoaded", () => {
// sync-safe play/pause handlers // sync-safe play/pause handlers
video.on('pause', () => { video.on('pause', () => {
if (syncing) return; if (syncing || restarting) return;
syncing = true; syncing = true;
try { if (!audio.paused) audio.pause(); } catch {} try { if (!audio.paused) audio.pause(); } catch {}
clearSyncLoop(); clearSyncLoop();
syncing = false; syncing = false;
}); });
audio.addEventListener('pause', () => { audio.addEventListener('pause', () => {
if (syncing) return; if (syncing || restarting) return;
syncing = true; syncing = true;
try { if (!video.paused()) video.pause(); } catch {} try { if (!video.paused()) video.pause(); } catch {}
clearSyncLoop(); clearSyncLoop();
syncing = false; syncing = false;
}); });
video.on('play', () => { video.on('play', () => {
if (syncing) return; if (syncing || restarting) return;
syncing = true; syncing = true;
try { if (audio.paused) audio.play()?.catch(()=>{}); } catch {} try { if (audio.paused) audio.play()?.catch(()=>{}); } catch {}
if (!syncInterval) startSyncLoop(); if (!syncInterval) startSyncLoop();
syncing = false; syncing = false;
}); });
audio.addEventListener('play', () => { audio.addEventListener('play', () => {
if (syncing) return; if (syncing || restarting) return;
syncing = true; syncing = true;
try { if (video.paused()) video.play()?.catch(()=>{}); } catch {} try { if (video.paused()) video.play()?.catch(()=>{}); } catch {}
if (!syncInterval) startSyncLoop(); if (!syncInterval) startSyncLoop();
syncing = false; syncing = false;
}); });
video.on('waiting', () => { audio.pause(); clearSyncLoop(); }); video.on('waiting', () => { if (!restarting) { audio.pause(); clearSyncLoop(); } });
video.on('playing', () => { if (audioReady) audio.play()?.catch(()=>{}); if (!syncInterval) startSyncLoop(); }); video.on('playing', () => { if (audioReady && !restarting) audio.play()?.catch(()=>{}); if (!syncInterval) startSyncLoop(); });
const errorBox = document.getElementById('loopedIndicator'); const errorBox = document.getElementById('loopedIndicator');
video.on('error', () => { video.on('error', () => {
@ -278,12 +294,14 @@ document.addEventListener("DOMContentLoaded", () => {
let wasPlayingBeforeSeek = false; let wasPlayingBeforeSeek = false;
video.on('seeking', () => { video.on('seeking', () => {
if (restarting) return;
wasPlayingBeforeSeek = !video.paused(); wasPlayingBeforeSeek = !video.paused();
audio.pause(); clearSyncLoop(); audio.pause(); clearSyncLoop();
const vt = Number(video.currentTime()); const vt = Number(video.currentTime());
if (Math.abs(vt - Number(audio.currentTime)) > 0.1) safeSetCT(audio, vt); if (Math.abs(vt - Number(audio.currentTime)) > 0.1) safeSetCT(audio, vt);
}); });
video.on('seeked', () => { video.on('seeked', () => {
if (restarting) return;
const vt = Number(video.currentTime()); const vt = Number(video.currentTime());
if (Math.abs(vt - Number(audio.currentTime)) > 0.05) safeSetCT(audio, vt); if (Math.abs(vt - Number(audio.currentTime)) > 0.05) safeSetCT(audio, vt);
if (wasPlayingBeforeSeek && bothPlayableAt(vt)) { if (wasPlayingBeforeSeek && bothPlayableAt(vt)) {
@ -296,24 +314,34 @@ document.addEventListener("DOMContentLoaded", () => {
clearSyncLoop(); clearSyncLoop();
} }
}); });
video.on('canplaythrough', () => { video.on('canplaythrough', () => {
if (restarting) return;
const vt = Number(video.currentTime()); const vt = Number(video.currentTime());
if (Math.abs(vt - Number(audio.currentTime)) > 0.1) safeSetCT(audio, vt); if (Math.abs(vt - Number(audio.currentTime)) > 0.1) safeSetCT(audio, vt);
}); });
audio.addEventListener('canplaythrough', () => { audio.addEventListener('canplaythrough', () => {
if (restarting) return;
const vt = Number(video.currentTime()); const vt = Number(video.currentTime());
if (Math.abs(vt - Number(audio.currentTime)) > 0.1) safeSetCT(audio, vt); if (Math.abs(vt - Number(audio.currentTime)) > 0.1) safeSetCT(audio, vt);
}); });
// --- unconditional looping --- const restartLoop = () => {
const restartLoop = () => { if (restarting) return;
restarting = true;
try { try {
clearSyncLoop();
safeSetCT(video, 0); safeSetCT(video, 0);
safeSetCT(audio, 0); safeSetCT(audio, 0);
video.play()?.catch(()=>{}); setTimeout(() => {
audio.play()?.catch(()=>{}); video.play()?.catch(()=>{});
if (!syncInterval) startSyncLoop(); audio.play()?.catch(()=>{});
} catch {} if (!syncInterval) startSyncLoop();
restarting = false;
}, 50);
} catch {
restarting = false;
}
}; };
video.on('ended', () => { video.on('ended', () => {
@ -324,10 +352,9 @@ document.addEventListener("DOMContentLoaded", () => {
if (shouldLoop) restartLoop(); if (shouldLoop) restartLoop();
else { try { video.pause(); } catch {}; clearSyncLoop(); } else { try { video.pause(); } catch {}; clearSyncLoop(); }
}); });
// -----------------------------
document.addEventListener('fullscreenchange', () => { document.addEventListener('fullscreenchange', () => {
if (!document.fullscreenElement) { if (!document.fullscreenElement && !restarting) {
video.pause(); audio.pause(); clearSyncLoop(); video.pause(); audio.pause(); clearSyncLoop();
} }
}); });