Fix shuffle and repeat tracks (#65)

* Fix shuffle tracks

* Undo comment of log

src/components/audio/Audio.tsx

@@ -22,13 +22,16 @@ import {
   getSeek,
   getIndex,
   getQueueLength,
-  getIsRepeatSingle
+  getRepeatMode,
+  getIsShuffleOn,
+  getShuffleIndex
 } from '../../store/audio/selectors'
 
 import { MessageType } from '../../message'
 import { logListen } from './listens'
 import { postMessage } from '../../utils/postMessage'
 import { MessagePostingWebView } from '../../types/MessagePostingWebView'
+import { RepeatMode } from '../../store/audio/reducer'
 
 declare global {
   interface Global {
@@ -70,8 +73,10 @@ const Audio = ({
   pause,
   next,
   previous,
-  repeat,
   reset,
+  repeatMode,
+  isShuffleOn,
+  shuffleIndex,
   googleCastStatus,
   setCastPlayPosition
 }: Props) => {
@@ -225,12 +230,30 @@ const Audio = ({
   // Next and Previous handler
   useEffect(() => {
     if (playing || hasPlayedOnce.current) {
-      const isPreviousEnabled = index > 0
+      let isPreviousEnabled
+      let isNextEnabled
+      if (repeatMode === RepeatMode.ALL) {
+        isPreviousEnabled = true
+        isNextEnabled = true
+      } else if (isShuffleOn) {
+        isPreviousEnabled = shuffleIndex > 0
+        isNextEnabled = shuffleIndex < queueLength - 1
+      } else {
+        isPreviousEnabled = index > 0
+        isNextEnabled = index < queueLength - 1
+      }
       MusicControl.enableControl('previousTrack', isPreviousEnabled)
-      const isNextEnabled = index < queueLength - 1
       MusicControl.enableControl('nextTrack', isNextEnabled)
     }
-  }, [playing, hasPlayedOnce, index, queueLength])
+  }, [
+    playing,
+    hasPlayedOnce,
+    index,
+    queueLength,
+    repeatMode,
+    isShuffleOn,
+    shuffleIndex
+  ])
 
   // Seek handler
   useEffect(() => {
@@ -345,7 +368,7 @@ const Audio = ({
             setDuration(payload.duration)
           }}
           onProgress={onProgress}
-          repeat={repeat}
+          repeat={repeatMode === RepeatMode.SINGLE}
           paused={!playing}
           // onBuffer={this.onBuffer}
         />
@@ -360,8 +383,10 @@ const mapStateToProps = (state: AppState) => ({
   queueLength: getQueueLength(state),
   playing: getPlaying(state),
   seek: getSeek(state),
-  repeat: getIsRepeatSingle(state),
-  googleCastStatus: getGoogleCastStatus(state)
+  repeatMode: getRepeatMode(state),
+  googleCastStatus: getGoogleCastStatus(state),
+  isShuffleOn: getIsShuffleOn(state),
+  shuffleIndex: getShuffleIndex(state)
 })
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({

src/message.ts

@@ -33,6 +33,7 @@ export enum MessageType {
   SET_INFO = 'set-info',
   PERSIST_QUEUE = 'persist-queue',
   SET_REPEAT_MODE = 'set-repeat-mode',
+  SHUFFLE = 'shuffle',
 
   // Links
   OPEN_LINK = 'open-link',
@@ -144,6 +145,8 @@ export const handleMessage = async (
       return dispatch(audioActions.persistQueue(message))
     case MessageType.SET_REPEAT_MODE:
       return dispatch(audioActions.repeat(message))
+    case MessageType.SHUFFLE:
+      return dispatch(audioActions.shuffle(message))
     case MessageType.OPEN_LINK:
       Linking.openURL(message.url)
       break

src/store/audio/actions.ts

@@ -47,6 +47,11 @@ type RepeatAction = {
   message: Message
 }
 
+type ShuffleAction = {
+  type: typeof SHUFFLE
+  message: Message
+}
+
 type ResetAction = {
   type: typeof RESET
 }
@@ -60,6 +65,7 @@ export type AudioActions =
   | SetInfoAction
   | PersistQueueAction
   | RepeatAction
+  | ShuffleAction
   | ResetAction
 
 export const play = (): PlayAction => ({
@@ -98,6 +104,11 @@ export const repeat = (message: Message): RepeatAction => ({
   message
 })
 
+export const shuffle = (message: Message): ShuffleAction => ({
+  type: SHUFFLE,
+  message
+})
+
 export const reset = (): ResetAction => ({
   type: RESET
 })

src/store/audio/reducer.ts

@@ -7,6 +7,7 @@ import {
   SEEK,
   PERSIST_QUEUE,
   REPEAT,
+  SHUFFLE,
   RESET
 } from './actions'
 import { track, make } from '../../utils/analytics'
@@ -39,14 +40,20 @@ export type AudioState = {
   playing: boolean
   seek: number | null
   repeatMode: RepeatMode
+  shuffle: boolean
+  shuffleIndex: number
+  shuffleOrder: number[]
 }
 
 const initialState: AudioState = {
   index: -1,
   queue: [],
   playing: false,
   seek: null,
-  repeatMode: RepeatMode.OFF
+  repeatMode: RepeatMode.OFF,
+  shuffle: false,
+  shuffleIndex: -1,
+  shuffleOrder: []
 }
 
 const reducer = (
@@ -66,8 +73,21 @@ const reducer = (
       }
     case NEXT: {
       let newIndex
+      let newShuffleIndex = state.shuffleIndex
+      let playing = true
       if (state.repeatMode === RepeatMode.SINGLE) {
         newIndex = state.index
+      } else if (state.shuffle) {
+        newShuffleIndex =
+          state.shuffleIndex < state.queue.length - 1
+            ? state.shuffleIndex + 1
+            : state.repeatMode === RepeatMode.ALL
+            ? 0
+            : -1
+        newIndex =
+          newShuffleIndex === -1
+            ? newShuffleIndex
+            : state.shuffleOrder[newShuffleIndex]
       } else {
         newIndex =
           state.index < state.queue.length - 1
@@ -76,7 +96,7 @@ const reducer = (
             ? 0
             : -1
       }
-      const playing = newIndex !== -1
+      playing = newIndex !== -1
 
       // Side-Effect (yes, this shouldn't be in a reducer, but
       // maybe not worth including sagas/thunks)
@@ -89,16 +109,16 @@ const reducer = (
           })
         )
       }
-
       return {
         ...state,
         index: newIndex,
+        shuffleIndex: newShuffleIndex,
         playing
       }
     }
     case PREVIOUS: {
-      const newIndex = state.index > 0 ? state.index - 1 : -1
-
+      let newIndex = state.index > 0 ? state.index - 1 : -1
+      let newShuffleIndex = state.shuffleIndex
       // Side-Effect (yes, this shouldn't be in a reducer, but
       // maybe not worth including sagas/thunks)
       if (state.playing) {
@@ -110,35 +130,58 @@ const reducer = (
           })
         )
       }
+      if (state.shuffle) {
+        newShuffleIndex =
+          state.shuffleIndex - 1 > 0
+            ? state.shuffleIndex - 1
+            : state.repeatMode === RepeatMode.ALL
+            ? state.shuffleOrder.length - 1
+            : -1
+        newIndex = state.shuffleOrder[newShuffleIndex]
+      }
 
       return {
         ...state,
-        index: newIndex
+        index: newIndex,
+        shuffleIndex: newShuffleIndex
       }
     }
     case SEEK:
       return {
         ...state,
         seek: action.message.seconds
       }
+    case REPEAT:
+      return {
+        ...state,
+        repeatMode: action.message.repeatMode
+      }
     case PERSIST_QUEUE:
       return {
         ...state,
         queue: action.message.tracks,
-        index: action.message.index
+        index: action.message.index,
+        shuffle: action.message.shuffle,
+        shuffleIndex: action.message.shuffleIndex,
+        shuffleOrder: action.message.shuffleOrder
       }
-    case REPEAT:
+    case SHUFFLE:
       return {
         ...state,
-        repeatMode: action.message.repeatMode
+        shuffle: action.message.shuffle,
+        shuffleIndex: action.message.shuffleIndex,
+        shuffleOrder: action.message.shuffleOrder
       }
     case RESET:
       return {
         index: -1,
         queue: [],
         playing: false,
         seek: null,
-        repeatMode: RepeatMode.OFF
+        repeatMode: RepeatMode.OFF,
+        shuffle: false,
+        shuffleIndex: -1,
+        shuffleOrder: []
       }
     default:
       return state

src/store/audio/selectors.ts

@@ -15,3 +15,7 @@ export const getQueueLength = (state: AppState) =>
 export const getSeek = (state: AppState) => getBaseState(state).seek
 export const getIsRepeatSingle = (state: AppState) =>
   getBaseState(state).repeatMode === RepeatMode.SINGLE
+export const getRepeatMode = (state: AppState) => getBaseState(state).repeatMode
+export const getIsShuffleOn = (state: AppState) => getBaseState(state).shuffle
+export const getShuffleIndex = (state: AppState) =>
+  getBaseState(state).shuffleIndex