Sakurai/poke
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update css/player-base.js

Browse Source
This commit is contained in:
ashley 2025-10-06 19:32:01 +02:00
parent 278c7987f9
commit fce480ddda
1 changed files with 139 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

446
css/player-base.js
View File

@ -3,387 +3,219 @@ var _yt_player = videojs;
var versionclient = "youtube.player.web_20250917_22_RC00" var versionclient = "youtube.player.web_20250917_22_RC00"
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
// video.js 8 init - source can be seen in https://poketube.fun/static/vjs.min.js or the vjs.min.js file // video.js 8 init - source can be seen in https://poketube.fun/static/vjs.min.js or the vjs.min.js file
const video = videojs('video', { const video = videojs("video", {
controls: true, controls: true,
autoplay: false, autoplay: false,
preload: 'auto', preload: "auto",
errorDisplay: false, errorDisplay: false,
}); });
// todo : remove this code lol const qs = new URLSearchParams(location.search);
const qs = new URLSearchParams(window.location.search);
const qua = qs.get("quality") || ""; const qua = qs.get("quality") || "";
const vidKey = qs.get('v'); const vidKey = qs.get("v");
try { localStorage.setItem(`progress-${vidKey}`, 0); } catch {} try { localStorage.setItem(`progress-${vidKey}`, 0); } catch {}
// raw media elements // raw elements
const videoEl = document.getElementById('video'); const videoEl = document.getElementById("video");
const audio = document.getElementById('aud'); const audioEl = document.getElementById("aud");
const audioEl = document.getElementById('aud'); const errorBox = document.getElementById("loopedIndicator");
let volGuard = false;
// FIX: ensure inline playback hint for iOS/Safari // inline playback hints
try { videoEl.setAttribute('playsinline', ''); videoEl.setAttribute('webkit-playsinline', ''); } catch {} try { videoEl.setAttribute("playsinline", ""); videoEl.setAttribute("webkit-playsinline", ""); } catch {}
// global anti-ping-pong guard let syncing = false, restarting = false;
let syncing = false; // prevents normal ping-pong let vIsPlaying = false, aIsPlaying = false;
let restarting = false; // prevents loop-end ping-pong
// FIX: explicit loop-state variables
let desiredLoop =
!!videoEl.loop ||
qs.get("loop") === "1" ||
qs.get("loop") === "true" ||
window.forceLoop === true;
// FIX: tracks the short window *during* a loop restart
let suppressEndedUntil = 0;
// FIX: co-play tracking flags (true only when each element fires 'playing')
let vIsPlaying = false;
let aIsPlaying = false;
// remember mute states for temporary autoplay retries
let prevVideoMuted = false;
let prevAudioMuted = false;
let pendingUnmute = false;
// turn OFF native loop so 'ended' fires and we control both tracks together
try { videoEl.loop = false; videoEl.removeAttribute?.('loop'); } catch {}
try { audio.loop = false; audio.removeAttribute?.('loop'); } catch {}
// If someone toggles the <video loop> attribute at runtime, treat it as intent,
// but still keep native loop off (we loop manually to keep A/V locked).
try {
const loopObserver = new MutationObserver(muts => {
for (const m of muts) {
if (m.type === 'attributes' && m.attributeName === 'loop') {
desiredLoop = videoEl.hasAttribute('loop') || !!videoEl.loop;
// keep native loop disabled to prevent double restarts / missing 'ended'
videoEl.removeAttribute('loop');
videoEl.loop = false;
}
}
});
loopObserver.observe(videoEl, { attributes: true, attributeFilter: ['loop'] });
} catch {}
// resolve initial sources robustly (works whether <audio src> or <source> children are used)
const pickAudioSrc = () => {
const s = audio?.getAttribute?.('src');
if (s) return s;
const child = audio?.querySelector?.('source');
if (child?.getAttribute?.('src')) return child.getAttribute('src');
if (audio?.currentSrc) return audio.currentSrc;
return null;
};
let audioSrc = pickAudioSrc();
const srcObj = video.src();
const videoSrc = Array.isArray(srcObj) ? (srcObj[0] && srcObj[0].src) : srcObj;
// readiness + sync state
let audioReady = false, videoReady = false; let audioReady = false, videoReady = false;
let syncInterval = null; let syncInterval = null;
// thresholds / constants const BIG_DRIFT = 0.5, MICRO_DRIFT = 0.05, SYNC_INTERVAL_MS = 250, EPS = 0.15;
const BIG_DRIFT = 0.5;
const MICRO_DRIFT = 0.05;
const SYNC_INTERVAL_MS = 250;
const EPS = 0.15;
// --- buffering + playability check helpers --- // --- helpers ---
function timeInBuffered(media, t) { function timeInBuffered(media, t) {
try { try {
const br = media.buffered; const br = media.buffered;
if (!br || br.length === 0 || !isFinite(t)) return false; if (!br || !br.length) return false;
for (let i = 0; i < br.length; i++) { for (let i = 0; i < br.length; i++) {
const s = br.start(i) - EPS, e = br.end(i) + EPS; if (t >= br.start(i) - EPS && t <= br.end(i) + EPS) return true;
if (t >= s && t <= e) return true;
} }
} catch {} } catch {}
return false; return false;
} }
function canPlayAt(media, t) { function canPlayAt(media, t) {
try { try {
const rs = Number(media.readyState || 0); return media.readyState >= 3 || timeInBuffered(media, t);
if (!isFinite(t)) return false;
// HAVE_FUTURE_DATA (3) or better means imminent playback
if (rs >= 3) return true;
return timeInBuffered(media, t);
} catch { return false; } } catch { return false; }
} }
function bothPlayableAt(t) { function bothPlayableAt(t) {
return canPlayAt(videoEl, t) && canPlayAt(audio, t); return canPlayAt(videoEl, t) && canPlayAt(audioEl, t);
} }
// FIX: safely set currentTime
function safeSetCT(media, t) { function safeSetCT(media, t) {
try { try { if (isFinite(t) && t >= 0) media.currentTime = t; } catch {}
if (!isFinite(t) || t < 0) return;
media.currentTime = t;
} catch {}
} }
// stop sync loop
function clearSyncLoop() { function clearSyncLoop() {
if (syncInterval) { if (syncInterval) { clearInterval(syncInterval); syncInterval = null; }
clearInterval(syncInterval); try { audioEl.playbackRate = 1; } catch {}
syncInterval = null;
try { audio.playbackRate = 1; } catch {}
}
} }
// start sync loop
function startSyncLoop() { function startSyncLoop() {
clearSyncLoop(); clearSyncLoop();
syncInterval = setInterval(() => { syncInterval = setInterval(() => {
const vt = Number(video.currentTime()); const vt = Number(video.currentTime());
const at = Number(audio.currentTime); const at = Number(audioEl.currentTime);
if (!isFinite(vt) || !isFinite(at)) return; if (!isFinite(vt) || !isFinite(at)) return;
const delta = vt - at; const delta = vt - at;
if (Math.abs(delta) > BIG_DRIFT) { if (Math.abs(delta) > BIG_DRIFT) {
safeSetCT(audio, vt); safeSetCT(audioEl, vt);
try { audio.playbackRate = 1; } catch {} audioEl.playbackRate = 1;
return; } else if (Math.abs(delta) > MICRO_DRIFT) {
} const target = 1 + delta * 0.12;
if (Math.abs(delta) > MICRO_DRIFT) { audioEl.playbackRate = Math.max(0.85, Math.min(1.15, target));
const targetRate = 1 + (delta * 0.12);
try { audio.playbackRate = Math.max(0.85, Math.min(1.15, targetRate)); } catch {}
} else { } else {
try { audio.playbackRate = 1; } catch {} audioEl.playbackRate = 1;
} }
}, SYNC_INTERVAL_MS); }, SYNC_INTERVAL_MS);
} }
// FIX: co-play verification function pauseTogether() {
const markVPlaying = () => { vIsPlaying = true; maybeUnmuteRestore(); }; if (syncing) return;
const markAPlaying = () => { aIsPlaying = true; maybeUnmuteRestore(); }; syncing = true;
const markVNotPlaying = () => { vIsPlaying = false; }; try { video.pause(); } catch {}
const markANotPlaying = () => { aIsPlaying = false; }; try { audioEl.pause(); } catch {}
clearSyncLoop();
function bothActivelyPlaying() { return vIsPlaying && aIsPlaying; } syncing = false;
// restore mute state once both elements playing
function maybeUnmuteRestore() {
if (!pendingUnmute) return;
if (bothActivelyPlaying()) {
pendingUnmute = false;
// small defer so decoders settle
setTimeout(() => {
try { video.muted(prevVideoMuted); } catch {}
try { audio.muted = prevAudioMuted; } catch {}
}, 120);
}
} }
// FIX: unified play/pause coordinators (no ping-pong) async function playTogether() {
async function playTogether({ allowMutedRetry = true } = {}) {
if (syncing || restarting) return; if (syncing || restarting) return;
syncing = true; syncing = true;
try { try {
const t = Number(video.currentTime()); const t = Number(video.currentTime());
if (isFinite(t) && Math.abs(Number(audio.currentTime) - t) > 0.05) safeSetCT(audio, t); safeSetCT(audioEl, t);
await video.play().catch(()=>{});
let vOk = true, aOk = true; await audioEl.play().catch(()=>{});
try { const p = video.play(); if (p && p.then) await p; } catch { vOk = false; } startSyncLoop();
try { const p = audio.play(); if (p && p.then) await p; } catch { aOk = false; }
// if either failed due to autoplay policy, retry both muted exactly once
if (allowMutedRetry && (!vOk || !aOk)) {
prevVideoMuted = !!video.muted();
prevAudioMuted = !!audio.muted;
pendingUnmute = true;
try { video.muted(true); } catch {}
try { audio.muted = true; } catch {}
try { const p = video.play(); if (p && p.then) await p; } catch {}
try { const p = audio.play(); if (p && p.then) await p; } catch {}
}
// start sync loop
if (!syncInterval) startSyncLoop();
} finally { syncing = false; } } finally { syncing = false; }
} }
// unified pause // --- error handling & validation ---
function pauseTogether() { function showErrorMessage(err) {
if (syncing) return; let message = "An unknown error occurred.";
syncing = true; if (err && err.code && err.code !== 1) {
try { message = `Error ${err.code}: ${err.message || "No message provided"} — try to refresh the page?`;
try { video.pause(); } catch {} }
try { audio.pause(); } catch {} if (errorBox) {
clearSyncLoop(); errorBox.textContent = message;
} finally { errorBox.style.display = "block";
syncing = false; errorBox.style.width = "fit-content";
} }
} }
// FIX: safety check (pause both if one stuck or failed) function handleFatalError(type, err) {
function verifyPlaybackState() { console.warn(`[${type.toUpperCase()} ERROR]`, err);
if (!bothActivelyPlaying() && (vIsPlaying || aIsPlaying)) pauseTogether(); showErrorMessage(err);
// also pause if either has an error property
if (video.error || audio.error) pauseTogether();
}
setInterval(verifyPlaybackState, 500); // check every half second
// FIX: catch fatal playback errors directly
const handleFatalError = (type, err) => {
console.warn(`[A/V ERROR] ${type} failed:`, err);
pauseTogether(); pauseTogether();
clearSyncLoop(); clearSyncLoop();
// prevent further playback attempts
video.off("play");
audioEl.removeEventListener("play", playTogether);
}
videoEl.addEventListener("error", () => handleFatalError("video", videoEl.error));
audioEl.addEventListener("error", () => handleFatalError("audio", audioEl.error));
// --- safety checks ---
function verifyHealth() {
// check readyState errors and buffering
if (videoEl.error || audioEl.error) {
handleFatalError(videoEl.error ? "video" : "audio", videoEl.error || audioEl.error);
return;
}
const vt = video.currentTime();
const at = audioEl.currentTime;
if (!bothPlayableAt(vt)) {
// buffer underrun
console.warn("[A/V] buffer underrun detected, pausing for safety");
pauseTogether();
}
}
setInterval(verifyHealth, 1000);
// --- load + play sync ---
const onReady = () => {
if (!videoReady || !audioReady) return;
const t = Number(video.currentTime());
if (bothPlayableAt(t)) playTogether();
}; };
videoEl.addEventListener('error', e => handleFatalError('video', videoEl.error || e));
audioEl.addEventListener('error', e => handleFatalError('audio', audioEl.error || e));
// startup routine videoEl.addEventListener("loadeddata", () => { videoReady = true; onReady(); });
function tryStart() { audioEl.addEventListener("loadeddata", () => { audioReady = true; onReady(); });
if (audioReady && videoReady && !restarting) {
const t = Number(video.currentTime());
if (isFinite(t) && Math.abs(Number(audio.currentTime) - t) > 0.1) safeSetCT(audio, t);
if (bothPlayableAt(t)) playTogether({ allowMutedRetry: true });
else pauseTogether();
setupMediaSession();
}
}
// attach source load watchers video.on("play", () => { vIsPlaying = true; if (!aIsPlaying) playTogether(); });
function attachRetry(elm, resolveSrc, markReady) { video.on("pause", () => { vIsPlaying = false; if (!restarting) pauseTogether(); });
const onLoaded = () => { markReady(); tryStart(); }; audioEl.addEventListener("play", () => { aIsPlaying = true; if (!vIsPlaying) playTogether(); });
elm.addEventListener('loadeddata', onLoaded, { once: true }); audioEl.addEventListener("pause", () => { aIsPlaying = false; if (!restarting) pauseTogether(); });
elm.addEventListener('loadedmetadata', onLoaded, { once: true });
}
// integrate with media session API // --- buffer check: stop if audio not 100% buffered after some seconds ---
function setupMediaSession() { const bufferCheck = setInterval(() => {
if ('mediaSession' in navigator) { try {
try { if (!audioEl.buffered.length) return;
navigator.mediaSession.metadata = new MediaMetadata({ const end = audioEl.buffered.end(audioEl.buffered.length - 1);
title: document.title || 'Video', if (end < audioEl.duration - 0.5 && !audioEl.paused) {
artist: '', console.warn("[AUDIO] not fully buffered, pausing playback");
album: '', pauseTogether();
artwork: [] }
}); } catch {}
} catch {} }, 2000);
navigator.mediaSession.setActionHandler('play', () => playTogether({ allowMutedRetry: true }));
navigator.mediaSession.setActionHandler('pause', pauseTogether);
}
}
// keyboard controls // improved seek handling (pause only on large seeks)
document.addEventListener('keydown', e => { let wasPlayingBeforeSeek = false, lastSeekTime = 0;
const SEEK_THRESHOLD = 1.5;
video.on("seeking", () => {
if (restarting) return; if (restarting) return;
if (e.code === 'MediaPlayPause') { wasPlayingBeforeSeek = !video.paused();
if (video.paused()) playTogether({ allowMutedRetry: true }); lastSeekTime = Number(audioEl.currentTime) || 0;
else pauseTogether();
}
}); });
// FIX: one-time "unlock" to enable later programmatic plays on Safari/iOS video.on("seeked", () => {
let mediaUnlocked = false; if (restarting) return;
const unlock = () => { const vt = Number(video.currentTime());
if (mediaUnlocked) return; const delta = Math.abs(vt - lastSeekTime);
mediaUnlocked = true; safeSetCT(audioEl, vt);
try { audio.muted = true; audio.play().then(() => audio.pause()).catch(()=>{}); } catch {} if (delta > SEEK_THRESHOLD) pauseTogether();
try { const was = !!video.muted(); video.muted(true); video.play().then(()=>{ video.pause(); video.muted(was); }).catch(()=>{}); } catch {} else if (wasPlayingBeforeSeek) playTogether();
}; });
window.addEventListener('click', unlock, { once: true, capture: true });
window.addEventListener('keydown', unlock, { once: true, capture: true });
if (qua !== "medium") { // --- loop behavior ---
// initial ready tracking async function restartLoop() {
attachRetry(audio, pickAudioSrc, () => { audioReady = true; }); if (restarting) return;
attachRetry(videoEl, () => videoSrc, () => { videoReady = true; }); restarting = true;
try {
// FIX: sync volume + mute states pauseTogether();
const clamp = v => Math.max(0, Math.min(1, Number(v))); const startAt = 0.001;
video.on('volumechange', () => { video.currentTime(startAt);
try { audio.volume = clamp(video.volume()); audio.muted = video.muted(); } catch {} safeSetCT(audioEl, startAt);
}); await playTogether();
} finally { restarting = false; }
video.on('ratechange', () => { try { audio.playbackRate = video.playbackRate(); } catch {} });
// sync-safe event bridging using the coordinators (no ping-pong)
video.on('play', () => { markVPlaying(); if (!aIsPlaying) playTogether({ allowMutedRetry: true }); });
audio.addEventListener('play', () => { markAPlaying(); if (!vIsPlaying) playTogether({ allowMutedRetry: true }); });
video.on('pause', () => { markVNotPlaying(); if (!restarting) pauseTogether(); });
audio.addEventListener('pause', () => { markANotPlaying(); if (!restarting) pauseTogether(); });
video.on('waiting', () => { markVNotPlaying(); if (!restarting) { try { audio.pause(); } catch{}; clearSyncLoop(); } });
audio.addEventListener('waiting', () => { markANotPlaying(); });
video.on('playing', markVPlaying);
audio.addEventListener('playing', markAPlaying);
// --- improved seek handling (pause only on large seeks) ---
let wasPlayingBeforeSeek = false;
let lastSeekTime = 0;
const SEEK_THRESHOLD = 1.5; // seconds — anything above this counts as "large seek"
video.on('seeking', () => {
if (restarting) return;
wasPlayingBeforeSeek = !video.paused();
lastSeekTime = Number(audio.currentTime) || 0;
});
video.on('seeked', () => {
if (restarting) return;
const vt = Number(video.currentTime());
const delta = Math.abs(vt - lastSeekTime);
safeSetCT(audio, vt);
if (delta > SEEK_THRESHOLD) {
// large seek — pause, then safely restart when ready
pauseTogether();
setTimeout(() => {
const bothReady = bothPlayableAt(vt);
if (wasPlayingBeforeSeek && bothReady) playTogether({ allowMutedRetry: true });
}, 180);
} else {
// small seek — resume smoothly
if (wasPlayingBeforeSeek) playTogether({ allowMutedRetry: false });
}
});
// --- unconditional looping with anti-pingpong ---
async function restartLoop() {
if (restarting) return;
restarting = true;
try {
clearSyncLoop();
pauseTogether();
const startAt = 0.001;
suppressEndedUntil = performance.now() + 800;
video.currentTime(startAt);
safeSetCT(audio, startAt);
await playTogether({ allowMutedRetry: true });
} finally { restarting = false; }
}
video.on('ended', () => {
if (restarting) return;
if (performance.now() < suppressEndedUntil) return;
if (desiredLoop) restartLoop();
else { pauseTogether(); }
});
audio.addEventListener('ended', () => {
if (restarting) return;
if (performance.now() < suppressEndedUntil) return;
if (desiredLoop) restartLoop();
else { pauseTogether(); }
});
// pause on fullscreen exit
document.addEventListener('fullscreenchange', () => {
if (!document.fullscreenElement && !restarting) {
pauseTogether();
}
});
} }
video.on("ended", () => { pauseTogether(); });
audioEl.addEventListener("ended", () => { pauseTogether(); });
// pause on fullscreen exit
document.addEventListener("fullscreenchange", () => {
if (!document.fullscreenElement && !restarting) pauseTogether();
});
}); });
// https://codeberg.org/ashley/poke/src/branch/main/src/libpoketube/libpoketube-youtubei-objects.json // https://codeberg.org/ashley/poke/src/branch/main/src/libpoketube/libpoketube-youtubei-objects.json