denizk0461/pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

media player now takes custom colour to style itself

Browse Source
This commit is contained in:
denizk0461
2026-04-19 21:41:10 +02:00
parent b87e334117
commit bdc38cef4e
3 changed files with 33 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/lib/media/player.svelte
View File

@@ -7,9 +7,17 @@
let {
tracks,
cover, // album cover (optional, currently unused)
// we're doing this manually instead of letting the computer calculate optimal colours because... it's easier this way. might as well spend the 2 seconds setting two booleans rather than 2 hours trying to make this work halfway decently, lol
customColor,
useDarkText,
useDarkHoverText,
}: {
tracks: Track[];
cover?: string;
customColor: string;
useDarkText?: boolean;
useDarkHoverText?: boolean;
} = $props();
let selectedTrackId: number = $state(0);
@@ -44,7 +52,11 @@
}
</script>
<div class="media-player">
<div class="media-player" style="
--color-player: {customColor};
--color-player-text: var({useDarkText ? "--color-text-dark" : "--color-text"});
--color-player-text-hover: var({useDarkHoverText ? "--color-text-dark" : "--color-text"});
">
<div class="now-playing">
<audio
src={tracks[selectedTrackId].link}
@@ -137,7 +149,7 @@
.icon {
width: 20px;
height: 20px;
color: var(--color-text);
color: var(--color-player-text);
transition: color var(--duration-animation) var(--anim-curve);
}
.icon:hover {
@@ -146,15 +158,18 @@
}
.media-player {
--color-player-bg: color-mix(in srgb, var(--color-player) 40%, transparent);
width: 100%;
border-radius: var(--border-radius);
background-color: var(--color-background-highlight-alt);
background-color: var(--color-player-bg);
padding: 16px 0 16px;
overflow: hidden;
}
.media-player p, .media-player a {
margin: 0;
color: var(--color-player-text);
}
.now-playing {
@@ -171,7 +186,7 @@
}
/* not sure why the svg target is required only for the latter here but it won't work without it */
.now-playing-button:hover, .track-download-icon:hover svg {
color: var(--color-highlight-alt);
color: var(--color-player);
}
.now-playing-hint, .now-playing-duration {
@@ -200,7 +215,7 @@
.slider {
flex: 1;
height: 6px;
background: var(--color-background-highlight-alt);
background: var(--color-player-bg);
border-radius: 6px;
overflow: hidden;
cursor: pointer;
@@ -210,7 +225,7 @@
.progress-bar {
width: calc(100 * var(--progress));
height: 100%;
background: var(--color-highlight-alt);
background: var(--color-player);
transition: width var(--duration-animation) var(--anim-curve);
}
@@ -239,12 +254,18 @@
transition: background-color var(--duration-animation) var(--anim-curve);
}
.track-play:hover {
background-color: var(--color-background-highlight-hover-alt);
background-color: var(--color-player);
}
.track-title, .track-icon {
transition: color var(--duration-animation) var(--anim-curve);
}
.track-play:hover .track-title, .track-play:hover .track-icon {
color: var(--color-player-text-hover);
}
.track-icon {
width: 24px;
color: var(--color-text);
color: var(--color-player-text);
}
.track-download-icon {