Experiment to rebuild Diffuse using web applets.
1---
2import Page from "../../../layouts/page.astro";
3import "@styles/pico.scss";
4---
5
6<Page title="Diffuse">
7 <main class="container">
8 <h1>Add sample S3 bucket to inputs</h1>
9
10 <p>
11 Clicking the button below will add some sample music, which you can then play using the
12 various <a href="/#themes" target="_blank">themes, abstractions and constituents</a>.
13
14 <br />
15 <br />
16
17 <button>Add sample content</button>
18 </p>
19 </main>
20
21 <style is:global>
22 iframe {
23 display: none;
24 }
25 </style>
26
27 <script>
28 import { applet } from "@scripts/applet/common";
29 import type { Bucket } from "@scripts/input/s3/types";
30
31 document.querySelector("button")?.addEventListener("click", clickHandler);
32
33 async function clickHandler() {
34 const p = document.body.querySelector("p");
35 const s3 = await applet("/input/s3");
36
37 // Credentials are read-only, no worries.
38 const bucket: Bucket = {
39 accessKey: "AKIA6OQ3EVMAXVCDQH6B",
40 bucketName: "ongaku-ryoho-demo",
41 host: "s3.amazonaws.com",
42 path: "/",
43 region: "us-east-1",
44 secretKey: "gHOBGGG55iw4kDCn7cZTIa5SP4YZzDFDsBqBab82",
45 };
46
47 await s3.sendAction("mount", bucket, { timeoutDuration: 60000 });
48
49 // Finished
50 if (p)
51 p.innerHTML = `
52 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>.
53 `;
54
55 // Additionally process inputs automatically
56 applet("/orchestrator/process-tracks");
57 }
58 </script>
59</Page>