Update manifest.json for release v1.6.1.19 [skip ci]

Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html

@@ -118,7 +118,7 @@
                                 <label class="inputLabel inputLabelUnfocused" for="CustomMediaIds">Default Media/Collection/Playlist
                                     IDs
                                     (Newline or Comma separated)</label>
-                                <textarea is="emby-textarea" id="CustomMediaIds" name="CustomMediaIds"
+                                <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.
@@ -165,7 +165,7 @@
                             <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="md-icon">add</i>
+                                <i class="material-icons" style="font-size: 24px;">add</i>
                                 <span>Add Season</span>
                             </button>
                         </div>
@@ -202,7 +202,7 @@
                         </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">
+                            <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>
@@ -304,7 +304,7 @@
                         <h2 class="sectionTitle">Content Sorting</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">
+                            <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>
@@ -318,7 +318,7 @@
                         </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">
+                            <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>
@@ -534,23 +534,24 @@
                     var container = page.querySelector('#seasonalSectionsList');
                     if (!container) return;
                     container.innerHTML = '';
-                    sections.forEach(function(section) {
-                        MediaBarEnhancedConfigurationPage.createSectionElement(container, section);
+                    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) {
+                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);';
@@ -564,7 +565,7 @@
                     ];
 
                     function mkSelect(val, opts, cls) {
-                        var h = '<select class="emby-select ' + cls + '" style="width: auto; display: inline-block; margin-right: 5px;">';
+                        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;
@@ -574,21 +575,36 @@
                         return h;
                     }
 
-                    div.innerHTML = `
-                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5em;">
-                            <input is="emby-input" type="text" class="emby-input section-name" value="${data.Name}" placeholder="Season Name" style="flex: 1; margin-right: 1em; font-weight: bold;">
-                            <button type="button" class="raised emby-button remove-section" style="background: #a94442;">Remove</button>
-                        </div>
-                        <div style="margin-bottom: 0.5em; 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>
-                        <textarea is="emby-textarea" class="emby-textarea section-ids" style="width: 100%; height: 80px; font-family: monospace;" placeholder="Media IDs...">${data.MediaIds || ''}</textarea>
-                    `;
+                    var labelText = 'Season list #' + (index || 1);
+
+                    div.innerHTML =
+                        '<div class="inputContainer" style="margin-bottom: 0.5em;">' +
+                        '    <label class="inputLabel" style="font-size: 1.2em; font-weight: bold; margin-bottom:0.5em; display:block;">' + labelText + '</label>' +
+                        '    <div style="display: flex; align-items: center;">' +
+                        '        <div style="flex-grow:1;">' +
+                        '            <input is="emby-input" type="text" class="emby-input section-name" value="' + (data.Name || '') + '" />' +
+                        '        </div>' +
+                        '        <button type="button" class="raised emby-button remove-section" style="background: #a94442; min-width: unset; margin-left: 1em;">Remove</button>' +
+                        '    </div>' +
+                        '    <div class="fieldDescription">Name of the season</div>' +
+                        '</div>' +
+                        '<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 list of Movie/Series/Collection IDs to show during this season.</div>' +
+                        '</div>';
 
                     div.querySelector('.remove-section').addEventListener('click', function() {
                         div.remove();

Jellyfin.Plugin.MediaBarEnhanced/Jellyfin.Plugin.MediaBarEnhanced.csproj

@@ -12,7 +12,7 @@
     <!-- <TreatWarningsAsErrors>false</TreatWarningsAsErrors> -->
     <Title>Jellyfin Media Bar Enhanced Plugin</Title>
     <Authors>CodeDevMLH</Authors>
-    <Version>1.6.1.9</Version>
+    <Version>1.6.1.19</Version>
     <RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl>
   </PropertyGroup>
 

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js

@@ -1490,7 +1490,6 @@ const VisibilityObserver = {
    * Initializes visibility observer
    */
   init() {
-    // MARK: Mark
     const observer = new MutationObserver(() => this.updateVisibility());
     // let debounceTimer = null;
     // const observer = new MutationObserver(() => {
@@ -1742,14 +1741,7 @@ const SlideCreator = {
                   const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
                   const isVideoPlayerOpen = document.querySelector('.videoPlayerContainer') || document.querySelector('.youtubePlayerContainer');
 
-                  if (slide && slide.classList.contains('active') && !document.hidden && (!isVideoPlayerOpen || isVideoPlayerOpen.classList.contains('hide'))) {
-                      const currentIndex = STATE.slideshow.currentSlideIndex;
-                      const currentItemId = STATE.slideshow.itemIds[currentIndex];
-                      if (currentItemId !== itemId) {
-                          console.log(`Slide ${itemId} is no longer active (current: ${currentItemId}), aborting playback.`);
-                          event.target.mute(); // Mute just in case
-                          return;
-                      }
+                  if (slide && slide.classList.contains('active') && !document.hidden && (!isVideoPlayerOpen || isVideoPlayerOpen.classList.contains('hide'))) {                
                     event.target.playVideo();
                     
                     // Check if it actually started playing after a short delay (handling autoplay blocks)
@@ -1808,6 +1800,7 @@ const SlideCreator = {
           autoplay: false,
           preload: "auto",
           loop: false,
+          disablePictureInPicture: true,
           style: "object-fit: cover; object-position: center center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none;"
         };
 
@@ -1825,10 +1818,8 @@ const SlideCreator = {
 
         backdrop.addEventListener('play', (event) => {
           const slide = document.querySelector(`.slide[data-item-id="${itemId}"]`);
-          const currentIndex = STATE.slideshow.currentSlideIndex;
-          const currentItemId = STATE.slideshow.itemIds[currentIndex];
-          
-          if (!slide || !slide.classList.contains('active') || currentItemId !== itemId) {
+
+          if (!slide || !slide.classList.contains('active')) {
               console.log(`Local video ${itemId} started playing but is not active, pausing.`);
               event.target.pause();
               event.target.currentTime = 0;
@@ -2313,7 +2304,7 @@ const SlideshowManager = {
       }
 
       currentSlide.classList.add("active");
-      
+
       // Restore focus for TV mode navigation continuity
       requestAnimationFrame(() => {
         if (focusSelector) {
@@ -2432,6 +2423,8 @@ const SlideshowManager = {
     // Preload next slides
     for (let i = 1; i <= preloadCount; i++) {
         const nextIndex = (currentIndex + i) % totalItems;
+        if (nextIndex === currentIndex) break;
+        
         const itemId = STATE.slideshow.itemIds[nextIndex];
         SlideCreator.createSlideForItemId(itemId);
     }
@@ -2439,6 +2432,8 @@ const SlideshowManager = {
     // Preload previous slides
     for (let i = 1; i <= preloadCount; i++) {
         const prevIndex = (currentIndex - i + totalItems) % totalItems;
+        if (prevIndex === currentIndex) break;
+
         const prevItemId = STATE.slideshow.itemIds[prevIndex];
         SlideCreator.createSlideForItemId(prevItemId);
     }
@@ -2714,7 +2709,7 @@ const SlideshowManager = {
     }
 
     // YouTube player
-    const player = STATE.slideshow.videoPlayers?.[itemId];
+    const player = STATE.slideshow.videoPlayers && STATE.slideshow.videoPlayers[itemId];
     if (player && typeof player.loadVideoById === 'function' && player._videoId) {
       player.loadVideoById({
         videoId: player._videoId,
@@ -2722,9 +2717,6 @@ const SlideshowManager = {
         endSeconds: player._endTime
       });
       
-      // Explicitly call playVideo to ensure it starts
-      player.playVideo();
-
       if (STATE.slideshow.isMuted) {
         player.mute();
       } else {
@@ -2744,6 +2736,12 @@ const SlideshowManager = {
         }
       }, 1000);
       return true;
+    } else if (player && typeof player.seekTo === 'function') {
+      // Fallback if loadVideoById is not available or videoId missing but player object exists
+      const startTime = player._startTime || 0;
+      player.seekTo(startTime);
+      player.playVideo();
+      return true;
     }
 
     return false;

manifest.json

@@ -9,12 +9,12 @@
     "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
     "versions": [
       {
-        "version": "1.6.1.9",
+        "version": "1.6.1.19",
         "changelog": "- fix tv mode issue\n- refactor video playback management",
         "targetAbi": "10.11.0.0",
-        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.1.9/Jellyfin.Plugin.MediaBarEnhanced.zip",
-        "checksum": "e6e3b72fe679d90137617d8a717592b8",
-        "timestamp": "2026-02-13T00:16:39Z"
+        "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.6.1.19/Jellyfin.Plugin.MediaBarEnhanced.zip",
+        "checksum": "5eb7e552e1a1c250560f66ce71bab4cf",
+        "timestamp": "2026-02-13T18:43:59Z"
       },
       {
         "version": "1.6.0.2",