+14

src/common/foundation.js

reviewed

··· 176 176 */ 177 177 setup: ({ title }) => { 178 178 document.title = title; 179 179 + }, 180 180 + 181 181 + /** 182 182 + * Hide the loader and fade in the facet content by adding the `has-loaded` 183 183 + * class to `#container` after two animation frames (so the initial opacity:0 184 184 + * is painted first and the CSS transition actually runs). 185 185 + */ 186 186 + ready: () => { 179 187 config.hideLoader(); 188 188 + 189 189 + requestAnimationFrame(() => { 190 190 + requestAnimationFrame(() => { 191 191 + document.querySelector("#container")?.classList.add("has-loaded"); 192 192 + }); 193 193 + }); 180 194 }, 181 195 }; 182 196

-5

src/facets/connect/atproto/index.html

reviewed

··· 8 8 <main class="wa-theme-default"></main> 9 9 10 10 <script type="module" src="facets/connect/atproto/index.inline.js"></script> 11 11 - 12 12 - <script type="module"> 13 13 - await customElements.whenDefined("wa-card"); 14 14 - document.querySelector("main")?.classList.add("has-loaded"); 15 15 - </script>

+6 -1

src/facets/connect/atproto/index.inline.js

reviewed

··· 204 204 ); 205 205 }); 206 206 } 207 207 - 208 207 //////////////////////////////////////////// 209 208 // ACTIONS 210 209 //////////////////////////////////////////// ··· 257 256 $passkeyError.value = null; 258 257 await atprotoPasskeyEl.removePasskey(); 259 258 } 259 259 + 260 260 + //////////////////////////////////////////// 261 261 + // 🚀 262 262 + //////////////////////////////////////////// 263 263 + 264 264 + foundation.ready();

-8

src/facets/connect/common.css

reviewed

··· 3 3 align-items: center; 4 4 justify-content: center; 5 5 min-height: 100dvh; 6 6 - opacity: 0; 7 6 padding: var(--wa-space-m); 8 8 - pointer-events: none; 9 9 - transition: opacity 750ms; 10 10 - 11 11 - &.has-loaded { 12 12 - opacity: 1; 13 13 - pointer-events: auto; 14 14 - } 15 7 } 16 8 17 9 wa-card {

-5

src/facets/connect/https/index.html

reviewed

··· 8 8 <main class="wa-theme-default"></main> 9 9 10 10 <script type="module" src="facets/connect/https/index.inline.js"></script> 11 11 - 12 12 - <script type="module"> 13 13 - await customElements.whenDefined("wa-card"); 14 14 - document.querySelector("main")?.classList.add("has-loaded"); 15 15 - </script>

+6 -1

src/facets/connect/https/index.inline.js

reviewed

··· 82 82 }), 83 83 ); 84 84 }); 85 85 - 86 85 //////////////////////////////////////////// 87 86 // ACTIONS 88 87 //////////////////////////////////////////// ··· 123 122 }, 124 123 ]); 125 124 } 125 125 + 126 126 + //////////////////////////////////////////// 127 127 + // 🚀 128 128 + //////////////////////////////////////////// 129 129 + 130 130 + foundation.ready();

-5

src/facets/connect/icecast/index.html

reviewed

··· 8 8 <main class="wa-theme-default"></main> 9 9 10 10 <script type="module" src="facets/connect/icecast/index.inline.js"></script> 11 11 - 12 12 - <script type="module"> 13 13 - await customElements.whenDefined("wa-card"); 14 14 - document.querySelector("main")?.classList.add("has-loaded"); 15 15 - </script>

+6 -1

src/facets/connect/icecast/index.inline.js

reviewed

··· 83 83 }), 84 84 ); 85 85 }); 86 86 - 87 86 //////////////////////////////////////////// 88 87 // ACTIONS 89 88 //////////////////////////////////////////// ··· 125 124 }, 126 125 ]); 127 126 } 127 127 + 128 128 + //////////////////////////////////////////// 129 129 + // 🚀 130 130 + //////////////////////////////////////////// 131 131 + 132 132 + foundation.ready();

-5

src/facets/connect/index.html

reviewed

··· 25 25 <main class="wa-theme-default"></main> 26 26 27 27 <script type="module" src="./facets/connect/index.inline.js"></script> 28 28 - 29 29 - <script type="module"> 30 30 - await customElements.whenDefined("wa-card"); 31 31 - document.querySelector("main")?.classList.add("has-loaded"); 32 32 - </script>

+6

src/facets/connect/index.inline.js

reviewed

··· 78 78 `, 79 79 main, 80 80 ); 81 81 + 82 82 + //////////////////////////////////////////// 83 83 + // 🚀 84 84 + //////////////////////////////////////////// 85 85 + 86 86 + foundation.ready();

-5

src/facets/connect/local/index.html

reviewed

··· 8 8 <main class="wa-theme-default"></main> 9 9 10 10 <script type="module" src="facets/connect/local/index.inline.js"></script> 11 11 - 12 12 - <script type="module"> 13 13 - await customElements.whenDefined("wa-card"); 14 14 - document.querySelector("main")?.classList.add("has-loaded"); 15 15 - </script>

+6 -1

src/facets/connect/local/index.inline.js

reviewed

··· 176 176 })), 177 177 ); 178 178 }); 179 179 - 180 179 //////////////////////////////////////////// 181 180 // ACTIONS 182 181 //////////////////////////////////////////// ··· 375 374 readBatch(); 376 375 }); 377 376 } 377 377 + 378 378 + //////////////////////////////////////////// 379 379 + // 🚀 380 380 + //////////////////////////////////////////// 381 381 + 382 382 + foundation.ready();

-5

src/facets/connect/opensubsonic/index.html

reviewed

··· 8 8 <main class="wa-theme-default"></main> 9 9 10 10 <script type="module" src="facets/connect/opensubsonic/index.inline.js"></script> 11 11 - 12 12 - <script type="module"> 13 13 - await customElements.whenDefined("wa-card"); 14 14 - document.querySelector("main")?.classList.add("has-loaded"); 15 15 - </script>

+6 -1

src/facets/connect/opensubsonic/index.inline.js

reviewed

··· 120 120 })), 121 121 ); 122 122 }); 123 123 - 124 123 //////////////////////////////////////////// 125 124 // ACTIONS 126 125 //////////////////////////////////////////// ··· 170 169 }, 171 170 ]); 172 171 } 172 172 + 173 173 + //////////////////////////////////////////// 174 174 + // 🚀 175 175 + //////////////////////////////////////////// 176 176 + 177 177 + foundation.ready();

-5

src/facets/connect/s3/index.html

reviewed

··· 8 8 <main class="wa-theme-default"></main> 9 9 10 10 <script type="module" src="facets/connect/s3/index.inline.js"></script> 11 11 - 12 12 - <script type="module"> 13 13 - await customElements.whenDefined("wa-card"); 14 14 - document.querySelector("main")?.classList.add("has-loaded"); 15 15 - </script>

+6 -1

src/facets/connect/s3/index.inline.js

reviewed

··· 161 161 })), 162 162 ); 163 163 }); 164 164 - 165 164 //////////////////////////////////////////// 166 165 // ACTIONS 167 166 //////////////////////////////////////////// ··· 232 231 await outputOrchestrator.select(OUTPUT_S3_ID); 233 232 } 234 233 } 234 234 + 235 235 + //////////////////////////////////////////// 236 236 + // 🚀 237 237 + //////////////////////////////////////////// 238 238 + 239 239 + foundation.ready();

-8

src/facets/data/export-import/index.html

reviewed

··· 50 50 } 51 51 52 52 main { 53 53 - opacity: 0; 54 53 padding: var(--space-md); 55 55 - pointer-events: none; 56 56 - transition: opacity 750ms; 57 57 - 58 58 - &.has-loaded { 59 59 - opacity: 1; 60 60 - pointer-events: auto; 61 61 - } 62 54 } 63 55 64 56 p {

+7 -5

src/facets/data/export-import/index.inline.js

reviewed

··· 5 5 // Set doc title 6 6 foundation.setup({ title: "Export & Import | Diffuse" }); 7 7 8 8 - // Doc loader 8 8 + // Setup 9 9 const main = /** @type {HTMLElement} */ (document.querySelector("main")); 10 10 - main.classList.add("has-loaded"); 11 11 - 12 12 - // Setup 13 10 const output = await foundation.orchestrator.output(); 14 11 15 12 // Elements ··· 140 137 showStatus(`Import failed: ${/** @type {Error} */ (err).message}`, "error"); 141 138 } 142 139 }; 143 143 - 144 140 // Import facets 145 141 importFacetsBtn.onclick = async () => { 146 142 /** @type {any[]} */ ··· 155 151 showStatus(`Import failed: ${/** @type {Error} */ (err).message}`, "error"); 156 152 } 157 153 }; 154 154 + 155 155 + //////////////////////////////////////////// 156 156 + // 🚀 157 157 + //////////////////////////////////////////// 158 158 + 159 159 + foundation.ready();

-9

src/facets/data/process-tracks/index.html

reviewed

··· 24 24 @import "./themes/winamp/98-vars.css"; 25 25 @import "./themes/winamp/98-extra.css"; 26 26 27 27 - main { 28 28 - opacity: 0; 29 29 - pointer-events: none; 30 30 - 31 31 - &.has-loaded { 32 32 - opacity: 1; 33 33 - pointer-events: auto; 34 34 - } 35 35 - } 36 27 </style> 37 28 38 29 <script type="module" src="facets/data/process-tracks/index.inline.js"></script>

+6 -1

src/facets/data/process-tracks/index.inline.js

reviewed

··· 6 6 foundation.setup({ title: "Process Tracks | Diffuse" }); 7 7 8 8 const main = /** @type {HTMLElement} */ (document.querySelector("main")); 9 9 - main.classList.add("has-loaded"); 10 9 11 10 const orchestrator = await foundation.orchestrator.processTracks({ 12 11 disableWhenReady: true, ··· 76 75 /** @type {HTMLElement} */ (placeholder), 77 76 ); 78 77 }); 78 78 + 79 79 + //////////////////////////////////////////// 80 80 + // 🚀 81 81 + //////////////////////////////////////////// 82 82 + 83 83 + foundation.ready();

-8

src/facets/data/v3-import/index.html

reviewed

··· 40 40 } 41 41 42 42 main { 43 43 - opacity: 0; 44 43 padding: var(--space-md); 45 45 - pointer-events: none; 46 46 - transition: opacity 750ms; 47 47 - 48 48 - &.has-loaded { 49 49 - opacity: 1; 50 50 - pointer-events: auto; 51 51 - } 52 44 } 53 45 54 46 p {

+6 -1

src/facets/data/v3-import/index.inline.js

reviewed

··· 4 4 foundation.setup({ title: "V3.x Import | Diffuse" }); 5 5 6 6 const main = /** @type {HTMLElement} */ (document.querySelector("main")); 7 7 - main.classList.add("has-loaded"); 8 7 9 8 /** 10 9 * @import {PlaylistItem, Track} from "~/definitions/types.d.ts" ··· 164 163 showStatus(`Import failed: ${/** @type {Error} */ (err).message}`, "error"); 165 164 } 166 165 }; 166 166 + 167 167 + //////////////////////////////////////////// 168 168 + // 🚀 169 169 + //////////////////////////////////////////// 170 170 + 171 171 + foundation.ready();

+6

src/facets/examples/generate-playlist/index.inline.js

reviewed

··· 39 39 .onclick = () => { 40 40 generatePlaylist(); 41 41 }; 42 42 + 43 43 + //////////////////////////////////////////// 44 44 + // 🚀 45 45 + //////////////////////////////////////////// 46 46 + 47 47 + foundation.ready();

+6

src/facets/examples/now-playing/index.inline.js

reviewed

··· 35 35 .onclick = () => { 36 36 queue.shift(); 37 37 }; 38 38 + 39 39 + //////////////////////////////////////////// 40 40 + // 🚀 41 41 + //////////////////////////////////////////// 42 42 + 43 43 + foundation.ready();

-15

src/facets/misc/scrobble/last.fm/index.html

reviewed

··· 11 11 margin: 0; 12 12 } 13 13 14 14 - main { 15 15 - opacity: 0; 16 16 - pointer-events: none; 17 17 - transition: opacity 750ms; 18 18 - 19 19 - &.has-loaded { 20 20 - opacity: 1; 21 21 - pointer-events: auto; 22 22 - } 23 23 - } 24 14 25 15 wa-card { 26 16 width: min(360px, calc(100vw - 2rem)); ··· 104 94 </main> 105 95 106 96 <script type="module" src="facets/misc/scrobble/last.fm/index.inline.js"></script> 107 107 - 108 108 - <script type="module"> 109 109 - await customElements.whenDefined("wa-button"); 110 110 - document.querySelector("main")?.classList.add("has-loaded"); 111 111 - </script>

+6

src/facets/misc/scrobble/last.fm/index.inline.js

reviewed

··· 164 164 apiKeyInput.value = ""; 165 165 apiSecretInput.value = ""; 166 166 }; 167 167 + 168 168 + //////////////////////////////////////////// 169 169 + // 🚀 170 170 + //////////////////////////////////////////// 171 171 + 172 172 + foundation.ready();

+6

src/facets/misc/split-view/index.inline.js

reviewed

··· 448 448 // ─── Init ───────────────────────────────────────────────────────────────────── 449 449 450 450 render(); 451 451 + 452 452 + //////////////////////////////////////////// 453 453 + // 🚀 454 454 + //////////////////////////////////////////// 455 455 + 456 456 + foundation.ready();

-8

src/facets/playback/auto-queue/index.html

reviewed

··· 56 56 } 57 57 58 58 main { 59 59 - opacity: 0; 60 59 padding: var(--space-md); 61 61 - pointer-events: none; 62 62 - transition: opacity 750ms; 63 63 - 64 64 - &.has-loaded { 65 65 - opacity: 1; 66 66 - pointer-events: auto; 67 67 - } 68 60 } 69 61 70 62 label {

+7 -4

src/facets/playback/auto-queue/index.inline.js

reviewed

··· 7 7 // Set doc title 8 8 foundation.setup({ title: "Automatic Queue | Diffuse" }); 9 9 10 10 - // Doc load 10 10 + // Setup 11 11 const main = /** @type {HTMLElement} */ (document.querySelector("main")); 12 12 - main.classList.add("has-loaded"); 13 13 - 14 14 - // Setup 15 12 await foundation.orchestrator.autoQueue(); 16 13 17 14 const [repeatShuffle, scope, output] = await Promise.all([ ··· 135 132 const dir = scope.sortDirection() ?? "desc"; 136 133 scope.setSortDirection(dir === "asc" ? "desc" : "asc"); 137 134 }; 135 135 + 136 136 + //////////////////////////////////////////// 137 137 + // 🚀 138 138 + //////////////////////////////////////////// 139 139 + 140 140 + foundation.ready();

+5 -5

src/l/index.vto

reviewed

··· 9 9 - l/index.js 10 10 --- 11 11 12 12 - <div id="container"> 13 13 - <div class="diffuse"> 14 14 - <div id="diffuse-loader" class="flex"> 15 15 - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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> 16 16 - </div> 12 12 + <div class="diffuse"> 13 13 + <div id="diffuse-loader" class="flex"> 14 14 + <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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> 17 15 </div> 18 16 </div> 17 17 + 18 18 + <div id="container"></div>

+9

src/styles/loader.css

reviewed

··· 10 10 color: var(--text-color); 11 11 } 12 12 13 13 + #container { 14 14 + opacity: 0; 15 15 + transition: opacity 750ms; 16 16 + 17 17 + &.has-loaded { 18 18 + opacity: 1; 19 19 + } 20 20 + } 21 21 + 13 22 @scope (.diffuse) { 14 23 :scope { 15 24 color: var(--text-color);

+6

src/themes/blur/artwork-controller/facet/index.inline.js

reviewed

··· 24 24 25 25 // Add to DOM 26 26 (document.querySelector("#container") ?? document.body).append(dac); 27 27 + 28 28 + //////////////////////////////////////////// 29 29 + // 🚀 30 30 + //////////////////////////////////////////// 31 31 + 32 32 + foundation.ready();

-9

src/themes/winamp/browser/facet/index.html

reviewed

··· 18 18 @import "./themes/winamp/facet.css"; 19 19 @import "./vendor/98.css"; 20 20 21 21 - .window { 22 22 - opacity: 0; 23 23 - pointer-events: none; 24 24 - 25 25 - &.has-loaded { 26 26 - opacity: 1; 27 27 - pointer-events: auto; 28 28 - } 29 29 - } 30 21 </style> 31 22 32 23 <script type="module" src="themes/winamp/browser/facet/index.inline.js"></script>

+6 -4

src/themes/winamp/browser/facet/index.inline.js

reviewed

··· 4 4 // Set doc title 5 5 foundation.setup({ title: "Browser | Winamp | Diffuse" }); 6 6 7 7 - // Doc loader 8 8 - const window = /** @type {HTMLElement} */ (document.querySelector(".window")); 9 9 - window.classList.add("has-loaded"); 10 10 - 11 7 const [out, que, scp, trc] = await Promise.all([ 12 8 foundation.orchestrator.output(), 13 9 foundation.engine.queue(), ··· 22 18 el.setAttribute("tracks-selector", trc.selector); 23 19 24 20 document.querySelector("#placeholder")?.replaceWith(el); 21 21 + 22 22 + //////////////////////////////////////////// 23 23 + // 🚀 24 24 + //////////////////////////////////////////// 25 25 + 26 26 + foundation.ready();

-9

src/themes/winamp/facet/index.html

reviewed

··· 7 7 background-size: cover; 8 8 }*/ 9 9 10 10 - main { 11 11 - opacity: 0; 12 12 - pointer-events: none; 13 13 - 14 14 - &.has-loaded { 15 15 - opacity: 1; 16 16 - pointer-events: auto; 17 17 - } 18 18 - } 19 10 </style> 20 11 21 12 <main>

+6 -4

src/themes/winamp/facet/index.inline.js

reviewed

··· 6 6 // Set doc title 7 7 foundation.setup({ title: "Winamp | Diffuse" }); 8 8 9 9 - // Doc loader 10 10 - const main = /** @type {HTMLElement} */ (document.querySelector("main")); 11 11 - main.classList.add("has-loaded"); 12 12 - 13 9 /** 14 10 * @import {OutputElement} from "~/components/output/types.d.ts" 15 11 */ ··· 101 97 if (w instanceof WindowManager) return w; 102 98 return null; 103 99 } 100 100 + 101 101 + //////////////////////////////////////////// 102 102 + // 🚀 103 103 + //////////////////////////////////////////// 104 104 + 105 105 + foundation.ready();