[C-1269] Fix now-playing drawer and scrubber

packages/mobile/src/components/now-playing-drawer/ActionsBar.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useLayoutEffect } from 'react'
 
-import type { Track } from '@audius/common'
+import type { Nullable, Track } from '@audius/common'
 import {
   removeNullable,
   FavoriteSource,
@@ -60,7 +60,7 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
 }))
 
 type ActionsBarProps = {
-  track: Track
+  track: Nullable<Track>
 }
 
 export const ActionsBar = ({ track }: ActionsBarProps) => {
@@ -153,7 +153,7 @@ export const ActionsBar = ({ track }: ActionsBarProps) => {
   const renderRepostButton = () => {
     return (
       <RepostButton
-        iconIndex={track.has_current_user_reposted ? 1 : 0}
+        iconIndex={track?.has_current_user_reposted ? 1 : 0}
         onPress={handleRepost}
         style={styles.button}
         wrapperStyle={styles.animatedIcon}
@@ -164,7 +164,7 @@ export const ActionsBar = ({ track }: ActionsBarProps) => {
   const renderFavoriteButton = () => {
     return (
       <FavoriteButton
-        iconIndex={track.has_current_user_saved ? 1 : 0}
+        iconIndex={track?.has_current_user_saved ? 1 : 0}
         onPress={handleFavorite}
         style={styles.button}
         wrapperStyle={styles.animatedIcon}

packages/mobile/src/components/now-playing-drawer/Artwork.tsx

@@ -1,52 +1,50 @@
 import React from 'react'
 
-import type { CommonState, Track } from '@audius/common'
+import type { CommonState, Nullable, Track } from '@audius/common'
 import { SquareSizes, averageColorSelectors } from '@audius/common'
-import { Dimensions, StyleSheet, View } from 'react-native'
+import { Dimensions, View } from 'react-native'
 import { Shadow } from 'react-native-shadow-2'
 import { useSelector } from 'react-redux'
 
 import { DynamicImage } from 'app/components/core'
-import { useThemedStyles } from 'app/hooks/useThemedStyles'
 import { useTrackCoverArt } from 'app/hooks/useTrackCoverArt'
-import type { ThemeColors } from 'app/utils/theme'
+import { makeStyles } from 'app/styles'
 const { getDominantColorsByTrack } = averageColorSelectors
 
 const dimensions = Dimensions.get('window')
 const spacing = 24
 
-const createStyles = (themeColors: ThemeColors) =>
-  StyleSheet.create({
-    root: {
-      marginLeft: spacing,
-      marginRight: spacing,
-      maxHeight: dimensions.width - spacing * 2,
-      alignSelf: 'center'
-    },
-    shadow: {
-      alignSelf: 'flex-start'
-    },
-    image: {
-      alignSelf: 'center',
-      borderRadius: 8,
-      borderColor: themeColors.white,
-      borderWidth: 2,
-      overflow: 'hidden',
-      height: '100%',
-      width: '100%',
-      aspectRatio: 1
-    }
-  })
+const useStyles = makeStyles(({ palette }) => ({
+  root: {
+    marginLeft: spacing,
+    marginRight: spacing,
+    maxHeight: dimensions.width - spacing * 2,
+    alignSelf: 'center'
+  },
+  shadow: {
+    alignSelf: 'flex-start'
+  },
+  image: {
+    alignSelf: 'center',
+    borderRadius: 8,
+    borderColor: palette.white,
+    borderWidth: 2,
+    overflow: 'hidden',
+    height: '100%',
+    width: '100%',
+    aspectRatio: 1
+  }
+}))
 
 type ArtworkProps = {
-  track: Track
+  track: Nullable<Track>
 }
 
 export const Artwork = ({ track }: ArtworkProps) => {
-  const styles = useThemedStyles(createStyles)
+  const styles = useStyles()
   const image = useTrackCoverArt({
-    id: track.track_id,
-    sizes: track._cover_art_sizes,
+    id: track?.track_id,
+    sizes: track?._cover_art_sizes ?? null,
     size: SquareSizes.SIZE_1000_BY_1000
   })
 

packages/mobile/src/components/now-playing-drawer/NowPlayingDrawer.tsx

@@ -271,53 +271,46 @@ const NowPlayingDrawer = (props: NowPlayingDrawerProps) => {
           { paddingTop: staticTopInset.current, paddingBottom: insets.bottom }
         ]}
       >
-        {track && user && (
-          <>
-            <View style={styles.playBarContainer}>
-              <PlayBar
-                track={track}
-                user={user}
-                onPress={onDrawerOpen}
-                translationAnim={translationAnim}
-              />
-            </View>
-            <Logo translationAnim={translationAnim} />
-            <View style={styles.titleBarContainer}>
-              <TitleBar onClose={handleDrawerCloseFromSwipe} />
-            </View>
-            <Pressable
-              onPress={handlePressTitle}
-              style={styles.artworkContainer}
-            >
-              <Artwork track={track} />
-            </Pressable>
-            <View style={styles.trackInfoContainer}>
-              <TrackInfo
-                onPressArtist={handlePressArtist}
-                onPressTitle={handlePressTitle}
-                track={track}
-                user={user}
-              />
-            </View>
-            <View style={styles.scrubberContainer}>
-              <Scrubber
-                mediaKey={`${mediaKey}`}
-                isPlaying={isPlaying}
-                onPressIn={onPressScrubberIn}
-                onPressOut={onPressScrubberOut}
-                duration={track.duration}
-              />
-            </View>
-            <View style={styles.controlsContainer}>
-              <AudioControls
-                onNext={onNext}
-                onPrevious={onPrevious}
-                isPodcast={track.genre === Genre.PODCASTS}
-              />
-              <ActionsBar track={track} />
-            </View>
-          </>
-        )}
+        <View style={styles.playBarContainer}>
+          <PlayBar
+            track={track}
+            user={user}
+            onPress={onDrawerOpen}
+            translationAnim={translationAnim}
+          />
+        </View>
+        <Logo translationAnim={translationAnim} />
+        <View style={styles.titleBarContainer}>
+          <TitleBar onClose={handleDrawerCloseFromSwipe} />
+        </View>
+        <Pressable onPress={handlePressTitle} style={styles.artworkContainer}>
+          <Artwork track={track} />
+        </Pressable>
+        <View style={styles.trackInfoContainer}>
+          <TrackInfo
+            onPressArtist={handlePressArtist}
+            onPressTitle={handlePressTitle}
+            track={track}
+            user={user}
+          />
+        </View>
+        <View style={styles.scrubberContainer}>
+          <Scrubber
+            mediaKey={`${mediaKey}`}
+            isPlaying={isPlaying}
+            onPressIn={onPressScrubberIn}
+            onPressOut={onPressScrubberOut}
+            duration={track?.duration ?? 0}
+          />
+        </View>
+        <View style={styles.controlsContainer}>
+          <AudioControls
+            onNext={onNext}
+            onPrevious={onPrevious}
+            isPodcast={track?.genre === Genre.PODCASTS}
+          />
+          <ActionsBar track={track} />
+        </View>
       </View>
     </Drawer>
   )

packages/mobile/src/components/now-playing-drawer/PlayBar.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import type { Track, User } from '@audius/common'
+import type { Nullable, Track, User } from '@audius/common'
 import {
   FavoriteSource,
   SquareSizes,
@@ -82,8 +82,8 @@ const useStyles = makeStyles(({ palette, spacing }) => ({
 }))
 
 type PlayBarProps = {
-  track: Track
-  user: User
+  track: Nullable<Track>
+  user: Nullable<User>
   onPress: () => void
   translationAnim: Animated.Value
 }

packages/mobile/src/components/now-playing-drawer/TrackInfo.tsx

@@ -1,4 +1,4 @@
-import type { Track, User } from '@audius/common'
+import type { Nullable, Track, User } from '@audius/common'
 import { Pressable, View } from 'react-native'
 
 import { Text } from 'app/components/core'
@@ -25,8 +25,8 @@ const useStyles = makeStyles(({ typography, spacing }) => ({
 }))
 
 type TrackInfoProps = {
-  track: Track
-  user: User
+  track: Nullable<Track>
+  user: Nullable<User>
   onPressArtist: GestureResponderHandler
   onPressTitle: GestureResponderHandler
 }