[PAY-2051] Show preview UI when playing your own preview (#6468)

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

@@ -3,14 +3,16 @@ import {
   DogEarType,
   SquareSizes,
   averageColorSelectors,
-  usePremiumContentAccess
+  usePremiumContentAccess,
+  playerSelectors
 } from '@audius/common'
 import { Dimensions } from 'react-native'
 import { useSelector } from 'react-redux'
 
 import { DogEar, Shadow } from 'app/components/core'
 import { TrackImage } from 'app/components/image/TrackImage'
 import { makeStyles } from 'app/styles'
+const { getPreviewing } = playerSelectors
 const { getDominantColorsByTrack } = averageColorSelectors
 
 const dimensions = Dimensions.get('window')
@@ -56,10 +58,11 @@ export const Artwork = ({ track }: ArtworkProps) => {
   }
 
   const { doesUserHaveAccess } = usePremiumContentAccess(track)
+  const isPreviewing = useSelector(getPreviewing)
   const shouldShowDogEar =
     track?.premium_conditions &&
     'usdc_purchase' in track.premium_conditions &&
-    !doesUserHaveAccess
+    (!doesUserHaveAccess || isPreviewing)
 
   return (
     <Shadow opacity={0.2} radius={8} color={shadowColor} style={styles.root}>

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

@@ -6,6 +6,7 @@ import {
   FavoriteSource,
   accountSelectors,
   tracksSocialActions,
+  playerSelectors,
   usePremiumContentAccess
 } from '@audius/common'
 import { TouchableOpacity, Animated, View, Dimensions } from 'react-native'
@@ -26,6 +27,7 @@ import { TrackingBar } from './TrackingBar'
 import { NOW_PLAYING_HEIGHT, PLAY_BAR_HEIGHT } from './constants'
 const { getAccountUser } = accountSelectors
 const { saveTrack, unsaveTrack } = tracksSocialActions
+const { getPreviewing } = playerSelectors
 
 const messages = {
   preview: 'PREVIEW'
@@ -128,10 +130,11 @@ export const PlayBar = (props: PlayBarProps) => {
   const staticWhite = useColor('staticWhite')
 
   const { doesUserHaveAccess } = usePremiumContentAccess(track)
+  const isPreviewing = useSelector(getPreviewing)
   const shouldShowPreviewLock =
     track?.premium_conditions &&
     'usdc_purchase' in track.premium_conditions &&
-    !doesUserHaveAccess
+    (!doesUserHaveAccess || isPreviewing)
 
   const onPressFavoriteButton = useCallback(() => {
     if (track) {

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

@@ -2,15 +2,19 @@ import {
   usePremiumContentAccess,
   type Nullable,
   type Track,
-  type User
+  type User,
+  playerSelectors
 } from '@audius/common'
 import { TouchableOpacity, View } from 'react-native'
+import { useSelector } from 'react-redux'
 
 import { LockedStatusBadge, Text } from 'app/components/core'
 import UserBadges from 'app/components/user-badges/UserBadges'
 import { makeStyles } from 'app/styles'
 import type { GestureResponderHandler } from 'app/types/gesture'
 
+const { getPreviewing } = playerSelectors
+
 const messages = {
   preview: 'PREVIEW'
 }
@@ -58,10 +62,11 @@ export const TrackInfo = ({
 }: TrackInfoProps) => {
   const styles = useStyles()
   const { doesUserHaveAccess } = usePremiumContentAccess(track)
+  const isPreviewing = useSelector(getPreviewing)
   const shouldShowPreviewLock =
     track?.premium_conditions &&
     'usdc_purchase' in track.premium_conditions &&
-    !doesUserHaveAccess
+    (!doesUserHaveAccess || isPreviewing)
 
   return (
     <View style={styles.root}>

packages/mobile/src/screens/track-screen/TrackScreenDetailsTile.tsx

@@ -29,7 +29,8 @@ import {
   playbackPositionSelectors,
   FeatureFlags,
   isPremiumContentUSDCPurchaseGated,
-  isPremiumContentCollectibleGated
+  isPremiumContentCollectibleGated,
+  queueSelectors
 } from '@audius/common'
 import type { UID, User, SearchTrack, SearchUser, Track } from '@audius/common'
 import { Image, View } from 'react-native'
@@ -70,6 +71,8 @@ const { tracksActions } = trackPageLineupActions
 const { getUserId } = accountSelectors
 const { getIsReachable } = reachabilitySelectors
 const { getTrackPosition } = playbackPositionSelectors
+const { makeGetCurrent } = queueSelectors
+const getCurrentQueueItem = makeGetCurrent()
 
 const messages = {
   track: 'track',
@@ -90,12 +93,13 @@ type TrackScreenDetailsTileProps = {
   isLineupLoading: boolean
 }
 
-const recordPlay = (id, play = true) => {
+const recordPlay = (id, play = true, isPreview = false) => {
   record(
     make({
       eventName: play ? Name.PLAYBACK_PLAY : Name.PLAYBACK_PAUSE,
       id: String(id),
-      source: PlaybackSource.TRACK_PAGE
+      source: PlaybackSource.TRACK_PAGE,
+      isPreview
     })
   )
 }
@@ -292,25 +296,30 @@ export const TrackScreenDetailsTile = ({
     [track]
   )
 
+  const currentQueueItem = useSelector(getCurrentQueueItem)
   const play = useCallback(
     ({ isPreview = false } = {}) => {
       if (isLineupLoading) return
 
-      if (isPlaying && isPlayingId && isPreviewing === isPreview) {
+      if (isPlaying && isPreviewing === isPreview) {
         dispatch(tracksActions.pause())
-        recordPlay(track_id, false)
-      } else if (!isPlayingId) {
-        dispatch(tracksActions.play(uid, { isPreview }))
-        recordPlay(track_id)
-      } else {
+        recordPlay(track_id, false, true)
+      } else if (
+        currentQueueItem.uid !== uid &&
+        currentQueueItem.track &&
+        currentQueueItem.track.track_id === track_id
+      ) {
         dispatch(tracksActions.play())
         recordPlay(track_id)
+      } else {
+        dispatch(tracksActions.play(uid, { isPreview }))
+        recordPlay(track_id, true, true)
       }
     },
     [
       track_id,
+      currentQueueItem,
       uid,
-      isPlayingId,
       dispatch,
       isPlaying,
       isPreviewing,

packages/web/src/components/nav/desktop/NowPlayingArtworkTile.tsx

@@ -26,7 +26,7 @@ import { fullTrackPage } from 'utils/route'
 
 import styles from './NowPlayingArtworkTile.module.css'
 
-const { getTrackId, getCollectible } = playerSelectors
+const { getTrackId, getCollectible, getPreviewing } = playerSelectors
 const { getTrack } = cacheTracksSelectors
 const { getUserId } = accountSelectors
 const { getDominantColorsByTrack } = averageColorSelectors
@@ -69,10 +69,11 @@ export const NowPlayingArtworkTile = () => {
     getTrack(state, { id: trackId })
   )
   const { doesUserHaveAccess } = usePremiumContentAccess(track)
+  const isPreviewing = useSelector(getPreviewing)
   const shouldShowPurchaseDogEar =
     track?.premium_conditions &&
     'usdc_purchase' in track.premium_conditions &&
-    !doesUserHaveAccess
+    (!doesUserHaveAccess || isPreviewing)
 
   const isOwner = useSelector((state: CommonState) => {
     const ownerId = getTrack(state, { id: trackId })?.owner_id

packages/web/src/components/play-bar/desktop/components/PlayingTrackInfo.tsx

@@ -7,7 +7,8 @@ import {
   SquareSizes,
   CommonState,
   cacheTracksSelectors,
-  usePremiumContentAccess
+  usePremiumContentAccess,
+  playerSelectors
 } from '@audius/common'
 import cn from 'classnames'
 import { useSelector } from 'react-redux'
@@ -23,6 +24,7 @@ import { fullTrackPage } from 'utils/route'
 
 import styles from './PlayingTrackInfo.module.css'
 const { getTrack } = cacheTracksSelectors
+const { getPreviewing } = playerSelectors
 
 const messages = {
   preview: 'Preview'
@@ -69,10 +71,11 @@ const PlayingTrackInfo = ({
     getTrack(state, { id: trackId })
   )
   const { doesUserHaveAccess } = usePremiumContentAccess(track)
+  const isPreviewing = useSelector(getPreviewing)
   const shouldShowPreviewLock =
     track?.premium_conditions &&
     'usdc_purchase' in track.premium_conditions &&
-    !doesUserHaveAccess
+    (!doesUserHaveAccess || isPreviewing)
 
   const [artistSpringProps, setArtistSpringProps] = useSpring(() => springProps)
   const [trackSpringProps, setTrackSpringProps] = useSpring(() => springProps)

packages/web/src/components/play-bar/mobile/PlayBar.tsx

@@ -14,7 +14,7 @@ import {
 } from '@audius/common'
 import { IconLock } from '@audius/stems'
 import cn from 'classnames'
-import { connect } from 'react-redux'
+import { connect, useSelector } from 'react-redux'
 import { Dispatch } from 'redux'
 
 import { make, useRecord } from 'common/store/analytics/actions'
@@ -31,7 +31,7 @@ import { isDarkMode, isMatrix } from 'utils/theme/theme'
 
 import styles from './PlayBar.module.css'
 const { makeGetCurrent } = queueSelectors
-const { getBuffering, getCounter, getPlaying } = playerSelectors
+const { getPreviewing, getBuffering, getCounter, getPlaying } = playerSelectors
 const { recordListen, saveTrack, unsaveTrack } = tracksSocialActions
 const { pause, play } = queueActions
 
@@ -88,10 +88,11 @@ const PlayBar = ({
     collectible?.gifUrl
 
   const { doesUserHaveAccess } = usePremiumContentAccess(track)
+  const isPreviewing = useSelector(getPreviewing)
   const shouldShowPreviewLock =
     track?.premium_conditions &&
     'usdc_purchase' in track.premium_conditions &&
-    !doesUserHaveAccess
+    (!doesUserHaveAccess || isPreviewing)
 
   if (((!uid || !track) && !collectible) || !user) return null
 

packages/web/src/components/track/LockedStatusBadge.module.css

@@ -38,5 +38,6 @@
 }
 
 .text {
+  color: var(--static-white);
   text-decoration: none;
 }