From a937cfd8cbd303459a2808235bb58046befcc621 Mon Sep 17 00:00:00 2001 From: Steven Vandevelde Date: Tue, 14 Apr 2026 11:14:49 +0200 Subject: [PATCH] feat: add-source and process buttons on sources facet --- src/_data/facets.json | 2 -- src/common/facets/constants.js | 1 + src/facets/data/sources/index.html | 14 ++++++++++++- src/facets/data/sources/index.inline.js | 27 ++++++++++++++++++++++++- src/guide.vto | 2 +- src/styles/diffuse/facet.css | 23 +++++++++++++++++++-- 6 files changed, 62 insertions(+), 7 deletions(-) diff --git a/src/_data/facets.json b/src/_data/facets.json index e1bf1e5c..0affd709 100644 --- a/src/_data/facets.json +++ b/src/_data/facets.json @@ -11,7 +11,6 @@ "url": "facets/playback/auto-queue/index.html", "title": "Automatic Queue", "category": "Playback", - "featured": true, "desc": "Automatically put tracks into the queue when this interface is opened. Also allows for controlling shuffle, repeat, search, sorting and playlist selection." }, { @@ -155,7 +154,6 @@ "url": "facets/data/process-tracks/index.html", "title": "Process Tracks", "category": "Data", - "featured": true, "desc": "Process all your audio sources into tracks. Shows a progress bar when processing is occuring." }, { diff --git a/src/common/facets/constants.js b/src/common/facets/constants.js index e2d4509b..f44c4dec 100644 --- a/src/common/facets/constants.js +++ b/src/common/facets/constants.js @@ -15,6 +15,7 @@ export const STARTING_SET_DISABLED = [ export const STARTING_SET_URIS = [ // INTERACTIVE "facets/connect/index.html", + "facets/data/sources/index.html", "themes/blur/artwork-controller/facet/index.html", // PRELUDES diff --git a/src/facets/data/sources/index.html b/src/facets/data/sources/index.html index 4db802c4..b36bf43f 100644 --- a/src/facets/data/sources/index.html +++ b/src/facets/data/sources/index.html @@ -76,7 +76,19 @@

Sources

- An overview of all audio inputs. Disable a source to hide its tracks without removing them. + An overview of all your audio inputs. Remember that these need to be processed into tracks + before they become useful. This should happen automatically when you have that feature enabled + (on by default), otherwise click the button below. +

+

+ + + Add a source + +

diff --git a/src/facets/data/sources/index.inline.js b/src/facets/data/sources/index.inline.js index 48e092a9..0f332bd5 100644 --- a/src/facets/data/sources/index.inline.js +++ b/src/facets/data/sources/index.inline.js @@ -27,11 +27,12 @@ foundation.setup({ title: "Sources | Diffuse" }); // SETUP //////////////////////////////////////////// -const [inputConfigurator, sourcesOrchestrator, outputOrchestrator] = +const [inputConfigurator, sourcesOrchestrator, outputOrchestrator, processOrchestrator] = await Promise.all([ foundation.configurator.input(), foundation.orchestrator.sources(), foundation.orchestrator.output(), + foundation.orchestrator.processTracks({ disableWhenReady: true }), ]); await Promise.all([ @@ -41,6 +42,30 @@ await Promise.all([ ]); +//////////////////////////////////////////// +// PROCESS BUTTON +//////////////////////////////////////////// + +const processBtn = /** @type {HTMLButtonElement} */ (document.querySelector("#process-btn")); +const processIcon = /** @type {HTMLElement} */ (document.querySelector("#process-icon")); +const processLabel = /** @type {HTMLElement} */ (document.querySelector("#process-label")); + +effect(() => { + const isProcessing = processOrchestrator.isProcessing(); + + processBtn.disabled = isProcessing; + processIcon.className = isProcessing + ? "ph-fill ph-arrows-clockwise animate-spin" + : "ph-fill ph-arrows-clockwise"; + processLabel.textContent = isProcessing ? "Processing" : "Process"; +}); + +processBtn.addEventListener("click", async () => { + const output = await foundation.orchestrator.output(); + await Output.data(output.tracks); + await processOrchestrator.process(); +}); + //////////////////////////////////////////// // UI //////////////////////////////////////////// diff --git a/src/guide.vto b/src/guide.vto index 80ee6832..6a4c20b5 100644 --- a/src/guide.vto +++ b/src/guide.vto @@ -105,7 +105,7 @@ title: Guide | Diffuse
  • - + Wait until processed diff --git a/src/styles/diffuse/facet.css b/src/styles/diffuse/facet.css index 80677ba4..b7765dff 100644 --- a/src/styles/diffuse/facet.css +++ b/src/styles/diffuse/facet.css @@ -7,7 +7,6 @@ main { padding: var(--space-2xl) var(--space-xl); @media (min-width: 48rem) { - align-items: center; display: flex; flex-direction: row; gap: var(--space-2xl); @@ -16,6 +15,12 @@ main { } } +ul, +ol, +p { + text-wrap: balance; +} + .facet__left { container-type: inline-size; flex: 1; @@ -23,7 +28,12 @@ main { max-width: 24rem; @media (min-width: 48rem) { + align-self: stretch; + display: flex; + flex-direction: column; + justify-content: center; margin-bottom: 0; + max-height: calc(100vh - 2 * var(--space-2xl)); } p:last-child { @@ -35,6 +45,12 @@ main { flex: 1; max-width: 24rem; + @media (min-width: 48rem) { + display: flex; + flex-direction: column; + justify-content: center; + } + p:first-child { margin-top: 0; } @@ -122,7 +138,8 @@ h1 { opacity: 1; } -button { +button, +.button { align-items: center; background: var(--form-color); border: 1px solid var(--border-color); @@ -134,6 +151,7 @@ button { font-size: var(--fs-sm); gap: var(--space-2xs); padding: var(--space-2xs) var(--space-sm); + text-decoration: none; transition-duration: 250ms; transition-property: opacity; @@ -142,6 +160,7 @@ button { opacity: 0.4; } + &.button--accent, &.button--brand { background: var(--accent); border-color: transparent; -- 2.51.2