From df889c0c6e80b9e3312f5f232cae973c4527bd0a Mon Sep 17 00:00:00 2001
From: BoulderBadgeDad <batmanesignal@gmail.com>
Date: Mon, 15 Jun 2026 09:11:19 -0700
Subject: [PATCH] video: Where-to-Watch server tile uses the real Plex/Jellyfin
 logo

The 'Play on your server' tile now shows the actual server logo (same Plex/
Jellyfin art as the header server toggle) on a dark tile with the green owned
glow, instead of a generic play glyph. Falls back to the play glyph if the logo
fails to load.
---
 webui/static/video/video-detail.js | 14 ++++++++++++--
 webui/static/video/video-side.css  |  9 +++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/webui/static/video/video-detail.js b/webui/static/video/video-detail.js
index fa9f1c00..f3f64055 100644
--- a/webui/static/video/video-detail.js
+++ b/webui/static/video/video-detail.js
@@ -17,6 +17,12 @@
     var DETAIL_URL = '/api/video/detail/';
     var TMDB_LOGO = 'https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg';
     var TVDB_LOGO = 'https://www.svgrepo.com/show/443500/brand-tvdb.svg';
+    // Real media-server logos for the "Play on your server" watch tile (same
+    // sources as the header server toggle).
+    var SERVER_LOGOS = {
+        Plex: 'https://www.plex.tv/wp-content/themes/plex/assets/img/plex-logo.svg',
+        Jellyfin: 'https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/jellyfin.png',
+    };
     var VIEW_KEY = 'soulsync_vd_season_view';
     var VIEWS = [
         { id: 'rail', label: 'Rail', ic: '▦' },
@@ -319,10 +325,14 @@
             // with a "Play on Plex/Jellyfin" tile that deep-links to the item.
             if (ex.server && ex.server.url) {
                 var sv = esc(ex.server.server || 'Server');
+                var slogo = SERVER_LOGOS[ex.server.server];
+                var sicon = slogo
+                    ? '<span class="vd-prov-ph vd-prov-server-logo"><img src="' + esc(slogo) + '" alt="' + sv +
+                      '" onerror="this.parentNode.textContent=\'▶\'"></span>'
+                    : '<span class="vd-prov-ph vd-prov-play">▶</span>';
                 html += '<a class="vd-prov vd-prov--server" href="' + esc(ex.server.url) +
                     '" target="_blank" rel="noopener" title="Play on ' + sv + '">' +
-                    '<span class="vd-prov-ph vd-prov-play">▶</span>' +
-                    '<span class="vd-prov-name">Play on ' + sv + '</span></a>';
+                    sicon + '<span class="vd-prov-name">Play on ' + sv + '</span></a>';
             }
             // Streaming providers (JustWatch via TMDB) link to the where-to-watch page.
             var link = ex.providers_link || '';
diff --git a/webui/static/video/video-side.css b/webui/static/video/video-side.css
index 25dfd627..222ff3d1 100644
--- a/webui/static/video/video-side.css
+++ b/webui/static/video/video-side.css
@@ -764,6 +764,15 @@ a.vd-prov:hover img, a.vd-prov:hover .vd-prov-ph { border-color: rgba(var(--vd-a
     background: linear-gradient(135deg, #22c55e, #15803d); color: #fff; font-size: 22px;
     box-shadow: 0 6px 18px rgba(34, 197, 94, 0.45); border-color: rgba(255, 255, 255, 0.2);
 }
+/* The actual Plex/Jellyfin logo on a dark tile with a green "you own it" glow. */
+.vd-prov--server .vd-prov-server-logo {
+    background: rgba(10, 12, 16, 0.9); padding: 11px;
+    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.42); border-color: rgba(34, 197, 94, 0.55);
+}
+.vd-prov-server-logo img {
+    width: 100%; height: 100%; object-fit: contain;
+    border: 0; border-radius: 0; box-shadow: none;
+}
 .vd-prov--server .vd-prov-name { color: #6ee7a0; font-weight: 700; }
 
 .vd-similar { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; }