|
|
|
|
@@ -163,6 +163,14 @@ const isUserLoggedIn = () => {
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Detects if the current device is a low-power device (Smart TVs, etc.)
|
|
|
|
|
* @returns {boolean} True if running on a low-power device
|
|
|
|
|
*/
|
|
|
|
|
const isLowPowerDevice = () => {
|
|
|
|
|
return /webOS|LG Browser|SMART-TV|SmartTV|Tizen|Viera|NetCast|Roku|VIDAA/i.test(navigator.userAgent);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Initializes Jellyfin data from ApiClient
|
|
|
|
|
* @param {Function} callback - Function to call once data is initialized
|
|
|
|
|
@@ -734,17 +742,21 @@ const SlideUtils = {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (isYoutube && videoId) {
|
|
|
|
|
const playerDiv = this.createElement('div', { id: 'modal-yt-player' });
|
|
|
|
|
contentContainer.appendChild(playerDiv);
|
|
|
|
|
const ytIframe = this.createElement('iframe', {
|
|
|
|
|
id: 'modal-yt-player',
|
|
|
|
|
src: `https://www.youtube-nocookie.com/embed/${videoId}?enablejsapi=1&origin=${encodeURIComponent(window.location.origin)}`,
|
|
|
|
|
allow: 'autoplay; encrypted-media',
|
|
|
|
|
style: 'width: 100%; height: 100%; border: none;',
|
|
|
|
|
referrerpolicy: 'strict-origin-when-cross-origin',
|
|
|
|
|
allowfullscreen: 'true'
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
contentContainer.appendChild(ytIframe);
|
|
|
|
|
overlay.append(closeButton, contentContainer);
|
|
|
|
|
document.body.appendChild(overlay);
|
|
|
|
|
|
|
|
|
|
this.loadYouTubeIframeAPI().then(() => {
|
|
|
|
|
new YT.Player('modal-yt-player', {
|
|
|
|
|
height: '100%',
|
|
|
|
|
width: '100%',
|
|
|
|
|
videoId: videoId,
|
|
|
|
|
host: 'https://www.youtube-nocookie.com',
|
|
|
|
|
new YT.Player(ytIframe, {
|
|
|
|
|
playerVars: {
|
|
|
|
|
autoplay: 1,
|
|
|
|
|
controls: 1,
|
|
|
|
|
@@ -753,14 +765,6 @@ const SlideUtils = {
|
|
|
|
|
playsinline: 1,
|
|
|
|
|
origin: window.location.origin,
|
|
|
|
|
enablejsapi: 1
|
|
|
|
|
},
|
|
|
|
|
events: {
|
|
|
|
|
'onReady': (event) => {
|
|
|
|
|
const iframe = event.target.getIframe();
|
|
|
|
|
if (iframe) {
|
|
|
|
|
iframe.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
@@ -1403,8 +1407,6 @@ const ApiUtils = {
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
id: trailer.Id,
|
|
|
|
|
// static=true forces Jellyfin to direct-stream (no transcoding) which enables
|
|
|
|
|
// HTTP Range Requests (Accept-Ranges: bytes) — required by Safari for video playback
|
|
|
|
|
url: `${STATE.jellyfinData.serverAddress}/Videos/${trailer.Id}/stream.mp4?mediaSourceId=${mediaSourceId}&api_key=${STATE.jellyfinData.accessToken}&static=true`
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
@@ -1444,7 +1446,7 @@ const ApiUtils = {
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
id: video.Id,
|
|
|
|
|
url: `${STATE.jellyfinData.serverAddress}/Videos/${video.Id}/stream.mp4?api_key=${STATE.jellyfinData.accessToken}`
|
|
|
|
|
url: `${STATE.jellyfinData.serverAddress}/Videos/${video.Id}/stream.mp4?api_key=${STATE.jellyfinData.accessToken}&static=true`
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@@ -1670,7 +1672,7 @@ const SlideCreator = {
|
|
|
|
|
|
|
|
|
|
trailerUrl = {
|
|
|
|
|
id: videoId,
|
|
|
|
|
url: `${STATE.jellyfinData.serverAddress}/Videos/${videoId}/stream.mp4?api_key=${STATE.jellyfinData.accessToken}`
|
|
|
|
|
url: `${STATE.jellyfinData.serverAddress}/Videos/${videoId}/stream.mp4?api_key=${STATE.jellyfinData.accessToken}&static=true`
|
|
|
|
|
};
|
|
|
|
|
} else {
|
|
|
|
|
// Assume it's a standard URL (YouTube, etc.)
|
|
|
|
|
@@ -1698,7 +1700,7 @@ const SlideCreator = {
|
|
|
|
|
console.log(`Using local trailer fallback for ${itemId}: ${trailerUrl}`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
|
|
|
const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
|
|
|
|
|
|
|
|
// Client Setting Overrides
|
|
|
|
|
const enableVideo = MediaBarEnhancedSettingsManager.getSetting('videoBackdrops', CONFIG.enableVideoBackdrop);
|
|
|
|
|
@@ -1728,7 +1730,12 @@ const SlideCreator = {
|
|
|
|
|
console.warn("Invalid trailer URL:", trailerUrl);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (isYoutube && videoId) {
|
|
|
|
|
const isLowPower = isLowPowerDevice();
|
|
|
|
|
const itemIndex = STATE.slideshow.itemIds ? STATE.slideshow.itemIds.indexOf(itemId) : -1;
|
|
|
|
|
const isActiveSlide = itemIndex !== -1 && itemIndex === STATE.slideshow.currentSlideIndex;
|
|
|
|
|
const shouldCreateVideo = !isLowPower || isActiveSlide;
|
|
|
|
|
|
|
|
|
|
if (isYoutube && videoId && shouldCreateVideo) {
|
|
|
|
|
isVideo = true;
|
|
|
|
|
// Create container for YouTube API
|
|
|
|
|
const videoClass = CONFIG.fullWidthVideo ? "video-backdrop-full" : "video-backdrop-default";
|
|
|
|
|
@@ -1736,249 +1743,152 @@ const SlideCreator = {
|
|
|
|
|
// Create a wrapper for opacity transition
|
|
|
|
|
videoBackdrop = SlideUtils.createElement("div", {
|
|
|
|
|
className: `backdrop video-backdrop ${videoClass}`,
|
|
|
|
|
style: "opacity: 0; transition: opacity 1.2s ease-in-out;"
|
|
|
|
|
style: "opacity: 0; transition: opacity 1.2s ease-in-out;" // Start interrupted/transparent
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Detect Safari/WebKit — the YouTube IFrame API causes Error 153 on WebKit
|
|
|
|
|
// due to cross-origin postMessage restrictions. Use a plain iframe embed instead.
|
|
|
|
|
const isSafariWebKit = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent) && !/Chromium/.test(navigator.userAgent);
|
|
|
|
|
// Create an iframe upfront
|
|
|
|
|
const ytPlayerIframe = SlideUtils.createElement("iframe", {
|
|
|
|
|
id: `youtube-player-${itemId}`,
|
|
|
|
|
src: `https://www.youtube-nocookie.com/embed/${videoId}?enablejsapi=1&origin=${encodeURIComponent(window.location.origin)}`,
|
|
|
|
|
style: "width: 100%; height: 100%; border: none;",
|
|
|
|
|
allow: "autoplay; encrypted-media",
|
|
|
|
|
referrerpolicy: "strict-origin-when-cross-origin",
|
|
|
|
|
allowfullscreen: "true"
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
videoBackdrop.appendChild(ytPlayerIframe);
|
|
|
|
|
|
|
|
|
|
if (isSafariWebKit) {
|
|
|
|
|
// ── Safari: plain iframe embed ───────────────────────────────────────────
|
|
|
|
|
// Fetch SponsorBlock data and apply as URL params (start= / end=)
|
|
|
|
|
// Initialize YouTube Player
|
|
|
|
|
SlideUtils.loadYouTubeIframeAPI().then(() => {
|
|
|
|
|
// Fetch SponsorBlock data
|
|
|
|
|
ApiUtils.fetchSponsorBlockData(videoId).then(segments => {
|
|
|
|
|
let startParam = '';
|
|
|
|
|
let endParam = '';
|
|
|
|
|
const playerVars = {
|
|
|
|
|
autoplay: 0,
|
|
|
|
|
mute: STATE.slideshow.isMuted ? 1 : 0,
|
|
|
|
|
controls: 0,
|
|
|
|
|
disablekb: 1,
|
|
|
|
|
fs: 0,
|
|
|
|
|
iv_load_policy: 3,
|
|
|
|
|
rel: 0,
|
|
|
|
|
loop: 0,
|
|
|
|
|
playsinline: 1,
|
|
|
|
|
origin: window.location.origin,
|
|
|
|
|
enablejsapi: 1
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Determine video quality
|
|
|
|
|
let quality = 'hd1080';
|
|
|
|
|
if (CONFIG.preferredVideoQuality === 'Maximum') {
|
|
|
|
|
quality = 'highres';
|
|
|
|
|
} else if (CONFIG.preferredVideoQuality === '720p') {
|
|
|
|
|
quality = 'hd720';
|
|
|
|
|
} else if (CONFIG.preferredVideoQuality === '1080p') {
|
|
|
|
|
quality = 'hd1080';
|
|
|
|
|
} else { // Auto or fallback
|
|
|
|
|
// If screen is wider than 1920, prefer highres, otherwise 1080p
|
|
|
|
|
quality = window.screen.width > 1920 ? 'highres' : 'hd1080';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
playerVars.suggestedQuality = quality;
|
|
|
|
|
|
|
|
|
|
// Apply SponsorBlock start/end times
|
|
|
|
|
if (segments.intro) {
|
|
|
|
|
startParam = `&start=${Math.ceil(segments.intro[1])}`;
|
|
|
|
|
console.info(`SponsorBlock (Safari) intro skip: starting at ${Math.ceil(segments.intro[1])}s`);
|
|
|
|
|
playerVars.start = Math.ceil(segments.intro[1]);
|
|
|
|
|
console.info(`SponsorBlock intro detected for video ${videoId}: skipping to ${playerVars.start}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`);
|
|
|
|
|
playerVars.end = Math.floor(segments.outro[0]);
|
|
|
|
|
console.info(`SponsorBlock outro detected for video ${videoId}: ending at ${playerVars.end}s`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 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}`;
|
|
|
|
|
STATE.slideshow.videoPlayers[itemId] = new YT.Player(ytPlayerIframe, {
|
|
|
|
|
playerVars: playerVars,
|
|
|
|
|
events: {
|
|
|
|
|
'onReady': (event) => {
|
|
|
|
|
// Store start/end time and videoId for later use
|
|
|
|
|
event.target._startTime = playerVars.start || 0;
|
|
|
|
|
event.target._endTime = playerVars.end || undefined;
|
|
|
|
|
event.target._videoId = videoId;
|
|
|
|
|
|
|
|
|
|
// Store reference to wrapper for fading
|
|
|
|
|
event.target._wrapperDiv = videoBackdrop;
|
|
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
|
|
|
|
|
// Show immediately — no onStateChange available for plain iframes
|
|
|
|
|
videoBackdrop.style.opacity = '1';
|
|
|
|
|
|
|
|
|
|
// 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 */ }
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Listen for YouTube state changes (e.g. 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;
|
|
|
|
|
if (data.event === 'onStateChange' && data.info === 0) { // 0 = YT.PlayerState.ENDED
|
|
|
|
|
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
|
|
|
|
if (slide && slide.classList.contains('active')) {
|
|
|
|
|
SlideshowManager.nextSlide();
|
|
|
|
|
if (STATE.slideshow.isMuted) {
|
|
|
|
|
event.target.mute();
|
|
|
|
|
} else {
|
|
|
|
|
event.target.unMute();
|
|
|
|
|
event.target.setVolume(40);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} 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();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
if (typeof event.target.setPlaybackQuality === 'function') {
|
|
|
|
|
event.target.setPlaybackQuality(quality);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
console.log(`🍎 Safari detected — using plain iframe embed for YouTube video ${videoId}`);
|
|
|
|
|
});
|
|
|
|
|
// Only play if this is the active slide
|
|
|
|
|
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
|
|
|
|
const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
// ── Non-Safari: YouTube IFrame API ──────────────────────────────────────
|
|
|
|
|
const ytPlayerDiv = SlideUtils.createElement("div", {
|
|
|
|
|
id: `youtube-player-${itemId}`,
|
|
|
|
|
style: "width: 100%; height: 100%;"
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
videoBackdrop.appendChild(ytPlayerDiv);
|
|
|
|
|
|
|
|
|
|
SlideUtils.loadYouTubeIframeAPI().then(() => {
|
|
|
|
|
ApiUtils.fetchSponsorBlockData(videoId).then(segments => {
|
|
|
|
|
const playerVars = {
|
|
|
|
|
autoplay: 1,
|
|
|
|
|
mute: 1, // need to be muted for Safari, because apple makes life difficult...
|
|
|
|
|
controls: 0,
|
|
|
|
|
disablekb: 1,
|
|
|
|
|
fs: 0,
|
|
|
|
|
iv_load_policy: 3,
|
|
|
|
|
rel: 0,
|
|
|
|
|
loop: 0,
|
|
|
|
|
playsinline: 1,
|
|
|
|
|
origin: window.location.origin,
|
|
|
|
|
enablejsapi: 1
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Determine video quality
|
|
|
|
|
let quality = 'hd1080';
|
|
|
|
|
if (CONFIG.preferredVideoQuality === 'Maximum') {
|
|
|
|
|
quality = 'highres';
|
|
|
|
|
} else if (CONFIG.preferredVideoQuality === '720p') {
|
|
|
|
|
quality = 'hd720';
|
|
|
|
|
} else if (CONFIG.preferredVideoQuality === '1080p') {
|
|
|
|
|
quality = 'hd1080';
|
|
|
|
|
} else {
|
|
|
|
|
quality = window.screen.width > 1920 ? 'highres' : 'hd1080';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
playerVars.suggestedQuality = quality;
|
|
|
|
|
|
|
|
|
|
// Apply SponsorBlock start/end times
|
|
|
|
|
if (segments.intro) {
|
|
|
|
|
playerVars.start = Math.ceil(segments.intro[1]);
|
|
|
|
|
console.info(`SponsorBlock intro detected for video ${videoId}: skipping to ${playerVars.start}s`);
|
|
|
|
|
}
|
|
|
|
|
if (segments.outro) {
|
|
|
|
|
playerVars.end = Math.floor(segments.outro[0]);
|
|
|
|
|
console.info(`SponsorBlock outro detected for video ${videoId}: ending at ${playerVars.end}s`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
STATE.slideshow.videoPlayers[itemId] = new YT.Player(`youtube-player-${itemId}`, {
|
|
|
|
|
height: '100%',
|
|
|
|
|
width: '100%',
|
|
|
|
|
videoId: videoId,
|
|
|
|
|
host: 'https://www.youtube-nocookie.com',
|
|
|
|
|
playerVars: playerVars,
|
|
|
|
|
events: {
|
|
|
|
|
'onReady': (event) => {
|
|
|
|
|
const iframe = event.target.getIframe();
|
|
|
|
|
if (iframe) {
|
|
|
|
|
iframe.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
|
|
|
|
|
// Full allow attribute matching what YouTube sets on their own embed pages
|
|
|
|
|
iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Store start/end time and videoId for later use
|
|
|
|
|
event.target._startTime = playerVars.start || 0;
|
|
|
|
|
event.target._endTime = playerVars.end || undefined;
|
|
|
|
|
event.target._videoId = videoId;
|
|
|
|
|
|
|
|
|
|
// Store reference to wrapper for fading
|
|
|
|
|
event.target._wrapperDiv = videoBackdrop;
|
|
|
|
|
|
|
|
|
|
// Unmute now if user wants sound.
|
|
|
|
|
if (!STATE.slideshow.isMuted) {
|
|
|
|
|
event.target.unMute();
|
|
|
|
|
event.target.setVolume(40);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (typeof event.target.setPlaybackQuality === 'function') {
|
|
|
|
|
event.target.setPlaybackQuality(quality);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Stop playback if slide was navigated away from
|
|
|
|
|
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
|
|
|
|
const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
|
|
|
|
|
|
|
|
|
|
if (!slide || !slide.classList.contains('active') || document.hidden || (isVideoPlayerOpen && !isVideoPlayerOpen.classList.contains('hide'))) {
|
|
|
|
|
event.target.stopVideo();
|
|
|
|
|
} else {
|
|
|
|
|
if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
|
|
|
|
|
STATE.slideshow.slideInterval.stop();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const timeoutId = setTimeout(() => {
|
|
|
|
|
const isVideoPlayerOpenNow = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
|
|
|
|
|
if (document.hidden || (isVideoPlayerOpenNow && !isVideoPlayerOpenNow.classList.contains('hide')) || !slide.classList.contains('active')) {
|
|
|
|
|
if (slide && slide.classList.contains('active') && !document.hidden && (!isVideoPlayerOpen || isVideoPlayerOpen.classList.contains('hide'))) {
|
|
|
|
|
event.target.playVideo();
|
|
|
|
|
|
|
|
|
|
// Check if it actually started playing after a short delay (handling autoplay blocks)
|
|
|
|
|
const timeoutId = setTimeout(() => {
|
|
|
|
|
// Re-check conditions before processing fallback
|
|
|
|
|
const isVideoPlayerOpenNow = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
|
|
|
|
|
if (document.hidden || (isVideoPlayerOpenNow && !isVideoPlayerOpenNow.classList.contains('hide')) || !slide.classList.contains('active')) {
|
|
|
|
|
console.log(`Navigation detected during autoplay check for ${itemId}, stopping video.`);
|
|
|
|
|
try {
|
|
|
|
|
event.target.stopVideo();
|
|
|
|
|
} catch (e) { console.warn("Error stopping video:", e); }
|
|
|
|
|
} catch (e) { console.warn("Error stopping video in timeout:", e); }
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const state = event.target.getPlayerState();
|
|
|
|
|
if (state !== YT.PlayerState.PLAYING && state !== YT.PlayerState.BUFFERING) {
|
|
|
|
|
console.warn(`Autoplay stalled for ${itemId}, attempting muted fallback`);
|
|
|
|
|
event.target.mute();
|
|
|
|
|
event.target.playVideo();
|
|
|
|
|
}
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
|
|
if (!STATE.slideshow.autoplayTimeouts) STATE.slideshow.autoplayTimeouts = [];
|
|
|
|
|
STATE.slideshow.autoplayTimeouts.push(timeoutId);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
'onStateChange': (event) => {
|
|
|
|
|
if (event.data === YT.PlayerState.PLAYING) {
|
|
|
|
|
if (event.target._wrapperDiv) {
|
|
|
|
|
event.target._wrapperDiv.style.opacity = "1";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (event.data === YT.PlayerState.ENDED) {
|
|
|
|
|
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
|
|
|
|
if (slide && slide.classList.contains('active')) {
|
|
|
|
|
SlideshowManager.nextSlide();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (event.target.getPlayerState() !== YT.PlayerState.PLAYING &&
|
|
|
|
|
event.target.getPlayerState() !== YT.PlayerState.BUFFERING) {
|
|
|
|
|
console.warn(`Autoplay blocked for ${itemId}, attempting muted fallback`);
|
|
|
|
|
event.target.mute();
|
|
|
|
|
event.target.playVideo();
|
|
|
|
|
}
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
|
|
if (!STATE.slideshow.autoplayTimeouts) STATE.slideshow.autoplayTimeouts = [];
|
|
|
|
|
STATE.slideshow.autoplayTimeouts.push(timeoutId);
|
|
|
|
|
|
|
|
|
|
// Pause slideshow timer when video starts if configured
|
|
|
|
|
if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
|
|
|
|
|
STATE.slideshow.slideInterval.stop();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
'onError': (event) => {
|
|
|
|
|
console.warn(`YouTube player error ${event.data} for video ${videoId}`);
|
|
|
|
|
if (CONFIG.waitForTrailerToEnd) {
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
'onStateChange': (event) => {
|
|
|
|
|
// Fade in when playing
|
|
|
|
|
if (event.data === YT.PlayerState.PLAYING) {
|
|
|
|
|
if (event.target._wrapperDiv) {
|
|
|
|
|
event.target._wrapperDiv.style.opacity = "1";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (event.data === YT.PlayerState.ENDED) {
|
|
|
|
|
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
|
|
|
|
if (slide && slide.classList.contains('active')) {
|
|
|
|
|
SlideshowManager.nextSlide();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
'onError': (event) => {
|
|
|
|
|
console.warn(`YouTube player error ${event.data} for video ${videoId}`);
|
|
|
|
|
// Fallback to next slide on error
|
|
|
|
|
if (CONFIG.waitForTrailerToEnd) {
|
|
|
|
|
SlideshowManager.nextSlide();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
} // end non-Safari
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 2. Check for local video trailers in MediaSources if yt is not available
|
|
|
|
|
} else if (!isYoutube) {
|
|
|
|
|
} else if (!isYoutube && shouldCreateVideo) {
|
|
|
|
|
isVideo = true;
|
|
|
|
|
|
|
|
|
|
const videoSrc = (typeof trailerUrl === 'object' ? trailerUrl.url : trailerUrl);
|
|
|
|
|
@@ -1991,7 +1901,6 @@ const SlideCreator = {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
videoAttributes.muted = "";
|
|
|
|
|
videoAttributes.playsinline = ""; // again Safari needs extra treatment...
|
|
|
|
|
|
|
|
|
|
videoBackdrop = SlideUtils.createElement("video", videoAttributes);
|
|
|
|
|
videoBackdrop.volume = 0.4;
|
|
|
|
|
@@ -2023,10 +1932,7 @@ const SlideCreator = {
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
videoBackdrop.addEventListener('error', (event) => {
|
|
|
|
|
const src = event.target.src || event.target.getAttribute('data-src') || 'unknown';
|
|
|
|
|
const errCode = event.target.error ? event.target.error.code : 'n/a';
|
|
|
|
|
const errMsg = event.target.error ? event.target.error.message : 'n/a';
|
|
|
|
|
console.warn(`Local video error for item ${itemId} | code=${errCode} | msg=${errMsg} | url=${src}`);
|
|
|
|
|
console.warn(`Local video error for item ${itemId}`);
|
|
|
|
|
const slide = event.target.closest('.slide');
|
|
|
|
|
if (slide && slide.classList.contains('active')) {
|
|
|
|
|
SlideshowManager.nextSlide();
|
|
|
|
|
@@ -2565,58 +2471,42 @@ const SlideshowManager = {
|
|
|
|
|
if (videoBackdrop.tagName === 'VIDEO') {
|
|
|
|
|
// Restore src from data-src if it was deactivated to release connections
|
|
|
|
|
const lazySrc = videoBackdrop.getAttribute('data-src');
|
|
|
|
|
const isFreshLoad = lazySrc && !videoBackdrop.src;
|
|
|
|
|
if (lazySrc && !videoBackdrop.src) {
|
|
|
|
|
videoBackdrop.src = lazySrc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
videoBackdrop.currentTime = 0;
|
|
|
|
|
|
|
|
|
|
videoBackdrop.muted = STATE.slideshow.isMuted;
|
|
|
|
|
if (!STATE.slideshow.isMuted) {
|
|
|
|
|
videoBackdrop.volume = 0.4;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const doPlay = () => {
|
|
|
|
|
if (!currentSlide.classList.contains('active')) return;
|
|
|
|
|
videoBackdrop.play().catch(e => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
if (videoBackdrop.paused && currentSlide.classList.contains('active')) {
|
|
|
|
|
console.warn(`Autoplay blocked for ${currentItemId}, attempting muted fallback`);
|
|
|
|
|
videoBackdrop.muted = true;
|
|
|
|
|
videoBackdrop.play().catch(err => console.error("Muted fallback failed", err));
|
|
|
|
|
}
|
|
|
|
|
}, 1000);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (isFreshLoad) {
|
|
|
|
|
// Safari: set src, then wait for loadedmetadata before seeking/playing
|
|
|
|
|
videoBackdrop.src = lazySrc;
|
|
|
|
|
videoBackdrop.load();
|
|
|
|
|
videoBackdrop.addEventListener('loadedmetadata', () => {
|
|
|
|
|
videoBackdrop.currentTime = 0;
|
|
|
|
|
doPlay();
|
|
|
|
|
}, { once: true });
|
|
|
|
|
} else {
|
|
|
|
|
// src already set (e.g. paused slide resuming)
|
|
|
|
|
videoBackdrop.currentTime = 0;
|
|
|
|
|
doPlay();
|
|
|
|
|
}
|
|
|
|
|
videoBackdrop.play().catch(e => {
|
|
|
|
|
// Check if it actually started playing after a short delay (handling autoplay blocks)
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
if (videoBackdrop.paused && currentSlide.classList.contains('active')) {
|
|
|
|
|
console.warn(`Autoplay blocked for ${currentItemId}, attempting muted fallback`);
|
|
|
|
|
videoBackdrop.muted = true;
|
|
|
|
|
videoBackdrop.play().catch(err => console.error("Muted fallback failed", err));
|
|
|
|
|
}
|
|
|
|
|
}, 1000);
|
|
|
|
|
});
|
|
|
|
|
} else if (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
|
|
|
|
|
const player = STATE.slideshow.videoPlayers[currentItemId];
|
|
|
|
|
if (player && typeof player.loadVideoById === 'function' && player._videoId) {
|
|
|
|
|
// Use loadVideoById to enforce start and end times
|
|
|
|
|
// load always starts muted first, then unmute if needed
|
|
|
|
|
player.loadVideoById({
|
|
|
|
|
videoId: player._videoId,
|
|
|
|
|
startSeconds: player._startTime || 0,
|
|
|
|
|
endSeconds: player._endTime
|
|
|
|
|
});
|
|
|
|
|
player.mute();
|
|
|
|
|
if (!STATE.slideshow.isMuted) {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
// Only unmute if still on the same slide
|
|
|
|
|
if (currentSlide.classList.contains('active')) {
|
|
|
|
|
player.unMute();
|
|
|
|
|
player.setVolume(40);
|
|
|
|
|
}
|
|
|
|
|
}, 600);
|
|
|
|
|
|
|
|
|
|
if (STATE.slideshow.isMuted) {
|
|
|
|
|
player.mute();
|
|
|
|
|
} else {
|
|
|
|
|
player.unMute();
|
|
|
|
|
player.setVolume(40);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Check if playback successfully started, otherwise fallback to muted
|
|
|
|
|
@@ -2690,7 +2580,7 @@ const SlideshowManager = {
|
|
|
|
|
STATE.slideshow.isTransitioning = false;
|
|
|
|
|
|
|
|
|
|
if (previousVisibleSlide) {
|
|
|
|
|
const enableAnimations = MediaBarEnhancedSettingsManager.getSetting('slideAnimations', CONFIG.slideAnimationEnabled);
|
|
|
|
|
const enableAnimations = MediaBarEnhancedSettingsManager.getSetting('slideAnimations', CONFIG.slideAnimationEnabled) && !isLowPowerDevice();
|
|
|
|
|
if (enableAnimations) {
|
|
|
|
|
const prevBackdrop = previousVisibleSlide.querySelector(".backdrop");
|
|
|
|
|
const prevLogo = previousVisibleSlide.querySelector(".logo");
|
|
|
|
|
@@ -2731,7 +2621,9 @@ const SlideshowManager = {
|
|
|
|
|
*/
|
|
|
|
|
async preloadAdjacentSlides(currentIndex) {
|
|
|
|
|
const totalItems = STATE.slideshow.totalItems;
|
|
|
|
|
const preloadCount = Math.min(Math.max(CONFIG.preloadCount || 1, 1), 5);
|
|
|
|
|
let preloadCount = Math.min(Math.max(CONFIG.preloadCount || 1, 1), 5);
|
|
|
|
|
if (isLowPowerDevice()) preloadCount = 1; // Strict limit for TVs
|
|
|
|
|
|
|
|
|
|
const preloadedIds = new Set();
|
|
|
|
|
|
|
|
|
|
// Preload next slides
|
|
|
|
|
|