+4

src/_components/nav.vto

reviewed

··· 44 44 Browsing 45 45 </a> 46 46 47 47 + <a href="themes/" class="button {{ colorClass("themes/") }} button--border"> 48 48 + Themes 49 49 + </a> 50 50 + 47 51 <a href="misc/" class="button {{ colorClass("misc/") }} button--border"> 48 52 <span class="with-icon"> 49 53 <i class="ph-fill ph-treasure-chest"></i>

+13 -6

src/_data/facets.json

reviewed

··· 69 69 "desc": "Import data from Diffuse v3." 70 70 }, 71 71 { 72 72 - "url": "themes/webamp/browser/facet/index.html", 73 73 - "title": "Webamp / Browser", 72 72 + "url": "themes/winamp/facet/index.html", 73 73 + "title": "Winamp", 74 74 + "category": "Themes", 75 75 + "featured": true, 76 76 + "desc": "Windows 98 inspired theme that uses the Webamp player in combination with Diffuse." 77 77 + }, 78 78 + { 79 79 + "url": "themes/winamp/browser/facet/index.html", 80 80 + "title": "Winamp / Browser", 74 81 "category": "Browsing", 75 82 "featured": true, 76 83 "desc": "Collection browser and search." 77 84 }, 78 85 { 79 79 - "url": "themes/webamp/configurators/input/facet/index.html", 80 80 - "title": "Webamp / Input Configurator", 86 86 + "url": "themes/winamp/configurators/input/facet/index.html", 87 87 + "title": "Winamp / Input Configurator", 81 88 "category": "Data", 82 89 "featured": true, 83 90 "desc": "Add your audio sources." 84 91 }, 85 92 { 86 86 - "url": "themes/webamp/configurators/output/facet/index.html", 87 87 - "title": "Webamp / Output Configurator", 93 93 + "url": "themes/winamp/configurators/output/facet/index.html", 94 94 + "title": "Winamp / Output Configurator", 88 95 "category": "Data", 89 96 "featured": true, 90 97 "desc": "Manage your data storage."

+1 -1

src/components/orchestrator/process-tracks/worker.js

reviewed

··· 60 60 async (promise, track) => { 61 61 const acc = await promise; 62 62 63 63 - if (track.tags && track.stats) { 63 63 + if ((track.tags && track.stats) || track.kind === "placeholder") { 64 64 processed++; 65 65 $progress.value = { processed, total: tracks.length }; 66 66 return [...acc, track];

src/themes/webamp/98-extra.css src/themes/winamp/98-extra.css

reviewed

src/themes/webamp/98-vars.css src/themes/winamp/98-vars.css

reviewed

+1 -1

src/themes/webamp/browser/element.js src/themes/winamp/browser/element.js

reviewed

··· 290 290 <link rel="stylesheet" href="vendor/98.css" /> 291 291 292 292 <style> 293 293 - @import "./themes/webamp/98-vars.css"; 293 293 + @import "./themes/winamp/98-vars.css"; 294 294 295 295 :host { 296 296 display: flex;

+3 -3

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

reviewed

··· 14 14 </div> 15 15 16 16 <style> 17 17 - @import "./themes/webamp/fonts.css"; 18 18 - @import "./themes/webamp/facet.css"; 17 17 + @import "./themes/winamp/fonts.css"; 18 18 + @import "./themes/winamp/facet.css"; 19 19 @import "./vendor/98.css"; 20 20 </style> 21 21 22 22 - <script type="module" src="themes/webamp/browser/facet/index.inline.js"></script> 22 22 + <script type="module" src="themes/winamp/browser/facet/index.inline.js"></script>

+1 -1

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

reviewed

··· 1 1 import foundation from "~/common/foundation.js"; 2 2 - import BrowserElement from "~/themes/webamp/browser/element.js"; 2 2 + import BrowserElement from "~/themes/winamp/browser/element.js"; 3 3 4 4 const [out, que, scp, trc] = await Promise.all([ 5 5 foundation.orchestrator.output(),

src/themes/webamp/common/ui.js src/themes/winamp/common/ui.js

reviewed

+7 -3

src/themes/webamp/configurators/input/element.js src/themes/winamp/configurators/input/element.js

reviewed

··· 318 318 }; 319 319 320 320 const existingTracksCol = this.$output.value?.tracks.collection(); 321 321 - const existingTracks = existingTracksCol?.state === "loaded" ? existingTracksCol.data : []; 321 321 + const existingTracks = existingTracksCol?.state === "loaded" 322 322 + ? existingTracksCol.data 323 323 + : []; 324 324 + 322 325 await this.$output.value?.tracks.save([...existingTracks, track]); 323 326 324 327 this.$tab.value = "overview"; 328 328 + this.#processSources(); 325 329 } 326 330 327 331 /** ··· 340 344 render({ html }) { 341 345 return html` 342 346 <link rel="stylesheet" href="vendor/98.css" /> 343 343 - <link rel="stylesheet" href="themes/webamp/98-extra.css" /> 347 347 + <link rel="stylesheet" href="themes/winamp/98-extra.css" /> 344 348 345 349 <style> 346 346 - @import "./themes/webamp/98-vars.css"; 350 350 + @import "./themes/winamp/98-vars.css"; 347 351 348 352 .button-row { 349 353 display: inline-flex;

+3 -3

src/themes/webamp/configurators/input/facet/index.html src/themes/winamp/configurators/input/facet/index.html

reviewed

··· 15 15 16 16 <style> 17 17 @import "./styles/variables.css"; 18 18 - @import "./themes/webamp/fonts.css"; 19 19 - @import "./themes/webamp/facet.css"; 18 18 + @import "./themes/winamp/fonts.css"; 19 19 + @import "./themes/winamp/facet.css"; 20 20 @import "./vendor/98.css"; 21 21 </style> 22 22 23 23 - <script type="module" src="themes/webamp/configurators/input/facet/index.inline.js"></script> 23 23 + <script type="module" src="themes/winamp/configurators/input/facet/index.inline.js"></script>

+1 -1

src/themes/webamp/configurators/input/facet/index.inline.js src/themes/winamp/configurators/input/facet/index.inline.js

reviewed

··· 1 1 import foundation from "~/common/foundation.js"; 2 2 - import InputConfigElement from "~/themes/webamp/configurators/input/element.js"; 2 2 + import InputConfigElement from "~/themes/winamp/configurators/input/element.js"; 3 3 4 4 const [inp, out, pro, sou] = await Promise.all([ 5 5 foundation.orchestrator.input(),

+2 -2

src/themes/webamp/configurators/output/element.js src/themes/winamp/configurators/output/element.js

reviewed

··· 283 283 render({ html }) { 284 284 return html` 285 285 <link rel="stylesheet" href="vendor/98.css" /> 286 286 - <link rel="stylesheet" href="themes/webamp/98-extra.css" /> 286 286 + <link rel="stylesheet" href="themes/winamp/98-extra.css" /> 287 287 288 288 <style> 289 289 - @import "./themes/webamp/98-vars.css"; 289 289 + @import "./themes/winamp/98-vars.css"; 290 290 291 291 .button-row { 292 292 display: inline-flex;

+3 -3

src/themes/webamp/configurators/output/facet/index.html src/themes/winamp/configurators/output/facet/index.html

reviewed

··· 15 15 16 16 <style> 17 17 @import "./styles/variables.css"; 18 18 - @import "./themes/webamp/fonts.css"; 19 19 - @import "./themes/webamp/facet.css"; 18 18 + @import "./themes/winamp/fonts.css"; 19 19 + @import "./themes/winamp/facet.css"; 20 20 @import "./vendor/98.css"; 21 21 </style> 22 22 23 23 - <script type="module" src="themes/webamp/configurators/output/facet/index.inline.js"></script> 23 23 + <script type="module" src="themes/winamp/configurators/output/facet/index.inline.js"></script>

+1 -1

src/themes/webamp/configurators/output/facet/index.inline.js src/themes/winamp/configurators/output/facet/index.inline.js

reviewed

··· 1 1 import foundation from "~/common/foundation.js"; 2 2 - import OutputConfigElement from "~/themes/webamp/configurators/output/element.js"; 2 2 + import OutputConfigElement from "~/themes/winamp/configurators/output/element.js"; 3 3 4 4 const out = await foundation.orchestrator.output(); 5 5

src/themes/webamp/facet.css src/themes/winamp/facet.css

reviewed

src/themes/webamp/fonts.css src/themes/winamp/fonts.css

reviewed

src/themes/webamp/index.css src/themes/winamp/index.css

reviewed

+16 -28

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

reviewed

··· 1 1 - import "~/components/engine/scope/element.js"; 2 2 - import "~/components/input/opensubsonic/element.js"; 3 3 - import "~/components/input/s3/element.js"; 4 4 - import "~/components/orchestrator/input/element.js"; 5 5 - import "~/components/orchestrator/output/element.js"; 6 6 - import "~/components/orchestrator/process-tracks/element.js"; 7 7 - import "~/components/orchestrator/sources/element.js"; 8 8 - import "~/components/processor/metadata/element.js"; 9 9 - 10 10 - import * as Input from "~/components/configurator/input/element.js"; 11 11 - import * as Queue from "~/components/engine/queue/element.js"; 12 12 - import * as Search from "~/components/processor/search/element.js"; 13 13 - import * as ScopedTracks from "~/components/orchestrator/scoped-tracks/element.js"; 14 14 - 15 15 - import { component } from "~/common/element.js"; 1 1 + import foundation from "~/common/foundation.js"; 16 2 import { effect, untracked } from "~/common/signal.js"; 17 3 18 18 - import "./browser/element.js"; 19 19 - import "./configurators/input/element.js"; 20 20 - import "./configurators/output/element.js"; 21 21 - import "./window/element.js"; 22 22 - 23 23 - import WindowManager from "./window-manager/element.js"; 24 24 - import WebampElement from "./webamp/element.js"; 4 4 + import WindowManager from "~/themes/winamp/window-manager/element.js"; 5 5 + import WebampElement from "~/themes/winamp/webamp/element.js"; 25 6 26 7 /** 27 8 * @import {OutputElement} from "~/components/output/types.d.ts" 28 9 * @import {Track} from "~/definitions/types.d.ts" 29 10 */ 30 11 31 31 - const input = component(Input); 32 32 - const queue = component(Queue); 33 33 - const search = component(Search); 34 34 - const scopedTracks = component(ScopedTracks); 12 12 + const input = await foundation.orchestrator.input(); 13 13 + const queue = await foundation.engine.queue(); 14 14 + const scopedTracks = await foundation.orchestrator.scopedTracks(); 15 15 + 16 16 + await foundation.orchestrator.sources(); 17 17 + await foundation.orchestrator.processTracks({ disableWhenReady: true }); 18 18 + 19 19 + await import("~/themes/winamp/browser/element.js"); 20 20 + await import("~/themes/winamp/configurators/input/element.js"); 21 21 + await import("~/themes/winamp/configurators/output/element.js"); 22 22 + await import("~/themes/winamp/window/element.js"); 35 23 36 24 /** @type {OutputElement | null} */ 37 25 const output = document.querySelector("#output"); ··· 144 132 const col = output.tracks.collection(); 145 133 if (col.state !== "loaded") return; 146 134 147 147 - const fingerprintSearch = search.supplyFingerprint(); 148 148 - if (fingerprintSearch === undefined) return; 135 135 + // const fingerprintSearch = search.supplyFingerprint(); 136 136 + // if (fingerprintSearch === undefined) return; 149 137 150 138 const fingerprintQueue = queue.supplyFingerprint(); 151 139 if (fingerprintQueue === undefined) return;

-194

src/themes/webamp/index.vto

reviewed

··· 1 1 - --- 2 2 - layout: layouts/diffuse.vto 3 3 - base: ../../ 4 4 - 5 5 - styles: 6 6 - - themes/webamp/fonts.css 7 7 - - themes/webamp/index.css 8 8 - --- 9 9 - 10 10 - <!-- 11 11 - 12 12 - ################################### 13 13 - # UI 14 14 - ################################### 15 15 - 16 16 - --> 17 17 - <main> 18 18 - <!-- 🪟 --> 19 19 - <section class="windows"> 20 20 - <style> 21 21 - dtw-window-manager > * { 22 22 - left: 12px; 23 23 - position: absolute; 24 24 - top: 12px; 25 25 - z-index: 999; 26 26 - 27 27 - /* Waiting on https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-index#browser_compatibility */ 28 28 - &:nth-child(1) { 29 29 - left: 24px; 30 30 - top: 24px; 31 31 - } 32 32 - 33 33 - &:nth-child(2) { 34 34 - left: 36px; 35 35 - top: 36px; 36 36 - } 37 37 - 38 38 - &:nth-child(3) { 39 39 - left: 48px; 40 40 - top: 48px; 41 41 - } 42 42 - 43 43 - &:nth-child(4) { 44 44 - left: 60px; 45 45 - top: 60px; 46 46 - } 47 47 - 48 48 - &:nth-child(5) { 49 49 - left: 72px; 50 50 - top: 72px; 51 51 - } 52 52 - 53 53 - &:nth-child(6) { 54 54 - left: 84px; 55 55 - top: 84px; 56 56 - } 57 57 - 58 58 - &:nth-child(7) { 59 59 - left: 96px; 60 60 - top: 96px; 61 61 - } 62 62 - 63 63 - &:nth-child(8) { 64 64 - left: 108px; 65 65 - top: 108px; 66 66 - } 67 67 - 68 68 - &:nth-child(9) { 69 69 - left: 120px; 70 70 - top: 120px; 71 71 - } 72 72 - } 73 73 - </style> 74 74 - 75 75 - <dtw-window-manager> 76 76 - <!-- INPUT --> 77 77 - <dtw-window id="input-window"> 78 78 - <span slot="title-icon"><img src="images/icons/windows_98/cd_audio_cd_a-0.png" height="14" /></span> 79 79 - <span slot="title">Manage audio inputs</span> 80 80 - 81 81 - <dtw-input-config 82 82 - input-selector="#input" 83 83 - output-selector="#output" 84 84 - sources-orchestrator-selector="do-sources" 85 85 - process-tracks-orchestrator-selector="do-process-tracks" 86 86 - ></dtw-input-config> 87 87 - </dtw-window> 88 88 - 89 89 - <!-- OUTPUT --> 90 90 - <dtw-window id="output-window"> 91 91 - <span slot="title-icon"><img src="images/icons/windows_98/computer_user_pencil-0.png" height="14" /></span> 92 92 - <span slot="title">Manage user data</span> 93 93 - 94 94 - <dtw-output-config 95 95 - output-selector="#output" 96 96 - ></dtw-output-config> 97 97 - </dtw-window> 98 98 - 99 99 - <!-- BROWSER --> 100 100 - <dtw-window id="browser-window" window-style="height: 380px; width: 560px;"> 101 101 - <span slot="title-icon"><img src="images/icons/windows_98/directory_explorer-4.png" height="14" /></span> 102 102 - <span slot="title">Browse collection</span> 103 103 - 104 104 - <dtw-browser 105 105 - output-selector="#output" 106 106 - queue-engine-selector="de-queue" 107 107 - scope-engine-selector="de-scope" 108 108 - tracks-selector="do-scoped-tracks" 109 109 - ></dtw-browser> 110 110 - </dtw-window> 111 111 - </dtw-window-manager> 112 112 - </section> 113 113 - 114 114 - <!-- 🛋️ --> 115 115 - <section class="desktop"> 116 116 - <!-- WINAMP --> 117 117 - <a class="button desktop__item" id="desktop-winamp"> 118 118 - <img src="images/icons/windows_98/winamp2-32x32.png" height="32" /> 119 119 - <label>Winamp</label> 120 120 - </a> 121 121 - 122 122 - <!-- INPUT --> 123 123 - <a class="button desktop__item"> 124 124 - <img src="images/icons/windows_98/cd_audio_cd_a-4.png" height="32" /> 125 125 - <label for="input-window">Manage audio inputs</label> 126 126 - </a> 127 127 - 128 128 - <!-- OUTPUT --> 129 129 - <a class="button desktop__item"> 130 130 - <img src="images/icons/windows_98/computer_user_pencil-0.png" height="32" /> 131 131 - <label for="output-window">Manage user data</label> 132 132 - </a> 133 133 - 134 134 - <!-- BROWSE --> 135 135 - <a class="button desktop__item"> 136 136 - <img src="images/icons/windows_98/directory_explorer-5.png" height="32" /> 137 137 - <label for="browser-window">Browse collection</label> 138 138 - </a> 139 139 - 140 140 - <!-- INSERT --> 141 141 - <a class="button desktop__item" id="desktop-batch"> 142 142 - <img src="images/icons/windows_98/multimedia-4.png" height="32" /> 143 143 - <label>Add shuffled batch</label> 144 144 - </a> 145 145 - </section> 146 146 - 147 147 - <!-- ⚡️ --> 148 148 - <dtw-webamp></dtw-webamp> 149 149 - </main> 150 150 - 151 151 - <!-- 152 152 - 153 153 - ################################### 154 154 - # COMPONENTS 155 155 - ################################### 156 156 - 157 157 - --> 158 158 - <de-queue></de-queue> 159 159 - <de-scope></de-scope> 160 160 - 161 161 - <!-- Processors --> 162 162 - <dp-metadata></dp-metadata> 163 163 - <dp-search></dp-search> 164 164 - 165 165 - <!-- Orchestrators --> 166 166 - <do-input id="input"></do-input> 167 167 - <do-output id="output"></do-output> 168 168 - 169 169 - <do-process-tracks 170 170 - input-selector="#input" 171 171 - metadata-processor-selector="dp-metadata" 172 172 - output-selector="#output" 173 173 - 174 174 - process-when-ready 175 175 - ></do-process-tracks> 176 176 - 177 177 - <do-scoped-tracks 178 178 - input-selector="#input" 179 179 - output-selector="#output" 180 180 - scope-engine-selector="de-scope" 181 181 - search-processor-selector="dp-search" 182 182 - ></do-scoped-tracks> 183 183 - 184 184 - <do-sources 185 185 - input-selector="#input" 186 186 - output-selector="#output" 187 187 - ></do-sources> 188 188 - 189 189 - <!-- 190 190 - 191 191 - SCRIPTS 192 192 - 193 193 - --> 194 194 - <script src="themes/webamp/index.js" type="module"></script>

src/themes/webamp/webamp/element.js src/themes/winamp/webamp/element.js

reviewed

src/themes/webamp/window-manager/element.js src/themes/winamp/window-manager/element.js

reviewed

src/themes/webamp/window/element.js src/themes/winamp/window/element.js

reviewed

+142

src/themes/winamp/facet/index.html

reviewed

··· 1 1 + <link rel="stylesheet" href="themes/winamp/fonts.css" /> 2 2 + <link rel="stylesheet" href="themes/winamp/index.css" /> 3 3 + 4 4 + <main> 5 5 + <!-- 🪟 --> 6 6 + <section class="windows"> 7 7 + <style> 8 8 + dtw-window-manager > * { 9 9 + left: 12px; 10 10 + position: absolute; 11 11 + top: 12px; 12 12 + z-index: 999; 13 13 + 14 14 + /* Waiting on https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-index#browser_compatibility */ 15 15 + &:nth-child(1) { 16 16 + left: 24px; 17 17 + top: 24px; 18 18 + } 19 19 + 20 20 + &:nth-child(2) { 21 21 + left: 36px; 22 22 + top: 36px; 23 23 + } 24 24 + 25 25 + &:nth-child(3) { 26 26 + left: 48px; 27 27 + top: 48px; 28 28 + } 29 29 + 30 30 + &:nth-child(4) { 31 31 + left: 60px; 32 32 + top: 60px; 33 33 + } 34 34 + 35 35 + &:nth-child(5) { 36 36 + left: 72px; 37 37 + top: 72px; 38 38 + } 39 39 + 40 40 + &:nth-child(6) { 41 41 + left: 84px; 42 42 + top: 84px; 43 43 + } 44 44 + 45 45 + &:nth-child(7) { 46 46 + left: 96px; 47 47 + top: 96px; 48 48 + } 49 49 + 50 50 + &:nth-child(8) { 51 51 + left: 108px; 52 52 + top: 108px; 53 53 + } 54 54 + 55 55 + &:nth-child(9) { 56 56 + left: 120px; 57 57 + top: 120px; 58 58 + } 59 59 + } 60 60 + </style> 61 61 + 62 62 + <dtw-window-manager> 63 63 + <!-- INPUT --> 64 64 + <dtw-window id="input-window"> 65 65 + <span slot="title-icon" 66 66 + ><img src="images/icons/windows_98/cd_audio_cd_a-0.png" height="14" 67 67 + /></span> 68 68 + <span slot="title">Manage audio inputs</span> 69 69 + 70 70 + <dtw-input-config 71 71 + input-selector="#input" 72 72 + output-selector="#output" 73 73 + sources-orchestrator-selector="do-sources" 74 74 + process-tracks-orchestrator-selector="do-process-tracks" 75 75 + ></dtw-input-config> 76 76 + </dtw-window> 77 77 + 78 78 + <!-- OUTPUT --> 79 79 + <dtw-window id="output-window"> 80 80 + <span slot="title-icon" 81 81 + ><img src="images/icons/windows_98/computer_user_pencil-0.png" height="14" 82 82 + /></span> 83 83 + <span slot="title">Manage user data</span> 84 84 + 85 85 + <dtw-output-config output-selector="#output"></dtw-output-config> 86 86 + </dtw-window> 87 87 + 88 88 + <!-- BROWSER --> 89 89 + <dtw-window id="browser-window" window-style="height: 380px; width: 560px;"> 90 90 + <span slot="title-icon" 91 91 + ><img src="images/icons/windows_98/directory_explorer-4.png" height="14" 92 92 + /></span> 93 93 + <span slot="title">Browse collection</span> 94 94 + 95 95 + <dtw-browser 96 96 + output-selector="#output" 97 97 + queue-engine-selector="de-queue" 98 98 + scope-engine-selector="de-scope" 99 99 + tracks-selector="do-scoped-tracks" 100 100 + ></dtw-browser> 101 101 + </dtw-window> 102 102 + </dtw-window-manager> 103 103 + </section> 104 104 + 105 105 + <!-- 🛋️ --> 106 106 + <section class="desktop"> 107 107 + <!-- WINAMP --> 108 108 + <a class="button desktop__item" id="desktop-winamp"> 109 109 + <img src="images/icons/windows_98/winamp2-32x32.png" height="32" /> 110 110 + <label>Winamp</label> 111 111 + </a> 112 112 + 113 113 + <!-- INPUT --> 114 114 + <a class="button desktop__item"> 115 115 + <img src="images/icons/windows_98/cd_audio_cd_a-4.png" height="32" /> 116 116 + <label for="input-window">Manage audio inputs</label> 117 117 + </a> 118 118 + 119 119 + <!-- OUTPUT --> 120 120 + <a class="button desktop__item"> 121 121 + <img src="images/icons/windows_98/computer_user_pencil-0.png" height="32" /> 122 122 + <label for="output-window">Manage user data</label> 123 123 + </a> 124 124 + 125 125 + <!-- BROWSE --> 126 126 + <a class="button desktop__item"> 127 127 + <img src="images/icons/windows_98/directory_explorer-5.png" height="32" /> 128 128 + <label for="browser-window">Browse collection</label> 129 129 + </a> 130 130 + 131 131 + <!-- INSERT --> 132 132 + <a class="button desktop__item" id="desktop-batch"> 133 133 + <img src="images/icons/windows_98/multimedia-4.png" height="32" /> 134 134 + <label>Add shuffled batch</label> 135 135 + </a> 136 136 + </section> 137 137 + 138 138 + <!-- ⚡️ --> 139 139 + <dtw-webamp></dtw-webamp> 140 140 + </main> 141 141 + 142 142 + <script type="module" src="themes/winamp/facet/index.inline.js"></script>