Compare commits
87 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
343436ac56 | ||
|
|
6075e20a11 | ||
|
|
8b7def809b | ||
|
|
43950eac60 | ||
|
|
c09f265b26 | ||
|
|
379c370b4a | ||
|
|
b567307003 | ||
|
|
ff9ea9eff0 | ||
|
|
9427e3e535 | ||
|
|
19318a916d | ||
|
|
5d85284df8 | ||
|
|
2382f850b6 | ||
|
|
22041293f6 | ||
|
|
5595158f9d | ||
|
|
39f85e0c9b | ||
|
|
18a9980a0a | ||
|
|
deb426833d | ||
|
|
bf4b6da0f0 | ||
|
|
2bc7d90254 | ||
|
|
3f302d4c64 | ||
|
|
13a1cc7885 | ||
|
|
a62900f96e | ||
|
|
9d90a29a40 | ||
|
|
cd3973088e | ||
|
|
4112cfad4a | ||
|
|
2618b18df1 | ||
|
|
ef378c5e87 | ||
|
|
b8d0dd9f1a | ||
|
|
d7c44061cb | ||
|
|
9acb05d19e | ||
|
|
619d8533d2 | ||
|
|
a4b39ae3bf | ||
|
|
74a367584b | ||
|
|
06407f9121 | ||
|
|
0926493391 | ||
|
|
6dbb33be96 | ||
|
|
211d9d316a | ||
|
|
329733246d | ||
|
|
6110e1cdd8 | ||
|
|
31c8a209a5 | ||
|
|
ad2e761bbd | ||
|
|
85f90e8fbb | ||
|
|
9f5f607168 | ||
|
|
108a644983 | ||
|
|
ab778f774f | ||
|
|
5dcb60487e | ||
|
|
9a6997f1da | ||
|
|
31d315ed8f | ||
|
|
2b1301ea0b | ||
|
|
ee8c0b8888 | ||
|
|
64ef4915b8 | ||
|
|
1f655ed7b6 | ||
|
|
0682967591 | ||
|
|
7938728f8e | ||
|
|
a0773c66eb | ||
|
|
10f2a38add | ||
|
|
9bfa3ba5ea | ||
|
|
5c00c07b8a | ||
|
|
773c49a228 | ||
|
|
41a309e0d1 | ||
|
|
43797fbb98 | ||
|
|
f13a1ba1af | ||
|
|
d489c22f28 | ||
|
|
7816c87543 | ||
|
|
720567bafc | ||
|
|
2289a1f83e | ||
|
|
a269318f58 | ||
|
|
fdb409fd3b | ||
|
|
9bb4b9d355 | ||
|
|
1e18c22937 | ||
|
|
a83913d15c | ||
|
|
2f50931beb | ||
|
|
5b14bdba35 | ||
|
|
9ba3b1e49f | ||
|
|
bf7c7fb8e8 | ||
|
|
39e29046de | ||
|
|
18260f8eac | ||
|
|
59c07f3c45 | ||
|
|
b06d1e9375 | ||
|
|
e5bf23a7bc | ||
|
|
0d7113969b | ||
|
|
f69f676a68 | ||
|
|
f448c89ef2 | ||
|
|
daf26fe53a | ||
|
|
26ef307838 | ||
|
|
c296483583 | ||
|
|
7992e20715 |
@@ -51,7 +51,31 @@ jobs:
|
||||
echo "$CHANGELOG" >> $GITHUB_ENV
|
||||
echo "EOF" >> $GITHUB_ENV
|
||||
|
||||
- name: Check if Release Already Exists
|
||||
id: check_release
|
||||
shell: bash
|
||||
run: |
|
||||
REPO_OWNER="${{ github.repository_owner }}"
|
||||
REPO_NAME="${{ github.event.repository.name }}"
|
||||
VERSION="${{ env.VERSION }}"
|
||||
TAG="v$VERSION"
|
||||
SERVER_URL="https://git.mahom03-spacecloud.de"
|
||||
|
||||
HTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" "$SERVER_URL/api/v1/repos/$REPO_OWNER/$REPO_NAME/releases/tags/$TAG")
|
||||
|
||||
if [ "$HTTP_STATUS" -eq 200 ]; then
|
||||
echo "Release $TAG already exists. Skipping release-related steps."
|
||||
echo "release_exists=true" >> $GITHUB_OUTPUT
|
||||
elif [ "$HTTP_STATUS" -eq 404 ]; then
|
||||
echo "No existing release for $TAG. Continuing."
|
||||
echo "release_exists=false" >> $GITHUB_OUTPUT
|
||||
else
|
||||
echo "Unexpected response when checking release: $HTTP_STATUS"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
- name: Build and Zip
|
||||
if: steps.check_release.outputs.release_exists == 'false'
|
||||
shell: bash
|
||||
run: |
|
||||
# Inject version from manifest into the build
|
||||
@@ -71,6 +95,7 @@ jobs:
|
||||
echo "ZIP_PATH=bin/Publish/Jellyfin.Plugin.MediaBarEnhanced.zip" >> $GITHUB_ENV
|
||||
|
||||
- name: Update manifest.json
|
||||
if: steps.check_release.outputs.release_exists == 'false'
|
||||
shell: bash
|
||||
run: |
|
||||
REPO_OWNER="${{ github.repository_owner }}"
|
||||
@@ -90,12 +115,14 @@ jobs:
|
||||
manifest.json > manifest.json.tmp && mv manifest.json.tmp manifest.json
|
||||
|
||||
- name: Commit manifest.json
|
||||
if: steps.check_release.outputs.release_exists == 'false'
|
||||
uses: stefanzweifel/git-auto-commit-action@v7
|
||||
with:
|
||||
commit_message: "Update manifest.json for release v${{ env.VERSION }} [skip ci]"
|
||||
file_pattern: manifest.json
|
||||
|
||||
- name: Create Release
|
||||
if: steps.check_release.outputs.release_exists == 'false'
|
||||
uses: akkuman/gitea-release-action@v1
|
||||
with:
|
||||
server_url: "https://git.mahom03-spacecloud.de"
|
||||
@@ -109,6 +136,7 @@ jobs:
|
||||
|
||||
# Update Message in Remote Repository
|
||||
- name: Checkout Central Manifest Repo
|
||||
if: steps.check_release.outputs.release_exists == 'false'
|
||||
uses: actions/checkout@v6
|
||||
with:
|
||||
repository: ${{ github.repository_owner }}/jellyfin-plugin-manifest
|
||||
@@ -116,6 +144,7 @@ jobs:
|
||||
token: ${{ secrets.JELLYFIN_PLUGIN_MANIFEST_UPDATER_PAT }}
|
||||
|
||||
- name: Update Central Manifest
|
||||
if: steps.check_release.outputs.release_exists == 'false'
|
||||
shell: bash
|
||||
run: |
|
||||
cd central-manifest
|
||||
@@ -171,6 +200,7 @@ jobs:
|
||||
manifest.json > manifest.json.tmp && mv manifest.json.tmp manifest.json
|
||||
|
||||
- name: Commit and Push Central Manifest
|
||||
if: steps.check_release.outputs.release_exists == 'false'
|
||||
run: |
|
||||
cd central-manifest
|
||||
git config user.name "CodeDevMLH"
|
||||
|
||||
33
.github/workflows/release_automation.yml
vendored
33
.github/workflows/release_automation.yml
vendored
@@ -52,7 +52,32 @@ jobs:
|
||||
echo "$CHANGELOG" >> $GITHUB_ENV
|
||||
echo "EOF" >> $GITHUB_ENV
|
||||
|
||||
- name: Check if Release Already Exists
|
||||
id: check_release
|
||||
shell: bash
|
||||
run: |
|
||||
REPO_OWNER="${{ github.repository_owner }}"
|
||||
REPO_NAME="${{ github.event.repository.name }}"
|
||||
VERSION="${{ env.VERSION }}"
|
||||
TAG="v$VERSION"
|
||||
API_URL="https://api.github.com/repos/$REPO_OWNER/$REPO_NAME/releases/tags/$TAG"
|
||||
|
||||
HTTP_STATUS=$(curl -s -o /dev/null -w "%{http_code}" -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" "$API_URL")
|
||||
|
||||
if [ "$HTTP_STATUS" -eq 200 ]; then
|
||||
echo "Release $TAG already exists. Skipping release-related steps."
|
||||
echo "release_exists=true" >> $GITHUB_OUTPUT
|
||||
elif [ "$HTTP_STATUS" -eq 404 ]; then
|
||||
echo "No existing release for $TAG. Continuing."
|
||||
echo "release_exists=false" >> $GITHUB_OUTPUT
|
||||
else
|
||||
echo "Unexpected response when checking release: $HTTP_STATUS"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
|
||||
- name: Build and Zip
|
||||
if: steps.check_release.outputs.release_exists == 'false'
|
||||
shell: bash
|
||||
run: |
|
||||
# Inject version from manifest into the build
|
||||
@@ -72,6 +97,7 @@ jobs:
|
||||
echo "ZIP_PATH=bin/Publish/Jellyfin.Plugin.MediaBarEnhanced.zip" >> $GITHUB_ENV
|
||||
|
||||
- name: Update manifest.json
|
||||
if: steps.check_release.outputs.release_exists == 'false'
|
||||
shell: bash
|
||||
run: |
|
||||
REPO_OWNER="${{ github.repository_owner }}"
|
||||
@@ -91,13 +117,14 @@ jobs:
|
||||
manifest.json > manifest.json.tmp && mv manifest.json.tmp manifest.json
|
||||
|
||||
- name: Commit manifest.json
|
||||
if: steps.check_release.outputs.release_exists == 'false'
|
||||
uses: stefanzweifel/git-auto-commit-action@v7
|
||||
with:
|
||||
commit_message: "Update manifest.json for release v${{ env.VERSION }} [skip ci]"
|
||||
file_pattern: manifest.json
|
||||
|
||||
- name: Generate Commit Log
|
||||
if: success()
|
||||
if: success() && steps.check_release.outputs.release_exists == 'false'
|
||||
shell: bash
|
||||
run: |
|
||||
echo "Generating commit log since last tag..."
|
||||
@@ -131,6 +158,7 @@ jobs:
|
||||
cat release_body.txt
|
||||
|
||||
- name: Create Release
|
||||
if: steps.check_release.outputs.release_exists == 'false'
|
||||
uses: softprops/action-gh-release@v2
|
||||
with:
|
||||
tag_name: "v${{ env.VERSION }}"
|
||||
@@ -145,6 +173,7 @@ jobs:
|
||||
|
||||
# Update Message in Remote Repository
|
||||
- name: Checkout Central Manifest Repo
|
||||
if: steps.check_release.outputs.release_exists == 'false'
|
||||
uses: actions/checkout@v6
|
||||
with:
|
||||
repository: ${{ github.repository_owner }}/jellyfin-plugin-manifest
|
||||
@@ -152,6 +181,7 @@ jobs:
|
||||
token: ${{ secrets.JELLYFIN_PLUGIN_MANIFEST_UPDATER_PAT }}
|
||||
|
||||
- name: Update Central Manifest
|
||||
if: steps.check_release.outputs.release_exists == 'false'
|
||||
shell: bash
|
||||
run: |
|
||||
cd central-manifest
|
||||
@@ -207,6 +237,7 @@ jobs:
|
||||
manifest.json > manifest.json.tmp && mv manifest.json.tmp manifest.json
|
||||
|
||||
- name: Commit and Push Central Manifest
|
||||
if: steps.check_release.outputs.release_exists == 'false'
|
||||
run: |
|
||||
cd central-manifest
|
||||
git config user.name "CodeDevMLH"
|
||||
|
||||
@@ -22,6 +22,9 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
|
||||
public bool EnableVideoBackdrop { get; set; } = true;
|
||||
public bool UseSponsorBlock { get; set; } = true;
|
||||
public bool PreferLocalTrailers { get; set; } = false;
|
||||
public bool RandomizeLocalTrailers { get; set; } = false;
|
||||
public bool PreferLocalBackdrops { get; set; } = false;
|
||||
public bool RandomizeThemeVideos { get; set; } = false;
|
||||
public bool WaitForTrailerToEnd { get; set; } = true;
|
||||
public bool StartMuted { get; set; } = true;
|
||||
public bool FullWidthVideo { get; set; } = true;
|
||||
@@ -38,6 +41,7 @@ namespace Jellyfin.Plugin.MediaBarEnhanced.Configuration
|
||||
public bool IsEnabled { get; set; } = true;
|
||||
public bool EnableClientSideSettings { get; set; } = false;
|
||||
public bool ApplyLimitsToCustomIds { get; set; } = false;
|
||||
public bool IncludeWatchedContent { get; set; } = false;
|
||||
public string SortBy { get; set; } = "Random";
|
||||
public string SortOrder { get; set; } = "Ascending";
|
||||
}
|
||||
|
||||
@@ -22,15 +22,15 @@
|
||||
<hr style="max-width: 800px; margin: 1em 0;">
|
||||
|
||||
<div style="margin-bottom: 1.5em;">
|
||||
<button class="jellyfin-tab-button active" onclick="showTab('basic', this)"
|
||||
<button class="jellyfin-tab-button active" onclick="showTab('media-bar-enhanced-basic', this)"
|
||||
style="background: none; border: none; color: #fff; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid #00a4dc;">
|
||||
<h3>General Settings</h3>
|
||||
</button>
|
||||
<button class="jellyfin-tab-button" onclick="showTab('custom', this)"
|
||||
<button class="jellyfin-tab-button" onclick="showTab('media-bar-enhanced-custom', this)"
|
||||
style="background: none; border: none; color: #ccc; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid transparent;">
|
||||
<h3>Custom Content</h3>
|
||||
</button>
|
||||
<button class="jellyfin-tab-button" onclick="showTab('advanced', this)"
|
||||
<button class="jellyfin-tab-button" onclick="showTab('media-bar-enhanced-advanced', this)"
|
||||
style="background: none; border: none; color: #ccc; cursor: pointer; transition: color 0.3s, border-bottom 0.3s; padding: 0.5em 1em; border-bottom: 2px solid transparent;">
|
||||
<h3>Advanced Settings</h3>
|
||||
</button>
|
||||
@@ -39,11 +39,11 @@
|
||||
<form id="mediaBarEnhancedConfigForm">
|
||||
|
||||
<!-- BASIC TAB -->
|
||||
<div id="basic" class="tab-content">
|
||||
<div id="media-bar-enhanced-basic" class="tab-content">
|
||||
<h2 class="sectionTitle">Main Plugin Settings</h2>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" id="IsEnabled" name="IsEnabled" />
|
||||
<input is="emby-checkbox" type="checkbox" id="MediaBarIsEnabled" name="MediaBarIsEnabled" />
|
||||
<span>Enable Media Bar Enhanced Plugin</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Enable or disable the entire plugin functionality.</div>
|
||||
@@ -65,6 +65,14 @@
|
||||
</label>
|
||||
<div class="fieldDescription">If enabled, local trailers will be preferred over remote (YouTube) trailers.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription" id="PreferLocalBackdropsContainer">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" id="PreferLocalBackdrops"
|
||||
name="PreferLocalBackdrops" />
|
||||
<span>Prefer Local Backdrops / Theme Videos</span>
|
||||
</label>
|
||||
<div class="fieldDescription">If enabled, local backdrop videos (Theme Videos) will be preferred over remote and local trailers.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" id="WaitForTrailerToEnd"
|
||||
@@ -93,7 +101,7 @@
|
||||
</div>
|
||||
|
||||
<!-- CUSTOM CONTENT TAB -->
|
||||
<div id="custom" class="tab-content" style="display:none;">
|
||||
<div id="media-bar-enhanced-custom" class="tab-content" style="display:none;">
|
||||
<!-- Default Custom Media IDs -->
|
||||
<h2 class="sectionTitle">Custom Media IDs</h2>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
@@ -115,14 +123,10 @@
|
||||
</div>
|
||||
<div id="customMediaIdsContainer">
|
||||
<div class="inputContainer">
|
||||
<label class="inputLabel inputLabelUnfocused" for="CustomMediaIds">Default Media/Collection/Playlist
|
||||
IDs
|
||||
(Newline or Comma separated)</label>
|
||||
<label class="inputLabel inputLabelUnfocused" for="CustomMediaIds">Default Media/Collection/Playlist IDs (Newline or Comma-separated)</label>
|
||||
<textarea class="emby-textarea" is="emby-textarea" id="CustomMediaIds" name="CustomMediaIds"
|
||||
style="width: 100%; height: 150px; font-family: monospace;"></textarea>
|
||||
<div class="fieldDescription">Enter the IDs of the items you want to show in the slideshow as
|
||||
your default content.
|
||||
You can separate them by new line or comma.
|
||||
<div class="fieldDescription">Enter the IDs of the items you want to show in the slideshow as your default content. You can separate them by new line or comma.
|
||||
<br><br>
|
||||
<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 [JellyfinItemId] DESCRIPTION</code>.
|
||||
@@ -132,11 +136,9 @@
|
||||
<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>
|
||||
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>
|
||||
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>
|
||||
<br><br>
|
||||
<b>Note:</b> If using a <b>Collection Name</b> (instead of an ID) combined with a description, you <b>MUST</b> use
|
||||
the pipe (|) separator.
|
||||
<b>Note:</b> If using a <b>Collection Name</b> (instead of an ID) combined with a description, you <b>MUST</b> use the pipe (|) separator.
|
||||
<br>
|
||||
<b>Note:</b> The separator <b>MUST NOT</b> be a hex character (0-9, a-f).
|
||||
</div>
|
||||
@@ -158,10 +160,16 @@
|
||||
name="EnableSeasonalContent" />
|
||||
<span>Enable Seasonal Content</span>
|
||||
</label>
|
||||
<div class="fieldDescription">When enabled, seasonal sections below will override the default list
|
||||
during their active date ranges. If no season matches the current date, the default Custom Media IDs above are used as fallback.</div>
|
||||
<div class="fieldDescription">When enabled, seasonal sections below will override the default list or random selection
|
||||
during their active date ranges. If no season matches the current date, the default Custom Media IDs above or random selection are used as fallback.</div>
|
||||
</div>
|
||||
<div id="seasonalContentContainer" style="display: none;">
|
||||
|
||||
<div style="background-color: rgba(255, 255, 255, 0.05); border-left: 4px solid #00a4dc; border-radius: 4px; padding: 1em 1.5em; margin: 1.5em 0; display: flex; align-items: center; gap: 1em;">
|
||||
<i class="material-icons" style="color: #00a4dc; font-size: 24px;">info</i>
|
||||
<div>Define rules to automatically select a seasonal selection of items based on the date. Rules are evaluated from top to bottom. The first matching rule wins.</div>
|
||||
</div>
|
||||
|
||||
<div id="seasonalSectionsList"></div>
|
||||
<button is="emby-button" type="button" id="addSeasonBtn" class="raised emby-button"
|
||||
style="margin-top: 1em; display: inline-flex; align-items: center; gap: 0.4em;">
|
||||
@@ -173,7 +181,7 @@
|
||||
</div>
|
||||
|
||||
<!-- ADVANCED TAB -->
|
||||
<div id="advanced" class="tab-content" style="display:none;">
|
||||
<div id="media-bar-enhanced-advanced" class="tab-content" style="display:none;">
|
||||
<h2 class="sectionTitle">Features</h2>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
@@ -193,12 +201,28 @@
|
||||
<div class="fieldDescription">If enabled, users will see a media bar icon in the header to
|
||||
override settings (like disabling the bar or trailer backdrops) locally on their device.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" id="RandomizeThemeVideos"
|
||||
name="RandomizeThemeVideos" />
|
||||
<span>Randomize Backdrop Video</span>
|
||||
</label>
|
||||
<div class="fieldDescription">If enabled, a random video from the backdrops/theme videos will be selected instead of the first one (if multiple exist).</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" id="RandomizeLocalTrailers"
|
||||
name="RandomizeLocalTrailers" />
|
||||
<span>Randomize Local Trailer</span>
|
||||
</label>
|
||||
<div class="fieldDescription">If enabled, a random local trailer will be selected instead of the first one (if multiple exist).</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" id="UseSponsorBlock" name="UseSponsorBlock" />
|
||||
<span>Use SponsorBlock</span>
|
||||
</label>
|
||||
<div class="fieldDescription">Skip intro/outro segments in YouTube trailers.</div>
|
||||
<div class="fieldDescription">Skip intro/outro segments in YouTube trailers (if data is available).</div>
|
||||
</div>
|
||||
<div class="selectContainer">
|
||||
<label class="selectLabel" for="PreferredVideoQuality">Preferred YouTube Quality</label>
|
||||
@@ -367,6 +391,14 @@
|
||||
<input is="emby-input" type="number" id="MaxPlotLength" name="MaxPlotLength" />
|
||||
<div class="fieldDescription">Maximum characters for the plot summary.</div>
|
||||
</div>
|
||||
<div class="checkboxContainer checkboxContainer-withDescription">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" id="IncludeWatchedContent"
|
||||
name="IncludeWatchedContent" />
|
||||
<span>Include Watched Content</span>
|
||||
</label>
|
||||
<div class="fieldDescription">If enabled, watched content will be included in the random selection results.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -417,7 +449,7 @@
|
||||
ApiClient.getPluginConfiguration(MediaBarEnhancedConfigurationPage.pluginId).then(function (config) {
|
||||
|
||||
var keys = [
|
||||
'IsEnabled', 'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance',
|
||||
'MediaBarIsEnabled', 'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance',
|
||||
'LoadingCheckInterval', 'MaxPlotLength', 'MaxMovies', 'MaxTvShows',
|
||||
'MaxItems', 'PreloadCount', 'FadeTransitionDuration', 'MaxPaginationDots',
|
||||
'SlideAnimationEnabled', 'EnableVideoBackdrop', 'UseSponsorBlock',
|
||||
@@ -425,7 +457,9 @@
|
||||
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
|
||||
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
|
||||
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
|
||||
'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections'
|
||||
'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
|
||||
'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
|
||||
'IncludeWatchedContent'
|
||||
];
|
||||
|
||||
keys.forEach(function (key) {
|
||||
@@ -476,12 +510,15 @@
|
||||
// Handle Prefer Local Trailers visibility
|
||||
var enableVideoBackdropCheckbox = page.querySelector('#EnableVideoBackdrop');
|
||||
var preferLocalContainer = page.querySelector('#PreferLocalTrailersContainer');
|
||||
var preferLocalBackdropsContainer = page.querySelector('#PreferLocalBackdropsContainer');
|
||||
|
||||
function updatePreferLocalVisibility() {
|
||||
if (enableVideoBackdropCheckbox && enableVideoBackdropCheckbox.checked) {
|
||||
if (preferLocalContainer) preferLocalContainer.style.display = 'block';
|
||||
if (preferLocalBackdropsContainer) preferLocalBackdropsContainer.style.display = 'block';
|
||||
} else {
|
||||
if (preferLocalContainer) preferLocalContainer.style.display = 'none';
|
||||
if (preferLocalBackdropsContainer) preferLocalBackdropsContainer.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -503,7 +540,7 @@
|
||||
|
||||
var config = {};
|
||||
var keys = [
|
||||
'IsEnabled', 'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance',
|
||||
'MediaBarIsEnabled', 'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance',
|
||||
'LoadingCheckInterval', 'MaxPlotLength', 'MaxMovies', 'MaxTvShows',
|
||||
'MaxItems', 'PreloadCount', 'FadeTransitionDuration', 'MaxPaginationDots',
|
||||
'SlideAnimationEnabled', 'EnableVideoBackdrop', 'UseSponsorBlock',
|
||||
@@ -511,7 +548,9 @@
|
||||
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
|
||||
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
|
||||
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
|
||||
'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections'
|
||||
'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
|
||||
'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
|
||||
'IncludeWatchedContent'
|
||||
];
|
||||
|
||||
keys.forEach(function (key) {
|
||||
@@ -579,14 +618,18 @@
|
||||
|
||||
div.innerHTML =
|
||||
'<div class="inputContainer" style="margin-bottom: 0.5em;">' +
|
||||
' <label class="inputLabel" style="font-size: 1.2em; font-weight: bold; margin-bottom:0.5em; display:block;">' + labelText + '</label>' +
|
||||
' <div style="display: flex; align-items: center;">' +
|
||||
' <div style="flex-grow:1;">' +
|
||||
' <input is="emby-input" type="text" class="emby-input section-name" value="' + (data.Name || '') + '" />' +
|
||||
' <div style="display: flex; align-items: center; justify-content: space-between;">' +
|
||||
' <label class="inputLabel section-title" style="font-size: 1.2em; font-weight: bold; margin-bottom:0.5em; display:block;">' + labelText + '</label>' +
|
||||
' <div style="display: flex; gap: 0.5em;">' +
|
||||
' <button type="button" is="paper-icon-button-light" class="btn-move-up" title="Move Up"><i class="material-icons">arrow_upward</i></button>' +
|
||||
' <button type="button" is="paper-icon-button-light" class="btn-move-down" title="Move Down"><i class="material-icons">arrow_downward</i></button>' +
|
||||
' <button type="button" is="paper-icon-button-light" class="btn-remove" title="Remove" style="color: #a94442;"><i class="material-icons">delete</i></button>' +
|
||||
' </div>' +
|
||||
' <button type="button" class="raised emby-button remove-section" style="background: #a94442; min-width: unset; margin-left: 1em;">Remove</button>' +
|
||||
' </div>' +
|
||||
' <div class="fieldDescription">Name of the season</div>' +
|
||||
' <div class="inputContainer">' +
|
||||
' <input is="emby-input" type="text" class="emby-input section-name" value="' + (data.Name || '') + '" />' +
|
||||
' <div class="fieldDescription">Name of the season</div>' +
|
||||
' </div>' +
|
||||
'</div>' +
|
||||
'<div class="inputContainer" style="margin-bottom: 1em;">' +
|
||||
' <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Active Period</label>' +
|
||||
@@ -603,16 +646,41 @@
|
||||
'<div class="inputContainer">' +
|
||||
' <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Media IDs</label>' +
|
||||
' <textarea is="emby-textarea" class="emby-textarea section-ids" style="width: 100%; height: 80px; font-family: monospace;">' + (data.MediaIds || '') + '</textarea>' +
|
||||
' <div class="fieldDescription">Comma-separated list of Movie/Series/Collection IDs to show during this season.</div>' +
|
||||
' <div class="fieldDescription">Comma-separated or Newline separated list of Movie/Series/Collection IDs to show during this season.<br>Same options available as for the default media IDs.</div>' +
|
||||
'</div>';
|
||||
|
||||
div.querySelector('.remove-section').addEventListener('click', function() {
|
||||
div.querySelector('.btn-remove').addEventListener('click', function() {
|
||||
div.remove();
|
||||
MediaBarEnhancedConfigurationPage.updateSectionTitles(container);
|
||||
});
|
||||
|
||||
div.querySelector('.btn-move-up').addEventListener('click', function() {
|
||||
if (div.previousElementSibling) {
|
||||
container.insertBefore(div, div.previousElementSibling);
|
||||
MediaBarEnhancedConfigurationPage.updateSectionTitles(container);
|
||||
}
|
||||
});
|
||||
|
||||
div.querySelector('.btn-move-down').addEventListener('click', function() {
|
||||
if (div.nextElementSibling) {
|
||||
container.insertBefore(div.nextElementSibling, div);
|
||||
MediaBarEnhancedConfigurationPage.updateSectionTitles(container);
|
||||
}
|
||||
});
|
||||
|
||||
container.appendChild(div);
|
||||
},
|
||||
|
||||
updateSectionTitles: function(container) {
|
||||
var sections = container.querySelectorAll('.seasonal-section');
|
||||
sections.forEach(function(section, index) {
|
||||
var title = section.querySelector('.section-title');
|
||||
if (title) {
|
||||
title.innerText = 'Season list #' + (index + 1);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getSeasonalSectionsFromUI: function(page) {
|
||||
var sections = [];
|
||||
var els = page.querySelectorAll('.seasonal-section');
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
|
||||
<Title>Jellyfin Media Bar Enhanced Plugin</Title>
|
||||
<Authors>CodeDevMLH</Authors>
|
||||
<Version>1.6.1.17</Version>
|
||||
<Version>1.6.5.0</Version>
|
||||
<RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl>
|
||||
</PropertyGroup>
|
||||
|
||||
|
||||
@@ -18,8 +18,8 @@ namespace Jellyfin.Plugin.MediaBarEnhanced
|
||||
{
|
||||
private readonly IApplicationPaths _appPaths;
|
||||
private readonly ILogger<ScriptInjector> _logger;
|
||||
public const string ScriptTag = "<script src=\"/MediaBarEnhanced/Resources/mediaBarEnhanced.js\" defer></script>";
|
||||
public const string CssTag = "<link rel=\"stylesheet\" href=\"/MediaBarEnhanced/Resources/mediaBarEnhanced.css\" />";
|
||||
public const string ScriptTag = "<script src=\"../MediaBarEnhanced/Resources/mediaBarEnhanced.js\" defer></script>";
|
||||
public const string CssTag = "<link rel=\"stylesheet\" href=\"../MediaBarEnhanced/Resources/mediaBarEnhanced.css\" />";
|
||||
public const string ScriptMarker = "</body>";
|
||||
public const string CssMarker = "</head>";
|
||||
|
||||
|
||||
@@ -42,6 +42,10 @@ const CONFIG = {
|
||||
enableVideoBackdrop: true,
|
||||
useSponsorBlock: true,
|
||||
preferLocalTrailers: false,
|
||||
randomizeLocalTrailers: false,
|
||||
preferLocalBackdrops: false,
|
||||
randomizeThemeVideos: false,
|
||||
includeWatchedContent: false,
|
||||
waitForTrailerToEnd: true,
|
||||
startMuted: true,
|
||||
fullWidthVideo: true,
|
||||
@@ -433,7 +437,7 @@ const waitForApiClientAndInitialize = () => {
|
||||
|
||||
const fetchPluginConfig = async () => {
|
||||
try {
|
||||
const response = await fetch('/MediaBarEnhanced/Config');
|
||||
const response = await fetch('../MediaBarEnhanced/Config');
|
||||
if (response.ok) {
|
||||
const pluginConfig = await response.json();
|
||||
if (pluginConfig) {
|
||||
@@ -1118,8 +1122,11 @@ const ApiUtils = {
|
||||
sortParams += `&sortOrder=${CONFIG.sortOrder}`;
|
||||
}
|
||||
|
||||
// Filter by isPlayed=False unless IncludeWatchedContent is enabled
|
||||
const playedFilter = CONFIG.includeWatchedContent ? '' : '&isPlayed=False';
|
||||
|
||||
const response = await fetch(
|
||||
`${STATE.jellyfinData.serverAddress}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&${sortParams}&isPlayed=False&enableUserData=true&Limit=${CONFIG.maxItems}&fields=Id`,
|
||||
`${STATE.jellyfinData.serverAddress}/Items?IncludeItemTypes=Movie,Series&Recursive=true&hasOverview=true&imageTypes=Logo,Backdrop&${sortParams}${playedFilter}&enableUserData=true&Limit=${CONFIG.maxItems}&fields=Id`,
|
||||
{
|
||||
headers: this.getAuthHeaders(),
|
||||
}
|
||||
@@ -1258,9 +1265,20 @@ const ApiUtils = {
|
||||
*/
|
||||
async fetchSponsorBlockData(videoId) {
|
||||
if (!CONFIG.useSponsorBlock) return { intro: null, outro: null };
|
||||
|
||||
// Return cached result if available
|
||||
if (!this._sponsorBlockCache) this._sponsorBlockCache = {};
|
||||
if (this._sponsorBlockCache[videoId]) {
|
||||
return this._sponsorBlockCache[videoId];
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`https://sponsor.ajay.app/api/skipSegments?videoID=${videoId}&categories=["intro","outro"]`);
|
||||
if (!response.ok) return { intro: null, outro: null };
|
||||
if (!response.ok) {
|
||||
const result = { intro: null, outro: null };
|
||||
this._sponsorBlockCache[videoId] = result;
|
||||
return result;
|
||||
}
|
||||
|
||||
const segments = await response.json();
|
||||
let intro = null;
|
||||
@@ -1274,7 +1292,9 @@ const ApiUtils = {
|
||||
}
|
||||
});
|
||||
|
||||
return { intro, outro };
|
||||
const result = { intro, outro };
|
||||
this._sponsorBlockCache[videoId] = result;
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.warn('Error fetching SponsorBlock data:', error);
|
||||
return { intro: null, outro: null };
|
||||
@@ -1358,20 +1378,68 @@ const ApiUtils = {
|
||||
return null;
|
||||
}
|
||||
|
||||
const trailers = await response.json();
|
||||
if (trailers && trailers.length > 0) {
|
||||
const trailer = trailers[0];
|
||||
const mediaSourceId = trailer.MediaSources && trailer.MediaSources[0] ? trailer.MediaSources[0].Id : trailer.Id;
|
||||
|
||||
// Return object with ID and URL
|
||||
return {
|
||||
id: trailer.Id,
|
||||
url: `${STATE.jellyfinData.serverAddress}/Videos/${trailer.Id}/stream.mp4?Static=true&mediaSourceId=${mediaSourceId}&api_key=${STATE.jellyfinData.accessToken}`
|
||||
};
|
||||
const trailers = await response.json();
|
||||
if (trailers && trailers.length > 0) {
|
||||
|
||||
let trailer;
|
||||
if (CONFIG.randomizeLocalTrailers && trailers.length > 1) {
|
||||
const randomIndex = Math.floor(Math.random() * trailers.length);
|
||||
trailer = trailers[randomIndex];
|
||||
console.log(`Using random local trailer (${randomIndex + 1}/${trailers.length}) for ${itemId}: ${trailer.Name}`);
|
||||
} else {
|
||||
trailer = trailers[0];
|
||||
}
|
||||
|
||||
const mediaSourceId = trailer.MediaSources && trailer.MediaSources[0] ? trailer.MediaSources[0].Id : trailer.Id;
|
||||
|
||||
return {
|
||||
id: trailer.Id,
|
||||
url: `${STATE.jellyfinData.serverAddress}/Videos/${trailer.Id}/stream.mp4?mediaSourceId=${mediaSourceId}&api_key=${STATE.jellyfinData.accessToken}`
|
||||
};
|
||||
}
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.error(`Error fetching local trailer for ${itemId}:`, error);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Fetches theme videos for an item
|
||||
* @param {string} itemId - Item ID
|
||||
* @returns {Promise<Object|null>} Theme video data object {id, url} or null
|
||||
*/
|
||||
async fetchThemeVideos(itemId) {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`${STATE.jellyfinData.serverAddress}/Items/${itemId}/ThemeVideos?userId=${STATE.jellyfinData.userId}`,
|
||||
{ headers: this.getAuthHeaders() }
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
const items = Array.isArray(data) ? data : (data.Items || []);
|
||||
|
||||
if (items.length > 0) {
|
||||
let video;
|
||||
if (CONFIG.randomizeThemeVideos && items.length > 1) {
|
||||
const randomIndex = Math.floor(Math.random() * items.length);
|
||||
video = items[randomIndex];
|
||||
console.log(`Found Theme Video (Random ${randomIndex + 1}/${items.length}) via ThemeVideos endpoint: ${video.Name} (${video.Id})`);
|
||||
} else {
|
||||
video = items[0];
|
||||
console.log(`Found Theme Video (First) via ThemeVideos endpoint: ${video.Name} (${video.Id})`);
|
||||
}
|
||||
|
||||
return {
|
||||
id: video.Id,
|
||||
url: `${STATE.jellyfinData.serverAddress}/Videos/${video.Id}/stream.mp4?api_key=${STATE.jellyfinData.accessToken}`
|
||||
};
|
||||
}
|
||||
}
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.error(`Error fetching local trailer for ${itemId}:`, error);
|
||||
console.error(`Error fetching theme videos for ${itemId}:`, error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -1435,19 +1503,16 @@ const VisibilityObserver = {
|
||||
|
||||
// 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 (this._lastVisibleState !== 'player-active') {
|
||||
this._lastVisibleState = 'player-active';
|
||||
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();
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -1462,27 +1527,20 @@ const VisibilityObserver = {
|
||||
activeTab &&
|
||||
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.visibility = isVisible ? "visible" : "hidden";
|
||||
container.style.pointerEvents = isVisible ? "auto" : "none";
|
||||
container.style.display = isVisible ? "block" : "none";
|
||||
container.style.visibility = isVisible ? "visible" : "hidden";
|
||||
container.style.pointerEvents = isVisible ? "auto" : "none";
|
||||
|
||||
if (isVisible) {
|
||||
if (STATE.slideshow.slideInterval && !STATE.slideshow.isPaused) {
|
||||
STATE.slideshow.slideInterval.start();
|
||||
SlideshowManager.resumeActivePlayback();
|
||||
}
|
||||
} else {
|
||||
if (STATE.slideshow.slideInterval) {
|
||||
STATE.slideshow.slideInterval.stop();
|
||||
}
|
||||
SlideshowManager.stopAllPlayback();
|
||||
if (isVisible) {
|
||||
if (STATE.slideshow.slideInterval && !STATE.slideshow.isPaused) {
|
||||
STATE.slideshow.slideInterval.start();
|
||||
SlideshowManager.resumeActivePlayback();
|
||||
}
|
||||
} else {
|
||||
if (STATE.slideshow.slideInterval) {
|
||||
STATE.slideshow.slideInterval.stop();
|
||||
}
|
||||
SlideshowManager.stopAllPlayback();
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1490,13 +1548,7 @@ const VisibilityObserver = {
|
||||
* Initializes visibility observer
|
||||
*/
|
||||
init() {
|
||||
// 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 });
|
||||
|
||||
document.body.addEventListener("click", () => this.updateVisibility());
|
||||
@@ -1606,23 +1658,33 @@ const SlideCreator = {
|
||||
|
||||
trailerUrl = {
|
||||
id: videoId,
|
||||
url: `${STATE.jellyfinData.serverAddress}/Videos/${videoId}/stream.mp4?Static=true&api_key=${STATE.jellyfinData.accessToken}`
|
||||
url: `${STATE.jellyfinData.serverAddress}/Videos/${videoId}/stream.mp4?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}`);
|
||||
}
|
||||
}
|
||||
// 1b. Check Theme Video if preferred (Local Backdrop)
|
||||
else if (CONFIG.preferLocalBackdrops && item.themeVideoUrl) {
|
||||
trailerUrl = item.themeVideoUrl;
|
||||
console.log(`Using theme video (local backdrop) for ${itemId}: ${trailerUrl.url || trailerUrl}`);
|
||||
}
|
||||
// 1b. Check Local Trailer if preferred
|
||||
// 1c. Check Local Trailer if preferred
|
||||
else if (CONFIG.preferLocalTrailers && item.LocalTrailerCount > 0 && item.localTrailerUrl) {
|
||||
trailerUrl = item.localTrailerUrl;
|
||||
console.log(`Using local trailer for ${itemId}: ${trailerUrl}`);
|
||||
}
|
||||
// 1c. Fallback to Remote Trailer
|
||||
// 1d. Fallback to Remote Trailer
|
||||
else if (item.RemoteTrailers && item.RemoteTrailers.length > 0) {
|
||||
trailerUrl = item.RemoteTrailers[0].Url;
|
||||
}
|
||||
// 1e. Final Fallback to Local Trailer (even if not preferred)
|
||||
else if (item.LocalTrailerCount > 0 && item.localTrailerUrl) {
|
||||
trailerUrl = item.localTrailerUrl;
|
||||
console.log(`Using local trailer fallback for ${itemId}: ${trailerUrl}`);
|
||||
}
|
||||
|
||||
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||||
|
||||
@@ -1715,13 +1777,6 @@ const SlideCreator = {
|
||||
playerVars: playerVars,
|
||||
events: {
|
||||
'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
|
||||
event.target._startTime = playerVars.start || 0;
|
||||
event.target._endTime = playerVars.end || undefined;
|
||||
@@ -1738,20 +1793,12 @@ const SlideCreator = {
|
||||
event.target.setPlaybackQuality(quality);
|
||||
}
|
||||
|
||||
// Only play if this is the active slide AND the slideshow is visible
|
||||
// Only play if this is the active slide
|
||||
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
||||
const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
|
||||
|
||||
if (slide && slide.classList.contains('active') && !document.hidden && (!isVideoPlayerOpen || isVideoPlayerOpen.classList.contains('hide'))) {
|
||||
// MARK: mark
|
||||
// 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)
|
||||
const timeoutId = setTimeout(() => {
|
||||
@@ -1784,7 +1831,10 @@ const SlideCreator = {
|
||||
},
|
||||
'onStateChange': (event) => {
|
||||
if (event.data === YT.PlayerState.ENDED) {
|
||||
SlideshowManager.nextSlide();
|
||||
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
||||
if (slide && slide.classList.contains('active')) {
|
||||
SlideshowManager.nextSlide();
|
||||
}
|
||||
}
|
||||
},
|
||||
'onError': (event) => {
|
||||
@@ -1806,51 +1856,42 @@ const SlideCreator = {
|
||||
const videoAttributes = {
|
||||
className: "backdrop video-backdrop",
|
||||
src: (typeof trailerUrl === 'object' ? trailerUrl.url : trailerUrl),
|
||||
autoplay: false,
|
||||
preload: "auto",
|
||||
loop: false,
|
||||
disablePictureInPicture: true,
|
||||
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);
|
||||
|
||||
if (!STATE.slideshow.isMuted) {
|
||||
backdrop.volume = 0.4;
|
||||
}
|
||||
backdrop.volume = 0.4;
|
||||
|
||||
STATE.slideshow.videoPlayers[itemId] = backdrop;
|
||||
|
||||
backdrop.addEventListener('play', (event) => {
|
||||
const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
|
||||
// MARK: mark
|
||||
// const currentIndex = STATE.slideshow.currentSlideIndex;
|
||||
// const currentItemId = STATE.slideshow.itemIds[currentIndex];
|
||||
|
||||
// if (!slide || !slide.classList.contains('active') || currentItemId !== itemId) {
|
||||
|
||||
if (!slide || !slide.classList.contains('active')) {
|
||||
console.log(`Local video ${itemId} started playing but is not active, pausing.`);
|
||||
event.target.pause();
|
||||
event.target.currentTime = 0;
|
||||
return;
|
||||
console.log(`Local video ${itemId} started playing but slide is not active, pausing.`);
|
||||
event.target.pause();
|
||||
event.target.currentTime = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
if (CONFIG.waitForTrailerToEnd && STATE.slideshow.slideInterval) {
|
||||
STATE.slideshow.slideInterval.stop();
|
||||
}
|
||||
});
|
||||
|
||||
backdrop.addEventListener('ended', () => {
|
||||
SlideshowManager.nextSlide();
|
||||
backdrop.addEventListener('ended', (event) => {
|
||||
const slide = event.target.closest('.slide');
|
||||
if (slide && slide.classList.contains('active')) {
|
||||
SlideshowManager.nextSlide();
|
||||
}
|
||||
});
|
||||
|
||||
backdrop.addEventListener('error', () => {
|
||||
if (CONFIG.waitForTrailerToEnd) {
|
||||
backdrop.addEventListener('error', (event) => {
|
||||
console.warn(`Local video error for item ${itemId}`);
|
||||
const slide = event.target.closest('.slide');
|
||||
if (slide && slide.classList.contains('active')) {
|
||||
SlideshowManager.nextSlide();
|
||||
}
|
||||
});
|
||||
@@ -2184,6 +2225,11 @@ const SlideCreator = {
|
||||
item.localTrailerUrl = await ApiUtils.fetchLocalTrailer(itemId);
|
||||
}
|
||||
|
||||
// Pre-fetch theme video URL if needed
|
||||
if (CONFIG.preferLocalBackdrops) {
|
||||
item.themeVideoUrl = await ApiUtils.fetchThemeVideos(itemId);
|
||||
}
|
||||
|
||||
const slideElement = this.createSlideElement(
|
||||
item,
|
||||
item.Type === "Movie" ? "Movie" : "TV Show"
|
||||
@@ -2281,16 +2327,6 @@ const SlideshowManager = {
|
||||
let previousVisibleSlide;
|
||||
try {
|
||||
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;
|
||||
|
||||
index = Math.max(0, Math.min(index, totalItems - 1));
|
||||
@@ -2319,27 +2355,111 @@ const SlideshowManager = {
|
||||
|
||||
currentSlide.classList.add("active");
|
||||
|
||||
// Restore focus for TV mode navigation continuity
|
||||
requestAnimationFrame(() => {
|
||||
if (focusSelector) {
|
||||
const target = currentSlide.querySelector(focusSelector);
|
||||
if (target) {
|
||||
target.focus();
|
||||
return;
|
||||
// Manage Video Playback: Stop others, Play current
|
||||
// 1. Stop all other YouTube players and local video elements
|
||||
if (STATE.slideshow.videoPlayers) {
|
||||
Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
|
||||
if (id !== currentItemId) {
|
||||
const p = STATE.slideshow.videoPlayers[id];
|
||||
if (!p) return;
|
||||
// YouTube player
|
||||
if (typeof p.pauseVideo === 'function') {
|
||||
p.pauseVideo();
|
||||
}
|
||||
// HTML5 <video> element (local trailers)
|
||||
if (p instanceof HTMLVideoElement) {
|
||||
p.pause();
|
||||
p.muted = true;
|
||||
p.currentTime = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 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 });
|
||||
});
|
||||
}
|
||||
|
||||
// 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();
|
||||
}
|
||||
});
|
||||
|
||||
// Manage Video Playback: Stop others, Play current
|
||||
this.pauseOtherVideos(currentItemId);
|
||||
this.playCurrentVideo(currentSlide, currentItemId);
|
||||
// 3. Play and Reset current video
|
||||
const videoBackdrop = currentSlide.querySelector('.video-backdrop');
|
||||
|
||||
// Auto-unpause when a video slide becomes active
|
||||
if (videoBackdrop && STATE.slideshow.isPaused) {
|
||||
STATE.slideshow.isPaused = false;
|
||||
const pauseButton = document.querySelector('.pause-button');
|
||||
if (pauseButton) {
|
||||
pauseButton.innerHTML = '<i class="material-icons">pause</i>';
|
||||
const pauseLabel = LocalizationUtils.getLocalizedString('ButtonPause', 'Pause');
|
||||
pauseButton.setAttribute("aria-label", pauseLabel);
|
||||
pauseButton.setAttribute("title", pauseLabel);
|
||||
}
|
||||
}
|
||||
|
||||
// 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 && currentSlide.classList.contains('active')) {
|
||||
console.warn(`Autoplay blocked for ${currentItemId}, 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 (!currentSlide.classList.contains('active')) return;
|
||||
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);
|
||||
|
||||
@@ -2374,7 +2494,8 @@ const SlideshowManager = {
|
||||
this.updateDots();
|
||||
|
||||
// Only restart interval if we are NOT waiting for a video to end
|
||||
const hasVideo = currentSlide.querySelector('.video-backdrop');
|
||||
const hasVideo = currentSlide.querySelector('.video-backdrop') ||
|
||||
(STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]);
|
||||
if (STATE.slideshow.slideInterval && !STATE.slideshow.isPaused) {
|
||||
if (CONFIG.waitForTrailerToEnd && hasVideo) {
|
||||
STATE.slideshow.slideInterval.stop();
|
||||
@@ -2433,14 +2554,18 @@ const SlideshowManager = {
|
||||
async preloadAdjacentSlides(currentIndex) {
|
||||
const totalItems = STATE.slideshow.totalItems;
|
||||
const preloadCount = Math.min(Math.max(CONFIG.preloadCount || 1, 1), 5);
|
||||
const preloadedIds = new Set();
|
||||
|
||||
// Preload next slides
|
||||
for (let i = 1; i <= preloadCount; i++) {
|
||||
const nextIndex = (currentIndex + i) % totalItems;
|
||||
if (nextIndex === currentIndex) break;
|
||||
|
||||
|
||||
const itemId = STATE.slideshow.itemIds[nextIndex];
|
||||
SlideCreator.createSlideForItemId(itemId);
|
||||
if (!preloadedIds.has(itemId)) {
|
||||
preloadedIds.add(itemId);
|
||||
SlideCreator.createSlideForItemId(itemId);
|
||||
}
|
||||
}
|
||||
|
||||
// Preload previous slides
|
||||
@@ -2449,7 +2574,10 @@ const SlideshowManager = {
|
||||
if (prevIndex === currentIndex) break;
|
||||
|
||||
const prevItemId = STATE.slideshow.itemIds[prevIndex];
|
||||
SlideCreator.createSlideForItemId(prevItemId);
|
||||
if (!preloadedIds.has(prevItemId)) {
|
||||
preloadedIds.add(prevItemId);
|
||||
SlideCreator.createSlideForItemId(prevItemId);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -2485,13 +2613,11 @@ const SlideshowManager = {
|
||||
if (index === -1) return;
|
||||
|
||||
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) {
|
||||
// Destroy video player if exists
|
||||
if (STATE.slideshow.videoPlayers[itemId]) {
|
||||
@@ -2516,13 +2642,11 @@ const SlideshowManager = {
|
||||
}
|
||||
});
|
||||
|
||||
// After pruning, restore focus to container in TV mode
|
||||
if (prunedAny) {
|
||||
const isTvMode = (window.layoutManager && window.layoutManager.tv) ||
|
||||
document.documentElement.classList.contains('layout-tv') ||
|
||||
document.body.classList.contains('layout-tv');
|
||||
if (isTvMode) {
|
||||
// Use setTimeout to execute AFTER Jellyfin's focus manager processes the iframe removal
|
||||
setTimeout(() => {
|
||||
const container = document.getElementById("slides-container");
|
||||
if (container && container.style.display !== 'none') {
|
||||
@@ -2649,116 +2773,6 @@ 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 && 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') {
|
||||
// Fallback if loadVideoById is not available or videoId missing but player object exists
|
||||
const startTime = player._startTime || 0;
|
||||
player.seekTo(startTime);
|
||||
player.playVideo();
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Stops all video playback (YouTube and HTML5)
|
||||
* Used when navigating away from the home screen
|
||||
@@ -2907,7 +2921,7 @@ const SlideshowManager = {
|
||||
// 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);
|
||||
const canControlSlideshow = isTvMode ? hasDirectFocus : (hasDirectFocus || isBodyFocused);
|
||||
|
||||
// Check for Input Fields (always ignore typing)
|
||||
const isInputElement = activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable);
|
||||
@@ -3551,69 +3565,75 @@ const MediaBarEnhancedSettingsManager = {
|
||||
* Initialize page visibility handling to pause when tab is inactive
|
||||
*/
|
||||
const initPageVisibilityHandler = () => {
|
||||
document.addEventListener("visibilitychange", () => {
|
||||
const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer:not(.hide)') ||
|
||||
document.querySelector('.youtubePlayerContainer:not(.hide)');
|
||||
let wasVideoPlayingBeforeHide = false;
|
||||
|
||||
document.addEventListener("visibilitychange", () => {
|
||||
if (document.hidden) {
|
||||
// Stop slide timer
|
||||
console.log("Tab inactive - pausing slideshow and videos");
|
||||
wasVideoPlayingBeforeHide = STATE.slideshow.isVideoPlaying;
|
||||
|
||||
if (STATE.slideshow.slideInterval) {
|
||||
STATE.slideshow.slideInterval.stop();
|
||||
}
|
||||
|
||||
if (isVideoPlayerOpen) {
|
||||
// Jellyfin video is playing --> full stop to free all resources
|
||||
console.log("Tab inactive and Jellyfin player active - stopping all playback");
|
||||
SlideshowManager.stopAllPlayback();
|
||||
} else {
|
||||
// Simple tab switch: stop all others, pause only the current
|
||||
console.log("Tab inactive. Pausing current video, stopping others");
|
||||
const currentItemId = STATE.slideshow.itemIds?.[STATE.slideshow.currentSlideIndex];
|
||||
|
||||
// Stop all players except the current one
|
||||
if (STATE.slideshow.videoPlayers) {
|
||||
Object.keys(STATE.slideshow.videoPlayers).forEach(id => {
|
||||
if (id === currentItemId) return;
|
||||
const p = STATE.slideshow.videoPlayers[id];
|
||||
if (p) {
|
||||
try {
|
||||
if (typeof p.stopVideo === 'function') {
|
||||
p.stopVideo();
|
||||
if (typeof p.clearVideo === 'function') p.clearVideo();
|
||||
} else if (p.tagName === 'VIDEO') {
|
||||
p.pause();
|
||||
p.muted = true;
|
||||
p.currentTime = 0;
|
||||
}
|
||||
} catch (e) { console.warn("Error stopping background player", id, e); }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Pause only the current video
|
||||
if (currentItemId) {
|
||||
const player = STATE.slideshow.videoPlayers?.[currentItemId];
|
||||
if (player) {
|
||||
|
||||
// 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 {
|
||||
if (typeof player.pauseVideo === 'function') {
|
||||
player.pauseVideo();
|
||||
} else if (player.tagName === 'VIDEO') {
|
||||
player.pause();
|
||||
}
|
||||
} catch (e) { console.warn("Error pausing video on tab hide:", e); }
|
||||
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 {
|
||||
console.log("Tab active. Resuming slideshow");
|
||||
const isOnHome = window.location.hash === "#/home.html" || window.location.hash === "#/home";
|
||||
|
||||
if (isOnHome && !STATE.slideshow.isPaused && !isVideoPlayerOpen) {
|
||||
SlideshowManager.resumeActivePlayback();
|
||||
|
||||
if (STATE.slideshow.slideInterval && !CONFIG.waitForTrailerToEnd) {
|
||||
STATE.slideshow.slideInterval.start();
|
||||
console.log("Tab active - resuming slideshow");
|
||||
if (!STATE.slideshow.isPaused) {
|
||||
const currentItemId = STATE.slideshow.itemIds[STATE.slideshow.currentSlideIndex];
|
||||
|
||||
if (wasVideoPlayingBeforeHide && currentItemId && STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[currentItemId]) {
|
||||
const player = STATE.slideshow.videoPlayers[currentItemId];
|
||||
|
||||
// YouTube
|
||||
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();
|
||||
}
|
||||
}
|
||||
} 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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
56
README.md
56
README.md
@@ -20,11 +20,14 @@ This plugin is a fork and enhancement of the original [Media Bar by MakD](https:
|
||||
- [Configuration](#configuration)
|
||||
- [General Settings](#general-settings)
|
||||
- [Custom Content](#custom-content)
|
||||
- [Content Sorting](#content-sorting)
|
||||
- [Content Limits](#content-limits)
|
||||
- [Advanced Settings](#advanced-settings)
|
||||
- [Build The Plugin By Yourself](#build-the-plugin-by-yourself)
|
||||
- [Troubleshooting](#troubleshooting)
|
||||
- [Effects Not Showing](#effects-not-showing)
|
||||
- [Docker Permission Issues](#docker-permission-issues)
|
||||
- [Credits](#credits)
|
||||
- [Contributing](#contributing)
|
||||
|
||||
---
|
||||
@@ -97,6 +100,12 @@ This plugin builds upon the original Media Bar with new capabilities and improve
|
||||
<summary>Have a look:</summary>
|
||||
<img width="513" height="575" alt="Client-Settings" src="https://github.com/user-attachments/assets/3e29a84f-f8ea-4b7b-b561-80493cb1535b" />
|
||||
</details>
|
||||
* **Local Trailers Preference**: Option to prefer local trailers (from the media item) over online sources.
|
||||
* **Theme Video Support**: Option to prefer local theme videos (backdrops) over trailers.
|
||||
* **Randomization**: Options to randomize theme videos and local trailers if multiple versions exist.
|
||||
* **Include Watched Content**: Option to include watched items in the random slideshow.
|
||||
* **Content Sorting Options**: Sort content by various criteria such as PremiereDate, ProductionYear, Random, or Original order.
|
||||
* **Client-Side Settings**: Allow users to override settings locally on their device.
|
||||
|
||||
### Core Features
|
||||
* **Immersive Slideshow**: Rotates through your media library
|
||||
@@ -104,6 +113,7 @@ This plugin builds upon the original Media Bar with new capabilities and improve
|
||||
* **Direct Play**: Click "Play" to start watching immediately
|
||||
* **Details View**: Click "Info" to jump to the item's detail page
|
||||
* **Add To Favorites**: Click the heart to add the item to your favorites
|
||||
* **Customize**: Change the plugins behavior through the Jellyfin admin panel
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -150,30 +160,62 @@ Configure the plugin via **Dashboard** > **Plugins** > **Media Bar Enhanced**.
|
||||
* **Wait For Trailer To End**: Prevents slide transition until the video finishes.
|
||||
* **Enable Mobile Video**: specific setting to allow video playback on mobile devices (disabled by default to save data/battery).
|
||||
* **Show Trailer Button**: Adds a button to open the trailer in a popup modal if video backdrops are disabled (e.g. on mobile if trailers are disabled there)
|
||||
* **Prefer Local Trailers**: If enabled, local trailers will be preferred over remote (YouTube) trailers.
|
||||
* **Prefer Local Backdrops / Theme Videos**: If enabled, local backdrop videos (Theme Videos) will be preferred over trailers.
|
||||
|
||||
### Custom Content
|
||||
Define exactly what shows up in your bar.
|
||||
|
||||
* **Enable Custom Media IDs**: Restrict the slideshow to a specific list of IDs.
|
||||
* **Manual Trailer Override**: Add `[YouTube_URL]` after an ID to force a specific trailer.
|
||||
* **Manual Trailer Override**: Add `[YouTube_URL]` or `[Jellyfin_ID]` after an ID to force a specific trailer/video.
|
||||
* Example ID: `a1b2c3d4e5... [https://www.youtube.com/watch?v=VIDEO_ID]`
|
||||
* Example ID: `z1b2c3d4e5... [Jellyfin_ID]`
|
||||
* **Example Mixed List**:
|
||||
```
|
||||
a1b2c3d4e5f6... <-- Plays local item video
|
||||
6bdu812812hd... [https://youtu.be/...] <-- Item metadata + Custom YouTube Trailer
|
||||
12h44h124sf7... [hdc78127z4ff...] <-- Item metadata + Custom Jellyfin Trailer/Video etc.
|
||||
```
|
||||
* Example Collection Name: `Halloween Collection [https://...] | My Description` (Note: Use `|` to separate description from name if using a name instead of an ID)
|
||||
* **Apply Limits to Custom IDs**: If enabled, the "Content Limits" (see below) will also apply to your Custom Media IDs list. By default, custom lists show all listed items regardless of limits.
|
||||
* **Enable Seasonal Content Mode**: Advanced date-based scheduling.
|
||||
* Format: `DD.MM-DD.MM | Name | ID1, ID2, ID3`
|
||||
* Example: `20.10-31.10 | Halloween | <ID_OF_HALLOWEEN_COLLECTION>`
|
||||
* If the current date matches a range, those IDs are used. Otherwise, it defaults to standard behavior or the Custom Media IDs list.
|
||||
* **GUI Configuration**: You can easily add "Seasons" via the **Add Season** button.
|
||||
* **Active Period**: Select the Start and End Day/Month for each season.
|
||||
* **Media IDs**: Enter the Comma-separated list of IDs (Movies, Series, Collections) for that season.
|
||||
* **Priority**: If the current date matches a defined season, those IDs are used. If multiple seasons overlap, the first matching one is used. If no season matches, it falls back to the Default Custom Media IDs.
|
||||
|
||||
**How to get IDs:**
|
||||
Check the URL of an item in the web interface:
|
||||
`.../web/#/details?id=YOUR_ITEM_ID_HERE&...`
|
||||
|
||||
### Content Sorting
|
||||
Customize the order of slides in the Media Bar.
|
||||
|
||||
* **Sort By**: Choose criteria like *Random*, *Premiere Date*, *Production Year*, *Critic Rating*, *Community Rating*, *Name*, or *Runtime*.
|
||||
* **Sort Order**: Ascending or Descending.
|
||||
* **Note**: Sorting applies to both server-fetched content AND Custom Media IDs. Select **Original** to preserve the exact order of your Custom Media IDs list.
|
||||
|
||||
### Content Limits
|
||||
Fine-tune performance by limiting the number of items fetched from the server.
|
||||
|
||||
* **Total Max Items**: Maximum total items to fetch (combined).
|
||||
* **Include Watched Content**: If enabled, the random slideshow will also include items that you have already watched.
|
||||
* **Max Movies**: Maximum movies to include (for random selection).
|
||||
* **Max Tv Shows**: Maximum TV shows to include (for random selection).
|
||||
* **Preload Count**: Number of slides to preload for smooth transitions.
|
||||
* *Intelligent Preloading*: The plugin uses a safe preloading strategy that respects this count but handles small lists gracefully to avoid playback issues.
|
||||
* **Max Pagination Dots**: Maximum number of dots to show. If exceeded, it switches to a counter (e.g., 1/20).
|
||||
|
||||
### Advanced Settings
|
||||
* **Slide Animations**: Enable/disable the "Zoom In" effect.
|
||||
* **Use SponsorBlock**: Skips non-content segments in YouTube trailers (if the data exists).
|
||||
* **Preferred YouTube Quality**: Select your preferred resolution (*Auto*, *Maximum*, *1080p*, *720p*).
|
||||
* **Start Muted**: Videos start without sound (user can unmute).
|
||||
* **Full Width Video**: Stretches video to cover the entire width (good for desktop, crop on mobile).
|
||||
* **Enable Loading Screen**: Enable/disable the loading indicator while the bar initializes.
|
||||
* **Always Show Arrows**: Keeps navigation arrows visible instead of hiding them on mouse leave.
|
||||
* **Randomize Backdrop Video**: If enabled, a random video from the backdrops/theme videos will be selected instead of the first one.
|
||||
* **Randomize Local Trailer**: If enabled, a random local trailer will be selected instead of the first one.
|
||||
* **Enable Keyboard Controls**:
|
||||
* `Left`/`Right`: Change slide
|
||||
* `Space`: Pause/Play slideshow
|
||||
@@ -244,6 +286,12 @@ volumes:
|
||||
- /path/to/jellyfin/config/index.html:/jellyfin/jellyfin-web/index.html
|
||||
```
|
||||
|
||||
## Credits
|
||||
|
||||
This project is based on the original [Jellyfin Media Bar by MakD](https://github.com/MakD/Jellyfin-Media-Bar) and incorporates concepts from [IAmParadox27's plugin fork](https://github.com/IAmParadox27/jellyfin-plugin-media-bar). Thanks for their work!
|
||||
|
||||
Also, special thanks to IAmParadox27 for the [File Transformation plugin](https://github.com/IAmParadox27/jellyfin-plugin-file-transformation) which this plugin can optionally use for improved Docker compatibility.
|
||||
|
||||
## Contributing
|
||||
|
||||
Feel free to contribute to this project by creating pull requests or reporting issues.
|
||||
|
||||
@@ -43,7 +43,7 @@ Bevor du baust, musst du die Versionsnummer in den folgenden Dateien aktualisier
|
||||
Führe den folgenden Befehl im Terminal (PowerShell) im Hauptverzeichnis aus. Wir nutzen hier `dotnet build` statt `publish`, um unnötige Dateien zu vermeiden.
|
||||
|
||||
```powershell
|
||||
dotnet build Jellyfin.Plugin.MediaBar/Jellyfin.Plugin.MediaBar.csproj --configuration Release --output bin/Publish; Compress-Archive -Path bin/Publish/* -DestinationPath bin/Publish/Jellyfin.Plugin.MediaBar.zip -Force; $hash = (Get-FileHash -Algorithm MD5 bin/Publish/Jellyfin.Plugin.MediaBar.zip).Hash.ToLower(); $time = (Get-Date).ToUniversalTime().ToString("yyyy-MM-ddTHH:mm:ssZ"); Write-Output "`n----------------------------------------"; Write-Output "NEUE CHECKSUMME (MD5): $hash"; Write-Output "ZEITSTEMPEL: $time"; Write-Output "----------------------------------------`n"
|
||||
dotnet build Jellyfin.Plugin.MediaBarEnhanced/Jellyfin.Plugin.MediaBarEnhanced.csproj --configuration Release --output bin/Publish; Compress-Archive -Path bin/Publish/* -DestinationPath bin/Publish/Jellyfin.Plugin.MediaBarEnhanced.zip -Force; $hash = (Get-FileHash -Algorithm MD5 bin/Publish/Jellyfin.Plugin.MediaBarEnhanced.zip).Hash.ToLower(); $time = (Get-Date).ToUniversalTime().ToString("yyyy-MM-ddTHH:mm:ssZ"); Write-Output "`n----------------------------------------"; Write-Output "NEUE CHECKSUMME (MD5): $hash"; Write-Output "ZEITSTEMPEL: $time"; Write-Output "----------------------------------------`n"
|
||||
```
|
||||
|
||||
## 3. Manifest aktualisieren
|
||||
|
||||
@@ -9,12 +9,44 @@
|
||||
"imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
|
||||
"versions": [
|
||||
{
|
||||
"version": "1.6.1.17",
|
||||
"changelog": "- fix tv mode issue\n- refactor video playback management",
|
||||
"version": "1.6.5.0",
|
||||
"changelog": "- refactored seasonal UI settings",
|
||||
"targetAbi": "10.11.0.0",
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.1.17/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||
"checksum": "4f0f1b0bfcb073ae72c6a5ba3b991e65",
|
||||
"timestamp": "2026-02-13T13:49:22Z"
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.5.0/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||
"checksum": "378a8465c281c315ed6ad0e683da4755",
|
||||
"timestamp": "2026-02-16T18:38:40Z"
|
||||
},
|
||||
{
|
||||
"version": "1.6.4.1",
|
||||
"changelog": "- fix slide transition when using local/backdrop videos",
|
||||
"targetAbi": "10.11.0.0",
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.4.1/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||
"checksum": "a9c5a863427de84639eca082483936da",
|
||||
"timestamp": "2026-02-15T22:56:17Z"
|
||||
},
|
||||
{
|
||||
"version": "1.6.3.1",
|
||||
"changelog": "- fix path issue on subpath installations",
|
||||
"targetAbi": "10.11.0.0",
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.3.0/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||
"checksum": "6a952445bfb80ba4603017358e48da91",
|
||||
"timestamp": "2026-02-15T22:38:19Z"
|
||||
},
|
||||
{
|
||||
"version": "1.6.2.3",
|
||||
"changelog": "- feat: add options for local backdrops (theme videos) support and randomization features for local trailer/backdrops if more than one is available\n- feat: add option to include watched content in the random selection",
|
||||
"targetAbi": "10.11.0.0",
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.2.3/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||
"checksum": "c7ff2d783889c25b5a53783bfbe30b11",
|
||||
"timestamp": "2026-02-15T00:38:07Z"
|
||||
},
|
||||
{
|
||||
"version": "1.6.1.32",
|
||||
"changelog": "- feat: add seasonal UI logic\n- add option to also set the limits for custom ids\n- fix tv mode scroll issue\n- smaller fixes and improvements",
|
||||
"targetAbi": "10.11.0.0",
|
||||
"sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.1.32/Jellyfin.Plugin.MediaBarEnhanced.zip",
|
||||
"checksum": "e196fd393ef0bcf51f8ce535103f1811",
|
||||
"timestamp": "2026-02-14T16:34:32Z"
|
||||
},
|
||||
{
|
||||
"version": "1.6.0.2",
|
||||
|
||||
116
test_scripts/check_backdrop_fields.js
Normal file
116
test_scripts/check_backdrop_fields.js
Normal file
@@ -0,0 +1,116 @@
|
||||
(async () => {
|
||||
// 1. Initialisierung
|
||||
const apiClient = window.ApiClient;
|
||||
if (!apiClient) {
|
||||
console.error("❌ ApiClient nicht gefunden. Bitte in der Browser-Konsole einer Jellyfin-Seite ausführen.");
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. Item ID abfragen oder festlegen
|
||||
let itemId = prompt("Bitte die Item ID eingeben (von einem Film/Serie mit Theme Video/Backdrop Video):");
|
||||
if (!itemId) {
|
||||
console.warn("Keine Item ID eingegeben. Abbruch.");
|
||||
return;
|
||||
}
|
||||
itemId = itemId.trim();
|
||||
|
||||
const userId = apiClient.getCurrentUserId();
|
||||
console.log(`%c🔍 Untersuche Item: ${itemId}`, "color: #00a4dc; font-size: 1.2em; font-weight: bold;");
|
||||
|
||||
// 3. Helper Funktion für Fetch requests
|
||||
const fetchJson = async (url) => {
|
||||
try {
|
||||
const res = await fetch(url, {
|
||||
headers: {
|
||||
'Authorization': `MediaBrowser Client="Jellyfin Web", Device="Browser", DeviceId="${apiClient.deviceId()}", Version="${apiClient.appVersion()}", Token="${apiClient.accessToken()}"`
|
||||
}
|
||||
});
|
||||
if (res.ok) return await res.json();
|
||||
console.warn(`⚠️ Request fehlgeschlagen: ${url} (${res.status})`);
|
||||
return null;
|
||||
} catch (e) {
|
||||
console.error(`❌ Fehler bei Request: ${url}`, e);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// TEST 1: Standard Item Details mit erweiterten Feldern
|
||||
// ---------------------------------------------------------
|
||||
console.group("1. Standard Item Details (mit Fields)");
|
||||
const fields = "Overview,RemoteTrailers,MediaSources,LocalTrailerCount,ThemeVideoIds,ThemeSongIds";
|
||||
const itemDetailsUrl = `${apiClient.serverAddress()}/Users/${userId}/Items/${itemId}?Fields=${fields}`;
|
||||
|
||||
const item = await fetchJson(itemDetailsUrl);
|
||||
if (item) {
|
||||
console.log("Name:", item.Name);
|
||||
console.log("ThemeVideoIds:", item.ThemeVideoIds);
|
||||
console.log("ThemeSongIds:", item.ThemeSongIds);
|
||||
console.log("LocalTrailerCount:", item.LocalTrailerCount);
|
||||
console.log("RemoteTrailers:", item.RemoteTrailers);
|
||||
|
||||
if (item.ThemeVideoIds && item.ThemeVideoIds.length > 0) {
|
||||
console.log(`%c✅ ThemeVideoIds gefunden: ${item.ThemeVideoIds.length}`, "color: green; font-weight: bold;");
|
||||
} else {
|
||||
console.log(`%c❌ Keine ThemeVideoIds im Item-Objekt.`, "color: orange;");
|
||||
}
|
||||
}
|
||||
console.groupEnd();
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// TEST 2: ThemeMedia Endpoint
|
||||
// ---------------------------------------------------------
|
||||
console.group("2. Endpoint: /Items/{Id}/ThemeMedia");
|
||||
const themeMediaUrl = `${apiClient.serverAddress()}/Items/${itemId}/ThemeMedia?userId=${userId}`;
|
||||
const themeMedia = await fetchJson(themeMediaUrl);
|
||||
|
||||
if (themeMedia) {
|
||||
console.dir(themeMedia);
|
||||
if (themeMedia.ThemeVideos && themeMedia.ThemeVideos.length > 0) {
|
||||
console.log(`%c✅ ThemeVideos gefunden: ${themeMedia.ThemeVideos.length}`, "color: green; font-weight: bold;");
|
||||
themeMedia.ThemeVideos.forEach(v => console.log(` - ID: ${v.Id}, Name: ${v.Name}, Path: ${v.Path}`));
|
||||
} else {
|
||||
console.log("❌ Keine ThemeVideos in ThemeMedia gefunden.");
|
||||
}
|
||||
}
|
||||
console.groupEnd();
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// TEST 3: ThemeVideos Endpoint (Spezifisch)
|
||||
// ---------------------------------------------------------
|
||||
console.group("3. Endpoint: /Items/{Id}/ThemeVideos");
|
||||
// Manchmal auch unter Users/{UserId}/Items/{Id}/ThemeVideos
|
||||
const themeVideosUrl = `${apiClient.serverAddress()}/Items/${itemId}/ThemeVideos?userId=${userId}`;
|
||||
const themeVideos = await fetchJson(themeVideosUrl);
|
||||
|
||||
if (themeVideos) {
|
||||
// Kann Array oder Objekt mit Items sein
|
||||
const videos = Array.isArray(themeVideos) ? themeVideos : (themeVideos.Items || []);
|
||||
console.dir(videos);
|
||||
|
||||
if (videos.length > 0) {
|
||||
console.log(`%c✅ ThemeVideos Endpoint lieferte Ergebnisse: ${videos.length}`, "color: green; font-weight: bold;");
|
||||
} else {
|
||||
console.log("❌ ThemeVideos Endpoint lieferte leeres Array.");
|
||||
}
|
||||
}
|
||||
console.groupEnd();
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// TEST 4: LocalTrailers Endpoint
|
||||
// ---------------------------------------------------------
|
||||
console.group("4. Endpoint: /Items/{Id}/LocalTrailers");
|
||||
const localTrailersUrl = `${apiClient.serverAddress()}/Users/${userId}/Items/${itemId}/LocalTrailers`;
|
||||
const localTrailers = await fetchJson(localTrailersUrl);
|
||||
|
||||
if (localTrailers && localTrailers.length > 0) {
|
||||
console.log(`%cℹ️ LocalTrailers gefunden: ${localTrailers.length}`, "color: blue;");
|
||||
console.dir(localTrailers);
|
||||
} else {
|
||||
console.log("❌ Keine LocalTrailers gefunden.");
|
||||
}
|
||||
console.groupEnd();
|
||||
|
||||
console.log("%cFertig.", "font-weight: bold;");
|
||||
|
||||
})();
|
||||
37
test_scripts/fetch_specific_items_with_fields.js
Normal file
37
test_scripts/fetch_specific_items_with_fields.js
Normal file
@@ -0,0 +1,37 @@
|
||||
(async () => {
|
||||
const apiClient = window.ApiClient;
|
||||
if (!apiClient) {
|
||||
console.error("ApiClient nicht gefunden.");
|
||||
return;
|
||||
}
|
||||
|
||||
const itemId = "DEINE_ITEM_ID_HIER";
|
||||
const userId = apiClient.getCurrentUserId();
|
||||
|
||||
const fields = "Overview,RemoteTrailers,Genres,CommunityRating,CriticRating,OfficialRating,PremiereDate,ProductionYear,MediaSources,RunTimeTicks,LocalTrailerCount,ThemeVideoIds";
|
||||
|
||||
try {
|
||||
console.log(`Rufe erweiterte Details für Item ${itemId} ab...`);
|
||||
|
||||
const url = apiClient.getUrl(`Users/${userId}/Items/${itemId}`, {
|
||||
Fields: fields
|
||||
});
|
||||
|
||||
const item = await apiClient.getJSON(url);
|
||||
|
||||
if (item) {
|
||||
console.log(`%cErgebnis für: ${item.Name}`, "color: #00a4dc; font-weight: bold;");
|
||||
|
||||
console.log("Remote Trailer:", item.RemoteTrailers);
|
||||
console.log("Local Trailer Count:", item.LocalTrailerCount);
|
||||
console.log("Media Sources:", item.MediaSources);
|
||||
console.log("ThemeVideos:", item.ThemeVideoIds);
|
||||
|
||||
console.dir(item);
|
||||
} else {
|
||||
console.warn("Item konnte nicht gefunden werden.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Abrufen des Items:", error);
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user