Compare commits
70 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ccba1857e1 | ||
|
|
ff56c9370b | ||
|
|
162600c43f | ||
|
|
a21549af47 | ||
|
|
1b319ade40 | ||
|
|
75757d67e7 | ||
|
|
92fc8d72f7 | ||
|
|
cfe9dec550 | ||
|
|
1bef573aaf | ||
|
|
29a365b690 | ||
|
|
0ee0a65309 | ||
|
|
152d22b709 | ||
|
|
216dddad94 | ||
|
|
a6de148ca1 | ||
|
|
1f9378d74d | ||
|
|
cc025779dc | ||
|
|
3d10fd59b5 | ||
|
|
bf261eba96 | ||
|
|
e3116c30cf | ||
|
|
bb39c91d32 | ||
|
|
4e0c74614a | ||
|
|
b61bf92437 | ||
|
|
dfbd6ce964 | ||
|
|
f1cbcad177 | ||
|
|
feedd5d95f | ||
|
|
87d82cca15 | ||
|
|
a70746e095 | ||
|
|
f32283e0bf | ||
|
|
8f3985f307 | ||
|
|
0b2817ecff | ||
|
|
84faee2db4 | ||
|
|
3efa07ec51 | ||
|
|
af603e8803 | ||
|
|
fe63414e4b | ||
|
|
614c86083f | ||
|
|
17b9e8921e | ||
|
|
5075226ba8 | ||
|
|
443fb1008b | ||
|
|
8f12140aad | ||
|
|
1469712bb5 | ||
|
|
76ff03ac17 | ||
|
|
25b1ba5f2b | ||
|
|
eed3ca1860 | ||
|
|
0f14577f5d | ||
|
|
9999d6a633 | ||
|
|
a935fd7d5d | ||
|
|
60293e81e1 | ||
|
|
f54e55fe04 | ||
|
|
b3c42e2100 | ||
|
|
20ddbb32c7 | ||
|
|
14a5075e22 | ||
|
|
accb316a81 | ||
|
|
51c5cdf5bf | ||
|
|
306eff757b | ||
|
|
b8f28a5735 | ||
|
|
0932d9611d | ||
|
|
5e616db0ae | ||
|
|
538b0f2110 | ||
|
|
e717c07c54 | ||
|
|
0fa2d01ca3 | ||
|
|
5299b2a9d5 | ||
|
|
4f244988b9 | ||
|
|
5635a8f05e | ||
|
|
c901da4b0c | ||
|
|
c45cd0281f | ||
|
|
0c3e74829a | ||
|
|
e6b769f099 | ||
|
|
77371f7b98 | ||
|
|
988b800b6d | ||
|
|
4c6514ba9f |
@@ -36,7 +36,6 @@ 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 EnableUpstreamTrailerLayout { 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";
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -73,14 +73,6 @@
|
|||||||
</label>
|
</label>
|
||||||
<div class="fieldDescription">Delay slide transition until trailer finishes.</div>
|
<div class="fieldDescription">Delay slide transition until trailer finishes.</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="UpstreamTrailerLayoutContainer" class="checkboxContainer checkboxContainer-withDescription">
|
|
||||||
<label>
|
|
||||||
<input is="emby-checkbox" type="checkbox" id="EnableUpstreamTrailerLayout"
|
|
||||||
name="EnableUpstreamTrailerLayout" />
|
|
||||||
<span>Enable Upstream Trailer Layout</span>
|
|
||||||
</label>
|
|
||||||
<div class="fieldDescription">Use the upstream (original) layout for trailers. This renders the video inside a container overlaying the backdrop, instead of replacing it to support full-width video.</div>
|
|
||||||
</div>
|
|
||||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||||
<label>
|
<label>
|
||||||
<input is="emby-checkbox" type="checkbox" id="EnableMobileVideo"
|
<input is="emby-checkbox" type="checkbox" id="EnableMobileVideo"
|
||||||
@@ -131,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>
|
||||||
@@ -190,8 +188,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="selectContainer">
|
<div class="selectContainer">
|
||||||
<label class="selectLabel" for="PreferredVideoQuality">Preferred YouTube Quality</label>
|
<label class="selectLabel" for="PreferredVideoQuality">Preferred YouTube Quality</label>
|
||||||
<select is="emby-select" id="PreferredVideoQuality" name="PreferredVideoQuality"
|
<select is="emby-select" id="PreferredVideoQuality" name="PreferredVideoQuality" class="selectLayout emby-select-withcolor emby-select">
|
||||||
class="emby-select-withcolor emby-select">
|
|
||||||
<option value="Auto">Auto (Smart)</option>
|
<option value="Auto">Auto (Smart)</option>
|
||||||
<option value="Maximum">Maximum (4K+)</option>
|
<option value="Maximum">Maximum (4K+)</option>
|
||||||
<option value="1080p">1080p</option>
|
<option value="1080p">1080p</option>
|
||||||
@@ -293,7 +290,7 @@
|
|||||||
<h2 class="sectionTitle">Content Sorting</h2>
|
<h2 class="sectionTitle">Content Sorting</h2>
|
||||||
<div class="selectContainer">
|
<div class="selectContainer">
|
||||||
<label class="selectLabel" for="SortBy">Sort By</label>
|
<label class="selectLabel" for="SortBy">Sort By</label>
|
||||||
<select is="emby-select" id="SortBy" name="SortBy" class="emby-select-withcolor emby-select">
|
<select is="emby-select" id="SortBy" name="SortBy" class="selectLayout emby-select-withcolor emby-select">
|
||||||
<option value="Random">Random</option>
|
<option value="Random">Random</option>
|
||||||
<option value="Original">Original (Custom List Order)</option>
|
<option value="Original">Original (Custom List Order)</option>
|
||||||
<option value="PremiereDate">Premiere Date</option>
|
<option value="PremiereDate">Premiere Date</option>
|
||||||
@@ -307,7 +304,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="selectContainer">
|
<div class="selectContainer">
|
||||||
<label class="selectLabel" for="SortOrder">Sort Order</label>
|
<label class="selectLabel" for="SortOrder">Sort Order</label>
|
||||||
<select is="emby-select" id="SortOrder" name="SortOrder" class="emby-select-withcolor emby-select">
|
<select is="emby-select" id="SortOrder" name="SortOrder" class="selectLayout emby-select-withcolor emby-select">
|
||||||
<option value="Ascending">Ascending</option>
|
<option value="Ascending">Ascending</option>
|
||||||
<option value="Descending">Descending</option>
|
<option value="Descending">Descending</option>
|
||||||
</select>
|
</select>
|
||||||
@@ -340,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
|
||||||
@@ -414,7 +411,7 @@
|
|||||||
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
|
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
|
||||||
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
|
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
|
||||||
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
|
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
|
||||||
'PreferLocalTrailers', 'EnableUpstreamTrailerLayout'
|
'PreferLocalTrailers'
|
||||||
];
|
];
|
||||||
|
|
||||||
keys.forEach(function (key) {
|
keys.forEach(function (key) {
|
||||||
@@ -451,15 +448,12 @@
|
|||||||
// Handle Prefer Local Trailers visibility
|
// Handle Prefer Local Trailers visibility
|
||||||
var enableVideoBackdropCheckbox = page.querySelector('#EnableVideoBackdrop');
|
var enableVideoBackdropCheckbox = page.querySelector('#EnableVideoBackdrop');
|
||||||
var preferLocalContainer = page.querySelector('#PreferLocalTrailersContainer');
|
var preferLocalContainer = page.querySelector('#PreferLocalTrailersContainer');
|
||||||
var upstreamLayoutContainer = page.querySelector('#UpstreamTrailerLayoutContainer');
|
|
||||||
|
|
||||||
function updatePreferLocalVisibility() {
|
function updatePreferLocalVisibility() {
|
||||||
if (enableVideoBackdropCheckbox && enableVideoBackdropCheckbox.checked) {
|
if (enableVideoBackdropCheckbox && enableVideoBackdropCheckbox.checked) {
|
||||||
if (preferLocalContainer) preferLocalContainer.style.display = 'block';
|
if (preferLocalContainer) preferLocalContainer.style.display = 'block';
|
||||||
if (upstreamLayoutContainer) upstreamLayoutContainer.style.display = 'block';
|
|
||||||
} else {
|
} else {
|
||||||
if (preferLocalContainer) preferLocalContainer.style.display = 'none';
|
if (preferLocalContainer) preferLocalContainer.style.display = 'none';
|
||||||
if (upstreamLayoutContainer) upstreamLayoutContainer.style.display = 'none';
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -484,7 +478,7 @@
|
|||||||
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
|
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
|
||||||
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
|
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
|
||||||
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
|
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
|
||||||
'PreferLocalTrailers', 'EnableUpstreamTrailerLayout'
|
'PreferLocalTrailers'
|
||||||
];
|
];
|
||||||
|
|
||||||
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.5.0.12</Version>
|
<Version>1.6.1.3</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>
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
/*
|
/*
|
||||||
* Jellyfin Slideshow by M0RPH3US v3.0.9
|
* Jellyfin Slideshow by M0RPH3US v4.0.1
|
||||||
* Modified by CodeDevMLH v1.1.0.0
|
* Modified by CodeDevMLH
|
||||||
*
|
*
|
||||||
* New features:
|
* New features:
|
||||||
* - optional Trailer background video support
|
* - optional Trailer background video support
|
||||||
@@ -14,6 +14,9 @@
|
|||||||
* - option to disable loading screen
|
* - option to disable loading screen
|
||||||
* - option to put collection (boxsets) IDs into the slideshow to display their items
|
* - option to put collection (boxsets) IDs into the slideshow to display their items
|
||||||
* - option to enable client-side settings (allow users to override settings locally on their device)
|
* - option to enable client-side settings (allow users to override settings locally on their device)
|
||||||
|
* - option to enable seasonal content (only show items that are relevant to the current season/holiday)
|
||||||
|
* - option to prefer local trailers (from the media item) over online sources
|
||||||
|
* - options to sort the content by various criteria (PremiereDate, ProductionYear, Random, Original order, etc.)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import url(https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&display=swap);
|
@import url(https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&display=swap);
|
||||||
@@ -343,49 +346,6 @@
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-container {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 0;
|
|
||||||
z-index: 2;
|
|
||||||
overflow: hidden;
|
|
||||||
transition:
|
|
||||||
width 0.5s ease-in-out,
|
|
||||||
opacity 0.5s ease-in-out;
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
mask-image:
|
|
||||||
linear-gradient(to right, transparent 10%, black 30%),
|
|
||||||
linear-gradient(to top, transparent 2%, rgba(0, 0, 0, 0.5) 6%, black 8%);
|
|
||||||
|
|
||||||
-webkit-mask-image:
|
|
||||||
linear-gradient(to right, transparent 10%, black 30%),
|
|
||||||
linear-gradient(to top, transparent 2%, rgba(0, 0, 0, 0.5) 6%, black 8%);
|
|
||||||
|
|
||||||
mask-composite: intersect;
|
|
||||||
-webkit-mask-composite: source-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-container.active {
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-player {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure video inside container fills it */
|
|
||||||
.video-container iframe,
|
|
||||||
.video-container video {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.backdrop-container {
|
.backdrop-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0%;
|
top: 0%;
|
||||||
@@ -422,10 +382,6 @@
|
|||||||
object-position: center 20%;
|
object-position: center 20%;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
transition:
|
|
||||||
width 0.5s ease-in-out,
|
|
||||||
mask-image 0.5s ease-in-out,
|
|
||||||
-webkit-mask-image 0.5s ease-in-out;
|
|
||||||
mask-image: linear-gradient(to top,
|
mask-image: linear-gradient(to top,
|
||||||
#fff0 2%,
|
#fff0 2%,
|
||||||
rgb(0 0 0 / 0.5) 6%,
|
rgb(0 0 0 / 0.5) 6%,
|
||||||
@@ -436,20 +392,6 @@
|
|||||||
#000000 8%);
|
#000000 8%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.backdrop.with-video {
|
|
||||||
width: 100%;
|
|
||||||
mask-image:
|
|
||||||
linear-gradient(to top, #fff0 2%, rgb(0 0 0 / 0.5) 6%, #000000 8%),
|
|
||||||
linear-gradient(to right, black 30%, transparent 85%);
|
|
||||||
|
|
||||||
-webkit-mask-image:
|
|
||||||
linear-gradient(to top, #fff0 2%, rgb(0 0 0 / 0.5) 6%, #000000 8%),
|
|
||||||
linear-gradient(to right, black 30%, transparent 85%);
|
|
||||||
|
|
||||||
mask-composite: source-in;
|
|
||||||
-webkit-mask-composite: source-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.backdrop-overlay {
|
.backdrop-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -1053,3 +995,18 @@
|
|||||||
.dots-container .slide-counter {
|
.dots-container .slide-counter {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layout-tv .backdrop-container{
|
||||||
|
top: -5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .layout-tv .video-backdrop {
|
||||||
|
mask-image: linear-gradient(to top,
|
||||||
|
#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%);
|
||||||
|
} */
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
/*
|
/*
|
||||||
* Jellyfin Slideshow by M0RPH3US v4.0.1
|
* Jellyfin Slideshow by M0RPH3US v4.0.1
|
||||||
* Modified by CodeDevMLH v1.1.0.0
|
* Modified by CodeDevMLH
|
||||||
*
|
*
|
||||||
* New features:
|
* New features:
|
||||||
* - optional Trailer background video support
|
* - optional Trailer background video support
|
||||||
@@ -14,6 +14,9 @@
|
|||||||
* - option to disable loading screen
|
* - option to disable loading screen
|
||||||
* - option to put collection (boxsets) IDs into the slideshow to display their items
|
* - option to put collection (boxsets) IDs into the slideshow to display their items
|
||||||
* - option to enable client-side settings (allow users to override settings locally on their device)
|
* - option to enable client-side settings (allow users to override settings locally on their device)
|
||||||
|
* - option to enable seasonal content (only show items that are relevant to the current season/holiday)
|
||||||
|
* - option to prefer local trailers (from the media item) over online sources
|
||||||
|
* - options to sort the content by various criteria (PremiereDate, ProductionYear, Random, Original order, etc.)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
//Core Module Configuration
|
//Core Module Configuration
|
||||||
@@ -52,7 +55,6 @@ const CONFIG = {
|
|||||||
customMediaIds: "",
|
customMediaIds: "",
|
||||||
enableLoadingScreen: true,
|
enableLoadingScreen: true,
|
||||||
enableClientSideSettings: false,
|
enableClientSideSettings: false,
|
||||||
enableUpstreamTrailerLayout: false,
|
|
||||||
sortBy: "Random",
|
sortBy: "Random",
|
||||||
sortOrder: "Ascending",
|
sortOrder: "Ascending",
|
||||||
};
|
};
|
||||||
@@ -86,6 +88,7 @@ const STATE = {
|
|||||||
isMuted: CONFIG.startMuted,
|
isMuted: CONFIG.startMuted,
|
||||||
customTrailerUrls: {},
|
customTrailerUrls: {},
|
||||||
ytPromise: null,
|
ytPromise: null,
|
||||||
|
autoplayTimeouts: [],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -606,7 +609,10 @@ const SlideUtils = {
|
|||||||
getOrCreateSlidesContainer() {
|
getOrCreateSlidesContainer() {
|
||||||
let container = document.getElementById("slides-container");
|
let container = document.getElementById("slides-container");
|
||||||
if (!container) {
|
if (!container) {
|
||||||
container = this.createElement("div", { id: "slides-container" });
|
container = this.createElement("div", {
|
||||||
|
id: "slides-container",
|
||||||
|
className: "noautofocus"
|
||||||
|
});
|
||||||
document.body.appendChild(container);
|
document.body.appendChild(container);
|
||||||
}
|
}
|
||||||
return container;
|
return container;
|
||||||
@@ -734,7 +740,11 @@ const SlideUtils = {
|
|||||||
autoplay: 1,
|
autoplay: 1,
|
||||||
controls: 1,
|
controls: 1,
|
||||||
iv_load_policy: 3,
|
iv_load_policy: 3,
|
||||||
rel: 0
|
rel: 0,
|
||||||
|
playsinline: 1,
|
||||||
|
origin: window.location.origin,
|
||||||
|
widget_referrer: window.location.href,
|
||||||
|
enablejsapi: 1
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -1330,7 +1340,7 @@ const ApiUtils = {
|
|||||||
/**
|
/**
|
||||||
* Fetches the first local trailer for an item
|
* Fetches the first local trailer for an item
|
||||||
* @param {string} itemId - Item ID
|
* @param {string} itemId - Item ID
|
||||||
* @returns {Promise<string|null>} Stream URL or null
|
* @returns {Promise<Object|null>} Trailer data object {id, url} or null
|
||||||
*/
|
*/
|
||||||
async fetchLocalTrailer(itemId) {
|
async fetchLocalTrailer(itemId) {
|
||||||
try {
|
try {
|
||||||
@@ -1350,8 +1360,11 @@ const ApiUtils = {
|
|||||||
const trailer = trailers[0];
|
const trailer = trailers[0];
|
||||||
const mediaSourceId = trailer.MediaSources && trailer.MediaSources[0] ? trailer.MediaSources[0].Id : trailer.Id;
|
const mediaSourceId = trailer.MediaSources && trailer.MediaSources[0] ? trailer.MediaSources[0].Id : trailer.Id;
|
||||||
|
|
||||||
// Construct stream URL
|
// Return object with ID and URL
|
||||||
return `${STATE.jellyfinData.serverAddress}/Videos/${trailer.Id}/stream.mp4?Static=true&mediaSourceId=${mediaSourceId}&api_key=${STATE.jellyfinData.accessToken}`;
|
return {
|
||||||
|
id: trailer.Id,
|
||||||
|
url: `${STATE.jellyfinData.serverAddress}/Videos/${trailer.Id}/stream.mp4?Static=true&mediaSourceId=${mediaSourceId}&api_key=${STATE.jellyfinData.accessToken}`
|
||||||
|
};
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -1414,6 +1427,24 @@ class SlideTimer {
|
|||||||
*/
|
*/
|
||||||
const VisibilityObserver = {
|
const VisibilityObserver = {
|
||||||
updateVisibility() {
|
updateVisibility() {
|
||||||
|
const videoPlayer = document.querySelector('.videoPlayerContainer');
|
||||||
|
const trailerPlayer = document.querySelector('.youtubePlayerContainer');
|
||||||
|
|
||||||
|
// If a full screen video player is active, hide slideshow and stop playback
|
||||||
|
if ((videoPlayer && !videoPlayer.classList.contains('hide')) || (trailerPlayer && !trailerPlayer.classList.contains('hide'))) {
|
||||||
|
const container = document.getElementById("slides-container");
|
||||||
|
if (container) {
|
||||||
|
container.style.display = "none";
|
||||||
|
container.style.visibility = "hidden";
|
||||||
|
container.style.pointerEvents = "none";
|
||||||
|
}
|
||||||
|
if (STATE.slideshow.slideInterval) {
|
||||||
|
STATE.slideshow.slideInterval.stop();
|
||||||
|
}
|
||||||
|
SlideshowManager.stopAllPlayback();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const activeTab = document.querySelector(".emby-tab-button-active");
|
const activeTab = document.querySelector(".emby-tab-button-active");
|
||||||
const container = document.getElementById("slides-container");
|
const container = document.getElementById("slides-container");
|
||||||
|
|
||||||
@@ -1538,7 +1569,6 @@ const SlideCreator = {
|
|||||||
|
|
||||||
let backdrop;
|
let backdrop;
|
||||||
let isVideo = false;
|
let isVideo = false;
|
||||||
let hasUpstreamVideo = false;
|
|
||||||
let trailerUrl = null;
|
let trailerUrl = null;
|
||||||
|
|
||||||
// 1. Check for Remote/Local Trailers
|
// 1. Check for Remote/Local Trailers
|
||||||
@@ -1546,9 +1576,25 @@ const SlideCreator = {
|
|||||||
|
|
||||||
// 1a. Custom URL override
|
// 1a. Custom URL override
|
||||||
if (STATE.slideshow.customTrailerUrls && STATE.slideshow.customTrailerUrls[itemId]) {
|
if (STATE.slideshow.customTrailerUrls && STATE.slideshow.customTrailerUrls[itemId]) {
|
||||||
trailerUrl = STATE.slideshow.customTrailerUrls[itemId];
|
const customValue = STATE.slideshow.customTrailerUrls[itemId];
|
||||||
|
|
||||||
|
// Check if the custom value is a Jellyfin Item ID (GUID)
|
||||||
|
const guidMatch = customValue.match(/^([0-9a-f]{32})$/i);
|
||||||
|
|
||||||
|
if (guidMatch) {
|
||||||
|
const videoId = guidMatch[1];
|
||||||
|
console.log(`Using custom local video ID for ${itemId}: ${videoId}`);
|
||||||
|
|
||||||
|
trailerUrl = {
|
||||||
|
id: videoId,
|
||||||
|
url: `${STATE.jellyfinData.serverAddress}/Videos/${videoId}/stream.mp4?Static=true&api_key=${STATE.jellyfinData.accessToken}`
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
// Assume it's a standard URL (YouTube, etc.)
|
||||||
|
trailerUrl = customValue;
|
||||||
console.log(`Using custom trailer URL for ${itemId}: ${trailerUrl}`);
|
console.log(`Using custom trailer URL for ${itemId}: ${trailerUrl}`);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
// 1b. Check Local Trailer if preferred
|
// 1b. Check Local Trailer if preferred
|
||||||
else if (CONFIG.preferLocalTrailers && item.LocalTrailerCount > 0 && item.localTrailerUrl) {
|
else if (CONFIG.preferLocalTrailers && item.LocalTrailerCount > 0 && item.localTrailerUrl) {
|
||||||
trailerUrl = item.localTrailerUrl;
|
trailerUrl = item.localTrailerUrl;
|
||||||
@@ -1572,12 +1618,17 @@ const SlideCreator = {
|
|||||||
let videoId = null;
|
let videoId = null;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const urlObj = new URL(trailerUrl);
|
let urlToCheck = trailerUrl;
|
||||||
if (urlObj.hostname.includes('youtube.com') || urlObj.hostname.includes('youtu.be')) {
|
if (typeof trailerUrl === 'object' && trailerUrl.url) {
|
||||||
|
urlToCheck = trailerUrl.url;
|
||||||
|
}
|
||||||
|
|
||||||
|
const urlObjChecked = new URL(urlToCheck);
|
||||||
|
if (urlObjChecked.hostname.includes('youtube.com') || urlObjChecked.hostname.includes('youtu.be')) {
|
||||||
isYoutube = true;
|
isYoutube = true;
|
||||||
videoId = urlObj.searchParams.get('v');
|
videoId = urlObjChecked.searchParams.get('v');
|
||||||
if (!videoId && urlObj.hostname.includes('youtu.be')) {
|
if (!videoId && urlObjChecked.hostname.includes('youtu.be')) {
|
||||||
videoId = urlObj.pathname.substring(1);
|
videoId = urlObjChecked.pathname.substring(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
@@ -1586,31 +1637,13 @@ const SlideCreator = {
|
|||||||
|
|
||||||
if (isYoutube && videoId) {
|
if (isYoutube && videoId) {
|
||||||
isVideo = true;
|
isVideo = true;
|
||||||
|
// Create container for YouTube API
|
||||||
const videoClass = CONFIG.fullWidthVideo ? "video-backdrop-full" : "video-backdrop-default";
|
const videoClass = CONFIG.fullWidthVideo ? "video-backdrop-full" : "video-backdrop-default";
|
||||||
|
|
||||||
if (CONFIG.enableUpstreamTrailerLayout) {
|
|
||||||
// UPSTREAM LAYOUT: Wrapper Container
|
|
||||||
const videoContainer = SlideUtils.createElement("div", {
|
|
||||||
className: "video-container",
|
|
||||||
id: `video-container-${itemId}`
|
|
||||||
});
|
|
||||||
|
|
||||||
const playerDiv = SlideUtils.createElement("div", {
|
|
||||||
id: `youtube-player-${itemId}`
|
|
||||||
});
|
|
||||||
|
|
||||||
videoContainer.appendChild(playerDiv);
|
|
||||||
slide.appendChild(videoContainer); // Append container first
|
|
||||||
|
|
||||||
isVideo = false;
|
|
||||||
hasUpstreamVideo = true;
|
|
||||||
} else {
|
|
||||||
// ENHANCED LAYOUT: Direct Backdrop Replacement
|
|
||||||
backdrop = SlideUtils.createElement("div", {
|
backdrop = SlideUtils.createElement("div", {
|
||||||
className: `backdrop video-backdrop ${videoClass}`,
|
className: `backdrop video-backdrop ${videoClass}`,
|
||||||
id: `youtube-player-${itemId}`
|
id: `youtube-player-${itemId}`
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize YouTube Player
|
// Initialize YouTube Player
|
||||||
SlideUtils.loadYouTubeIframeAPI().then(() => {
|
SlideUtils.loadYouTubeIframeAPI().then(() => {
|
||||||
@@ -1624,7 +1657,11 @@ const SlideCreator = {
|
|||||||
fs: 0,
|
fs: 0,
|
||||||
iv_load_policy: 3,
|
iv_load_policy: 3,
|
||||||
rel: 0,
|
rel: 0,
|
||||||
loop: 0
|
loop: 0,
|
||||||
|
playsinline: 1,
|
||||||
|
origin: window.location.origin,
|
||||||
|
widget_referrer: window.location.href,
|
||||||
|
enablejsapi: 1
|
||||||
};
|
};
|
||||||
|
|
||||||
// Determine video quality
|
// Determine video quality
|
||||||
@@ -1659,6 +1696,12 @@ 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');
|
||||||
|
}
|
||||||
|
|
||||||
// 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;
|
||||||
@@ -1675,12 +1718,32 @@ 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}"]`);
|
||||||
if (slide && slide.classList.contains('active')) {
|
const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
|
||||||
|
|
||||||
|
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)
|
||||||
setTimeout(() => {
|
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 in timeout:", e); }
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (event.target.getPlayerState() !== YT.PlayerState.PLAYING &&
|
if (event.target.getPlayerState() !== YT.PlayerState.PLAYING &&
|
||||||
event.target.getPlayerState() !== YT.PlayerState.BUFFERING) {
|
event.target.getPlayerState() !== YT.PlayerState.BUFFERING) {
|
||||||
console.warn(`Autoplay blocked for ${itemId}, attempting muted fallback`);
|
console.warn(`Autoplay blocked for ${itemId}, attempting muted fallback`);
|
||||||
@@ -1689,6 +1752,9 @@ const SlideCreator = {
|
|||||||
}
|
}
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
|
||||||
|
if (!STATE.slideshow.autoplayTimeouts) STATE.slideshow.autoplayTimeouts = [];
|
||||||
|
STATE.slideshow.autoplayTimeouts.push(timeoutId);
|
||||||
|
|
||||||
// Pause slideshow timer when video starts if configured
|
// 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();
|
||||||
@@ -1696,15 +1762,6 @@ const SlideCreator = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
'onStateChange': (event) => {
|
'onStateChange': (event) => {
|
||||||
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
|
||||||
const videoContainer = slide ? slide.querySelector('.video-container') : null;
|
|
||||||
|
|
||||||
if (event.data === YT.PlayerState.PLAYING) {
|
|
||||||
if (videoContainer) videoContainer.classList.add('active');
|
|
||||||
} else {
|
|
||||||
if (videoContainer) videoContainer.classList.remove('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.data === YT.PlayerState.ENDED) {
|
if (event.data === YT.PlayerState.ENDED) {
|
||||||
if (CONFIG.waitForTrailerToEnd) {
|
if (CONFIG.waitForTrailerToEnd) {
|
||||||
SlideshowManager.nextSlide();
|
SlideshowManager.nextSlide();
|
||||||
@@ -1713,7 +1770,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();
|
||||||
@@ -1730,7 +1788,7 @@ const SlideCreator = {
|
|||||||
|
|
||||||
const videoAttributes = {
|
const videoAttributes = {
|
||||||
className: "backdrop video-backdrop",
|
className: "backdrop video-backdrop",
|
||||||
src: trailerUrl,
|
src: (typeof trailerUrl === 'object' ? trailerUrl.url : trailerUrl),
|
||||||
autoplay: false,
|
autoplay: false,
|
||||||
preload: "auto",
|
preload: "auto",
|
||||||
loop: false,
|
loop: false,
|
||||||
@@ -1749,7 +1807,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();
|
||||||
}
|
}
|
||||||
@@ -1766,30 +1835,12 @@ const SlideCreator = {
|
|||||||
SlideshowManager.nextSlide();
|
SlideshowManager.nextSlide();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (CONFIG.enableUpstreamTrailerLayout) {
|
|
||||||
// Wrap in container
|
|
||||||
const videoContainer = SlideUtils.createElement("div", {
|
|
||||||
className: "video-container",
|
|
||||||
id: `video-container-${itemId}`
|
|
||||||
});
|
|
||||||
backdrop.style.position = "";
|
|
||||||
videoContainer.appendChild(backdrop);
|
|
||||||
slide.appendChild(videoContainer);
|
|
||||||
|
|
||||||
isVideo = false;
|
|
||||||
hasUpstreamVideo = true;
|
|
||||||
|
|
||||||
backdrop.addEventListener('play', () => videoContainer.classList.add('active'));
|
|
||||||
backdrop.addEventListener('pause', () => videoContainer.classList.remove('active'));
|
|
||||||
backdrop.addEventListener('ended', () => videoContainer.classList.remove('active'));
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!isVideo) {
|
if (!isVideo) {
|
||||||
backdrop = SlideUtils.createElement("img", {
|
backdrop = SlideUtils.createElement("img", {
|
||||||
className: hasUpstreamVideo ? "backdrop high-quality with-video" : "backdrop high-quality",
|
className: "backdrop high-quality",
|
||||||
src: this.buildImageUrl(item, "Backdrop", 0, serverAddress, 60),
|
src: this.buildImageUrl(item, "Backdrop", 0, serverAddress, 60),
|
||||||
alt: LocalizationUtils.getLocalizedString('Backdrop', 'Backdrop'),
|
alt: LocalizationUtils.getLocalizedString('Backdrop', 'Backdrop'),
|
||||||
loading: "eager",
|
loading: "eager",
|
||||||
@@ -2039,11 +2090,20 @@ const SlideCreator = {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates a trailer button
|
* Creates a trailer button
|
||||||
* @param {string} url - Trailer URL
|
* @param {string|Object} trailerInfo - Trailer URL string or object {id, url}
|
||||||
* @returns {HTMLElement} Trailer button element
|
* @returns {HTMLElement} Trailer button element
|
||||||
*/
|
*/
|
||||||
createTrailerButton(url) {
|
createTrailerButton(trailerInfo) {
|
||||||
const trailerText = LocalizationUtils.getLocalizedString('Trailer', 'Trailer');
|
const trailerText = LocalizationUtils.getLocalizedString('Trailer', 'Trailer');
|
||||||
|
|
||||||
|
let url = trailerInfo;
|
||||||
|
let localTrailerId = null;
|
||||||
|
|
||||||
|
if (typeof trailerInfo === 'object' && trailerInfo !== null) {
|
||||||
|
url = trailerInfo.url;
|
||||||
|
localTrailerId = trailerInfo.id;
|
||||||
|
}
|
||||||
|
|
||||||
return SlideUtils.createElement("button", {
|
return SlideUtils.createElement("button", {
|
||||||
className: "detailButton trailer-button",
|
className: "detailButton trailer-button",
|
||||||
innerHTML: `<span class="material-icons">movie</span> <span class="trailer-text">${trailerText}</span>`,
|
innerHTML: `<span class="material-icons">movie</span> <span class="trailer-text">${trailerText}</span>`,
|
||||||
@@ -2051,7 +2111,13 @@ const SlideCreator = {
|
|||||||
onclick: (e) => {
|
onclick: (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
||||||
|
if (localTrailerId) {
|
||||||
|
// Play local trailer using native player
|
||||||
|
ApiUtils.playItem(localTrailerId);
|
||||||
|
} else {
|
||||||
SlideUtils.openVideoModal(url);
|
SlideUtils.openVideoModal(url);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
@@ -2196,6 +2262,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));
|
||||||
@@ -2224,91 +2300,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);
|
||||||
|
|
||||||
@@ -2317,7 +2329,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;
|
||||||
@@ -2400,17 +2413,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);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -2445,7 +2460,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]) {
|
||||||
@@ -2586,32 +2608,153 @@ 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
|
||||||
*/
|
*/
|
||||||
stopAllPlayback() {
|
stopAllPlayback() {
|
||||||
// 1. Pause all YouTube players
|
// Clear any pending autoplay timeouts
|
||||||
|
if (STATE.slideshow.autoplayTimeouts) {
|
||||||
|
STATE.slideshow.autoplayTimeouts.forEach(id => clearTimeout(id));
|
||||||
|
STATE.slideshow.autoplayTimeouts = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 1. Stop all YouTube players
|
||||||
if (STATE.slideshow.videoPlayers) {
|
if (STATE.slideshow.videoPlayers) {
|
||||||
Object.values(STATE.slideshow.videoPlayers).forEach(player => {
|
Object.values(STATE.slideshow.videoPlayers).forEach(player => {
|
||||||
try {
|
try {
|
||||||
if (player && typeof player.pauseVideo === 'function') {
|
if (player && typeof player.stopVideo === 'function') {
|
||||||
|
player.stopVideo();
|
||||||
|
if (typeof player.clearVideo === 'function') {
|
||||||
|
player.clearVideo();
|
||||||
|
}
|
||||||
|
} else if (player && typeof player.pauseVideo === 'function') {
|
||||||
player.pauseVideo();
|
player.pauseVideo();
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.warn("Error pausing YouTube player:", e);
|
console.warn("Error pausing/stopping YouTube player:", e);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -2629,20 +2772,8 @@ 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
|
// Use playCurrentVideo to properly restore video with correct mute state
|
||||||
const ytPlayer = STATE.slideshow.videoPlayers[currentItemId];
|
this.playCurrentVideo(currentSlide, currentItemId);
|
||||||
if (ytPlayer && typeof ytPlayer.playVideo === 'function') {
|
|
||||||
ytPlayer.playVideo();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 2. Try HTML5 Video
|
|
||||||
const html5Video = currentSlide.querySelector('video');
|
|
||||||
if (html5Video) {
|
|
||||||
if (STATE.slideshow.isMuted) {
|
|
||||||
html5Video.muted = true;
|
|
||||||
}
|
|
||||||
html5Video.play().catch(e => console.warn("Error resuming HTML5 video:", e));
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -2702,29 +2833,64 @@ const SlideshowManager = {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const activeElement = document.activeElement;
|
||||||
|
const isTvDevice = window.browser && window.browser.tv;
|
||||||
|
const isTvLayout = window.layoutManager && window.layoutManager.tv;
|
||||||
|
const hasTvClass = document.documentElement.classList.contains('layout-tv') || document.body.classList.contains('layout-tv');
|
||||||
|
const isTvMode = isTvDevice || isTvLayout || hasTvClass;
|
||||||
|
|
||||||
|
// Check Focus State
|
||||||
|
const isBodyFocused = activeElement === document.body;
|
||||||
|
const hasDirectFocus = container.contains(activeElement) || activeElement === container;
|
||||||
|
|
||||||
|
// Determine if we should handle navigation keys (Arrows, Space, M)
|
||||||
|
// TV Mode: Strict focus required (must be on slideshow)
|
||||||
|
// Desktop Mode: Loose focus allowed (slideshow OR body/nothing focused)
|
||||||
|
let canControlSlideshow = isTvMode ? hasDirectFocus : (hasDirectFocus || isBodyFocused);
|
||||||
|
|
||||||
|
// Check for Input Fields (always ignore typing)
|
||||||
|
const isInputElement = activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable);
|
||||||
|
if (isInputElement) return;
|
||||||
|
|
||||||
|
// Check active video players (ignore if video is playing/overlay is open)
|
||||||
|
const videoPlayer = document.querySelector('.videoPlayerContainer');
|
||||||
|
const trailerPlayer = document.querySelector('.youtubePlayerContainer');
|
||||||
|
const isVideoOpen = (videoPlayer && !videoPlayer.classList.contains('hide')) || (trailerPlayer && !trailerPlayer.classList.contains('hide'));
|
||||||
|
if (isVideoOpen) return;
|
||||||
|
|
||||||
switch (e.key) {
|
switch (e.key) {
|
||||||
case "ArrowRight":
|
case "ArrowRight":
|
||||||
|
if (canControlSlideshow) {
|
||||||
SlideshowManager.nextSlide();
|
SlideshowManager.nextSlide();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "ArrowLeft":
|
case "ArrowLeft":
|
||||||
|
if (canControlSlideshow) {
|
||||||
SlideshowManager.prevSlide();
|
SlideshowManager.prevSlide();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case " ": // Space bar
|
case " ": // Space bar
|
||||||
|
if (canControlSlideshow) {
|
||||||
this.togglePause();
|
this.togglePause();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "m": // Mute toggle
|
case "m": // Mute toggle
|
||||||
case "M":
|
case "M":
|
||||||
|
if (canControlSlideshow) {
|
||||||
this.toggleMute();
|
this.toggleMute();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case "Enter":
|
case "Enter":
|
||||||
|
// Enter always requires direct focus on the slideshow to avoid conflicts
|
||||||
|
if (hasDirectFocus) {
|
||||||
const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
|
const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
|
||||||
if (currentItemId) {
|
if (currentItemId) {
|
||||||
if (window.Emby && window.Emby.Page) {
|
if (window.Emby && window.Emby.Page) {
|
||||||
@@ -2736,6 +2902,7 @@ const SlideshowManager = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -2897,7 +3064,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;
|
||||||
@@ -3295,76 +3462,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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -9,12 +9,36 @@
|
|||||||
"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.5.0.12",
|
"version": "1.6.1.3",
|
||||||
"changelog": "- fix: keyboard controls in TV mode\n- Add sorting options for content\n- Update mediaBarEnhanced.js and mediaBarEnhanced.css with version 4.0.1 from original repo",
|
"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.5.0.12/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.1.3/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||||
"checksum": "f43d2193b1da2bd319668c73ab7a19ee",
|
"checksum": "e5c4f3d11b22621e013bdd0784cf35a6",
|
||||||
"timestamp": "2026-02-09T15:10:06Z"
|
"timestamp": "2026-02-12T00:43:52Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"version": "1.6.0.2",
|
||||||
|
"changelog": "- add local trailer support on trailer button\nfix: iOS/MacOS playback issue?",
|
||||||
|
"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",
|
||||||
|
"checksum": "cdd0208f8cc4f4b04f50e7138e508370",
|
||||||
|
"timestamp": "2026-02-10T22:07:33Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"version": "1.5.1.3",
|
||||||
|
"changelog": "- fix: iOS/MacOS playback issue?",
|
||||||
|
"targetAbi": "10.11.0.0",
|
||||||
|
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.5.1.3/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||||
|
"checksum": "9d9dbed453673d4b78acf2adaaaee126",
|
||||||
|
"timestamp": "2026-02-10T20:12:59Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"version": "1.5.0.28",
|
||||||
|
"changelog": "- fix: Keyboard controls in TV mode\n- Add sorting options for content\n- Add local trailer support\n- fix performance issue\n- Update mediaBarEnhanced.js and mediaBarEnhanced.css with version 4.0.1 from upstream repo",
|
||||||
|
"targetAbi": "10.11.0.0",
|
||||||
|
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.5.0.28/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||||
|
"checksum": "0261ff27be18d48cefa5078706954240",
|
||||||
|
"timestamp": "2026-02-10T00:35:41Z"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"version": "1.3.0.3",
|
"version": "1.3.0.3",
|
||||||
|
|||||||
Reference in New Issue
Block a user