forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
fix: improve artwork transition
+21
-14
+21
-14
src/themes/blur/artwork-controller/element.js
+21
-14
src/themes/blur/artwork-controller/element.js
···
220
220
const url = URL.createObjectURL(blob);
221
221
222
222
this.#artwork.set({
223
-
previous: currArtwork.current,
223
+
previous: currArtwork.current
224
+
? { ...currArtwork.current, loaded: false }
225
+
: null,
224
226
current: art
225
227
? { ...art, hash: xxh32r(art.bytes).toString(), loaded: false, url }
226
228
: null,
227
229
});
230
+
231
+
if (!art) {
232
+
this.#artworkColor.value = undefined;
233
+
this.#artworkLightMode.value = false;
234
+
}
228
235
}
229
236
}
230
237
···
286
293
const hash = event.target.getAttribute("data-hash");
287
294
if (!hash) return;
288
295
289
-
console.log("loaded", hash);
296
+
// console.log("loaded", hash);
290
297
291
298
if (hash !== this.#artwork.value.current?.hash) return;
292
299
if (this.#artwork.value.current?.loaded) return;
···
369
376
const artworkArr = [
370
377
this.#artwork.value.previous,
371
378
this.#artwork.value.current,
372
-
];
379
+
].sort((a, b) => {
380
+
if (!a || !b) return 0;
381
+
return a.hash.localeCompare(b.hash);
382
+
});
373
383
374
384
const artwork = artworkArr.map((art) => {
375
385
if (art === null) {
376
386
return null;
377
387
}
378
388
379
-
return keyed(
380
-
art.hash,
381
-
cache(html`
382
-
<img
383
-
@load="${this.artworkLoaded}"
384
-
data-hash="${art.hash}"
385
-
src="${art.url}"
386
-
style="opacity: ${art.loaded ? `1` : `0`}"
387
-
/>
388
-
`),
389
-
);
389
+
return cache(html`
390
+
<img
391
+
@load="${this.artworkLoaded}"
392
+
data-hash="${art.hash}"
393
+
src="${art.url}"
394
+
style="opacity: ${art.loaded ? `1` : `0`}"
395
+
/>
396
+
`);
390
397
});
391
398
392
399
return html`