From 670092f75980fb41754fe2403fa55115956a90ea Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Tue, 19 Dec 2023 15:57:00 -0800
Subject: [PATCH 1/4] [C-3527] Add native artist previews

---
 packages/mobile/src/app/App.tsx               |   7 +-
 .../audio/{Audio.tsx => AudioPlayer.tsx}      |   3 +-
 .../src/components/core/UserCoverPhoto.tsx    |   2 +-
 .../Button/FollowButton/FollowButton.tsx      |  12 +-
 .../components/Button/FollowButton/types.ts   |   1 -
 packages/mobile/src/harmony-native/icons.ts   |   3 +
 .../app-drawer-screen/AppDrawerScreen.tsx     |  27 +++--
 .../screens/sign-on-screen/SignOnStack.tsx    |   5 +-
 .../sign-on-screen/components/ArtistTile.tsx  |  42 -------
 .../SelectArtistScreen/FollowArtistField.tsx  |  75 ++++++++++--
 .../SelectArtistsScreen.tsx                   |  55 ++++-----
 .../selectArtistPreviewContext.tsx            | 109 ++++++++++++++++++
 12 files changed, 244 insertions(+), 97 deletions(-)
 rename packages/mobile/src/components/audio/{Audio.tsx => AudioPlayer.tsx} (99%)
 delete mode 100644 packages/mobile/src/screens/sign-on-screen/components/ArtistTile.tsx
 create mode 100644 packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/selectArtistPreviewContext.tsx

diff --git a/packages/mobile/src/app/App.tsx b/packages/mobile/src/app/App.tsx
index e4458e27ee7..cf34b850be0 100644
--- a/packages/mobile/src/app/App.tsx
+++ b/packages/mobile/src/app/App.tsx
@@ -8,12 +8,12 @@ import {
   SafeAreaProvider,
   initialWindowMetrics
 } from 'react-native-safe-area-context'
+import TrackPlayer from 'react-native-track-player'
 import { Provider } from 'react-redux'
 import { useEffectOnce } from 'react-use'
 import { PersistGate } from 'redux-persist/integration/react'
 import FlipperAsyncStorage from 'rn-flipper-async-storage-advanced'
 
-import { Audio } from 'app/components/audio/Audio'
 import HCaptcha from 'app/components/hcaptcha'
 import NavigationContainer from 'app/components/navigation-container'
 import { NotificationReminder } from 'app/components/notification-reminder/NotificationReminder'
@@ -70,10 +70,8 @@ const App = () => {
   // Reset libs so that we get a clean app start
   useEffectOnce(() => {
     setLibs(null)
-  })
-
-  useEffectOnce(() => {
     subscribeToNetworkStatusUpdates()
+    TrackPlayer.setupPlayer()
   })
 
   useEnterForeground(() => {
@@ -110,7 +108,6 @@ const App = () => {
                             <RootScreen />
                             <Drawers />
                             <Modals />
-                            <Audio />
                             <OAuth />
                             <NotificationReminder />
                             <RateCtaReminder />
diff --git a/packages/mobile/src/components/audio/Audio.tsx b/packages/mobile/src/components/audio/AudioPlayer.tsx
similarity index 99%
rename from packages/mobile/src/components/audio/Audio.tsx
rename to packages/mobile/src/components/audio/AudioPlayer.tsx
index f6c33113636..8fd48e8f326 100644
--- a/packages/mobile/src/components/audio/Audio.tsx
+++ b/packages/mobile/src/components/audio/AudioPlayer.tsx
@@ -163,7 +163,7 @@ type QueueableTrack = {
   track: Nullable<Track>
 } & Pick<Queueable, 'isPreview'>
 
-export const Audio = () => {
+export const AudioPlayer = () => {
   const { isEnabled: isNewPodcastControlsEnabled } = useFeatureFlag(
     FeatureFlags.PODCAST_CONTROL_UPDATES_ENABLED,
     FeatureFlags.PODCAST_CONTROL_UPDATES_ENABLED_FALLBACK
@@ -282,7 +282,6 @@ export const Audio = () => {
   // Perform initial setup for the track player
   useAsync(async () => {
     try {
-      await TrackPlayer.setupPlayer()
       await updatePlayerOptions()
     } catch (e) {
       // The player has already been set up
diff --git a/packages/mobile/src/components/core/UserCoverPhoto.tsx b/packages/mobile/src/components/core/UserCoverPhoto.tsx
index aecba090216..426b8a95ba7 100644
--- a/packages/mobile/src/components/core/UserCoverPhoto.tsx
+++ b/packages/mobile/src/components/core/UserCoverPhoto.tsx
@@ -7,7 +7,7 @@ import { useCoverPhoto } from '../image/CoverPhoto'
 
 type UserCoverPhotoProps = {
   userId: ID
-} & Pick<CoverPhotoProps, 'style' | 'topCornerRadius'>
+} & Pick<CoverPhotoProps, 'style' | 'topCornerRadius' | 'children'>
 
 export const UserCoverPhoto = (props: UserCoverPhotoProps) => {
   const { userId, ...other } = props
diff --git a/packages/mobile/src/harmony-native/components/Button/FollowButton/FollowButton.tsx b/packages/mobile/src/harmony-native/components/Button/FollowButton/FollowButton.tsx
index 8776ffafa54..dfd6e2f792b 100644
--- a/packages/mobile/src/harmony-native/components/Button/FollowButton/FollowButton.tsx
+++ b/packages/mobile/src/harmony-native/components/Button/FollowButton/FollowButton.tsx
@@ -28,6 +28,7 @@ export const FollowButton = (props: FollowButtonProps) => {
   const { disabled } = other
   const [following, setFollowing] = useState(isFollowing)
   const { color, cornerRadius } = useTheme()
+  const isInput = !!onChange
 
   useEffect(() => {
     setFollowing(isFollowing)
@@ -47,8 +48,17 @@ export const FollowButton = (props: FollowButtonProps) => {
     setFollowing(!following)
   }, [following, onChange, value, onUnfollow, onFollow])
 
+  const inputProps = isInput
+    ? {
+        testID: `follow-${value}`,
+        accessibilityRole: 'checkbox' as const,
+        accessibilityState: { checked: following, value },
+        accessibilityLiveRegion: 'polite' as const
+      }
+    : null
+
   return (
-    <Pressable onPress={handlePress} {...other}>
+    <Pressable onPress={handlePress} {...other} {...inputProps}>
       <Flex
         h={size === 'small' ? 28 : 32}
         direction='row'
diff --git a/packages/mobile/src/harmony-native/components/Button/FollowButton/types.ts b/packages/mobile/src/harmony-native/components/Button/FollowButton/types.ts
index 3ad9495e518..66dc7240f73 100644
--- a/packages/mobile/src/harmony-native/components/Button/FollowButton/types.ts
+++ b/packages/mobile/src/harmony-native/components/Button/FollowButton/types.ts
@@ -31,5 +31,4 @@ export type FollowButtonProps = {
   onUnfollow?: () => void
   value?: any
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void
-  // onChange?: (e: { target: { value: any; checked: boolean } }) => void
 } & Pick<PressableProps, 'onPress' | 'disabled'>
diff --git a/packages/mobile/src/harmony-native/icons.ts b/packages/mobile/src/harmony-native/icons.ts
index a818448ce34..5da4c72685c 100644
--- a/packages/mobile/src/harmony-native/icons.ts
+++ b/packages/mobile/src/harmony-native/icons.ts
@@ -230,3 +230,6 @@ export { default as IconLogoCircleSOL } from '@audius/harmony/src/assets/icons/L
 export { default as IconLogoCircleSTR } from '@audius/harmony/src/assets/icons/LogoCircleSTR.svg'
 export { default as IconLogoCircleUSD } from '@audius/harmony/src/assets/icons/LogoCircleUSD.svg'
 export { default as IconLogoCircleUSDC } from '@audius/harmony/src/assets/icons/LogoCircleUSDC.svg'
+
+export { default as Soundwave } from '@audius/harmony/src/assets/animations/Soundwave.json'
+export { default as SoundwaveCircle } from '@audius/harmony/src/assets/animations/SoundwaveCircle.json'
diff --git a/packages/mobile/src/screens/app-drawer-screen/AppDrawerScreen.tsx b/packages/mobile/src/screens/app-drawer-screen/AppDrawerScreen.tsx
index 1d2039bb063..cce9bc00ec6 100644
--- a/packages/mobile/src/screens/app-drawer-screen/AppDrawerScreen.tsx
+++ b/packages/mobile/src/screens/app-drawer-screen/AppDrawerScreen.tsx
@@ -6,6 +6,8 @@ import type { DrawerNavigationHelpers } from '@react-navigation/drawer/lib/types
 import { useNavigation } from '@react-navigation/native'
 import { Dimensions } from 'react-native'
 
+import { AudioPlayer } from 'app/components/audio/AudioPlayer'
+
 import { AppScreen } from '../app-screen'
 
 import { AppDrawerContextProvider } from './AppDrawerContext'
@@ -60,15 +62,20 @@ export const AppDrawerScreen = () => {
   const gestureProps = { gesturesDisabled, setGesturesDisabled }
 
   return (
-    <Drawer.Navigator
-      // legacy implementation uses reanimated-v1
-      useLegacyImplementation
-      screenOptions={drawerScreenOptions}
-      drawerContent={(props) => <LeftNavDrawer {...gestureProps} {...props} />}
-    >
-      <Drawer.Screen name='App'>
-        {(props) => <AppStack {...props} {...gestureProps} />}
-      </Drawer.Screen>
-    </Drawer.Navigator>
+    <>
+      <AudioPlayer />
+      <Drawer.Navigator
+        // legacy implementation uses reanimated-v1
+        useLegacyImplementation
+        screenOptions={drawerScreenOptions}
+        drawerContent={(props) => (
+          <LeftNavDrawer {...gestureProps} {...props} />
+        )}
+      >
+        <Drawer.Screen name='App'>
+          {(props) => <AppStack {...props} {...gestureProps} />}
+        </Drawer.Screen>
+      </Drawer.Navigator>
+    </>
   )
 }
diff --git a/packages/mobile/src/screens/sign-on-screen/SignOnStack.tsx b/packages/mobile/src/screens/sign-on-screen/SignOnStack.tsx
index 614e59dc47f..b54821b1880 100644
--- a/packages/mobile/src/screens/sign-on-screen/SignOnStack.tsx
+++ b/packages/mobile/src/screens/sign-on-screen/SignOnStack.tsx
@@ -15,7 +15,10 @@ const screenOptionsOverrides = { animationTypeForReplace: 'pop' as const }
 export const SignOnStack = () => {
   const screenOptions = useScreenOptions(screenOptionsOverrides)
   return (
-    <Stack.Navigator initialRouteName='SignOn' screenOptions={screenOptions}>
+    <Stack.Navigator
+      initialRouteName='SelectArtists'
+      screenOptions={screenOptions}
+    >
       <Stack.Screen
         name='SignOn'
         component={SignOnScreen}
diff --git a/packages/mobile/src/screens/sign-on-screen/components/ArtistTile.tsx b/packages/mobile/src/screens/sign-on-screen/components/ArtistTile.tsx
deleted file mode 100644
index 90f531543d1..00000000000
--- a/packages/mobile/src/screens/sign-on-screen/components/ArtistTile.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useCallback } from 'react'
-
-import type { ID, UserMetadata } from '@audius/common'
-import { useField } from 'formik'
-import { Pressable } from 'react-native'
-
-import { Text } from 'app/components/core'
-
-type ArtistTileProps = {
-  user: UserMetadata
-}
-
-export const ArtistTile = (props: ArtistTileProps) => {
-  const [{ value: selectedArtists }, , { setValue }] = useField<ID[]>('artists')
-  const { user } = props
-  const { user_id, name } = user
-  const checked = selectedArtists.includes(user_id)
-
-  const handleChange = useCallback(() => {
-    const newArtists = checked
-      ? selectedArtists.filter((value) => value !== user_id)
-      : [user_id, ...selectedArtists]
-
-    setValue(newArtists)
-  }, [selectedArtists, checked, setValue, user_id])
-
-  return (
-    <Pressable
-      key={user_id}
-      testID={`artist-${name}`}
-      accessibilityRole='checkbox'
-      accessibilityState={{ checked }}
-      accessibilityLiveRegion='polite'
-      onPress={handleChange}
-      style={{
-        backgroundColor: checked ? 'purple' : undefined
-      }}
-    >
-      <Text>{name}</Text>
-    </Pressable>
-  )
-}
diff --git a/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/FollowArtistField.tsx b/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/FollowArtistField.tsx
index 646c00fa1f3..d20002bc4e4 100644
--- a/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/FollowArtistField.tsx
+++ b/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/FollowArtistField.tsx
@@ -1,14 +1,21 @@
+import { useCallback, useContext } from 'react'
+
 import type { UserMetadata } from '@audius/common'
 import { css } from '@emotion/native'
 import { useField } from 'formik'
+import LottieView from 'lottie-react-native'
+import { Pressable } from 'react-native'
 
 import {
   Box,
   Flex,
   FollowButton,
   IconNote,
+  IconPause,
+  IconPlay,
   IconUser,
   Paper,
+  SoundwaveCircle,
   Text,
   useTheme
 } from '@audius/harmony-native'
@@ -20,33 +27,85 @@ import {
 } from 'app/components/core'
 import { StaticSkeleton } from 'app/components/skeleton'
 
+import { SelectArtistsPreviewContext } from './selectArtistPreviewContext'
+
 type FollowArtistFieldProps = {
   artist: UserMetadata
+  showPreviewHint?: boolean
 }
 
 export const FollowArtistField = (props: FollowArtistFieldProps) => {
-  const { artist } = props
+  const { artist, showPreviewHint } = props
   const { user_id, track_count, follower_count } = artist
   const { spacing } = useTheme()
   const [{ onChange }] = useField({ name: 'selectedArtists', type: 'checkbox' })
+  const {
+    hasPlayed,
+    isPlaying,
+    nowPlayingArtistId,
+    togglePreview,
+    playPreview
+  } = useContext(SelectArtistsPreviewContext)
+
+  const isPreviewing = nowPlayingArtistId === user_id
+
+  const handlePress = useCallback(() => {
+    if (isPreviewing) {
+      togglePreview()
+    } else {
+      playPreview(user_id)
+    }
+  }, [isPreviewing, playPreview, togglePreview, user_id])
 
   return (
     <Paper>
-      <UserCoverPhoto
-        userId={user_id}
-        style={css({ height: 68 })}
-        topCornerRadius='m'
-      />
+      <Pressable onPress={handlePress}>
+        <UserCoverPhoto
+          userId={user_id}
+          style={css({ height: 68 })}
+          topCornerRadius='m'
+        >
+          {isPreviewing && isPlaying ? (
+            <Box
+              h='xl'
+              w='xl'
+              style={css({
+                opacity: 0.6,
+                position: 'absolute',
+                right: spacing.s,
+                top: spacing.s
+              })}
+            >
+              <LottieView source={SoundwaveCircle} autoPlay />
+            </Box>
+          ) : null}
+        </UserCoverPhoto>
+      </Pressable>
       <Flex
         alignItems='center'
+        pointerEvents='box-none'
         style={css({
           position: 'absolute',
           top: spacing['2xl'],
           left: 0,
-          right: 0
+          right: 0,
+          zIndex: 1
         })}
       >
-        <ProfilePicture size='large' userId={user_id} variant='strong' />
+        <Pressable onPress={handlePress}>
+          <ProfilePicture size='large' userId={user_id} variant='strong'>
+            {showPreviewHint && !hasPlayed ? (
+              <IconPlay size='l' color='staticWhite' />
+            ) : null}
+            {isPreviewing ? (
+              isPlaying ? (
+                <IconPause size='l' color='staticWhite' />
+              ) : (
+                <IconPlay size='l' color='staticWhite' />
+              )
+            ) : null}
+          </ProfilePicture>
+        </Pressable>
       </Flex>
       <Flex pt='unit12' ph='s' pb='l' alignItems='center' gap='l'>
         <Flex gap='s'>
diff --git a/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/SelectArtistsScreen.tsx b/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/SelectArtistsScreen.tsx
index 0befd48adc2..9b17a66693d 100644
--- a/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/SelectArtistsScreen.tsx
+++ b/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/SelectArtistsScreen.tsx
@@ -18,6 +18,7 @@ import { Heading, PageFooter } from '../../components/layout'
 
 import { SelectedGenresTabBar } from './SelectedGenresTabBar'
 import { TopArtistsCardList } from './TopArtistsCardList'
+import { SelectArtistsPreviewContextProvider } from './selectArtistPreviewContext'
 
 const Tab = createMaterialCollapsibleTopTabNavigator()
 
@@ -72,32 +73,34 @@ export const SelectArtistsScreen = () => {
       {({ dirty, isValid, values }) => {
         const { selectedArtists } = values
         return (
-          <Flex flex={1}>
-            <Tab.Navigator
-              tabBar={SelectedGenresTabBar}
-              collapsibleOptions={{
-                renderHeader,
-                headerHeight: 244,
-                disableSnap: true
-              }}
-            >
-              {genres.map((genre) => (
-                <Tab.Screen
-                  key={genre}
-                  name={genre}
-                  component={TopArtistsCardList}
-                />
-              ))}
-            </Tab.Navigator>
-            <PageFooter
-              buttonProps={{ disabled: !dirty || !isValid }}
-              postfix={
-                <Text variant='body'>
-                  {messages.selected} {selectedArtists.length || 0}/3
-                </Text>
-              }
-            />
-          </Flex>
+          <SelectArtistsPreviewContextProvider>
+            <Flex flex={1}>
+              <Tab.Navigator
+                tabBar={SelectedGenresTabBar}
+                collapsibleOptions={{
+                  renderHeader,
+                  headerHeight: 244,
+                  disableSnap: true
+                }}
+              >
+                {genres.map((genre) => (
+                  <Tab.Screen
+                    key={genre}
+                    name={genre}
+                    component={TopArtistsCardList}
+                  />
+                ))}
+              </Tab.Navigator>
+              <PageFooter
+                buttonProps={{ disabled: !dirty || !isValid }}
+                postfix={
+                  <Text variant='body'>
+                    {messages.selected} {selectedArtists.length || 0}/3
+                  </Text>
+                }
+              />
+            </Flex>
+          </SelectArtistsPreviewContextProvider>
         )
       }}
     </Formik>
diff --git a/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/selectArtistPreviewContext.tsx b/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/selectArtistPreviewContext.tsx
new file mode 100644
index 00000000000..35dc5934797
--- /dev/null
+++ b/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/selectArtistPreviewContext.tsx
@@ -0,0 +1,109 @@
+import { createContext, useCallback, useMemo, useState } from 'react'
+
+import type { ID } from '@audius/common'
+import {
+  encodeHashId,
+  useGetUserById,
+  useGetUserTracksByHandle
+} from '@audius/common'
+import TrackPlayer, { RepeatMode, State } from 'react-native-track-player'
+import { useAsync, useEffectOnce } from 'react-use'
+
+import { apiClient } from 'app/services/audius-api-client'
+
+type PreviewContextProps = {
+  hasPlayed: boolean
+  isPlaying: boolean
+  nowPlayingArtistId: number
+  playPreview: (artistId: ID) => void
+  togglePreview: () => void
+}
+
+export const SelectArtistsPreviewContext = createContext<PreviewContextProps>({
+  hasPlayed: true,
+  isPlaying: false,
+  nowPlayingArtistId: -1,
+  playPreview: () => {},
+  togglePreview: () => {}
+})
+
+const useGetTrackUrl = (artistId: ID) => {
+  const { data: artist } = useGetUserById(
+    {
+      id: artistId,
+      currentUserId: null
+    },
+    { disabled: artistId === -1 }
+  )
+
+  const { data: artistTracks } = useGetUserTracksByHandle(
+    {
+      handle: artist?.handle,
+      currentUserId: null
+    },
+    { disabled: !artist?.handle }
+  )
+
+  const trackId = artistTracks?.find((track) => track.is_available)?.track_id
+  if (!trackId) return null
+
+  return apiClient.makeUrl(`/tracks/${encodeHashId(trackId)}/stream`)
+}
+
+export const SelectArtistsPreviewContextProvider = (props: {
+  children: JSX.Element
+}) => {
+  const [hasPlayed, setHasPlayed] = useState(false)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [nowPlayingArtistId, setNowPlayingArtistId] = useState(-1)
+
+  useEffectOnce(() => {
+    TrackPlayer.setRepeatMode(RepeatMode.Track)
+  })
+
+  const trackUrl = useGetTrackUrl(nowPlayingArtistId)
+
+  // Request preview playback
+  const playPreview = useCallback(async (artistId: ID) => {
+    await TrackPlayer.reset()
+    setHasPlayed(true)
+    setNowPlayingArtistId(artistId)
+    setIsPlaying(true)
+  }, [])
+
+  // Initiates preview playback once trackUrl is available
+  useAsync(async () => {
+    if (!trackUrl) return
+    setIsPlaying(true)
+    await TrackPlayer.add({ url: trackUrl })
+    await TrackPlayer.play()
+  }, [nowPlayingArtistId, trackUrl])
+
+  const togglePreview = useCallback(async () => {
+    const state = await TrackPlayer.getState()
+    if (state === State.Playing) {
+      setIsPlaying(false)
+      await TrackPlayer.pause()
+    } else if (state === State.Paused) {
+      setIsPlaying(true)
+      await TrackPlayer.play()
+    }
+  }, [])
+
+  const context = useMemo(
+    () => ({
+      hasPlayed,
+      isPlaying,
+      nowPlayingArtistId,
+      playPreview,
+      togglePreview
+    }),
+    [hasPlayed, isPlaying, nowPlayingArtistId, playPreview, togglePreview]
+  )
+
+  return (
+    <SelectArtistsPreviewContext.Provider value={context}>
+      {props.children}
+    </SelectArtistsPreviewContext.Provider>
+  )
+}

From 0243c5ef98de5d80b81f248cf02da46997648695 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Tue, 19 Dec 2023 16:35:51 -0800
Subject: [PATCH 2/4] Address rest of items

---
 .../src/screens/root-screen/RootScreen.tsx    |  2 +-
 .../SelectArtistScreen/FollowArtistField.tsx  | 46 +++++++++++++++----
 .../SelectArtistScreen/PreviewArtistHint.tsx  | 38 +++++++++++++++
 .../SelectArtistScreen/TopArtistsCardList.tsx |  9 +++-
 ...wArtistToast.tsx => PreviewArtistHint.tsx} |  2 +-
 .../sign-up-page/pages/SelectArtistsPage.tsx  |  4 +-
 6 files changed, 86 insertions(+), 15 deletions(-)
 create mode 100644 packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/PreviewArtistHint.tsx
 rename packages/web/src/pages/sign-up-page/components/{PreviewArtistToast.tsx => PreviewArtistHint.tsx} (94%)

diff --git a/packages/mobile/src/screens/root-screen/RootScreen.tsx b/packages/mobile/src/screens/root-screen/RootScreen.tsx
index 93773e5211e..58cc1d6f433 100644
--- a/packages/mobile/src/screens/root-screen/RootScreen.tsx
+++ b/packages/mobile/src/screens/root-screen/RootScreen.tsx
@@ -119,7 +119,7 @@ export const RootScreen = () => {
             />
           ) : showHomeStack ? (
             <Stack.Screen name='HomeStack' component={AppDrawerScreen} />
-          ) : isSignUpRedesignEnabled ? (
+          ) : !isSignUpRedesignEnabled ? (
             <Stack.Screen name='SignOnStackNew' component={SignOnStack} />
           ) : (
             <Stack.Screen name='SignOnStack' component={SignOnScreen} />
diff --git a/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/FollowArtistField.tsx b/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/FollowArtistField.tsx
index d20002bc4e4..7eef96197c2 100644
--- a/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/FollowArtistField.tsx
+++ b/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/FollowArtistField.tsx
@@ -5,7 +5,9 @@ import { css } from '@emotion/native'
 import { useField } from 'formik'
 import LottieView from 'lottie-react-native'
 import { Pressable } from 'react-native'
+import RadialGradient from 'react-native-radial-gradient'
 
+import type { Icon } from '@audius/harmony-native'
 import {
   Box,
   Flex,
@@ -57,6 +59,39 @@ export const FollowArtistField = (props: FollowArtistFieldProps) => {
     }
   }, [isPreviewing, playPreview, togglePreview, user_id])
 
+  // The play/pause icon over the user avatar
+  const renderPreviewElement = () => {
+    let PreviewIcon: Icon | null = null
+
+    if (showPreviewHint && !hasPlayed) {
+      PreviewIcon = IconPlay
+    } else if (isPreviewing && isPlaying) {
+      PreviewIcon = IconPause
+    } else if (isPreviewing && !isPlaying) {
+      PreviewIcon = IconPlay
+    }
+
+    if (!PreviewIcon) return null
+
+    return (
+      <RadialGradient
+        style={css({
+          width: '100%',
+          height: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+          opacity: 0.73
+        })}
+        colors={['rgba(0, 0, 0, 0.50)', 'rgba(0, 0, 0, 0.10)']}
+        stops={[0, 1]}
+        center={[0.5, 0.5]}
+        radius={0.5}
+      >
+        <PreviewIcon size='l' color='staticWhite' shadow='drop' />
+      </RadialGradient>
+    )
+  }
+
   return (
     <Paper>
       <Pressable onPress={handlePress}>
@@ -94,16 +129,7 @@ export const FollowArtistField = (props: FollowArtistFieldProps) => {
       >
         <Pressable onPress={handlePress}>
           <ProfilePicture size='large' userId={user_id} variant='strong'>
-            {showPreviewHint && !hasPlayed ? (
-              <IconPlay size='l' color='staticWhite' />
-            ) : null}
-            {isPreviewing ? (
-              isPlaying ? (
-                <IconPause size='l' color='staticWhite' />
-              ) : (
-                <IconPlay size='l' color='staticWhite' />
-              )
-            ) : null}
+            {renderPreviewElement()}
           </ProfilePicture>
         </Pressable>
       </Flex>
diff --git a/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/PreviewArtistHint.tsx b/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/PreviewArtistHint.tsx
new file mode 100644
index 00000000000..f7da0fa1b64
--- /dev/null
+++ b/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/PreviewArtistHint.tsx
@@ -0,0 +1,38 @@
+import { useState } from 'react'
+
+import { IconCloseAlt, IconPlay, Paper, Text } from '@audius/harmony-native'
+
+const messages = {
+  previewNotice: "Press the artist's photo to preview their music."
+}
+
+export const PreviewArtistHint = () => {
+  const [isOpen, setIsOpen] = useState(true)
+
+  if (!isOpen) return null
+
+  return (
+    <Paper
+      backgroundColor='accent'
+      mh='l'
+      ph='l'
+      pv='s'
+      mb='xl'
+      gap='s'
+      alignItems='center'
+      justifyContent='space-between'
+      direction='row'
+    >
+      <IconPlay color='staticWhite' size='m' />
+      <Text variant='body' color='staticWhite' style={{ flex: 1 }}>
+        {messages.previewNotice}
+      </Text>
+      <IconCloseAlt
+        role='button'
+        color='staticWhite'
+        size='m'
+        onPress={() => setIsOpen(false)}
+      />
+    </Paper>
+  )
+}
diff --git a/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/TopArtistsCardList.tsx b/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/TopArtistsCardList.tsx
index 144de1993ec..38e91e8abc9 100644
--- a/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/TopArtistsCardList.tsx
+++ b/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/TopArtistsCardList.tsx
@@ -12,6 +12,7 @@ import {
   FollowArtistField,
   FollowArtistTileSkeleton
 } from './FollowArtistField'
+import { PreviewArtistHint } from './PreviewArtistHint'
 
 export const useGetTopArtists = (genre: string, options?: QueryHookOptions) => {
   const useGetArtistsHook =
@@ -37,9 +38,15 @@ export const TopArtistsCardList = (props: Props) => {
 
   return (
     <CardList
+      ListHeaderComponent={genre === 'Featured' ? <PreviewArtistHint /> : null}
       data={artists}
       style={css({ paddingTop: spacing.xl })}
-      renderItem={({ item }) => <MemoizedFollowArtistField artist={item} />}
+      renderItem={({ item, index }) => (
+        <MemoizedFollowArtistField
+          artist={item}
+          showPreviewHint={genre === 'Featured' && index === 0}
+        />
+      )}
       sceneName={genre}
       numColumns={2}
       ListFooterComponent={<Box h={140} />}
diff --git a/packages/web/src/pages/sign-up-page/components/PreviewArtistToast.tsx b/packages/web/src/pages/sign-up-page/components/PreviewArtistHint.tsx
similarity index 94%
rename from packages/web/src/pages/sign-up-page/components/PreviewArtistToast.tsx
rename to packages/web/src/pages/sign-up-page/components/PreviewArtistHint.tsx
index 7cda0eae85d..f24daea4667 100644
--- a/packages/web/src/pages/sign-up-page/components/PreviewArtistToast.tsx
+++ b/packages/web/src/pages/sign-up-page/components/PreviewArtistHint.tsx
@@ -6,7 +6,7 @@ const messages = {
   previewNotice: "Click the artist's photo to preview their music."
 }
 
-export const PreviewArtistToast = () => {
+export const PreviewArtistHint = () => {
   const [isOpen, setIsOpen] = useState(true)
 
   // TODO: add transition
diff --git a/packages/web/src/pages/sign-up-page/pages/SelectArtistsPage.tsx b/packages/web/src/pages/sign-up-page/pages/SelectArtistsPage.tsx
index 6c18a1b2a38..e3c314e9ad4 100644
--- a/packages/web/src/pages/sign-up-page/pages/SelectArtistsPage.tsx
+++ b/packages/web/src/pages/sign-up-page/pages/SelectArtistsPage.tsx
@@ -31,7 +31,7 @@ import {
   FollowArtistTile,
   FollowArtistTileSkeleton
 } from '../components/FollowArtistTile'
-import { PreviewArtistToast } from '../components/PreviewArtistToast'
+import { PreviewArtistHint } from '../components/PreviewArtistHint'
 import {
   Heading,
   HiddenLegend,
@@ -188,7 +188,7 @@ export const SelectArtistsPage = () => {
                     {messages.pickArtists(currentGenre)}
                   </HiddenLegend>
 
-                  {isLoading || !isMobile ? null : <PreviewArtistToast />}
+                  {isLoading || !isMobile ? null : <PreviewArtistHint />}
                   <Flex
                     gap={isMobile ? 's' : 'm'}
                     wrap='wrap'

From db0be085ab118f187dd4a7808e9f457f831f548a Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Tue, 19 Dec 2023 16:41:39 -0800
Subject: [PATCH 3/4] Fix root

---
 packages/mobile/src/screens/root-screen/RootScreen.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mobile/src/screens/root-screen/RootScreen.tsx b/packages/mobile/src/screens/root-screen/RootScreen.tsx
index 58cc1d6f433..93773e5211e 100644
--- a/packages/mobile/src/screens/root-screen/RootScreen.tsx
+++ b/packages/mobile/src/screens/root-screen/RootScreen.tsx
@@ -119,7 +119,7 @@ export const RootScreen = () => {
             />
           ) : showHomeStack ? (
             <Stack.Screen name='HomeStack' component={AppDrawerScreen} />
-          ) : !isSignUpRedesignEnabled ? (
+          ) : isSignUpRedesignEnabled ? (
             <Stack.Screen name='SignOnStackNew' component={SignOnStack} />
           ) : (
             <Stack.Screen name='SignOnStack' component={SignOnScreen} />

From bfa813e19f8c9bc61b313d1499a9e245266e3d39 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Wed, 20 Dec 2023 22:56:51 -0800
Subject: [PATCH 4/4] Fix mistake

---
 packages/mobile/src/screens/sign-on-screen/SignOnStack.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/mobile/src/screens/sign-on-screen/SignOnStack.tsx b/packages/mobile/src/screens/sign-on-screen/SignOnStack.tsx
index b54821b1880..614e59dc47f 100644
--- a/packages/mobile/src/screens/sign-on-screen/SignOnStack.tsx
+++ b/packages/mobile/src/screens/sign-on-screen/SignOnStack.tsx
@@ -15,10 +15,7 @@ const screenOptionsOverrides = { animationTypeForReplace: 'pop' as const }
 export const SignOnStack = () => {
   const screenOptions = useScreenOptions(screenOptionsOverrides)
   return (
-    <Stack.Navigator
-      initialRouteName='SelectArtists'
-      screenOptions={screenOptions}
-    >
+    <Stack.Navigator initialRouteName='SignOn' screenOptions={screenOptions}>
       <Stack.Screen
         name='SignOn'
         component={SignOnScreen}