Sdk 2.0 (#81)

packages/bedtime/package.json

@@ -51,7 +51,7 @@
     "webpack-cli": "4.5.0"
   },
   "dependencies": {
-    "@audius/sdk": "1.0.45",
+    "@audius/sdk": "2.0.1",
     "@audius/stems": "0.3.9",
     "amplitude-js": "8.11.1",
     "axios": "0.19.2",

packages/bedtime/src/components/app.jsx

@@ -250,7 +250,7 @@ const App = (props) => {
           setCollectionsResponse(collection)
           recordOpen(
             decodeHashId(collection.id),
-            collection.playlist_name,
+            collection.playlistName,
             collection.user.handle,
             stripLeadingSlash(collection.permalink)
           )

packages/bedtime/src/components/collectibles/CollectiblesHeader.jsx

@@ -46,7 +46,7 @@ const CollectiblesHeader = ({
   backButtonVisible = false,
   onBackButtonClick = () => {}
 }) => {
-  const { name, handle, is_verified, total_balance } = user
+  const { name, handle, isVerified, total_balance } = user
   const onClick = () => window.open(getCopyableLink(`${handle}/collectibles`), '_blank')
 
   return (
@@ -64,7 +64,7 @@ const CollectiblesHeader = ({
         <h2>NFT COLLECTIBLES</h2>
         <div className={styles.userInfo}>
           <h2>{name}</h2>
-          {is_verified && <IconVerified />}
+          {isVerified && <IconVerified />}
           {getTierIcon(total_balance)}
         </div>
       </div>

packages/bedtime/src/components/collection/CollectionHelmet.jsx

@@ -7,18 +7,18 @@ const CollectionHelmet = ({ collection }) => {
     return null
   }
 
-  const title = `${collection.playlist_name} by ${collection.user.name} • Audius`
-  const description = `Listen on Audius: ${collection.playlist_name}`
+  const title = `${collection.playlistName} by ${collection.user.name} • Audius`
+  const description = `Listen on Audius: ${collection.playlistName}`
   const hostname = getAudiusHostname()
   const url = `https://${hostname}${collection.permalink}`
-  const isAlbum = collection.is_album
+  const isAlbum = collection.isAlbum
   let type = isAlbum ? 'MusicAlbum' : 'MusicPlaylist'
   const structuredData = {
     '@context': 'http://schema.googleapis.com/',
     '@type': type,
     '@id': url,
     url,
-    name: collection.playlist_name,
+    name: collection.playlistName,
     description
   }
 

packages/bedtime/src/components/collection/CollectionPlayerCard.jsx

@@ -108,7 +108,7 @@ const CollectionPlayerCard = ({
             <ShareButton
               url={permalink}
               creator={collection.user.name}
-              title={collection.playlist_name}
+              title={collection.playlistName}
             />
           </div>
         </div>
@@ -126,8 +126,8 @@ const CollectionPlayerCard = ({
             <Titles
               artistName={collection.user.name}
               handle={collection.user.handle}
-              isVerified={collection.user.is_verified}
-              title={collection.playlist_name}
+              isVerified={collection.user.isVerified}
+              title={collection.playlistName}
               titleUrl={permalink}
             />
             <BedtimeScrubber
@@ -160,7 +160,7 @@ const CollectionPlayerCard = ({
                   iconColor={rowBackgroundColor}
                   onTogglePlay={makeOnTogglePlay(i)}
                   textIsClickable={false}
-                  isVerified={track.user.is_verified}
+                  isVerified={track.user.isVerified}
                 />
               )
             })}

packages/bedtime/src/components/collection/CollectionPlayerContainer.jsx

@@ -1,6 +1,12 @@
 import { h } from 'preact'
-import { useState, useContext, useCallback, useEffect } from 'preact/hooks'
-import { getIsMp3StreamOn } from '../../util/getEnv'
+import {
+  useState,
+  useContext,
+  useCallback,
+  useEffect,
+  useMemo
+} from 'preact/hooks'
+
 import usePlayback from '../../hooks/usePlayback'
 import CollectionPlayerCard from './CollectionPlayerCard'
 import { PauseContext } from '../pausedpopover/PauseProvider'
@@ -26,26 +32,14 @@ const CollectionPlayerContainer = ({
   const [didInitAudio, setDidInitAudio] = useState(false)
   const { popoverVisibility, setPopoverVisibility } = useContext(PauseContext)
 
+  // Helper fn to get segements
+  const getSegments = useCallback(
+    (i) => collection.tracks[i].trackSegments,
+    [collection]
+  )
   const getId = useCallback((i) => collection.tracks[i]?.id, [collection])
-
-  const getTrackInfoForPlayback = useCallback(
-    (trackIndex) => {
-      const activeTrack = collection.tracks[trackIndex]
-      if (activeTrack == null) {
-        return null
-      }
-      const mp3StreamUrl = getIsMp3StreamOn()
-        ? getTrackStreamEndpoint(activeTrack.id)
-        : undefined
-
-      return {
-        segments: activeTrack.track_segments,
-        gateways: formatGateways(activeTrack.user.creator_node_endpoint),
-        title: activeTrack.title,
-        artistName: activeTrack.user.name,
-        mp3StreamUrl
-      }
-    },
+  const getGateways = useCallback(
+    (i) => formatGateways(collection.tracks[i].user.creatorNodeEndpoint),
     [collection.tracks]
   )
 
@@ -55,22 +49,22 @@ const CollectionPlayerContainer = ({
       // Handle last track case
       if (activeTrackIndex === collection.tracks.length - 1) {
         setActiveTrackIndex(0)
-        load(getTrackInfoForPlayback(0))
+        load(getSegments(0), getGateways(0))
         setPopoverVisibility(true)
         return
       }
 
-      const newTrackIndex = activeTrackIndex + 1
+      setActiveTrackIndex((i) => i + 1)
       stop()
-      load(getTrackInfoForPlayback(newTrackIndex))
-      setActiveTrackIndex(newTrackIndex)
+      load(getSegments(activeTrackIndex + 1), getGateways(activeTrackIndex + 1))
       onTogglePlay()
     },
     [
       activeTrackIndex,
       collection.tracks.length,
-      setPopoverVisibility,
-      getTrackInfoForPlayback
+      getSegments,
+      getGateways,
+      setPopoverVisibility
     ]
   )
 
@@ -95,21 +89,36 @@ const CollectionPlayerContainer = ({
     LISTEN_INTERVAL_SECONDS
   )
 
+  const trackInfoForPlayback = useMemo(() => {
+    const activeTrack = collection.tracks[activeTrackIndex]
+    if (activeTrack == null) {
+      return null
+    }
+    const mp3StreamUrl = getTrackStreamEndpoint(activeTrack.id)
+
+    return {
+      segments: activeTrack.trackSegments,
+      gateways: formatGateways(activeTrack.user.creatorNodeEndpoint),
+      title: activeTrack.title,
+      artistName: activeTrack.user.name,
+      mp3StreamUrl
+    }
+  }, [activeTrackIndex, collection.tracks])
+
   // Setup twitter autoplay
   useEffect(() => {
     const mobile = isMobile()
     if (!isTwitter || mobile || !collection.tracks.length) return
     initAudio()
-    loadTrack(getTrackInfoForPlayback(activeTrackIndex))
+    loadTrack(trackInfoForPlayback)
     setDidInitAudio(true)
     onTogglePlay()
     // TODO: Fix these deps
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [trackInfoForPlayback])
 
   const onTogglePlayTrack = useCallback(
     (trackIndex) => {
-      const trackInfoForPlayback = getTrackInfoForPlayback(trackIndex)
       if (!didInitAudio) {
         initAudio()
         loadTrack(trackInfoForPlayback)
@@ -144,7 +153,7 @@ const CollectionPlayerContainer = ({
       onTogglePlay,
       stop,
       getId,
-      getTrackInfoForPlayback
+      trackInfoForPlayback
     ]
   )
 

packages/bedtime/src/components/track/TrackPlayerContainer.jsx

@@ -56,8 +56,8 @@ const TrackPlayerContainer = ({
 
   const trackInfoForPlayback = useMemo(() => {
     return {
-      segments: track.track_segments,
-      gateways: formatGateways(track.user.creator_node_endpoint),
+      segments: track.trackSegments,
+      gateways: formatGateways(track.user.creatorNodeEndpoint),
       title: track.title,
       artistName: track.user.name,
       mp3StreamUrl: getIsMp3StreamOn()
@@ -67,8 +67,8 @@ const TrackPlayerContainer = ({
   }, [
     track.id,
     track.title,
-    track.track_segments,
-    track.user.creator_node_endpoint,
+    track.trackSegments,
+    track.user.creatorNodeEndpoint,
     track.user.name
   ])
 
@@ -145,7 +145,7 @@ const TrackPlayerContainer = ({
     playingState,
     albumArtURL,
     onTogglePlay: didTogglePlay,
-    isVerified: track.user.is_verified,
+    isVerified: track.user.isVerified,
     seekTo,
     position,
     duration,

packages/bedtime/src/util/BedtimeClient.js

@@ -1,5 +1,5 @@
 import { getIdentityEndpoint, getAPIHostname } from './getEnv'
-import { sdk } from '@audius/sdk'
+import { sdk, DiscoveryNodeSelector } from '@audius/sdk'
 
 import { recordListen as recordAnalyticsListen } from '../analytics/analytics'
 import { encodeHashId, decodeHashId } from './hashids'
@@ -40,12 +40,14 @@ export const RequestedEntity = Object.seal({
   COLLECTIBLES: 'collectibles'
 })
 let discoveryEndpoint
+const discoveryNodeSelector = new DiscoveryNodeSelector()
+discoveryNodeSelector.addEventListener('change', endpoint => {
+  discoveryEndpoint = endpoint
+})
 const audiusSdk = sdk({
   appName: 'Audius Embed Player',
-  discoveryProviderConfig: {
-    selectionCallback: (endpoint) => {
-      discoveryEndpoint = endpoint
-    }
+  services: {
+    discoveryNodeSelector
   },
   ...sdkConfigOptions
 })
@@ -130,12 +132,12 @@ export const getCollection = async (id) => {
   const res = await audiusSdk.full.playlists.getPlaylist({
     playlistId: encodeHashId(id)
   })
-  return getFormattedCollectionResponse(res)
+  return getFormattedCollectionResponse(res.data)
 }
 
 export const getCollectionWithHashId = async (hashId) => {
   const res = await audiusSdk.full.playlists.getPlaylist({ playlistId: hashId })
-  return getFormattedCollectionResponse(res)
+  return getFormattedCollectionResponse(res.data)
 }
 
 export const getCollectible = async (handle, collectibleId) => {

packages/bedtime/src/util/getArtworkUrl.js

@@ -2,7 +2,7 @@ export const getArtworkUrl = (
   collectionOrTrack,
   useDefaultArtworkIfMissing
 ) => {
-  const artworkUrl = (collectionOrTrack?.artwork || {})['480x480']
+  const artworkUrl = (collectionOrTrack?.artwork || {})['_480x480']
   if (!artworkUrl) {
     if (useDefaultArtworkIfMissing) {
       return 'https://download.audius.co/static-resources/preview-image.jpg'