Rockbox open source high quality audio player as a Music Player Daemon
mpris
rockbox
mpd
libadwaita
audio
rust
zig
deno
webui: make shuffle/repeat button work
+76
-12
+23
-3
webui/rockbox/src/Components/ControlBar/ControlBar.tsx
+23
-3
webui/rockbox/src/Components/ControlBar/ControlBar.tsx
···
1
-
import { FC } from "react";
1
+
import { FC, useEffect, useState } from "react";
2
2
import Play from "../Icons/Play";
3
3
import Previous from "../Icons/Previous";
4
4
import Next from "../Icons/Next";
···
22
22
onLike: (trackId: string) => void;
23
23
onUnlike: (trackId: string) => void;
24
24
onSeek: (time: number) => void;
25
+
shuffle?: boolean;
26
+
repeat?: boolean;
25
27
};
26
28
27
29
const ControlBar: FC<ControlBarProps> = (props) => {
30
+
const [shuffle, setShuffle] = useState(props.shuffle);
31
+
const [repeat, setRepeat] = useState(props.repeat);
32
+
33
+
useEffect(() => {
34
+
setShuffle(props.shuffle);
35
+
setRepeat(props.repeat);
36
+
}, [props.shuffle, props.repeat]);
37
+
38
+
const onShuffle = () => {
39
+
setShuffle(!shuffle);
40
+
props.onShuffle();
41
+
};
42
+
43
+
const onRepeat = () => {
44
+
setRepeat(!repeat);
45
+
props.onRepeat();
46
+
};
47
+
28
48
return (
29
49
<Container>
30
50
<Controls>
31
51
<ControlsContainer>
32
-
<Button onClick={props.onShuffle}>
52
+
<Button onClick={onShuffle} active={shuffle}>
33
53
<Shuffle />
34
54
</Button>
35
55
<Button onClick={props.onPrevious}>
···
48
68
<Button onClick={props.onNext}>
49
69
<Next />
50
70
</Button>
51
-
<Button onClick={props.onRepeat}>
71
+
<Button onClick={onRepeat} active={repeat}>
52
72
<Repeat />
53
73
</Button>
54
74
</ControlsContainer>
+32
-2
webui/rockbox/src/Components/ControlBar/ControlBarWithData.tsx
+32
-2
webui/rockbox/src/Components/ControlBar/ControlBarWithData.tsx
···
3
3
import {
4
4
useCurrentlyPlayingSongSubscription,
5
5
useGetCurrentTrackQuery,
6
+
useGetGlobalSettingsQuery,
6
7
useGetLikedAlbumsQuery,
7
8
useGetLikedTracksQuery,
8
9
useGetPlaybackStatusQuery,
···
12
13
usePlaybackStatusSubscription,
13
14
usePreviousMutation,
14
15
useResumeMutation,
16
+
useSaveSettingsMutation,
15
17
useSeekMutation,
16
18
useUnlikeTrackMutation,
17
19
} from "../../Hooks/GraphQL";
···
22
24
import { usePlayQueue } from "../../Hooks/usePlayQueue";
23
25
import { useResumePlaylist } from "../../Hooks/useResumePlaylist";
24
26
import { likesState } from "../Likes/LikesState";
27
+
import { settingsState } from "../Settings/SettingsState";
25
28
26
29
const ControlBarWithData: FC = () => {
27
30
const [{ nowPlaying, locked, resumeIndex }, setControlBarState] =
···
41
44
const [likeTrack] = useLikeTrackMutation();
42
45
const [unlikeTrack] = useUnlikeTrackMutation();
43
46
const [seek] = useSeekMutation();
47
+
const [saveSettings] = useSaveSettingsMutation();
48
+
const { refetch: refetchSettings } = useGetGlobalSettingsQuery();
49
+
const [settings] = useRecoilState(settingsState);
44
50
45
51
const [likes, setLikes] = useRecoilState(likesState);
46
52
const { data: likedTracksData, loading: likedTracksLoading } =
···
265
271
});
266
272
};
267
273
274
+
const onShuffle = async () => {
275
+
await saveSettings({
276
+
variables: {
277
+
settings: {
278
+
playlistShuffle: !settings.playlistShuffle,
279
+
},
280
+
},
281
+
});
282
+
await refetchSettings();
283
+
};
284
+
285
+
const onRepeat = async () => {
286
+
await saveSettings({
287
+
variables: {
288
+
settings: {
289
+
repeatMode: settings.repeatMode === 0 ? 1 : 0,
290
+
},
291
+
},
292
+
});
293
+
await refetchSettings();
294
+
};
295
+
268
296
return (
269
297
<ControlBar
270
298
nowPlaying={nowPlaying}
···
272
300
onPause={onPause}
273
301
onNext={() => next()}
274
302
onPrevious={() => previous()}
275
-
onShuffle={() => {}}
276
-
onRepeat={() => {}}
303
+
onShuffle={onShuffle}
304
+
onRepeat={onRepeat}
305
+
shuffle={settings.playlistShuffle}
306
+
repeat={settings.repeatMode !== 0}
277
307
liked={likes[nowPlaying?.id || ""]}
278
308
onLike={onLike}
279
309
onUnlike={onUnlike}
+9
-1
webui/rockbox/src/Components/ControlBar/styles.tsx
+9
-1
webui/rockbox/src/Components/ControlBar/styles.tsx
···
1
+
import { css } from "@emotion/react";
1
2
import styled from "@emotion/styled";
2
3
3
4
export const Container = styled.div`
···
17
18
width: 160px;
18
19
`;
19
20
20
-
export const Button = styled.button`
21
+
export const Button = styled.button<{ active?: boolean }>`
21
22
background-color: transparent;
22
23
cursor: pointer;
23
24
border: none;
24
25
display: flex;
25
26
align-items: center;
26
27
justify-content: center;
28
+
padding: 8px;
29
+
border-radius: 6px;
30
+
${(props) =>
31
+
props.active &&
32
+
css`
33
+
background-color: #e9e9ea8c;
34
+
`}
27
35
&:hover {
28
36
opacity: 0.6;
29
37
}
+1
-1
webui/rockbox/src/Components/Settings/Playback/Playback.tsx
+1
-1
webui/rockbox/src/Components/Settings/Playback/Playback.tsx
+11
-5
webui/rockbox/src/Components/Settings/Playback/PlaybackWithData.tsx
+11
-5
webui/rockbox/src/Components/Settings/Playback/PlaybackWithData.tsx
···
2
2
import Playback from "./Playback";
3
3
import { useRecoilState } from "recoil";
4
4
import { settingsState } from "../SettingsState";
5
-
import { useSaveSettingsMutation } from "../../../Hooks/GraphQL";
5
+
import {
6
+
useGetGlobalSettingsQuery,
7
+
useSaveSettingsMutation,
8
+
} from "../../../Hooks/GraphQL";
6
9
7
10
const PlaybackWithData: FC = () => {
11
+
const { refetch: refetchSettings } = useGetGlobalSettingsQuery();
8
12
const [settings] = useRecoilState(settingsState);
9
13
const [saveSettings] = useSaveSettingsMutation();
10
14
11
-
const onShuffleChange = (playlistShuffle: boolean) => {
12
-
saveSettings({
15
+
const onShuffleChange = async (playlistShuffle: boolean) => {
16
+
await saveSettings({
13
17
variables: {
14
18
settings: {
15
19
playlistShuffle,
16
20
},
17
21
},
18
22
});
23
+
await refetchSettings();
19
24
};
20
25
21
-
const onRepeatChange = (repeatMode: number) => {
22
-
saveSettings({
26
+
const onRepeatChange = async (repeatMode: number) => {
27
+
await saveSettings({
23
28
variables: {
24
29
settings: {
25
30
repeatMode,
26
31
},
27
32
},
28
33
});
34
+
await refetchSettings();
29
35
};
30
36
31
37
const onCrossfadeChange = (crossfade: number) => {