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

media player: play button only displayed on playing track

Browse Source
This commit is contained in:
denizk0461
2026-04-20 10:13:30 +02:00
parent c0901a63aa
commit 40d40a187a
1 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -129,17 +129,17 @@
<button class="track-play" aria-label="play" onclick={() => { <button class="track-play" aria-label="play" onclick={() => {
playTrack(index); playTrack(index);
}}> }}>
<svg class="track-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <svg class="track-icon {index == selectedTrackId ? "track-icon-playing" : ""}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z" />
</svg> </svg>
<div class="track-text-container"> <div class="track-text-container">
<span class="track-title-index">{index + 1}.</span> <span class="track-title-index">{(index + 1) < 10 ? `0${index + 1}` : index + 1}.</span>
<p class="track-title">{t.title}</p> <p class="track-title">{t.title}</p>
</div> </div>
</button> </button>
<a class="track-icon track-download-icon" href={t.link} aria-label="download"> <a class="track-download-icon" href={t.link} aria-label="download">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" /> <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg> </svg>
@@ -217,7 +217,7 @@
.slider { .slider {
flex: 1; flex: 1;
height: 6px; height: 8px;
background: var(--color-player-bg); background: var(--color-player-bg);
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
@@ -248,6 +248,7 @@
margin: 0 1px 0 5px; margin: 0 1px 0 5px;
align-self: flex-end !important; align-self: flex-end !important;
line-height: 0.8rem; line-height: 0.8rem;
font-family: var(--font-mono);
} }
.track-title { .track-title {
@@ -274,15 +275,26 @@
.track-title-index, .track-title, .track-icon { .track-title-index, .track-title, .track-icon {
transition: color var(--duration-animation) var(--anim-curve); transition: color var(--duration-animation) var(--anim-curve);
} }
.track-play:hover .track-title-index, .track-play:hover .track-title, .track-play:hover .track-icon { .track-play:hover .track-title-index, .track-play:hover .track-title, .track-play:hover .track-icon, .track-play:hover .track-icon-playing {
color: var(--color-player-text-hover); color: var(--color-player-text-hover);
} }
.track-play:hover .track-icon {
opacity: 1;
}
.track-icon { .track-icon {
width: 24px; width: 24px;
opacity: 0;
transition: opacity var(--duration-animation) var(--anim-curve),
color var(--duration-animation) var(--anim-curve);
color: var(--color-player-text); color: var(--color-player-text);
} }
.track-icon-playing {
/* color: var(--color-player-text); */
opacity: 1;
}
.track-download-icon { .track-download-icon {
padding: 0 12px; padding: 0 12px;
height: 100%; height: 100%;