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.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474@property --background { syntax: "<color>"; inherits: true; initial-value: Canvas;}
:root { color-scheme: light dark;
--background: Canvas; --text: CanvasText;
/* will probably switch to alpha() once baseline-widely-available */ --layer: rgb(from currentColor r g b / 5%);
--selected-background: SelectedItem; --selected-text: SelectedItemText;
--playing-background: rgb(from AccentColor r g b / 30%); --playing-text: currentColor;
--accent: AccentColor; --accent-green: lime; --accent-orange: orange; --accent-red: red;
--unfocused-background: rgb(from currentColor r g b / 30%); --unfocused-text: currentColor;
--border: none; --border-subtle: none; --border-text: 1px solid rgb(from currentColor r g b / 10%);
@media (prefers-contrast: more) { --layer: rgb(from currentColor r g b / 10%);
--playing-background: AccentColor; --playing-text: AccentColorText;
--unfocused-background: rgb(from currentColor r g b / 50%);
--border-text: 1px solid rgb(from currentColor r g b / 50%); }
--shadow-sm: none; --shadow-md: none;
--font-size: 1rem; --font-family: ui-sans-serif, system-ui, sans-serif; --font-family-monospace: ui-monospace, monospace;
--icon-size: 16px;
--radius-sm: 0; --radius-md: 0;
--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--button-press-scale-x: 1.25; --button-press-scale-y: 0.75; --button-hover-duration: 350ms; --button-press-duration: 75ms;
--viewport-inset-top: max( env(safe-area-inset-top, 0px), calc(env(titlebar-area-y, 0px) + env(titlebar-area-height, 0px)) ); --viewport-inset-right: env(safe-area-inset-right, 0px); --viewport-inset-bottom: env(safe-area-inset-bottom, 0px); --viewport-inset-left: env(safe-area-inset-left, 0px); --viewport-inline-size: calc(100dvw - var(--viewport-inset-left) - var(--viewport-inset-right)); --viewport-block-size: calc(100dvh - var(--viewport-inset-top) - var(--viewport-inset-bottom));}
html.dynamic-colors { --accent: currentColor; --accent-green: currentColor; --accent-orange: currentColor; --accent-red: currentColor; --playing-background: rgb(from currentColor r g b / 30%); --selected-background: rgb(from currentColor r g b / 25%); --selected-text: currentColor;}
html.dynamic-highlights { --playing-background: rgb(from var(--accent) r g b / 30%); --selected-background: rgb(from var(--accent) r g b / 25%); --selected-text: currentColor; --accent-green: var(--accent); --accent-orange: var(--accent); --accent-red: var(--accent);
:is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--accent); }}
html.shadows { --shadow-sm: 0 2px 10px rgb(0 0 0 / 0.2); --shadow-md: 0 16px 32px rgb(0 0 0 / 0.2);
@media (prefers-contrast: more) { --shadow-sm: 0 2px 10px rgb(0 0 0 / 0.4); --shadow-md: 0 16px 32px rgb(0 0 0 / 0.4); }}
html.borders { --border: 1px solid rgb(from currentColor r g b / 25%); --border-subtle: 1px solid rgb(from currentColor r g b / 10%);
@media (prefers-contrast: more) { --border: 1px solid currentColor; --border-subtle: 1px solid rgb(from currentColor r g b / 50%); }}
html.rounded-corners { --radius-sm: 2px; --radius-md: 4px;}
@supports (corner-shape: squircle) { html.rounded-corners { --radius-sm: 4px; --radius-md: 8px; }}
html { user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
font-size: clamp(0.5rem, var(--font-size), 2rem); font-family: var(--font-family);}
@supports (font: -apple-system-body) { html:not(.custom-font-size):not(.custom-font-family) { font: -apple-system-body; }}
body { background-color: var(--background); color: var(--text); block-size: 100dvh; inline-size: 100dvw; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
html.transparency :is(.scroll-fade, .scroll-fade-top, .scroll-fade-bottom) { --scroll-fade-top-offset: 0px; --scroll-fade-top: 0px; --scroll-fade-bottom: 0px; --scroll-fade-top-length: 0px; --scroll-fade-bottom-length: 0px; mask-image: linear-gradient( to bottom, black 0, black var(--scroll-fade-top-offset), transparent var(--scroll-fade-top-offset), black calc( var(--scroll-fade-top-offset) + min(var(--scroll-fade-top-length), var(--scroll-fade-top)) ), black calc(100% - min(var(--scroll-fade-bottom-length), var(--scroll-fade-bottom))), transparent );}html.transparency :is(.scroll-fade, .scroll-fade-top) { --scroll-fade-top-length: 1.5rem;}html.transparency :is(.scroll-fade, .scroll-fade-bottom) { --scroll-fade-bottom-length: 1.5rem;}
button:not(.native) { appearance: none; color: inherit; background: none; border: none; padding: 0;}
button:not(.native):disabled { opacity: 0.5;}
button:not(.no-touch-target),input,select { position: relative;
&::after { content: ""; position: absolute; inset: -0.25rem; z-index: -1; }}
html:is(.dynamic-colors, .custom-colors) :is(.library-search, .queue-filter) input { background-color: var(--layer); color: inherit; border: var(--border-subtle); border-radius: var(--radius-md); corner-shape: squircle;
&::placeholder { opacity: 0.5; color: inherit; }}
.artwork { background-color: rgb(from currentColor r g b / 10%);
html.borders &:not(:focus-visible) { outline: var(--border-subtle); outline-offset: -1px; }}
.artwork-image { display: block; inline-size: 100%; block-size: 100%; object-fit: cover;}
.artwork,.artwork-image { border-radius: var(--radius-sm); corner-shape: squircle;}
.popover { border: var(--border); background-color: Canvas; color: CanvasText; box-shadow: var(--shadow-sm); border-radius: var(--radius-md); corner-shape: squircle;
html.transparency & { background-color: rgb(from Canvas r g b / 80%); backdrop-filter: blur(16px); }}
button.pressable--gentle { --button-press-scale-x: 1.05; --button-press-scale-y: 0.95; --button-hover-duration: 300ms; --button-press-duration: 50ms;}
html.motion { transition: --background 300ms var(--ease-out-cubic);
img.image-loading { visibility: hidden; }
button:where(.pressable, :has(> .icon)) { transform-origin: var(--button-transform-origin, center); transition: transform var(--button-hover-duration) var(--ease-out-quart), opacity var(--button-hover-duration) var(--ease-out-quart); }
button:where(.pressable, :has(> .icon)):not(:disabled):not(:where(.pressable--gentle)):hover { transform: scale(1.125); }
button:where(.pressable, :has(> .icon)):not(:disabled):active { transform: scaleX(var(--button-press-scale-x)) scaleY(var(--button-press-scale-y)); opacity: 0.5; transition-duration: var(--button-press-duration); transition-timing-function: ease-out; }
button.is-activated { animation: button-activation calc(var(--button-hover-duration) + var(--button-press-duration)) ease-out; }
button.pressable--gentle.is-activated { animation-name: button-activation-gentle; }
.progress-bar.is-activated:not(.disabled) { animation: progress-bar-activation calc(var(--button-hover-duration) + var(--button-press-duration) - 35ms) ease-out; }
.loading { position: relative;
&::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-color: rgb(from currentColor r g b / 20%); mask: linear-gradient(90deg, transparent 30%, black 50%, transparent 70%) 0 0 / 200% 100% no-repeat; animation: loading-shimmer 1s ease-in-out 1s infinite backwards; } }}
@keyframes button-activation { 17.65% { transform: scaleX(var(--button-press-scale-x)) scaleY(var(--button-press-scale-y)); animation-timing-function: var(--ease-out-quart); }}
@keyframes button-activation-gentle { 14.29% { transform: scaleX(var(--button-press-scale-x)) scaleY(var(--button-press-scale-y)); animation-timing-function: var(--ease-out-quart); }}
@keyframes progress-bar-activation { 16% { transform: scaleY(var(--progress-press-scale, var(--button-press-scale-y))); animation-timing-function: var(--ease-out-quart); }}
@keyframes loading-shimmer { from { mask-position: 140%; } to { mask-position: -40%; }}
@keyframes pop-in { from { opacity: 0; transform: scale(0.95); }}
@keyframes fade-in { from { opacity: 0; }}
#app { display: grid; grid-template-areas: "sidebar queue" "sidebar controls"; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; block-size: 100%; inline-size: 100%;}
#queue { grid-area: queue;}
#controls { grid-area: controls;}
#sidebar { grid-area: sidebar; position: relative; display: flex; flex-direction: column; border-inline-end: var(--border);}
@media (width <= 32rem) { #sidebar { display: contents; } .now-playing-container { grid-area: nowplaying; } #app { overflow: hidden; grid-template-areas: "main" "nowplaying" "controls"; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto; } #library, #queue { grid-area: main; min-inline-size: 0; touch-action: pan-y pinch-zoom; } html { --library-offscreen: -100%; --queue-offscreen: 100%; } html:dir(rtl) { --library-offscreen: 100%; --queue-offscreen: -100%; } html.motion { #library, #queue { transition: transform 250ms var(--ease-out-cubic), visibility 250ms linear; } } html:not(.show-library-mobile) #library { transform: translateX(var(--library-offscreen)); visibility: hidden; } html.show-library-mobile #queue { transform: translateX(var(--queue-offscreen)); visibility: hidden; }}
html.miniplayer :is(#sidebar, .now-playing-container) { display: contents;}
html.miniplayer #app { grid-template-areas: "nowplaying" "controls"; grid-template-columns: 1fr; grid-template-rows: 1fr auto;}
html.miniplayer #now-playing { grid-area: nowplaying;}
html.miniplayer #library,html.miniplayer #queue { display: none;}
:is(#queue, #library),html.miniplayer #now-playing { margin-block-start: calc(var(--viewport-inset-top) - env(safe-area-inset-top, 0px));}
html.miniplayer.window-controls-overlay #now-playing { padding-block-start: 0;}
.titlebar-drag-region { position: fixed; left: env(titlebar-area-x, 0px); top: env(titlebar-area-y, 0px); width: env(titlebar-area-width, 0px); height: env(titlebar-area-height, 0px); app-region: drag; z-index: 20;}