816 lines
53 KiB
HTML
816 lines
53 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Media Bar Enhanced Configuration</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="MediaBarEnhancedConfigurationPage" data-role="page" class="page type-interior pluginConfigurationPage"
|
|
data-require="emby-input,emby-button,emby-select,emby-checkbox,emby-textarea">
|
|
<div data-role="content">
|
|
<div class="content-primary">
|
|
<div class="sectionTitleContainer">
|
|
<h2 class="sectionTitle">Media Bar Enhanced</h2>
|
|
<a is="emby-linkbutton" class="raised raised-mini emby-button" style="margin-left: 2em;"
|
|
target="_blank" href="https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced">
|
|
<i class="md-icon button-icon button-icon-left secondaryText"></i>
|
|
<span>${Help}</span>
|
|
</a>
|
|
</div>
|
|
<hr style="max-width: 800px; margin: 1em 0;">
|
|
|
|
<div style="margin-bottom: 1.5em;">
|
|
<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('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('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>
|
|
</div>
|
|
|
|
<form id="mediaBarEnhancedConfigForm">
|
|
|
|
<!-- BASIC TAB -->
|
|
<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="MediaBarIsEnabled"
|
|
name="MediaBarIsEnabled" />
|
|
<span>Enable Media Bar Enhanced Plugin</span>
|
|
</label>
|
|
<div class="fieldDescription">Enable or disable the entire plugin functionality.</div>
|
|
</div>
|
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
<label>
|
|
<input is="emby-checkbox" type="checkbox" id="EnableVideoBackdrop"
|
|
name="EnableVideoBackdrop" />
|
|
<span>Enable Trailer Backdrops</span>
|
|
</label>
|
|
<div class="fieldDescription">Show trailers as background if available.<br>Adds a
|
|
mute/unmute and pause/play button to control the video in the right top corner.</div>
|
|
</div>
|
|
<div class="checkboxContainer checkboxContainer-withDescription"
|
|
id="PreferLocalTrailersContainer">
|
|
<label>
|
|
<input is="emby-checkbox" type="checkbox" id="PreferLocalTrailers"
|
|
name="PreferLocalTrailers" />
|
|
<span>Prefer Local Trailers</span>
|
|
</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" id="WaitForTrailerToEndContainer">
|
|
<label>
|
|
<input is="emby-checkbox" type="checkbox" id="WaitForTrailerToEnd"
|
|
name="WaitForTrailerToEnd" />
|
|
<span>Wait For Trailer To End</span>
|
|
</label>
|
|
<div class="fieldDescription">Delay slide transition until trailer finishes.</div>
|
|
</div>
|
|
<div class="checkboxContainer checkboxContainer-withDescription" id="EnableMobileVideoContainer">
|
|
<label>
|
|
<input is="emby-checkbox" type="checkbox" id="EnableMobileVideo"
|
|
name="EnableMobileVideo" />
|
|
<span>Enable Trailer On Mobile</span>
|
|
</label>
|
|
<div class="fieldDescription">Allow video playback on mobile devices.</div>
|
|
</div>
|
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
<label>
|
|
<input is="emby-checkbox" type="checkbox" id="ShowTrailerButton"
|
|
name="ShowTrailerButton" />
|
|
<span>Show Trailer Button</span>
|
|
</label>
|
|
<div class="fieldDescription">Display a button to open trailer in modal. Button only
|
|
visible if trailer is not set as backdrop.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CUSTOM CONTENT TAB -->
|
|
<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">
|
|
<label>
|
|
<input is="emby-checkbox" type="checkbox" id="EnableCustomMediaIds"
|
|
name="EnableCustomMediaIds" />
|
|
<span>Enable Custom Media IDs</span>
|
|
</label>
|
|
<div class="fieldDescription">If enabled, the slideshow will show the items listed
|
|
below as the default content. If the list is empty, random items from your library are
|
|
used.</div>
|
|
</div>
|
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
<label>
|
|
<input is="emby-checkbox" type="checkbox" id="ApplyLimitsToCustomIds"
|
|
name="ApplyLimitsToCustomIds" />
|
|
<span>Apply Limits to Custom IDs</span>
|
|
</label>
|
|
<div class="fieldDescription">If enabled, the Max Items limit (Advanced → Content
|
|
Limits) will also apply to Custom Media IDs and Collections. By default, custom lists
|
|
are not limited.</div>
|
|
</div>
|
|
<div id="customMediaIdsContainer">
|
|
<div class="inputContainer">
|
|
<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.
|
|
<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>.
|
|
<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>
|
|
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.
|
|
<br>
|
|
<b>Note:</b> The separator <b>MUST NOT</b> be a hex character (0-9, a-f).
|
|
</div>
|
|
<p>You can find the IDs of your items in the URL of the item page in the web
|
|
interface.<br>
|
|
Example:
|
|
<code>https://your-jellyfin-url/web/#/details?id=<b style="color:red;">your-item-id</b>&serverId=your-server-id</code><br><br>
|
|
You can also insert a name of a collection or playlist to fetch the IDs of all items
|
|
in it (will take the first hit.<br><b>Note:</b> There is currently no feedback if
|
|
the name resolution succeeded, you will have to look if the bar displays the correct
|
|
items).
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Seasonal Content -->
|
|
<h2 class="sectionTitle" style="margin-top: 2em;">Seasonal Content</h2>
|
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
<label>
|
|
<input is="emby-checkbox" type="checkbox" id="EnableSeasonalContent"
|
|
name="EnableSeasonalContent" />
|
|
<span>Enable Seasonal Content</span>
|
|
</label>
|
|
<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 class="checkboxContainer checkboxContainer-withDescription">
|
|
<label>
|
|
<input is="emby-checkbox" type="checkbox" id="ExcludeSeasonalContent"
|
|
name="ExcludeSeasonalContent" />
|
|
<span>Exclude Seasonal Content from Random Lists</span>
|
|
</label>
|
|
<div class="fieldDescription">When enabled, any items defined in your Seasonal Sections below will be explicitly excluded from being shown when the plugin pulls random items from your library.</div>
|
|
</div>
|
|
|
|
<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 seasonal rules to automatically select a 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;">
|
|
<i class="material-icons" style="font-size: 24px;">add</i>
|
|
<span>Add Season</span>
|
|
</button>
|
|
</div>
|
|
<input type="hidden" id="SeasonalSections" name="SeasonalSections" value="[]" />
|
|
</div>
|
|
|
|
<!-- ADVANCED TAB -->
|
|
<div id="media-bar-enhanced-advanced" class="tab-content" style="display:none;">
|
|
<h2 class="sectionTitle">Features</h2>
|
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
<label>
|
|
<input is="emby-checkbox" type="checkbox" id="SlideAnimationEnabled"
|
|
name="SlideAnimationEnabled" />
|
|
<span>Enable Slide Animations</span>
|
|
</label>
|
|
<div class="fieldDescription">Enable the zooming-in effect on background images when a new
|
|
slide is shown (does not affect trailer backdrops). Attention: This may cause
|
|
performance issues on weaker client hardware.</div>
|
|
</div>
|
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
<label>
|
|
<input is="emby-checkbox" type="checkbox" id="EnableClientSideSettings"
|
|
name="EnableClientSideSettings" />
|
|
<span>Enable Client-Side Settings</span>
|
|
</label>
|
|
<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 (if data is
|
|
available).</div>
|
|
</div>
|
|
<div class="selectContainer">
|
|
<label class="selectLabel" for="PreferredVideoQuality">Preferred YouTube Quality</label>
|
|
<select is="emby-select" id="PreferredVideoQuality" name="PreferredVideoQuality"
|
|
class="selectLayout emby-select-withcolor emby-select"
|
|
style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
|
|
<option value="Auto">Auto (Smart)</option>
|
|
<option value="Maximum">Maximum (4K+)</option>
|
|
<option value="1080p">1080p</option>
|
|
<option value="720p">720p</option>
|
|
</select>
|
|
<div class="fieldDescription">"Auto" selects Maximum if screen width > 1920px, otherwise
|
|
1080p.</div>
|
|
</div>
|
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
<label>
|
|
<input is="emby-checkbox" type="checkbox" id="StartMuted" name="StartMuted" />
|
|
<span>Start Muted</span>
|
|
</label>
|
|
<div class="fieldDescription">Start trailer video playback muted. (Known issue: In the
|
|
Android/IOS app, backdrop trailers are always muted.)<br>
|
|
<b style="color:#ffcc00">Warning:</b> Disabling this may cause autoplay to fail on
|
|
certain browsers due to strict autoplay policies.</div>
|
|
</div>
|
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
<label>
|
|
<input is="emby-checkbox" type="checkbox" id="FullWidthVideo" name="FullWidthVideo" />
|
|
<span>Full Width Video</span>
|
|
</label>
|
|
<div class="fieldDescription">Stretch video to full width. Very nice on desktops, on mobile
|
|
devices only the middle of the video is visible.<br>Disable to get the full aspect ratio
|
|
on
|
|
mobile devices. (looks bad on desktops)</div>
|
|
</div>
|
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
<label>
|
|
<input is="emby-checkbox" type="checkbox" id="EnableLoadingScreen"
|
|
name="EnableLoadingScreen" />
|
|
<span>Enable Loading Screen</span>
|
|
</label>
|
|
<div class="fieldDescription">Show a loading screen while the slideshow initializes. (You
|
|
may have to reload the page twice (after changing this setting) to take effect)</div>
|
|
</div>
|
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
<label>
|
|
<input is="emby-checkbox" type="checkbox" id="AlwaysShowArrows"
|
|
name="AlwaysShowArrows" />
|
|
<span>Always Show Arrow Navigation Buttons</span>
|
|
</label>
|
|
<div class="fieldDescription">Force the UI arrow navigation buttons to always be visible instead of only when hovered.</div>
|
|
</div>
|
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
<label>
|
|
<input is="emby-checkbox" type="checkbox" id="HideArrowsOnMobile"
|
|
name="HideArrowsOnMobile" />
|
|
<span>Hide Arrows on Mobile</span>
|
|
</label>
|
|
<div class="fieldDescription">Completely disable the navigation arrows on mobile devices (since swiping is available).</div>
|
|
</div>
|
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
<label>
|
|
<input is="emby-checkbox" type="checkbox" id="EnableKeyboardControls"
|
|
name="EnableKeyboardControls" />
|
|
<span>Enable Keyboard Controls</span>
|
|
</label>
|
|
<div class="fieldDescription">Enable keyboard shortcuts (Arrows left/right (change slide),
|
|
Space (pause), M (mute/unmute)) for
|
|
the slideshow.</div>
|
|
</div>
|
|
<hr style="max-width: 800px; margin: 1em 0;">
|
|
|
|
<h2 class="sectionTitle">Time Settings</h2>
|
|
<p>Leave a setting blank to use the default value.</p>
|
|
<div class="inputContainer">
|
|
<label class="inputLabel inputLabelUnfocused" for="ShuffleInterval">Shuffle Interval
|
|
(ms)</label>
|
|
<input is="emby-input" type="number" id="ShuffleInterval" name="ShuffleInterval" />
|
|
<div class="fieldDescription">Time in milliseconds between changing slides.</div>
|
|
</div>
|
|
|
|
<div class="inputContainer">
|
|
<label class="inputLabel inputLabelUnfocused" for="RetryInterval">Retry Interval
|
|
(ms)</label>
|
|
<input is="emby-input" type="number" id="RetryInterval" name="RetryInterval" />
|
|
<div class="fieldDescription">Time in milliseconds to wait before retrying failed
|
|
operations.</div>
|
|
</div>
|
|
|
|
<div class="inputContainer">
|
|
<label class="inputLabel inputLabelUnfocused" for="LoadingCheckInterval">Loading Check
|
|
Interval (ms)</label>
|
|
<input is="emby-input" type="number" id="LoadingCheckInterval"
|
|
name="LoadingCheckInterval" />
|
|
<div class="fieldDescription">Frequency of checking wether the login screen or home screen
|
|
has loaded (in milliseconds).</div>
|
|
</div>
|
|
|
|
<div class="inputContainer">
|
|
<label class="inputLabel inputLabelUnfocused" for="FadeTransitionDuration">Fade
|
|
Transition Duration (ms)</label>
|
|
<input is="emby-input" type="number" id="FadeTransitionDuration"
|
|
name="FadeTransitionDuration" />
|
|
<div class="fieldDescription">Duration in milliseconds of the transition between slides.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="inputContainer">
|
|
<label class="inputLabel inputLabelUnfocused" for="MinSwipeDistance">Min Swipe Distance
|
|
(px)</label>
|
|
<input is="emby-input" type="number" id="MinSwipeDistance" name="MinSwipeDistance" />
|
|
<div class="fieldDescription">Minimum distance in pixels for a swipe to be registered (for
|
|
mobile).</div>
|
|
</div>
|
|
<hr style="max-width: 800px; margin: 1em 0;">
|
|
|
|
<h2 class="sectionTitle">Content Sorting and Filtering</h2>
|
|
<div class="selectContainer">
|
|
<label class="selectLabel" for="SortBy">Sort By</label>
|
|
<select is="emby-select" id="SortBy" name="SortBy"
|
|
class="selectLayout emby-select-withcolor emby-select"
|
|
style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
|
|
<option value="Random">Random</option>
|
|
<option value="Original">Original (Custom List Order)</option>
|
|
<option value="PremiereDate">Premiere Date</option>
|
|
<option value="ProductionYear">Production Year</option>
|
|
<option value="CriticRating">Critic Rating</option>
|
|
<option value="CommunityRating">Community Rating</option>
|
|
<option value="Name">Name</option>
|
|
<option value="Runtime">Runtime</option>
|
|
</select>
|
|
<div class="fieldDescription">Sort items by the selected criteria.</div>
|
|
</div>
|
|
<div class="selectContainer">
|
|
<label class="selectLabel" for="SortOrder">Sort Order</label>
|
|
<select is="emby-select" id="SortOrder" name="SortOrder"
|
|
class="selectLayout emby-select-withcolor emby-select"
|
|
style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
|
|
<option value="Ascending">Ascending</option>
|
|
<option value="Descending">Descending</option>
|
|
</select>
|
|
<div class="fieldDescription">Sort items in Ascending or Descending order.</div>
|
|
</div>
|
|
<div class="fieldDescription" style="margin-bottom: 2em; color: #ffcc00;">
|
|
<b>Note:</b> Sorting settings apply to both Server content and Custom IDs. 'Original'
|
|
preserves Custom List order.
|
|
</div>
|
|
<div class="inputContainer">
|
|
<label class="inputLabel inputLabelUnfocused" for="MaxParentalRating">Max Parental Rating (Age Limit)</label>
|
|
<input is="emby-input" type="number" id="MaxParentalRating" name="MaxParentalRating" />
|
|
<div class="fieldDescription">Items exceeding this age rating will not be shown. Leave blank or set to 0 for no limit. Examples: 12, 16, 18.</div>
|
|
</div>
|
|
<div class="inputContainer">
|
|
<label class="inputLabel inputLabelUnfocused" for="MaxDaysRecent">Max Days Recent</label>
|
|
<input is="emby-input" type="number" id="MaxDaysRecent" name="MaxDaysRecent" />
|
|
<div class="fieldDescription">Only show items added in the last X days. Leave blank or set to 0 for no limit. Example: 30.</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>
|
|
<hr style="max-width: 800px; margin: 1em 0;">
|
|
|
|
<h2 class="sectionTitle">Content Limits</h2>
|
|
<p>Leave a setting blank to use the default value.</p>
|
|
<div class="inputContainer">
|
|
<label class="inputLabel inputLabelUnfocused" for="MaxItems">Total Max Items</label>
|
|
<input is="emby-input" type="number" id="MaxItems" name="MaxItems" />
|
|
<div class="fieldDescription">Maximum total items to fetch (for all content types combined).
|
|
</div>
|
|
</div>
|
|
<div class="inputContainer">
|
|
<label class="inputLabel inputLabelUnfocused" for="MaxMovies">Max Movies</label>
|
|
<input is="emby-input" type="number" id="MaxMovies" name="MaxMovies" />
|
|
<div class="fieldDescription">Maximum movies to include in slideshow (for random selection).
|
|
</div>
|
|
</div>
|
|
<div class="inputContainer">
|
|
<label class="inputLabel inputLabelUnfocused" for="MaxTvShows">Max TV Shows</label>
|
|
<input is="emby-input" type="number" id="MaxTvShows" name="MaxTvShows" />
|
|
<div class="fieldDescription">Maximum TV shows to include in slideshow (for random
|
|
selection).</div>
|
|
</div>
|
|
<div class="inputContainer">
|
|
<label class="inputLabel inputLabelUnfocused" for="PreloadCount">Preload Count</label>
|
|
<input is="emby-input" type="number" id="PreloadCount" name="PreloadCount" />
|
|
<div class="fieldDescription">Number of slides to preload.</div>
|
|
</div>
|
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
<label>
|
|
<input is="emby-checkbox" type="checkbox" id="ShowPaginationDots"
|
|
name="ShowPaginationDots" />
|
|
<span>Show Pagination Dots/Counter</span>
|
|
</label>
|
|
<div class="fieldDescription">Show or hide the pagination dots/counter navigation at the
|
|
bottom of the slideshow.</div>
|
|
</div>
|
|
<div class="inputContainer">
|
|
<label class="inputLabel inputLabelUnfocused" for="MaxPaginationDots">Max Pagination
|
|
Dots</label>
|
|
<input is="emby-input" type="number" id="MaxPaginationDots" name="MaxPaginationDots" />
|
|
<div class="fieldDescription">Maximum number of dots to show in navigation. If the number
|
|
will be exceeded, the dots will "turn" into a counter style (e.g. 1/100). Set to 0 to
|
|
enable counter style directly.</div>
|
|
</div>
|
|
<div class="inputContainer">
|
|
<label class="inputLabel inputLabelUnfocused" for="MaxPlotLength">Max Plot
|
|
Length</label>
|
|
<input is="emby-input" type="number" id="MaxPlotLength" name="MaxPlotLength" />
|
|
<div class="fieldDescription">Maximum characters for the plot summary.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
All changes require a page refresh (ctrl + r or F5) after saving for changes to take effect.
|
|
<br />
|
|
If old settings persist, please force clear browser cache.
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<button is="emby-button" type="submit" class="raised button-submit block emby-button">
|
|
<span>${Save}</span>
|
|
</button>
|
|
<button is="emby-button" type="button" class="raised button-cancel block btnCancel"
|
|
onclick="history.back();">
|
|
<span>${ButtonCancel}</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showTab(tabId, btn) {
|
|
document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
|
|
document.getElementById(tabId).style.display = 'block';
|
|
|
|
document.querySelectorAll('.jellyfin-tab-button').forEach(b => {
|
|
b.classList.remove('active');
|
|
b.style.color = '#ccc';
|
|
b.style.borderBottom = '2px solid transparent';
|
|
});
|
|
|
|
if (btn) {
|
|
btn.classList.add('active');
|
|
btn.style.color = '#fff';
|
|
btn.style.borderBottom = '2px solid #00a4dc';
|
|
}
|
|
}
|
|
|
|
var MediaBarEnhancedConfigurationPage = {
|
|
pluginId: 'd7e11d57-819b-4bdd-a88d-53c5f5560225',
|
|
loadConfiguration: function (page) {
|
|
Dashboard.showLoadingMsg();
|
|
ApiClient.getPluginConfiguration(MediaBarEnhancedConfigurationPage.pluginId).then(function (config) {
|
|
|
|
var keys = [
|
|
'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance',
|
|
'LoadingCheckInterval', 'MaxPlotLength', 'MaxMovies', 'MaxTvShows',
|
|
'MaxItems', 'PreloadCount', 'FadeTransitionDuration', 'MaxPaginationDots',
|
|
'SlideAnimationEnabled', 'EnableVideoBackdrop', 'UseSponsorBlock',
|
|
'WaitForTrailerToEnd', 'StartMuted', 'FullWidthVideo', 'EnableMobileVideo',
|
|
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
|
|
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
|
|
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
|
|
'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
|
|
'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
|
|
'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
|
|
'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile'
|
|
];
|
|
|
|
// Manual mapping for MediaBarIsEnabled -> IsEnabled, to avoid conflicts with other plugins
|
|
var mediaBarEnabledCheckbox = page.querySelector('#MediaBarIsEnabled');
|
|
if (mediaBarEnabledCheckbox) {
|
|
mediaBarEnabledCheckbox.checked = config.IsEnabled;
|
|
}
|
|
|
|
keys.forEach(function (key) {
|
|
var el = page.querySelector('#' + key);
|
|
if (el) {
|
|
if (el.type === 'checkbox') {
|
|
el.checked = config[key];
|
|
} else {
|
|
el.value = config[key];
|
|
}
|
|
}
|
|
});
|
|
|
|
// Render Seasonal Sections
|
|
try {
|
|
var sections = JSON.parse(config.SeasonalSections || "[]");
|
|
MediaBarEnhancedConfigurationPage.renderSeasonalSections(page, sections);
|
|
} catch (e) {
|
|
console.error("Error parsing SeasonalSections", e);
|
|
}
|
|
|
|
// Handle Seasonal UI visibility
|
|
var seasonalCheckbox = page.querySelector('#EnableSeasonalContent');
|
|
var seasonalContainer = page.querySelector('#seasonalContentContainer');
|
|
|
|
function updateSeasonalVisibility() {
|
|
if (seasonalContainer) {
|
|
seasonalContainer.style.display = seasonalCheckbox && seasonalCheckbox.checked ? 'block' : 'none';
|
|
}
|
|
}
|
|
|
|
if (seasonalCheckbox) {
|
|
seasonalCheckbox.addEventListener('change', updateSeasonalVisibility);
|
|
updateSeasonalVisibility();
|
|
}
|
|
|
|
// Add Season Button
|
|
var addSeasonBtn = page.querySelector('#addSeasonBtn');
|
|
if (addSeasonBtn) {
|
|
// Remove existing listeners to avoid duplicates if re-attached
|
|
var newBtn = addSeasonBtn.cloneNode(true);
|
|
addSeasonBtn.parentNode.replaceChild(newBtn, addSeasonBtn);
|
|
newBtn.addEventListener('click', function () {
|
|
MediaBarEnhancedConfigurationPage.addSeasonalSection(page);
|
|
});
|
|
}
|
|
|
|
// Handle Prefer Local Trailers visibility
|
|
var enableVideoBackdropCheckbox = page.querySelector('#EnableVideoBackdrop');
|
|
var preferLocalContainer = page.querySelector('#PreferLocalTrailersContainer');
|
|
var preferLocalBackdropsContainer = page.querySelector('#PreferLocalBackdropsContainer');
|
|
var waitForTrailerContainer = page.querySelector('#WaitForTrailerToEndContainer');
|
|
var enableMobileVideoContainer = page.querySelector('#EnableMobileVideoContainer');
|
|
|
|
function updatePreferLocalVisibility() {
|
|
if (enableVideoBackdropCheckbox && enableVideoBackdropCheckbox.checked) {
|
|
if (preferLocalContainer) preferLocalContainer.style.display = 'block';
|
|
if (preferLocalBackdropsContainer) preferLocalBackdropsContainer.style.display = 'block';
|
|
if (waitForTrailerContainer) waitForTrailerContainer.style.display = 'block';
|
|
if (enableMobileVideoContainer) enableMobileVideoContainer.style.display = 'block';
|
|
} else {
|
|
if (preferLocalContainer) preferLocalContainer.style.display = 'none';
|
|
if (preferLocalBackdropsContainer) preferLocalBackdropsContainer.style.display = 'none';
|
|
if (waitForTrailerContainer) waitForTrailerContainer.style.display = 'none';
|
|
if (enableMobileVideoContainer) enableMobileVideoContainer.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
if (enableVideoBackdropCheckbox) {
|
|
enableVideoBackdropCheckbox.addEventListener('change', updatePreferLocalVisibility);
|
|
updatePreferLocalVisibility();
|
|
}
|
|
|
|
Dashboard.hideLoadingMsg();
|
|
});
|
|
},
|
|
saveConfiguration: function (page) {
|
|
Dashboard.showLoadingMsg();
|
|
|
|
var sections = MediaBarEnhancedConfigurationPage.getSeasonalSectionsFromUI(page);
|
|
var sectionsJson = JSON.stringify(sections);
|
|
var seasonalInput = page.querySelector('#SeasonalSections');
|
|
if (seasonalInput) seasonalInput.value = sectionsJson;
|
|
|
|
var config = {};
|
|
|
|
// Manual mapping for MediaBarIsEnabled -> IsEnabled, to avoid conflicts with other plugins
|
|
var mediaBarEnabledCheckbox = page.querySelector('#MediaBarIsEnabled');
|
|
if (mediaBarEnabledCheckbox) {
|
|
config.IsEnabled = mediaBarEnabledCheckbox.checked;
|
|
}
|
|
|
|
var keys = [
|
|
'ShuffleInterval', 'RetryInterval', 'MinSwipeDistance',
|
|
'LoadingCheckInterval', 'MaxPlotLength', 'MaxMovies', 'MaxTvShows',
|
|
'MaxItems', 'PreloadCount', 'FadeTransitionDuration', 'MaxPaginationDots',
|
|
'SlideAnimationEnabled', 'EnableVideoBackdrop', 'UseSponsorBlock',
|
|
'WaitForTrailerToEnd', 'StartMuted', 'FullWidthVideo', 'EnableMobileVideo',
|
|
'ShowTrailerButton', 'AlwaysShowArrows', 'EnableKeyboardControls',
|
|
'EnableCustomMediaIds', 'CustomMediaIds', 'EnableLoadingScreen',
|
|
'EnableSeasonalContent', 'EnableClientSideSettings', 'SortBy', 'SortOrder',
|
|
'PreferLocalTrailers', 'ApplyLimitsToCustomIds', 'SeasonalSections',
|
|
'PreferLocalBackdrops', 'RandomizeThemeVideos', 'RandomizeLocalTrailers',
|
|
'IncludeWatchedContent', 'ShowPaginationDots', 'MaxParentalRating',
|
|
'MaxDaysRecent', 'ExcludeSeasonalContent', 'HideArrowsOnMobile'
|
|
];
|
|
|
|
keys.forEach(function (key) {
|
|
var el = page.querySelector('#' + key);
|
|
if (el) {
|
|
if (el.type === 'checkbox') {
|
|
config[key] = el.checked;
|
|
} else {
|
|
config[key] = (el.type === 'number') ? parseInt(el.value, 10) : el.value;
|
|
}
|
|
}
|
|
});
|
|
|
|
ApiClient.updatePluginConfiguration(MediaBarEnhancedConfigurationPage.pluginId, config).then(function (result) {
|
|
Dashboard.processPluginConfigurationUpdateResult(result);
|
|
});
|
|
},
|
|
|
|
renderSeasonalSections: function (page, sections) {
|
|
var container = page.querySelector('#seasonalSectionsList');
|
|
if (!container) return;
|
|
container.innerHTML = '';
|
|
sections.forEach(function (section, index) {
|
|
MediaBarEnhancedConfigurationPage.createSectionElement(container, section, index + 1);
|
|
});
|
|
},
|
|
|
|
addSeasonalSection: function (page) {
|
|
var container = page.querySelector('#seasonalSectionsList');
|
|
if (!container) return;
|
|
var index = container.children.length + 1;
|
|
MediaBarEnhancedConfigurationPage.createSectionElement(container, {
|
|
Name: 'New Season',
|
|
StartDay: 1, StartMonth: 1,
|
|
EndDay: 1, EndMonth: 1,
|
|
MediaIds: ''
|
|
}, index);
|
|
},
|
|
|
|
createSectionElement: function (container, data, index) {
|
|
var div = document.createElement('div');
|
|
div.className = 'seasonal-section';
|
|
div.style.cssText = 'background: rgba(0,0,0,0.2); padding: 1em; margin-bottom: 1em; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1);';
|
|
|
|
var days = [];
|
|
for (var i = 1; i <= 31; i++) days.push(i);
|
|
var months = [
|
|
{ v: 1, n: 'Jan' }, { v: 2, n: 'Feb' }, { v: 3, n: 'Mar' }, { v: 4, n: 'Apr' },
|
|
{ v: 5, n: 'May' }, { v: 6, n: 'Jun' }, { v: 7, n: 'Jul' }, { v: 8, n: 'Aug' },
|
|
{ v: 9, n: 'Sep' }, { v: 10, n: 'Oct' }, { v: 11, n: 'Nov' }, { v: 12, n: 'Dec' }
|
|
];
|
|
|
|
function mkSelect(val, opts, cls) {
|
|
var h = '<select class="emby-select emby-select-withcolor ' + cls + '" style="width: auto; display: inline-block; margin-right: 5px; -webkit-appearance: menulist; appearance: menulist;">';
|
|
opts.forEach(function (o) {
|
|
var v = o.v || o;
|
|
var n = o.n || o;
|
|
h += '<option value="' + v + '" ' + (v == val ? 'selected' : '') + '>' + n + '</option>';
|
|
});
|
|
h += '</select>';
|
|
return h;
|
|
}
|
|
|
|
var labelText = 'Season list #' + (index || 1);
|
|
|
|
div.innerHTML =
|
|
'<div class="inputContainer" style="margin-bottom: 0.5em;">' +
|
|
' <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>' +
|
|
' </div>' +
|
|
' <div class="inputContainer">' +
|
|
' <input is="emby-input" type="text" class="emby-input section-name" style="width: 60%;" 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>' +
|
|
' <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em;">' +
|
|
' <span>From:</span>' +
|
|
mkSelect(data.StartDay, days, 'start-day') +
|
|
mkSelect(data.StartMonth, months, 'start-month') +
|
|
' <span style="margin-left: 1em;">To:</span>' +
|
|
mkSelect(data.EndDay, days, 'end-day') +
|
|
mkSelect(data.EndMonth, months, 'end-month') +
|
|
' </div>' +
|
|
' <div class="fieldDescription">Date range (inclusive) when this content is active.</div>' +
|
|
'</div>' +
|
|
'<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 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('.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');
|
|
els.forEach(function (el) {
|
|
sections.push({
|
|
Name: el.querySelector('.section-name').value,
|
|
StartDay: parseInt(el.querySelector('.start-day').value),
|
|
StartMonth: parseInt(el.querySelector('.start-month').value),
|
|
EndDay: parseInt(el.querySelector('.end-day').value),
|
|
EndMonth: parseInt(el.querySelector('.end-month').value),
|
|
MediaIds: el.querySelector('.section-ids').value
|
|
});
|
|
});
|
|
return sections;
|
|
}
|
|
};
|
|
|
|
document.querySelector('#MediaBarEnhancedConfigurationPage').addEventListener('pageshow', function () {
|
|
MediaBarEnhancedConfigurationPage.loadConfiguration(this);
|
|
});
|
|
|
|
document.querySelector('#mediaBarEnhancedConfigForm').addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
MediaBarEnhancedConfigurationPage.saveConfiguration(document.querySelector('#MediaBarEnhancedConfigurationPage'));
|
|
return false;
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.jellyfin-tab-button.active {
|
|
color: #fff !important;
|
|
border-bottom: 2px solid #00a4dc !important;
|
|
}
|
|
</style>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |