From 138e50ff1510939d8e3b1c2cb886c9f3af251124 Mon Sep 17 00:00:00 2001
From: CodeDevMLH <145071728+CodeDevMLH@users.noreply.github.com>
Date: Fri, 13 Feb 2026 02:11:20 +0100
Subject: [PATCH] Enhance configuration layout and add disablePictureInPicture
 option for video playback

---
 .../Configuration/configPage.html                         | 8 ++++----
 Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js  | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html b/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html
index 853ee0d..76a9526 100644
--- a/Jellyfin.Plugin.MediaBarEnhanced/Configuration/configPage.html
+++ b/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.
@@ -564,7 +564,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;">';
                         opts.forEach(function(o) {
                             var v = o.v || o;
                             var n = o.n || o;
@@ -574,12 +574,12 @@
                         return h;
                     }
 
-                    div.innerHTML = '<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5em;">' +
+                    div.innerHTML = '<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5em;">' +
                         '    <div style="flex-grow:1; margin-right:1em;">' +
                         '        <input is="emby-input" type="text" class="emby-input section-name" value="' + (data.Name || '') + '" label="Season Name" />' +
                         '        <div class="fieldDescription">Name of the season (e.g. Christmas).</div>' +
                         '    </div>' +
-                        '    <button type="button" class="raised emby-button remove-section" style="background: #a94442; min-width: unset;">Remove</button>' +
+                        '    <button type="button" class="raised emby-button remove-section" style="background: #a94442; min-width: unset; margin-top: 0.5em;">Remove</button>' +
                         '</div>' +
                         '<div style="margin-bottom: 1em;">' +
                         '    <label class="inputLabel" style="margin-bottom:0.5em; display:block;">Active Period</label>' +
diff --git a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
index c2f6f10..7cd6ac7 100644
--- a/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
+++ b/Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js
@@ -1808,6 +1808,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;"
         };