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.

chore: fade in most facets + improve loading anim

+97 -12
+5
src/_includes/layouts/diffuse.vto
··· 28 28 <meta name="msapplication-TileColor" content="#8a90a9" /> 29 29 <meta name="theme-color" content="#8a90a9" /> 30 30 31 + <!-- Preloads --> 32 + {{ for url of (preloads ?? []) }} 33 + <link rel="preload" href="{{ url.href }}" as="{{ url.as }}" type="{{ url.type }}" crossorigin /> 34 + {{ /for }} 35 + 31 36 <!-- Styles --> 32 37 {{ for url of styles }} 33 38 <link rel="stylesheet" href="{{ url }}" />
+11
src/common/facets/loader.js
··· 1 + export function removeLoader() { 2 + const loader = document.querySelector("#diffuse-loader"); 3 + 4 + if (loader) { 5 + loader.classList.add("loaded"); 6 + setTimeout(() => { 7 + loader.remove(); 8 + loader.parentElement?.remove(); 9 + }, 750); 10 + } 11 + }
+8
src/facets/data/export-import/index.html
··· 50 50 } 51 51 52 52 main { 53 + opacity: 0; 53 54 padding: var(--space-md); 55 + pointer-events: none; 56 + transition: opacity 750ms; 57 + 58 + &.has-loaded { 59 + opacity: 1; 60 + pointer-events: auto; 61 + } 54 62 } 55 63 56 64 p {
+4 -1
src/facets/data/export-import/index.inline.js
··· 5 5 // Set doc title 6 6 document.title = "Export & Import | Diffuse"; 7 7 8 + // Doc loader 9 + const main = /** @type {HTMLElement} */ (document.querySelector("main")); 10 + main.classList.add("has-loaded"); 11 + 8 12 // Setup 9 13 const output = await foundation.orchestrator.output(); 10 14 ··· 151 155 showStatus(`Import failed: ${/** @type {Error} */ (err).message}`, "error"); 152 156 } 153 157 }; 154 -
+12 -2
src/facets/data/process-tracks/index.html
··· 1 - <div id="container"> 1 + <main> 2 2 <div class="window" style="height: auto"> 3 3 <div class="title-bar"> 4 4 <div class="title-bar-icon"> ··· 13 13 <div id="placeholder"></div> 14 14 </div> 15 15 </div> 16 - </div> 16 + </main> 17 17 18 18 <style> 19 19 @import "./styles/variables.css"; ··· 23 23 @import "./vendor/98.css"; 24 24 @import "./themes/winamp/98-vars.css"; 25 25 @import "./themes/winamp/98-extra.css"; 26 + 27 + main { 28 + opacity: 0; 29 + pointer-events: none; 30 + 31 + &.has-loaded { 32 + opacity: 1; 33 + pointer-events: auto; 34 + } 35 + } 26 36 </style> 27 37 28 38 <script type="module" src="facets/data/process-tracks/index.inline.js"></script>
+3
src/facets/data/process-tracks/index.inline.js
··· 3 3 import { effect } from "~/common/signal.js"; 4 4 import foundation from "~/common/foundation.js"; 5 5 6 + const main = /** @type {HTMLElement} */ (document.querySelector("main")); 7 + main.classList.add("has-loaded"); 8 + 6 9 const orchestrator = await foundation.orchestrator.processTracks({ 7 10 disableWhenReady: true, 8 11 });
+8
src/facets/data/v3-import/index.html
··· 40 40 } 41 41 42 42 main { 43 + opacity: 0; 43 44 padding: var(--space-md); 45 + pointer-events: none; 46 + transition: opacity 750ms; 47 + 48 + &.has-loaded { 49 + opacity: 1; 50 + pointer-events: auto; 51 + } 44 52 } 45 53 46 54 p {
+3
src/facets/data/v3-import/index.inline.js
··· 3 3 4 4 document.title = "V3.x Import | Diffuse"; 5 5 6 + const main = /** @type {HTMLElement} */ (document.querySelector("main")); 7 + main.classList.add("has-loaded"); 8 + 6 9 /** 7 10 * @import {PlaylistItem, Track} from "~/definitions/types.d.ts" 8 11 */
+8
src/facets/playback/auto-queue/index.html
··· 56 56 } 57 57 58 58 main { 59 + opacity: 0; 59 60 padding: var(--space-md); 61 + pointer-events: none; 62 + transition: opacity 750ms; 63 + 64 + &.has-loaded { 65 + opacity: 1; 66 + pointer-events: auto; 67 + } 60 68 } 61 69 62 70 label {
+5 -1
src/facets/playback/auto-queue/index.inline.js
··· 2 2 import { effect } from "~/common/signal.js"; 3 3 import * as Playlist from "~/common/playlist.js"; 4 4 5 + const ACTIVE_CLASS = "button--active"; 6 + 5 7 // Set doc title 6 8 document.title = "Automatic Queue | Diffuse"; 7 9 8 - const ACTIVE_CLASS = "button--active"; 10 + // Doc load 11 + const main = /** @type {HTMLElement} */ (document.querySelector("main")); 12 + main.classList.add("has-loaded"); 9 13 10 14 // Setup 11 15 await foundation.orchestrator.autoQueue();
+4 -6
src/l/index.js
··· 3 3 import * as Output from "~/common/output.js"; 4 4 import { createLoader, renderError } from "~/common/loader.js"; 5 5 import { insertPreludes } from "~/common/facets/prelude.js"; 6 + import { removeLoader } from "~/common/facets/loader.js"; 6 7 7 8 // Output element 8 9 const output = await foundation.orchestrator.output(); ··· 36 37 } 37 38 } 38 39 39 - // Remove loading animation 40 - container.innerHTML = ""; 40 + await insertPreludes(facets, document.body); 41 41 42 - // Execute all the prelude facets 43 - await insertPreludes(facets, container); 44 - 45 - // Execute main facet 46 42 const range = document.createRange(); 47 43 range.selectNode(container); 48 44 const documentFragment = range.createContextualFragment(facet.html ?? ""); 49 45 container.append(documentFragment); 46 + 47 + removeLoader(); 50 48 }, 51 49 });
+1 -2
src/l/index.vto
··· 3 3 base: ../ 4 4 5 5 styles: 6 - - vendor/@phosphor-icons/web/fill/style.css 7 6 - styles/diffuse/colors.css 8 7 - styles/variables.css 9 8 - styles/animations.css ··· 16 15 <div id="container"> 17 16 <div class="diffuse"> 18 17 <div id="diffuse-loader" class="flex"> 19 - <i class="ph-fill ph-music-notes animate-bounce"></i> 18 + <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256" class="animate-bounce"><path d="M212.92,17.71a7.89,7.89,0,0,0-6.86-1.46l-128,32A8,8,0,0,0,72,56V166.1A36,36,0,1,0,88,196V102.25l112-28V134.1A36,36,0,1,0,216,164V24A8,8,0,0,0,212.92,17.71Z"></path></svg> 20 19 </div> 21 20 </div> 22 21 </div>
+11
src/styles/loader.css
··· 9 9 font-size: var(--fs-base); 10 10 font-weight: 500; 11 11 left: 50%; 12 + pointer-events: none; 12 13 position: absolute; 13 14 top: 50%; 14 15 transform: translate(-50%, -50%); ··· 25 26 font-size: var(--fs-md); 26 27 letter-spacing: var(--leading-loose); 27 28 text-transform: uppercase; 29 + transition: opacity 500ms ease; 30 + 31 + &.loaded { 32 + opacity: 0; 33 + } 34 + 35 + svg { 36 + height: var(--fs-md); 37 + width: var(--fs-md); 38 + } 28 39 } 29 40 }
+10
src/themes/winamp/browser/facet/index.html
··· 17 17 @import "./themes/winamp/fonts.css"; 18 18 @import "./themes/winamp/facet.css"; 19 19 @import "./vendor/98.css"; 20 + 21 + .window { 22 + opacity: 0; 23 + pointer-events: none; 24 + 25 + &.has-loaded { 26 + opacity: 1; 27 + pointer-events: auto; 28 + } 29 + } 20 30 </style> 21 31 22 32 <script type="module" src="themes/winamp/browser/facet/index.inline.js"></script>
+4
src/themes/winamp/browser/facet/index.inline.js
··· 4 4 // Set doc title 5 5 document.title = "Browser | Winamp | Diffuse"; 6 6 7 + // Doc loader 8 + const window = /** @type {HTMLElement} */ (document.querySelector(".window")); 9 + window.classList.add("has-loaded"); 10 + 7 11 const [out, que, scp, trc] = await Promise.all([ 8 12 foundation.orchestrator.output(), 9 13 foundation.engine.queue(),