From 63cedeb84b409f190373f8e88ef3f7f4828ad127 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Thu, 22 Sep 2022 13:03:17 -0400
Subject: [PATCH 01/10] download cover art success

---
 .../src/services/track-downloader/index.ts    |  1 +
 .../track-downloader/track-downloader.ts      | 32 +++++++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 packages/mobile/src/services/track-downloader/index.ts
 create mode 100644 packages/mobile/src/services/track-downloader/track-downloader.ts

diff --git a/packages/mobile/src/services/track-downloader/index.ts b/packages/mobile/src/services/track-downloader/index.ts
new file mode 100644
index 0000000000..a43f998670
--- /dev/null
+++ b/packages/mobile/src/services/track-downloader/index.ts
@@ -0,0 +1 @@
+export * from './track-downloader'
diff --git a/packages/mobile/src/services/track-downloader/track-downloader.ts b/packages/mobile/src/services/track-downloader/track-downloader.ts
new file mode 100644
index 0000000000..95dce8b5ad
--- /dev/null
+++ b/packages/mobile/src/services/track-downloader/track-downloader.ts
@@ -0,0 +1,32 @@
+import { cacheTracksSelectors } from '@audius/common'
+import RNFS from 'react-native-fs'
+
+import { store } from 'app/store'
+const { getTracks, getTrack } = cacheTracksSelectors
+
+// import { apiClient } from '../audius-api-client'
+
+export const downloadAnyOldTrack = () => {
+  const tracks = getTracks(store.getState(), {})
+  const firstTrackId = Object.keys(tracks).pop()
+  return downloadTrack(firstTrackId)
+}
+
+export const downloadTrack = async (trackId) => {
+  const track = getTrack(store.getState(), { id: trackId })
+  const coverArtUri = track?._cover_art_sizes?.['150x150']
+  const destinationPath = `${
+    RNFS.CachesDirectoryPath
+  }/${coverArtUri?.replaceAll('/', '_')}`
+  console.log(coverArtUri)
+  console.log(destinationPath)
+  const downloadAction = coverArtUri
+    ? RNFS.downloadFile({
+        fromUrl: coverArtUri,
+        toFile: destinationPath
+      })
+    : null
+  const result = await downloadAction?.promise
+  console.log(result)
+  return result?.statusCode ?? null
+}

From 05e325225380d011548b3c3c7a97f9f935ab93e8 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Fri, 23 Sep 2022 12:30:56 -0400
Subject: [PATCH 02/10] track and cover art downloads working

---
 .../track-downloader/track-downloader.ts      | 106 ++++++++++++++----
 1 file changed, 87 insertions(+), 19 deletions(-)

diff --git a/packages/mobile/src/services/track-downloader/track-downloader.ts b/packages/mobile/src/services/track-downloader/track-downloader.ts
index 95dce8b5ad..b3ab1cb08c 100644
--- a/packages/mobile/src/services/track-downloader/track-downloader.ts
+++ b/packages/mobile/src/services/track-downloader/track-downloader.ts
@@ -1,32 +1,100 @@
-import { cacheTracksSelectors } from '@audius/common'
-import RNFS from 'react-native-fs'
+import type { Track, UserMetadata } from '@audius/common'
+import {
+  encodeHashId,
+  accountSelectors,
+  cacheTracksSelectors
+} from '@audius/common'
+import RNFS, { exists } from 'react-native-fs'
 
 import { store } from 'app/store'
+
+import { apiClient } from '../audius-api-client'
+const { getUserId } = accountSelectors
 const { getTracks, getTrack } = cacheTracksSelectors
 
-// import { apiClient } from '../audius-api-client'
+// TODO: make this CachesDirectoryPath, but Downloads is easier to test with
+// export const downloadsRoot = RNFS.CachesDirectoryPath
+export const downloadsRoot = RNFS.CachesDirectoryPath
 
 export const downloadAnyOldTrack = () => {
   const tracks = getTracks(store.getState(), {})
-  const firstTrackId = Object.keys(tracks).pop()
+  const firstTrackId = Object.values(tracks)[1]?.track_id
+  if (!firstTrackId) return
   return downloadTrack(firstTrackId)
 }
 
-export const downloadTrack = async (trackId) => {
-  const track = getTrack(store.getState(), { id: trackId })
-  const coverArtUri = track?._cover_art_sizes?.['150x150']
-  const destinationPath = `${
-    RNFS.CachesDirectoryPath
-  }/${coverArtUri?.replaceAll('/', '_')}`
-  console.log(coverArtUri)
-  console.log(destinationPath)
-  const downloadAction = coverArtUri
-    ? RNFS.downloadFile({
-        fromUrl: coverArtUri,
-        toFile: destinationPath
-      })
-    : null
-  const result = await downloadAction?.promise
+export const downloadTrack = async (trackId: number) => {
+  const state = store.getState()
+  const track = getTrack(state, { id: trackId })
+  if (!track) return false
+
+  const coverArtUri = getCoverArtUri(track)
+  const [coverArtDirectory, coverArtFileName] = getCoverArtDestination(track)
+  if (coverArtUri && coverArtDirectory && coverArtFileName) {
+    await downloadIfNotExists(coverArtUri, coverArtDirectory, coverArtFileName)
+  }
+  await tryDownloadTrackFromEachCreatorNode(track)
+}
+
+const tryDownloadTrackFromEachCreatorNode = async (track: Track) => {
+  const state = store.getState()
+  const user = (
+    await apiClient.getUser({
+      userId: track?.owner_id,
+      currentUserId: getUserId(state as any) // todo
+    })
+  )[0] as UserMetadata
+  console.log(user)
+  const encodedTrackId = encodeHashId(track.track_id)
+  const creatorNodeEndpoints = user.creator_node_endpoint.split(',')
+  for (const creatorNodeEndpoint of creatorNodeEndpoints) {
+    const uri = `${creatorNodeEndpoint}/tracks/stream/${encodedTrackId}`
+    const [audioDirectory, audioFileName] = getAudioDestination(track)
+    await downloadIfNotExists(uri, audioDirectory, audioFileName)
+  }
+}
+
+const getCoverArtUri = (track: Track) => {
+  return track._cover_art_sizes?.['150x150']
+}
+
+const getCoverArtDestination = (track: Track) => {
+  const uri = getCoverArtUri(track)
+  if (!uri) return [null, null]
+  const fileName = getFileNameFromUri(uri)
+  return [`${downloadsRoot}/tracks/${track.track_id}`, fileName]
+}
+
+// TODO: why isn't route id on the type, even though it's populated in state
+const getAudioDestination = (track) => {
+  const fileName = `${track.route_id.replaceAll('/', '_')}.mp3`
+  return [`${downloadsRoot}/tracks/${track.track_id}`, fileName]
+}
+
+const getFileNameFromUri = (uri: string) => {
+  return uri.split('/').slice(-1)[0]
+}
+
+const downloadIfNotExists = async (
+  uri: string,
+  destinationDirectory: string,
+  fileName: string,
+  overwrite?: boolean
+) => {
+  if (!uri) return null
+  const fullFilePath = `${destinationDirectory}/${fileName}`
+  if (!overwrite && (await exists(fullFilePath))) {
+    console.log(`file at ${fullFilePath} exists`)
+    return null
+  }
+
+  await RNFS.mkdir(destinationDirectory)
+
+  const result = await RNFS.downloadFile({
+    fromUrl: uri,
+    toFile: fullFilePath
+  })?.promise
+
   console.log(result)
   return result?.statusCode ?? null
 }

From 770d75203075bf5d51a7e373ec6402f67d1e165b Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Fri, 23 Sep 2022 17:24:37 -0400
Subject: [PATCH 03/10] hacked together offline playback works

---
 .../mobile/src/components/audio/Audio.tsx     | 27 +++++++--
 packages/mobile/src/hooks/useOfflineTrack.ts  | 23 ++++++++
 .../favorites-screen/FavoritesScreen.tsx      |  6 +-
 .../screens/favorites-screen/TracksTab.tsx    | 15 ++++-
 .../src/screens/feed-screen/FeedScreen.tsx    |  8 ++-
 .../track-downloader/track-downloader.ts      | 55 +++++++++++++++----
 packages/mobile/src/utils/fileSystem.ts       |  3 +
 7 files changed, 115 insertions(+), 22 deletions(-)
 create mode 100644 packages/mobile/src/hooks/useOfflineTrack.ts
 create mode 100644 packages/mobile/src/utils/fileSystem.ts

diff --git a/packages/mobile/src/components/audio/Audio.tsx b/packages/mobile/src/components/audio/Audio.tsx
index ccab748c7f..f266fb9fae 100644
--- a/packages/mobile/src/components/audio/Audio.tsx
+++ b/packages/mobile/src/components/audio/Audio.tsx
@@ -18,6 +18,7 @@ import type { OnProgressData } from 'react-native-video'
 import Video from 'react-native-video'
 import { useDispatch, useSelector } from 'react-redux'
 
+import { useOfflineTrackUri } from 'app/hooks/useOfflineTrack'
 import { audiusBackendInstance } from 'app/services/audius-backend-instance'
 
 import { useChromecast } from './GoogleCast'
@@ -331,6 +332,8 @@ export const Audio = () => {
     ]
   )
 
+  const offlineSrc = useOfflineTrackUri(track)
+
   if (!track || track.is_delete) return null
 
   const gateways = trackOwner
@@ -344,15 +347,27 @@ export const Audio = () => {
     gateways
   })
 
+  const source = offlineSrc
+    ? {
+        uri: offlineSrc
+      }
+    : m3u8
+    ? {
+        uri: m3u8,
+        type: 'm3u8'
+      }
+    : null
+
+  if (offlineSrc) {
+    console.log(`using offline src [${offlineSrc}]`)
+  }
+
   return (
     <View style={styles.backgroundVideo}>
-      {m3u8 && (
+      {source && (
         <Video
-          source={{
-            uri: m3u8,
-            // @ts-ignore: this is actually a valid prop override
-            type: 'm3u8'
-          }}
+          // @ts-ignore: type: m3u8 is actually a valid prop override
+          source={source}
           ref={videoRef}
           playInBackground
           playWhenInactive
diff --git a/packages/mobile/src/hooks/useOfflineTrack.ts b/packages/mobile/src/hooks/useOfflineTrack.ts
new file mode 100644
index 0000000000..19bd706b63
--- /dev/null
+++ b/packages/mobile/src/hooks/useOfflineTrack.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react'
+
+import type { Track } from '@audius/common'
+
+import {
+  getAudioDestination,
+  isTrackAvailableOffline
+} from 'app/services/track-downloader'
+import { pathJoin } from 'app/utils/fileSystem'
+
+export const useOfflineTrackUri = (track: Track | null) => {
+  const [offlineSrc, setOfflineSrc] = useState<String | null>()
+  useEffect(() => {
+    const checkTrackAvailableOffline = async () => {
+      if (!track) return
+      if (!(await isTrackAvailableOffline(track))) return
+      const audioFilePath = pathJoin(...getAudioDestination(track))
+      setOfflineSrc(`file://${audioFilePath}`)
+    }
+    checkTrackAvailableOffline()
+  }, [track])
+  return offlineSrc
+}
diff --git a/packages/mobile/src/screens/favorites-screen/FavoritesScreen.tsx b/packages/mobile/src/screens/favorites-screen/FavoritesScreen.tsx
index bdbaad9efd..c59f5cb42e 100644
--- a/packages/mobile/src/screens/favorites-screen/FavoritesScreen.tsx
+++ b/packages/mobile/src/screens/favorites-screen/FavoritesScreen.tsx
@@ -36,9 +36,9 @@ export const FavoritesScreen = () => {
   return (
     <Screen>
       <Header text='Favorites' />
-      <ScreenContent>
-        <TopTabNavigator screens={favoritesScreens} />
-      </ScreenContent>
+      {/* <ScreenContent> */}
+      <TopTabNavigator screens={favoritesScreens} />
+      {/* </ScreenContent> */}
     </Screen>
   )
 }
diff --git a/packages/mobile/src/screens/favorites-screen/TracksTab.tsx b/packages/mobile/src/screens/favorites-screen/TracksTab.tsx
index aed3aae1e5..c50737c28a 100644
--- a/packages/mobile/src/screens/favorites-screen/TracksTab.tsx
+++ b/packages/mobile/src/screens/favorites-screen/TracksTab.tsx
@@ -17,7 +17,7 @@ import {
 import { useFocusEffect } from '@react-navigation/native'
 import { useDispatch, useSelector } from 'react-redux'
 
-import { Tile, VirtualizedScrollView } from 'app/components/core'
+import { Button, Tile, VirtualizedScrollView } from 'app/components/core'
 import { EmptyTileCTA } from 'app/components/empty-tile-cta'
 import { TrackList } from 'app/components/track-list'
 import type { TrackMetadata } from 'app/components/track-list/types'
@@ -26,6 +26,7 @@ import { make, track } from 'app/services/analytics'
 import { makeStyles } from 'app/styles'
 
 import { FilterInput } from './FilterInput'
+import { downloadTrack, purgeAllDownloads } from 'app/services/track-downloader'
 const { getPlaying, getUid } = playerSelectors
 const { saveTrack, unsaveTrack } = tracksSocialActions
 const { getSavedTracksLineup, getSavedTracksStatus } = savedPageSelectors
@@ -73,6 +74,12 @@ export const TracksTab = () => {
   const savedTracksStatus = useSelector(getSavedTracksStatus)
   const savedTracks = useProxySelector(getTracks, [])
 
+  const handleDownloadAllTracks = useCallback(() => {
+    savedTracks.entries.forEach((track) => {
+      downloadTrack(track.track_id)
+    })
+  }, [savedTracks])
+
   const filterTrack = (track: TrackMetadata) => {
     const matchValue = filterValue?.toLowerCase()
     return (
@@ -125,6 +132,12 @@ export const TracksTab = () => {
           <EmptyTileCTA message={messages.emptyTabText} />
         ) : (
           <>
+            <Button
+              onPress={handleDownloadAllTracks}
+              title='Download All Favorites'
+            />
+            <Button onPress={purgeAllDownloads} title='Purge All Downloads' />
+
             <FilterInput
               value={filterValue}
               placeholder={messages.inputPlaceholder}
diff --git a/packages/mobile/src/screens/feed-screen/FeedScreen.tsx b/packages/mobile/src/screens/feed-screen/FeedScreen.tsx
index b057883507..b319d03d10 100644
--- a/packages/mobile/src/screens/feed-screen/FeedScreen.tsx
+++ b/packages/mobile/src/screens/feed-screen/FeedScreen.tsx
@@ -8,11 +8,12 @@ import {
 } from '@audius/common'
 import { useDispatch } from 'react-redux'
 
-import { Screen } from 'app/components/core'
+import { Button, Screen } from 'app/components/core'
 import { Header } from 'app/components/header'
 import { Lineup } from 'app/components/lineup'
 import { usePopToTopOnDrawerOpen } from 'app/hooks/usePopToTopOnDrawerOpen'
 import { make, track } from 'app/services/analytics'
+import { downloadAnyOldTrack } from 'app/services/track-downloader'
 
 import { ScreenContent } from '../ScreenContent'
 
@@ -42,7 +43,10 @@ export const FeedScreen = () => {
   return (
     <Screen>
       <Header text={messages.header}>
-        <FeedFilterButton />
+        {/* <FeedFilterButton /> */}
+        <>
+          <Button onPress={downloadAnyOldTrack} title='Download File' />
+        </>
       </Header>
       <ScreenContent>
         <Lineup
diff --git a/packages/mobile/src/services/track-downloader/track-downloader.ts b/packages/mobile/src/services/track-downloader/track-downloader.ts
index b3ab1cb08c..2bccfd2f83 100644
--- a/packages/mobile/src/services/track-downloader/track-downloader.ts
+++ b/packages/mobile/src/services/track-downloader/track-downloader.ts
@@ -7,6 +7,7 @@ import {
 import RNFS, { exists } from 'react-native-fs'
 
 import { store } from 'app/store'
+import { pathJoin } from 'app/utils/fileSystem'
 
 import { apiClient } from '../audius-api-client'
 const { getUserId } = accountSelectors
@@ -14,7 +15,7 @@ const { getTracks, getTrack } = cacheTracksSelectors
 
 // TODO: make this CachesDirectoryPath, but Downloads is easier to test with
 // export const downloadsRoot = RNFS.CachesDirectoryPath
-export const downloadsRoot = RNFS.CachesDirectoryPath
+export const downloadsRoot = pathJoin(RNFS.CachesDirectoryPath, 'downloads')
 
 export const downloadAnyOldTrack = () => {
   const tracks = getTracks(store.getState(), {})
@@ -44,13 +45,14 @@ const tryDownloadTrackFromEachCreatorNode = async (track: Track) => {
       currentUserId: getUserId(state as any) // todo
     })
   )[0] as UserMetadata
-  console.log(user)
   const encodedTrackId = encodeHashId(track.track_id)
   const creatorNodeEndpoints = user.creator_node_endpoint.split(',')
   for (const creatorNodeEndpoint of creatorNodeEndpoints) {
     const uri = `${creatorNodeEndpoint}/tracks/stream/${encodedTrackId}`
     const [audioDirectory, audioFileName] = getAudioDestination(track)
-    await downloadIfNotExists(uri, audioDirectory, audioFileName)
+    if (audioDirectory && audioFileName) {
+      await downloadIfNotExists(uri, audioDirectory, audioFileName)
+    }
   }
 }
 
@@ -58,19 +60,26 @@ const getCoverArtUri = (track: Track) => {
   return track._cover_art_sizes?.['150x150']
 }
 
-const getCoverArtDestination = (track: Track) => {
+const getCoverArtDestination = (track: Track): [string?, string?] => {
   const uri = getCoverArtUri(track)
-  if (!uri) return [null, null]
+  if (!uri) return []
   const fileName = getFileNameFromUri(uri)
   return [`${downloadsRoot}/tracks/${track.track_id}`, fileName]
 }
 
-// TODO: why isn't route id on the type, even though it's populated in state
-const getAudioDestination = (track) => {
+export const getAudioDestination = (track: Track): [string?, string?] => {
+  // TODO: why isn't route id on the type, even though it's populated in state
+  // TODO: handle case where route_id isn't populated
+  // @ts-ignore route_id actually does exist in state
   const fileName = `${track.route_id.replaceAll('/', '_')}.mp3`
   return [`${downloadsRoot}/tracks/${track.track_id}`, fileName]
 }
 
+export const isTrackAvailableOffline = async (track: Track) => {
+  const fullFilePath = pathJoin(...getAudioDestination(track))
+  return await exists(fullFilePath)
+}
+
 const getFileNameFromUri = (uri: string) => {
   return uri.split('/').slice(-1)[0]
 }
@@ -82,9 +91,9 @@ const downloadIfNotExists = async (
   overwrite?: boolean
 ) => {
   if (!uri) return null
-  const fullFilePath = `${destinationDirectory}/${fileName}`
+  const fullFilePath = pathJoin(destinationDirectory, fileName)
   if (!overwrite && (await exists(fullFilePath))) {
-    console.log(`file at ${fullFilePath} exists`)
+    console.log(`skipping existing file at ${pathFromRoot(fullFilePath)}`)
     return null
   }
 
@@ -95,6 +104,32 @@ const downloadIfNotExists = async (
     toFile: fullFilePath
   })?.promise
 
-  console.log(result)
+  console.log(
+    `Successful download: ${pathFromRoot(fullFilePath)} - ${
+      result.bytesWritten
+    }`
+  )
   return result?.statusCode ?? null
 }
+
+export const purgeAllDownloads = async () => {
+  console.log(`Before purge:`)
+  await readDirRec(downloadsRoot)
+  await RNFS.mkdir(downloadsRoot)
+  await RNFS.unlink(downloadsRoot)
+  console.log(`Before purge:`)
+  await readDirRec(downloadsRoot)
+}
+
+export const readDirRec = async (path) => {
+  const files = await RNFS.readDir(path)
+  files.forEach((item) => {
+    item.isFile()
+      ? console.log(`${pathFromRoot(item.path)} - ${item.size} bytes`)
+      : readDirRec(item.path)
+  })
+}
+
+const pathFromRoot = (string) => {
+  return string.replace(downloadsRoot, '~')
+}
diff --git a/packages/mobile/src/utils/fileSystem.ts b/packages/mobile/src/utils/fileSystem.ts
new file mode 100644
index 0000000000..2e18d14b03
--- /dev/null
+++ b/packages/mobile/src/utils/fileSystem.ts
@@ -0,0 +1,3 @@
+export const pathJoin = (...segments: (string | undefined)[]) => {
+  return segments.join('/')
+}

From 1be797ffe4cfa229138b3c2cd26c995eb3753ea0 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Mon, 26 Sep 2022 15:15:39 -0400
Subject: [PATCH 04/10] fix directory printing

---
 .../track-downloader/track-downloader.ts      | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/mobile/src/services/track-downloader/track-downloader.ts b/packages/mobile/src/services/track-downloader/track-downloader.ts
index 2bccfd2f83..2b7d1d3e52 100644
--- a/packages/mobile/src/services/track-downloader/track-downloader.ts
+++ b/packages/mobile/src/services/track-downloader/track-downloader.ts
@@ -115,19 +115,29 @@ const downloadIfNotExists = async (
 export const purgeAllDownloads = async () => {
   console.log(`Before purge:`)
   await readDirRec(downloadsRoot)
-  await RNFS.mkdir(downloadsRoot)
   await RNFS.unlink(downloadsRoot)
-  console.log(`Before purge:`)
+  await RNFS.mkdir(downloadsRoot)
+  console.log(`After purge:`)
   await readDirRec(downloadsRoot)
 }
 
 export const readDirRec = async (path) => {
   const files = await RNFS.readDir(path)
+  if (files.length === 0) {
+    console.log(`${pathFromRoot(path)} - empty`)
+  }
   files.forEach((item) => {
-    item.isFile()
-      ? console.log(`${pathFromRoot(item.path)} - ${item.size} bytes`)
-      : readDirRec(item.path)
+    if (item.isFile()) {
+      console.log(`${pathFromRoot(item.path)} - ${item.size} bytes`)
+    }
   })
+  await Promise.all(
+    files.map(async (item) => {
+      if (item.isDirectory()) {
+        await readDirRec(item.path)
+      }
+    })
+  )
 }
 
 const pathFromRoot = (string) => {

From 0ad847d59ec889aed41da922cf92f5850bfe2c64 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Mon, 26 Sep 2022 15:16:45 -0400
Subject: [PATCH 05/10] rename to offline-downloader

---
 packages/mobile/src/hooks/useOfflineTrack.ts                 | 2 +-
 packages/mobile/src/screens/favorites-screen/TracksTab.tsx   | 5 ++++-
 packages/mobile/src/screens/feed-screen/FeedScreen.tsx       | 2 +-
 packages/mobile/src/services/offline-downloader/index.ts     | 1 +
 .../offline-downloader.ts}                                   | 0
 packages/mobile/src/services/track-downloader/index.ts       | 1 -
 6 files changed, 7 insertions(+), 4 deletions(-)
 create mode 100644 packages/mobile/src/services/offline-downloader/index.ts
 rename packages/mobile/src/services/{track-downloader/track-downloader.ts => offline-downloader/offline-downloader.ts} (100%)
 delete mode 100644 packages/mobile/src/services/track-downloader/index.ts

diff --git a/packages/mobile/src/hooks/useOfflineTrack.ts b/packages/mobile/src/hooks/useOfflineTrack.ts
index 19bd706b63..f0c21c9a0b 100644
--- a/packages/mobile/src/hooks/useOfflineTrack.ts
+++ b/packages/mobile/src/hooks/useOfflineTrack.ts
@@ -5,7 +5,7 @@ import type { Track } from '@audius/common'
 import {
   getAudioDestination,
   isTrackAvailableOffline
-} from 'app/services/track-downloader'
+} from 'app/services/offline-downloader'
 import { pathJoin } from 'app/utils/fileSystem'
 
 export const useOfflineTrackUri = (track: Track | null) => {
diff --git a/packages/mobile/src/screens/favorites-screen/TracksTab.tsx b/packages/mobile/src/screens/favorites-screen/TracksTab.tsx
index c50737c28a..cab35ace33 100644
--- a/packages/mobile/src/screens/favorites-screen/TracksTab.tsx
+++ b/packages/mobile/src/screens/favorites-screen/TracksTab.tsx
@@ -26,7 +26,10 @@ import { make, track } from 'app/services/analytics'
 import { makeStyles } from 'app/styles'
 
 import { FilterInput } from './FilterInput'
-import { downloadTrack, purgeAllDownloads } from 'app/services/track-downloader'
+import {
+  downloadTrack,
+  purgeAllDownloads
+} from 'app/services/offline-downloader'
 const { getPlaying, getUid } = playerSelectors
 const { saveTrack, unsaveTrack } = tracksSocialActions
 const { getSavedTracksLineup, getSavedTracksStatus } = savedPageSelectors
diff --git a/packages/mobile/src/screens/feed-screen/FeedScreen.tsx b/packages/mobile/src/screens/feed-screen/FeedScreen.tsx
index b319d03d10..ecd4e948f0 100644
--- a/packages/mobile/src/screens/feed-screen/FeedScreen.tsx
+++ b/packages/mobile/src/screens/feed-screen/FeedScreen.tsx
@@ -13,7 +13,7 @@ import { Header } from 'app/components/header'
 import { Lineup } from 'app/components/lineup'
 import { usePopToTopOnDrawerOpen } from 'app/hooks/usePopToTopOnDrawerOpen'
 import { make, track } from 'app/services/analytics'
-import { downloadAnyOldTrack } from 'app/services/track-downloader'
+import { downloadAnyOldTrack } from 'app/services/offline-downloader'
 
 import { ScreenContent } from '../ScreenContent'
 
diff --git a/packages/mobile/src/services/offline-downloader/index.ts b/packages/mobile/src/services/offline-downloader/index.ts
new file mode 100644
index 0000000000..75b0595388
--- /dev/null
+++ b/packages/mobile/src/services/offline-downloader/index.ts
@@ -0,0 +1 @@
+export * from './offline-downloader'
diff --git a/packages/mobile/src/services/track-downloader/track-downloader.ts b/packages/mobile/src/services/offline-downloader/offline-downloader.ts
similarity index 100%
rename from packages/mobile/src/services/track-downloader/track-downloader.ts
rename to packages/mobile/src/services/offline-downloader/offline-downloader.ts
diff --git a/packages/mobile/src/services/track-downloader/index.ts b/packages/mobile/src/services/track-downloader/index.ts
deleted file mode 100644
index a43f998670..0000000000
--- a/packages/mobile/src/services/track-downloader/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './track-downloader'

From cec21115e41fbc59ff59a242f835f25881df28b6 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Tue, 27 Sep 2022 11:54:35 -0400
Subject: [PATCH 06/10] split out storage logic to its own file

---
 packages/common/src/models/Track.ts           |  10 +-
 packages/mobile/src/hooks/useOfflineTrack.ts  |   8 +-
 .../src/services/offline-downloader/index.ts  |   1 +
 .../offline-downloader/offline-downloader.ts  | 112 ++++++------------
 .../offline-downloader/offline-storage.ts     |  77 ++++++++++++
 5 files changed, 126 insertions(+), 82 deletions(-)
 create mode 100644 packages/mobile/src/services/offline-downloader/offline-storage.ts

diff --git a/packages/common/src/models/Track.ts b/packages/common/src/models/Track.ts
index 2c23f6f820..ef9d9aa59d 100644
--- a/packages/common/src/models/Track.ts
+++ b/packages/common/src/models/Track.ts
@@ -94,7 +94,15 @@ export type TrackMetadata = {
   // Added fields
   dateListened?: string
   duration: number
-} & Timestamped
+} & OfflineTrackMetadata &
+  Timestamped
+
+// This is available on mobile for offline tracks
+export type OfflineTrackMetadata = {
+  downloaded_from_collection: string[]
+  download_completed_time: EpochTimeStamp
+  last_verified_time: EpochTimeStamp
+}
 
 export type Stem = {
   track_id: ID
diff --git a/packages/mobile/src/hooks/useOfflineTrack.ts b/packages/mobile/src/hooks/useOfflineTrack.ts
index f0c21c9a0b..9ee8e252f0 100644
--- a/packages/mobile/src/hooks/useOfflineTrack.ts
+++ b/packages/mobile/src/hooks/useOfflineTrack.ts
@@ -3,8 +3,8 @@ import { useEffect, useState } from 'react'
 import type { Track } from '@audius/common'
 
 import {
-  getAudioDestination,
-  isTrackAvailableOffline
+  getLocalAudioPath,
+  isAudioAvailableOffline
 } from 'app/services/offline-downloader'
 import { pathJoin } from 'app/utils/fileSystem'
 
@@ -13,8 +13,8 @@ export const useOfflineTrackUri = (track: Track | null) => {
   useEffect(() => {
     const checkTrackAvailableOffline = async () => {
       if (!track) return
-      if (!(await isTrackAvailableOffline(track))) return
-      const audioFilePath = pathJoin(...getAudioDestination(track))
+      if (!(await isAudioAvailableOffline(track))) return
+      const audioFilePath = pathJoin(...getLocalAudioPath(track))
       setOfflineSrc(`file://${audioFilePath}`)
     }
     checkTrackAvailableOffline()
diff --git a/packages/mobile/src/services/offline-downloader/index.ts b/packages/mobile/src/services/offline-downloader/index.ts
index 75b0595388..95f6b5373a 100644
--- a/packages/mobile/src/services/offline-downloader/index.ts
+++ b/packages/mobile/src/services/offline-downloader/index.ts
@@ -1 +1,2 @@
 export * from './offline-downloader'
+export * from './offline-storage'
diff --git a/packages/mobile/src/services/offline-downloader/offline-downloader.ts b/packages/mobile/src/services/offline-downloader/offline-downloader.ts
index 2b7d1d3e52..13773830d2 100644
--- a/packages/mobile/src/services/offline-downloader/offline-downloader.ts
+++ b/packages/mobile/src/services/offline-downloader/offline-downloader.ts
@@ -1,3 +1,5 @@
+import path from 'path'
+
 import type { Track, UserMetadata } from '@audius/common'
 import {
   encodeHashId,
@@ -7,34 +9,46 @@ import {
 import RNFS, { exists } from 'react-native-fs'
 
 import { store } from 'app/store'
-import { pathJoin } from 'app/utils/fileSystem'
 
 import { apiClient } from '../audius-api-client'
-const { getUserId } = accountSelectors
-const { getTracks, getTrack } = cacheTracksSelectors
 
-// TODO: make this CachesDirectoryPath, but Downloads is easier to test with
-// export const downloadsRoot = RNFS.CachesDirectoryPath
-export const downloadsRoot = pathJoin(RNFS.CachesDirectoryPath, 'downloads')
-
-export const downloadAnyOldTrack = () => {
-  const tracks = getTracks(store.getState(), {})
-  const firstTrackId = Object.values(tracks)[1]?.track_id
-  if (!firstTrackId) return
-  return downloadTrack(firstTrackId)
-}
+import {
+  getLocalAudioPath,
+  getLocalCoverArtPath,
+  getLocalTrackJsonPath,
+  getPathFromRoot
+} from './offline-storage'
+const { getUserId } = accountSelectors
+const { getTrack } = cacheTracksSelectors
 
-export const downloadTrack = async (trackId: number) => {
+// Main entrypoint - perform all steps required to complete a download
+export const downloadTrack = async (trackId: number, collection: string) => {
   const state = store.getState()
   const track = getTrack(state, { id: trackId })
   if (!track) return false
 
   const coverArtUri = getCoverArtUri(track)
-  const [coverArtDirectory, coverArtFileName] = getCoverArtDestination(track)
+  const [coverArtDirectory, coverArtFileName] = getLocalCoverArtPath(track)
   if (coverArtUri && coverArtDirectory && coverArtFileName) {
     await downloadIfNotExists(coverArtUri, coverArtDirectory, coverArtFileName)
   }
   await tryDownloadTrackFromEachCreatorNode(track)
+  await writeTrackJson(track, collection)
+}
+
+// Unlike mp3 and album art, here we overwrite even if the file exists to ensure we have the latest
+const writeTrackJson = async (track: Track, collection: string) => {
+  const trackToWrite: Track = {
+    ...track,
+    downloaded_from_collection: [
+      ...new Set([collection, ...(track.downloaded_from_collection ?? [])])
+    ],
+    download_completed_time: Date.now(),
+    last_verified_time: Date.now()
+  }
+
+  const pathToWrite = getLocalTrackJsonPath(track)
+  await RNFS.write(pathToWrite, JSON.stringify(trackToWrite))
 }
 
 const tryDownloadTrackFromEachCreatorNode = async (track: Track) => {
@@ -42,48 +56,24 @@ const tryDownloadTrackFromEachCreatorNode = async (track: Track) => {
   const user = (
     await apiClient.getUser({
       userId: track?.owner_id,
-      currentUserId: getUserId(state as any) // todo
+      currentUserId: getUserId(state)
     })
   )[0] as UserMetadata
   const encodedTrackId = encodeHashId(track.track_id)
   const creatorNodeEndpoints = user.creator_node_endpoint.split(',')
   for (const creatorNodeEndpoint of creatorNodeEndpoints) {
     const uri = `${creatorNodeEndpoint}/tracks/stream/${encodedTrackId}`
-    const [audioDirectory, audioFileName] = getAudioDestination(track)
+    const [audioDirectory, audioFileName] = getLocalAudioPath(track)
     if (audioDirectory && audioFileName) {
       await downloadIfNotExists(uri, audioDirectory, audioFileName)
     }
   }
 }
 
-const getCoverArtUri = (track: Track) => {
+export const getCoverArtUri = (track: Track) => {
   return track._cover_art_sizes?.['150x150']
 }
 
-const getCoverArtDestination = (track: Track): [string?, string?] => {
-  const uri = getCoverArtUri(track)
-  if (!uri) return []
-  const fileName = getFileNameFromUri(uri)
-  return [`${downloadsRoot}/tracks/${track.track_id}`, fileName]
-}
-
-export const getAudioDestination = (track: Track): [string?, string?] => {
-  // TODO: why isn't route id on the type, even though it's populated in state
-  // TODO: handle case where route_id isn't populated
-  // @ts-ignore route_id actually does exist in state
-  const fileName = `${track.route_id.replaceAll('/', '_')}.mp3`
-  return [`${downloadsRoot}/tracks/${track.track_id}`, fileName]
-}
-
-export const isTrackAvailableOffline = async (track: Track) => {
-  const fullFilePath = pathJoin(...getAudioDestination(track))
-  return await exists(fullFilePath)
-}
-
-const getFileNameFromUri = (uri: string) => {
-  return uri.split('/').slice(-1)[0]
-}
-
 const downloadIfNotExists = async (
   uri: string,
   destinationDirectory: string,
@@ -91,9 +81,9 @@ const downloadIfNotExists = async (
   overwrite?: boolean
 ) => {
   if (!uri) return null
-  const fullFilePath = pathJoin(destinationDirectory, fileName)
+  const fullFilePath = path.join(destinationDirectory, fileName)
   if (!overwrite && (await exists(fullFilePath))) {
-    console.log(`skipping existing file at ${pathFromRoot(fullFilePath)}`)
+    console.log(`skipping existing file at ${getPathFromRoot(fullFilePath)}`)
     return null
   }
 
@@ -105,41 +95,9 @@ const downloadIfNotExists = async (
   })?.promise
 
   console.log(
-    `Successful download: ${pathFromRoot(fullFilePath)} - ${
+    `Successful download: ${getPathFromRoot(fullFilePath)} - ${
       result.bytesWritten
     }`
   )
   return result?.statusCode ?? null
 }
-
-export const purgeAllDownloads = async () => {
-  console.log(`Before purge:`)
-  await readDirRec(downloadsRoot)
-  await RNFS.unlink(downloadsRoot)
-  await RNFS.mkdir(downloadsRoot)
-  console.log(`After purge:`)
-  await readDirRec(downloadsRoot)
-}
-
-export const readDirRec = async (path) => {
-  const files = await RNFS.readDir(path)
-  if (files.length === 0) {
-    console.log(`${pathFromRoot(path)} - empty`)
-  }
-  files.forEach((item) => {
-    if (item.isFile()) {
-      console.log(`${pathFromRoot(item.path)} - ${item.size} bytes`)
-    }
-  })
-  await Promise.all(
-    files.map(async (item) => {
-      if (item.isDirectory()) {
-        await readDirRec(item.path)
-      }
-    })
-  )
-}
-
-const pathFromRoot = (string) => {
-  return string.replace(downloadsRoot, '~')
-}
diff --git a/packages/mobile/src/services/offline-downloader/offline-storage.ts b/packages/mobile/src/services/offline-downloader/offline-storage.ts
new file mode 100644
index 0000000000..8eac3c3832
--- /dev/null
+++ b/packages/mobile/src/services/offline-downloader/offline-storage.ts
@@ -0,0 +1,77 @@
+import path from 'path'
+
+import type { Track } from '@audius/common'
+import RNFS, { exists } from 'react-native-fs'
+
+import { getCoverArtUri } from './offline-downloader'
+
+export const downloadsRoot = path.join(RNFS.CachesDirectoryPath, 'downloads')
+
+export const getLocalTrackRoot = (track: any) => {
+  return path.join(downloadsRoot, `/tracks`)
+}
+
+export const getPathFromRoot = (string: string) => {
+  return string.replace(downloadsRoot, '~')
+}
+
+// Track Json
+
+export const getLocalTrackJsonPath = (track: Track) => {
+  return path.join(getLocalTrackRoot(track), `${track.track_id}.json`)
+}
+
+// Cover Art
+
+export const getLocalCoverArtPath = (track: Track): [string?, string?] => {
+  const uri = getCoverArtUri(track)
+  if (!uri) return []
+  const fileName = getArtFileNameFromUri(uri)
+  return [`${downloadsRoot}/tracks/${track.track_id}`, fileName]
+}
+
+export const getArtFileNameFromUri = (uri: string) => {
+  return uri.split('/').slice(-1)[0]
+}
+
+// Audio
+
+export const getLocalAudioPath = (track: Track): [string, string] => {
+  const fileName = `${track.route_id.replaceAll('/', '_')}.mp3`
+  return [`${downloadsRoot}/tracks/${track.track_id}`, fileName]
+}
+
+export const isAudioAvailableOffline = async (track: Track) => {
+  const fullFilePath = path.join(...getLocalAudioPath(track))
+  return await exists(fullFilePath)
+}
+
+// Storage management
+
+export const purgeAllDownloads = async () => {
+  console.log(`Before purge:`)
+  await readDirRec(downloadsRoot)
+  await RNFS.unlink(downloadsRoot)
+  await RNFS.mkdir(downloadsRoot)
+  console.log(`After purge:`)
+  await readDirRec(downloadsRoot)
+}
+
+export const readDirRec = async (path: string) => {
+  const files = await RNFS.readDir(path)
+  if (files.length === 0) {
+    console.log(`${getPathFromRoot(path)} - empty`)
+  }
+  files.forEach((item) => {
+    if (item.isFile()) {
+      console.log(`${getPathFromRoot(item.path)} - ${item.size} bytes`)
+    }
+  })
+  await Promise.all(
+    files.map(async (item) => {
+      if (item.isDirectory()) {
+        await readDirRec(item.path)
+      }
+    })
+  )
+}

From fd78a3d329b84db842eeadd4cf845491c0ba95aa Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Wed, 28 Sep 2022 16:34:24 -0400
Subject: [PATCH 07/10] remove UI elements; cleanup

---
 packages/common/src/models/Track.ts           |  5 +--
 .../mobile/src/components/audio/Audio.tsx     |  4 ---
 .../favorites-screen/FavoritesScreen.tsx      | 16 +++++++--
 .../screens/favorites-screen/TracksTab.tsx    | 35 ++++++++++++-------
 .../src/screens/feed-screen/FeedScreen.tsx    |  8 ++---
 .../offline-downloader/offline-downloader.ts  | 15 +++++---
 6 files changed, 51 insertions(+), 32 deletions(-)

diff --git a/packages/common/src/models/Track.ts b/packages/common/src/models/Track.ts
index ef9d9aa59d..a3dc40914a 100644
--- a/packages/common/src/models/Track.ts
+++ b/packages/common/src/models/Track.ts
@@ -94,8 +94,9 @@ export type TrackMetadata = {
   // Added fields
   dateListened?: string
   duration: number
-} & OfflineTrackMetadata &
-  Timestamped
+
+  offline?: OfflineTrackMetadata
+} & Timestamped
 
 // This is available on mobile for offline tracks
 export type OfflineTrackMetadata = {
diff --git a/packages/mobile/src/components/audio/Audio.tsx b/packages/mobile/src/components/audio/Audio.tsx
index f266fb9fae..5b5f008cf4 100644
--- a/packages/mobile/src/components/audio/Audio.tsx
+++ b/packages/mobile/src/components/audio/Audio.tsx
@@ -358,10 +358,6 @@ export const Audio = () => {
       }
     : null
 
-  if (offlineSrc) {
-    console.log(`using offline src [${offlineSrc}]`)
-  }
-
   return (
     <View style={styles.backgroundVideo}>
       {source && (
diff --git a/packages/mobile/src/screens/favorites-screen/FavoritesScreen.tsx b/packages/mobile/src/screens/favorites-screen/FavoritesScreen.tsx
index c59f5cb42e..cdf510029e 100644
--- a/packages/mobile/src/screens/favorites-screen/FavoritesScreen.tsx
+++ b/packages/mobile/src/screens/favorites-screen/FavoritesScreen.tsx
@@ -1,3 +1,5 @@
+import { FeatureFlags } from '@audius/common'
+
 import IconAlbum from 'app/assets/images/iconAlbum.svg'
 import IconNote from 'app/assets/images/iconNote.svg'
 import IconPlaylists from 'app/assets/images/iconPlaylists.svg'
@@ -5,6 +7,7 @@ import { Screen } from 'app/components/core'
 import { Header } from 'app/components/header'
 import { TopTabNavigator } from 'app/components/top-tab-bar'
 import { usePopToTopOnDrawerOpen } from 'app/hooks/usePopToTopOnDrawerOpen'
+import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 
 import { ScreenContent } from '../ScreenContent'
 
@@ -32,13 +35,20 @@ const favoritesScreens = [
 
 export const FavoritesScreen = () => {
   usePopToTopOnDrawerOpen()
+  const { isEnabled: isOfflineModeEnabled } = useFeatureFlag(
+    FeatureFlags.OFFLINE_MODE_ENABLED
+  )
 
   return (
     <Screen>
       <Header text='Favorites' />
-      {/* <ScreenContent> */}
-      <TopTabNavigator screens={favoritesScreens} />
-      {/* </ScreenContent> */}
+      {isOfflineModeEnabled ? (
+        <TopTabNavigator screens={favoritesScreens} />
+      ) : (
+        <ScreenContent>
+          <TopTabNavigator screens={favoritesScreens} />
+        </ScreenContent>
+      )}
     </Screen>
   )
 }
diff --git a/packages/mobile/src/screens/favorites-screen/TracksTab.tsx b/packages/mobile/src/screens/favorites-screen/TracksTab.tsx
index cab35ace33..acecc67ab5 100644
--- a/packages/mobile/src/screens/favorites-screen/TracksTab.tsx
+++ b/packages/mobile/src/screens/favorites-screen/TracksTab.tsx
@@ -2,6 +2,7 @@ import { useCallback, useState } from 'react'
 
 import type { ID, UID } from '@audius/common'
 import {
+  FeatureFlags,
   useProxySelector,
   savedPageActions,
   playerSelectors,
@@ -22,14 +23,15 @@ import { EmptyTileCTA } from 'app/components/empty-tile-cta'
 import { TrackList } from 'app/components/track-list'
 import type { TrackMetadata } from 'app/components/track-list/types'
 import { WithLoader } from 'app/components/with-loader/WithLoader'
+import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { make, track } from 'app/services/analytics'
-import { makeStyles } from 'app/styles'
-
-import { FilterInput } from './FilterInput'
 import {
   downloadTrack,
   purgeAllDownloads
 } from 'app/services/offline-downloader'
+import { makeStyles } from 'app/styles'
+
+import { FilterInput } from './FilterInput'
 const { getPlaying, getUid } = playerSelectors
 const { saveTrack, unsaveTrack } = tracksSocialActions
 const { getSavedTracksLineup, getSavedTracksStatus } = savedPageSelectors
@@ -64,7 +66,9 @@ const getTracks = makeGetTableMetadatas(getSavedTracksLineup)
 export const TracksTab = () => {
   const dispatch = useDispatch()
   const styles = useStyles()
-
+  const { isEnabled: isOfflineModeEnabled } = useFeatureFlag(
+    FeatureFlags.OFFLINE_MODE_ENABLED
+  )
   const handleFetchSaves = useCallback(() => {
     dispatch(fetchSaves())
   }, [dispatch])
@@ -78,10 +82,11 @@ export const TracksTab = () => {
   const savedTracks = useProxySelector(getTracks, [])
 
   const handleDownloadAllTracks = useCallback(() => {
+    if (!isOfflineModeEnabled) return
     savedTracks.entries.forEach((track) => {
-      downloadTrack(track.track_id)
+      downloadTrack(track.track_id, 'favorites')
     })
-  }, [savedTracks])
+  }, [isOfflineModeEnabled, savedTracks])
 
   const filterTrack = (track: TrackMetadata) => {
     const matchValue = filterValue?.toLowerCase()
@@ -135,12 +140,18 @@ export const TracksTab = () => {
           <EmptyTileCTA message={messages.emptyTabText} />
         ) : (
           <>
-            <Button
-              onPress={handleDownloadAllTracks}
-              title='Download All Favorites'
-            />
-            <Button onPress={purgeAllDownloads} title='Purge All Downloads' />
-
+            {isOfflineModeEnabled ? (
+              <>
+                <Button
+                  onPress={handleDownloadAllTracks}
+                  title='Download All Favorites'
+                />
+                <Button
+                  onPress={purgeAllDownloads}
+                  title='Purge All Downloads'
+                />
+              </>
+            ) : null}
             <FilterInput
               value={filterValue}
               placeholder={messages.inputPlaceholder}
diff --git a/packages/mobile/src/screens/feed-screen/FeedScreen.tsx b/packages/mobile/src/screens/feed-screen/FeedScreen.tsx
index ecd4e948f0..b057883507 100644
--- a/packages/mobile/src/screens/feed-screen/FeedScreen.tsx
+++ b/packages/mobile/src/screens/feed-screen/FeedScreen.tsx
@@ -8,12 +8,11 @@ import {
 } from '@audius/common'
 import { useDispatch } from 'react-redux'
 
-import { Button, Screen } from 'app/components/core'
+import { Screen } from 'app/components/core'
 import { Header } from 'app/components/header'
 import { Lineup } from 'app/components/lineup'
 import { usePopToTopOnDrawerOpen } from 'app/hooks/usePopToTopOnDrawerOpen'
 import { make, track } from 'app/services/analytics'
-import { downloadAnyOldTrack } from 'app/services/offline-downloader'
 
 import { ScreenContent } from '../ScreenContent'
 
@@ -43,10 +42,7 @@ export const FeedScreen = () => {
   return (
     <Screen>
       <Header text={messages.header}>
-        {/* <FeedFilterButton /> */}
-        <>
-          <Button onPress={downloadAnyOldTrack} title='Download File' />
-        </>
+        <FeedFilterButton />
       </Header>
       <ScreenContent>
         <Lineup
diff --git a/packages/mobile/src/services/offline-downloader/offline-downloader.ts b/packages/mobile/src/services/offline-downloader/offline-downloader.ts
index 13773830d2..9e0fba4aeb 100644
--- a/packages/mobile/src/services/offline-downloader/offline-downloader.ts
+++ b/packages/mobile/src/services/offline-downloader/offline-downloader.ts
@@ -6,6 +6,7 @@ import {
   accountSelectors,
   cacheTracksSelectors
 } from '@audius/common'
+import { uniq } from 'lodash'
 import RNFS, { exists } from 'react-native-fs'
 
 import { store } from 'app/store'
@@ -40,11 +41,14 @@ export const downloadTrack = async (trackId: number, collection: string) => {
 const writeTrackJson = async (track: Track, collection: string) => {
   const trackToWrite: Track = {
     ...track,
-    downloaded_from_collection: [
-      ...new Set([collection, ...(track.downloaded_from_collection ?? [])])
-    ],
-    download_completed_time: Date.now(),
-    last_verified_time: Date.now()
+    offline: {
+      downloaded_from_collection: uniq([
+        collection,
+        ...(track?.offline?.downloaded_from_collection ?? [])
+      ]),
+      download_completed_time: Date.now(),
+      last_verified_time: Date.now()
+    }
   }
 
   const pathToWrite = getLocalTrackJsonPath(track)
@@ -56,6 +60,7 @@ const tryDownloadTrackFromEachCreatorNode = async (track: Track) => {
   const user = (
     await apiClient.getUser({
       userId: track?.owner_id,
+      // @ts-ignore mismatch in an irrelevant part of state
       currentUserId: getUserId(state)
     })
   )[0] as UserMetadata

From 008ac472619b3b5b273b6ca4c3db8861538ae819 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Wed, 28 Sep 2022 16:38:52 -0400
Subject: [PATCH 08/10] remove debugging statements

---
 .../services/offline-downloader/offline-downloader.ts | 10 ++--------
 .../services/offline-downloader/offline-storage.ts    | 11 +++++++----
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/mobile/src/services/offline-downloader/offline-downloader.ts b/packages/mobile/src/services/offline-downloader/offline-downloader.ts
index 9e0fba4aeb..a833d5e746 100644
--- a/packages/mobile/src/services/offline-downloader/offline-downloader.ts
+++ b/packages/mobile/src/services/offline-downloader/offline-downloader.ts
@@ -16,8 +16,7 @@ import { apiClient } from '../audius-api-client'
 import {
   getLocalAudioPath,
   getLocalCoverArtPath,
-  getLocalTrackJsonPath,
-  getPathFromRoot
+  getLocalTrackJsonPath
 } from './offline-storage'
 const { getUserId } = accountSelectors
 const { getTrack } = cacheTracksSelectors
@@ -76,6 +75,7 @@ const tryDownloadTrackFromEachCreatorNode = async (track: Track) => {
 }
 
 export const getCoverArtUri = (track: Track) => {
+  // TODO: get other sizes
   return track._cover_art_sizes?.['150x150']
 }
 
@@ -88,7 +88,6 @@ const downloadIfNotExists = async (
   if (!uri) return null
   const fullFilePath = path.join(destinationDirectory, fileName)
   if (!overwrite && (await exists(fullFilePath))) {
-    console.log(`skipping existing file at ${getPathFromRoot(fullFilePath)}`)
     return null
   }
 
@@ -99,10 +98,5 @@ const downloadIfNotExists = async (
     toFile: fullFilePath
   })?.promise
 
-  console.log(
-    `Successful download: ${getPathFromRoot(fullFilePath)} - ${
-      result.bytesWritten
-    }`
-  )
   return result?.statusCode ?? null
 }
diff --git a/packages/mobile/src/services/offline-downloader/offline-storage.ts b/packages/mobile/src/services/offline-downloader/offline-storage.ts
index 8eac3c3832..5c6894e071 100644
--- a/packages/mobile/src/services/offline-downloader/offline-storage.ts
+++ b/packages/mobile/src/services/offline-downloader/offline-storage.ts
@@ -7,14 +7,14 @@ import { getCoverArtUri } from './offline-downloader'
 
 export const downloadsRoot = path.join(RNFS.CachesDirectoryPath, 'downloads')
 
-export const getLocalTrackRoot = (track: any) => {
-  return path.join(downloadsRoot, `/tracks`)
-}
-
 export const getPathFromRoot = (string: string) => {
   return string.replace(downloadsRoot, '~')
 }
 
+export const getLocalTrackRoot = (track: any) => {
+  return path.join(downloadsRoot, `/tracks`)
+}
+
 // Track Json
 
 export const getLocalTrackJsonPath = (track: Track) => {
@@ -37,6 +37,7 @@ export const getArtFileNameFromUri = (uri: string) => {
 // Audio
 
 export const getLocalAudioPath = (track: Track): [string, string] => {
+  // @ts-ignore route_id exists on track
   const fileName = `${track.route_id.replaceAll('/', '_')}.mp3`
   return [`${downloadsRoot}/tracks/${track.track_id}`, fileName]
 }
@@ -48,6 +49,7 @@ export const isAudioAvailableOffline = async (track: Track) => {
 
 // Storage management
 
+// Debugging method to clear all downloaded content
 export const purgeAllDownloads = async () => {
   console.log(`Before purge:`)
   await readDirRec(downloadsRoot)
@@ -57,6 +59,7 @@ export const purgeAllDownloads = async () => {
   await readDirRec(downloadsRoot)
 }
 
+// Debugging method to read cached files
 export const readDirRec = async (path: string) => {
   const files = await RNFS.readDir(path)
   if (files.length === 0) {

From 0cd1b9fddb4675fc640a61b5b1657b23fb08c0ac Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Thu, 29 Sep 2022 12:57:46 -0400
Subject: [PATCH 09/10] refactoring path logic

---
 .../mobile/src/components/audio/Audio.tsx     | 22 +++++----
 packages/mobile/src/hooks/useOfflineTrack.ts  | 25 +++++------
 .../favorites-screen/FavoritesScreen.tsx      | 16 ++++---
 .../offline-downloader/offline-downloader.ts  | 45 ++++++++++---------
 .../offline-downloader/offline-storage.ts     | 31 ++++++-------
 5 files changed, 70 insertions(+), 69 deletions(-)

diff --git a/packages/mobile/src/components/audio/Audio.tsx b/packages/mobile/src/components/audio/Audio.tsx
index 5b5f008cf4..2a0ab35d3b 100644
--- a/packages/mobile/src/components/audio/Audio.tsx
+++ b/packages/mobile/src/components/audio/Audio.tsx
@@ -331,8 +331,7 @@ export const Audio = () => {
       progressInvalidator
     ]
   )
-
-  const offlineSrc = useOfflineTrackUri(track)
+  const offlineTrackUri = useOfflineTrackUri(track)
 
   if (!track || track.is_delete) return null
 
@@ -347,16 +346,15 @@ export const Audio = () => {
     gateways
   })
 
-  const source = offlineSrc
-    ? {
-        uri: offlineSrc
-      }
-    : m3u8
-    ? {
-        uri: m3u8,
-        type: 'm3u8'
-      }
-    : null
+  let source
+  if (offlineTrackUri) {
+    source = { uri: offlineTrackUri }
+  } else if (m3u8) {
+    source = {
+      uri: m3u8,
+      type: 'm3u8'
+    }
+  }
 
   return (
     <View style={styles.backgroundVideo}>
diff --git a/packages/mobile/src/hooks/useOfflineTrack.ts b/packages/mobile/src/hooks/useOfflineTrack.ts
index 9ee8e252f0..f2f9382f59 100644
--- a/packages/mobile/src/hooks/useOfflineTrack.ts
+++ b/packages/mobile/src/hooks/useOfflineTrack.ts
@@ -1,23 +1,22 @@
-import { useEffect, useState } from 'react'
-
 import type { Track } from '@audius/common'
+import { FeatureFlags } from '@audius/common'
+import { useAsync } from 'react-use'
 
 import {
   getLocalAudioPath,
   isAudioAvailableOffline
 } from 'app/services/offline-downloader'
-import { pathJoin } from 'app/utils/fileSystem'
+
+import { useFeatureFlag } from './useRemoteConfig'
 
 export const useOfflineTrackUri = (track: Track | null) => {
-  const [offlineSrc, setOfflineSrc] = useState<String | null>()
-  useEffect(() => {
-    const checkTrackAvailableOffline = async () => {
-      if (!track) return
-      if (!(await isAudioAvailableOffline(track))) return
-      const audioFilePath = pathJoin(...getLocalAudioPath(track))
-      setOfflineSrc(`file://${audioFilePath}`)
-    }
-    checkTrackAvailableOffline()
+  const { isEnabled: isOfflineModeEnabled } = useFeatureFlag(
+    FeatureFlags.OFFLINE_MODE_ENABLED
+  )
+  return useAsync(async () => {
+    if (!track || !isOfflineModeEnabled) return
+    if (!(await isAudioAvailableOffline(track))) return
+    const audioFilePath = getLocalAudioPath(track)
+    return `file://${audioFilePath}`
   }, [track])
-  return offlineSrc
 }
diff --git a/packages/mobile/src/screens/favorites-screen/FavoritesScreen.tsx b/packages/mobile/src/screens/favorites-screen/FavoritesScreen.tsx
index cdf510029e..28c64b2873 100644
--- a/packages/mobile/src/screens/favorites-screen/FavoritesScreen.tsx
+++ b/packages/mobile/src/screens/favorites-screen/FavoritesScreen.tsx
@@ -42,13 +42,17 @@ export const FavoritesScreen = () => {
   return (
     <Screen>
       <Header text='Favorites' />
-      {isOfflineModeEnabled ? (
-        <TopTabNavigator screens={favoritesScreens} />
-      ) : (
-        <ScreenContent>
+      {
+        // ScreenContent handles the offline indicator.
+        // Show favorites screen anyway when offline so users can see their downloads
+        isOfflineModeEnabled ? (
           <TopTabNavigator screens={favoritesScreens} />
-        </ScreenContent>
-      )}
+        ) : (
+          <ScreenContent>
+            <TopTabNavigator screens={favoritesScreens} />
+          </ScreenContent>
+        )
+      }
     </Screen>
   )
 }
diff --git a/packages/mobile/src/services/offline-downloader/offline-downloader.ts b/packages/mobile/src/services/offline-downloader/offline-downloader.ts
index a833d5e746..44424125b1 100644
--- a/packages/mobile/src/services/offline-downloader/offline-downloader.ts
+++ b/packages/mobile/src/services/offline-downloader/offline-downloader.ts
@@ -21,22 +21,18 @@ import {
 const { getUserId } = accountSelectors
 const { getTrack } = cacheTracksSelectors
 
-// Main entrypoint - perform all steps required to complete a download
+/** Main entrypoint - perform all steps required to complete a download */
 export const downloadTrack = async (trackId: number, collection: string) => {
   const state = store.getState()
   const track = getTrack(state, { id: trackId })
   if (!track) return false
 
-  const coverArtUri = getCoverArtUri(track)
-  const [coverArtDirectory, coverArtFileName] = getLocalCoverArtPath(track)
-  if (coverArtUri && coverArtDirectory && coverArtFileName) {
-    await downloadIfNotExists(coverArtUri, coverArtDirectory, coverArtFileName)
-  }
+  await downloadCoverArt(track)
   await tryDownloadTrackFromEachCreatorNode(track)
   await writeTrackJson(track, collection)
 }
 
-// Unlike mp3 and album art, here we overwrite even if the file exists to ensure we have the latest
+/** Unlike mp3 and album art, here we overwrite even if the file exists to ensure we have the latest */
 const writeTrackJson = async (track: Track, collection: string) => {
   const trackToWrite: Track = {
     ...track,
@@ -54,6 +50,16 @@ const writeTrackJson = async (track: Track, collection: string) => {
   await RNFS.write(pathToWrite, JSON.stringify(trackToWrite))
 }
 
+const downloadCoverArt = async (track: Track) => {
+  const coverArtUris = Object.values(track._cover_art_sizes)
+  await Promise.all(
+    coverArtUris.map(async (coverArtUri) => {
+      const destination = getLocalCoverArtPath(track, coverArtUri)
+      await downloadIfNotExists(coverArtUri, destination)
+    })
+  )
+}
+
 const tryDownloadTrackFromEachCreatorNode = async (track: Track) => {
   const state = store.getState()
   const user = (
@@ -65,37 +71,34 @@ const tryDownloadTrackFromEachCreatorNode = async (track: Track) => {
   )[0] as UserMetadata
   const encodedTrackId = encodeHashId(track.track_id)
   const creatorNodeEndpoints = user.creator_node_endpoint.split(',')
+  const destination = getLocalAudioPath(track)
+
   for (const creatorNodeEndpoint of creatorNodeEndpoints) {
     const uri = `${creatorNodeEndpoint}/tracks/stream/${encodedTrackId}`
-    const [audioDirectory, audioFileName] = getLocalAudioPath(track)
-    if (audioDirectory && audioFileName) {
-      await downloadIfNotExists(uri, audioDirectory, audioFileName)
+    const statusCode = await downloadIfNotExists(uri, destination)
+    if (statusCode) {
+      return statusCode
     }
   }
 }
 
-export const getCoverArtUri = (track: Track) => {
-  // TODO: get other sizes
-  return track._cover_art_sizes?.['150x150']
-}
-
+/** Dowanload file at uri to destination unless there is already a file at that location or overwrite is true */
 const downloadIfNotExists = async (
   uri: string,
-  destinationDirectory: string,
-  fileName: string,
+  destination: string,
   overwrite?: boolean
 ) => {
-  if (!uri) return null
-  const fullFilePath = path.join(destinationDirectory, fileName)
-  if (!overwrite && (await exists(fullFilePath))) {
+  if (!uri || !destination) return null
+  if (!overwrite && (await exists(destination))) {
     return null
   }
 
+  const destinationDirectory = path.parse(destination).base
   await RNFS.mkdir(destinationDirectory)
 
   const result = await RNFS.downloadFile({
     fromUrl: uri,
-    toFile: fullFilePath
+    toFile: destination
   })?.promise
 
   return result?.statusCode ?? null
diff --git a/packages/mobile/src/services/offline-downloader/offline-storage.ts b/packages/mobile/src/services/offline-downloader/offline-storage.ts
index 5c6894e071..ce3890192c 100644
--- a/packages/mobile/src/services/offline-downloader/offline-storage.ts
+++ b/packages/mobile/src/services/offline-downloader/offline-storage.ts
@@ -3,53 +3,50 @@ import path from 'path'
 import type { Track } from '@audius/common'
 import RNFS, { exists } from 'react-native-fs'
 
-import { getCoverArtUri } from './offline-downloader'
-
 export const downloadsRoot = path.join(RNFS.CachesDirectoryPath, 'downloads')
 
 export const getPathFromRoot = (string: string) => {
   return string.replace(downloadsRoot, '~')
 }
 
-export const getLocalTrackRoot = (track: any) => {
+export const getLocalTracksRoot = () => {
   return path.join(downloadsRoot, `/tracks`)
 }
 
+export const getLocalTrackDir = (track: Track): string => {
+  return path.join(getLocalTracksRoot(), track.track_id.toString())
+}
+
 // Track Json
 
 export const getLocalTrackJsonPath = (track: Track) => {
-  return path.join(getLocalTrackRoot(track), `${track.track_id}.json`)
+  return path.join(getLocalTrackDir(track), `${track.track_id}.json`)
 }
 
 // Cover Art
 
-export const getLocalCoverArtPath = (track: Track): [string?, string?] => {
-  const uri = getCoverArtUri(track)
-  if (!uri) return []
-  const fileName = getArtFileNameFromUri(uri)
-  return [`${downloadsRoot}/tracks/${track.track_id}`, fileName]
+export const getLocalCoverArtPath = (track: Track, uri: string) => {
+  return path.join(getLocalTrackDir(track), getArtFileNameFromUri(uri))
 }
 
 export const getArtFileNameFromUri = (uri: string) => {
+  // This should be "150x150.jpg" or similar
   return uri.split('/').slice(-1)[0]
 }
 
 // Audio
 
-export const getLocalAudioPath = (track: Track): [string, string] => {
-  // @ts-ignore route_id exists on track
-  const fileName = `${track.route_id.replaceAll('/', '_')}.mp3`
-  return [`${downloadsRoot}/tracks/${track.track_id}`, fileName]
+export const getLocalAudioPath = (track: Track): string => {
+  return path.join(getLocalTrackDir(track), `${track.track_id}.mp3`)
 }
 
 export const isAudioAvailableOffline = async (track: Track) => {
-  const fullFilePath = path.join(...getLocalAudioPath(track))
-  return await exists(fullFilePath)
+  return await exists(getLocalAudioPath(track))
 }
 
 // Storage management
 
-// Debugging method to clear all downloaded content
+/** Debugging method to clear all downloaded content */
 export const purgeAllDownloads = async () => {
   console.log(`Before purge:`)
   await readDirRec(downloadsRoot)
@@ -59,7 +56,7 @@ export const purgeAllDownloads = async () => {
   await readDirRec(downloadsRoot)
 }
 
-// Debugging method to read cached files
+/** Debugging method to read cached files */
 export const readDirRec = async (path: string) => {
   const files = await RNFS.readDir(path)
   if (files.length === 0) {

From 4ffe791e413065c1c32f44ceacb7cbad239738b0 Mon Sep 17 00:00:00 2001
From: amendelsohn <andrew.j.mendelsohn@gmail.com>
Date: Thu, 29 Sep 2022 16:02:04 -0400
Subject: [PATCH 10/10] bugfixes

---
 packages/mobile/src/hooks/useOfflineTrack.ts                   | 2 +-
 .../src/services/offline-downloader/offline-downloader.ts      | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/mobile/src/hooks/useOfflineTrack.ts b/packages/mobile/src/hooks/useOfflineTrack.ts
index f2f9382f59..cfd1203624 100644
--- a/packages/mobile/src/hooks/useOfflineTrack.ts
+++ b/packages/mobile/src/hooks/useOfflineTrack.ts
@@ -18,5 +18,5 @@ export const useOfflineTrackUri = (track: Track | null) => {
     if (!(await isAudioAvailableOffline(track))) return
     const audioFilePath = getLocalAudioPath(track)
     return `file://${audioFilePath}`
-  }, [track])
+  }, [track]).value
 }
diff --git a/packages/mobile/src/services/offline-downloader/offline-downloader.ts b/packages/mobile/src/services/offline-downloader/offline-downloader.ts
index 44424125b1..f3a4babbe1 100644
--- a/packages/mobile/src/services/offline-downloader/offline-downloader.ts
+++ b/packages/mobile/src/services/offline-downloader/offline-downloader.ts
@@ -51,6 +51,7 @@ const writeTrackJson = async (track: Track, collection: string) => {
 }
 
 const downloadCoverArt = async (track: Track) => {
+  // TODO: computed _cover_art_sizes isn't necessarily populated
   const coverArtUris = Object.values(track._cover_art_sizes)
   await Promise.all(
     coverArtUris.map(async (coverArtUri) => {
@@ -93,7 +94,7 @@ const downloadIfNotExists = async (
     return null
   }
 
-  const destinationDirectory = path.parse(destination).base
+  const destinationDirectory = path.dirname(destination)
   await RNFS.mkdir(destinationDirectory)
 
   const result = await RNFS.downloadFile({