|
|
|
|
@@ -1745,43 +1745,125 @@ const SlideCreator = {
|
|
|
|
|
|
|
|
|
|
if (isSafariWebKit) {
|
|
|
|
|
// ── Safari: plain iframe embed ───────────────────────────────────────────
|
|
|
|
|
const embedUrl = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&mute=1&controls=0&playsinline=1&rel=0&iv_load_policy=3&enablejsapi=0&origin=${encodeURIComponent(window.location.origin)}`;
|
|
|
|
|
// Fetch SponsorBlock data and apply as URL params (start= / end=)
|
|
|
|
|
ApiUtils.fetchSponsorBlockData(videoId).then(segments => {
|
|
|
|
|
let startParam = '';
|
|
|
|
|
let endParam = '';
|
|
|
|
|
if (segments.intro) {
|
|
|
|
|
startParam = `&start=${Math.ceil(segments.intro[1])}`;
|
|
|
|
|
console.info(`SponsorBlock (Safari) intro skip: starting at ${Math.ceil(segments.intro[1])}s`);
|
|
|
|
|
}
|
|
|
|
|
if (segments.outro) {
|
|
|
|
|
endParam = `&end=${Math.floor(segments.outro[0])}`;
|
|
|
|
|
console.info(`SponsorBlock (Safari) outro skip: ending at ${Math.floor(segments.outro[0])}s`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const ytIframe = document.createElement('iframe');
|
|
|
|
|
ytIframe.style.cssText = 'width:100%;height:100%;border:0;pointer-events:none;';
|
|
|
|
|
ytIframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
|
|
|
|
|
ytIframe.setAttribute('allowfullscreen', '');
|
|
|
|
|
ytIframe.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
|
|
|
|
|
ytIframe.src = embedUrl;
|
|
|
|
|
videoBackdrop.appendChild(ytIframe);
|
|
|
|
|
// enablejsapi=1 needed for postMessage commands — does NOT trigger IFrame API handshake
|
|
|
|
|
const embedUrl = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&mute=1&controls=0&playsinline=1&rel=0&iv_load_policy=3&enablejsapi=1&origin=${encodeURIComponent(window.location.origin)}${startParam}${endParam}`;
|
|
|
|
|
|
|
|
|
|
// Show immediately — no onStateChange available for plain iframes
|
|
|
|
|
videoBackdrop.style.opacity = '1';
|
|
|
|
|
const ytIframe = document.createElement('iframe');
|
|
|
|
|
ytIframe.style.cssText = 'width:100%;height:100%;border:0;pointer-events:none;';
|
|
|
|
|
ytIframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
|
|
|
|
|
ytIframe.setAttribute('allowfullscreen', '');
|
|
|
|
|
ytIframe.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
|
|
|
|
|
ytIframe.src = embedUrl;
|
|
|
|
|
videoBackdrop.appendChild(ytIframe);
|
|
|
|
|
|
|
|
|
|
// Create a stub player compatible with all slide management code
|
|
|
|
|
STATE.slideshow.videoPlayers[itemId] = {
|
|
|
|
|
_isSafariIframe: true,
|
|
|
|
|
_iframe: ytIframe,
|
|
|
|
|
_videoId: videoId,
|
|
|
|
|
_embedUrl: embedUrl,
|
|
|
|
|
pauseVideo() { ytIframe.src = ''; },
|
|
|
|
|
stopVideo() { ytIframe.src = ''; },
|
|
|
|
|
playVideo() { if (!ytIframe.src) ytIframe.src = this._embedUrl; },
|
|
|
|
|
mute() { /* cannot mute plain iframe mid-play */ },
|
|
|
|
|
unMute() { /* cannot unmute plain iframe mid-play */ },
|
|
|
|
|
setVolume() { /* not available */ },
|
|
|
|
|
getIframe() { return ytIframe; },
|
|
|
|
|
getPlayerState() { return 1; }, // always report PLAYING so fallback timeouts don't fire
|
|
|
|
|
loadVideoById({ videoId: vid }) {
|
|
|
|
|
const url = `https://www.youtube-nocookie.com/embed/${vid}?autoplay=1&mute=1&controls=0&playsinline=1&rel=0&iv_load_policy=3&enablejsapi=0`;
|
|
|
|
|
ytIframe.src = url;
|
|
|
|
|
this._videoId = vid;
|
|
|
|
|
this._embedUrl = url;
|
|
|
|
|
},
|
|
|
|
|
destroy() { ytIframe.remove(); }
|
|
|
|
|
};
|
|
|
|
|
// Show immediately — no onStateChange available for plain iframes
|
|
|
|
|
videoBackdrop.style.opacity = '1';
|
|
|
|
|
|
|
|
|
|
console.log(`🍎 Safari detected — using plain iframe embed for YouTube video ${videoId}`);
|
|
|
|
|
// Helper: send postMessage command to the iframe player
|
|
|
|
|
const ytCmd = (func, args = []) => {
|
|
|
|
|
try {
|
|
|
|
|
ytIframe.contentWindow?.postMessage(
|
|
|
|
|
JSON.stringify({ event: 'command', func, args }),
|
|
|
|
|
'https://www.youtube-nocookie.com'
|
|
|
|
|
);
|
|
|
|
|
} catch(e) { /* cross-origin access may fail on some iOS versions */ }
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// YouTube won't send onStateChange events unless we explicitly subscribe.
|
|
|
|
|
// The IFrame API does this automatically; we must do it manually for plain iframes.
|
|
|
|
|
const subscribeToYtEvents = () => {
|
|
|
|
|
try {
|
|
|
|
|
// Step 1: Announce we're listening
|
|
|
|
|
ytIframe.contentWindow?.postMessage(
|
|
|
|
|
JSON.stringify({ event: 'listening' }),
|
|
|
|
|
'https://www.youtube-nocookie.com'
|
|
|
|
|
);
|
|
|
|
|
// Step 2: Subscribe to state change events
|
|
|
|
|
ytIframe.contentWindow?.postMessage(
|
|
|
|
|
JSON.stringify({ event: 'command', func: 'addEventListener', args: ['onStateChange'] }),
|
|
|
|
|
'https://www.youtube-nocookie.com'
|
|
|
|
|
);
|
|
|
|
|
} catch(e) {}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Subscribe when iframe has finished loading
|
|
|
|
|
ytIframe.addEventListener('load', subscribeToYtEvents);
|
|
|
|
|
|
|
|
|
|
// Listen for YouTube state changes (video ended → advance slide)
|
|
|
|
|
const handleYtMessage = (event) => {
|
|
|
|
|
if (!event.origin.includes('youtube')) return;
|
|
|
|
|
try {
|
|
|
|
|
const data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
|
|
|
|
|
|
|
|
|
|
// Player is ready — re-subscribe in case the first attempt was too early
|
|
|
|
|
if (data.event === 'onReady') {
|
|
|
|
|
subscribeToYtEvents();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (data.event === 'onStateChange') {
|
|
|
|
|
console.log(`🍎 Safari YT state: ${data.info} for ${itemId}`);
|
|
|
|
|
if (data.info === 0) { // 0 = ENDED
|
|
|
|
|
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
|
|
|
|
if (slide && slide.classList.contains('active')) {
|
|
|
|
|
SlideshowManager.nextSlide();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} catch(e) {}
|
|
|
|
|
};
|
|
|
|
|
window.addEventListener('message', handleYtMessage);
|
|
|
|
|
|
|
|
|
|
// Create a postMessage-based stub compatible with all slide management code
|
|
|
|
|
// Key: we NEVER clear ytIframe.src — that would break the YouTube session and cause Error 153.
|
|
|
|
|
// Instead we use postMessage pause/play/seek to control playback state.
|
|
|
|
|
STATE.slideshow.videoPlayers[itemId] = {
|
|
|
|
|
_isSafariIframe: true,
|
|
|
|
|
_iframe: ytIframe,
|
|
|
|
|
_videoId: videoId,
|
|
|
|
|
_embedUrl: embedUrl,
|
|
|
|
|
_msgHandler: handleYtMessage,
|
|
|
|
|
pauseVideo() { ytCmd('pauseVideo'); },
|
|
|
|
|
stopVideo() { ytCmd('pauseVideo'); ytCmd('seekTo', [0, true]); },
|
|
|
|
|
playVideo() { ytCmd('playVideo'); },
|
|
|
|
|
mute() { ytCmd('mute'); },
|
|
|
|
|
unMute() { ytCmd('unMute'); },
|
|
|
|
|
setVolume(v) { ytCmd('setVolume', [v]); },
|
|
|
|
|
getIframe() { return ytIframe; },
|
|
|
|
|
getPlayerState() { return 1; }, // approximate: avoids triggering fallback timeouts
|
|
|
|
|
loadVideoById({ videoId: vid, startSeconds = 0 }) {
|
|
|
|
|
if (vid === this._videoId) {
|
|
|
|
|
// Same video — seek to start and resume. NEVER change src (would cause Error 153).
|
|
|
|
|
ytCmd('seekTo', [startSeconds, true]);
|
|
|
|
|
ytCmd('playVideo');
|
|
|
|
|
} else {
|
|
|
|
|
// Different video — need a fresh embed URL
|
|
|
|
|
const url = `https://www.youtube-nocookie.com/embed/${vid}?autoplay=1&mute=1&controls=0&playsinline=1&rel=0&iv_load_policy=3&enablejsapi=1&origin=${encodeURIComponent(window.location.origin)}`;
|
|
|
|
|
ytIframe.src = url;
|
|
|
|
|
this._videoId = vid;
|
|
|
|
|
this._embedUrl = url;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
destroy() {
|
|
|
|
|
window.removeEventListener('message', this._msgHandler);
|
|
|
|
|
ytIframe.remove();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
console.log(`🍎 Safari detected — using plain iframe embed for YouTube video ${videoId}`);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
// ── Non-Safari: YouTube IFrame API ──────────────────────────────────────
|
|
|
|
|
@@ -2567,9 +2649,10 @@ const SlideshowManager = {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Check if playback successfully started, otherwise fallback to muted
|
|
|
|
|
// (Only for real YT.Player instances — Safari stub's getPlayerState() always returns 1)
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
if (!currentSlide.classList.contains('active')) return;
|
|
|
|
|
if (player.getPlayerState &&
|
|
|
|
|
if (player.getPlayerState && typeof YT !== 'undefined' &&
|
|
|
|
|
player.getPlayerState() !== YT.PlayerState.PLAYING &&
|
|
|
|
|
player.getPlayerState() !== YT.PlayerState.BUFFERING) {
|
|
|
|
|
console.log("YouTube loadVideoById didn't start playback, retrying muted...");
|
|
|
|
|
|
