shark/src/lib/components/NowPlayingPanel.svelte

<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>