Scroll Wheel: Add back click handler

Clicking back either restarts the song or goes to the next song
depending on the audio's current time.

src/App/Audio.tsx

@@ -1,9 +1,17 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 
+import { useEventListener } from 'hooks';
 import { useAudioService } from 'services/audio';
 
 const Audio = () => {
-  const { source, playing, nextSong, loading, setLoading } = useAudioService();
+  const {
+    source,
+    playing,
+    nextSong,
+    prevSong,
+    loading,
+    setLoading
+  } = useAudioService();
   const audioRef = useRef<HTMLAudioElement>(null);
 
   const handlePlay = useCallback(async () => {
@@ -18,6 +26,16 @@ const Audio = () => {
     }
   }, []);
 
+  const handleBackClick = useCallback(() => {
+    if (source && audioRef.current) {
+      if (audioRef.current.currentTime < 3) {
+        prevSong();
+      } else {
+        audioRef.current.currentTime = 0;
+      }
+    }
+  }, [prevSong, source]);
+
   const handleLoadStart = useCallback(() => {
     setLoading(true);
   }, [setLoading]);
@@ -34,6 +52,8 @@ const Audio = () => {
     }
   }, [handlePause, handlePlay, loading, playing]);
 
+  useEventListener("backclick", handleBackClick);
+
   return source ? (
     <audio
       ref={audioRef}

src/App/index.tsx

@@ -51,7 +51,6 @@ const Shell = styled.div`
     animation: none;
     border-radius: 0;
     -webkit-box-reflect: unset;
-    max-height: unset;
   }
 
   @keyframes descend {

src/components/ScrollWheel/index.tsx

@@ -27,6 +27,7 @@ const forwardScrollEvent = new Event("forwardscroll");
 const backwardScrollEvent = new Event("backwardscroll");
 const wheelClickEvent = new Event("wheelclick");
 const menuClickEvent = new Event("menuclick");
+const backClickEvent = new Event("backclick");
 
 const ScrollWheel = () => {
   const [count, setCount] = useState(0);
@@ -58,7 +59,7 @@ const ScrollWheel = () => {
           togglePause();
           break;
         case WHEEL_QUADRANT.LEFT:
-          console.log("CLICKED REWIND");
+          window.dispatchEvent(backClickEvent);
           break;
         case WHEEL_QUADRANT.RIGHT:
           nextSong();

src/hooks/useScrollHandler.ts

@@ -24,11 +24,10 @@ const useScrollHandler = (
   /** Wait until the user stops scrolling to check for a new preview to display. */
   const checkForPreview = useCallback(
     (i: number) => {
-      if (!isActive || !options[i]) return;
-
       if (timeoutIdRef.current) {
         clearTimeout(timeoutIdRef.current);
       }
+      if (!isActive || !options[i]) return;
       timeoutIdRef.current = setTimeout(() => {
         const preview = options[i].preview;
         if (preview) {
@@ -91,7 +90,12 @@ const useScrollHandler = (
   }, [index, isActive, options, play, showWindow]);
 
   useEffect(() => {
-    checkForPreview(0);
+    if (!options || !options[0]) return;
+
+    const preview = options[0].preview;
+    if (preview) {
+      setPreview(preview);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

src/services/audio.tsx

@@ -45,6 +45,7 @@ export interface AudioServiceHook {
   play: (playlist: Song[], index?: number) => void;
   togglePause: () => void;
   nextSong: () => void;
+  prevSong: () => void;
   setLoading: (value: boolean) => void;
 }
 
@@ -94,6 +95,23 @@ export const useAudioService = (): AudioServiceHook => {
     }
   }, [audioState.source, setAudioState]);
 
+  const prevSong = useCallback(() => {
+    if (audioState.source && audioState.songIndex > 0) {
+      setAudioState(prevState => {
+        const newIndex = prevState.songIndex - 1;
+        const newSource = prevState.playlist[newIndex];
+        setDocumentSongTitle(newSource);
+
+        return {
+          ...prevState,
+          playing: true,
+          songIndex: newIndex,
+          source: newSource
+        };
+      });
+    }
+  }, [audioState.songIndex, audioState.source, setAudioState]);
+
   const setLoading = useCallback(
     (value: boolean) => setAudioState({ ...audioState, loading: value }),
     [audioState, setAudioState]
@@ -108,6 +126,7 @@ export const useAudioService = (): AudioServiceHook => {
     play,
     togglePause,
     nextSong,
+    prevSong,
     setLoading
   };
 };