forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: add back repeat and shuffle buttons to artwork controller
+38
-2
+35
-1
src/themes/blur/artwork-controller/element.js
+35
-1
src/themes/blur/artwork-controller/element.js
···
20
20
* @import ArtworkOrchestrator from "~/components/orchestrator/artwork/element.js"
21
21
* @import ControllerOrchestrator from "~/components/orchestrator/controller/element.js"
22
22
* @import FavouritesOrchestrator from "~/components/orchestrator/favourites/element.js"
23
+
* @import RepeatShuffleEngine from "~/components/engine/repeat-shuffle/element.js"
23
24
*/
24
25
25
26
class ArtworkController extends DiffuseElement {
···
58
59
/** @type {FavouritesOrchestrator | undefined} */ (undefined),
59
60
);
60
61
$input = signal(/** @type {InputElement | undefined} */ (undefined));
62
+
$repeatShuffle = signal(
63
+
/** @type {RepeatShuffleEngine | undefined} */ (undefined),
64
+
);
61
65
62
66
// SIGNALS - COMPUTED
63
67
···
85
89
/** @type {FavouritesOrchestrator} */
86
90
const favourites = query(this, "favourites-orchestrator-selector");
87
91
88
-
whenElementsDefined({ artwork, controller, favourites, input })
92
+
/** @type {RepeatShuffleEngine} */
93
+
const repeatShuffle = query(this, "repeat-shuffle-engine-selector");
94
+
95
+
whenElementsDefined({ artwork, controller, favourites, input, repeatShuffle })
89
96
.then(
90
97
() => {
91
98
this.$artwork.value = artwork;
92
99
this.$controller.value = controller;
93
100
this.$input.value = input;
94
101
this.$favourites.value = favourites;
102
+
this.$repeatShuffle.value = repeatShuffle;
95
103
96
104
// Changed artwork based on active queue item.
97
105
const debouncedChangeArtwork = debounce(
···
337
345
this.$favourites.value?.toggle(track);
338
346
};
339
347
348
+
toggleRepeat = () => {
349
+
const rs = this.$repeatShuffle.value;
350
+
if (rs) rs.setRepeat(!rs.repeat());
351
+
};
352
+
353
+
toggleShuffle = () => {
354
+
const rs = this.$repeatShuffle.value;
355
+
if (rs) rs.setShuffle(!rs.shuffle());
356
+
};
357
+
340
358
// RENDER
341
359
342
360
/**
···
347
365
const isFav = activeQueueItem
348
366
? this.$favourites.value?.isFavourite(activeQueueItem) ?? false
349
367
: false;
368
+
const isRepeat = this.$repeatShuffle.value?.repeat() ?? false;
369
+
const isShuffle = this.$repeatShuffle.value?.shuffle() ?? false;
350
370
351
371
// Artwork
352
372
const artworkArr = [
···
495
515
<footer>
496
516
<div class="button-row">
497
517
<button
518
+
title="Toggle repeat"
519
+
data-enabled="${isRepeat ? `t` : `f`}"
520
+
@click="${this.toggleRepeat}"
521
+
>
522
+
<i class="ph-${isRepeat ? `fill` : `bold`} ph-repeat"></i>
523
+
</button>
524
+
<button
498
525
title="Toggle favourite"
499
526
data-enabled="${isFav ? `t` : `f`}"
500
527
@click="${this.toggleFavourite}"
501
528
>
502
529
<i class="ph-${isFav ? `fill` : `bold`} ph-star"></i>
530
+
</button>
531
+
<button
532
+
title="Toggle shuffle"
533
+
data-enabled="${isShuffle ? `t` : `f`}"
534
+
@click="${this.toggleShuffle}"
535
+
>
536
+
<i class="ph-${isShuffle ? `fill` : `bold`} ph-shuffle"></i>
503
537
</button>
504
538
</div>
505
539
</footer>
+3
-1
src/themes/blur/artwork-controller/facet/index.inline.js
+3
-1
src/themes/blur/artwork-controller/facet/index.inline.js
···
8
8
await foundation.orchestrator.queueAudio();
9
9
await foundation.orchestrator.mediaSession();
10
10
11
-
const [art, ctl, fav, inp] = await Promise.all([
11
+
const [art, ctl, fav, inp, rs] = await Promise.all([
12
12
foundation.orchestrator.artwork(),
13
13
foundation.orchestrator.controller(),
14
14
foundation.orchestrator.favourites(),
15
15
foundation.configurator.input(),
16
+
foundation.engine.repeatShuffle(),
16
17
]);
17
18
18
19
// Controller
···
21
22
dac.setAttribute("controller-orchestrator-selector", ctl.selector);
22
23
dac.setAttribute("input-selector", inp.selector);
23
24
dac.setAttribute("favourites-orchestrator-selector", fav.selector);
25
+
dac.setAttribute("repeat-shuffle-engine-selector", rs.selector);
24
26
25
27
// Add to DOM
26
28
(document.querySelector("#container") ?? document.body).append(dac);