Features: Shuffle History + Mute + Max (#30)

src/renderer/components/Main.tsx

@@ -42,6 +42,8 @@ export default function Main() {
   const currentSong = usePlayerStore((store) => store.currentSong);
   const setCurrentSong = usePlayerStore((store) => store.setCurrentSong);
   const setInitialized = useMainStore((store) => store.setInitialized);
+  const shuffleHistory = usePlayerStore((store) => store.shuffleHistory);
+  const setShuffleHistory = usePlayerStore((store) => store.setShuffleHistory);
   const setCurrentSongDataURL = usePlayerStore(
     (store) => store.setCurrentSongDataURL,
   );
@@ -222,6 +224,8 @@ export default function Main() {
       const randomSongMeta = filteredLibrary[randomSong];
       await playSong(randomSong, randomSongMeta);
       setOverrideScrollToIndex(randomIndex);
+      // @dev: add the current song to the shuffle history
+      setShuffleHistory([...shuffleHistory, currentSong]);
       return;
     }
 
@@ -256,7 +260,18 @@ export default function Main() {
       return;
     }
 
-    // @TODO: previous during shuffle does not work bc we don't hold a history of songs
+    // @dev: if shuffle is on and we have a history, play the previous song in the history, and scroll to it
+    if (shuffle && shuffleHistory.length > 0) {
+      const previousSong = shuffleHistory[shuffleHistory.length - 1];
+      const previousSongMeta = filteredLibrary[previousSong];
+      await playSong(previousSong, previousSongMeta);
+      // find the index of the song within the library
+      const historicalSongIndex = keys.indexOf(previousSong);
+      setOverrideScrollToIndex(historicalSongIndex);
+      // then pop the song from the history
+      setShuffleHistory(shuffleHistory.slice(0, -1));
+      return;
+    }
 
     const previousSong = keys[previousSongIndex];
     const previousSongMeta = filteredLibrary[previousSong];

src/renderer/components/StaticPlayer.tsx

@@ -106,7 +106,6 @@ export default function StaticPlayer({
             <IconButton
               onClick={() => {
                 // set the volume to 0.02 so you can listen to a podcast or hear the person next to you
-                audioTagRef.current!.volume = 2 / 100;
                 setVolume(2);
               }}
               sx={{
@@ -171,7 +170,6 @@ export default function StaticPlayer({
         <div className="flex sm:hidden justify-end flex-1 mt-1 mb-1">
           <VolumeSliderStack
             onChange={(event, value) => {
-              audioTagRef.current!.volume = (value as number) / 100;
               setVolume(value as number);
             }}
             value={volume}
@@ -237,8 +235,6 @@ export default function StaticPlayer({
           <Tooltip title="Quiet Mode">
             <IconButton
               onClick={() => {
-                // set the volume to 0.025
-                audioTagRef.current!.volume = 2.5 / 100;
                 setVolume(2.5);
               }}
               sx={{
@@ -252,7 +248,6 @@ export default function StaticPlayer({
         </div>
         <VolumeSliderStack
           onChange={(event, value) => {
-            audioTagRef.current!.volume = (value as number) / 100;
             setVolume(value as number);
           }}
           value={volume}

src/renderer/components/VolumeSliderStack.tsx

@@ -4,6 +4,8 @@ import Stack from '@mui/material/Stack';
 import Slider from '@mui/material/Slider';
 import VolumeDown from '@mui/icons-material/VolumeDown';
 import VolumeUp from '@mui/icons-material/VolumeUp';
+import IconButton from '@mui/material/IconButton';
+import usePlayerStore from '../store/player';
 
 export default function VolumeSliderStack({
   onChange,
@@ -12,6 +14,7 @@ export default function VolumeSliderStack({
   onChange: (event: Event, newValue: number | number[]) => void;
   value: number;
 }) {
+  const setVolume = usePlayerStore((store) => store.setVolume);
   const handleChange = (event: Event, newValue: number | number[]) => {
     onChange(event, newValue);
   };
@@ -25,7 +28,14 @@ export default function VolumeSliderStack({
         justifyItems="start"
         spacing={1.5}
       >
-        <VolumeDown fontSize="small" />
+        <IconButton
+          onClick={() => {
+            setVolume(0);
+          }}
+          size="small"
+        >
+          <VolumeDown fontSize="small" />
+        </IconButton>
         <Slider
           aria-label="Volume"
           color="secondary"
@@ -37,7 +47,14 @@ export default function VolumeSliderStack({
           }}
           value={value}
         />
-        <VolumeUp fontSize="small" />
+        <IconButton
+          onClick={() => {
+            setVolume(100);
+          }}
+          size="small"
+        >
+          <VolumeUp fontSize="small" />
+        </IconButton>
       </Stack>
     </Box>
   );

src/renderer/store/player.ts

@@ -12,6 +12,7 @@ interface PlayerStore {
   currentSongTime: number;
   filteredLibrary: { [key: string]: LightweightAudioMetadata };
   overrideScrollToIndex: number | undefined;
+  shuffleHistory: string[];
 
   deleteEverything: () => void;
   setVolume: (volume: number) => void;
@@ -26,6 +27,7 @@ interface PlayerStore {
     [key: string]: LightweightAudioMetadata;
   }) => void;
   setOverrideScrollToIndex: (index: number | undefined) => void;
+  setShuffleHistory: (history: string[]) => void;
 }
 
 const usePlayerStore = create<PlayerStore>((set) => ({
@@ -39,11 +41,22 @@ const usePlayerStore = create<PlayerStore>((set) => ({
   currentSongTime: 0,
   filteredLibrary: {},
   overrideScrollToIndex: undefined,
-
+  shuffleHistory: [],
   deleteEverything: () => set({}, true),
-  setVolume: (volume) => set({ volume }),
+  setVolume: (volume) => {
+    /**
+     * @dev set the volume of the audio tag to the new volume automatically
+     * as there is only one audio tag in the entire app
+     */
+    const audioTag = document.querySelector('audio');
+    if (audioTag) {
+      audioTag.volume = volume / 100;
+    }
+    return set({ volume });
+  },
   setPaused: (paused) => set({ paused }),
-  setShuffle: (shuffle) => set({ shuffle }),
+  // @note: when shuffle is toggled on or off we clear the shuffle history
+  setShuffle: (shuffle) => set({ shuffle, shuffleHistory: [] }),
   setRepeating: (repeating) => set({ repeating }),
   setCurrentSong: (currentSong) => set({ currentSong }),
   setCurrentSongDataURL: (currentSongDataURL) => set({ currentSongDataURL }),
@@ -53,6 +66,7 @@ const usePlayerStore = create<PlayerStore>((set) => ({
   setOverrideScrollToIndex: (overrideScrollToIndex) => {
     return set({ overrideScrollToIndex });
   },
+  setShuffleHistory: (shuffleHistory) => set({ shuffleHistory }),
 }));
 
 export default usePlayerStore;