Rockbox open source high quality audio player as a Music Player Daemon
mpris rockbox mpd libadwaita audio rust zig deno
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

webui: make shuffle/repeat button work

+76 -12
+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
··· 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
··· 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
··· 83 83 }; 84 84 85 85 const onRepeatChange = (repeat: number) => { 86 - setRepeat(repeatValues[props.repeat]); 86 + setRepeat(repeatValues[repeat]); 87 87 props.onRepeatChange(repeat); 88 88 }; 89 89
+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) => {