1284 lines
84 KiB
HTML
1284 lines
84 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-overlay', 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 Overlay</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>
|
|
|
|
<!-- CUSTOM OVERLAY TAB -->
|
|
<div id="media-bar-enhanced-overlay" class="tab-content" style="display:none;">
|
|
<h2 class="sectionTitle">Custom Slideshow Overlay</h2>
|
|
<p>Inject a custom text or floating image over the slideshow. This can be overridden by specific Seasonal Sections in the Custom Filters tab.</p>
|
|
|
|
<div class="checkboxContainer checkboxContainer-withDescription">
|
|
<label>
|
|
<input is="emby-checkbox" type="checkbox" id="EnableCustomOverlay" name="EnableCustomOverlay" />
|
|
<span>Enable Custom Overlay</span>
|
|
</label>
|
|
<div class="fieldDescription">If enabled, the text or image below will hover over the slideshow globally.</div>
|
|
</div>
|
|
|
|
<div class="selectContainer" style="margin-top: 1em;">
|
|
<label class="selectLabel" for="CustomOverlayPriority">Priority (If Both Are Set)</label>
|
|
<select is="emby-select" id="CustomOverlayPriority" name="CustomOverlayPriority"
|
|
class="selectLayout emby-select-withcolor emby-select"
|
|
style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
|
|
<option value="Image">Show Image</option>
|
|
<option value="Text">Show Text</option>
|
|
</select>
|
|
<div class="fieldDescription">What should be displayed if you have both an Image and Text configured?</div>
|
|
</div>
|
|
|
|
<div class="inputContainer">
|
|
<label class="inputLabel inputLabelUnfocused" for="CustomOverlayText">Global Overlay Text</label>
|
|
<input is="emby-input" type="text" id="CustomOverlayText" name="CustomOverlayText" />
|
|
<div class="fieldDescription">Text to display on the overlay (e.g. "Movie Night!").</div>
|
|
</div>
|
|
|
|
<div class="inputContainer">
|
|
<label class="inputLabel inputLabelUnfocused" for="CustomOverlayImageUrl">Global Overlay Image URL</label>
|
|
<input is="emby-input" type="text" id="CustomOverlayImageUrl" name="CustomOverlayImageUrl" />
|
|
<div class="fieldDescription">Absolute URL to an image to display on the overlay.</div>
|
|
</div>
|
|
|
|
<!-- Image Upload Dropzone -->
|
|
<div class="inputContainer" style="margin-top: 1em;">
|
|
<label class="inputLabel">Or Upload Local Image</label>
|
|
<div id="overlayImageDropzone" style="border: 2px dashed rgba(255,255,255,0.2); border-radius: 8px; padding: 2em; text-align: center; cursor: pointer; background: rgba(0,0,0,0.2); transition: all 0.2s ease; position: relative; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
|
<i class="material-icons" style="font-size: 40px; color: rgba(255,255,255,0.4); margin-bottom: 10px;">cloud_upload</i>
|
|
<span style="font-size: 1.1em; color: rgba(255,255,255,0.7);">Drag and drop an image here, or click to select</span>
|
|
<input type="file" id="overlayImageInput" accept="image/png, image/jpeg, image/gif, image/webp" style="display: none;">
|
|
<img id="overlayImagePreview" style="display: none; max-width: 100%; max-height: 150px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 4px; z-index: 2;" />
|
|
<!-- A semi-transparent overlay to clear the image -->
|
|
<button type="button" id="clearOverlayImageBtn" is="paper-icon-button-light" style="display: none; position: absolute; top: 10px; right: 10px; z-index: 3; color: #a94442;" title="Clear Image">
|
|
<i class="material-icons">delete</i>
|
|
</button>
|
|
</div>
|
|
<div class="fieldDescription">Uploading an image will save it to your server and automatically update the URL field above.</div>
|
|
</div>
|
|
|
|
<h2 class="sectionTitle" style="margin-top: 1.2em;">Styles</h2>
|
|
|
|
<div class="selectContainer">
|
|
<label class="selectLabel" for="CustomOverlayStyle">Overlay Style</label>
|
|
<select is="emby-select" id="CustomOverlayStyle" name="CustomOverlayStyle"
|
|
class="selectLayout emby-select-withcolor emby-select"
|
|
style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
|
|
<option value="None">None (Plain White)</option>
|
|
<option value="Shadowed">Classic Shadowed</option>
|
|
<option value="Frosted">Frosted Glass Pill</option>
|
|
<option value="Cinematic">Cinematic Golden Glow</option>
|
|
<option value="Pulse">Animated Pulse</option>
|
|
<option value="SteadyNeon">Steady Neon</option>
|
|
<option value="Neon">Neon Cyberpunk (Glitching)</option>
|
|
<option value="Typewriter">Typewriter Pop</option>
|
|
<option value="Bubble">Floating Bubble</option>
|
|
<option value="SlideIn">Cinematic Slide-In</option>
|
|
<option value="Glitch">Cyberpunk Glitch</option>
|
|
<option value="RetroPop">Retro Pop 3D</option>
|
|
<option value="Shimmer">Glowing Shimmer</option>
|
|
<option value="Wave">Liquid Wave</option>
|
|
<option value="VHS">VHS Tracking</option>
|
|
<option value="Matrix">Digital Matrix</option>
|
|
<option value="Ghost">Ghostly Apparition</option>
|
|
<option value="PulseGlow">Breathing Pulse Glow</option>
|
|
</select>
|
|
<div class="fieldDescription">Choose the visual styling animation for your custom text.</div>
|
|
</div>
|
|
|
|
<div class="selectContainer">
|
|
<label class="selectLabel" for="CustomOverlayImageStyle">Image Style</label>
|
|
<select is="emby-select" id="CustomOverlayImageStyle" name="CustomOverlayImageStyle"
|
|
class="selectLayout emby-select-withcolor emby-select"
|
|
style="width: 100%; -webkit-appearance: menulist; appearance: menulist;">
|
|
<option value="None">None (Default)</option>
|
|
<option value="RoundedShadow">Rounded & Shadow</option>
|
|
<option value="GlowingBorder">Neon Glow</option>
|
|
<option value="Polaroid">Polaroid Frame</option>
|
|
<option value="Vintage">Vintage Sepia</option>
|
|
<option value="Grayscale">Grayscale</option>
|
|
<option value="Hologram">Hologram</option>
|
|
<option value="CRT">CRT Monitor</option>
|
|
<option value="Floating">Floating Float</option>
|
|
<option value="VHSTracking">VHS Tracking Glitch</option>
|
|
<option value="ColorCycle">Rainbow Color Cycle</option>
|
|
<option value="Mirror">Mirror Reflection</option>
|
|
</select>
|
|
<div class="fieldDescription">Choose a visual effect to apply to your overlay image.</div>
|
|
</div>
|
|
|
|
<h3 class="sectionTitle" style="margin-top:2em; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5em;">Layout Tweaks</h3>
|
|
<div style="display: flex; gap: 1em; flex-wrap: wrap;">
|
|
<div class="inputContainer" style="flex: 1; min-width: 150px;">
|
|
<label class="inputLabel inputLabelUnfocused" for="CustomOverlayPositionX">X Offset (% vw)</label>
|
|
<input is="emby-input" type="number" id="CustomOverlayPositionX" name="CustomOverlayPositionX" min="-50" max="50" step="1" />
|
|
<div class="fieldDescription">Horizontal nudge (negative = left, positive = right). Default is 0.</div>
|
|
</div>
|
|
<div class="inputContainer" style="flex: 1; min-width: 150px;">
|
|
<label class="inputLabel inputLabelUnfocused" for="CustomOverlayPositionY">Y Offset (% vh)</label>
|
|
<input is="emby-input" type="number" id="CustomOverlayPositionY" name="CustomOverlayPositionY" min="-50" max="50" step="1" />
|
|
<div class="fieldDescription">Vertical nudge (negative = up, positive = down). Default is 0.</div>
|
|
</div>
|
|
<div class="inputContainer" style="flex: 1; min-width: 150px;">
|
|
<label class="inputLabel inputLabelUnfocused" for="CustomOverlayScale">Scale (%)</label>
|
|
<input is="emby-input" type="number" id="CustomOverlayScale" name="CustomOverlayScale" min="50" max="200" step="1" />
|
|
<div class="fieldDescription">Overlay zoom level. Default is 100%.</div>
|
|
</div>
|
|
</div>
|
|
</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',
|
|
'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl',
|
|
'CustomOverlayStyle', 'CustomOverlayImageStyle', 'CustomOverlayPriority',
|
|
'CustomOverlayPositionX', 'CustomOverlayPositionY', 'CustomOverlayScale'
|
|
];
|
|
|
|
// 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();
|
|
}
|
|
|
|
// Overlay Image Upload Logic
|
|
var dropzone = page.querySelector('#overlayImageDropzone');
|
|
var fileInput = page.querySelector('#overlayImageInput');
|
|
var urlInput = page.querySelector('#CustomOverlayImageUrl');
|
|
var previewImg = page.querySelector('#overlayImagePreview');
|
|
var clearBtn = page.querySelector('#clearOverlayImageBtn');
|
|
|
|
function updatePreview() {
|
|
var icon = dropzone.querySelector('i');
|
|
var text = dropzone.querySelector('span');
|
|
if (urlInput.value && urlInput.value.trim() !== '') {
|
|
previewImg.src = urlInput.value;
|
|
previewImg.style.display = 'block';
|
|
clearBtn.style.display = 'block';
|
|
if(icon) icon.style.display = 'none';
|
|
if(text) {
|
|
text.textContent = 'Drag and drop a new image here, or click to select';
|
|
text.style.display = 'block';
|
|
text.style.position = 'absolute';
|
|
text.style.bottom = '10px';
|
|
text.style.zIndex = '3';
|
|
text.style.backgroundColor = 'rgba(0,0,0,0.6)';
|
|
text.style.padding = '4px 8px';
|
|
text.style.borderRadius = '4px';
|
|
}
|
|
} else {
|
|
previewImg.style.display = 'none';
|
|
clearBtn.style.display = 'none';
|
|
if(icon) icon.style.display = 'block';
|
|
if(text) {
|
|
text.textContent = 'Drag and drop an image here, or click to select';
|
|
text.style.display = 'block';
|
|
text.style.position = 'static';
|
|
text.style.backgroundColor = 'transparent';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initial check
|
|
updatePreview();
|
|
|
|
// Listen to manual URL input changes
|
|
urlInput.addEventListener('input', updatePreview);
|
|
|
|
clearBtn.addEventListener('click', function(e) {
|
|
e.stopPropagation(); // prevent triggering file dialog
|
|
|
|
// Call DELETE API to remove global image
|
|
fetch(ApiClient.serverAddress() + '/MediaBarEnhanced/OverlayImage', {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Authorization': 'MediaBrowser Client="' + ApiClient.appName() + '", Device="' + ApiClient.deviceName() + '", DeviceId="' + ApiClient.deviceId() + '", Version="' + ApiClient.appVersion() + '", Token="' + ApiClient.accessToken() + '"'
|
|
}
|
|
}).catch(console.error);
|
|
|
|
urlInput.value = '';
|
|
fileInput.value = '';
|
|
updatePreview();
|
|
});
|
|
|
|
dropzone.addEventListener('click', function() {
|
|
fileInput.click();
|
|
});
|
|
|
|
dropzone.addEventListener('dragover', function(e) {
|
|
e.preventDefault();
|
|
dropzone.style.borderColor = '#00a4dc';
|
|
dropzone.style.background = 'rgba(0, 164, 220, 0.2)';
|
|
});
|
|
|
|
dropzone.addEventListener('dragleave', function(e) {
|
|
e.preventDefault();
|
|
dropzone.style.borderColor = 'rgba(255,255,255,0.2)';
|
|
dropzone.style.background = 'rgba(0,0,0,0.2)';
|
|
});
|
|
|
|
dropzone.addEventListener('drop', function(e) {
|
|
e.preventDefault();
|
|
dropzone.style.borderColor = 'rgba(255,255,255,0.2)';
|
|
dropzone.style.background = 'rgba(0,0,0,0.2)';
|
|
|
|
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
|
fileInput.files = e.dataTransfer.files;
|
|
uploadImage(e.dataTransfer.files[0]);
|
|
}
|
|
});
|
|
|
|
fileInput.addEventListener('change', function() {
|
|
if (this.files && this.files.length > 0) {
|
|
uploadImage(this.files[0]);
|
|
}
|
|
});
|
|
|
|
function uploadImage(file) {
|
|
// Validate it's an image
|
|
if (!file.type.match('image.*')) {
|
|
Dashboard.alert('Please select a valid image file.');
|
|
return;
|
|
}
|
|
|
|
Dashboard.showLoadingMsg();
|
|
|
|
var formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
// The Endpoint we created in C#
|
|
fetch(ApiClient.serverAddress() + '/MediaBarEnhanced/OverlayImage', {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'Authorization': 'MediaBrowser Client="' + ApiClient.appName() + '", Device="' + ApiClient.deviceName() + '", DeviceId="' + ApiClient.deviceId() + '", Version="' + ApiClient.appVersion() + '", Token="' + ApiClient.accessToken() + '"'
|
|
}
|
|
})
|
|
.then(response => {
|
|
if (response.ok) return response.json();
|
|
throw new Error('Network response was not ok.');
|
|
})
|
|
.then(data => {
|
|
// Update URL input
|
|
urlInput.value = ApiClient.serverAddress() + data.url;
|
|
updatePreview();
|
|
Dashboard.hideLoadingMsg();
|
|
})
|
|
.catch(error => {
|
|
console.error('Upload error:', error);
|
|
Dashboard.alert('Image upload failed. Please verify API controller is active.');
|
|
Dashboard.hideLoadingMsg();
|
|
});
|
|
}
|
|
|
|
|
|
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',
|
|
'EnableCustomOverlay', 'CustomOverlayText', 'CustomOverlayImageUrl',
|
|
'CustomOverlayStyle', 'CustomOverlayImageStyle', 'CustomOverlayPriority',
|
|
'CustomOverlayPositionX', 'CustomOverlayPositionY', 'CustomOverlayScale'
|
|
];
|
|
|
|
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: 31, EndMonth: 1,
|
|
MediaIds: '',
|
|
OverlayText: '',
|
|
OverlayImageUrl: ''
|
|
}, 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>' +
|
|
'<h3 class="inputLabel" style="margin-top: 1.5em; margin-bottom: 0.5em;">Custom Overlay Overrides</h3>' +
|
|
'<div style="display: flex; flex-wrap: wrap; gap: 1em; align-items: flex-start;">' +
|
|
' <div style="flex: 1; min-width: 250px; display: flex; flex-direction: column; gap: 0.5em;">' +
|
|
' <div class="inputContainer" style="margin: 0;">' +
|
|
' <input is="emby-input" type="text" class="emby-input section-overlay-text" style="width: 100%;" value="' + (data.OverlayText ? data.OverlayText.replace(/"/g, '"') : '') + '" placeholder="Seasonal Custom Overlay Text (e.g. Oscars Time!)" />' +
|
|
' <div class="fieldDescription">Override the global text.</div>' +
|
|
' </div>' +
|
|
' <div class="inputContainer" style="margin: 0;">' +
|
|
' <input is="emby-input" type="text" class="emby-input section-overlay-image" style="width: 100%;" value="' + (data.OverlayImageUrl ? data.OverlayImageUrl.replace(/"/g, '"') : '') + '" placeholder="Seasonal Custom Overlay Image URL" />' +
|
|
' <div class="fieldDescription">Override the global image URL.</div>' +
|
|
' </div>' +
|
|
' </div>' +
|
|
' <div class="inputContainer" style="flex: 1; min-width: 250px; margin: 0; padding-bottom: 5px;">' +
|
|
' <div class="seasonal-dropzone" style="border: 2px dashed rgba(255,255,255,0.2); border-radius: 8px; padding: 1em; text-align: center; cursor: pointer; background: rgba(0,0,0,0.2); transition: all 0.2s ease; position: relative; min-height: 98px; display: flex; flex-direction: column; align-items: center; justify-content: center;">' +
|
|
' <i class="material-icons" style="font-size: 24px; color: rgba(255,255,255,0.4); margin-bottom: 4px;">cloud_upload</i>' +
|
|
' <span style="font-size: 0.85em; color: rgba(255,255,255,0.7);">Upload seasonal image</span>' +
|
|
' <input type="file" class="seasonal-file-input" accept="image/png, image/jpeg, image/gif, image/webp" style="display: none;">' +
|
|
' <img class="seasonal-preview-img" style="display: none; max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 4px; z-index: 2; object-fit: contain;" />' +
|
|
' <button type="button" is="paper-icon-button-light" class="seasonal-clear-btn" title="Clear Image" style="display: none; position: absolute; top: 0px; right: 0px; z-index: 3; color: #a94442;"><i class="material-icons">delete</i></button>' +
|
|
' </div>' +
|
|
' </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);
|
|
}
|
|
});
|
|
|
|
// --- Seasonal Drag and Drop Logic ---
|
|
var sectionNameInput = div.querySelector('.section-name');
|
|
var urlInput = div.querySelector('.section-overlay-image');
|
|
var dropzone = div.querySelector('.seasonal-dropzone');
|
|
var fileInput = div.querySelector('.seasonal-file-input');
|
|
var previewImg = div.querySelector('.seasonal-preview-img');
|
|
var clearBtn = div.querySelector('.seasonal-clear-btn');
|
|
var currentSectionName = sectionNameInput.value.trim();
|
|
|
|
// Track Name Changes to rename server file
|
|
sectionNameInput.addEventListener('focus', function() {
|
|
currentSectionName = this.value.trim();
|
|
});
|
|
|
|
sectionNameInput.addEventListener('blur', function() {
|
|
var newName = this.value.trim();
|
|
if (newName && currentSectionName && newName !== currentSectionName) {
|
|
// If they have an image attached, rename it
|
|
if (urlInput.value && urlInput.value.indexOf('OverlayImage') !== -1) {
|
|
fetch(ApiClient.serverAddress() + '/MediaBarEnhanced/OverlayImage/Rename?oldName=' + encodeURIComponent(currentSectionName) + '&newName=' + encodeURIComponent(newName), {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Authorization': 'MediaBrowser Client="' + ApiClient.appName() + '", Device="' + ApiClient.deviceName() + '", DeviceId="' + ApiClient.deviceId() + '", Version="' + ApiClient.appVersion() + '", Token="' + ApiClient.accessToken() + '"'
|
|
}
|
|
})
|
|
.then(response => {
|
|
if(response.ok) return response.json();
|
|
throw new Error('Rename failed');
|
|
})
|
|
.then(data => {
|
|
urlInput.value = ApiClient.serverAddress() + data.url;
|
|
currentSectionName = newName;
|
|
}).catch(console.error);
|
|
} else {
|
|
currentSectionName = newName;
|
|
}
|
|
} else {
|
|
currentSectionName = newName;
|
|
}
|
|
});
|
|
|
|
function updatePreview() {
|
|
var icon = dropzone.querySelector('i');
|
|
var text = dropzone.querySelector('span');
|
|
var val = urlInput.value.trim();
|
|
if (val) {
|
|
previewImg.src = val;
|
|
previewImg.style.display = 'block';
|
|
clearBtn.style.display = 'block';
|
|
if(icon) icon.style.display = 'none';
|
|
if(text) {
|
|
text.textContent = 'Drag and drop a new image here, or click to select';
|
|
text.style.display = 'block';
|
|
text.style.position = 'absolute';
|
|
text.style.bottom = '5px';
|
|
text.style.zIndex = '3';
|
|
text.style.backgroundColor = 'rgba(0,0,0,0.6)';
|
|
text.style.padding = '2px 6px';
|
|
text.style.borderRadius = '4px';
|
|
text.style.fontSize = '0.7em';
|
|
}
|
|
} else {
|
|
previewImg.src = '';
|
|
previewImg.style.display = 'none';
|
|
clearBtn.style.display = 'none';
|
|
if(icon) icon.style.display = 'block';
|
|
if(text) {
|
|
text.textContent = 'Upload seasonal overlay image';
|
|
text.style.display = 'block';
|
|
text.style.position = 'static';
|
|
text.style.backgroundColor = 'transparent';
|
|
text.style.fontSize = '0.85em';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initial state
|
|
updatePreview();
|
|
urlInput.addEventListener('input', updatePreview);
|
|
|
|
clearBtn.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
var name = sectionNameInput.value.trim();
|
|
if (name) {
|
|
fetch(ApiClient.serverAddress() + '/MediaBarEnhanced/OverlayImage?filename=' + encodeURIComponent(name), {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Authorization': 'MediaBrowser Client="' + ApiClient.appName() + '", Device="' + ApiClient.deviceName() + '", DeviceId="' + ApiClient.deviceId() + '", Version="' + ApiClient.appVersion() + '", Token="' + ApiClient.accessToken() + '"'
|
|
}
|
|
}).catch(console.error);
|
|
}
|
|
urlInput.value = '';
|
|
fileInput.value = '';
|
|
updatePreview();
|
|
});
|
|
|
|
div.querySelector('.btn-remove').addEventListener('click', function () {
|
|
// Cleanup image if deleted
|
|
var name = sectionNameInput.value.trim();
|
|
if (name) {
|
|
fetch(ApiClient.serverAddress() + '/MediaBarEnhanced/OverlayImage?filename=' + encodeURIComponent(name), {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Authorization': 'MediaBrowser Client="' + ApiClient.appName() + '", Device="' + ApiClient.deviceName() + '", DeviceId="' + ApiClient.deviceId() + '", Version="' + ApiClient.appVersion() + '", Token="' + ApiClient.accessToken() + '"'
|
|
}
|
|
}).catch(console.error);
|
|
}
|
|
div.remove();
|
|
MediaBarEnhancedConfigurationPage.updateSectionTitles(container);
|
|
});
|
|
|
|
dropzone.addEventListener('click', function() { fileInput.click(); });
|
|
|
|
dropzone.addEventListener('dragover', function(e) {
|
|
e.preventDefault();
|
|
dropzone.style.borderColor = '#00a4dc';
|
|
dropzone.style.background = 'rgba(0, 164, 220, 0.2)';
|
|
});
|
|
|
|
dropzone.addEventListener('dragleave', function(e) {
|
|
e.preventDefault();
|
|
dropzone.style.borderColor = 'rgba(255,255,255,0.2)';
|
|
dropzone.style.background = 'rgba(0,0,0,0.2)';
|
|
});
|
|
|
|
dropzone.addEventListener('drop', function(e) {
|
|
e.preventDefault();
|
|
dropzone.style.borderColor = 'rgba(255,255,255,0.2)';
|
|
dropzone.style.background = 'rgba(0,0,0,0.2)';
|
|
if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
|
fileInput.files = e.dataTransfer.files;
|
|
uploadSeasonalImage(e.dataTransfer.files[0]);
|
|
}
|
|
});
|
|
|
|
fileInput.addEventListener('change', function() {
|
|
if (this.files && this.files.length > 0) uploadSeasonalImage(this.files[0]);
|
|
});
|
|
|
|
function uploadSeasonalImage(file) {
|
|
if (!file.type.match('image.*')) {
|
|
Dashboard.alert('Please select a valid image file.');
|
|
return;
|
|
}
|
|
|
|
var name = sectionNameInput.value.trim();
|
|
if (!name) {
|
|
Dashboard.alert('Please enter a Name for this season before uploading an image (used for file saving).');
|
|
return;
|
|
}
|
|
|
|
Dashboard.showLoadingMsg();
|
|
var formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
var qs = '?filename=' + encodeURIComponent(name);
|
|
fetch(ApiClient.serverAddress() + '/MediaBarEnhanced/OverlayImage' + qs, {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'Authorization': 'MediaBrowser Client="' + ApiClient.appName() + '", Device="' + ApiClient.deviceName() + '", DeviceId="' + ApiClient.deviceId() + '", Version="' + ApiClient.appVersion() + '", Token="' + ApiClient.accessToken() + '"'
|
|
}
|
|
})
|
|
.then(response => {
|
|
if (response.ok) return response.json();
|
|
throw new Error('Upload failed');
|
|
})
|
|
.then(data => {
|
|
urlInput.value = ApiClient.serverAddress() + data.url;
|
|
updatePreview();
|
|
Dashboard.hideLoadingMsg();
|
|
})
|
|
.catch(error => {
|
|
console.error('Upload error:', error);
|
|
Dashboard.alert('Image upload failed.');
|
|
Dashboard.hideLoadingMsg();
|
|
});
|
|
}
|
|
|
|
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,
|
|
OverlayText: el.querySelector('.section-overlay-text').value,
|
|
OverlayImageUrl: el.querySelector('.section-overlay-image').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> |