Something went wrong. Try again.
a simple but full-featured web player for OpenSubsonic music servers (Navidrome, Gonic, Ampache, etc) devins.page/tinysub
svelte typescript javascript subsonic gonic navidrome
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117<script lang="ts">import type { Snippet } from "svelte";import Icon from "../icons/Icon.svelte";import { t } from "../languages/translate.svelte.js";import { attachEntry } from "../ui/motion.svelte.js";
let { rowKey, label, expanded, focused = false, disabled = false, onToggle, onAdd, actions, entryIndex, entryGen, onEntryAnimationEnd, tabbable = false,} = $props<{ rowKey: string; label: string; expanded: boolean; focused?: boolean; disabled?: boolean; onToggle: () => void; onAdd?: () => void; actions?: Snippet; entryIndex?: number; entryGen?: number; onEntryAnimationEnd?: (key: string) => void; tabbable?: boolean;}>();
const tabIndex = $derived(tabbable ? undefined : -1);</script>
<div class="label-row" class:loading={disabled} data-tree-key={rowKey} {@attach (element) => attachEntry(element, entryIndex, entryGen, rowKey, onEntryAnimationEnd)}> <button type="button" tabindex={tabIndex} class="pressable pressable--gentle" class:focused={focused} data-id={rowKey} aria-expanded={expanded} {disabled} onclick={(event) => { event.stopPropagation(); onToggle(); }} > {label} </button> {@render actions?.()} {#if onAdd} <button type="button" tabindex={tabIndex} class="pressable" aria-label={t("action.add_to_queue")} {disabled} onclick={(event) => { event.stopPropagation(); onAdd(); }} title={t("action.add_to_queue")} > <Icon name="add" /> </button> {/if}</div>
<style>.label-row { display: flex; align-items: center; gap: 0.25rem; margin-block-start: 0.5rem; border-block-end: var(--border-text);}.label-row > button:first-child { flex: 1; text-box: text; text-align: start; font-weight: bold; padding-block-end: 0.25rem; --button-transform-origin: 10% bottom;
&.focused { background-color: var(--selected-background); color: var(--selected-text); }
&[aria-expanded="false"] { font-style: italic; }}.label-row > :global(button:not(:first-child)) { flex: none; display: flex; align-items: center;}:global(:dir(rtl)) .label-row > :global(button) { --button-transform-origin: 90% bottom;}:global(#library:not(:focus-within)) button.focused { background-color: var(--unfocused-background); color: var(--unfocused-text);}</style>