A music player that connects to your cloud/distributed storage.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: blur theme

+223 -115
+14 -7
src/_data/facets.json
··· 15 15 "desc": "Automatically put tracks into the queue when this interface is opened. Also allows for controlling shuffle, repeat, search, sorting and playlist selection." 16 16 }, 17 17 { 18 + "url": "themes/blur/facet/index.html", 19 + "title": "Blur", 20 + "category": "Themes", 21 + "featured": true, 22 + "desc": "A modern, blurred glass-style theme for the audio player." 23 + }, 24 + { 18 25 "url": "themes/blur/artwork-controller/facet/index.html", 19 26 "title": "Blur / Artwork Controller", 20 27 "category": "Playback", ··· 124 131 "desc": "Export all data as a JSON snapshot, or restore from a previously exported file." 125 132 }, 126 133 { 134 + "url": "facets/data/playlists/index.html", 135 + "title": "Playlists", 136 + "category": "Data", 137 + "featured": true, 138 + "desc": "An overview of all playlists and their contents." 139 + }, 140 + { 127 141 "url": "facets/playback/preload/prelude/index.html", 128 142 "title": "Preload Tracks", 129 143 "kind": "prelude", ··· 168 182 "title": "Scrobble / Rocksky", 169 183 "category": "Miscellaneous", 170 184 "desc": "Connect to Rocksky to setup the Rocksky scrobbler." 171 - }, 172 - { 173 - "url": "facets/data/playlists/index.html", 174 - "title": "Playlists", 175 - "category": "Data", 176 - "featured": true, 177 - "desc": "An overview of all playlists and their contents." 178 185 }, 179 186 { 180 187 "url": "facets/data/sources/index.html",
src/fonts/PublicSans-Italic[wght].woff2

This is a binary file and will not be displayed.

src/fonts/PublicSans[wght].woff2

This is a binary file and will not be displayed.

+9 -10
src/themes/blur/artwork-controller/element.css
··· 1 1 :host { 2 2 --transition-durition: 750ms; 3 + font-size: var(--fs-sm); 3 4 } 4 5 5 6 main { ··· 7 8 color: white; 8 9 display: flex; 9 10 flex-direction: column; 10 - font-size: var(--fs-sm); 11 11 height: 100%; 12 12 opacity: 1 !important; 13 13 overflow: hidden; ··· 44 44 background: oklch(0 0 0); 45 45 border-radius: var(--radius-sm); 46 46 box-shadow: var(--box-shadow-lg); 47 - font-size: var(--fs-2xs); 47 + font-size: 64%; 48 48 font-weight: 600; 49 49 left: var(--space-xs); 50 50 letter-spacing: var(--tracking-wide); 51 - line-height: 1; 52 - padding: 8px 6px; 51 + line-height: 0.75; 52 + padding: 8px 6px 7px; 53 53 position: absolute; 54 54 text-box: trim-both cap alphabetic; 55 55 text-transform: uppercase; ··· 125 125 border: 0; 126 126 color: color-mix(in oklch, currentColor 50%, transparent); 127 127 cursor: pointer; 128 - font-size: var(--fs-base); 129 - font-size: calc(var(--fs-base) * 0.9); 128 + font-size: 113%; 130 129 padding: calc(var(--space-2xs) + 1px) var(--space-sm) var(--space-2xs); 131 130 132 131 &[data-enabled="t"] { ··· 176 175 177 176 .timestamps { 178 177 display: flex; 179 - font-size: var(--fs-2xs); 178 + font-size: 60%; 180 179 font-weight: 500; 181 180 justify-content: space-between; 182 181 margin-top: var(--space-3xs); ··· 193 192 .controller menu { 194 193 align-items: center; 195 194 display: flex; 196 - font-size: var(--fs-lg); 195 + font-size: 230%; 197 196 gap: var(--space-lg); 198 197 justify-content: center; 199 198 margin: var(--space-md) 0; ··· 217 216 .controller .ph-pause, 218 217 .controller .ph-play, 219 218 .controller .menu__loader { 220 - font-size: var(--fs-xl); 219 + font-size: 130%; 221 220 } 222 221 223 222 /* Volume */ ··· 225 224 .volume { 226 225 align-items: center; 227 226 display: flex; 228 - font-size: var(--fs-xs); 227 + font-size: 75%; 229 228 gap: var(--space-2xs); 230 229 justify-content: space-between; 231 230 }
+1 -1
src/themes/blur/artwork-controller/element.js
··· 527 527 data-enabled="${isFav ? `t` : `f`}" 528 528 @click="${this.toggleFavourite}" 529 529 > 530 - <i class="ph-${isFav ? `fill` : `bold`} ph-star"></i> 530 + <i class="ph-${isFav ? `fill` : `bold`} ph-heart"></i> 531 531 </button> 532 532 <button 533 533 title="Toggle shuffle"
+1 -1
src/themes/blur/artwork-controller/facet/index.html
··· 5 5 @import "./themes/blur/font-faces.css"; 6 6 7 7 db-artwork-controller { 8 - font-family: "Figtree", "Intervariable", sans-serif; 8 + font-family: "Public Sans", "Intervariable", sans-serif; 9 9 } 10 10 </style> 11 11
-10
src/themes/blur/browser/element.css
··· 1 1 :host { 2 - --bg-color: oklch(100% 0 0); 3 - --text-color: oklch(14% 0 0); 4 - 5 2 background: var(--bg-color); 6 3 color: var(--text-color); 7 4 display: flex; ··· 9 6 font-size: calc(var(--fs-sm) * 0.85); 10 7 height: 100%; 11 8 overflow: hidden; 12 - } 13 - 14 - @media (prefers-color-scheme: dark) { 15 - :host { 16 - --bg-color: oklch(19% 0.006 265); 17 - --text-color: oklch(86% 0 0); 18 - } 19 9 } 20 10 21 11 /***********************************
+1
src/themes/blur/browser/element.js
··· 360 360 <link rel="stylesheet" href="styles/diffuse/facet.css" /> 361 361 <link rel="stylesheet" href="vendor/@phosphor-icons/web/bold/style.css" /> 362 362 <link rel="stylesheet" href="vendor/@phosphor-icons/web/fill/style.css" /> 363 + <link rel="stylesheet" href="themes/blur/variables.css" /> 363 364 <link rel="stylesheet" href="themes/blur/browser/element.css" /> 364 365 365 366 <div class="toolbar">
+2 -1
src/themes/blur/browser/facet/index.html
··· 3 3 @import "./vendor/@phosphor-icons/web/fill/style.css"; 4 4 @import "./styles/base.css"; 5 5 @import "./styles/diffuse/facet.css"; 6 + @import "./themes/blur/variables.css"; 6 7 @import "./themes/blur/font-faces.css"; 7 8 8 9 db-browser { 9 - font-family: "Figtree", "Intervariable", sans-serif; 10 + font-family: "Public Sans", "Intervariable", sans-serif; 10 11 height: 100vh; 11 12 } 12 13 </style>
+80
src/themes/blur/facet/index.css
··· 1 + body { 2 + /*background-color: oklch(from var(--bg-color) calc(l - 0.025) c h);*/ 3 + background-color: var(--color-2); 4 + color: var(--text-color); 5 + display: flex; 6 + flex-direction: column; 7 + overflow: hidden; 8 + height: 100dvh; 9 + 10 + @media (prefers-color-scheme: dark) { 11 + background-color: var(--color-3); 12 + } 13 + } 14 + 15 + /*********************************** 16 + * Main 17 + ***********************************/ 18 + 19 + main { 20 + display: grid; 21 + gap: var(--space-sm); 22 + grid-template-columns: repeat(3, 1fr); 23 + grid-template-rows: 1fr; 24 + height: 100dvh; 25 + overflow: hidden; 26 + padding: var(--space-md) var(--space-md); 27 + } 28 + 29 + /*********************************** 30 + * Elements 31 + ***********************************/ 32 + 33 + db-artwork-controller, 34 + db-browser { 35 + border-radius: var(--radius-md); 36 + height: 100%; 37 + justify-self: end; 38 + overflow: hidden; 39 + width: 100%; 40 + } 41 + 42 + db-artwork-controller { 43 + grid-column: 3; 44 + grid-row: 1; 45 + } 46 + 47 + db-browser { 48 + box-shadow: var(--box-shadow-md); 49 + grid-column: 1 / span 2; 50 + grid-row: 1 / span 2; 51 + } 52 + 53 + #shortcuts { 54 + border-radius: var(--radius-md); 55 + box-shadow: var(--box-shadow-md); 56 + display: flex; 57 + font-size: var(--fs-sm); 58 + gap: 1px; 59 + overflow: hidden; 60 + 61 + button, 62 + a { 63 + align-items: center; 64 + background-color: var(--bg-color); 65 + border: 0; 66 + color: var(--text-color); 67 + cursor: pointer; 68 + display: flex; 69 + flex: 1; 70 + gap: var(--space-3xs); 71 + line-height: 0.75; 72 + justify-content: center; 73 + overflow: hidden; 74 + padding: var(--space-sm) var(--space-3xs); 75 + text-box: trim-both cap alphabetic; 76 + text-decoration: none; 77 + text-overflow: ellipsis; 78 + white-space: nowrap; 79 + } 80 + }
+49
src/themes/blur/facet/index.html
··· 1 + <link rel="stylesheet" href="styles/base.css" /> 2 + <link rel="stylesheet" href="themes/blur/font-faces.css" /> 3 + <link rel="stylesheet" href="themes/blur/variables.css" /> 4 + <link rel="stylesheet" href="themes/blur/facet/index.css" /> 5 + <link rel="stylesheet" href="vendor/@phosphor-icons/web/bold/style.css" /> 6 + <link rel="stylesheet" href="vendor/@phosphor-icons/web/fill/style.css" /> 7 + 8 + <style> 9 + html { 10 + font-size: 16px; 11 + } 12 + 13 + main, 14 + db-artwork-controller, 15 + db-browser { 16 + font-family: "Public Sans", "Intervariable", sans-serif; 17 + } 18 + </style> 19 + 20 + <main> 21 + <db-browser 22 + output-selector="#output" 23 + tracks-selector="do-scoped-tracks" 24 + queue-engine-selector="de-queue" 25 + scope-engine-selector="de-scope" 26 + favourites-orchestrator-selector="do-favourites" 27 + ></db-browser> 28 + 29 + <db-artwork-controller 30 + artwork-selector="do-artwork" 31 + controller-orchestrator-selector="do-controller" 32 + input-selector="#input" 33 + favourites-orchestrator-selector="do-favourites" 34 + repeat-shuffle-engine-selector="de-repeat-shuffle" 35 + ></db-artwork-controller> 36 + 37 + <div id="shortcuts"> 38 + <button id="btn-new-deck"> 39 + <i class="ph-bold ph-browsers"></i> 40 + <span>New Deck</span> 41 + </button> 42 + <a href="l/?path=facets%2Fdata%2Fsources%2Findex.html" target="_blank"> 43 + <i class="ph-bold ph-hard-drives"></i> 44 + <span>Sources</span> 45 + </a> 46 + </div> 47 + </main> 48 + 49 + <script type="module" src="themes/blur/facet/index.inline.js"></script>
+51
src/themes/blur/facet/index.inline.js
··· 1 + import foundation from "~/common/foundation.js"; 2 + 3 + // Set doc title 4 + foundation.setup({ title: "Blur | Diffuse" }); 5 + 6 + //////////////////////////////////////////// 7 + // 🚀 8 + //////////////////////////////////////////// 9 + 10 + await foundation.engine.queue(); 11 + await foundation.engine.repeatShuffle(); 12 + await foundation.engine.scope(); 13 + await foundation.orchestrator.scopedTracks(); 14 + 15 + await foundation.orchestrator.sources(); 16 + await foundation.orchestrator.processTracks({ disableWhenReady: true }); 17 + await foundation.orchestrator.queueAudio(); 18 + await foundation.orchestrator.controller(); 19 + await foundation.orchestrator.artwork(); 20 + await foundation.orchestrator.favourites(); 21 + 22 + await import("~/themes/blur/artwork-controller/element.js"); 23 + await import("~/themes/blur/browser/element.js"); 24 + 25 + const group = foundation.GROUP === "facets" ? "Deck A" : foundation.GROUP; 26 + document.querySelector("db-artwork-controller")?.setAttribute("group", group); 27 + document.querySelector("db-browser")?.setAttribute("group", group); 28 + 29 + //////////////////////////////////////////// 30 + // SHORTCUTS 31 + //////////////////////////////////////////// 32 + 33 + document.querySelector("#btn-new-deck")?.addEventListener("click", async () => { 34 + const state = await navigator.locks.query(); 35 + const held = (state.held ?? []).map((l) => l.name); 36 + 37 + let nextGroup; 38 + if (!held.some((n) => n.includes("/Deck B"))) { 39 + nextGroup = "Deck B"; 40 + } else if (!held.some((n) => n.includes("/Deck C"))) { 41 + nextGroup = "Deck C"; 42 + } else { 43 + return; 44 + } 45 + 46 + const url = new URL(document.location.href); 47 + url.searchParams.set("group", nextGroup); 48 + window.open(url.toString(), "_blank"); 49 + }); 50 + 51 + foundation.ready();
+4 -4
src/themes/blur/font-faces.css
··· 1 1 @font-face { 2 2 font-display: swap; 3 - font-family: Figtree; 3 + font-family: "Public Sans"; 4 4 font-style: normal; 5 5 font-weight: 100 900; 6 - src: url("../../fonts/Figtree-VariableFont_wght.woff2") format("woff2"); 6 + src: url("../../fonts/PublicSans[wght].woff2") format("woff2"); 7 7 } 8 8 9 9 @font-face { 10 10 font-display: swap; 11 - font-family: Figtree; 11 + font-family: "Public Sans"; 12 12 font-style: italic; 13 13 font-weight: 100 900; 14 - src: url("../../fonts/Figtree-Italic-VariableFont_wght.woff2") format("woff2"); 14 + src: url("../../fonts/PublicSans-Italic[wght].woff2") format("woff2"); 15 15 }
-41
src/themes/blur/index.css
··· 1 - body { 2 - background-color: oklch(from var(--bg-color) calc(l - 0.025) c h); 3 - color: var(--text-color); 4 - display: flex; 5 - flex-direction: column; 6 - overflow: hidden; 7 - height: 100dvh; 8 - } 9 - 10 - /*********************************** 11 - * Main 12 - ***********************************/ 13 - main { 14 - display: grid; 15 - gap: var(--space-2xs); 16 - grid-template-columns: repeat(3, 1fr); 17 - grid-template-rows: auto; 18 - height: 100dvh; 19 - overflow: hidden; 20 - padding: var(--space-md) var(--space-md); 21 - } 22 - 23 - /*********************************** 24 - * Elements 25 - ***********************************/ 26 - 27 - iframe[src*="/artwork-controller/"] { 28 - grid-column: 3; 29 - height: 100%; 30 - justify-self: end; 31 - max-width: var(--container-3xs); 32 - width: 100%; 33 - } 34 - 35 - iframe[src*="/browser/"] { 36 - grid-column: 1 / span 2; 37 - grid-row: 1 / span 2; 38 - height: 100%; 39 - justify-self: end; 40 - width: 100%; 41 - }
src/themes/blur/index.js

This is a binary file and will not be displayed.

-15
src/themes/blur/index.vto
··· 1 - --- 2 - layout: layouts/diffuse.vto 3 - base: ../../ 4 - 5 - styles: 6 - - styles/base.css 7 - - themes/blur/index.css 8 - 9 - scripts: 10 - - themes/blur/index.js 11 - --- 12 - 13 - <!-- UI --> 14 - <main> 15 - </main>
+11 -24
src/themes/blur/variables.css
··· 1 - :root { 2 - /* Colors */ 3 - /* https://farbvelo.elastiq.ch/?s=eyJzIjoiZTBjNjIyMTdiNTcxZSIsImEiOjYsImNnIjo0LCJoZyI6dHJ1ZSwiaGIiOmZhbHNlLCJobyI6ZmFsc2UsImhjIjpmYWxzZSwiaHQiOmZhbHNlLCJiIjpmYWxzZSwicCI6MC4xNzUsIm1kIjo2MCwiY20iOiJsYWIiLCJmIjoiTGVnYWN5IiwiYyI6ImhzbHV2Iiwic2MiOmZhbHNlLCJidyI6dHJ1ZSwiYWgiOmZhbHNlLCJpdSI6IiIsImxtIjp0cnVlLCJzbSI6ZmFsc2UsImN2IjoiaGV4IiwicW0iOiJhcnQtcGFsZXR0ZSIsIm5sIjoiYmVzdE9mIn0= */ 4 - --moonscape: #7f6c71; 5 - --grandma’s-pink-tiles: #e1bac0; 6 - --cinderella: #f8d1c6; 7 - --young-apricot: #f8d7b6; 8 - --cereal-flake: #f0d8ad; 9 - --oatmeal: #cdc5b9; 1 + :root, 2 + :host { 3 + --bg-color: oklch(100% 0 0); 4 + --text-color: oklch(14% 0 0); 5 + } 10 6 11 - /* https://farbvelo.elastiq.ch/?s=eyJzIjoiZmZjY2JkZDg2ZjEzYiIsImEiOjYsImNnIjo0LCJoZyI6dHJ1ZSwiaGIiOmZhbHNlLCJobyI6ZmFsc2UsImhjIjpmYWxzZSwiaHQiOmZhbHNlLCJiIjpmYWxzZSwicCI6MC4xNzgzMDcwODQxNjMzNDY2LCJtZCI6NjAsImNtIjoibGFiIiwiZiI6IkxlZ2FjeSIsImMiOiJoc2x1diIsInNjIjpmYWxzZSwiYnciOnRydWUsImFoIjpmYWxzZSwiaXUiOiIiLCJsbSI6dHJ1ZSwic20iOmZhbHNlLCJjdiI6ImhzbCIsInFtIjoiYXJ0LXBhbGV0dGUiLCJubCI6ImJlc3RPZiJ9 */ 12 - --made-in-the-shade: #67717c; 13 - --misty-mountains: #b8cce0; 14 - --lucid-dreams: #c7e6f4; 15 - --icy-breeze: #c2eff1; 16 - --crushed-ice: #bdf5ed; 17 - --water-leaf: #b7efe7; 18 - 19 - /* https://farbvelo.elastiq.ch/?s=eyJzIjoiODJiN2FjMjU1ODRiOCIsImEiOjYsImNnIjo0LCJoZyI6dHJ1ZSwiaGIiOmZhbHNlLCJobyI6ZmFsc2UsImhjIjpmYWxzZSwiaHQiOmZhbHNlLCJiIjpmYWxzZSwicCI6MC4yMTkxOTgyMDcxNzEzMTQ3LCJtZCI6NjAsImNtIjoibGFiIiwiZiI6IkxlZ2FjeSIsImMiOiJoc2x1diIsInNjIjpmYWxzZSwiYnciOnRydWUsImFoIjpmYWxzZSwiaXUiOiIiLCJsbSI6dHJ1ZSwic20iOmZhbHNlLCJjdiI6ImhleCIsInFtIjoiYXJ0LXBhbGV0dGUiLCJubCI6ImJlc3RPZiJ9 */ 20 - --wizards-brew: #9d8bb3; 21 - --innocent-snowdrop: #cec0fa; 22 - --foggy-plateau: #d5d2fb; 23 - --puffy-cloud: #dce3fb; 24 - --diamond-white: #e1f4fb; 25 - --delicate-cloud: #d9dbe4; 7 + @media (prefers-color-scheme: dark) { 8 + :root, 9 + :host { 10 + --bg-color: oklch(19% 0.006 265); 11 + --text-color: oklch(86% 0 0); 12 + } 26 13 }
-1
src/themes/winamp/facet/index.html
··· 6 6 background: #3a6ea5 url("https://wallpapercave.com/wp/wp2808001.jpg") no-repeat; 7 7 background-size: cover; 8 8 }*/ 9 - 10 9 </style> 11 10 12 11 <main>