From e5080354740411ce45a07c32cd426e1aeb00a045 Mon Sep 17 00:00:00 2001 From: nessi Date: Sat, 15 Aug 2026 12:34:01 +0200 Subject: [PATCH] feat: replace custom SVG service icons with official brand icons from Simple Icons CDN Add officialServiceIcons dictionary mapping service keys to Simple Icons CDN URLs for Radarr, Sonarr, SABnzbd, Jellyfin, Seerr, Prowlarr, Easynews, qBittorrent, Bazarr, Lingarr, and LibreTranslate. Override serviceIconSvg entries with img tags loading brand icons. Add inline styles to SVG fallback icons (19px, stroke styling) and img elements (20px, object-fit contain). Add 500ms interval to reapply icon styles after DOM --- templates/index.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/templates/index.html b/templates/index.html index a2a8fbf..9d5543a 100644 --- a/templates/index.html +++ b/templates/index.html @@ -160,6 +160,11 @@ function translateLayout(language){ function highlightPreferences(){const audioPreference=localStorage.getItem('preferred-audio')||'';document.querySelectorAll('#movies tbody tr td:nth-child(4) .badge,#sonarr tbody tr td:nth-child(4) .badge').forEach(badge=>badge.classList.toggle('audio-preferred',!!audioPreference&&badge.textContent.includes(audioPreference)))} function loadPreferences(){const audioPreference=localStorage.getItem('preferred-audio')||'';const subsPreference=localStorage.getItem('preferred-subs')||'';const audioSelect=document.querySelector('#preferredAudio'),subsSelect=document.querySelector('#preferredSubs');if(audioSelect)audioSelect.value=audioPreference;if(subsSelect)subsSelect.value=subsPreference;const audioFilter=document.querySelector('#audioFilter'),subFilter=document.querySelector('#subFilter');if(audioFilter)audioFilter.value=audioPreference;if(subFilter)subFilter.value=subsPreference;if(typeof apply==='function')apply();highlightPreferences()} translateLayout(currentUiLanguage);loadPreferences(); +const serviceIconSvg={radarr:'',sonarr:'',sabnzbd:'',jellyfin:'',seerr:'',prowlarr:'',easynews:'',qbittorrent:'',bazarr:'',lingarr:'',libretranslate:'',sonarr_prowlarr_proxy:'',radarr_prowlarr_proxy:'',dashboard:''};function upgradeServiceIcons(){document.querySelectorAll('.service-logo[class*="service-icon-"]').forEach(icon=>{const key=[...icon.classList].find(name=>name.startsWith('service-icon-'))?.slice(13);if(serviceIconSvg[key]&&icon.dataset.iconKey!==key){icon.innerHTML=serviceIconSvg[key];icon.dataset.iconKey=key}})}const serviceIconObserver=new MutationObserver(upgradeServiceIcons);const serviceIconList=document.querySelector('.service-list');if(serviceIconList)serviceIconObserver.observe(serviceIconList,{childList:true,subtree:true});upgradeServiceIcons(); document.querySelector('#languageToggle').addEventListener('click',()=>translateLayout(currentUiLanguage==='de'?'en':'de')); +const officialServiceIcons={radarr:'https://cdn.simpleicons.org/radarr/CC7B19',sonarr:'https://cdn.simpleicons.org/sonarr/35C5F4',sabnzbd:'https://cdn.simpleicons.org/sabnzbd/F5A623',jellyfin:'https://cdn.simpleicons.org/jellyfin/AA5CC3',seerr:'https://cdn.simpleicons.org/seerr/73CFF8',prowlarr:'https://cdn.simpleicons.org/prowlarr/5B6BBF',easynews:'https://cdn.simpleicons.org/easynews/F28C28',qbittorrent:'https://cdn.simpleicons.org/qbittorrent/2F81C7',bazarr:'https://cdn.simpleicons.org/bazarr/44A5B5',lingarr:'https://cdn.simpleicons.org/lingarr/8B5CF6',libretranslate:'https://cdn.simpleicons.org/libretranslate/22C55E'};Object.entries(officialServiceIcons).forEach(([key,url])=>{serviceIconSvg[key]=``});upgradeServiceIcons(); +document.querySelectorAll('.service-logo svg').forEach(svg=>{svg.style.width='19px';svg.style.height='19px';svg.style.fill='none';svg.style.stroke='currentColor';svg.style.strokeWidth='1.8';svg.style.strokeLinecap='round';svg.style.strokeLinejoin='round'}); +document.querySelectorAll('.service-logo img').forEach(img=>{img.style.width='20px';img.style.height='20px';img.style.objectFit='contain'}); +setInterval(()=>{document.querySelectorAll('.service-logo svg').forEach(svg=>{svg.style.width='19px';svg.style.height='19px';svg.style.fill='none';svg.style.stroke='currentColor';svg.style.strokeWidth='1.8';svg.style.strokeLinecap='round';svg.style.strokeLinejoin='round'});document.querySelectorAll('.service-logo img').forEach(img=>{img.style.width='20px';img.style.height='20px';img.style.objectFit='contain'})},500); const settingsBackdrop=document.querySelector('#settingsBackdrop');const closeSettings=()=>settingsBackdrop.classList.add('hidden');document.querySelector('#settingsOpen').addEventListener('click',()=>{loadPreferences();settingsBackdrop.classList.remove('hidden')});document.querySelector('#settingsClose').addEventListener('click',closeSettings);document.querySelector('#settingsCancel').addEventListener('click',closeSettings);settingsBackdrop.addEventListener('click',event=>{if(event.target===settingsBackdrop)closeSettings()});document.querySelector('#settingsSave').addEventListener('click',()=>{localStorage.setItem('preferred-audio',document.querySelector('#preferredAudio').value);localStorage.setItem('preferred-subs',document.querySelector('#preferredSubs').value);loadPreferences();closeSettings()});