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
This commit is contained in:
2026-08-15 12:34:01 +02:00
parent d69f82d995
commit e508035474
+5
View File
@@ -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 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()} 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(); translateLayout(currentUiLanguage);loadPreferences();
const serviceIconSvg={radarr:'<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="2" fill="currentColor"/><path d="M12 5a7 7 0 0 1 6 3M12 12l6-5"/></svg>',sonarr:'<svg viewBox="0 0 24 24"><path d="M4 12h3M17 12h3M7 8a6 6 0 0 1 10 0M7 16a6 6 0 0 0 10 0M10 12h4"/><circle cx="12" cy="12" r="2" fill="currentColor"/></svg>',sabnzbd:'<svg viewBox="0 0 24 24"><path d="M12 4v11M8 11l4 4 4-4M5 19h14"/></svg>',jellyfin:'<svg viewBox="0 0 24 24"><path d="M7 4h10l4 8-4 8H7l-4-8 4-8Z"/><path d="m10 8 6 4-6 4V8Z" fill="currentColor"/></svg>',seerr:'<svg viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6"/><path d="m15 15 5 5M8 10h5"/></svg>',prowlarr:'<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="m12 6 2 6-2 6-2-6 2-6ZM6 12h12"/></svg>',easynews:'<svg viewBox="0 0 24 24"><path d="M6 18h12a3 3 0 0 0 .5-6A6.5 6.5 0 0 0 6 10a4 4 0 0 0 0 8Z"/></svg>',qbittorrent:'<svg viewBox="0 0 24 24"><path d="m5 7 5-3 5 3-5 3-5-3ZM9 14l5-3 5 3-5 3-5-3ZM5 17l5-3 5 3-5 3-5-3Z"/></svg>',bazarr:'<svg viewBox="0 0 24 24"><path d="M5 6h14M5 12h9M5 18h14"/><path d="m17 10 2 2-2 2"/></svg>',lingarr:'<svg viewBox="0 0 24 24"><path d="M5 6h14v10H9l-4 3V6Z"/><path d="M9 10h6M9 13h4"/></svg>',libretranslate:'<svg viewBox="0 0 24 24"><path d="M5 6h8M9 4v2M6 6c1 5 4 8 8 10M6 16c3-1 5-3 7-6M14 6h5M16 4v2M14 18h7M17 10l-3 8M18 15h4"/></svg>',sonarr_prowlarr_proxy:'<svg viewBox="0 0 24 24"><path d="M5 8h8M11 5l3 3-3 3M19 16h-8M13 13l-3 3 3 3"/><circle cx="5" cy="8" r="2"/><circle cx="19" cy="16" r="2"/></svg>',radarr_prowlarr_proxy:'<svg viewBox="0 0 24 24"><path d="M5 8h8M11 5l3 3-3 3M19 16h-8M13 13l-3 3 3 3"/><circle cx="5" cy="8" r="2"/><circle cx="19" cy="16" r="2"/></svg>',dashboard:'<svg viewBox="0 0 24 24"><path d="m4 11 8-7 8 7v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-8Z"/><path d="M9 20v-6h6v6"/></svg>'};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')); 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]=`<img src="${url}" alt="" loading="lazy" referrerpolicy="no-referrer">`});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()}); 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()});
</script> </script>