From c1b2fbcd6f0f2a9731552be1bf85dbcd0ba11dbc Mon Sep 17 00:00:00 2001 From: Steven Vandevelde Date: Sun, 30 Nov 2025 18:55:32 +0100 Subject: [PATCH] feat: default constituents config --- src/common/constituents/default.js | 61 +++++++++++++++++++ src/common/constituents/default/config.js | 3 + src/common/element.js | 8 ++- src/components/configurator/input/element.js | 10 ++- src/themes/blur/artwork-controller/element.js | 40 ++++++------ src/themes/blur/artwork-controller/index.vto | 40 +++--------- 6 files changed, 105 insertions(+), 57 deletions(-) create mode 100644 src/common/constituents/default.js create mode 100644 src/common/constituents/default/config.js diff --git a/src/common/constituents/default.js b/src/common/constituents/default.js new file mode 100644 index 00000000..340008d2 --- /dev/null +++ b/src/common/constituents/default.js @@ -0,0 +1,61 @@ +import InputConfigurator from "@components/configurator/input/element.js"; +import Queue from "@components/engine/queue/element.js"; +import OpenSubsonic from "@components/input/opensubsonic/element.js"; +import S3 from "@components/input/s3/element.js"; +import QueueTracksOrchestrator from "@components/orchestrator/queue-tracks/element.js"; +import IndexedDBOutput from "@components/output/polymorphic/indexed-db/element.js"; +import DefaultRefiner from "@components/transformer/output/refiner/default/element.js"; +import JsonStringOutput from "@components/transformer/output/string/json/element.js"; +import { effect } from "../signal.js"; + +export const GROUP = "constituents"; + +/** + * Default config for constituents. + */ +export function config() { + // Input + const openSubsonic = new OpenSubsonic(); + const s3 = new S3(); + + const input = new InputConfigurator(); + input.setAttribute("id", "input"); + input.append(openSubsonic, s3); + + document.body.append(input); + + // Queue + const queue = new Queue(); + queue.setAttribute("group", GROUP); + + document.body.append(queue); + + // Output + const idb = new IndexedDBOutput(); + const json = new JsonStringOutput(); + json.setAttribute("output-selector", idb.localName); + + const refiner = new DefaultRefiner(); + refiner.setAttribute("id", "output"); + refiner.setAttribute("output-selector", json.localName); + + document.body.append(idb, json, refiner); + + // Orchestrators + const oqt = new QueueTracksOrchestrator(); + oqt.setAttribute("group", GROUP); + oqt.setAttribute("input-selector", "#input"); + oqt.setAttribute("output-selector", "#output"); + oqt.setAttribute("queue-engine-selector", queue.localName); + + document.body.append(oqt); + + // Signals & effects + effect(() => { + const trigger = queue.now(); + const _other_trigger = queue.poolHash(); + + queue.fill({ amount: 10, shuffled: true }); + if (!trigger) queue.shift(); + }); +} diff --git a/src/common/constituents/default/config.js b/src/common/constituents/default/config.js new file mode 100644 index 00000000..958794f2 --- /dev/null +++ b/src/common/constituents/default/config.js @@ -0,0 +1,3 @@ +import { config } from "../default.js"; + +config(); diff --git a/src/common/element.js b/src/common/element.js index 5fd4e9c6..5b18c33a 100644 --- a/src/common/element.js +++ b/src/common/element.js @@ -67,8 +67,7 @@ export class DiffuseElement extends HTMLElement { state: "state" in this ? this.state : undefined, }); - const root = this.shadowRoot ? this.shadowRoot : this; - render(tmp, root); + render(tmp, this.root()); } /** */ @@ -76,6 +75,11 @@ export class DiffuseElement extends HTMLElement { return this.#render(); } + /** */ + root() { + return (this.shadowRoot ?? this); + } + // LIFECYCLE connectedCallback() { diff --git a/src/components/configurator/input/element.js b/src/components/configurator/input/element.js index 3623f17d..70fc15d4 100644 --- a/src/components/configurator/input/element.js +++ b/src/components/configurator/input/element.js @@ -42,7 +42,10 @@ class InputConfigurator extends DiffuseElement { */ createWorker() { const worker = super.createWorker(); - this.configureWorker(worker); + + // Wait for child elements to be rendered + setTimeout(() => this.configureWorker(worker), 0); + return worker; } @@ -54,6 +57,9 @@ class InputConfigurator extends DiffuseElement { async configureWorker(worker) { const inputs = await this.inputTunnels(); + // Check if any inputs are present + if (inputs.length === 0) return; + // Configure worker with input ports const args = transfer({ ports: Object.fromEntries(inputs.map((input) => { @@ -67,7 +73,7 @@ class InputConfigurator extends DiffuseElement { } async inputTunnels() { - const inputElements = this.querySelectorAll(":scope > *"); + const inputElements = this.children; const inputs = await Array.from(inputElements).reduce( /** * @param {Promise>} acc diff --git a/src/themes/blur/artwork-controller/element.js b/src/themes/blur/artwork-controller/element.js index cfc82527..88385a83 100644 --- a/src/themes/blur/artwork-controller/element.js +++ b/src/themes/blur/artwork-controller/element.js @@ -11,15 +11,14 @@ import { signal } from "@common/signal.js"; * @import {RenderArg} from "@common/element.d.ts" * @import {Track} from "@definitions/types.d.ts" * @import {InputElement} from "@components/input/types.d.ts" - * @import {OutputElement} from "@components/output/types.d.ts" * @import {Artwork} from "@components/processor/artwork/types.d.ts" */ class ArtworkController extends DiffuseElement { - // constructor() { - // super(); - // this.attachShadow({ mode: "open" }); - // } + constructor() { + super(); + this.attachShadow({ mode: "open" }); + } // SIGNALS @@ -70,14 +69,6 @@ class ArtworkController extends DiffuseElement { debouncedChangeArtwork(queue.now()); }); - this.effect(() => { - const trigger = queue.now(); - const _other_trigger = queue.poolHash(); - - queue.fill({ amount: 10, shuffled: true }); - if (!trigger) queue.shift(); - }); - // Force render when elements are defined // this.effect(() => { @@ -138,7 +129,7 @@ class ArtworkController extends DiffuseElement { // No artwork, fade out existing. if (art.length === 0) { - this.querySelectorAll(":scope .artwork img").forEach((el) => { + this.root().querySelectorAll(".artwork img").forEach((el) => { const element = /** @type {HTMLElement} */ (el); element.style.opacity = "0"; const hash = element.getAttribute("data-hash"); @@ -151,8 +142,8 @@ class ArtworkController extends DiffuseElement { const hash = xxh32r(art[0].bytes).toString(); /** @type {HTMLImageElement | null} */ - const existingArtwork = this.querySelector( - `:scope .artwork img[data-hash="${hash}"]`, + const existingArtwork = this.root().querySelector( + `.artwork img[data-hash="${hash}"]`, ); // If the artwork is the same, stop here. @@ -188,16 +179,16 @@ class ArtworkController extends DiffuseElement { this.#artworkLightMode.value = o > 165; /** @type {HTMLElement | null} */ - const bg = this.querySelector(":scope .controller__background"); + const bg = this.root().querySelector(".controller__background"); if (bg) bg.style.backgroundColor = color.rgba; /** @type {HTMLElement | null} */ - const main = this.querySelector(":scope main"); + const main = this.root().querySelector("main"); if (main) main.style.backgroundColor = color.rgba; img.style.opacity = "1"; - this.querySelectorAll(":scope .artwork img").forEach((el) => { + this.root().querySelectorAll(".artwork img").forEach((el) => { if (el === img) return; const element = /** @type {HTMLElement} */ (el); @@ -207,13 +198,16 @@ class ArtworkController extends DiffuseElement { }; // Insert new artwork - this.querySelector(":scope .artwork")?.appendChild(img); + this.root().querySelector(".artwork")?.appendChild(img); }); this.effect(() => { - // if (artworkLightMode()) { - // controller.classList.add("controller__inner--light-mode"); - // } else controller.classList.remove("controller__inner--light-mode"); + const controller = this.root().querySelector(".controller__inner"); + if (!controller) return; + + if (this.#artworkLightMode.value) { + controller.classList.add("controller__inner--light-mode"); + } else controller.classList.remove("controller__inner--light-mode"); }); } diff --git a/src/themes/blur/artwork-controller/index.vto b/src/themes/blur/artwork-controller/index.vto index beee0f37..c3fd782b 100644 --- a/src/themes/blur/artwork-controller/index.vto +++ b/src/themes/blur/artwork-controller/index.vto @@ -4,37 +4,17 @@ base: ../../../ styles: - ../../../styles/base.css - -scripts: - - element.js --- - - - - - - - - - - - - - @@ -42,14 +22,14 @@ scripts: -- 2.51.2