Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
cc861f4263 | ||
|
|
10e6cdc4a2 | ||
|
|
a8c7faab6b |
@@ -12,7 +12,7 @@
|
|||||||
<!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
|
<!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
|
||||||
<Title>Jellyfin Media Bar Enhanced Plugin</Title>
|
<Title>Jellyfin Media Bar Enhanced Plugin</Title>
|
||||||
<Authors>CodeDevMLH</Authors>
|
<Authors>CodeDevMLH</Authors>
|
||||||
<Version>1.7.0.3</Version>
|
<Version>1.7.0.4</Version>
|
||||||
<RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl>
|
<RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl>
|
||||||
</PropertyGroup>
|
</PropertyGroup>
|
||||||
|
|
||||||
|
|||||||
@@ -1736,9 +1736,55 @@ const SlideCreator = {
|
|||||||
// Create a wrapper for opacity transition
|
// Create a wrapper for opacity transition
|
||||||
videoBackdrop = SlideUtils.createElement("div", {
|
videoBackdrop = SlideUtils.createElement("div", {
|
||||||
className: `backdrop video-backdrop ${videoClass}`,
|
className: `backdrop video-backdrop ${videoClass}`,
|
||||||
style: "opacity: 0; transition: opacity 1.2s ease-in-out;" // Start interrupted/transparent
|
style: "opacity: 0; transition: opacity 1.2s ease-in-out;"
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
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)}`;
|
||||||
|
|
||||||
|
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';
|
||||||
|
|
||||||
|
// 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(); }
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(`🍎 Safari detected — using plain iframe embed for YouTube video ${videoId}`);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// ── Non-Safari: YouTube IFrame API ──────────────────────────────────────
|
||||||
const ytPlayerDiv = SlideUtils.createElement("div", {
|
const ytPlayerDiv = SlideUtils.createElement("div", {
|
||||||
id: `youtube-player-${itemId}`,
|
id: `youtube-player-${itemId}`,
|
||||||
style: "width: 100%; height: 100%;"
|
style: "width: 100%; height: 100%;"
|
||||||
@@ -1746,9 +1792,7 @@ const SlideCreator = {
|
|||||||
|
|
||||||
videoBackdrop.appendChild(ytPlayerDiv);
|
videoBackdrop.appendChild(ytPlayerDiv);
|
||||||
|
|
||||||
// Initialize YouTube Player
|
|
||||||
SlideUtils.loadYouTubeIframeAPI().then(() => {
|
SlideUtils.loadYouTubeIframeAPI().then(() => {
|
||||||
// Fetch SponsorBlock data
|
|
||||||
ApiUtils.fetchSponsorBlockData(videoId).then(segments => {
|
ApiUtils.fetchSponsorBlockData(videoId).then(segments => {
|
||||||
const playerVars = {
|
const playerVars = {
|
||||||
autoplay: 1,
|
autoplay: 1,
|
||||||
@@ -1772,8 +1816,7 @@ const SlideCreator = {
|
|||||||
quality = 'hd720';
|
quality = 'hd720';
|
||||||
} else if (CONFIG.preferredVideoQuality === '1080p') {
|
} else if (CONFIG.preferredVideoQuality === '1080p') {
|
||||||
quality = 'hd1080';
|
quality = 'hd1080';
|
||||||
} else { // Auto or fallback
|
} else {
|
||||||
// If screen is wider than 1920, prefer highres, otherwise 1080p
|
|
||||||
quality = window.screen.width > 1920 ? 'highres' : 'hd1080';
|
quality = window.screen.width > 1920 ? 'highres' : 'hd1080';
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1829,13 +1872,10 @@ const SlideCreator = {
|
|||||||
if (!slide || !slide.classList.contains('active') || document.hidden || (isVideoPlayerOpen && !isVideoPlayerOpen.classList.contains('hide'))) {
|
if (!slide || !slide.classList.contains('active') || document.hidden || (isVideoPlayerOpen && !isVideoPlayerOpen.classList.contains('hide'))) {
|
||||||
event.target.stopVideo();
|
event.target.stopVideo();
|
||||||
} else {
|
} else {
|
||||||
// Pause slideshow timer when video starts if configured
|
|
||||||
if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
|
if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
|
||||||
STATE.slideshow.slideInterval.stop();
|
STATE.slideshow.slideInterval.stop();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Safety check after 1s: handle navigation-away during the window,
|
|
||||||
// and fallback to muted play if autoplay failed for any reason.
|
|
||||||
const timeoutId = setTimeout(() => {
|
const timeoutId = setTimeout(() => {
|
||||||
const isVideoPlayerOpenNow = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
|
const isVideoPlayerOpenNow = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
|
||||||
if (document.hidden || (isVideoPlayerOpenNow && !isVideoPlayerOpenNow.classList.contains('hide')) || !slide.classList.contains('active')) {
|
if (document.hidden || (isVideoPlayerOpenNow && !isVideoPlayerOpenNow.classList.contains('hide')) || !slide.classList.contains('active')) {
|
||||||
@@ -1846,7 +1886,6 @@ const SlideCreator = {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// If somehow not playing/buffering yet, force muted fallback
|
|
||||||
const state = event.target.getPlayerState();
|
const state = event.target.getPlayerState();
|
||||||
if (state !== YT.PlayerState.PLAYING && state !== YT.PlayerState.BUFFERING) {
|
if (state !== YT.PlayerState.PLAYING && state !== YT.PlayerState.BUFFERING) {
|
||||||
console.warn(`Autoplay stalled for ${itemId}, attempting muted fallback`);
|
console.warn(`Autoplay stalled for ${itemId}, attempting muted fallback`);
|
||||||
@@ -1860,7 +1899,6 @@ const SlideCreator = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
'onStateChange': (event) => {
|
'onStateChange': (event) => {
|
||||||
// Fade in when playing
|
|
||||||
if (event.data === YT.PlayerState.PLAYING) {
|
if (event.data === YT.PlayerState.PLAYING) {
|
||||||
if (event.target._wrapperDiv) {
|
if (event.target._wrapperDiv) {
|
||||||
event.target._wrapperDiv.style.opacity = "1";
|
event.target._wrapperDiv.style.opacity = "1";
|
||||||
@@ -1876,7 +1914,6 @@ const SlideCreator = {
|
|||||||
},
|
},
|
||||||
'onError': (event) => {
|
'onError': (event) => {
|
||||||
console.warn(`YouTube player error ${event.data} for video ${videoId}`);
|
console.warn(`YouTube player error ${event.data} for video ${videoId}`);
|
||||||
// Fallback to next slide on error
|
|
||||||
if (CONFIG.waitForTrailerToEnd) {
|
if (CONFIG.waitForTrailerToEnd) {
|
||||||
SlideshowManager.nextSlide();
|
SlideshowManager.nextSlide();
|
||||||
}
|
}
|
||||||
@@ -1885,6 +1922,7 @@ const SlideCreator = {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
} // end non-Safari
|
||||||
|
|
||||||
// 2. Check for local video trailers in MediaSources if yt is not available
|
// 2. Check for local video trailers in MediaSources if yt is not available
|
||||||
} else if (!isYoutube) {
|
} else if (!isYoutube) {
|
||||||
|
|||||||
@@ -9,12 +9,12 @@
|
|||||||
"imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
|
"imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
|
||||||
"versions": [
|
"versions": [
|
||||||
{
|
{
|
||||||
"version": "1.7.0.3",
|
"version": "1.7.0.4",
|
||||||
"changelog": "- Add YouTube no-cookie host and referrer policy for iframe security to fix playback issues on iOS/MacOS",
|
"changelog": "- Add YouTube no-cookie host and referrer policy for iframe security to fix playback issues on iOS/MacOS",
|
||||||
"targetAbi": "10.11.0.0",
|
"targetAbi": "10.11.0.0",
|
||||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.0.3/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.7.0.4/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||||
"checksum": "b4f35ff869129d43c075948e5430b199",
|
"checksum": "a8f3cbea12cdce5902212d4ca753eb83",
|
||||||
"timestamp": "2026-03-05T23:23:07Z"
|
"timestamp": "2026-03-05T23:35:22Z"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"version": "1.6.6.4",
|
"version": "1.6.6.4",
|
||||||
|
|||||||
Reference in New Issue
Block a user