Refactor video playback handling for active slides and improve mute functionality

This commit is contained in:
CodeDevMLH
2026-02-14 16:56:23 +01:00
parent 108a644983
commit 9f5f607168

View File

@@ -1807,40 +1807,36 @@ const SlideCreator = {
style: "object-fit: cover; object-position: center center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none;" style: "object-fit: cover; object-position: center center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none;"
}; };
if (STATE.slideshow.isMuted) {
videoAttributes.muted = ""; videoAttributes.muted = "";
}
backdrop = SlideUtils.createElement("video", videoAttributes); backdrop = SlideUtils.createElement("video", videoAttributes);
if (!STATE.slideshow.isMuted) {
backdrop.volume = 0.4; backdrop.volume = 0.4;
}
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}"]`);
// backdrop.addEventListener('play', (event) => { if (!slide || !slide.classList.contains('active')) {
// const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`); console.log(`Local video ${itemId} started playing but slide is not active, pausing.`);
event.target.pause();
// if (!slide || !slide.classList.contains('active')) { event.target.currentTime = 0;
// console.log(`Local video ${itemId} started playing but is not active, pausing.`); return;
// 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();
} }
}); });
backdrop.addEventListener('ended', () => { backdrop.addEventListener('ended', () => {
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
if (slide && slide.classList.contains('active')) {
SlideshowManager.nextSlide(); SlideshowManager.nextSlide();
}
}); });
backdrop.addEventListener('error', () => { backdrop.addEventListener('error', () => {
if (CONFIG.waitForTrailerToEnd) { const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
if (CONFIG.waitForTrailerToEnd && slide && slide.classList.contains('active')) {
SlideshowManager.nextSlide(); SlideshowManager.nextSlide();
} }
}); });
@@ -2314,14 +2310,22 @@ const SlideshowManager = {
// Manage Video Playback: Stop others, Play current // Manage Video Playback: Stop others, Play current
// 1. Stop all other YouTube players // 1. Stop all other YouTube players and local video elements
if (STATE.slideshow.videoPlayers) { if (STATE.slideshow.videoPlayers) {
Object.keys(STATE.slideshow.videoPlayers).forEach(id => { Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
if (id !== currentItemId) { if (id !== currentItemId) {
const p = STATE.slideshow.videoPlayers[id]; const p = STATE.slideshow.videoPlayers[id];
if (p && typeof p.pauseVideo === 'function') { if (!p) return;
// YouTube player
if (typeof p.pauseVideo === 'function') {
p.pauseVideo(); p.pauseVideo();
} }
// HTML5 <video> element (local trailers)
if (p instanceof HTMLVideoElement) {
p.pause();
p.muted = true;
p.currentTime = 0;
}
} }
}); });
} }