forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
1import { BroadcastableDiffuseElement, defineElement } from "~/common/element.js";
2import { signal } from "~/common/signal.js";
3
4////////////////////////////////////////////
5// ELEMENT
6////////////////////////////////////////////
7
8class RepeatShuffleEngine extends BroadcastableDiffuseElement {
9 static NAME = "diffuse/engine/repeat-shuffle";
10
11 // SIGNALS
12
13 #repeat = signal(false);
14 #shuffle = signal(false);
15
16 repeat = this.#repeat.get;
17 shuffle = this.#shuffle.get;
18
19 // LIFECYCLE
20
21 /**
22 * @override
23 */
24 connectedCallback() {
25 // Broadcast if needed
26 if (this.hasAttribute("group")) {
27 const actions = this.broadcast(this.identifier, {
28 setRepeat: { strategy: "replicate", fn: this.setRepeat },
29 setShuffle: { strategy: "replicate", fn: this.setShuffle },
30 });
31
32 if (actions) {
33 this.setRepeat = actions.setRepeat;
34 this.setShuffle = actions.setShuffle;
35 }
36 }
37
38 // Super
39 super.connectedCallback();
40
41 // Signals
42 const storagePrefix =
43 `${this.constructor.prototype.constructor.NAME}/${this.group}`;
44
45 this.#repeat.value =
46 localStorage.getItem(`${storagePrefix}/repeat`) === "true" ? true : false;
47 this.#shuffle.value =
48 localStorage.getItem(`${storagePrefix}/shuffle`) === "true"
49 ? true
50 : false;
51
52 // Effects
53 this.effect(() =>
54 localStorage.setItem(
55 `${storagePrefix}/repeat`,
56 this.#repeat.value ? "true" : "false",
57 )
58 );
59
60 this.effect(() =>
61 localStorage.setItem(
62 `${storagePrefix}/shuffle`,
63 this.#shuffle.value ? "true" : "false",
64 )
65 );
66 }
67
68 // ACTIONS
69
70 /** @param {boolean} bool */
71 setRepeat = async (bool) => this.#repeat.value = bool;
72
73 /** @param {boolean} bool */
74 setShuffle = async (bool) => this.#shuffle.value = bool;
75}
76
77export default RepeatShuffleEngine;
78
79////////////////////////////////////////////
80// REGISTER
81////////////////////////////////////////////
82
83export const CLASS = RepeatShuffleEngine;
84export const NAME = "de-repeat-shuffle";
85
86defineElement(NAME, CLASS);