track.id} gap="lg" rowClass={(track) => (player.currentId === track.id ? 'surface-active' : 'hover:bg-hover')} oncontextmenu={oncontextmenu ? (event, track, i) => oncontextmenu(event, track, i) : undefined} > {#snippet head()} {/snippet} {#snippet cell(track, column, i)} {@const active = player.currentId === track.id} {#if column.id === 'index'} onPlay(i)} aria-label={active && player.playing ? 'Pausar' : 'Reproducir'} class="relative grid size-8 place-items-center rounded-tag text-xs text-fg-2 tabular-nums" > {#if active} {:else} {i + 1} {/if} {:else if column.id === 'title'} onPlay(i)} /> {:else if column.id === 'plays'} {track.listensCount} {:else if column.id === 'added' || column.id === 'uploaded'} {#if track.date} {fmtDate(track.date)} {/if} {:else if column.id === 'duration'} {fmtTime(track.duration)} {:else if rowAction} {#if rowAction.action}

{:else} rowAction.onclick?.(track)} > {/if} {/if} {/snippet}