From 9388f00edcc8b05aba6a16f991cdcd99b927fe94 Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Tue, 4 Oct 2022 20:08:04 -0700 Subject: [PATCH 1/2] [C-1269] Fix now-playing drawer and scrubber --- .../now-playing-drawer/ActionsBar.tsx | 8 +- .../components/now-playing-drawer/Artwork.tsx | 58 +++++---- .../now-playing-drawer/NowPlayingDrawer.tsx | 8 +- .../components/now-playing-drawer/PlayBar.tsx | 6 +- .../now-playing-drawer/TrackInfo.tsx | 6 +- .../mobile/src/components/scrubber/Slider.tsx | 116 ++++++++++-------- 6 files changed, 104 insertions(+), 98 deletions(-) diff --git a/packages/mobile/src/components/now-playing-drawer/ActionsBar.tsx b/packages/mobile/src/components/now-playing-drawer/ActionsBar.tsx index 0178691783..b01fb0b35d 100644 --- a/packages/mobile/src/components/now-playing-drawer/ActionsBar.tsx +++ b/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 } export const ActionsBar = ({ track }: ActionsBarProps) => { @@ -153,7 +153,7 @@ export const ActionsBar = ({ track }: ActionsBarProps) => { const renderRepostButton = () => { return ( { const renderFavoriteButton = () => { return ( - 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 } 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 }) diff --git a/packages/mobile/src/components/now-playing-drawer/NowPlayingDrawer.tsx b/packages/mobile/src/components/now-playing-drawer/NowPlayingDrawer.tsx index 41b55ac6fb..d62a4e1eb3 100644 --- a/packages/mobile/src/components/now-playing-drawer/NowPlayingDrawer.tsx +++ b/packages/mobile/src/components/now-playing-drawer/NowPlayingDrawer.tsx @@ -271,7 +271,7 @@ const NowPlayingDrawer = (props: NowPlayingDrawerProps) => { { paddingTop: staticTopInset.current, paddingBottom: insets.bottom } ]} > - {track && user && ( + {isPlayBarShowing ? ( <> { isPlaying={isPlaying} onPressIn={onPressScrubberIn} onPressOut={onPressScrubberOut} - duration={track.duration} + duration={track?.duration ?? 0} /> - )} + ) : null} ) diff --git a/packages/mobile/src/components/now-playing-drawer/PlayBar.tsx b/packages/mobile/src/components/now-playing-drawer/PlayBar.tsx index 98315c9efa..12e8ba874d 100644 --- a/packages/mobile/src/components/now-playing-drawer/PlayBar.tsx +++ b/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 + user: Nullable onPress: () => void translationAnim: Animated.Value } diff --git a/packages/mobile/src/components/now-playing-drawer/TrackInfo.tsx b/packages/mobile/src/components/now-playing-drawer/TrackInfo.tsx index 0761595063..fc6169c670 100644 --- a/packages/mobile/src/components/now-playing-drawer/TrackInfo.tsx +++ b/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 + user: Nullable onPressArtist: GestureResponderHandler onPressTitle: GestureResponderHandler } diff --git a/packages/mobile/src/components/scrubber/Slider.tsx b/packages/mobile/src/components/scrubber/Slider.tsx index 140487e193..e99fa0405d 100644 --- a/packages/mobile/src/components/scrubber/Slider.tsx +++ b/packages/mobile/src/components/scrubber/Slider.tsx @@ -2,67 +2,66 @@ import { memo, useCallback, useEffect, useRef, useState } from 'react' import { useAppState } from '@react-native-community/hooks' import type { GestureResponderEvent } from 'react-native' -import { StyleSheet, View, Animated, PanResponder } from 'react-native' +import { View, Animated, PanResponder } from 'react-native' import LinearGradient from 'react-native-linear-gradient' +import { usePrevious } from 'react-use' import { usePressScaleAnimation } from 'app/hooks/usePressScaleAnimation' -import { useThemedStyles } from 'app/hooks/useThemedStyles' +import { makeStyles } from 'app/styles' import { attachToDx } from 'app/utils/animation' -import type { ThemeColors } from 'app/utils/theme' import { useThemeColors } from 'app/utils/theme' // How much the handle "grows" when pressing const HANDLE_GROW_SCALE = 1.1 -const createStyles = (themeColors: ThemeColors) => - StyleSheet.create({ - root: { - height: 4, - marginLeft: 16, - marginRight: 16, - flexGrow: 1 +const useStyles = makeStyles(({ palette, spacing }) => ({ + root: { + height: spacing(1), + marginLeft: spacing(4), + marginRight: spacing(4), + flexGrow: 1 + }, + rail: { + backgroundColor: palette.neutralLight8, + borderRadius: 2, + borderColor: palette.neutralLight8, + height: 4, + overflow: 'hidden' + }, + tracker: { + // The tracker must be the full width of the rail + // so that it can have rounded edges. It animates + // by sliding (translateX) instead of by growing. + flexGrow: 1, + backgroundColor: palette.neutral, + borderRadius: 2, + borderColor: palette.neutralLight8, + height: 4 + }, + handleContainer: { + top: -6, + position: 'absolute' + }, + handle: { + marginLeft: spacing(-2), + height: spacing(4), + width: spacing(4), + borderRadius: spacing(2), + backgroundColor: palette.staticWhite, + // Note: React-native-shadow-2 seems to lose fidelity + // when styling such a small shadow. + // TODO: Revisit this, but as of writing, these values + // are fairly good on android/ios + shadowColor: 'rgb(133,129,153)', + shadowOffset: { + width: 0, + height: 1 }, - rail: { - backgroundColor: themeColors.neutralLight8, - borderRadius: 2, - borderColor: themeColors.neutralLight8, - height: 4, - overflow: 'hidden' - }, - tracker: { - // The tracker must be the full width of the rail - // so that it can have rounded edges. It animates - // by sliding (translateX) instead of by growing. - flexGrow: 1, - backgroundColor: themeColors.neutral, - borderRadius: 2, - borderColor: themeColors.neutralLight8, - height: 4 - }, - handleContainer: { - top: -6, - position: 'absolute' - }, - handle: { - marginLeft: -8, - height: 16, - width: 16, - borderRadius: 8, - backgroundColor: themeColors.staticWhite, - // Note: React-native-shadow-2 seems to lose fidelity - // when styling such a small shadow. - // TODO: Revisit this, but as of writing, these values - // are fairly good on android/ios - shadowColor: 'rgb(133,129,153)', - shadowOffset: { - width: 0, - height: 1 - }, - shadowOpacity: 0.5, - shadowRadius: 2, - elevation: 3 - } - }) + shadowOpacity: 0.5, + shadowRadius: 2, + elevation: 3 + } +})) type SliderProps = { /** @@ -109,7 +108,7 @@ export const Slider = memo( onPressOut, onDrag }: SliderProps) => { - const styles = useThemedStyles(createStyles) + const styles = useStyles() const { primaryLight2, primaryDark2 } = useThemeColors() // Animation to translate the handle and tracker @@ -280,22 +279,31 @@ export const Slider = memo( }, [isPlaying, play, pause, mediaKey, durationRef]) const appState = useAppState() + const previousAppState = usePrevious(appState) /** * Ensures the slider handle's position is correctly updated when app * becomes active. */ useEffect(() => { - if (appState === 'active') { + if (previousAppState === 'background' && appState === 'active') { const { currentTime } = global.progress const percentComplete = currentTime / durationRef.current translationAnim.setValue(percentComplete * railWidth) + setHandlePosition(percentComplete * railWidth) if (isPlaying && durationRef.current !== undefined) { play((durationRef.current - currentTime) * 1000) } } - }, [isPlaying, appState, play, railWidth, translationAnim]) + }, [ + isPlaying, + appState, + previousAppState, + play, + railWidth, + translationAnim + ]) return ( From ae885aad245ce686157925eacfded18695c03af3 Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Tue, 4 Oct 2022 20:53:50 -0700 Subject: [PATCH 2/2] Always render now-playing-drawer --- .../now-playing-drawer/NowPlayingDrawer.tsx | 87 +++++++++---------- 1 file changed, 40 insertions(+), 47 deletions(-) diff --git a/packages/mobile/src/components/now-playing-drawer/NowPlayingDrawer.tsx b/packages/mobile/src/components/now-playing-drawer/NowPlayingDrawer.tsx index d62a4e1eb3..5a5ff2fedc 100644 --- a/packages/mobile/src/components/now-playing-drawer/NowPlayingDrawer.tsx +++ b/packages/mobile/src/components/now-playing-drawer/NowPlayingDrawer.tsx @@ -271,53 +271,46 @@ const NowPlayingDrawer = (props: NowPlayingDrawerProps) => { { paddingTop: staticTopInset.current, paddingBottom: insets.bottom } ]} > - {isPlayBarShowing ? ( - <> - - - - - - - - - - - - - - - - - - - - - - ) : null} + + + + + + + + + + + + + + + + + + + + )