Add repeat mode

src/screens/Player/components/MediaControls.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import TrackPlayer, { usePlaybackState, STATE_PLAYING, STATE_PAUSED } from 'react-native-track-player';
 import { TouchableOpacity } from 'react-native';
 import styled from 'styled-components/native';
@@ -7,9 +7,13 @@ import ForwardIcon from 'assets/forwards.svg';
 import BackwardIcon from 'assets/backwards.svg';
 import PlayIcon from 'assets/play.svg';
 import PauseIcon from 'assets/pause.svg';
+import RepeatIcon from 'assets/repeat.svg';
+// import ShuffleIcon from 'assets/shuffle.svg';
 import { useColorScheme } from 'react-native-appearance';
+import { THEME_COLOR } from 'CONSTANTS';
 
 const BUTTON_SIZE = 40;
+const BUTTON_SIZE_SMALL = 25;
 
 const pause = () => TrackPlayer.pause();
 const play = () => TrackPlayer.play();
@@ -47,6 +51,14 @@ export default function MediaControls() {
                     <NextButton fill={fill} />
                 </Button>
             </Buttons>
+            <Buttons>
+                <Button>
+                    <RepeatButton fill={fill} />
+                </Button>
+                <Button>
+                    {/* <ShuffleButton fill={fill} /> */}
+                </Button>
+            </Buttons>
         </Container>
     );
 }
@@ -71,6 +83,67 @@ export function NextButton({ fill }: { fill: string }) {
     );
 }
 
+export function RepeatButton({ fill }: { fill: string}) {
+    const [isRepeating, setRepeating] = useState(false);
+    const handlePress = useCallback(() => setRepeating(!isRepeating), [isRepeating, setRepeating]);
+    const listener = useRef<TrackPlayer.EmitterSubscription | null>(null);
+    
+    // The callback that should determine whether we need to repeeat or not
+    const handleEndEvent = useCallback(async () => {
+        if (isRepeating) {
+            // Retrieve all current tracks
+            const tracks = await TrackPlayer.getQueue();
+
+            // Then skip to the first track
+            await TrackPlayer.skip(tracks[0].id);
+
+            // Cautiously reset the seek time, as there might only be a single
+            // item in queue.
+            await TrackPlayer.seekTo(0);
+
+            // Then play the item
+            await TrackPlayer.play();
+        }
+    }, [isRepeating]);
+
+    // Subscribe to ended event handler so that we can restart the queue from
+    // the start if looping is enabled
+    useEffect(() => {
+        // Set the event listener
+        listener.current = TrackPlayer.addEventListener('playback-queue-ended', handleEndEvent);
+        
+        // Then clean up after
+        return function cleanup() {
+            listener?.current?.remove();
+        };
+    }, [handleEndEvent]);
+
+    return (
+        <TouchableOpacity onPress={handlePress} style={{ opacity: isRepeating ? 1 : 0.5 }}>
+            <RepeatIcon
+                width={BUTTON_SIZE_SMALL}
+                height={BUTTON_SIZE_SMALL}
+                fill={isRepeating ? THEME_COLOR : fill}
+            />
+        </TouchableOpacity>
+    );
+}
+
+// export function ShuffleButton({ fill }: { fill: string}) {
+//     const [isShuffling, setShuffling] = useState(false);
+//     const handlePress = useCallback(() => setShuffling(!isShuffling), [isShuffling, setShuffling]);
+
+//     return (
+//         <TouchableOpacity onPress={handlePress} style={{ opacity: isShuffling ? 1 : 0.5 }}>
+//             <ShuffleIcon
+//                 width={BUTTON_SIZE_SMALL}
+//                 height={BUTTON_SIZE_SMALL}
+//                 fill={isShuffling ? THEME_COLOR : fill}
+//             />
+//         </TouchableOpacity>
+//     );
+// }
+
 export function MainButton({ fill }: { fill: string }) {
     const state = usePlaybackState();