{#if !$sleepTimerActive}
{ e.stopPropagation(); onSleepTimerClick?.(); }} ontouchstart={(e) => e.stopPropagation()} ontouchmove={(e) => e.stopPropagation()} ontouchend={(e) => e.stopPropagation()} class="p-2 rounded-full text-gray-400 hover:text-white transition-colors" title="Sleep timer" aria-label="Sleep timer" >
{:else}
{/if}
{ e.stopPropagation(); onToggleShuffle?.(); }} ontouchstart={(e) => e.stopPropagation()} ontouchmove={(e) => e.stopPropagation()} ontouchend={(e) => e.stopPropagation()} class="p-2 rounded-full transition-colors {shuffle ? 'text-[var(--color-jellyfin)]' : 'text-gray-400 hover:text-white'}" title="Shuffle" >
{ e.stopPropagation(); onPrevious?.(); }} ontouchstart={(e) => e.stopPropagation()} ontouchmove={(e) => e.stopPropagation()} ontouchend={(e) => e.stopPropagation()} disabled={!hasPrevious} class="p-2 rounded-full text-white hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed transition-colors" title="Previous" >
{ e.stopPropagation(); handlePlayPause(); }} ontouchstart={(e) => e.stopPropagation()} ontouchmove={(e) => e.stopPropagation()} ontouchend={(e) => e.stopPropagation()} class="p-3 rounded-full bg-white text-black hover:scale-105 transition-transform" title={optimisticIsPlaying ? "Pause" : "Play"} > {#if optimisticIsPlaying}
{:else}
{/if}
{ e.stopPropagation(); onNext?.(); }} ontouchstart={(e) => e.stopPropagation()} ontouchmove={(e) => e.stopPropagation()} ontouchend={(e) => e.stopPropagation()} disabled={!hasNext} class="p-2 rounded-full text-white hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed transition-colors" title="Next" >
{ e.stopPropagation(); onCycleRepeat?.(); }} ontouchstart={(e) => e.stopPropagation()} ontouchmove={(e) => e.stopPropagation()} ontouchend={(e) => e.stopPropagation()} class="p-2 rounded-full transition-colors {repeat !== 'off' ? 'text-[var(--color-jellyfin)]' : 'text-gray-400 hover:text-white'}" title="Repeat: {repeat}" > {#if repeat === "one"}
{:else}
{/if}