{#if displayMedia}
{#if artworkItemId && displayMedia?.primaryImageTag}
{:else}
{/if}
Now Playing
{#if $isRemoteMode && $selectedSession}
{$selectedSession.deviceName}
{/if}
(showQueue = !showQueue)} class="p-2 rounded-full hover:bg-white/10 transition-colors {showQueue ? 'bg-white/10 text-[var(--color-jellyfin)]' : ''}" title="Queue" aria-label="Open queue" >
(showSleepTimerModal = true)} class="p-2 rounded-full hover:bg-white/10 transition-colors relative" title="Sleep timer" aria-label="Sleep timer" >
{#if $sleepTimerActive}
{/if}
{#if artworkItemId && displayMedia?.primaryImageTag}
{:else}
{/if}
{displayMedia?.name}
{#if displayMedia?.artistItems?.length} {#each displayMedia?.artistItems as artist, i}
navigateToArtist(artist.id)} class="hover:text-white hover:underline transition-colors" > {artist.name}
{#if i < (displayMedia?.artistItems?.length ?? 0) - 1}
,
{/if} {/each} {:else if displayMedia?.artists?.length}
{displayMedia?.artists.join(", ")}
{/if} {#if displayMedia?.albumId && displayMedia?.albumName} {#if displayMedia?.artistItems?.length || displayMedia?.artists?.length}
•
{/if}
{displayMedia?.albumName}
{:else if displayMedia?.albumName}
{displayMedia?.albumName}
{/if}
{formatTime(displayPosition)}
{formatTime(displayDuration)}
(showSleepTimerModal = true)} />
{/if}
(showSleepTimerModal = false)} /> {#if showQueue}
(showQueue = false)} aria-label="Close queue" >
(showQueue = false)} />
{/if}