danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

video: Where-to-Watch server tile uses the real Plex/Jellyfin logo

Browse source 
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.
This commit is contained in:
BoulderBadgeDad 2026-06-15 09:11:19 -07:00
parent 0246842000
commit df889c0c6e
2 changed files with 21 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
webui/static/video/video-detail.js
View file

@ -17,6 +17,12 @@
var DETAIL_URL = '/api/video/detail/'; var DETAIL_URL = '/api/video/detail/';
var TMDB_LOGO = 'https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_2-d537fb228cf3ded904ef09b136fe3fec72548ebc1fea3fbbd1ad9e36364db38b.svg'; 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'; 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 VIEW_KEY = 'soulsync_vd_season_view';
var VIEWS = [ var VIEWS = [
{ id: 'rail', label: 'Rail', ic: '▦' }, { id: 'rail', label: 'Rail', ic: '▦' },
@ -319,10 +325,14 @@
// with a "Play on Plex/Jellyfin" tile that deep-links to the item. // with a "Play on Plex/Jellyfin" tile that deep-links to the item.
if (ex.server && ex.server.url) { if (ex.server && ex.server.url) {
var sv = esc(ex.server.server || 'Server'); 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) + html += '<a class="vd-prov vd-prov--server" href="' + esc(ex.server.url) +
'" target="_blank" rel="noopener" title="Play on ' + sv + '">' + '" target="_blank" rel="noopener" title="Play on ' + sv + '">' +
'<span class="vd-prov-ph vd-prov-play">▶</span>' + sicon + '<span class="vd-prov-name">Play on ' + sv + '</span></a>';
'<span class="vd-prov-name">Play on ' + sv + '</span></a>';
} }
// Streaming providers (JustWatch via TMDB) link to the where-to-watch page. // Streaming providers (JustWatch via TMDB) link to the where-to-watch page.
var link = ex.providers_link || ''; var link = ex.providers_link || '';

9
webui/static/video/video-side.css
View file

@ -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; 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); 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-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; } .vd-similar { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; }