Add custom overlay image upload feature with style options

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.css

@@ -1103,3 +1103,53 @@
     }
   }
 }
+
+/* Custom Overlay Styles */
+.custom-overlay-style-Shadowed {
+  color: #fff;
+  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), -1px -1px 4px rgba(0, 0, 0, 0.8);
+}
+
+.custom-overlay-style-Frosted {
+  color: #fff;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  padding: 8px 24px;
+  border-radius: 50px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+  text-shadow: none; /* override default */
+}
+
+.custom-overlay-style-Cinematic {
+  background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  text-shadow: none; /* override default */
+  filter: drop-shadow(0px 2px 8px rgba(255, 215, 0, 0.4)) drop-shadow(2px 2px 4px rgba(0,0,0,0.8));
+  animation: shineCinematic 4s linear infinite;
+  background-size: 200% auto;
+}
+
+@keyframes shineCinematic {
+  to {
+    background-position: 200% center;
+  }
+}
+
+.custom-overlay-style-Pulse {
+  color: #fff;
+  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9), -1px -1px 4px rgba(0, 0, 0, 0.8);
+  animation: pulseOverlayText 3s ease-in-out infinite alternate;
+}
+
+@keyframes pulseOverlayText {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(1.05);
+  }
+}

Jellyfin.Plugin.MediaBarEnhanced/Web/mediaBarEnhanced.js

@@ -61,6 +61,7 @@ const CONFIG = {
   enableCustomOverlay: false,
   customOverlayText: "",
   customOverlayImageUrl: "",
+  customOverlayStyle: "Shadowed",
   enableCustomMediaIds: true,
   enableSeasonalContent: false,
   customMediaIds: "",
@@ -3851,7 +3852,7 @@ const slidesInit = async () => {
       overlayContainer.appendChild(img);
     } else if (activeOverlayText) {
       const p = document.createElement("p");
-      p.className = "custom-overlay-text";
+      p.className = `custom-overlay-text custom-overlay-style-${CONFIG.customOverlayStyle || 'Shadowed'}`;
       p.textContent = activeOverlayText;
       overlayContainer.appendChild(p);
     }