forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
feat: artwork controller improvements
+86
-28
+3
-3
src/common/element.js
+3
-3
src/common/element.js
···
6
6
import { rpc, workerLink, workerProxy, workerTunnel } from "./worker.js";
7
7
import { BrowserPostMessageIo } from "./worker/rpc.js";
8
8
9
-
export { keyed } from "lit-html/directives/keyed.js";
10
-
11
9
/**
12
10
* @import {BroadcastingStatus, ProvisionedWorker, ProvisionedWorkers, WorkerOpts} from "./element.d.ts"
13
11
* @import {ProxiedActions, Tunnel} from "./worker.d.ts";
14
12
* @import {Signal} from "./signal.d.ts"
15
13
*/
14
+
15
+
export const DEFAULT_GROUP = "default";
16
16
17
17
/**
18
18
* Base for custom elements, provides some utility functionality
···
25
25
constructor() {
26
26
super();
27
27
28
-
this.group = this.getAttribute("group") ?? "default";
28
+
this.group = this.getAttribute("group") ?? DEFAULT_GROUP;
29
29
30
30
this.worker = this.worker.bind(this);
31
31
this.workerLink = this.workerLink.bind(this);
+3
-1
src/components/engine/audio/element.js
+3
-1
src/components/engine/audio/element.js
+7
-1
src/components/orchestrator/queue-tracks/element.js
+7
-1
src/components/orchestrator/queue-tracks/element.js
+3
-2
src/themes/blur/artwork-controller/element.css
+3
-2
src/themes/blur/artwork-controller/element.css
···
1
1
:host {
2
-
--transition-durition: 500ms;
2
+
--transition-durition: 750ms;
3
3
}
4
4
5
5
main {
···
47
47
left: var(--space-xs);
48
48
letter-spacing: var(--tracking-wide);
49
49
line-height: 1;
50
-
padding: 7px 6px 6px;
50
+
padding: 8px 6px;
51
51
position: absolute;
52
+
text-box: trim-both cap alphabetic;
52
53
text-transform: uppercase;
53
54
top: var(--space-xs);
54
55
transition:
+70
-21
src/themes/blur/artwork-controller/element.js
+70
-21
src/themes/blur/artwork-controller/element.js
···
3
3
import { xxh32r } from "xxh32/dist/raw.js";
4
4
import { debounce } from "throttle-debounce";
5
5
6
+
import { cache } from "lit-html/directives/cache.js";
7
+
import { guard } from "lit-html/directives/guard.js";
8
+
import { keyed } from "lit-html/directives/keyed.js";
9
+
6
10
import {
11
+
DEFAULT_GROUP,
7
12
DiffuseElement,
8
-
keyed,
9
13
query,
10
14
whenElementsDefined,
11
15
} from "@common/element.js";
16
+
12
17
import { trackArtworkCacheId } from "@common/index.js";
13
-
import { computed, signal } from "@common/signal.js";
18
+
import { computed, signal, untracked } from "@common/signal.js";
14
19
15
20
/**
16
21
* @import {RenderArg} from "@common/element.d.ts"
17
-
* @import {Track} from "@definitions/types.d.ts"
18
22
*
19
23
* @import {InputElement} from "@components/input/types.d.ts"
20
24
* @import {Artwork} from "@components/processor/artwork/types.d.ts"
···
46
50
47
51
// SIGNALS
48
52
49
-
#artwork = signal(/** @type {Artwork[]} */ ([]), { eager: true });
53
+
#artwork = signal(
54
+
/** @type {{ current: Artwork | null; previous: Artwork | null }} */ ({
55
+
current: null,
56
+
previous: null,
57
+
}),
58
+
{ eager: true },
59
+
);
60
+
50
61
#artworkColor = signal(/** @type {string | undefined} */ (undefined));
51
62
#artworkLightMode = signal(false);
52
63
#duration = signal("0:00");
···
105
116
);
106
117
107
118
this.effect(() => {
108
-
debouncedChangeArtwork(queue.now());
119
+
const _trigger = queue.now();
120
+
debouncedChangeArtwork();
109
121
});
110
122
111
123
this.effect(() => this.#formatTimestamps());
···
146
158
} else controller.classList.remove("controller__inner--light-mode");
147
159
}
148
160
149
-
/**
150
-
* @param {Track | null} track
151
-
*/
152
-
async #setArtwork(track) {
161
+
/** */
162
+
async #setArtwork() {
163
+
const track = this.$queue.value?.now();
164
+
const currArtwork = untracked(this.#artwork.get);
165
+
153
166
if (!track) {
154
-
this.#artwork.value = [];
167
+
if (currArtwork.current) {
168
+
this.#artwork.value = { current: null, previous: currArtwork.current };
169
+
}
155
170
return;
156
171
}
157
172
···
184
199
},
185
200
};
186
201
202
+
if (this.$queue.value?.now()?.id !== track.id) {
203
+
return;
204
+
}
205
+
187
206
const art = await this.$artwork.value?.artwork(request) ?? [];
188
-
const currCacheId = track ? await trackArtworkCacheId(track) : undefined;
189
-
if (cacheId === currCacheId) this.#artwork.set(art);
207
+
208
+
const currTrack = this.$queue.value?.now();
209
+
const currCacheId = currTrack
210
+
? await trackArtworkCacheId(currTrack)
211
+
: undefined;
212
+
213
+
if (cacheId === currCacheId) {
214
+
this.#artwork.set({
215
+
previous: currArtwork.current,
216
+
current: art[0] ?? null,
217
+
});
218
+
}
190
219
}
191
220
192
221
////////////////////////////////////////////
···
317
346
const activeQueueItem = this.$queue.value?.now();
318
347
319
348
// Artwork
320
-
const artwork = this.#artwork.value.map((art) => {
349
+
const artworkArr = [
350
+
{ key: "previous", value: this.#artwork.value.previous },
351
+
{ key: "current", value: this.#artwork.value.current },
352
+
];
353
+
354
+
const artwork = artworkArr.map(({ key, value }) => {
355
+
const art = value;
356
+
357
+
if (art === null) {
358
+
return html`
359
+
360
+
`;
361
+
}
362
+
321
363
const hash = xxh32r(art.bytes).toString();
322
364
const blob = new Blob(
323
365
[/** @type {ArrayBuffer} */ (art.bytes.buffer)],
···
326
368
327
369
const url = URL.createObjectURL(blob);
328
370
329
-
return keyed(
330
-
hash,
331
-
html`
332
-
<img @load="${this.artworkLoaded}" data-hash="${hash}" src="${url}" />
333
-
`,
334
-
);
371
+
return guard([hash], () =>
372
+
keyed(
373
+
hash,
374
+
html`
375
+
<img
376
+
@load="${this.artworkLoaded}"
377
+
data-hash="${hash}"
378
+
src="${url}"
379
+
style="opacity: ${key === `current` ? `0` : `1`}"
380
+
/>
381
+
`,
382
+
));
335
383
});
336
384
337
385
return html`
···
343
391
<main style="background-color: ${this.#artworkColor.value ??
344
392
`revert-layer`};">
345
393
<section class="artwork">
346
-
<label style="background: ${this.#artworkColor.value ??
347
-
`revert-layer`}; display: ${`block`};">
394
+
<label style="display: ${this.group === DEFAULT_GROUP
395
+
? `none`
396
+
: `block`};">
348
397
${this.group}
349
398
</label>
350
399