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 + ? '' + : ''; html += '' + - '' + - 'Play on ' + sv + ''; + sicon + 'Play on ' + sv + ''; } // 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; }