all state migrated to zustand, jotai removed

splash page now waits on state hydration from db

app/App.tsx

@@ -1,21 +1,27 @@
-import React from 'react'
-import SplashPage from '@app/screens/SplashPage'
 import RootNavigator from '@app/navigation/RootNavigator'
-import { Provider } from 'jotai'
+import SplashPage from '@app/screens/SplashPage'
-import { StatusBar, View } from 'react-native'
 import colors from '@app/styles/colors'
-import TrackPlayerState from '@app/components/TrackPlayerState'
+import React from 'react'
+import { StatusBar, View } from 'react-native'
+import ProgressHook from './components/ProgressHook'
+import { useStore } from './state/store'
+import { selectTrackPlayer } from './state/trackplayer'
+
+const Debug = () => {
+  const currentTrack = useStore(selectTrackPlayer.currentTrack)
+  console.log(currentTrack?.title)
+  return <></>
+}
 
 const App = () => (
-  <Provider>
+  <View style={{ flex: 1, backgroundColor: colors.gradient.high }}>
     <StatusBar animated={true} backgroundColor={'rgba(0, 0, 0, 0.4)'} barStyle={'light-content'} translucent={true} />
-    <TrackPlayerState />
+    <SplashPage>
-    <View style={{ flex: 1, backgroundColor: colors.gradient.high }}>
+      <ProgressHook />
-      <SplashPage>
+      <Debug />
-        <RootNavigator />
+      <RootNavigator />
-      </SplashPage>
+    </SplashPage>
-    </View>
+  </View>
-  </Provider>
 )
 
 export default App

app/components/CoverArt.tsx

@@ -36,8 +36,7 @@ const ArtistImageFallback: React.FC<{
 }> = ({ enableLoading }) => {
   useEffect(() => {
     enableLoading()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enableLoading])
-  }, [])
   return <></>
 }
 

app/components/ListItem.tsx

@@ -1,9 +1,9 @@
 import { ListableItem } from '@app/models/music'
-import { currentTrackAtom } from '@app/state/trackplayer'
+import { useStore } from '@app/state/store'
+import { selectTrackPlayer } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/native'
-import { useAtomValue } from 'jotai/utils'
 import React, { useState } from 'react'
 import { GestureResponderEvent, StyleSheet, Text, View } from 'react-native'
 import IconFA from 'react-native-vector-icons/FontAwesome'
@@ -16,7 +16,7 @@ const TitleTextSong = React.memo<{
   id: string
   title?: string
 }>(({ id, title }) => {
-  const currentTrack = useAtomValue(currentTrackAtom)
+  const currentTrack = useStore(selectTrackPlayer.currentTrack)
   const playing = currentTrack?.id === id
 
   return (

app/components/ListPlayerControls.tsx

@@ -1,6 +1,6 @@
 import Button from '@app/components/Button'
+import { useSetQueue } from '@app/hooks/trackplayer'
 import { Song } from '@app/models/music'
-import { useSetQueue } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import React, { useState } from 'react'
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'

app/components/NowPlayingBar.tsx

@@ -1,17 +1,18 @@
-import React from 'react'
-import { Pressable, StyleSheet, Text, View } from 'react-native'
-import { useNavigation } from '@react-navigation/native'
-import { useAtomValue } from 'jotai/utils'
-import { currentTrackAtom, playerStateAtom, usePause, usePlay, useProgress } from '@app/state/trackplayer'
 import CoverArt from '@app/components/CoverArt'
+import PressableOpacity from '@app/components/PressableOpacity'
+import { usePause, usePlay } from '@app/hooks/trackplayer'
+import { useStore } from '@app/state/store'
+import { selectTrackPlayer } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
+import { useNavigation } from '@react-navigation/native'
+import React from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
 import { State } from 'react-native-track-player'
-import PressableOpacity from '@app/components/PressableOpacity'
 import IconFA5 from 'react-native-vector-icons/FontAwesome5'
 
 const ProgressBar = () => {
-  const { position, duration } = useProgress()
+  const { position, duration } = useStore(selectTrackPlayer.progress)
 
   let progress = 0
   if (duration > 0) {
@@ -41,8 +42,8 @@ const progressStyles = StyleSheet.create({
 
 const NowPlayingBar = () => {
   const navigation = useNavigation()
-  const track = useAtomValue(currentTrackAtom)
+  const track = useStore(selectTrackPlayer.currentTrack)
-  const playerState = useAtomValue(playerStateAtom)
+  const playerState = useStore(selectTrackPlayer.playerState)
   const play = usePlay()
   const pause = usePause()
 

app/components/ProgressHook.tsx

@@ -0,0 +1,17 @@
+import { useStore } from '@app/state/store'
+import { selectTrackPlayer } from '@app/state/trackplayer'
+import React, { useEffect } from 'react'
+import { useProgress } from 'react-native-track-player'
+
+const ProgressHook = () => {
+  const setProgress = useStore(selectTrackPlayer.setProgress)
+  const progress = useProgress(250)
+
+  useEffect(() => {
+    setProgress(progress)
+  }, [setProgress, progress])
+
+  return <></>
+}
+
+export default ProgressHook

app/components/TrackPlayerState.tsx

@@ -1,192 +0,0 @@
-import { useAppState } from '@react-native-community/hooks'
-import { useAtomValue, useUpdateAtom } from 'jotai/utils'
-import React, { useEffect } from 'react'
-import { View } from 'react-native'
-import { Event, State, useProgress, useTrackPlayerEvents } from 'react-native-track-player'
-import {
-  currentTrackAtom,
-  playerStateAtom,
-  progressAtom,
-  progressSubsAtom,
-  queueAtom,
-  useRefreshCurrentTrack,
-  useRefreshPlayerState,
-  useRefreshProgress,
-  useRefreshQueue,
-} from '@app/state/trackplayer'
-
-const AppActiveResponder: React.FC<{
-  update: () => void
-}> = ({ update }) => {
-  const appState = useAppState()
-
-  useEffect(() => {
-    if (appState === 'active') {
-      update()
-    }
-  }, [appState, update])
-
-  return <></>
-}
-
-type Payload = { type: Event; [key: string]: any }
-
-const TrackPlayerEventResponder: React.FC<{
-  update: (payload?: Payload) => void
-  events: Event[]
-}> = ({ update, events }) => {
-  useTrackPlayerEvents(events, update)
-
-  return <AppActiveResponder update={update} />
-}
-
-const CurrentTrackState = () => {
-  const setCurrentTrack = useUpdateAtom(currentTrackAtom)
-  const refreshCurrentTrack = useRefreshCurrentTrack()
-
-  const update = async (payload?: Payload) => {
-    const queueEnded = payload?.type === Event.PlaybackQueueEnded && 'track' in payload
-    const remoteStop = payload?.type === Event.RemoteStop
-    if (queueEnded || remoteStop) {
-      setCurrentTrack(undefined)
-      return
-    }
-    await refreshCurrentTrack()
-  }
-
-  return (
-    <TrackPlayerEventResponder
-      events={[
-        Event.PlaybackQueueEnded,
-        Event.PlaybackTrackChanged,
-        Event.PlaybackMetadataReceived,
-        Event.RemoteDuck,
-        Event.RemoteStop,
-      ]}
-      update={update}
-    />
-  )
-}
-
-const PlayerState = () => {
-  const setPlayerState = useUpdateAtom(playerStateAtom)
-  const refreshPlayerState = useRefreshPlayerState()
-
-  const update = async (payload?: Payload) => {
-    if (payload?.type === Event.RemoteStop) {
-      setPlayerState(State.None)
-      return
-    }
-    await refreshPlayerState()
-  }
-
-  return <TrackPlayerEventResponder events={[Event.PlaybackState, Event.RemoteStop]} update={update} />
-}
-
-const QueueState = () => {
-  const setQueue = useUpdateAtom(queueAtom)
-  const refreshQueue = useRefreshQueue()
-
-  const update = async (payload?: Payload) => {
-    if (payload) {
-      setQueue([])
-      return
-    }
-    await refreshQueue()
-  }
-
-  return <TrackPlayerEventResponder events={[Event.RemoteStop]} update={update} />
-}
-
-const ProgressHook = () => {
-  const setProgress = useUpdateAtom(progressAtom)
-  const progress = useProgress(250)
-
-  useEffect(() => {
-    setProgress(progress)
-  }, [setProgress, progress])
-
-  return <></>
-}
-
-const ProgressState = () => {
-  const setProgress = useUpdateAtom(progressAtom)
-  const refreshProgress = useRefreshProgress()
-  const progressSubs = useAtomValue(progressSubsAtom)
-
-  const update = async (payload?: Payload) => {
-    if (payload) {
-      setProgress({ position: 0, duration: 0, buffered: 0 })
-      return
-    }
-    await refreshProgress()
-  }
-
-  if (progressSubs > 0) {
-    return (
-      <>
-        <ProgressHook />
-        <TrackPlayerEventResponder events={[Event.RemoteStop, Event.PlaybackTrackChanged]} update={update} />
-      </>
-    )
-  }
-  return <TrackPlayerEventResponder events={[Event.RemoteStop]} update={update} />
-}
-
-const Debug = () => {
-  const value = useAtomValue(queueAtom)
-
-  useEffect(() => {
-    console.log(value.map(t => t.title))
-  }, [value])
-
-  return <></>
-}
-
-// const DebugEvents = () => {
-//   const update = (payload?: Payload) => {
-//     console.log(`${payload?.type}: ${JSON.stringify(payload)}`)
-//   }
-
-//   return (
-//     <TrackPlayerEventResponder
-//       events={[
-//         Event.PlaybackError,
-//         Event.PlaybackMetadataReceived,
-//         Event.PlaybackQueueEnded,
-//         Event.PlaybackState,
-//         Event.PlaybackTrackChanged,
-//         Event.RemoteBookmark,
-//         Event.RemoteDislike,
-//         Event.RemoteDuck,
-//         Event.RemoteJumpBackward,
-//         Event.RemoteJumpForward,
-//         Event.RemoteLike,
-//         Event.RemoteNext,
-//         Event.RemotePause,
-//         Event.RemotePlay,
-//         Event.RemotePlayId,
-//         Event.RemotePlaySearch,
-//         Event.RemotePrevious,
-//         Event.RemoteSeek,
-//         Event.RemoteSetRating,
-//         Event.RemoteSkip,
-//         Event.RemoteStop,
-//       ]}
-//       update={update}
-//     />
-//   )
-// }
-
-const TrackPlayerState = () => (
-  <View>
-    <CurrentTrackState />
-    <PlayerState />
-    <QueueState />
-    <ProgressState />
-    <Debug />
-    {/* <DebugEvents /> */}
-  </View>
-)
-
-export default TrackPlayerState

app/hooks/server.ts

@@ -1,6 +1,6 @@
+import { useReset } from '@app/hooks/trackplayer'
 import { selectSettings } from '@app/state/settings'
 import { useStore } from '@app/state/store'
-import { useReset } from '@app/state/trackplayer'
 import { useEffect } from 'react'
 
 export const useSwitchActiveServer = () => {

app/hooks/trackplayer.ts

@@ -0,0 +1,201 @@
+import { useCoverArtUri } from '@app/hooks/music'
+import { Song } from '@app/models/music'
+import { useStore } from '@app/state/store'
+import { getCurrentTrack, getQueue, selectTrackPlayer, TrackExt, trackPlayerCommands } from '@app/state/trackplayer'
+import { useCallback } from 'react'
+import TrackPlayer from 'react-native-track-player'
+
+export const usePlay = () => {
+  return () => trackPlayerCommands.enqueue(() => TrackPlayer.play())
+}
+
+export const usePause = () => {
+  return () => trackPlayerCommands.enqueue(() => TrackPlayer.pause())
+}
+
+export const usePrevious = () => {
+  // const setCurrentTrackIdx = useStore(selectTrackPlayer.setCurrentTrackIdx)
+
+  return () =>
+    trackPlayerCommands.enqueue(async () => {
+      const [current] = await Promise.all([await TrackPlayer.getCurrentTrack(), await getQueue()])
+      if (current > 0) {
+        await TrackPlayer.skipToPrevious()
+        // setCurrentTrackIdx(current - 1)
+      } else {
+        await TrackPlayer.seekTo(0)
+      }
+      await TrackPlayer.play()
+    })
+}
+
+export const useNext = () => {
+  // const setCurrentTrack = useUpdateAtom(currentTrackAtom)
+
+  return () =>
+    trackPlayerCommands.enqueue(async () => {
+      const [current, queue] = await Promise.all([await TrackPlayer.getCurrentTrack(), await getQueue()])
+      if (current >= queue.length - 1) {
+        await TrackPlayer.skip(0)
+        await TrackPlayer.pause()
+        // setCurrentTrack(queue[0])
+      } else {
+        await TrackPlayer.skipToNext()
+        // setCurrentTrack(queue[current + 1])
+        await TrackPlayer.play()
+      }
+    })
+}
+
+export const useReset = (enqueue = true) => {
+  const resetStore = useStore(selectTrackPlayer.reset)
+
+  const reset = async () => {
+    await TrackPlayer.reset()
+    resetStore()
+  }
+
+  return enqueue ? () => trackPlayerCommands.enqueue(reset) : reset
+}
+
+function shuffleTracks(tracks: TrackExt[], firstTrack?: number) {
+  if (tracks.length === 0) {
+    return { tracks, shuffleOrder: [] }
+  }
+
+  const trackIndexes = tracks.map((_t, i) => i)
+  let shuffleOrder: number[] = []
+
+  for (let i = trackIndexes.length; i--; i > 0) {
+    const randi = Math.floor(Math.random() * (i + 1))
+    shuffleOrder.push(trackIndexes.splice(randi, 1)[0])
+  }
+
+  if (firstTrack !== undefined) {
+    shuffleOrder.splice(shuffleOrder.indexOf(firstTrack), 1)
+    shuffleOrder = [firstTrack, ...shuffleOrder]
+  }
+
+  tracks = shuffleOrder.map(i => tracks[i])
+
+  return { tracks, shuffleOrder }
+}
+
+function unshuffleTracks(tracks: TrackExt[], shuffleOrder: number[]): TrackExt[] {
+  if (tracks.length === 0 || shuffleOrder.length === 0) {
+    return tracks
+  }
+
+  return shuffleOrder.map((_v, i) => tracks[shuffleOrder.indexOf(i)])
+}
+
+export const useToggleShuffle = () => {
+  const setQueue = useStore(selectTrackPlayer.setQueue)
+  const setShuffleOrder = useStore(selectTrackPlayer.setShuffleOrder)
+  const getShuffleOrder = useCallback(() => useStore.getState().shuffleOrder, [])
+
+  return async () => {
+    return trackPlayerCommands.enqueue(async () => {
+      const queue = await getQueue()
+      const current = await getCurrentTrack()
+      const queueShuffleOrder = getShuffleOrder()
+
+      await TrackPlayer.remove(queue.map((_t, i) => i).filter(i => i !== current))
+
+      if (queueShuffleOrder === undefined) {
+        let { tracks, shuffleOrder } = shuffleTracks(queue, current)
+        if (tracks.length > 0) {
+          tracks = tracks.slice(1)
+        }
+
+        await TrackPlayer.add(tracks)
+        setShuffleOrder(shuffleOrder)
+      } else {
+        const tracks = unshuffleTracks(queue, queueShuffleOrder)
+
+        if (current !== undefined) {
+          const shuffledCurrent = queueShuffleOrder[current]
+          const tracks1 = tracks.slice(0, shuffledCurrent)
+          const tracks2 = tracks.slice(shuffledCurrent + 1)
+
+          await TrackPlayer.add(tracks2)
+          await TrackPlayer.add(tracks1, 0)
+        } else {
+          await TrackPlayer.add(tracks)
+        }
+
+        setShuffleOrder(undefined)
+      }
+
+      setQueue(await getQueue())
+    })
+  }
+}
+
+export const useSetQueue = () => {
+  const setCurrentTrackIdx = useStore(selectTrackPlayer.setCurrentTrackIdx)
+  const setQueue = useStore(selectTrackPlayer.setQueue)
+  const setShuffleOrder = useStore(selectTrackPlayer.setShuffleOrder)
+  const setQueueName = useStore(selectTrackPlayer.setName)
+  const getQueueShuffled = useCallback(() => !!useStore.getState().shuffleOrder, [])
+  const coverArtUri = useCoverArtUri()
+
+  return async (songs: Song[], name: string, playTrack?: number, shuffle?: boolean) =>
+    trackPlayerCommands.enqueue(async () => {
+      const shuffled = shuffle !== undefined ? shuffle : getQueueShuffled()
+
+      await TrackPlayer.setupPlayer()
+      await TrackPlayer.reset()
+
+      if (songs.length === 0) {
+        return
+      }
+
+      let queue = songs.map(s => mapSongToTrack(s, coverArtUri))
+
+      if (shuffled) {
+        const { tracks, shuffleOrder } = shuffleTracks(queue, playTrack)
+        setShuffleOrder(shuffleOrder)
+        queue = tracks
+        playTrack = 0
+      } else {
+        setShuffleOrder(undefined)
+      }
+
+      playTrack = playTrack || 0
+
+      setQueue(queue)
+      setCurrentTrackIdx(playTrack)
+      setQueueName(name)
+
+      if (playTrack === 0) {
+        await TrackPlayer.add(queue)
+        await TrackPlayer.play()
+      } else {
+        const tracks1 = queue.slice(0, playTrack)
+        const tracks2 = queue.slice(playTrack)
+
+        await TrackPlayer.add(tracks2)
+        await TrackPlayer.play()
+
+        await TrackPlayer.add(tracks1, 0)
+      }
+
+      // setQueue(await getQueue())
+      // setCurrentTrackIdx(playTrack)
+      // setQueueName(name)
+    })
+}
+
+function mapSongToTrack(song: Song, coverArtUri: (coverArt?: string) => string | undefined): TrackExt {
+  return {
+    id: song.id,
+    title: song.title,
+    artist: song.artist || 'Unknown Artist',
+    album: song.album || 'Unknown Album',
+    url: song.streamUri,
+    artwork: coverArtUri(song.coverArt),
+    coverArt: song.coverArt,
+    duration: song.duration,
+  }
+}

app/playbackservice.ts

@@ -0,0 +1,56 @@
+import { getCurrentTrack, getPlayerState, trackPlayerCommands } from '@app/state/trackplayer'
+import TrackPlayer, { Event } from 'react-native-track-player'
+import { useStore } from './state/store'
+
+module.exports = async function () {
+  TrackPlayer.addEventListener(Event.RemotePlay, () => trackPlayerCommands.enqueue(TrackPlayer.play))
+  TrackPlayer.addEventListener(Event.RemotePause, () => trackPlayerCommands.enqueue(TrackPlayer.pause))
+
+  TrackPlayer.addEventListener(Event.RemoteNext, () =>
+    trackPlayerCommands.enqueue(() => TrackPlayer.skipToNext().catch(() => {})),
+  )
+  TrackPlayer.addEventListener(Event.RemotePrevious, () =>
+    trackPlayerCommands.enqueue(() => TrackPlayer.skipToPrevious().catch(() => {})),
+  )
+
+  TrackPlayer.addEventListener(Event.RemoteDuck, data => {
+    if (data.permanent) {
+      trackPlayerCommands.enqueue(TrackPlayer.stop)
+      return
+    }
+
+    if (data.paused) {
+      trackPlayerCommands.enqueue(TrackPlayer.pause)
+    } else {
+      trackPlayerCommands.enqueue(TrackPlayer.play)
+    }
+  })
+
+  TrackPlayer.addEventListener(Event.RemoteStop, () => {
+    useStore.getState().reset()
+    trackPlayerCommands.enqueue(TrackPlayer.destroy)
+  })
+
+  TrackPlayer.addEventListener(Event.PlaybackState, () => {
+    trackPlayerCommands.enqueue(async () => {
+      useStore.getState().setPlayerState(await getPlayerState())
+    })
+  })
+
+  TrackPlayer.addEventListener(Event.PlaybackTrackChanged, () => {
+    useStore.getState().setProgress({ position: 0, duration: 0, buffered: 0 })
+    trackPlayerCommands.enqueue(async () => {
+      useStore.getState().setCurrentTrackIdx(await getCurrentTrack())
+    })
+  })
+
+  TrackPlayer.addEventListener(Event.PlaybackQueueEnded, () => {
+    trackPlayerCommands.enqueue(async () => {
+      useStore.getState().setCurrentTrackIdx(await getCurrentTrack())
+    })
+  })
+
+  TrackPlayer.addEventListener(Event.PlaybackMetadataReceived, () => {
+    useStore.getState().setCurrentTrackIdx(useStore.getState().currentTrackIdx)
+  })
+}

app/screens/ArtistView.tsx

@@ -4,8 +4,8 @@ import Header from '@app/components/Header'
 import ListItem from '@app/components/ListItem'
 import PressableOpacity from '@app/components/PressableOpacity'
 import { useArtistInfo } from '@app/hooks/music'
+import { useSetQueue } from '@app/hooks/trackplayer'
 import { Album, Song } from '@app/models/music'
-import { useSetQueue } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useLayout } from '@react-native-community/hooks'

app/screens/NowPlayingView.tsx

@@ -1,4 +1,3 @@
-import { useAtomValue } from 'jotai/utils'
 import React, { useCallback, useEffect } from 'react'
 import { BackHandler, StatusBar, StyleSheet, Text, View } from 'react-native'
 import { State } from 'react-native-track-player'
@@ -7,18 +6,6 @@ import IconFA5 from 'react-native-vector-icons/FontAwesome5'
 import Icon from 'react-native-vector-icons/Ionicons'
 import IconMatCom from 'react-native-vector-icons/MaterialCommunityIcons'
 import IconMat from 'react-native-vector-icons/MaterialIcons'
-import {
-  currentTrackAtom,
-  playerStateAtom,
-  queueNameAtom,
-  queueShuffledAtom,
-  useNext,
-  usePause,
-  usePlay,
-  usePrevious,
-  useProgress,
-  useToggleShuffle,
-} from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import formatDuration from '@app/util/formatDuration'
@@ -28,11 +15,14 @@ import PressableOpacity from '@app/components/PressableOpacity'
 import dimensions from '@app/styles/dimensions'
 import { NativeStackScreenProps } from 'react-native-screens/native-stack'
 import { useFocusEffect } from '@react-navigation/native'
+import { useStore } from '@app/state/store'
+import { selectTrackPlayer } from '@app/state/trackplayer'
+import { useNext, usePause, usePlay, usePrevious, useToggleShuffle } from '@app/hooks/trackplayer'
 
 const NowPlayingHeader = React.memo<{
   backHandler: () => void
 }>(({ backHandler }) => {
-  const queueName = useAtomValue(queueNameAtom)
+  const queueName = useStore(selectTrackPlayer.name)
 
   return (
     <View style={headerStyles.container}>
@@ -72,7 +62,7 @@ const headerStyles = StyleSheet.create({
 })
 
 const SongCoverArt = () => {
-  const track = useAtomValue(currentTrackAtom)
+  const track = useStore(selectTrackPlayer.currentTrack)
 
   return (
     <View style={coverArtStyles.container}>
@@ -94,7 +84,7 @@ const coverArtStyles = StyleSheet.create({
 })
 
 const SongInfo = () => {
-  const track = useAtomValue(currentTrackAtom)
+  const track = useStore(selectTrackPlayer.currentTrack)
 
   return (
     <View style={infoStyles.container}>
@@ -142,7 +132,7 @@ const infoStyles = StyleSheet.create({
 })
 
 const SeekBar = () => {
-  const { position, duration } = useProgress()
+  const { position, duration } = useStore(selectTrackPlayer.progress)
 
   let progress = 0
   if (duration > 0) {
@@ -204,12 +194,12 @@ const seekStyles = StyleSheet.create({
 })
 
 const PlayerControls = () => {
-  const state = useAtomValue(playerStateAtom)
+  const state = useStore(selectTrackPlayer.playerState)
   const play = usePlay()
   const pause = usePause()
   const next = useNext()
   const previous = usePrevious()
-  const shuffle = useAtomValue(queueShuffledAtom)
+  const shuffled = useStore(selectTrackPlayer.shuffled)
   const toggleShuffle = useToggleShuffle()
 
   let playPauseIcon: string
@@ -254,7 +244,7 @@ const PlayerControls = () => {
 
         <View style={controlsStyles.center}>
           <PressableOpacity onPress={() => toggleShuffle()} disabled={disabled}>
-            <Icon name="shuffle" size={26} color={shuffle ? colors.accent : 'white'} />
+            <Icon name="shuffle" size={26} color={shuffled ? colors.accent : 'white'} />
           </PressableOpacity>
         </View>
       </View>
@@ -304,7 +294,7 @@ type RootStackParamList = {
 type NowPlayingProps = NativeStackScreenProps<RootStackParamList, 'now-playing'>
 
 const NowPlayingView: React.FC<NowPlayingProps> = ({ navigation }) => {
-  const track = useAtomValue(currentTrackAtom)
+  const track = useStore(selectTrackPlayer.currentTrack)
 
   const back = useCallback(() => {
     if (navigation.canGoBack()) {

app/screens/Search.tsx

@@ -3,10 +3,10 @@ import Header from '@app/components/Header'
 import ListItem from '@app/components/ListItem'
 import NothingHere from '@app/components/NothingHere'
 import { useActiveListRefresh2 } from '@app/hooks/server'
+import { useSetQueue } from '@app/hooks/trackplayer'
 import { ListableItem, SearchResults, Song } from '@app/models/music'
 import { selectMusic } from '@app/state/music'
 import { useStore } from '@app/state/store'
-import { useSetQueue } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import debounce from 'lodash.debounce'

app/screens/SongListView.tsx

@@ -5,8 +5,8 @@ import ListItem from '@app/components/ListItem'
 import ListPlayerControls from '@app/components/ListPlayerControls'
 import NothingHere from '@app/components/NothingHere'
 import { useAlbumWithSongs, useCoverArtUri, usePlaylistWithSongs } from '@app/hooks/music'
+import { useSetQueue } from '@app/hooks/trackplayer'
 import { AlbumWithSongs, PlaylistWithSongs, Song } from '@app/models/music'
-import { useSetQueue } from '@app/state/trackplayer'
 import colors from '@app/styles/colors'
 import font from '@app/styles/font'
 import { useNavigation } from '@react-navigation/native'
@@ -46,7 +46,7 @@ const Songs = React.memo<{
 
   return (
     <>
-      <ListPlayerControls style={styles.controls} songs={songs} typeName={typeName} queueName={name} />
+      <ListPlayerControls style={styles.controls} songs={_songs} typeName={typeName} queueName={name} />
       <View style={styles.songs}>
         {_songs.map((s, i) => (
           <ListItem

app/screens/SplashPage.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'
 import { Text, View } from 'react-native'
 import RNFS from 'react-native-fs'
 import paths from '@app/util/paths'
+import { Store, useStore } from '@app/state/store'
 
 async function mkdir(path: string): Promise<void> {
   const exists = await RNFS.exists(path)
@@ -17,8 +18,11 @@ async function mkdir(path: string): Promise<void> {
   return await RNFS.mkdir(path)
 }
 
+const selectHydrated = (store: Store) => store.hydrated
+
 const SplashPage: React.FC<{}> = ({ children }) => {
   const [ready, setReady] = useState(false)
+  const hydrated = useStore(selectHydrated)
 
   const minSplashTime = new Promise(resolve => setTimeout(resolve, 1))
 
@@ -36,10 +40,11 @@ const SplashPage: React.FC<{}> = ({ children }) => {
     })
   })
 
-  if (!ready) {
+  if (ready && hydrated) {
+    return <View style={{ flex: 1 }}>{children}</View>
+  } else {
     return <Text>Loading THE GOOD SHIT...</Text>
   }
-  return <View style={{ flex: 1 }}>{children}</View>
 }
 
 export default SplashPage

app/service.ts

@@ -1,28 +0,0 @@
-import TrackPlayer, { Event } from 'react-native-track-player'
-import { trackPlayerCommands } from '@app/state/trackplayer'
-
-module.exports = async function () {
-  TrackPlayer.addEventListener(Event.RemotePlay, () => trackPlayerCommands.enqueue(TrackPlayer.play))
-  TrackPlayer.addEventListener(Event.RemotePause, () => trackPlayerCommands.enqueue(TrackPlayer.pause))
-  TrackPlayer.addEventListener(Event.RemoteStop, () => trackPlayerCommands.enqueue(TrackPlayer.destroy))
-
-  TrackPlayer.addEventListener(Event.RemoteDuck, data => {
-    if (data.permanent) {
-      trackPlayerCommands.enqueue(TrackPlayer.stop)
-      return
-    }
-
-    if (data.paused) {
-      trackPlayerCommands.enqueue(TrackPlayer.pause)
-    } else {
-      trackPlayerCommands.enqueue(TrackPlayer.play)
-    }
-  })
-
-  TrackPlayer.addEventListener(Event.RemoteNext, () =>
-    trackPlayerCommands.enqueue(() => TrackPlayer.skipToNext().catch(() => {})),
-  )
-  TrackPlayer.addEventListener(Event.RemotePrevious, () =>
-    trackPlayerCommands.enqueue(() => TrackPlayer.skipToPrevious().catch(() => {})),
-  )
-}

app/state/store.ts

@@ -3,8 +3,14 @@ import { createSettingsSlice, SettingsSlice } from '@app/state/settings'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import create from 'zustand'
 import { persist, StateStorage } from 'zustand/middleware'
+import { createTrackPlayerSlice, TrackPlayerSlice } from './trackplayer'
 
-export type Store = SettingsSlice & MusicSlice
+export type Store = SettingsSlice &
+  MusicSlice &
+  TrackPlayerSlice & {
+    hydrated: boolean
+    setHydrated: (hydrated: boolean) => void
+  }
 
 const storage: StateStorage = {
   getItem: async name => {
@@ -29,6 +35,10 @@ export const useStore = create<Store>(
     (set, get) => ({
       ...createSettingsSlice(set, get),
       ...createMusicSlice(set, get),
+      ...createTrackPlayerSlice(set, get),
+
+      hydrated: false,
+      setHydrated: hydrated => set({ hydrated }),
     }),
     {
       name: '@appStore',
@@ -37,6 +47,7 @@ export const useStore = create<Store>(
       onRehydrateStorage: _preState => {
         return (postState, _error) => {
           postState?.createClient(postState.settings.activeServer)
+          postState?.setHydrated(true)
         }
       },
     },

app/state/trackplayer.ts

@@ -1,388 +1,119 @@
-import { useCoverArtUri } from '@app/hooks/music'
-import { Song } from '@app/models/music'
 import PromiseQueue from '@app/util/PromiseQueue'
-import equal from 'fast-deep-equal'
+import produce from 'immer'
-import { atom } from 'jotai'
-import { useAtomCallback, useAtomValue, useUpdateAtom } from 'jotai/utils'
-import { atomWithStore } from 'jotai/zustand'
-import { useCallback, useEffect } from 'react'
 import TrackPlayer, { State, Track } from 'react-native-track-player'
-import create from 'zustand'
+import { GetState, SetState } from 'zustand'
+import { Store } from './store'
 
-type TrackExt = Track & {
+export type TrackExt = Track & {
   id: string
   coverArt?: string
 }
 
-type OptionalTrackExt = TrackExt | undefined
+export type Progress = {
-
-type Progress = {
   position: number
   duration: number
   buffered: number
 }
 
-type QueueStore = {
+export type TrackPlayerSlice = {
   name?: string
   setName: (name?: string) => void
+
   shuffleOrder?: number[]
   setShuffleOrder: (shuffleOrder?: number[]) => void
-  shuffled: () => boolean
+
+  playerState: State
+  setPlayerState: (playerState: State) => void
+
+  currentTrack?: TrackExt
+  currentTrackIdx?: number
+  setCurrentTrackIdx: (idx?: number) => void
+
+  queue: TrackExt[]
+  setQueue: (queue: TrackExt[]) => void
+
+  progress: Progress
+  setProgress: (progress: Progress) => void
+
   reset: () => void
 }
 
-const useStore = create<QueueStore>((set, get) => ({
+export const selectTrackPlayer = {
-  name: undefined,
+  name: (store: TrackPlayerSlice) => store.name,
-  setName: (name?: string) => set({ name }),
+  setName: (store: TrackPlayerSlice) => store.setName,
-  shuffleOrder: undefined,
-  setShuffleOrder: (shuffleOrder?: number[]) => set({ shuffleOrder }),
-  shuffled: () => !!get().shuffleOrder,
-  reset: () => set({ name: undefined, shuffleOrder: undefined }),
-}))
 
-const queueStoreAtom = atomWithStore(useStore)
+  shuffleOrder: (store: TrackPlayerSlice) => store.shuffleOrder,
+  setShuffleOrder: (store: TrackPlayerSlice) => store.setShuffleOrder,
+  shuffled: (store: TrackPlayerSlice) => !!store.shuffleOrder,
 
-export const queueNameAtom = atom<string | undefined, string | undefined>(
+  playerState: (store: TrackPlayerSlice) => store.playerState,
-  get => get(queueStoreAtom).name,
+  setPlayerState: (store: TrackPlayerSlice) => store.setPlayerState,
-  (get, set, update) => {
-    get(queueStoreAtom).setName(update)
-  },
-)
 
-const queueShuffleOrderAtom = atom<number[] | undefined, number[] | undefined>(
+  currentTrack: (store: TrackPlayerSlice) => store.currentTrack,
-  get => get(queueStoreAtom).shuffleOrder,
+  currentTrackIdx: (store: TrackPlayerSlice) => store.currentTrackIdx,
-  (get, set, update) => {
+  setCurrentTrackIdx: (store: TrackPlayerSlice) => store.setCurrentTrackIdx,
-    get(queueStoreAtom).setShuffleOrder(update)
-  },
-)
 
-export const queueShuffledAtom = atom<boolean>(get => get(queueStoreAtom).shuffled())
+  queue: (store: TrackPlayerSlice) => store.queue,
+  setQueue: (store: TrackPlayerSlice) => store.setQueue,
 
-const playerState = atom<State>(State.None)
+  progress: (store: TrackPlayerSlice) => store.progress,
-export const playerStateAtom = atom<State, State>(
+  setProgress: (store: TrackPlayerSlice) => store.setProgress,
-  get => get(playerState),
-  (get, set, update) => {
-    if (get(playerState) !== update) {
-      set(playerState, update)
-    }
-  },
-)
 
-const currentTrack = atom<OptionalTrackExt>(undefined)
+  reset: (store: TrackPlayerSlice) => store.reset,
-export const currentTrackAtom = atom<OptionalTrackExt, OptionalTrackExt>(
+}
-  get => get(currentTrack),
-  (get, set, update) => {
-    if (!equal(get(currentTrack), update)) {
-      set(currentTrack, update)
-    }
-  },
-)
-
-const _queue = atom<TrackExt[]>([])
-export const queueAtom = atom<TrackExt[], TrackExt[]>(
-  get => get(_queue),
-  (get, set, update) => {
-    if (!equal(get(_queue), update)) {
-      set(_queue, update)
-    }
-  },
-)
-
-const _progress = atom<Progress>({ position: 0, duration: 0, buffered: 0 })
-export const progressAtom = atom<Progress, Progress>(
-  get => get(_progress),
-  (get, set, update) => {
-    if (!equal(get(_progress), update)) {
-      set(_progress, update)
-    }
-  },
-)
-
-const progressSubs = atom(0)
-export const progressSubsAtom = atom(get => get(progressSubs))
-const addProgressSub = atom(null, (get, set) => {
-  set(progressSubs, get(progressSubs) + 1)
-})
-const removeProgressSub = atom(null, (get, set) => {
-  set(progressSubs, get(progressSubs) - 1)
-})
 
 export const trackPlayerCommands = new PromiseQueue(1)
 
-const getQueue = async (): Promise<TrackExt[]> => {
+export const createTrackPlayerSlice = (set: SetState<Store>, _get: GetState<Store>): TrackPlayerSlice => ({
+  name: undefined,
+  setName: name => set({ name }),
+
+  shuffleOrder: undefined,
+  setShuffleOrder: shuffleOrder => set({ shuffleOrder }),
+
+  playerState: State.None,
+  setPlayerState: playerState => set({ playerState }),
+
+  currentTrack: undefined,
+  currentTrackIdx: undefined,
+  setCurrentTrackIdx: idx => {
+    set(
+      produce<TrackPlayerSlice>(state => {
+        state.currentTrackIdx = idx
+        state.currentTrack = idx !== undefined ? state.queue[idx] : undefined
+      }),
+    )
+  },
+
+  queue: [],
+  setQueue: queue => set({ queue }),
+
+  progress: { position: 0, duration: 0, buffered: 0 },
+  setProgress: progress => set({ progress }),
+
+  reset: () => {
+    set({
+      name: undefined,
+      shuffleOrder: undefined,
+      playerState: State.None,
+      currentTrack: undefined,
+      currentTrackIdx: undefined,
+      queue: [],
+      progress: { position: 0, duration: 0, buffered: 0 },
+    })
+  },
+})
+
+export const getQueue = async (): Promise<TrackExt[]> => {
   return ((await TrackPlayer.getQueue()) as TrackExt[]) || []
 }
 
-const getTrack = async (index: number): Promise<TrackExt> => {
+export const getCurrentTrack = async (): Promise<number | undefined> => {
-  return ((await TrackPlayer.getTrack(index)) as TrackExt) || undefined
-}
-
-const getCurrentTrack = async (): Promise<number | undefined> => {
   const current = await TrackPlayer.getCurrentTrack()
   return typeof current === 'number' ? current : undefined
 }
 
-const getPlayerState = async (): Promise<State> => {
+export const getPlayerState = async (): Promise<State> => {
-  return (await TrackPlayer.getState()) || State.None
+  const state = await TrackPlayer.getState()
-}
+  return state || State.None
-
-const getProgress = async (): Promise<Progress> => {
-  const [position, duration, buffered] = await Promise.all([
-    TrackPlayer.getPosition(),
-    TrackPlayer.getDuration(),
-    TrackPlayer.getBufferedPosition(),
-  ])
-  return {
-    position: position || 0,
-    duration: duration || 0,
-    buffered: buffered || 0,
-  }
-}
-
-export const useRefreshQueue = () => {
-  const setQueue = useUpdateAtom(queueAtom)
-
-  return () =>
-    trackPlayerCommands.enqueue(async () => {
-      setQueue(await getQueue())
-    })
-}
-
-export const useRefreshCurrentTrack = () => {
-  const setCurrentTrack = useUpdateAtom(currentTrackAtom)
-
-  return () =>
-    trackPlayerCommands.enqueue(async () => {
-      const index = await TrackPlayer.getCurrentTrack()
-      if (typeof index === 'number' && index >= 0) {
-        setCurrentTrack(await getTrack(index))
-      } else {
-        setCurrentTrack(undefined)
-      }
-    })
-}
-
-export const useRefreshPlayerState = () => {
-  const setPlayerState = useUpdateAtom(playerStateAtom)
-
-  return () =>
-    trackPlayerCommands.enqueue(async () => {
-      setPlayerState(await getPlayerState())
-    })
-}
-
-export const useRefreshProgress = () => {
-  const setProgress = useUpdateAtom(progressAtom)
-
-  return () =>
-    trackPlayerCommands.enqueue(async () => {
-      setProgress(await getProgress())
-    })
-}
-
-export const usePlay = () => {
-  return () => trackPlayerCommands.enqueue(() => TrackPlayer.play())
-}
-
-export const usePause = () => {
-  return () => trackPlayerCommands.enqueue(() => TrackPlayer.pause())
-}
-
-export const usePrevious = () => {
-  const setCurrentTrack = useUpdateAtom(currentTrackAtom)
-
-  return () =>
-    trackPlayerCommands.enqueue(async () => {
-      const [current, queue] = await Promise.all([await TrackPlayer.getCurrentTrack(), await getQueue()])
-      if (current > 0) {
-        await TrackPlayer.skipToPrevious()
-        setCurrentTrack(queue[current - 1])
-      } else {
-        await TrackPlayer.seekTo(0)
-      }
-      await TrackPlayer.play()
-    })
-}
-
-export const useNext = () => {
-  const setCurrentTrack = useUpdateAtom(currentTrackAtom)
-
-  return () =>
-    trackPlayerCommands.enqueue(async () => {
-      const [current, queue] = await Promise.all([await TrackPlayer.getCurrentTrack(), await getQueue()])
-      if (current >= queue.length - 1) {
-        await TrackPlayer.skip(0)
-        await TrackPlayer.pause()
-        setCurrentTrack(queue[0])
-      } else {
-        await TrackPlayer.skipToNext()
-        setCurrentTrack(queue[current + 1])
-        await TrackPlayer.play()
-      }
-    })
-}
-
-export const useReset = (enqueue = true) => {
-  const setQueue = useUpdateAtom(queueAtom)
-  const setCurrentTrack = useUpdateAtom(currentTrackAtom)
-  const resetQueueStore = useStore(state => state.reset)
-
-  const reset = async () => {
-    await TrackPlayer.reset()
-    setQueue([])
-    setCurrentTrack(undefined)
-    resetQueueStore()
-  }
-
-  return enqueue ? () => trackPlayerCommands.enqueue(reset) : reset
-}
-
-function shuffleTracks(tracks: TrackExt[], firstTrack?: number) {
-  if (tracks.length === 0) {
-    return { tracks, shuffleOrder: [] }
-  }
-
-  const trackIndexes = tracks.map((_t, i) => i)
-  let shuffleOrder: number[] = []
-
-  for (let i = trackIndexes.length; i--; i > 0) {
-    const randi = Math.floor(Math.random() * (i + 1))
-    shuffleOrder.push(trackIndexes.splice(randi, 1)[0])
-  }
-
-  if (firstTrack !== undefined) {
-    shuffleOrder.splice(shuffleOrder.indexOf(firstTrack), 1)
-    shuffleOrder = [firstTrack, ...shuffleOrder]
-  }
-
-  tracks = shuffleOrder.map(i => tracks[i])
-
-  return { tracks, shuffleOrder }
-}
-
-function unshuffleTracks(tracks: TrackExt[], shuffleOrder: number[]): TrackExt[] {
-  if (tracks.length === 0 || shuffleOrder.length === 0) {
-    return tracks
-  }
-
-  return shuffleOrder.map((_v, i) => tracks[shuffleOrder.indexOf(i)])
-}
-
-export const useToggleShuffle = () => {
-  const setQueue = useUpdateAtom(queueAtom)
-  const setQueueShuffleOrder = useUpdateAtom(queueShuffleOrderAtom)
-  const getQueueShuffleOrder = useAtomCallback(useCallback(get => get(queueShuffleOrderAtom), []))
-
-  return async () => {
-    return trackPlayerCommands.enqueue(async () => {
-      const queue = await getQueue()
-      const current = await getCurrentTrack()
-      const queueShuffleOrder = await getQueueShuffleOrder()
-
-      await TrackPlayer.remove(queue.map((_t, i) => i).filter(i => i !== current))
-
-      if (queueShuffleOrder === undefined) {
-        let { tracks, shuffleOrder } = shuffleTracks(queue, current)
-        if (tracks.length > 0) {
-          tracks = tracks.slice(1)
-        }
-
-        await TrackPlayer.add(tracks)
-        setQueueShuffleOrder(shuffleOrder)
-      } else {
-        const tracks = unshuffleTracks(queue, queueShuffleOrder)
-
-        if (current !== undefined) {
-          const shuffledCurrent = queueShuffleOrder[current]
-          const tracks1 = tracks.slice(0, shuffledCurrent)
-          const tracks2 = tracks.slice(shuffledCurrent + 1)
-
-          await TrackPlayer.add(tracks2)
-          await TrackPlayer.add(tracks1, 0)
-        } else {
-          await TrackPlayer.add(tracks)
-        }
-
-        setQueueShuffleOrder(undefined)
-      }
-
-      setQueue(await getQueue())
-    })
-  }
-}
-
-export const useSetQueue = () => {
-  const setCurrentTrack = useUpdateAtom(currentTrackAtom)
-  const setQueue = useUpdateAtom(queueAtom)
-  const setQueueShuffleOrder = useUpdateAtom(queueShuffleOrderAtom)
-  const setQueueName = useUpdateAtom(queueNameAtom)
-  const reset = useReset(false)
-  const getQueueShuffled = useAtomCallback(useCallback(get => get(queueShuffledAtom), []))
-  const coverArtUri = useCoverArtUri()
-
-  return async (songs: Song[], name: string, playTrack?: number, shuffle?: boolean) =>
-    trackPlayerCommands.enqueue(async () => {
-      const shuffled = shuffle !== undefined ? shuffle : await getQueueShuffled()
-
-      await TrackPlayer.setupPlayer()
-      await reset()
-
-      if (songs.length === 0) {
-        return
-      }
-
-      let queue = songs.map(s => mapSongToTrack(s, coverArtUri))
-
-      if (shuffled) {
-        const { tracks, shuffleOrder } = shuffleTracks(queue, playTrack)
-        setQueueShuffleOrder(shuffleOrder)
-        queue = tracks
-        playTrack = 0
-      }
-
-      playTrack = playTrack || 0
-      setCurrentTrack(queue[playTrack])
-
-      if (playTrack === 0) {
-        await TrackPlayer.add(queue)
-        await TrackPlayer.play()
-      } else {
-        const tracks1 = queue.slice(0, playTrack)
-        const tracks2 = queue.slice(playTrack)
-
-        await TrackPlayer.add(tracks2)
-        await TrackPlayer.play()
-
-        await TrackPlayer.add(tracks1, 0)
-      }
-
-      setQueue(await getQueue())
-      setQueueName(name)
-    })
-}
-
-export const useProgress = () => {
-  const progress = useAtomValue(progressAtom)
-  const addSub = useUpdateAtom(addProgressSub)
-  const removeSub = useUpdateAtom(removeProgressSub)
-
-  useEffect(() => {
-    addSub()
-    return removeSub
-  }, [addSub, removeSub])
-
-  return progress
-}
-
-function mapSongToTrack(song: Song, coverArtUri: (coverArt?: string) => string | undefined): TrackExt {
-  return {
-    id: song.id,
-    title: song.title,
-    artist: song.artist || 'Unknown Artist',
-    album: song.album || 'Unknown Album',
-    url: song.streamUri,
-    artwork: coverArtUri(song.coverArt),
-    coverArt: song.coverArt,
-    duration: song.duration,
-  }
 }

app/storage/atomWithAsyncStorage.ts

@@ -1,10 +0,0 @@
-import { atomWithStorage } from 'jotai/utils'
-import { getItem, setItem } from '@app/storage/asyncstorage'
-
-export default <T>(key: string, defaultValue: T) => {
-  return atomWithStorage<T>(key, defaultValue, {
-    getItem: async () => (await getItem(key)) || defaultValue,
-    setItem: setItem,
-    delayInit: true,
-  })
-}

app/subsonic/hooks.ts

@@ -1,14 +0,0 @@
-import { useAtomValue } from 'jotai/utils'
-import { activeServerAtom } from '@app/state/settings'
-import { SubsonicApiClient } from '@app/subsonic/api'
-
-export const useSubsonicApi = () => {
-  const activeServer = useAtomValue(activeServerAtom)
-
-  return () => {
-    if (!activeServer) {
-      return undefined
-    }
-    return new SubsonicApiClient(activeServer)
-  }
-}

index.js

@@ -13,7 +13,7 @@ import { name as appName } from '@app/app.json'
 import TrackPlayer, { Capability } from 'react-native-track-player'
 
 AppRegistry.registerComponent(appName, () => App)
-TrackPlayer.registerPlaybackService(() => require('@app/service'))
+TrackPlayer.registerPlaybackService(() => require('@app/playbackservice'))
 
 async function start() {
   await TrackPlayer.setupPlayer()

package.json

@@ -18,7 +18,6 @@
     "@react-navigation/native": "^5.9.4",
     "fast-deep-equal": "^3.1.3",
     "immer": "^9.0.5",
-    "jotai": "^1.1.0",
     "lodash.debounce": "^4.0.8",
     "md5": "^2.3.0",
     "react": "17.0.1",

yarn.lock

@@ -4161,11 +4161,6 @@ joi@^17.2.1:
     "@sideway/formula" "^3.0.0"
     "@sideway/pinpoint" "^2.0.0"
 
-jotai@^1.1.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/jotai/-/jotai-1.2.2.tgz#631fd7ad44e9ac26cdf9874d52282c1cfe032807"
-  integrity sha512-iqkkUdWsH2Mk4HY1biba/8kA77+8liVBy8E0d8Nce29qow4h9mzdDhpTasAruuFYPycw6JvfZgL5RB0JJuIZjw==
-
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"