From ebdfd0dc8a9e08861d792f5edd51530a46100781 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Tue, 14 Feb 2023 15:06:09 -0800
Subject: [PATCH] [C-2134 C-2030] Fix queueStatus on reachability, theme
 (#2854)

---
 .../mobile/src/assets/images/iconDownloadGray.svg   |  3 ---
 packages/mobile/src/assets/images/iconFilter.svg    |  2 +-
 packages/mobile/src/assets/images/iconNoWifi.svg    |  2 +-
 .../mobile/src/assets/images/iconNoWifiSmall.svg    |  2 +-
 .../offline-placeholder/OfflinePlaceholder.tsx      |  5 ++++-
 .../favorites-screen/NoTracksPlaceholder.tsx        |  7 +++++--
 .../favorites-screen/OfflineContentBanner.tsx       |  5 ++++-
 .../mobile/src/screens/favorites-screen/utils.ts    |  4 ++--
 .../sagas/downloadQueueSagas/watchReachability.ts   |  6 +++++-
 .../workers/downloadCollectionWorker.ts             | 13 +++++--------
 .../workers/downloadTrackWorker.ts                  | 12 +++++-------
 .../sagas/requestDownloadAllFavoritesSaga.ts        |  6 +-----
 .../requestRemoveAllDownloadedFavoritesSaga.ts      |  6 +-----
 .../sagas/watchRemoveOfflineItems.ts                |  7 +------
 .../mobile/src/store/offline-downloads/selectors.ts |  2 +-
 .../mobile/src/store/offline-downloads/slice.ts     |  4 ++--
 16 files changed, 39 insertions(+), 47 deletions(-)
 delete mode 100644 packages/mobile/src/assets/images/iconDownloadGray.svg

diff --git a/packages/mobile/src/assets/images/iconDownloadGray.svg b/packages/mobile/src/assets/images/iconDownloadGray.svg
deleted file mode 100644
index 21621b16e8..0000000000
--- a/packages/mobile/src/assets/images/iconDownloadGray.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="32" height="33" viewBox="0 0 32 33" fill="#000" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M24.3334 14.167V14.0003C24.3334 9.33366 20.6667 5.66699 16 5.66699C11.8334 5.66699 8.33335 8.66699 7.83335 12.8337C4.83335 13.8337 2.66669 16.5003 2.66669 19.8337C2.66669 24.0003 6.00002 27.3337 10.1667 27.3337C13 27.3337 20 27.3337 22.6667 27.3337C26.3334 27.3337 29.3334 24.3337 29.3334 20.667C29.3334 17.5003 27.1667 15.0003 24.3334 14.167ZM21.0983 18.7827L16.2187 23.6624C15.9317 23.9494 15.4594 23.9494 15.1724 23.6624L10.2928 18.7827C9.82519 18.3151 10.1585 17.5188 10.8159 17.5188H13.8437V12.3337C13.8437 11.9262 14.177 11.5929 14.5844 11.5929H16.8067C17.2141 11.5929 17.5474 11.9262 17.5474 12.3337V17.5188H20.5752C21.2326 17.5188 21.5659 18.3151 21.0983 18.7827Z" fill="#C2C0CC"/>
-</svg>
diff --git a/packages/mobile/src/assets/images/iconFilter.svg b/packages/mobile/src/assets/images/iconFilter.svg
index ee45e37abf..a6783bfaea 100644
--- a/packages/mobile/src/assets/images/iconFilter.svg
+++ b/packages/mobile/src/assets/images/iconFilter.svg
@@ -4,7 +4,7 @@
         <g id="icon-upload-sheet" transform="translate(-112.000000, -520.000000)">
             <g id="icon/filter" transform="translate(112.000000, 520.000000)">
                 <rect id="bound" x="0" y="0" width="24" height="24"></rect>
-                <path d="M12.5330763,6.65825661 C13.0587059,6.62602254 14.069635,6.57867251 15.0777828,6.49853783 C16.4559058,6.388922 17.8145076,6.16228251 19.1315433,5.74178818 C19.7683766,5.53847334 20.3925392,5.29741862 20.8948361,4.84438991 C21.4141819,4.37599496 21.4274192,3.85309241 20.8896854,3.40817226 C20.587648,3.15835829 20.234155,2.94533319 19.869794,2.79237155 C18.1140212,2.05519258 16.242615,1.82690135 14.3590017,1.68349982 C12.8345986,1.56747721 11.3077747,1.57173171 9.78125983,1.67524109 C8.32479457,1.77399544 6.87821866,1.94322426 5.47356951,2.33904252 C4.87655112,2.50722023 4.30250489,2.75658374 3.72681043,2.9897301 C3.5407154,3.0650597 3.37244182,3.19394589 3.21380006,3.31947854 C2.57037381,3.8286666 2.57057984,4.4243961 3.21683898,4.92797823 C3.91594437,5.47280395 4.75159498,5.73027602 5.59847414,5.94690493 C7.71139694,6.48732598 9.87206679,6.63242931 12.5330763,6.65825661 L12.5330763,6.65825661 Z M8.56723832,18.9050978 C8.56723832,17.6122316 8.55204374,16.3190651 8.57393424,15.0264993 C8.58418415,14.4231117 8.38969347,13.9509127 7.96239086,13.5010373 C5.68052489,11.0985486 3.41756201,8.6789919 1.16701233,6.24872386 C0.803217938,5.85585872 0.509318628,5.39447117 0.228244577,4.93848934 C-0.127720746,4.36097909 -0.0370683127,3.76835286 0.291907308,3.20385637 C0.660028298,2.57223894 1.23685591,2.15434736 1.87147446,1.80723056 C2.98093663,1.20043937 4.18718057,0.851420563 5.42340162,0.598052831 C7.92968388,0.0843600152 10.4659947,-0.0635462763 13.0222389,0.0233455416 C15.0321475,0.0916677372 17.0248013,0.285923005 18.9828424,0.745508646 C20.1863565,1.02790705 21.3580907,1.39784797 22.4163033,2.04503184 C22.8998001,2.34074432 23.3314293,2.69291646 23.6480432,3.16341363 C24.1148518,3.85704659 24.1247926,4.5326605 23.6330032,5.23450213 C23.0159486,6.11508264 22.2631213,6.87949038 21.5308969,7.66271801 C19.6552156,9.66918824 17.7784527,11.6747575 15.8968481,13.6759221 C15.557262,14.0371538 15.3765238,14.4259647 15.3897611,14.9352529 C15.4199957,16.0939773 15.3884219,17.2540031 15.4045436,18.4132781 C15.4106214,18.8499895 15.2528038,19.1986079 14.9268156,19.473098 C13.227443,20.90406 11.5268858,22.3337708 9.81643916,23.7522697 C9.24980994,24.2221663 8.6881254,24.0003819 8.58469922,23.2832241 C8.55750349,23.094775 8.57043176,22.9003695 8.57027724,22.708667 C8.5692986,21.4408272 8.56981367,20.1729375 8.56981367,18.9050978 L8.56723832,18.9050978 Z" id="Fill-1" fill="#858199" fill-rule="evenodd"></path>
+                <path d="M12.5330763,6.65825661 C13.0587059,6.62602254 14.069635,6.57867251 15.0777828,6.49853783 C16.4559058,6.388922 17.8145076,6.16228251 19.1315433,5.74178818 C19.7683766,5.53847334 20.3925392,5.29741862 20.8948361,4.84438991 C21.4141819,4.37599496 21.4274192,3.85309241 20.8896854,3.40817226 C20.587648,3.15835829 20.234155,2.94533319 19.869794,2.79237155 C18.1140212,2.05519258 16.242615,1.82690135 14.3590017,1.68349982 C12.8345986,1.56747721 11.3077747,1.57173171 9.78125983,1.67524109 C8.32479457,1.77399544 6.87821866,1.94322426 5.47356951,2.33904252 C4.87655112,2.50722023 4.30250489,2.75658374 3.72681043,2.9897301 C3.5407154,3.0650597 3.37244182,3.19394589 3.21380006,3.31947854 C2.57037381,3.8286666 2.57057984,4.4243961 3.21683898,4.92797823 C3.91594437,5.47280395 4.75159498,5.73027602 5.59847414,5.94690493 C7.71139694,6.48732598 9.87206679,6.63242931 12.5330763,6.65825661 L12.5330763,6.65825661 Z M8.56723832,18.9050978 C8.56723832,17.6122316 8.55204374,16.3190651 8.57393424,15.0264993 C8.58418415,14.4231117 8.38969347,13.9509127 7.96239086,13.5010373 C5.68052489,11.0985486 3.41756201,8.6789919 1.16701233,6.24872386 C0.803217938,5.85585872 0.509318628,5.39447117 0.228244577,4.93848934 C-0.127720746,4.36097909 -0.0370683127,3.76835286 0.291907308,3.20385637 C0.660028298,2.57223894 1.23685591,2.15434736 1.87147446,1.80723056 C2.98093663,1.20043937 4.18718057,0.851420563 5.42340162,0.598052831 C7.92968388,0.0843600152 10.4659947,-0.0635462763 13.0222389,0.0233455416 C15.0321475,0.0916677372 17.0248013,0.285923005 18.9828424,0.745508646 C20.1863565,1.02790705 21.3580907,1.39784797 22.4163033,2.04503184 C22.8998001,2.34074432 23.3314293,2.69291646 23.6480432,3.16341363 C24.1148518,3.85704659 24.1247926,4.5326605 23.6330032,5.23450213 C23.0159486,6.11508264 22.2631213,6.87949038 21.5308969,7.66271801 C19.6552156,9.66918824 17.7784527,11.6747575 15.8968481,13.6759221 C15.557262,14.0371538 15.3765238,14.4259647 15.3897611,14.9352529 C15.4199957,16.0939773 15.3884219,17.2540031 15.4045436,18.4132781 C15.4106214,18.8499895 15.2528038,19.1986079 14.9268156,19.473098 C13.227443,20.90406 11.5268858,22.3337708 9.81643916,23.7522697 C9.24980994,24.2221663 8.6881254,24.0003819 8.58469922,23.2832241 C8.55750349,23.094775 8.57043176,22.9003695 8.57027724,22.708667 C8.5692986,21.4408272 8.56981367,20.1729375 8.56981367,18.9050978 L8.56723832,18.9050978 Z" id="Fill-1" fill="#000" fill-rule="evenodd"></path>
             </g>
         </g>
     </g>
diff --git a/packages/mobile/src/assets/images/iconNoWifi.svg b/packages/mobile/src/assets/images/iconNoWifi.svg
index 99f1daf1ac..4afac448c8 100644
--- a/packages/mobile/src/assets/images/iconNoWifi.svg
+++ b/packages/mobile/src/assets/images/iconNoWifi.svg
@@ -1,3 +1,3 @@
 <svg width="80" height="65" viewBox="0 0 80 65" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.84997 1.30422C3.54997 0.279218 1.66247 0.516718 0.63747 1.81672C-0.38753 3.11672 -0.15003 5.00422 1.14997 6.02922L75.15 64.0292C76.45 65.0542 78.3375 64.8167 79.3625 63.5167C80.3875 62.2167 80.15 60.3292 78.85 59.3042L45.575 33.2167C50.475 34.2042 54.9125 36.4792 58.525 39.6667C60.1875 41.1292 62.7125 40.9667 64.175 39.3167C65.6375 37.6667 65.475 35.1292 63.825 33.6667C57.475 28.0667 49.125 24.6667 40 24.6667C38.3375 24.6667 36.6875 24.7792 35.0875 25.0042L23.2 15.6917C28.425 13.7292 34.0875 12.6667 40 12.6667C52.9 12.6667 64.6 17.7542 73.225 26.0292C74.825 27.5542 77.35 27.5042 78.875 25.9167C80.4 24.3292 80.35 21.7917 78.7625 20.2667C68.7125 10.6042 55.05 4.66672 40 4.66672C31.4125 4.66672 23.2875 6.60422 16.0125 10.0542L4.84997 1.30422ZM11.7 21.8917L5.21247 16.7792C3.83747 17.8792 2.49997 19.0417 1.22497 20.2542C-0.36253 21.7917 -0.41253 24.3167 1.11247 25.9167C2.63747 27.5167 5.17497 27.5667 6.76247 26.0292C8.31247 24.5417 9.96247 23.1542 11.7 21.8917ZM28.5 35.1292L21.625 29.7042C19.6875 30.8542 17.8625 32.1792 16.1875 33.6667C14.525 35.1292 14.375 37.6542 15.8375 39.3167C17.3 40.9792 19.825 41.1292 21.4875 39.6667C23.575 37.8167 25.9375 36.2917 28.5125 35.1292H28.5ZM40 44.6667C35.5875 44.6667 32 48.2542 32 52.6667C32 57.0792 35.5875 60.6667 40 60.6667C44.4125 60.6667 48 57.0792 48 52.6667C48 51.7917 47.8625 50.9542 47.6 50.1667L40.65 44.6917C40.4375 44.6792 40.225 44.6667 40 44.6667Z" fill="#C2C0CC"/>
+<path d="M4.84997 1.30422C3.54997 0.279218 1.66247 0.516718 0.63747 1.81672C-0.38753 3.11672 -0.15003 5.00422 1.14997 6.02922L75.15 64.0292C76.45 65.0542 78.3375 64.8167 79.3625 63.5167C80.3875 62.2167 80.15 60.3292 78.85 59.3042L45.575 33.2167C50.475 34.2042 54.9125 36.4792 58.525 39.6667C60.1875 41.1292 62.7125 40.9667 64.175 39.3167C65.6375 37.6667 65.475 35.1292 63.825 33.6667C57.475 28.0667 49.125 24.6667 40 24.6667C38.3375 24.6667 36.6875 24.7792 35.0875 25.0042L23.2 15.6917C28.425 13.7292 34.0875 12.6667 40 12.6667C52.9 12.6667 64.6 17.7542 73.225 26.0292C74.825 27.5542 77.35 27.5042 78.875 25.9167C80.4 24.3292 80.35 21.7917 78.7625 20.2667C68.7125 10.6042 55.05 4.66672 40 4.66672C31.4125 4.66672 23.2875 6.60422 16.0125 10.0542L4.84997 1.30422ZM11.7 21.8917L5.21247 16.7792C3.83747 17.8792 2.49997 19.0417 1.22497 20.2542C-0.36253 21.7917 -0.41253 24.3167 1.11247 25.9167C2.63747 27.5167 5.17497 27.5667 6.76247 26.0292C8.31247 24.5417 9.96247 23.1542 11.7 21.8917ZM28.5 35.1292L21.625 29.7042C19.6875 30.8542 17.8625 32.1792 16.1875 33.6667C14.525 35.1292 14.375 37.6542 15.8375 39.3167C17.3 40.9792 19.825 41.1292 21.4875 39.6667C23.575 37.8167 25.9375 36.2917 28.5125 35.1292H28.5ZM40 44.6667C35.5875 44.6667 32 48.2542 32 52.6667C32 57.0792 35.5875 60.6667 40 60.6667C44.4125 60.6667 48 57.0792 48 52.6667C48 51.7917 47.8625 50.9542 47.6 50.1667L40.65 44.6917C40.4375 44.6792 40.225 44.6667 40 44.6667Z" fill="#000"/>
 </svg>
diff --git a/packages/mobile/src/assets/images/iconNoWifiSmall.svg b/packages/mobile/src/assets/images/iconNoWifiSmall.svg
index f2d0adfdc3..37468b36d1 100644
--- a/packages/mobile/src/assets/images/iconNoWifiSmall.svg
+++ b/packages/mobile/src/assets/images/iconNoWifiSmall.svg
@@ -1,3 +1,3 @@
 <svg width="32" height="27" viewBox="0 0 32 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.94001 0.961336C1.42001 0.551336 0.665006 0.646336 0.255006 1.16634C-0.154994 1.68634 -0.0599936 2.44134 0.460006 2.85134L30.06 26.0513C30.58 26.4613 31.335 26.3663 31.745 25.8463C32.155 25.3263 32.06 24.5713 31.54 24.1613L18.23 13.7263C20.19 14.1213 21.965 15.0313 23.41 16.3063C24.075 16.8913 25.085 16.8263 25.67 16.1663C26.255 15.5063 26.19 14.4913 25.53 13.9063C22.99 11.6663 19.65 10.3063 16 10.3063C15.335 10.3063 14.675 10.3513 14.035 10.4413L9.28001 6.71634C11.37 5.93134 13.635 5.50634 16 5.50634C21.16 5.50634 25.84 7.54134 29.29 10.8513C29.93 11.4613 30.94 11.4413 31.55 10.8063C32.16 10.1713 32.14 9.15634 31.505 8.54634C27.485 4.68134 22.02 2.30634 16 2.30634C12.565 2.30634 9.31501 3.08134 6.40501 4.46134L1.94001 0.961336ZM4.68001 9.19634L2.08501 7.15134C1.53501 7.59134 1.00001 8.05634 0.490006 8.54134C-0.144994 9.15634 -0.164994 10.1663 0.445006 10.8063C1.05501 11.4463 2.07001 11.4663 2.70501 10.8513C3.32501 10.2563 3.98501 9.70134 4.68001 9.19634ZM11.4 14.4913L8.65001 12.3213C7.87501 12.7813 7.14501 13.3113 6.47501 13.9063C5.81001 14.4913 5.75001 15.5013 6.33501 16.1663C6.92001 16.8313 7.93001 16.8913 8.59501 16.3063C9.43001 15.5663 10.375 14.9563 11.405 14.4913H11.4ZM16 18.3063C14.235 18.3063 12.8 19.7413 12.8 21.5063C12.8 23.2713 14.235 24.7063 16 24.7063C17.765 24.7063 19.2 23.2713 19.2 21.5063C19.2 21.1563 19.145 20.8213 19.04 20.5063L16.26 18.3163C16.175 18.3113 16.09 18.3063 16 18.3063Z" fill="#C2C0CC"/>
+<path d="M1.94001 0.961336C1.42001 0.551336 0.665006 0.646336 0.255006 1.16634C-0.154994 1.68634 -0.0599936 2.44134 0.460006 2.85134L30.06 26.0513C30.58 26.4613 31.335 26.3663 31.745 25.8463C32.155 25.3263 32.06 24.5713 31.54 24.1613L18.23 13.7263C20.19 14.1213 21.965 15.0313 23.41 16.3063C24.075 16.8913 25.085 16.8263 25.67 16.1663C26.255 15.5063 26.19 14.4913 25.53 13.9063C22.99 11.6663 19.65 10.3063 16 10.3063C15.335 10.3063 14.675 10.3513 14.035 10.4413L9.28001 6.71634C11.37 5.93134 13.635 5.50634 16 5.50634C21.16 5.50634 25.84 7.54134 29.29 10.8513C29.93 11.4613 30.94 11.4413 31.55 10.8063C32.16 10.1713 32.14 9.15634 31.505 8.54634C27.485 4.68134 22.02 2.30634 16 2.30634C12.565 2.30634 9.31501 3.08134 6.40501 4.46134L1.94001 0.961336ZM4.68001 9.19634L2.08501 7.15134C1.53501 7.59134 1.00001 8.05634 0.490006 8.54134C-0.144994 9.15634 -0.164994 10.1663 0.445006 10.8063C1.05501 11.4463 2.07001 11.4663 2.70501 10.8513C3.32501 10.2563 3.98501 9.70134 4.68001 9.19634ZM11.4 14.4913L8.65001 12.3213C7.87501 12.7813 7.14501 13.3113 6.47501 13.9063C5.81001 14.4913 5.75001 15.5013 6.33501 16.1663C6.92001 16.8313 7.93001 16.8913 8.59501 16.3063C9.43001 15.5663 10.375 14.9563 11.405 14.4913H11.4ZM16 18.3063C14.235 18.3063 12.8 19.7413 12.8 21.5063C12.8 23.2713 14.235 24.7063 16 24.7063C17.765 24.7063 19.2 23.2713 19.2 21.5063C19.2 21.1563 19.145 20.8213 19.04 20.5063L16.26 18.3163C16.175 18.3113 16.09 18.3063 16 18.3063Z" fill="#000"/>
 </svg>
diff --git a/packages/mobile/src/components/offline-placeholder/OfflinePlaceholder.tsx b/packages/mobile/src/components/offline-placeholder/OfflinePlaceholder.tsx
index 14ddcd995f..99ada2a237 100644
--- a/packages/mobile/src/components/offline-placeholder/OfflinePlaceholder.tsx
+++ b/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
diff --git a/packages/mobile/src/screens/favorites-screen/NoTracksPlaceholder.tsx b/packages/mobile/src/screens/favorites-screen/NoTracksPlaceholder.tsx
index be4a89865e..31ec738565 100644
--- a/packages/mobile/src/screens/favorites-screen/NoTracksPlaceholder.tsx
+++ b/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>
diff --git a/packages/mobile/src/screens/favorites-screen/OfflineContentBanner.tsx b/packages/mobile/src/screens/favorites-screen/OfflineContentBanner.tsx
index 8d2b76bc54..52a7d5c455 100644
--- a/packages/mobile/src/screens/favorites-screen/OfflineContentBanner.tsx
+++ b/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>
diff --git a/packages/mobile/src/screens/favorites-screen/utils.ts b/packages/mobile/src/screens/favorites-screen/utils.ts
index a8dba56553..65f7c46c5c 100644
--- a/packages/mobile/src/screens/favorites-screen/utils.ts
+++ b/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) => {
diff --git a/packages/mobile/src/store/offline-downloads/sagas/downloadQueueSagas/watchReachability.ts b/packages/mobile/src/store/offline-downloads/sagas/downloadQueueSagas/watchReachability.ts
index be46465996..fafa686d19 100644
--- a/packages/mobile/src/store/offline-downloads/sagas/downloadQueueSagas/watchReachability.ts
+++ b/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() {
diff --git a/packages/mobile/src/store/offline-downloads/sagas/downloadQueueSagas/workers/downloadCollectionWorker.ts b/packages/mobile/src/store/offline-downloads/sagas/downloadQueueSagas/workers/downloadCollectionWorker.ts
index e426e5ea6d..698f903df0 100644
--- a/packages/mobile/src/store/offline-downloads/sagas/downloadQueueSagas/workers/downloadCollectionWorker.ts
+++ b/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())
   }
 }
diff --git a/packages/mobile/src/store/offline-downloads/sagas/downloadQueueSagas/workers/downloadTrackWorker.ts b/packages/mobile/src/store/offline-downloads/sagas/downloadQueueSagas/workers/downloadTrackWorker.ts
index 365855c632..367eb06127 100644
--- a/packages/mobile/src/store/offline-downloads/sagas/downloadQueueSagas/workers/downloadTrackWorker.ts
+++ b/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())
   }
 }
diff --git a/packages/mobile/src/store/offline-downloads/sagas/requestDownloadAllFavoritesSaga.ts b/packages/mobile/src/store/offline-downloads/sagas/requestDownloadAllFavoritesSaga.ts
index 895db81ba5..36136683cb 100644
--- a/packages/mobile/src/store/offline-downloads/sagas/requestDownloadAllFavoritesSaga.ts
+++ b/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
 
diff --git a/packages/mobile/src/store/offline-downloads/sagas/requestRemoveAllDownloadedFavoritesSaga.ts b/packages/mobile/src/store/offline-downloads/sagas/requestRemoveAllDownloadedFavoritesSaga.ts
index 964d3a06c0..090b74ecdf 100644
--- a/packages/mobile/src/store/offline-downloads/sagas/requestRemoveAllDownloadedFavoritesSaga.ts
+++ b/packages/mobile/src/store/offline-downloads/sagas/requestRemoveAllDownloadedFavoritesSaga.ts
@@ -27,11 +27,7 @@ export function* requestRemoveAllDownloadedFavoritesSaga() {
 }
 
 function* removeAllDownloadedFavoritesWorker() {
-  track(
-    make({
-      eventName: EventNames.OFFLINE_MODE_DOWNLOAD_ALL_TOGGLE_OFF
-    })
-  )
+  track(make({ eventName: EventNames.OFFLINE_MODE_DOWNLOAD_ALL_TOGGLE_OFF }))
   const offlineItemsToRemove: OfflineItem[] = []
   const offlineCollectionMetadata = yield* select(getOfflineCollectionMetadata)
   const offlineCollectionIds = Object.keys(offlineCollectionMetadata).map(
diff --git a/packages/mobile/src/store/offline-downloads/sagas/watchRemoveOfflineItems.ts b/packages/mobile/src/store/offline-downloads/sagas/watchRemoveOfflineItems.ts
index 764fdd1bf8..f0b11c2236 100644
--- a/packages/mobile/src/store/offline-downloads/sagas/watchRemoveOfflineItems.ts
+++ b/packages/mobile/src/store/offline-downloads/sagas/watchRemoveOfflineItems.ts
@@ -25,12 +25,7 @@ function* deleteItemsFromDisk(action: RemoveOfflineItemsAction) {
   const collectionStatus = yield* select(getOfflineCollectionsStatus)
 
   for (const item of items) {
-    track(
-      make({
-        eventName: EventNames.OFFLINE_MODE_REMOVE_ITEM,
-        ...item
-      })
-    )
+    track(make({ eventName: EventNames.OFFLINE_MODE_REMOVE_ITEM, ...item }))
     if (item.type === 'collection' && !collectionStatus[item.id]) {
       const collectionDirectory = yield* call(
         getLocalCollectionDir,
diff --git a/packages/mobile/src/store/offline-downloads/selectors.ts b/packages/mobile/src/store/offline-downloads/selectors.ts
index 64162ae87b..ad87e37c07 100644
--- a/packages/mobile/src/store/offline-downloads/selectors.ts
+++ b/packages/mobile/src/store/offline-downloads/selectors.ts
@@ -13,7 +13,7 @@ export const getOfflineTrackStatus = (state: AppState) =>
 
 export const getTrackOfflineDownloadStatus =
   (trackId?: number) => (state: AppState) =>
-    trackId ? state.offlineDownloads.trackStatus[trackId] : null
+    trackId ? state.offlineDownloads.trackStatus[trackId] ?? null : null
 
 export const getTrackDownloadStatus = (state: AppState, trackId: ID) =>
   state.offlineDownloads.trackStatus[trackId]
diff --git a/packages/mobile/src/store/offline-downloads/slice.ts b/packages/mobile/src/store/offline-downloads/slice.ts
index f04a2fa502..1924d58e85 100644
--- a/packages/mobile/src/store/offline-downloads/slice.ts
+++ b/packages/mobile/src/store/offline-downloads/slice.ts
@@ -32,10 +32,10 @@ export type DownloadQueueItem =
 
 export type OfflineDownloadsState = {
   trackStatus: {
-    [key: string]: OfflineDownloadStatus
+    [Key in ID]?: OfflineDownloadStatus
   }
   collectionStatus: {
-    [key: string]: OfflineDownloadStatus
+    [Key in ID]?: OfflineDownloadStatus
   }
   collectionSyncStatus: {
     [Key in ID]?: CollectionSyncStatus