Compare commits
20 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
a7929e1ff6 | ||
|
|
c78e07de62 | ||
|
|
a90f805ea8 | ||
|
|
ccba1857e1 | ||
|
|
ff56c9370b | ||
|
|
162600c43f | ||
|
|
a21549af47 | ||
|
|
1b319ade40 | ||
|
|
75757d67e7 | ||
|
|
92fc8d72f7 | ||
|
|
cfe9dec550 | ||
|
|
1bef573aaf | ||
|
|
29a365b690 | ||
|
|
0ee0a65309 | ||
|
|
152d22b709 | ||
|
|
216dddad94 | ||
|
|
a6de148ca1 | ||
|
|
1f9378d74d | ||
|
|
cc025779dc | ||
|
|
3d10fd59b5 |
@@ -123,9 +123,15 @@
|
|||||||
<div class="fieldDescription" id="customMediaIdsDesc">Enter the IDs of the items you want to show in the slideshow.
|
<div class="fieldDescription" id="customMediaIdsDesc">Enter the IDs of the items you want to show in the slideshow.
|
||||||
You can separate them by new line or comma.
|
You can separate them by new line or comma.
|
||||||
<br><br>
|
<br><br>
|
||||||
<b>Manual Trailer Override:</b> You can specify a YouTube URL for an item by adding it in
|
<b>Manual Trailer/Video Override:</b> You can specify a YouTube URL <b>OR</b> a Jellyfin Item ID (e.g. for a Theme Video) for an item by adding it in
|
||||||
brackets: <br> <code>e.g. ID DESCRIPTION [https://youtu.be/...]</code> or <code>ID [https://youtu.be/...] DESCRIPTION</code>
|
brackets: <br> <code>e.g. ID DESCRIPTION [https://youtu.be/...]</code> or <code>ID [Method] DESCRIPTION</code>.
|
||||||
<br><br>
|
<br>
|
||||||
|
Methods:
|
||||||
|
<ul>
|
||||||
|
<li><b>YouTube URL:</b> Play a remote trailer from YouTube.</li>
|
||||||
|
<li><b>Jellyfin Item ID (GUID):</b> Play the video of another library item (e.g. a Theme Video or Backdrop Video) using the native player.</li>
|
||||||
|
</ul>
|
||||||
|
<br>
|
||||||
You can also add a description after the ID using any separator like space, pipe
|
You can also add a description after the ID using any separator like space, pipe
|
||||||
(|) or dash (-): <br>e.g. <code>ID DESCRIPTION</code> or <code>ID | DESCRIPTION</code>
|
(|) or dash (-): <br>e.g. <code>ID DESCRIPTION</code> or <code>ID | DESCRIPTION</code>
|
||||||
<br><br>
|
<br><br>
|
||||||
@@ -331,7 +337,7 @@
|
|||||||
<div class="inputContainer">
|
<div class="inputContainer">
|
||||||
<label class="inputLabel inputLabelUnfocused" for="PreloadCount">Preload Count</label>
|
<label class="inputLabel inputLabelUnfocused" for="PreloadCount">Preload Count</label>
|
||||||
<input is="emby-input" type="number" id="PreloadCount" name="PreloadCount" />
|
<input is="emby-input" type="number" id="PreloadCount" name="PreloadCount" />
|
||||||
<div class="fieldDescription">Number of images to preload.</div>
|
<div class="fieldDescription">Number of slides to preload.</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="inputContainer">
|
<div class="inputContainer">
|
||||||
<label class="inputLabel inputLabelUnfocused" for="MaxPaginationDots">Max Pagination
|
<label class="inputLabel inputLabelUnfocused" for="MaxPaginationDots">Max Pagination
|
||||||
|
|||||||
@@ -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.0.2</Version>
|
<Version>1.6.1.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>
|
||||||
|
|
||||||
|
|||||||
@@ -995,3 +995,7 @@
|
|||||||
.dots-container .slide-counter {
|
.dots-container .slide-counter {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layout-tv .backdrop-container{
|
||||||
|
top: -5%;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1432,6 +1432,8 @@ 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'))) {
|
||||||
|
if (this._lastVisibleState !== 'player-active') {
|
||||||
|
this._lastVisibleState = 'player-active';
|
||||||
const container = document.getElementById("slides-container");
|
const container = document.getElementById("slides-container");
|
||||||
if (container) {
|
if (container) {
|
||||||
container.style.display = "none";
|
container.style.display = "none";
|
||||||
@@ -1442,6 +1444,7 @@ const VisibilityObserver = {
|
|||||||
STATE.slideshow.slideInterval.stop();
|
STATE.slideshow.slideInterval.stop();
|
||||||
}
|
}
|
||||||
SlideshowManager.stopAllPlayback();
|
SlideshowManager.stopAllPlayback();
|
||||||
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1456,6 +1459,12 @@ const VisibilityObserver = {
|
|||||||
activeTab &&
|
activeTab &&
|
||||||
activeTab.getAttribute("data-index") === "0";
|
activeTab.getAttribute("data-index") === "0";
|
||||||
|
|
||||||
|
const newState = isVisible ? 'visible' : 'hidden';
|
||||||
|
|
||||||
|
// Only update DOM and trigger actions when state actually changes
|
||||||
|
if (this._lastVisibleState !== newState) {
|
||||||
|
this._lastVisibleState = newState;
|
||||||
|
|
||||||
container.style.display = isVisible ? "block" : "none";
|
container.style.display = isVisible ? "block" : "none";
|
||||||
container.style.visibility = isVisible ? "visible" : "hidden";
|
container.style.visibility = isVisible ? "visible" : "hidden";
|
||||||
container.style.pointerEvents = isVisible ? "auto" : "none";
|
container.style.pointerEvents = isVisible ? "auto" : "none";
|
||||||
@@ -1471,13 +1480,20 @@ const VisibilityObserver = {
|
|||||||
}
|
}
|
||||||
SlideshowManager.stopAllPlayback();
|
SlideshowManager.stopAllPlayback();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Initializes visibility observer
|
* Initializes visibility observer
|
||||||
*/
|
*/
|
||||||
init() {
|
init() {
|
||||||
const observer = new MutationObserver(() => this.updateVisibility());
|
// MARK: Mark
|
||||||
|
// 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 +1712,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;
|
||||||
@@ -1712,11 +1735,18 @@ const SlideCreator = {
|
|||||||
event.target.setPlaybackQuality(quality);
|
event.target.setPlaybackQuality(quality);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Only play if this is the active slide
|
// Only play if this is the active slide AND the slideshow is visible
|
||||||
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
||||||
const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
|
const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
|
||||||
|
|
||||||
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'))) {
|
||||||
|
const currentIndex = STATE.slideshow.currentSlideIndex;
|
||||||
|
const currentItemId = STATE.slideshow.itemIds[currentIndex];
|
||||||
|
if (currentItemId !== itemId) {
|
||||||
|
console.log(`Slide ${itemId} is no longer active (current: ${currentItemId}), aborting playback.`);
|
||||||
|
event.target.mute(); // Mute just in case
|
||||||
|
return;
|
||||||
|
}
|
||||||
event.target.playVideo();
|
event.target.playVideo();
|
||||||
|
|
||||||
// Check if it actually started playing after a short delay (handling autoplay blocks)
|
// Check if it actually started playing after a short delay (handling autoplay blocks)
|
||||||
@@ -1757,7 +1787,8 @@ const SlideCreator = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
'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();
|
||||||
@@ -1793,7 +1824,18 @@ const SlideCreator = {
|
|||||||
|
|
||||||
STATE.slideshow.videoPlayers[itemId] = backdrop;
|
STATE.slideshow.videoPlayers[itemId] = backdrop;
|
||||||
|
|
||||||
backdrop.addEventListener('play', () => {
|
backdrop.addEventListener('play', (event) => {
|
||||||
|
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
||||||
|
const currentIndex = STATE.slideshow.currentSlideIndex;
|
||||||
|
const currentItemId = STATE.slideshow.itemIds[currentIndex];
|
||||||
|
|
||||||
|
if (!slide || !slide.classList.contains('active') || currentItemId !== itemId) {
|
||||||
|
console.log(`Local video ${itemId} started playing but is not active, pausing.`);
|
||||||
|
event.target.pause();
|
||||||
|
event.target.currentTime = 0;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
|
if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
|
||||||
STATE.slideshow.slideInterval.stop();
|
STATE.slideshow.slideInterval.stop();
|
||||||
}
|
}
|
||||||
@@ -2237,6 +2279,16 @@ const SlideshowManager = {
|
|||||||
let previousVisibleSlide;
|
let previousVisibleSlide;
|
||||||
try {
|
try {
|
||||||
const container = SlideUtils.getOrCreateSlidesContainer();
|
const container = SlideUtils.getOrCreateSlidesContainer();
|
||||||
|
|
||||||
|
const activeElement = document.activeElement;
|
||||||
|
let focusSelector = null;
|
||||||
|
if (container.contains(activeElement)) {
|
||||||
|
if (activeElement.classList.contains('play-button')) focusSelector = '.play-button';
|
||||||
|
else if (activeElement.classList.contains('detail-button')) focusSelector = '.detail-button';
|
||||||
|
else if (activeElement.classList.contains('favorite-button')) focusSelector = '.favorite-button';
|
||||||
|
else if (activeElement.classList.contains('trailer-button')) focusSelector = '.trailer-button';
|
||||||
|
}
|
||||||
|
|
||||||
const totalItems = STATE.slideshow.totalItems;
|
const totalItems = STATE.slideshow.totalItems;
|
||||||
|
|
||||||
index = Math.max(0, Math.min(index, totalItems - 1));
|
index = Math.max(0, Math.min(index, totalItems - 1));
|
||||||
@@ -2265,91 +2317,27 @@ const SlideshowManager = {
|
|||||||
|
|
||||||
currentSlide.classList.add("active");
|
currentSlide.classList.add("active");
|
||||||
|
|
||||||
|
// Restore focus for TV mode navigation continuity
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
if (focusSelector) {
|
||||||
|
const target = currentSlide.querySelector(focusSelector);
|
||||||
|
if (target) {
|
||||||
|
target.focus();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Always ensure container has focus in TV mode to keep keyboard navigation working
|
||||||
|
const isTvMode = (window.layoutManager && window.layoutManager.tv) ||
|
||||||
|
document.documentElement.classList.contains('layout-tv') ||
|
||||||
|
document.body.classList.contains('layout-tv');
|
||||||
|
if (isTvMode) {
|
||||||
|
container.focus({ preventScroll: true });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Manage Video Playback: Stop others, Play current
|
// Manage Video Playback: Stop others, Play current
|
||||||
|
this.pauseOtherVideos(currentItemId);
|
||||||
// 1. Pause all other YouTube players
|
this.playCurrentVideo(currentSlide, currentItemId);
|
||||||
if (STATE.slideshow.videoPlayers) {
|
|
||||||
Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
|
|
||||||
if (id !== currentItemId) {
|
|
||||||
const p = STATE.slideshow.videoPlayers[id];
|
|
||||||
if (p && typeof p.pauseVideo === 'function') {
|
|
||||||
p.pauseVideo();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2. Pause all other HTML5 videos e.g. local trailers
|
|
||||||
document.querySelectorAll('video').forEach(video => {
|
|
||||||
if (!video.closest(`.slide[data-item-id="${currentItemId}"]`)) {
|
|
||||||
video.pause();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 3. Play and Reset current video
|
|
||||||
const videoBackdrop = currentSlide.querySelector('.video-backdrop');
|
|
||||||
|
|
||||||
// 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);
|
||||||
|
|
||||||
@@ -2358,7 +2346,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;
|
||||||
@@ -2441,17 +2430,19 @@ const SlideshowManager = {
|
|||||||
*/
|
*/
|
||||||
async preloadAdjacentSlides(currentIndex) {
|
async preloadAdjacentSlides(currentIndex) {
|
||||||
const totalItems = STATE.slideshow.totalItems;
|
const totalItems = STATE.slideshow.totalItems;
|
||||||
const preloadCount = CONFIG.preloadCount;
|
const preloadCount = Math.min(Math.max(CONFIG.preloadCount || 1, 1), 5);
|
||||||
|
|
||||||
const nextIndex = (currentIndex + 1) % totalItems;
|
// Preload next slides
|
||||||
|
for (let i = 1; i <= preloadCount; i++) {
|
||||||
|
const nextIndex = (currentIndex + i) % totalItems;
|
||||||
const itemId = STATE.slideshow.itemIds[nextIndex];
|
const itemId = STATE.slideshow.itemIds[nextIndex];
|
||||||
|
SlideCreator.createSlideForItemId(itemId);
|
||||||
|
}
|
||||||
|
|
||||||
await SlideCreator.createSlideForItemId(itemId);
|
// Preload previous slides
|
||||||
|
for (let i = 1; i <= preloadCount; i++) {
|
||||||
if (preloadCount > 1) {
|
const prevIndex = (currentIndex - i + totalItems) % totalItems;
|
||||||
const prevIndex = (currentIndex - 1 + totalItems) % totalItems;
|
|
||||||
const prevItemId = STATE.slideshow.itemIds[prevIndex];
|
const prevItemId = STATE.slideshow.itemIds[prevIndex];
|
||||||
|
|
||||||
SlideCreator.createSlideForItemId(prevItemId);
|
SlideCreator.createSlideForItemId(prevItemId);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -2486,7 +2477,14 @@ const SlideshowManager = {
|
|||||||
const index = STATE.slideshow.itemIds.indexOf(itemId);
|
const index = STATE.slideshow.itemIds.indexOf(itemId);
|
||||||
if (index === -1) return;
|
if (index === -1) return;
|
||||||
|
|
||||||
const distance = Math.abs(index - currentIndex);
|
const totalItems = STATE.slideshow.itemIds.length;
|
||||||
|
|
||||||
|
// Calculate wrapped distance
|
||||||
|
let distance = Math.abs(index - currentIndex);
|
||||||
|
if (totalItems > keepRange * 2) {
|
||||||
|
distance = Math.min(distance, totalItems - distance);
|
||||||
|
}
|
||||||
|
|
||||||
if (distance > keepRange) {
|
if (distance > keepRange) {
|
||||||
// Destroy video player if exists
|
// Destroy video player if exists
|
||||||
if (STATE.slideshow.videoPlayers[itemId]) {
|
if (STATE.slideshow.videoPlayers[itemId]) {
|
||||||
@@ -2627,6 +2625,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
|
||||||
@@ -2656,14 +2762,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);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -2681,18 +2789,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));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -2767,7 +2881,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);
|
||||||
@@ -2985,7 +3099,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;
|
||||||
@@ -3383,76 +3497,26 @@ 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) {
|
if (document.hidden) {
|
||||||
console.log("Tab inactive - pausing slideshow and videos");
|
console.log("Tab inactive - stopping all slideshow playback");
|
||||||
wasVideoPlayingBeforeHide = STATE.slideshow.isVideoPlaying;
|
|
||||||
|
|
||||||
if (STATE.slideshow.slideInterval) {
|
if (STATE.slideshow.slideInterval) {
|
||||||
STATE.slideshow.slideInterval.stop();
|
STATE.slideshow.slideInterval.stop();
|
||||||
}
|
}
|
||||||
|
SlideshowManager.stopAllPlayback();
|
||||||
// Pause active video if playing
|
|
||||||
const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
|
|
||||||
if (currentItemId) {
|
|
||||||
// YouTube
|
|
||||||
if (STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
|
|
||||||
const player = STATE.slideshow.videoPlayers[currentItemId];
|
|
||||||
if (typeof player.pauseVideo === "function") {
|
|
||||||
try {
|
|
||||||
player.pauseVideo();
|
|
||||||
STATE.slideshow.isVideoPlaying = false;
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("Error pausing video on tab hide:", e);
|
|
||||||
}
|
|
||||||
} else if (player.tagName === 'VIDEO') { // HTML5 Video
|
|
||||||
player.pause();
|
|
||||||
STATE.slideshow.isVideoPlaying = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
console.log("Tab active - resuming slideshow");
|
console.log("Tab active - resuming slideshow");
|
||||||
if (!STATE.slideshow.isPaused) {
|
// Only resume if we're on the home page and not paused
|
||||||
const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
|
const isOnHome = window.location.hash === "#/home.html" || window.location.hash === "#/home";
|
||||||
|
const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer:not(.hide)') || document.querySelector('.youtubePlayerContainer:not(.hide)');
|
||||||
|
|
||||||
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") {
|
|
||||||
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();
|
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -8,13 +8,21 @@
|
|||||||
"category": "General",
|
"category": "General",
|
||||||
"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.4",
|
||||||
|
"changelog": "- fix tv mode issue\n- refactor video playback management",
|
||||||
|
"targetAbi": "10.11.0.0",
|
||||||
|
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.1.4/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||||
|
"checksum": "d0d3f67b52c82c0f01c89b74ae83af01",
|
||||||
|
"timestamp": "2026-02-12T01:29:36Z"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"version": "1.6.0.2",
|
"version": "1.6.0.2",
|
||||||
"changelog": "- add local trailer support on trailer button\nfix: iOS/MacOS playback issue?",
|
"changelog": "- add local trailer support on trailer button\nfix: iOS/MacOS playback issue?",
|
||||||
"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.0.2/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.0.2/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||||
"checksum": "335a682c714e3e3178f9444fc36668a0",
|
"checksum": "cdd0208f8cc4f4b04f50e7138e508370",
|
||||||
"timestamp": "2026-02-10T21:44:35Z"
|
"timestamp": "2026-02-10T22:07:33Z"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"version": "1.5.1.3",
|
"version": "1.5.1.3",
|
||||||
|
|||||||
Reference in New Issue
Block a user