forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: cross-origin work
+97
-4
+2
-2
src/pages/index.astro
+2
-2
src/pages/index.astro
···
231
231
>That said, there isn't that much local state that needs to be shared cross origin.</strong
232
232
> Much of it is associated with the input applets and that configuration is saved in your chosen
233
233
output applet. So essentially, state partitioning behaves as if the two domains are on different
234
-
devices; so using an output applet to sync data works nicely. It does mean you have to somehow
235
-
configure the same output applet in both contexts.
234
+
devices; so using an output applet to sync data between devices works nicely. It does mean you
235
+
have to somehow configure the same output applet in both contexts.
236
236
</p>
237
237
</section>
238
238
+31
src/pages/test/cross-origin/blur.astro
+31
src/pages/test/cross-origin/blur.astro
···
1
+
---
2
+
import Page from "../../../layouts/page.astro";
3
+
import "@styles/theme/blur/index.css";
4
+
---
5
+
6
+
<Page title="Diffuse">
7
+
<script>
8
+
import { applet } from "@scripts/applet/common";
9
+
10
+
////////////////////////////////////////////
11
+
// 🗂️ Applets
12
+
////////////////////////////////////////////
13
+
const container = document.querySelector("main");
14
+
if (!container) throw new Error("Missing container");
15
+
16
+
const labelA = "Deck A";
17
+
const labelB = "Deck B";
18
+
19
+
const constituent = {
20
+
a: applet("https://applets.diffuse.sh/constituent/blur/artwork-controller", {
21
+
container,
22
+
}),
23
+
b: applet("https://applets.diffuse.sh/constituent/blur/artwork-controller", {
24
+
container,
25
+
groupId: labelB,
26
+
}),
27
+
};
28
+
</script>
29
+
30
+
<main></main>
31
+
</Page>
+15
src/pages/test/cross-origin/output.astro
+15
src/pages/test/cross-origin/output.astro
···
1
+
---
2
+
import Page from "../../../layouts/page.astro";
3
+
---
4
+
5
+
<Page title="Diffuse Configurator | Output">
6
+
<iframe
7
+
src="https://applets.diffuse.sh/configurator/output/?ui=true"
8
+
style="border: 0; display: block; height: 100dvh; width: 100dvw;"></iframe>
9
+
10
+
<style is:global>
11
+
iframe {
12
+
display: none;
13
+
}
14
+
</style>
15
+
</Page>
+4
-1
src/scripts/common.ts
+4
-1
src/scripts/common.ts
···
108
108
}
109
109
110
110
export function inIframe() {
111
-
return window.self !== window.top;
111
+
const url = new URL(self.location.href);
112
+
const ui = url.searchParams.get("ui")?.toLowerCase();
113
+
114
+
return window.self !== window.top && !(ui === "true" || ui === "t");
112
115
}
113
116
114
117
export function initialConnections<C extends Record<string, any>>(ids: string[]) {
+33
-1
src/scripts/configurator/output/signals.ts
+33
-1
src/scripts/configurator/output/signals.ts
···
8
8
stored && METHODS.includes(stored as Method) ? (stored as Method) : DEFAULT_METHOD,
9
9
);
10
10
11
+
// 🚀
12
+
13
+
// storage().then((s) => {
14
+
// const stored = s.getItem(LOCALSTORAGE_KEY);
15
+
// active(stored && METHODS.includes(stored as Method) ? (stored as Method) : DEFAULT_METHOD);
16
+
// });
17
+
18
+
// EFFECT
19
+
11
20
effect(() => {
12
-
localStorage.setItem(LOCALSTORAGE_KEY, active());
21
+
const method = active();
22
+
storage().then((s) => s.setItem(LOCALSTORAGE_KEY, method));
13
23
});
24
+
25
+
async function storage() {
26
+
// const hasStorageAccess =
27
+
// (await document.hasStorageAccess()) ||
28
+
// (
29
+
// await navigator.permissions.query({
30
+
// name: "storage-access",
31
+
// })
32
+
// ).state === "granted";
33
+
34
+
// if (hasStorageAccess) {
35
+
// // @ts-ignore
36
+
// const handle: any = await document.requestStorageAccess({
37
+
// localStorage: true,
38
+
// });
39
+
40
+
// return handle ? handle.localStorage : localStorage;
41
+
// } else {
42
+
// return localStorage;
43
+
// }
44
+
return localStorage;
45
+
}
+12
src/scripts/configurator/output/ui.ts
+12
src/scripts/configurator/output/ui.ts
···
118
118
function clickHandler(method: Method) {
119
119
return async () => {
120
120
const currentlyActive = active();
121
+
122
+
// const permission = await navigator.permissions.query({
123
+
// name: "storage-access",
124
+
// });
125
+
126
+
// if (permission.state === "prompt") {
127
+
// // @ts-ignore
128
+
// await document.requestStorageAccess({
129
+
// localStorage: true,
130
+
// });
131
+
// }
132
+
121
133
if (currentlyActive === method && currentlyActive !== "custom") return;
122
134
if (currentlyActive) unmountStorageMethod(currentlyActive);
123
135
await mountStorageMethod(method);