Compare commits
22 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
9896044988 | ||
|
|
93e91e2e60 | ||
|
|
b613b028d0 | ||
|
|
9906784845 | ||
|
|
009a3c4720 | ||
|
|
595056230a | ||
|
|
b18060dfd7 | ||
|
|
ebb2af9d24 | ||
|
|
743af20b8e | ||
|
|
9844b186d7 | ||
|
|
104b76aa41 | ||
|
|
7493c8fa93 | ||
|
|
77c03157a1 | ||
|
|
a7929e1ff6 | ||
|
|
c78e07de62 | ||
|
|
a90f805ea8 | ||
|
|
ccba1857e1 | ||
|
|
ff56c9370b | ||
|
|
162600c43f | ||
|
|
a21549af47 | ||
|
|
1b319ade40 | ||
|
|
75757d67e7 |
@@ -36,6 +36,7 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
|
|||||||
public bool EnableSeasonalContent { get; set; } = false;
|
public bool EnableSeasonalContent { get; set; } = false;
|
||||||
public bool IsEnabled { get; set; } = true;
|
public bool IsEnabled { get; set; } = true;
|
||||||
public bool EnableClientSideSettings { get; set; } = false;
|
public bool EnableClientSideSettings { get; set; } = false;
|
||||||
|
public bool ApplyLimitsToCustomIds { get; set; } = false;
|
||||||
public string SortBy { get; set; } = "Random";
|
public string SortBy { get; set; } = "Random";
|
||||||
public string SortOrder { get; set; } = "Ascending";
|
public string SortOrder { get; set; } = "Ascending";
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -107,12 +107,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||||
<label>
|
<label>
|
||||||
<input is="emby-checkbox" type="checkbox" id="EnableSeasonalContent"
|
<input is="emby-checkbox" type="checkbox" id="ApplyLimitsToCustomIds"
|
||||||
name="EnableSeasonalContent" />
|
name="ApplyLimitsToCustomIds" />
|
||||||
<span>Enable Seasonal Content Mode</span>
|
<span>Apply Limits to Custom IDs</span>
|
||||||
</label>
|
</label>
|
||||||
<div class="fieldDescription">Enable this to define time-based lists in the field below.
|
<div class="fieldDescription">If enabled, the Max Items limit (Advanced → Content Limits) will also apply to Custom Media IDs and Collections. By default, custom lists are not limited.</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="inputContainer">
|
<div class="inputContainer">
|
||||||
<label class="inputLabel inputLabelUnfocused" for="CustomMediaIds">Media/Collection/Playlist
|
<label class="inputLabel inputLabelUnfocused" for="CustomMediaIds">Media/Collection/Playlist
|
||||||
@@ -411,7 +410,7 @@
|
|||||||
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
|
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
|
||||||
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
|
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
|
||||||
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
|
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
|
||||||
'PreferLocalTrailers'
|
'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections'
|
||||||
];
|
];
|
||||||
|
|
||||||
keys.forEach(function (key) {
|
keys.forEach(function (key) {
|
||||||
@@ -478,7 +477,7 @@
|
|||||||
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
|
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
|
||||||
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
|
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
|
||||||
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
|
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
|
||||||
'PreferLocalTrailers'
|
'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections'
|
||||||
];
|
];
|
||||||
|
|
||||||
keys.forEach(function (key) {
|
keys.forEach(function (key) {
|
||||||
|
|||||||
@@ -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.6.1.2</Version>
|
<Version>1.6.1.8</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>
|
||||||
|
|
||||||
|
|||||||
@@ -175,6 +175,7 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#slides-container[style*="display: none"],
|
#slides-container[style*="display: none"],
|
||||||
@@ -996,13 +997,6 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-tv .video-backdrop {
|
.layout-tv .backdrop-container{
|
||||||
mask-image: linear-gradient(to top,
|
top: -5%;
|
||||||
#fff0 2%,
|
|
||||||
rgb(0 0 0 / 0.5) 6%,
|
|
||||||
#000000 8%);
|
|
||||||
-webkit-mask-image: linear-gradient(to top,
|
|
||||||
#fff0 2%,
|
|
||||||
rgb(0 0 0 / 0.5) 6%,
|
|
||||||
#000000 8%);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -57,6 +57,8 @@ const CONFIG = {
|
|||||||
enableClientSideSettings: false,
|
enableClientSideSettings: false,
|
||||||
sortBy: "Random",
|
sortBy: "Random",
|
||||||
sortOrder: "Ascending",
|
sortOrder: "Ascending",
|
||||||
|
applyLimitsToCustomIds: false,
|
||||||
|
seasonalSections: "[]",
|
||||||
};
|
};
|
||||||
|
|
||||||
// State management
|
// State management
|
||||||
@@ -611,7 +613,8 @@ const SlideUtils = {
|
|||||||
if (!container) {
|
if (!container) {
|
||||||
container = this.createElement("div", {
|
container = this.createElement("div", {
|
||||||
id: "slides-container",
|
id: "slides-container",
|
||||||
className: "noautofocus"
|
className: "noautofocus",
|
||||||
|
tabIndex: "-1"
|
||||||
});
|
});
|
||||||
document.body.appendChild(container);
|
document.body.appendChild(container);
|
||||||
}
|
}
|
||||||
@@ -1432,16 +1435,19 @@ const VisibilityObserver = {
|
|||||||
|
|
||||||
// If a full screen video player is active, hide slideshow and stop playback
|
// If a full screen video player is active, hide slideshow and stop playback
|
||||||
if ((videoPlayer && !videoPlayer.classList.contains('hide')) || (trailerPlayer && !trailerPlayer.classList.contains('hide'))) {
|
if ((videoPlayer && !videoPlayer.classList.contains('hide')) || (trailerPlayer && !trailerPlayer.classList.contains('hide'))) {
|
||||||
const container = document.getElementById("slides-container");
|
if (this._lastVisibleState !== 'player-active') {
|
||||||
if (container) {
|
this._lastVisibleState = 'player-active';
|
||||||
container.style.display = "none";
|
const container = document.getElementById("slides-container");
|
||||||
container.style.visibility = "hidden";
|
if (container) {
|
||||||
container.style.pointerEvents = "none";
|
container.style.display = "none";
|
||||||
|
container.style.visibility = "hidden";
|
||||||
|
container.style.pointerEvents = "none";
|
||||||
|
}
|
||||||
|
if (STATE.slideshow.slideInterval) {
|
||||||
|
STATE.slideshow.slideInterval.stop();
|
||||||
|
}
|
||||||
|
SlideshowManager.stopAllPlayback();
|
||||||
}
|
}
|
||||||
if (STATE.slideshow.slideInterval) {
|
|
||||||
STATE.slideshow.slideInterval.stop();
|
|
||||||
}
|
|
||||||
SlideshowManager.stopAllPlayback();
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1456,20 +1462,27 @@ const VisibilityObserver = {
|
|||||||
activeTab &&
|
activeTab &&
|
||||||
activeTab.getAttribute("data-index") === "0";
|
activeTab.getAttribute("data-index") === "0";
|
||||||
|
|
||||||
container.style.display = isVisible ? "block" : "none";
|
const newState = isVisible ? 'visible' : 'hidden';
|
||||||
container.style.visibility = isVisible ? "visible" : "hidden";
|
|
||||||
container.style.pointerEvents = isVisible ? "auto" : "none";
|
|
||||||
|
|
||||||
if (isVisible) {
|
// Only update DOM and trigger actions when state actually changes
|
||||||
if (STATE.slideshow.slideInterval && !STATE.slideshow.isPaused) {
|
if (this._lastVisibleState !== newState) {
|
||||||
STATE.slideshow.slideInterval.start();
|
this._lastVisibleState = newState;
|
||||||
SlideshowManager.resumeActivePlayback();
|
|
||||||
|
container.style.display = isVisible ? "block" : "none";
|
||||||
|
container.style.visibility = isVisible ? "visible" : "hidden";
|
||||||
|
container.style.pointerEvents = isVisible ? "auto" : "none";
|
||||||
|
|
||||||
|
if (isVisible) {
|
||||||
|
if (STATE.slideshow.slideInterval && !STATE.slideshow.isPaused) {
|
||||||
|
STATE.slideshow.slideInterval.start();
|
||||||
|
SlideshowManager.resumeActivePlayback();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (STATE.slideshow.slideInterval) {
|
||||||
|
STATE.slideshow.slideInterval.stop();
|
||||||
|
}
|
||||||
|
SlideshowManager.stopAllPlayback();
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
if (STATE.slideshow.slideInterval) {
|
|
||||||
STATE.slideshow.slideInterval.stop();
|
|
||||||
}
|
|
||||||
SlideshowManager.stopAllPlayback();
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -1477,7 +1490,13 @@ const VisibilityObserver = {
|
|||||||
* Initializes visibility observer
|
* Initializes visibility observer
|
||||||
*/
|
*/
|
||||||
init() {
|
init() {
|
||||||
|
// MARK: Mark
|
||||||
const observer = new MutationObserver(() => this.updateVisibility());
|
const observer = new MutationObserver(() => this.updateVisibility());
|
||||||
|
// let debounceTimer = null;
|
||||||
|
// const observer = new MutationObserver(() => {
|
||||||
|
// if (debounceTimer) clearTimeout(debounceTimer);
|
||||||
|
// debounceTimer = setTimeout(() => this.updateVisibility(), 250);
|
||||||
|
// });
|
||||||
observer.observe(document.body, { childList: true, subtree: true });
|
observer.observe(document.body, { childList: true, subtree: true });
|
||||||
|
|
||||||
document.body.addEventListener("click", () => this.updateVisibility());
|
document.body.addEventListener("click", () => this.updateVisibility());
|
||||||
@@ -1696,6 +1715,13 @@ const SlideCreator = {
|
|||||||
playerVars: playerVars,
|
playerVars: playerVars,
|
||||||
events: {
|
events: {
|
||||||
'onReady': (event) => {
|
'onReady': (event) => {
|
||||||
|
// Prevent iframe from stealing focus (critical for TV mode)
|
||||||
|
const iframe = event.target.getIframe();
|
||||||
|
if (iframe) {
|
||||||
|
iframe.setAttribute('tabindex', '-1');
|
||||||
|
iframe.setAttribute('inert', '');
|
||||||
|
}
|
||||||
|
|
||||||
// Store start/end time and videoId for later use
|
// Store start/end time and videoId for later use
|
||||||
event.target._startTime = playerVars.start || 0;
|
event.target._startTime = playerVars.start || 0;
|
||||||
event.target._endTime = playerVars.end || undefined;
|
event.target._endTime = playerVars.end || undefined;
|
||||||
@@ -1757,14 +1783,11 @@ const SlideCreator = {
|
|||||||
},
|
},
|
||||||
'onStateChange': (event) => {
|
'onStateChange': (event) => {
|
||||||
if (event.data === YT.PlayerState.ENDED) {
|
if (event.data === YT.PlayerState.ENDED) {
|
||||||
if (CONFIG.waitForTrailerToEnd) {
|
|
||||||
SlideshowManager.nextSlide();
|
SlideshowManager.nextSlide();
|
||||||
} else {
|
|
||||||
event.target.playVideo(); // Loop if not waiting for end if trailer is shorter than slide duration
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'onError': () => {
|
'onError': (event) => {
|
||||||
|
console.warn(`YouTube player error ${event.data} for video ${videoId}`);
|
||||||
// Fallback to next slide on error
|
// Fallback to next slide on error
|
||||||
if (CONFIG.waitForTrailerToEnd) {
|
if (CONFIG.waitForTrailerToEnd) {
|
||||||
SlideshowManager.nextSlide();
|
SlideshowManager.nextSlide();
|
||||||
@@ -1818,9 +1841,7 @@ const SlideCreator = {
|
|||||||
});
|
});
|
||||||
|
|
||||||
backdrop.addEventListener('ended', () => {
|
backdrop.addEventListener('ended', () => {
|
||||||
if (CONFIG.waitForTrailerToEnd) {
|
|
||||||
SlideshowManager.nextSlide();
|
SlideshowManager.nextSlide();
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
backdrop.addEventListener('error', () => {
|
backdrop.addEventListener('error', () => {
|
||||||
@@ -2293,109 +2314,27 @@ const SlideshowManager = {
|
|||||||
|
|
||||||
currentSlide.classList.add("active");
|
currentSlide.classList.add("active");
|
||||||
|
|
||||||
if (focusSelector) {
|
// Restore focus for TV mode navigation continuity
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
if (focusSelector) {
|
||||||
const target = currentSlide.querySelector(focusSelector);
|
const target = currentSlide.querySelector(focusSelector);
|
||||||
if (target) {
|
if (target) {
|
||||||
requestAnimationFrame(() => {
|
target.focus();
|
||||||
target.focus();
|
return;
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// Always ensure container has focus in TV mode to keep keyboard navigation working
|
||||||
// Manage Video Playback: Stop others, Play current
|
const isTvMode = (window.layoutManager && window.layoutManager.tv) ||
|
||||||
|
document.documentElement.classList.contains('layout-tv') ||
|
||||||
// 1. Pause all other YouTube players
|
document.body.classList.contains('layout-tv');
|
||||||
if (STATE.slideshow.videoPlayers) {
|
if (isTvMode) {
|
||||||
Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
|
container.focus({ preventScroll: true });
|
||||||
if (id !== currentItemId) {
|
|
||||||
const p = STATE.slideshow.videoPlayers[id];
|
|
||||||
if (p) {
|
|
||||||
try {
|
|
||||||
if (typeof p.pauseVideo === 'function') {
|
|
||||||
p.pauseVideo();
|
|
||||||
} else if (p.tagName === 'VIDEO') {
|
|
||||||
p.pause();
|
|
||||||
}
|
|
||||||
} catch (e) { console.warn("Error pausing player", id, e); }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2. Pause all other HTML5 videos e.g. local trailers
|
|
||||||
document.querySelectorAll('video').forEach(video => {
|
|
||||||
const slideParent = video.closest('.slide');
|
|
||||||
if (slideParent && slideParent.dataset.itemId !== currentItemId) {
|
|
||||||
try {
|
|
||||||
video.pause();
|
|
||||||
} catch (e) {}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 3. Play and Reset current video
|
// Manage Video Playback: Stop others, Play current
|
||||||
const videoBackdrop = currentSlide.querySelector('.video-backdrop');
|
this.pauseOtherVideos(currentItemId);
|
||||||
|
this.playCurrentVideo(currentSlide, currentItemId);
|
||||||
// Update mute button visibility
|
|
||||||
const muteButton = document.querySelector('.mute-button');
|
|
||||||
if (muteButton) {
|
|
||||||
const hasVideo = !!videoBackdrop;
|
|
||||||
muteButton.style.display = hasVideo ? 'block' : 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (videoBackdrop) {
|
|
||||||
if (videoBackdrop.tagName === 'VIDEO') {
|
|
||||||
videoBackdrop.currentTime = 0;
|
|
||||||
|
|
||||||
videoBackdrop.muted = STATE.slideshow.isMuted;
|
|
||||||
if (!STATE.slideshow.isMuted) {
|
|
||||||
videoBackdrop.volume = 0.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
videoBackdrop.play().catch(e => {
|
|
||||||
// Check if it actually started playing after a short delay (handling autoplay blocks)
|
|
||||||
setTimeout(() => {
|
|
||||||
if (videoBackdrop.paused) {
|
|
||||||
console.warn(`Autoplay blocked for ${itemId}, 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
|
|
||||||
player.loadVideoById({
|
|
||||||
videoId: player._videoId,
|
|
||||||
startSeconds: player._startTime || 0,
|
|
||||||
endSeconds: player._endTime
|
|
||||||
});
|
|
||||||
|
|
||||||
if (STATE.slideshow.isMuted) {
|
|
||||||
player.mute();
|
|
||||||
} else {
|
|
||||||
player.unMute();
|
|
||||||
player.setVolume(40);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if playback successfully started, otherwise fallback to muted
|
|
||||||
setTimeout(() => {
|
|
||||||
if (player.getPlayerState &&
|
|
||||||
player.getPlayerState() !== YT.PlayerState.PLAYING &&
|
|
||||||
player.getPlayerState() !== YT.PlayerState.BUFFERING) {
|
|
||||||
console.log("YouTube loadVideoById didn't start playback, retrying muted...");
|
|
||||||
player.mute();
|
|
||||||
player.playVideo();
|
|
||||||
}
|
|
||||||
}, 1000);
|
|
||||||
} else if (player && typeof player.seekTo === 'function') {
|
|
||||||
// Fallback if loadVideoById is not available or videoId missing
|
|
||||||
const startTime = player._startTime || 0;
|
|
||||||
player.seekTo(startTime);
|
|
||||||
player.playVideo();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const enableAnimations = MediaBarEnhancedSettingsManager.getSetting('slideAnimations', CONFIG.slideAnimationEnabled);
|
const enableAnimations = MediaBarEnhancedSettingsManager.getSetting('slideAnimations', CONFIG.slideAnimationEnabled);
|
||||||
|
|
||||||
@@ -2404,7 +2343,8 @@ const SlideshowManager = {
|
|||||||
if (backdrop && !backdrop.classList.contains("video-backdrop")) {
|
if (backdrop && !backdrop.classList.contains("video-backdrop")) {
|
||||||
backdrop.classList.add("animate");
|
backdrop.classList.add("animate");
|
||||||
}
|
}
|
||||||
currentSlide.querySelector(".logo").classList.add("animate");
|
const logo = currentSlide.querySelector(".logo");
|
||||||
|
if (logo) logo.classList.add("animate");
|
||||||
}
|
}
|
||||||
|
|
||||||
STATE.slideshow.currentSlideIndex = index;
|
STATE.slideshow.currentSlideIndex = index;
|
||||||
@@ -2529,6 +2469,7 @@ const SlideshowManager = {
|
|||||||
pruneSlideCache() {
|
pruneSlideCache() {
|
||||||
const currentIndex = STATE.slideshow.currentSlideIndex;
|
const currentIndex = STATE.slideshow.currentSlideIndex;
|
||||||
const keepRange = 5;
|
const keepRange = 5;
|
||||||
|
let prunedAny = false;
|
||||||
|
|
||||||
Object.keys(STATE.slideshow.createdSlides).forEach((itemId) => {
|
Object.keys(STATE.slideshow.createdSlides).forEach((itemId) => {
|
||||||
const index = STATE.slideshow.itemIds.indexOf(itemId);
|
const index = STATE.slideshow.itemIds.indexOf(itemId);
|
||||||
@@ -2560,10 +2501,27 @@ const SlideshowManager = {
|
|||||||
if (slide) slide.remove();
|
if (slide) slide.remove();
|
||||||
|
|
||||||
delete STATE.slideshow.createdSlides[itemId];
|
delete STATE.slideshow.createdSlides[itemId];
|
||||||
|
prunedAny = true;
|
||||||
|
|
||||||
console.log(`Pruned slide ${itemId} at distance ${distance} from view`);
|
console.log(`Pruned slide ${itemId} at distance ${distance} from view`);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// After pruning, restore focus to container in TV mode
|
||||||
|
if (prunedAny) {
|
||||||
|
const isTvMode = (window.layoutManager && window.layoutManager.tv) ||
|
||||||
|
document.documentElement.classList.contains('layout-tv') ||
|
||||||
|
document.body.classList.contains('layout-tv');
|
||||||
|
if (isTvMode) {
|
||||||
|
// Use setTimeout to execute AFTER Jellyfin's focus manager processes the iframe removal
|
||||||
|
setTimeout(() => {
|
||||||
|
const container = document.getElementById("slides-container");
|
||||||
|
if (container && container.style.display !== 'none') {
|
||||||
|
container.focus({ preventScroll: true });
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleMute() {
|
toggleMute() {
|
||||||
@@ -2682,6 +2640,114 @@ const SlideshowManager = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pauses all video players except the one with the given item ID
|
||||||
|
* @param {string} excludeItemId - Item ID to exclude from pausing
|
||||||
|
*/
|
||||||
|
pauseOtherVideos(excludeItemId) {
|
||||||
|
// Pause YouTube players
|
||||||
|
if (STATE.slideshow.videoPlayers) {
|
||||||
|
Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
|
||||||
|
if (id !== excludeItemId) {
|
||||||
|
const p = STATE.slideshow.videoPlayers[id];
|
||||||
|
if (p) {
|
||||||
|
try {
|
||||||
|
if (typeof p.pauseVideo === 'function') {
|
||||||
|
p.pauseVideo();
|
||||||
|
if (typeof p.mute === 'function') {
|
||||||
|
p.mute();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (p.tagName === 'VIDEO') {
|
||||||
|
p.pause();
|
||||||
|
p.muted = true;
|
||||||
|
}
|
||||||
|
} catch (e) { console.warn("Error pausing player", id, e); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// Pause HTML5 videos
|
||||||
|
document.querySelectorAll('video').forEach(video => {
|
||||||
|
const slideParent = video.closest('.slide');
|
||||||
|
if (slideParent && slideParent.dataset.itemId !== excludeItemId) {
|
||||||
|
try {
|
||||||
|
video.pause();
|
||||||
|
video.muted = true;
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Plays the video backdrop on the given slide and updates mute button visibility
|
||||||
|
* @param {Element} slide - The slide DOM element
|
||||||
|
* @param {string} itemId - The item ID of the slide
|
||||||
|
* @returns {boolean} Whether a video was found and playback attempted
|
||||||
|
*/
|
||||||
|
playCurrentVideo(slide, itemId) {
|
||||||
|
const videoBackdrop = slide.querySelector('.video-backdrop');
|
||||||
|
|
||||||
|
// Update mute button visibility
|
||||||
|
const muteButton = document.querySelector('.mute-button');
|
||||||
|
if (muteButton) {
|
||||||
|
muteButton.style.display = videoBackdrop ? 'block' : 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!videoBackdrop) return false;
|
||||||
|
|
||||||
|
if (videoBackdrop.tagName === 'VIDEO') {
|
||||||
|
videoBackdrop.currentTime = 0;
|
||||||
|
videoBackdrop.muted = STATE.slideshow.isMuted;
|
||||||
|
if (!STATE.slideshow.isMuted) videoBackdrop.volume = 0.4;
|
||||||
|
|
||||||
|
videoBackdrop.play().catch(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (videoBackdrop.paused) {
|
||||||
|
console.warn(`Autoplay blocked for ${itemId}, attempting muted fallback`);
|
||||||
|
videoBackdrop.muted = true;
|
||||||
|
videoBackdrop.play().catch(err => console.error("Muted fallback failed", err));
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// YouTube player
|
||||||
|
const player = STATE.slideshow.videoPlayers?.[itemId];
|
||||||
|
if (player && typeof player.loadVideoById === 'function' && player._videoId) {
|
||||||
|
player.loadVideoById({
|
||||||
|
videoId: player._videoId,
|
||||||
|
startSeconds: player._startTime || 0,
|
||||||
|
endSeconds: player._endTime
|
||||||
|
});
|
||||||
|
|
||||||
|
if (STATE.slideshow.isMuted) {
|
||||||
|
player.mute();
|
||||||
|
} else {
|
||||||
|
player.unMute();
|
||||||
|
player.setVolume(40);
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
if (player.getPlayerState &&
|
||||||
|
player.getPlayerState() !== YT.PlayerState.PLAYING &&
|
||||||
|
player.getPlayerState() !== YT.PlayerState.BUFFERING) {
|
||||||
|
console.log("YouTube loadVideoById didn't start playback, retrying muted...");
|
||||||
|
player.mute();
|
||||||
|
player.playVideo();
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
return true;
|
||||||
|
} else if (player && typeof player.seekTo === 'function') {
|
||||||
|
player.seekTo(player._startTime || 0);
|
||||||
|
player.playVideo();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Stops all video playback (YouTube and HTML5)
|
* Stops all video playback (YouTube and HTML5)
|
||||||
* Used when navigating away from the home screen
|
* Used when navigating away from the home screen
|
||||||
@@ -2711,14 +2777,16 @@ const SlideshowManager = {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2. Pause all HTML5 videos
|
// 2. Stop and mute all HTML5 videos
|
||||||
const container = document.getElementById("slides-container");
|
const container = document.getElementById("slides-container");
|
||||||
if (container) {
|
if (container) {
|
||||||
container.querySelectorAll('video').forEach(video => {
|
container.querySelectorAll('video').forEach(video => {
|
||||||
try {
|
try {
|
||||||
video.pause();
|
video.pause();
|
||||||
|
video.muted = true;
|
||||||
|
video.currentTime = 0;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.warn("Error pausing HTML5 video:", e);
|
console.warn("Error stopping HTML5 video:", e);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -2736,18 +2804,24 @@ const SlideshowManager = {
|
|||||||
const currentSlide = document.querySelector(`.slide[data-item-id="${currentItemId}"]`);
|
const currentSlide = document.querySelector(`.slide[data-item-id="${currentItemId}"]`);
|
||||||
if (!currentSlide) return;
|
if (!currentSlide) return;
|
||||||
|
|
||||||
// 1. Try YouTube Player
|
// YouTube player: just resume, don't reload
|
||||||
const ytPlayer = STATE.slideshow.videoPlayers[currentItemId];
|
const ytPlayer = STATE.slideshow.videoPlayers?.[currentItemId];
|
||||||
if (ytPlayer && typeof ytPlayer.playVideo === 'function') {
|
if (ytPlayer && typeof ytPlayer.playVideo === 'function') {
|
||||||
|
if (STATE.slideshow.isMuted) {
|
||||||
|
if (typeof ytPlayer.mute === 'function') ytPlayer.mute();
|
||||||
|
} else {
|
||||||
|
if (typeof ytPlayer.unMute === 'function') ytPlayer.unMute();
|
||||||
|
if (typeof ytPlayer.setVolume === 'function') ytPlayer.setVolume(40);
|
||||||
|
}
|
||||||
ytPlayer.playVideo();
|
ytPlayer.playVideo();
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2. Try HTML5 Video
|
// HTML5 video: just resume, don't reset currentTime
|
||||||
const html5Video = currentSlide.querySelector('video');
|
const html5Video = currentSlide.querySelector('video.video-backdrop');
|
||||||
if (html5Video) {
|
if (html5Video) {
|
||||||
if (STATE.slideshow.isMuted) {
|
html5Video.muted = STATE.slideshow.isMuted;
|
||||||
html5Video.muted = true;
|
if (!STATE.slideshow.isMuted) html5Video.volume = 0.4;
|
||||||
}
|
|
||||||
html5Video.play().catch(e => console.warn("Error resuming HTML5 video:", e));
|
html5Video.play().catch(e => console.warn("Error resuming HTML5 video:", e));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -2822,7 +2896,7 @@ const SlideshowManager = {
|
|||||||
// Determine if we should handle navigation keys (Arrows, Space, M)
|
// Determine if we should handle navigation keys (Arrows, Space, M)
|
||||||
// TV Mode: Strict focus required (must be on slideshow)
|
// TV Mode: Strict focus required (must be on slideshow)
|
||||||
// Desktop Mode: Loose focus allowed (slideshow OR body/nothing focused)
|
// Desktop Mode: Loose focus allowed (slideshow OR body/nothing focused)
|
||||||
const canControlSlideshow = isTvMode ? hasDirectFocus : (hasDirectFocus || isBodyFocused);
|
let canControlSlideshow = isTvMode ? hasDirectFocus : (hasDirectFocus || isBodyFocused);
|
||||||
|
|
||||||
// Check for Input Fields (always ignore typing)
|
// Check for Input Fields (always ignore typing)
|
||||||
const isInputElement = activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable);
|
const isInputElement = activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable);
|
||||||
@@ -3040,7 +3114,7 @@ const SlideshowManager = {
|
|||||||
finalIds.push(id);
|
finalIds.push(id);
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.warn(`Error resolving item ${id}:`, e);
|
console.warn(`Error resolving item ${rawId}:`, e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return finalIds;
|
return finalIds;
|
||||||
@@ -3059,6 +3133,12 @@ const SlideshowManager = {
|
|||||||
console.log("Using Custom Media IDs from configuration");
|
console.log("Using Custom Media IDs from configuration");
|
||||||
const rawIds = this.parseCustomIds();
|
const rawIds = this.parseCustomIds();
|
||||||
itemIds = await this.resolveCollectionsAndItems(rawIds);
|
itemIds = await this.resolveCollectionsAndItems(rawIds);
|
||||||
|
|
||||||
|
// Apply max items limit to custom IDs if enabled
|
||||||
|
if (CONFIG.applyLimitsToCustomIds && itemIds.length > CONFIG.maxItems) {
|
||||||
|
console.log(`Limiting custom IDs from ${itemIds.length} to ${CONFIG.maxItems}`);
|
||||||
|
itemIds = itemIds.slice(0, CONFIG.maxItems);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2. Try Avatar List (list.txt)
|
// 2. Try Avatar List (list.txt)
|
||||||
@@ -3438,75 +3518,69 @@ const MediaBarEnhancedSettingsManager = {
|
|||||||
* Initialize page visibility handling to pause when tab is inactive
|
* Initialize page visibility handling to pause when tab is inactive
|
||||||
*/
|
*/
|
||||||
const initPageVisibilityHandler = () => {
|
const initPageVisibilityHandler = () => {
|
||||||
let wasVideoPlayingBeforeHide = false;
|
|
||||||
|
|
||||||
document.addEventListener("visibilitychange", () => {
|
document.addEventListener("visibilitychange", () => {
|
||||||
if (document.hidden) {
|
const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer:not(.hide)') ||
|
||||||
console.log("Tab inactive - pausing slideshow and videos");
|
document.querySelector('.youtubePlayerContainer:not(.hide)');
|
||||||
wasVideoPlayingBeforeHide = STATE.slideshow.isVideoPlaying;
|
|
||||||
|
|
||||||
|
if (document.hidden) {
|
||||||
|
// Stop slide timer
|
||||||
if (STATE.slideshow.slideInterval) {
|
if (STATE.slideshow.slideInterval) {
|
||||||
STATE.slideshow.slideInterval.stop();
|
STATE.slideshow.slideInterval.stop();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Pause active video if playing
|
if (isVideoPlayerOpen) {
|
||||||
const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
|
// Jellyfin video is playing --> full stop to free all resources
|
||||||
if (currentItemId) {
|
console.log("Tab inactive and Jellyfin player active - stopping all playback");
|
||||||
// YouTube
|
SlideshowManager.stopAllPlayback();
|
||||||
if (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
|
} else {
|
||||||
const player = STATE.slideshow.videoPlayers[currentItemId];
|
// Simple tab switch: stop all others, pause only the current
|
||||||
if (typeof player.pauseVideo === "function") {
|
console.log("Tab inactive. Pausing current video, stopping others");
|
||||||
try {
|
const currentItemId = STATE.slideshow.itemIds?.[STATE.slideshow.currentSlideIndex];
|
||||||
player.pauseVideo();
|
|
||||||
STATE.slideshow.isVideoPlaying = false;
|
// Stop all players except the current one
|
||||||
} catch (e) {
|
if (STATE.slideshow.videoPlayers) {
|
||||||
console.warn("Error pausing video on tab hide:", e);
|
Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
|
||||||
|
if (id === currentItemId) return;
|
||||||
|
const p = STATE.slideshow.videoPlayers[id];
|
||||||
|
if (p) {
|
||||||
|
try {
|
||||||
|
if (typeof p.stopVideo === 'function') {
|
||||||
|
p.stopVideo();
|
||||||
|
if (typeof p.clearVideo === 'function') p.clearVideo();
|
||||||
|
} else if (p.tagName === 'VIDEO') {
|
||||||
|
p.pause();
|
||||||
|
p.muted = true;
|
||||||
|
p.currentTime = 0;
|
||||||
|
}
|
||||||
|
} catch (e) { console.warn("Error stopping background player", id, e); }
|
||||||
}
|
}
|
||||||
} else if (player.tagName === 'VIDEO') { // HTML5 Video
|
});
|
||||||
player.pause();
|
}
|
||||||
STATE.slideshow.isVideoPlaying = false;
|
|
||||||
|
// Pause only the current video
|
||||||
|
if (currentItemId) {
|
||||||
|
const player = STATE.slideshow.videoPlayers?.[currentItemId];
|
||||||
|
if (player) {
|
||||||
|
try {
|
||||||
|
if (typeof player.pauseVideo === 'function') {
|
||||||
|
player.pauseVideo();
|
||||||
|
} else if (player.tagName === 'VIDEO') {
|
||||||
|
player.pause();
|
||||||
|
}
|
||||||
|
} catch (e) { console.warn("Error pausing video on tab hide:", e); }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
console.log("Tab active - resuming slideshow");
|
console.log("Tab active. Resuming slideshow");
|
||||||
if (!STATE.slideshow.isPaused) {
|
const isOnHome = window.location.hash === "#/home.html" || window.location.hash === "#/home";
|
||||||
const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
|
|
||||||
|
|
||||||
if (wasVideoPlayingBeforeHide && currentItemId && STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
|
if (isOnHome && !STATE.slideshow.isPaused && !isVideoPlayerOpen) {
|
||||||
const player = STATE.slideshow.videoPlayers[currentItemId];
|
SlideshowManager.resumeActivePlayback();
|
||||||
|
|
||||||
// YouTube
|
if (STATE.slideshow.slideInterval && !CONFIG.waitForTrailerToEnd) {
|
||||||
if (typeof player.playVideo === "function") {
|
STATE.slideshow.slideInterval.start();
|
||||||
try {
|
|
||||||
player.playVideo();
|
|
||||||
STATE.slideshow.isVideoPlaying = true;
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("Error resuming video on tab show:", e);
|
|
||||||
if (STATE.slideshow.slideInterval) {
|
|
||||||
STATE.slideshow.slideInterval.start();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (player.tagName === 'VIDEO') { // HTML5 Video
|
|
||||||
try {
|
|
||||||
player.play().catch(e => console.warn("Error resuming HTML5 video:", e));
|
|
||||||
STATE.slideshow.isVideoPlaying = true;
|
|
||||||
} catch(e) { console.warn(e); }
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// No video was playing, just restart interval
|
|
||||||
const activeSlide = document.querySelector('.slide.active');
|
|
||||||
const hasVideo = activeSlide && activeSlide.querySelector('.video-backdrop');
|
|
||||||
|
|
||||||
if (CONFIG.waitForTrailerToEnd && hasVideo) {
|
|
||||||
// Don't restart interval if waiting for trailer
|
|
||||||
} else {
|
|
||||||
if (STATE.slideshow.slideInterval) {
|
|
||||||
STATE.slideshow.slideInterval.start();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
wasVideoPlayingBeforeHide = false;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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.6.1.2",
|
"version": "1.6.1.8",
|
||||||
"changelog": "- fix tv mode issue",
|
"changelog": "- fix tv mode issue\n- refactor video playback management",
|
||||||
"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.6.1.2/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.1.8/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||||
"checksum": "186c08c80091c24270fda41f0908e951",
|
"checksum": "96db191473dc77edead21e8230c1115b",
|
||||||
"timestamp": "2026-02-11T19:13:24Z"
|
"timestamp": "2026-02-12T23:51:47Z"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"version": "1.6.0.2",
|
"version": "1.6.0.2",
|
||||||
|
|||||||
Reference in New Issue
Block a user