markury/shark
1
0
Fork 0
mirror of https://github.com/markuryy/shark.git synced 2025-12-12 11:41:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(np): refactor layout

Browse Source
This commit is contained in:
Markury
2025-10-04 15:49:24 -04:00
parent a602ee4bbd
commit 9e75322a43
1 changed files with 115 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
src/lib/components/NowPlayingPanel.svelte
View File

@@ -41,90 +41,96 @@
</script> </script>
<div class="now-playing"> <div class="now-playing">
<div class="controls"> <div class="player-main">
<button <div class="track-info">
class="control-button" <div class="track-title-row">
onclick={handlePrevious} <img src="/icons/play.svg" alt="" class="track-icon" />
disabled={!hasTrack} <div class="track-text-content">
title="Previous" <div class="track-title">
> {#if hasTrack && $playback.currentTrack}
<img src="/icons/player-skip-back.svg" alt="Previous" /> {$playback.currentTrack.metadata.title || $playback.currentTrack.filename}
</button> {:else}
No track playing
<button {/if}
class="control-button play-pause" </div>
onclick={handlePlayPause} <div class="track-artist">
disabled={!hasTrack} {#if hasTrack && $playback.currentTrack}
title={$playback.isPlaying ? 'Pause' : 'Play'} {$playback.currentTrack.metadata.artist || 'Unknown Artist'}
> {/if}
{#if $playback.isPlaying} </div>
<img src="/icons/player-pause.svg" alt="Pause" />
{:else}
<img src="/icons/player-play.svg" alt="Play" />
{/if}
</button>
<button
class="control-button"
onclick={() => playback.stop()}
disabled={!hasTrack}
title="Stop"
>
<img src="/icons/player-stop.svg" alt="Stop" />
</button>
<button
class="control-button"
onclick={handleNext}
disabled={!hasTrack}
title="Next"
>
<img src="/icons/player-skip-forward.svg" alt="Next" />
</button>
</div>
<div class="track-info">
<div class="track-title-row">
<img src="/icons/play.svg" alt="" class="track-icon" />
<div class="track-text-content">
<div class="track-title">
{#if hasTrack && $playback.currentTrack}
{$playback.currentTrack.metadata.title || $playback.currentTrack.filename}
{:else}
No track playing
{/if}
</div>
<div class="track-artist">
{#if hasTrack && $playback.currentTrack}
{$playback.currentTrack.metadata.artist || 'Unknown Artist'}
{/if}
</div> </div>
</div> </div>
</div> </div>
<div class="progress-section"> <div class="player-controls-container">
<span class="time-display">{formatTime($playback.currentTime)}</span> <div class="progress-section">
<div class="progress-bar-container"> <span class="time-display">{formatTime($playback.currentTime)}</span>
<div class="progress-indicator"> <div class="progress-bar-container">
<span class="progress-indicator-bar" style="width: {progressPercent}%;"></span> <div class="progress-indicator">
<span class="progress-indicator-bar" style="width: {progressPercent}%;"></span>
</div>
<input
type="range"
min="0"
max={$playback.duration || 0}
step="0.1"
value={$playback.currentTime}
oninput={handleProgressChange}
disabled={!hasTrack}
class="progress-slider"
/>
</div> </div>
<input <span class="time-display">{formatTime($playback.duration)}</span>
type="range"
min="0"
max={$playback.duration || 0}
step="0.1"
value={$playback.currentTime}
oninput={handleProgressChange}
disabled={!hasTrack}
class="progress-slider"
/>
</div> </div>
<span class="time-display">{formatTime($playback.duration)}</span>
</div>
</div>
<div class="volume-section"> <div class="controls-row">
<TriangleVolumeSlider bind:value={$playback.volume} onchange={handleVolumeChange} /> <div class="controls">
<button
class="control-button"
onclick={handlePrevious}
disabled={!hasTrack}
title="Previous"
>
<img src="/icons/player-skip-back.svg" alt="Previous" />
</button>
<button
class="control-button play-pause"
onclick={handlePlayPause}
disabled={!hasTrack}
title={$playback.isPlaying ? 'Pause' : 'Play'}
>
{#if $playback.isPlaying}
<img src="/icons/player-pause.svg" alt="Pause" />
{:else}
<img src="/icons/player-play.svg" alt="Play" />
{/if}
</button>
<button
class="control-button"
onclick={() => playback.stop()}
disabled={!hasTrack}
title="Stop"
>
<img src="/icons/player-stop.svg" alt="Stop" />
</button>
<button
class="control-button"
onclick={handleNext}
disabled={!hasTrack}
title="Next"
>
<img src="/icons/player-skip-forward.svg" alt="Next" />
</button>
</div>
<div class="volume-section">
<TriangleVolumeSlider bind:value={$playback.volume} onchange={handleVolumeChange} />
</div>
</div>
</div>
</div> </div>
<LyricsDisplay lrcPath={$playback.lrcPath} currentTime={$playback.currentTime} /> <LyricsDisplay lrcPath={$playback.lrcPath} currentTime={$playback.currentTime} />
@@ -133,7 +139,8 @@
<style> <style>
.now-playing { .now-playing {
display: flex; display: flex;
align-items: center; flex-direction: row;
justify-content: center;
gap: 12px; gap: 12px;
padding: 8px; padding: 8px;
height: 100%; height: 100%;
@@ -141,6 +148,19 @@
font-size: 11px; font-size: 11px;
} }
.player-main {
display: flex;
flex-direction: column;
gap: 8px;
}
.controls-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.controls { .controls {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
@@ -177,12 +197,8 @@
} }
.track-info { .track-info {
flex: 1;
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
display: flex;
flex-direction: column;
gap: 4px;
} }
.track-title-row { .track-title-row {
@@ -224,6 +240,14 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.player-controls-container {
display: flex;
flex-direction: column;
gap: 8px;
max-width: 400px;
width: 100%;
}
.progress-section { .progress-section {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -269,17 +293,19 @@
flex-shrink: 0; flex-shrink: 0;
} }
/* Responsive: hide lyrics on medium widths */ /* Responsive: hide lyrics panel when not enough space */
@media (max-width: 1000px) { @media (max-width: 800px) {
.now-playing :global(.lyrics-display) { .now-playing :global(.lyrics-display) {
display: none; display: none;
} }
}
/* Responsive: hide volume on small widths */ .player-main {
@media (max-width: 800px) { width: 100%;
.volume-section { max-width: 600px;
display: none; }
.player-controls-container {
max-width: none;
} }
} }