{#if current}
{#if player.state === 'error'}
{player.error ?? 'Playback failed.'}
playQueue(player.queue, player.index)} > Try again
{:else}
{current.title}
{current.artist_name}
{#if player.state === 'loading' || player.state === 'idle'}
{:else if player.isPlaying}
{:else}
{/if}
{#if player.repeat === 'one'}
{:else}
{/if}
toggleQueueDrawer()} aria-label={player.queueDrawerOpen ? 'Close queue' : 'Open queue'} aria-pressed={player.queueDrawerOpen} class="flex h-8 w-8 items-center justify-center rounded-full transition-colors {player.queueDrawerOpen ? 'bg-accent-tint text-accent' : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}" >
Volume
{formatDuration(smoothed.value)}
{formatDuration(player.duration)}
{/if}
{current.title}
{current.artist_name}
{#if player.queue.length > player.index + 1} {@const nextTrack = player.queue[player.index + 1]}
Next · {nextTrack.title} — {nextTrack.artist_name}
{/if}
{#if player.state === 'error'}
{player.error ?? 'Playback failed.'}
playQueue(player.queue, player.index)} > Try again
{:else}
{#if player.state === 'loading' || player.state === 'idle'}
{:else if player.isPlaying}
{:else}
{/if}
{formatDuration(smoothed.value)}
{formatDuration(player.duration)}
{/if}
{#if player.repeat === 'one'}
{:else}
{/if}
toggleQueueDrawer()} aria-label={player.queueDrawerOpen ? 'Close queue' : 'Open queue'} aria-pressed={player.queueDrawerOpen} class="flex h-9 w-9 items-center justify-center rounded-full transition-colors {player.queueDrawerOpen ? 'bg-accent-tint text-accent' : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}" >
Volume
{/if}