From 6fc34dcd3531f577044115ddde2b4245de4d2f7e Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Fri, 18 Jul 2025 18:53:23 +0200
Subject: [PATCH] fix: s3 issue and add demo page

---
 src/pages/demo/s3-tracks/index.astro | 59 ++++++++++++++++++++++++++++
 src/pages/index.astro                | 12 ++++++
 src/pages/input/s3/_applet.astro     | 16 ++++++--
 src/scripts/input/s3/worker.ts       |  2 +-
 4 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/demo/s3-tracks/index.astro

diff --git a/src/pages/demo/s3-tracks/index.astro b/src/pages/demo/s3-tracks/index.astro
new file mode 100644
index 0000000..cc35343
--- /dev/null
+++ b/src/pages/demo/s3-tracks/index.astro
@@ -0,0 +1,59 @@
+---
+import Page from "../../../layouts/page.astro";
+import "@styles/pico.scss";
+---
+
+<Page title="Diffuse">
+  <main class="container">
+    <h1>Add sample S3 bucket to inputs</h1>
+
+    <p>
+      Clicking the button below will add some sample music, which you can then play using the
+      various <a href="/#themes" target="_blank">themes, abstractions and constituents</a>.
+
+      <br />
+      <br />
+
+      <button>Add sample content</button>
+    </p>
+  </main>
+
+  <style is:global>
+    iframe {
+      display: none;
+    }
+  </style>
+
+  <script>
+    import { applet } from "@scripts/applet/common";
+    import type { Bucket } from "@scripts/input/s3/types";
+
+    document.querySelector("button")?.addEventListener("click", clickHandler);
+
+    async function clickHandler() {
+      const p = document.body.querySelector("p");
+      const s3 = await applet("/input/s3");
+
+      // Credentials are read-only, no worries.
+      const bucket: Bucket = {
+        accessKey: "AKIA6OQ3EVMAXVCDQH6B",
+        bucketName: "ongaku-ryoho-demo",
+        host: "s3.amazonaws.com",
+        path: "/",
+        region: "us-east-1",
+        secretKey: "gHOBGGG55iw4kDCn7cZTIa5SP4YZzDFDsBqBab82",
+      };
+
+      await s3.sendAction("mount", bucket, { timeoutDuration: 60000 });
+
+      // Finished
+      if (p)
+        p.innerHTML = `
+          Content added! Try it out using the <a href="/constituent/blur/artwork-controller/" target="_blank">blur artwork controller</a> or any other <a href="/#themes" target="_blank">theme, abstraction or constituent</a>.
+        `;
+
+      // Additionally process inputs automatically
+      applet("/orchestrator/process-tracks");
+    }
+  </script>
+</Page>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ca8c63b..f8c0cd4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -65,6 +65,9 @@ const processors = [
   { url: "processor/metadata/", title: "Metadata retrieval" },
   { url: "processor/search/", title: "Search" },
 ];
+
+// Demos
+const demos = [{ url: "demo/s3-tracks/", title: "Add sample S3 music" }];
 ---
 
 <Page title="Diffuse">
@@ -201,6 +204,15 @@ const processors = [
       </div>
     </section>
 
+    <!-- DEMOS -->
+    <section>
+      <h2 id="demos">Demos</h2>
+
+      <p>Just some utility web pages to help demo the system.</p>
+
+      <List items={demos} />
+    </section>
+
     <!-- BUILD YOUR OWN -->
     <section>
       <h2 id="yours">Build your own</h2>
diff --git a/src/pages/input/s3/_applet.astro b/src/pages/input/s3/_applet.astro
index 09fa864..a2755bd 100644
--- a/src/pages/input/s3/_applet.astro
+++ b/src/pages/input/s3/_applet.astro
@@ -37,11 +37,13 @@
 </style>
 
 <script>
-  import type { Tasks } from "@scripts/input/s3/worker";
   import type { Track } from "@applets/core/types.d.ts";
+  import type { Tasks } from "@scripts/input/s3/worker";
+  import type { Bucket } from "@scripts/input/s3/types";
   import { register } from "@scripts/applet/common";
-  import { endpoint, inIframe, SharedWorker, transfer } from "@scripts/common";
+  import { endpoint, inIframe, transfer } from "@scripts/common";
   import manifest from "./_manifest.json";
+  import { bucketId, loadBuckets, saveBuckets } from "@scripts/input/s3/common";
 
   ////////////////////////////////////////////
   // SETUP
@@ -80,7 +82,15 @@
     return await worker.resolve(args);
   };
 
-  const mount = async () => {};
+  const mount = async (bucket: Bucket) => {
+    // NOTE: This may, or may not, be a good idea.
+    const buckets = await loadBuckets();
+    const id = bucketId(bucket);
+
+    if (!buckets[id]) {
+      await saveBuckets({ ...buckets, [bucketId(bucket)]: bucket });
+    }
+  };
 
   const unmount = async () => {};
 
diff --git a/src/scripts/input/s3/worker.ts b/src/scripts/input/s3/worker.ts
index a8d0cc4..6b2fd7e 100644
--- a/src/scripts/input/s3/worker.ts
+++ b/src/scripts/input/s3/worker.ts
@@ -96,7 +96,7 @@ async function list(cachedTracks: Track[] = []) {
     return list
       .filter((l) => isAudioFile(l.key))
       .map((l) => {
-        const cachedTrack = cache[bid][l.key];
+        const cachedTrack = cache[bid]?.[l.key];
 
         const id = cachedTrack?.id || crypto.randomUUID();
         const stats = cachedTrack?.stats;
-- 
2.51.2