A music player that connects to your cloud/distributed storage.
feat: more scopes
+34
+34
src/components/engine/scope/element.js
+34
src/components/engine/scope/element.js
···
10
10
11
11
// SIGNALS
12
12
13
+
#groupBy = signal(/** @type {string | undefined} */ (undefined));
13
14
#playlist = signal(/** @type {string | undefined} */ (undefined));
14
15
#searchTerm = signal(/** @type {string | undefined} */ (undefined));
15
16
#sortBy = signal(/** @type {string[]} */ ([]));
17
+
#sortDirection = signal(/** @type {string | undefined} */ (undefined));
16
18
19
+
groupBy = this.#groupBy.get;
17
20
playlist = this.#playlist.get;
18
21
searchTerm = this.#searchTerm.get;
19
22
sortBy = this.#sortBy.get;
23
+
sortDirection = this.#sortDirection.get;
20
24
21
25
// LIFECYCLE
22
26
···
27
31
// Broadcast if needed
28
32
if (this.hasAttribute("group")) {
29
33
const actions = this.broadcast(this.identifier, {
34
+
setGroupBy: { strategy: "replicate", fn: this.setGroupBy },
30
35
setPlaylist: { strategy: "replicate", fn: this.setPlaylist },
31
36
setSearchTerm: { strategy: "replicate", fn: this.setSearchTerm },
32
37
setSortBy: { strategy: "replicate", fn: this.setSortBy },
38
+
setSortDirection: { strategy: "replicate", fn: this.setSortDirection },
33
39
});
34
40
35
41
if (actions) {
42
+
this.setGroupBy = actions.setGroupBy;
36
43
this.setPlaylist = actions.setPlaylist;
37
44
this.setSearchTerm = actions.setSearchTerm;
38
45
this.setSortBy = actions.setSortBy;
46
+
this.setSortDirection = actions.setSortDirection;
39
47
}
40
48
}
41
49
···
46
54
const storagePrefix =
47
55
`${this.constructor.prototype.constructor.NAME}/${this.group}`;
48
56
57
+
this.#groupBy.value =
58
+
localStorage.getItem(`${storagePrefix}/groupBy`) ?? undefined;
49
59
this.#playlist.value =
50
60
localStorage.getItem(`${storagePrefix}/playlistId`) ?? undefined;
51
61
this.#searchTerm.value =
···
53
63
this.#sortBy.value = JSON.parse(
54
64
localStorage.getItem(`${storagePrefix}/sortBy`) ?? "[]",
55
65
);
66
+
this.#sortDirection.value =
67
+
localStorage.getItem(`${storagePrefix}/sortDirection`) ?? undefined;
56
68
57
69
// Effects
58
70
this.effect(() => {
71
+
const key = `${storagePrefix}/groupBy`;
72
+
const val = this.#groupBy.value;
73
+
74
+
if (val) localStorage.setItem(key, val);
75
+
else localStorage.removeItem(key);
76
+
});
77
+
78
+
this.effect(() => {
59
79
const key = `${storagePrefix}/playlistId`;
60
80
const val = this.#playlist.value;
61
81
···
78
98
if (val.length) localStorage.setItem(key, JSON.stringify(val));
79
99
else localStorage.removeItem(key);
80
100
});
101
+
102
+
this.effect(() => {
103
+
const key = `${storagePrefix}/sortDirection`;
104
+
const val = this.#sortDirection.value;
105
+
106
+
if (val) localStorage.setItem(key, val);
107
+
else localStorage.removeItem(key);
108
+
});
81
109
}
82
110
83
111
// ACTIONS
84
112
85
113
/** @param {string | undefined} val */
114
+
setGroupBy = async (val) => this.#groupBy.value = val;
115
+
116
+
/** @param {string | undefined} val */
86
117
setPlaylist = async (val) => this.#playlist.value = val;
87
118
88
119
/** @param {string | undefined} val */
···
90
121
91
122
/** @param {string[]} val */
92
123
setSortBy = async (val) => this.#sortBy.value = val;
124
+
125
+
/** @param {string | undefined} val */
126
+
setSortDirection = async (val) => this.#sortDirection.value = val;
93
127
}
94
128
95
129
export default ScopeEngine;