mirror of
https://github.com/markuryy/shark.git
synced 2025-12-13 03:51:02 +00:00
feat(ui): add now playing panel and context menu for tracks
This commit is contained in:
293
src/lib/components/NowPlayingPanel.svelte
Normal file
293
src/lib/components/NowPlayingPanel.svelte
Normal file
@@ -0,0 +1,293 @@
|
||||
<script lang="ts">
|
||||
import { playback } from '$lib/stores/playback';
|
||||
import { audioPlayer } from '$lib/services/audioPlayer';
|
||||
import LyricsDisplay from '$lib/components/LyricsDisplay.svelte';
|
||||
|
||||
function handlePlayPause() {
|
||||
playback.togglePlayPause();
|
||||
}
|
||||
|
||||
function handlePrevious() {
|
||||
playback.previous();
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
playback.next();
|
||||
}
|
||||
|
||||
function handleProgressChange(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
const time = parseFloat(target.value);
|
||||
audioPlayer.seek(time);
|
||||
playback.setCurrentTime(time);
|
||||
}
|
||||
|
||||
function handleVolumeChange(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
const volume = parseFloat(target.value);
|
||||
playback.setVolume(volume);
|
||||
audioPlayer.setVolume(volume);
|
||||
}
|
||||
|
||||
function formatTime(seconds: number): string {
|
||||
if (!isFinite(seconds)) return '0:00';
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = Math.floor(seconds % 60);
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
const hasTrack = $derived($playback.currentTrack !== null);
|
||||
const progressPercent = $derived(
|
||||
$playback.duration > 0 ? ($playback.currentTime / $playback.duration) * 100 : 0
|
||||
);
|
||||
</script>
|
||||
|
||||
<div class="now-playing">
|
||||
<div class="controls">
|
||||
<button
|
||||
class="control-button"
|
||||
onclick={handlePrevious}
|
||||
disabled={!hasTrack}
|
||||
title="Previous"
|
||||
>
|
||||
<img src="/icons/prev.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/pause.svg" alt="Pause" />
|
||||
{:else}
|
||||
<img src="/icons/play.svg" alt="Play" />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="control-button"
|
||||
onclick={handleNext}
|
||||
disabled={!hasTrack}
|
||||
title="Next"
|
||||
>
|
||||
<img src="/icons/next.svg" alt="Next" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="track-info">
|
||||
{#if hasTrack && $playback.currentTrack}
|
||||
<div class="track-title">{$playback.currentTrack.metadata.title || $playback.currentTrack.filename}</div>
|
||||
<div class="track-artist">{$playback.currentTrack.metadata.artist || 'Unknown Artist'}</div>
|
||||
{:else}
|
||||
<div class="track-title">No track playing</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="progress-section">
|
||||
<span class="time-display">{formatTime($playback.currentTime)}</span>
|
||||
<div class="progress-bar-container">
|
||||
<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>
|
||||
<span class="time-display">{formatTime($playback.duration)}</span>
|
||||
</div>
|
||||
|
||||
<div class="volume-section">
|
||||
<img src="/icons/volume.svg" alt="Volume" class="volume-icon" />
|
||||
<div class="is-vertical volume-slider-container">
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
value={$playback.volume}
|
||||
oninput={handleVolumeChange}
|
||||
class="has-box-indicator"
|
||||
/>
|
||||
</div>
|
||||
<span class="volume-percent">{Math.round($playback.volume * 100)}%</span>
|
||||
</div>
|
||||
|
||||
<LyricsDisplay lrcPath={$playback.lrcPath} currentTime={$playback.currentTime} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.now-playing {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px;
|
||||
height: 100%;
|
||||
font-family: "Pixelated MS Sans Serif", Arial;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.control-button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
padding: 4px;
|
||||
min-width: auto;
|
||||
min-height: auto;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.control-button:hover:not(:disabled) {
|
||||
background: light-dark(silver, #2b2b2b);
|
||||
box-shadow: inset -1px -1px light-dark(#0a0a0a, #000),
|
||||
inset 1px 1px light-dark(#fff, #525252),
|
||||
inset -2px -2px light-dark(grey, #232323),
|
||||
inset 2px 2px light-dark(#dfdfdf, #363636);
|
||||
}
|
||||
|
||||
.control-button:active:not(:disabled) {
|
||||
box-shadow: inset -1px -1px light-dark(#fff, #525252),
|
||||
inset 1px 1px light-dark(#0a0a0a, #000),
|
||||
inset -2px -2px light-dark(#dfdfdf, #363636),
|
||||
inset 2px 2px light-dark(grey, #232323);
|
||||
}
|
||||
|
||||
.control-button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.control-button img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
filter: light-dark(none, invert(1));
|
||||
}
|
||||
|
||||
.play-pause {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.track-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.track-title {
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.track-artist {
|
||||
opacity: 0.7;
|
||||
font-size: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 2;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
min-width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress-indicator {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress-slider {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.progress-slider:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.volume-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.volume-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
filter: light-dark(none, invert(1));
|
||||
}
|
||||
|
||||
.volume-slider-container {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.volume-percent {
|
||||
font-family: monospace;
|
||||
font-size: 10px;
|
||||
min-width: 35px;
|
||||
}
|
||||
|
||||
/* Responsive: hide lyrics on medium widths */
|
||||
@media (max-width: 1000px) {
|
||||
.now-playing :global(.lyrics-display) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive: hide volume on small widths */
|
||||
@media (max-width: 800px) {
|
||||
.volume-section {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive: simplify track info on very small widths */
|
||||
@media (max-width: 600px) {
|
||||
.track-artist {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user