[C-3668] Improve artist previews

packages/common/src/api/track.ts

@@ -58,14 +58,16 @@ const trackApi = createApi({
  fetch: async (
  {
  handle,
- currentUserId
- }: { handle: string; currentUserId: Nullable<ID> },
+ currentUserId,
+ limit
+ }: { handle: string; currentUserId: Nullable<ID>; limit?: number },
  { apiClient }
  ) => {
  return await apiClient.getUserTracksByHandle({
  handle,
  currentUserId,
- getUnlisted: false
+ getUnlisted: false,
+ limit
  })
  },
  options: {

packages/common/src/store/player/slice.ts

@@ -57,6 +57,7 @@ type PlayPayload = Maybe<{
  uid?: Nullable<UID>
  trackId?: ID
  isPreview?: boolean
+ startTime?: number
  onEnd?: (...args: any) => any
 }>
 

packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/selectArtistPreviewContext.tsx

@@ -103,15 +103,7 @@ export const SelectArtistsPreviewContextProvider = (props: {
  )
 
  useEffect(() => {
- const cleanup = async () => {
- const { state } = await TrackPlayer.getPlaybackState()
- if (state === State.Playing) {
- await TrackPlayer.pause()
- }
- }
- return () => {
- cleanup()
- }
+ TrackPlayer.reset()
  }, [])
 
  return (

packages/mobile/src/services/sdk/audius-sdk.ts

@@ -3,11 +3,12 @@ import { EventEmitter } from 'events'
 import type { AudiusSdk } from '@audius/sdk'
 import { AntiAbuseOracleSelector, sdk } from '@audius/sdk'
 
+import { env } from 'app/env'
+
 import { auth } from './auth'
 import { discoveryNodeSelectorService } from './discoveryNodeSelector'
 import { claimableTokensService, rewardManagerService } from './solana'
 import { getStorageNodeSelector } from './storageNodeSelector'
-import { env } from 'app/env'
 
 let inProgress = false
 const SDK_LOADED_EVENT_NAME = 'AUDIUS_SDK_LOADED'

packages/web/src/common/store/player/sagas.ts

@@ -70,7 +70,7 @@ const RECORD_LISTEN_INTERVAL = 1000
 export function* watchPlay() {
  const getFeatureEnabled = yield* getContext('getFeatureEnabled')
  yield* takeLatest(play.type, function* (action: ReturnType<typeof play>) {
- const { uid, trackId, isPreview, onEnd } = action.payload ?? {}
+ const { uid, trackId, isPreview, startTime, onEnd } = action.payload ?? {}
 
  const audioPlayer = yield* getContext('audioPlayer')
  const isNativeMobile = yield getContext('isNativeMobile')
@@ -200,6 +200,9 @@ export function* watchPlay() {
  const doesUserHaveStreamAccess =
  !track?.is_stream_gated || !!track?.access?.stream
  if (!trackId || doesUserHaveStreamAccess || isPreview) {
+ if (startTime) {
+ audioPlayer.seek(startTime)
+ }
  audioPlayer.play()
  yield* put(playSucceeded({ uid, trackId, isPreview }))
  } else {

packages/web/src/pages/sign-up-page/utils/selectArtistsPreviewContext.tsx

@@ -2,14 +2,15 @@ import { createContext, useCallback, useEffect, useState } from 'react'
 
 import {
  ID,
- encodeHashId,
+ UserTrackMetadata,
+ playerActions,
  useGetUserById,
  useGetUserTracksByHandle
 } from '@audius/common'
+import { useDispatch } from 'react-redux'
 import { useUnmount } from 'react-use'
 
 import { audioPlayer } from 'services/audio-player'
-import { apiClient } from 'services/audius-api-client'
 
 type PreviewContextProps = {
  isPlaying: boolean
@@ -32,7 +33,8 @@ export const SelectArtistsPreviewContextProvider = (props: {
 }) => {
  const [isPlaying, setIsPlaying] = useState(false)
  const [nowPlayingArtistId, setNowPlayingArtistId] = useState<number>(-1)
- const [trackId, setTrackId] = useState<string | null>(null)
+ const [track, setTrack] = useState<UserTrackMetadata | null>(null)
+ const dispatch = useDispatch()
 
  const { data: artist } = useGetUserById({
  id: nowPlayingArtistId,
@@ -41,64 +43,73 @@ export const SelectArtistsPreviewContextProvider = (props: {
  const { data: artistTracks } = useGetUserTracksByHandle(
  {
  handle: artist?.handle,
- currentUserId: null
+ currentUserId: null,
+ // Unlikely we cant play an artist's first 3 tracks.
+ limit: 3
  },
  { disabled: !artist?.handle }
  )
 
  useEffect(() => {
- const trackId = artistTracks?.find((track) => track.is_available)?.track_id
- trackId && setTrackId(encodeHashId(trackId))
+ const track = artistTracks?.find((track) => track.is_available)
+ if (track) {
+ setTrack(track)
+ }
  }, [artistTracks])
 
  const togglePlayback = useCallback(() => {
  if (audioPlayer.isPlaying()) {
-audioPlayer.pause()
+dispatch(playerActions.pause())
  setIsPlaying(false)
  } else {
-audioPlayer.play()
+dispatch(playerActions.play())
  setIsPlaying(true)
  }
- }, [])
+ }, [dispatch])
 
  const stopPreview = useCallback(() => {
  audioPlayer.stop()
  setNowPlayingArtistId(-1)
-setTrackId(null)
+setTrack(null)
  setIsPlaying(false)
  }, [])
 
- const playPreview = useCallback((artistId: ID) => {
- if (audioPlayer.isPlaying()) {
- audioPlayer.stop()
- }
- setNowPlayingArtistId(artistId)
- setIsPlaying(true)
- }, [])
+ const playPreview = useCallback(
+ (artistId: ID) => {
+ if (audioPlayer.isPlaying()) {
+ dispatch(playerActions.stop({}))
+ }
+ setNowPlayingArtistId(artistId)
+ setIsPlaying(true)
+ },
+ [dispatch]
+ )
 
  const togglePreview = useCallback(
  (artistId: ID) => {
  if (artistId === nowPlayingArtistId) {
  togglePlayback()
  } else {
-audioPlayer.stop()
+dispatch(playerActions.stop({}))
  setIsPlaying(false)
  setNowPlayingArtistId(artistId)
  }
  },
- [nowPlayingArtistId, togglePlayback]
+ [nowPlayingArtistId, togglePlayback, dispatch]
  )
 
  useEffect(() => {
- if (!trackId) return
- audioPlayer.load(
- 0,
- stopPreview,
- apiClient.makeUrl(`/tracks/${trackId}/stream`)
- )
- audioPlayer.play()
+ if (!track) return
+ const { track_id, preview_cid, duration } = track
+ const isPreview = !!preview_cid
+ const startTime = isPreview
+ ? undefined
+ : Math.min(30, Math.max(0, duration - 30))
+
+ dispatch(playerActions.play({ trackId: track_id, startTime, isPreview }))
+
  setIsPlaying(true)
- }, [nowPlayingArtistId, stopPreview, trackId])
+ }, [nowPlayingArtistId, stopPreview, track, dispatch])
 
  useUnmount(stopPreview)
 

packages/web/src/services/audius-sdk/solana.ts

@@ -6,8 +6,8 @@ import {
  SolanaRelayWalletAdapter
 } from '@audius/sdk'
 import { PublicKey } from '@solana/web3.js'
-import { env } from 'services/env'
 
+import { env } from 'services/env'
 
 const solanaRelay = new SolanaRelay(
  new Configuration({
@@ -38,8 +38,6 @@ export const claimableTokensService = new ClaimableTokensClient({
 export const rewardManagerService = new RewardManagerClient({
  programId: new PublicKey(env.REWARDS_MANAGER_PROGRAM_ID),
  rpcEndpoint: env.SOLANA_CLUSTER_ENDPOINT,
- rewardManagerState: new PublicKey(
- env.REWARDS_MANAGER_PROGRAM_PDA
- ),
+ rewardManagerState: new PublicKey(env.REWARDS_MANAGER_PROGRAM_PDA),
  solanaWalletAdapter
 })