tokono.ma
A music player that connects to your cloud/distributed storage.
chore: improve artwork transition
+9
-5
+9
-5
src/themes/blur/artwork-controller/element.js
+9
-5
src/themes/blur/artwork-controller/element.js
···
51
51
// SIGNALS
52
52
53
53
#artwork = signal(
54
-
/** @type {{ current: (Artwork & { hash: string; loaded: boolean; url: string }) | null; previous: (Artwork & { hash: string; loaded: boolean; url: string }) | null }} */ ({
54
+
/** @type {{ current: (Artwork & { hash: string; index: number; loaded: boolean; url: string }) | null; previous: (Artwork & { hash: string; index: number; loaded: boolean; url: string }) | null }} */ ({
55
55
current: null,
56
56
previous: null,
57
57
}),
···
224
224
? { ...currArtwork.current, loaded: false }
225
225
: null,
226
226
current: art
227
-
? { ...art, hash: xxh32r(art.bytes).toString(), loaded: false, url }
227
+
? {
228
+
...art,
229
+
hash: xxh32r(art.bytes).toString(),
230
+
index: (currArtwork.current?.index ?? 0) + 1,
231
+
loaded: false,
232
+
url,
233
+
}
228
234
: null,
229
235
});
230
236
···
292
298
293
299
const hash = event.target.getAttribute("data-hash");
294
300
if (!hash) return;
295
-
296
-
// console.log("loaded", hash);
297
301
298
302
if (hash !== this.#artwork.value.current?.hash) return;
299
303
if (this.#artwork.value.current?.loaded) return;
···
378
382
this.#artwork.value.current,
379
383
].sort((a, b) => {
380
384
if (!a || !b) return 0;
381
-
return a.hash.localeCompare(b.hash);
385
+
return a.index % 2 ? 1 : -1;
382
386
});
383
387
384
388
const artwork = artworkArr.map((art) => {