admin/SpotiFLAC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v7.1.4

Browse Source
This commit is contained in:
afkarxyz
2026-04-14 07:36:41 +07:00
parent 59a057b14a
commit 7346730be9
336 changed files with 13800 additions and 1142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/PlatformIcons.tsx
+47 -11
View File
@@ -1,11 +1,13 @@
import amazonMusicIcon from "../assets/icons/amazon-music.png";
import qobuzIcon from "../assets/icons/qobuz.png";
import tidalIcon from "../assets/icons/tidal.png";
const PLATFORM_ICON_URLS = {
tidal: tidalIcon,
qobuz: qobuzIcon,
amazon: amazonMusicIcon,
} as const;
import amazonMusicIcon from "../assets/icons/amzn.png";
import lrclibIcon from "../assets/icons/lrclib.png";
import musicBrainzDarkIcon from "../assets/icons/musicbrainz_d.png";
import musicBrainzLightIcon from "../assets/icons/musicbrainz_l.png";
import qobuzIcon from "../assets/icons/qbz.png";
import songlinkDarkIcon from "../assets/icons/songlink_d.png";
import songlinkLightIcon from "../assets/icons/songlink_l.png";
import songstatsIcon from "../assets/icons/songstats.png";
import tidalDarkIcon from "../assets/icons/tidal_d.png";
import tidalLightIcon from "../assets/icons/tidal_l.png";
type PlatformIconProps = {
className?: string;
};
@@ -48,14 +50,48 @@ function PlatformIcon({ src, alt, className = "w-4 h-4", defaultClassName = "" }
.join(" ");
return <img src={src} alt={alt} className={imageClassName} loading="lazy" referrerPolicy="no-referrer"/>;
}
function ThemedPlatformIcon({ lightSrc, darkSrc, alt, className = "w-4 h-4", defaultClassName = "" }: {
lightSrc: string;
darkSrc: string;
alt: string;
className?: string;
defaultClassName?: string;
}) {
const cleanedClassName = sanitizeClassName(className);
const statusClasses = getStatusClasses(className);
const wrapperClassName = [
cleanedClassName || "w-4 h-4",
"relative inline-flex shrink-0",
!hasRoundedClass(cleanedClassName) ? defaultClassName : "",
statusClasses,
]
.filter(Boolean)
.join(" ");
return <span role="img" aria-label={alt} className={wrapperClassName}>
<img src={lightSrc} alt="" aria-hidden="true" className="h-full w-full object-contain dark:hidden" loading="lazy" referrerPolicy="no-referrer"/>
<img src={darkSrc} alt="" aria-hidden="true" className="hidden h-full w-full object-contain dark:block" loading="lazy" referrerPolicy="no-referrer"/>
</span>;
}
export function TidalIcon({ className = "w-4 h-4" }: PlatformIconProps) {
return <PlatformIcon src={PLATFORM_ICON_URLS.tidal} alt="Tidal" className={className} defaultClassName="rounded-[4px]"/>;
return <ThemedPlatformIcon lightSrc={tidalLightIcon} darkSrc={tidalDarkIcon} alt="Tidal" className={className} defaultClassName="rounded-[4px]"/>;
}
export function QobuzIcon({ className = "w-4 h-4" }: PlatformIconProps) {
return <PlatformIcon src={PLATFORM_ICON_URLS.qobuz} alt="Qobuz" className={className}/>;
return <PlatformIcon src={qobuzIcon} alt="Qobuz" className={className}/>;
}
export function AmazonIcon({ className = "w-4 h-4" }: PlatformIconProps) {
return <PlatformIcon src={PLATFORM_ICON_URLS.amazon} alt="Amazon Music" className={className} defaultClassName="rounded-[4px]"/>;
return <PlatformIcon src={amazonMusicIcon} alt="Amazon Music" className={className} defaultClassName="rounded-[4px]"/>;
}
export function LrclibIcon({ className = "w-4 h-4" }: PlatformIconProps) {
return <PlatformIcon src={lrclibIcon} alt="LRCLIB" className={className}/>;
}
export function MusicBrainzIcon({ className = "w-4 h-4" }: PlatformIconProps) {
return <ThemedPlatformIcon lightSrc={musicBrainzLightIcon} darkSrc={musicBrainzDarkIcon} alt="MusicBrainz" className={className}/>;
}
export function SonglinkIcon({ className = "w-4 h-4" }: PlatformIconProps) {
return <ThemedPlatformIcon lightSrc={songlinkLightIcon} darkSrc={songlinkDarkIcon} alt="Songlink" className={className} defaultClassName="rounded-[3px]"/>;
}
export function SongstatsIcon({ className = "w-4 h-4" }: PlatformIconProps) {
return <PlatformIcon src={songstatsIcon} alt="Songstats" className={className} defaultClassName="rounded-[3px]"/>;
}
export function TidalAvailabilityIcon({ className = "w-4 h-4" }: PlatformIconProps) {
return <svg viewBox="0 0 24 24" className={`${className} fill-current`}>