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.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102<script lang="ts">import { t } from "../languages/translate.svelte.js";import { ui } from "../ui.svelte.js";import Modal from "./Modal.svelte";
let sections = $derived([ { title: t("settings.general"), items: [ { k: "Shift+L", d: t("common.library") }, { k: "Shift+,", d: t("common.settings") }, { k: "Shift+?", d: t("common.shortcuts") }, ], }, { title: t("common.controls"), items: [ { k: "space / k", d: `${t("common.play")}/${t("common.pause")}` }, { k: "j / l", d: t("shortcut.seek_10s") }, { k: "alt+j / l", d: `${t("common.prev")} / ${t("common.next")}` }, { k: "+ / -", d: t("common.volume") }, { k: "shift+r", d: t("common.loop") }, { k: "shift+m", d: t("common.miniplayer") }, ], }, { title: t("common.library"), items: [ { k: "↑ / ↓", d: t("shortcut.navigate") }, { k: "Home / End", d: t("shortcut.first_last") }, { k: "Enter", d: t("shortcut.expand_collapse") }, { k: "A / Alt+A", d: `${t("common.add")} / ${t("action.play_next")}` }, { k: "`", d: t("shortcut.context_menu") }, ], }, { title: t("common.queue"), items: [ { k: "↑ / ↓", d: t("shortcut.navigate") }, { k: "Alt + ↑ / ↓", d: t("shortcut.move_tracks") }, { k: "Alt + Page Up / Down", d: t("shortcut.move_tracks") }, { k: "Alt + Home / End", d: t("shortcut.move_tracks") }, { k: "Shift + ↑ / ↓", d: t("shortcut.extend_sel") }, { k: "Enter", d: t("shortcut.play_selected") }, { k: "Delete", d: t("common.clear") }, { k: "Ctrl+A", d: t("common.select_all") }, { k: "Ctrl+Z / Y", d: `${t("common.undo")} / ${t("common.redo")}` }, { k: "`", d: t("shortcut.context_menu") }, ], },]);</script>
<Modal bind:open={ui.showKeys} title={t("common.shortcuts")}> <section class="modal-section"> {#each sections as section} <div> <h3>{section.title}</h3> {#each section.items as { k: key, d: desc }} <div><kbd>{key}</kbd><span>{desc}</span></div> {/each} </div> {/each} </section></Modal>
<style>h3 { border-block-end: var(--border-text); padding-block-end: 0.25rem; margin-block: 0 0.5rem;}section { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
@media (width <= 32rem) { grid-template-columns: 1fr; }}section > div { display: flex; flex-direction: column; gap: 0.5rem;}section > div > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem;}kbd { background-color: var(--bg-layer); padding: 0.125rem 0.5rem; border-radius: var(--radius-sm); corner-shape: squircle; border-block-end: var(--border-text); font-family: var(--font-family-monospace);}</style>