Bump version to 1.4.0.2 and enhance client-side settings with descriptions for media bar options

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.4.0.1</Version>
+    <Version>1.4.0.2</Version>
     <RepositoryUrl>https://github.com/CodeDevMLH/jellyfin-plugin-media-bar-enhanced</RepositoryUrl>
   </PropertyGroup>
 

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js

@@ -2142,7 +2142,9 @@ const SlideshowManager = {
         }
       }
 
-      if (CONFIG.slideAnimationEnabled) {
+      const enableAnimations = SettingsManager.getSetting('slideAnimations', CONFIG.slideAnimationEnabled);
+
+      if (enableAnimations) {
         const backdrop = currentSlide.querySelector(".backdrop");
         if (backdrop && !backdrop.classList.contains("video-backdrop")) {
           backdrop.classList.add("animate");
@@ -2188,11 +2190,14 @@ const SlideshowManager = {
       setTimeout(() => {
         STATE.slideshow.isTransitioning = false;
 
-        if (previousVisibleSlide && CONFIG.slideAnimationEnabled) {
-          const prevBackdrop = previousVisibleSlide.querySelector(".backdrop");
-          const prevLogo = previousVisibleSlide.querySelector(".logo");
-          if (prevBackdrop) prevBackdrop.classList.remove("animate");
-          if (prevLogo) prevLogo.classList.remove("animate");
+        if (previousVisibleSlide) {
+          const enableAnimations = SettingsManager.getSetting('slideAnimations', CONFIG.slideAnimationEnabled);
+          if (enableAnimations) {
+            const prevBackdrop = previousVisibleSlide.querySelector(".backdrop");
+            const prevLogo = previousVisibleSlide.querySelector(".logo");
+            if (prevBackdrop) prevBackdrop.classList.remove("animate");
+            if (prevLogo) prevLogo.classList.remove("animate");
+          }
         }
       }, CONFIG.fadeTransitionDuration);
     }
@@ -3015,12 +3020,12 @@ const SettingsManager = {
     popup.style.top = `${rect.bottom + 10}px`;
 
     const settings = [
-        { key: 'enabled', label: 'Enable Media Bar', default: true },
-        { key: 'videoBackdrops', label: 'Enable Video Backdrops', default: CONFIG.enableVideoBackdrop },
-        { key: 'trailerButton', label: 'Show Trailer Button', default: CONFIG.showTrailerButton },
-        { key: 'mobileVideo', label: 'Enable Mobile Video', default: CONFIG.enableMobileVideo },
-        { key: 'waitForTrailer', label: 'Wait For Trailer To End', default: CONFIG.waitForTrailerToEnd },
-        { key: 'slideAnimations', label: 'Enable Slide Animations', default: CONFIG.slideAnimationEnabled },
+        { key: 'enabled', label: 'Enable Media Bar', description: 'Toggle the entire media bar visibility.', default: true },
+        { key: 'videoBackdrops', label: 'Enable Video Backdrops', description: 'Play trailers as background videos.', default: CONFIG.enableVideoBackdrop },
+        { key: 'trailerButton', label: 'Show Trailer Button', description: 'Show button to play trailers in popup on non Video backdrops.', default: CONFIG.showTrailerButton },
+        { key: 'mobileVideo', label: 'Enable Mobile Video', description: 'Allow video backdrops on mobile devices.', default: CONFIG.enableMobileVideo },
+        { key: 'waitForTrailer', label: 'Wait For Trailer To End', description: 'Wait for the trailer to finish before changing slides.', default: CONFIG.waitForTrailerToEnd },
+        { key: 'slideAnimations', label: 'Enable Animations', description: 'Enable transition animations between slides.', default: CONFIG.slideAnimationEnabled },
     ];
 
     let html = '<h3 style="margin-top:0; margin-bottom:1em; border-bottom:1px solid #444; padding-bottom:0.5em;">Media Bar Settings</h3>';
@@ -3033,6 +3038,7 @@ const SettingsManager = {
                 <input id="mb-setting-${setting.key}" type="checkbox" is="emby-checkbox" class="emby-checkbox" ${isChecked ? 'checked' : ''} />
                 <span class="checkboxLabel">${setting.label}</span>
             </label>
+            <div class="fieldDescription">${setting.description}</div>
         </div>
         `;
     });
@@ -3095,6 +3101,14 @@ const slidesInit = async () => {
       const isEnabled = SettingsManager.getSetting('enabled', true);
       if (!isEnabled) {
           console.log("MediaBarEnhanced: Disabled by client-side setting.");
+          const homeSections = document.querySelector('.homeSectionsContainer');
+          if (homeSections) {
+            homeSections.style.top = '0';
+            homeSections.style.marginTop = '0';
+          }
+          const container = document.getElementById('slides-container');
+          if (container) container.style.display = 'none';
+          
           return;
       }
   }

manifest.json

@@ -9,7 +9,7 @@
     "imageUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/raw/branch/main/logo.png",
     "versions": [
       {
-        "version": "1.4.0.1",
+        "version": "1.4.0.2",
         "changelog": "- feat: Add client-side settings feature for selected media bar settings",
         "targetAbi": "10.11.0.0",
         "sourceUrl": "https://git.mahom03-spacecloud.de/CodeDevMLH/jellyfin-plugin-media-bar-enhanced/releases/download/v1.4.0.1/Jellyfin.Plugin.MediaBarEnhanced.zip",