[C-2134 C-2030] Fix queueStatus on reachability, theme (#2854)

packages/mobile/src/components/offline-placeholder/OfflinePlaceholder.tsx

@@ -7,6 +7,7 @@ import IconNoWifi from 'app/assets/images/iconNoWifi.svg'
 import IconRefresh from 'app/assets/images/iconRefresh.svg'
 import { Button, Text, Tile } from 'app/components/core'
 import { makeStyles } from 'app/styles'
+import { useThemeColors } from 'app/utils/theme'
 
 import { messages } from './messages'
 
@@ -52,9 +53,11 @@ export const OfflinePlaceholder = (props: OfflinePlaceholderProps) => {
     return await Promise.all([NetInfo.refresh(), wait(800)])
   })
 
+  const { neutralLight4 } = useThemeColors()
+
   const body = (
     <View style={styles.container}>
-      <IconNoWifi />
+      <IconNoWifi fill={neutralLight4} />
       <Text style={styles.header}>{messages.title}</Text>
       <Text style={styles.subHeading}>{messages.subtitle}</Text>
       <Button

packages/mobile/src/screens/favorites-screen/NoTracksPlaceholder.tsx

@@ -1,10 +1,11 @@
 import { View } from 'react-native'
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
 
-import IconDownload from 'app/assets/images/iconDownloadGray.svg'
+import IconDownload from 'app/assets/images/iconDownload.svg'
 import { Text, Tile } from 'app/components/core'
 import { OfflinePlaceholder } from 'app/components/offline-placeholder'
 import { makeStyles } from 'app/styles'
+import { useThemeColors } from 'app/utils/theme'
 
 const messages = {
   noDownloadedTracks: 'Download Your Favorites So You Can Listen Offline!'
@@ -33,12 +34,14 @@ const useStyles = makeStyles(({ typography, spacing, palette }) => ({
 
 export const NoTracksPlaceholder = () => {
   const styles = useStyles()
+  const { neutralLight4 } = useThemeColors()
+
   return (
     <Animated.View entering={FadeIn} exiting={FadeOut}>
       <Tile style={styles.tile}>
         <View style={styles.container}>
           <View style={styles.iconRoot}>
-            <IconDownload />
+            <IconDownload fill={neutralLight4} height={35} width={35} />
           </View>
           <Text style={styles.text}>{messages.noDownloadedTracks}</Text>
         </View>

packages/mobile/src/screens/favorites-screen/OfflineContentBanner.tsx

@@ -7,6 +7,7 @@ import IconNoWifi from 'app/assets/images/iconNoWifiSmall.svg'
 import { Text, Tile } from 'app/components/core'
 import { useIsOfflineModeEnabled } from 'app/hooks/useIsOfflineModeEnabled'
 import { makeStyles } from 'app/styles'
+import { useThemeColors } from 'app/utils/theme'
 const { getIsReachable } = reachabilitySelectors
 
 const messages = {
@@ -42,13 +43,15 @@ export const OfflineContentBanner = () => {
   const styles = useStyles()
   const isOfflineModeEnabled = useIsOfflineModeEnabled()
   const isReachable = useSelector(getIsReachable)
+  const { neutralLight4 } = useThemeColors()
+
   if (!isOfflineModeEnabled || isReachable) return null
   return (
     <Animated.View exiting={SlideOutUp.duration(1000)}>
       <Tile style={styles.tile}>
         <View style={styles.container}>
           <View style={styles.iconRoot}>
-            <IconNoWifi style={styles.icon} />
+            <IconNoWifi style={styles.icon} fill={neutralLight4} />
           </View>
           <Text style={styles.text}>{messages.displayingOfflineContent}</Text>
         </View>

packages/mobile/src/screens/favorites-screen/utils.ts

@@ -1,11 +1,11 @@
-import type { Collection } from '@audius/common'
+import type { Collection, ID } from '@audius/common'
 
 import { OfflineDownloadStatus } from 'app/store/offline-downloads/slice'
 
 export const buildCollectionIdsToNumPlayableTracksMap = (
   collections: Collection[],
   isOffline: boolean,
-  offlineDownloadStatus: Record<string, OfflineDownloadStatus>
+  offlineDownloadStatus: Record<ID, OfflineDownloadStatus | undefined>
 ) => {
   if (!isOffline) {
     return collections.reduce((res, nextCollection) => {

packages/mobile/src/store/offline-downloads/sagas/downloadQueueSagas/watchReachability.ts

@@ -11,7 +11,11 @@ const { SET_UNREACHABLE, SET_REACHABLE } = reachabilityActions
 
 export function* watchReachability() {
   yield* takeEvery(SET_UNREACHABLE, function* pauseQueue() {
-    yield* put(updateQueueStatus({ queueStatus: QueueStatus.PAUSED }))
+    const queueStatus = yield* select(getQueueStatus)
+
+    if (queueStatus === QueueStatus.PROCESSING) {
+      yield* put(updateQueueStatus({ queueStatus: QueueStatus.PAUSED }))
+    }
   })
 
   yield* takeEvery(SET_REACHABLE, function* startQueue() {

packages/mobile/src/store/offline-downloads/sagas/downloadQueueSagas/workers/downloadCollectionWorker.ts

@@ -50,10 +50,7 @@ function* shouldAbortDownload(collectionId: CollectionId) {
 }
 
 export function* downloadCollectionWorker(collectionId: CollectionId) {
-  const queueItem = {
-    type: 'collection',
-    id: collectionId
-  } as DownloadQueueItem
+  const queueItem: DownloadQueueItem = { type: 'collection', id: collectionId }
   track(
     make({ eventName: EventNames.OFFLINE_MODE_DOWNLOAD_START, ...queueItem })
   )
@@ -69,7 +66,7 @@ export function* downloadCollectionWorker(collectionId: CollectionId) {
     yield* call(removeDownloadedCollection, collectionId)
     yield* put(requestDownloadQueuedItem())
   } else if (cancel) {
-    yield* put(cancelDownload({ type: 'collection', id: collectionId }))
+    yield* put(cancelDownload(queueItem))
     yield* call(removeDownloadedCollection, collectionId)
   } else if (jobResult === OfflineDownloadStatus.ERROR) {
     track(
@@ -78,7 +75,7 @@ export function* downloadCollectionWorker(collectionId: CollectionId) {
         ...queueItem
       })
     )
-    yield* put(errorDownload({ type: 'collection', id: collectionId }))
+    yield* put(errorDownload(queueItem))
     yield* call(removeDownloadedCollection, collectionId)
     yield* put(requestDownloadQueuedItem())
   } else if (jobResult === OfflineDownloadStatus.ABANDONED) {
@@ -88,7 +85,7 @@ export function* downloadCollectionWorker(collectionId: CollectionId) {
         ...queueItem
       })
     )
-    yield* put(abandonDownload({ type: 'collection', id: collectionId }))
+    yield* put(abandonDownload(queueItem))
     yield* call(removeDownloadedCollection, collectionId)
     yield* put(requestDownloadQueuedItem())
   } else if (jobResult === OfflineDownloadStatus.SUCCESS) {
@@ -98,7 +95,7 @@ export function* downloadCollectionWorker(collectionId: CollectionId) {
         ...queueItem
       })
     )
-    yield* put(completeDownload({ type: 'collection', id: collectionId }))
+    yield* put(completeDownload(queueItem))
     yield* put(requestDownloadQueuedItem())
   }
 }

packages/mobile/src/store/offline-downloads/sagas/downloadQueueSagas/workers/downloadTrackWorker.ts

@@ -48,7 +48,7 @@ function* shouldAbortDownload(trackId: ID) {
 }
 
 export function* downloadTrackWorker(trackId: ID) {
-  const queueItem = { type: 'track', id: trackId } as DownloadQueueItem
+  const queueItem: DownloadQueueItem = { type: 'track', id: trackId }
   track(
     make({ eventName: EventNames.OFFLINE_MODE_DOWNLOAD_START, ...queueItem })
   )
@@ -64,7 +64,7 @@ export function* downloadTrackWorker(trackId: ID) {
     yield* call(removeDownloadedTrack, trackId)
     yield* put(requestDownloadQueuedItem())
   } else if (cancel) {
-    yield* put(cancelDownload({ type: 'track', id: trackId }))
+    yield* put(cancelDownload(queueItem))
     yield* call(removeDownloadedTrack, trackId)
   } else if (jobResult === OfflineDownloadStatus.ERROR) {
     track(
@@ -73,7 +73,7 @@ export function* downloadTrackWorker(trackId: ID) {
         ...queueItem
       })
     )
-    yield* put(errorDownload({ type: 'track', id: trackId }))
+    yield* put(errorDownload(queueItem))
     yield* call(removeDownloadedTrack, trackId)
     yield* put(requestDownloadQueuedItem())
   } else if (jobResult === OfflineDownloadStatus.ABANDONED) {
@@ -83,7 +83,7 @@ export function* downloadTrackWorker(trackId: ID) {
         ...queueItem
       })
     )
-    yield* put(abandonDownload({ type: 'track', id: trackId }))
+    yield* put(abandonDownload(queueItem))
     yield* call(removeDownloadedTrack, trackId)
     yield* put(requestDownloadQueuedItem())
   } else if (jobResult === OfflineDownloadStatus.SUCCESS) {
@@ -93,9 +93,7 @@ export function* downloadTrackWorker(trackId: ID) {
         ...queueItem
       })
     )
-    yield* put(
-      completeDownload({ type: 'track', id: trackId, completedAt: Date.now() })
-    )
+    yield* put(completeDownload({ ...queueItem, completedAt: Date.now() }))
     yield* put(requestDownloadQueuedItem())
   }
 }

packages/mobile/src/store/offline-downloads/sagas/requestDownloadAllFavoritesSaga.ts

@@ -23,11 +23,7 @@ export function* requestDownloadAllFavoritesSaga() {
 }
 
 function* downloadAllFavorites() {
-  track(
-    make({
-      eventName: EventNames.OFFLINE_MODE_DOWNLOAD_ALL_TOGGLE_ON
-    })
-  )
+  track(make({ eventName: EventNames.OFFLINE_MODE_DOWNLOAD_ALL_TOGGLE_ON }))
   const currentUserId = yield* select(getUserId)
   if (!currentUserId) return