Remove identity dependence for track plays (#20)

packages/web/src/components/track/desktop/ConnectedTrackTile.tsx

@@ -105,7 +105,7 @@ const ConnectedTrackTile = memo(
       has_current_user_reposted: isReposted,
       has_current_user_saved: isFavorited,
       _cover_art_sizes,
-      _listen_count: listenCount,
+      play_count,
       duration
     } = getTrackWithFallback(track)
 
@@ -305,7 +305,7 @@ const ConnectedTrackTile = memo(
           isOwner={isOwner}
           isLoading={isLoading}
           isDarkMode={isDarkMode()}
-          listenCount={listenCount}
+          listenCount={play_count}
           isActive={isActive}
           isArtistPick={isArtistPick}
           artwork={artwork}

packages/web/src/components/track/helpers.ts

@@ -14,7 +14,7 @@ export const getTrackWithFallback = (track: Track | null) => {
       save_count: 0,
       has_current_user_reposted: false,
       has_current_user_saved: false,
-      _listen_count: 0,
+      play_count: 0,
       is_delete: false,
       activity_timestamp: '',
       _co_sign: undefined,

packages/web/src/components/track/mobile/ConnectedTrackTile.tsx

@@ -82,7 +82,7 @@ const ConnectedTrackTile = memo(
       has_current_user_saved,
       _cover_art_sizes,
       activity_timestamp,
-      _listen_count,
+      play_count,
       _co_sign,
       duration
     } = getTrackWithFallback(track)
@@ -187,7 +187,7 @@ const ConnectedTrackTile = memo(
         activityTimestamp={activity_timestamp}
         trackTileStyles={trackTileStyles}
         size={size}
-        listenCount={_listen_count}
+        listenCount={play_count}
         coSign={_co_sign}
         // Artist Pick
         showArtistPick={showArtistPick}

packages/web/src/containers/collection-page/CollectionPageProvider.tsx

@@ -341,7 +341,7 @@ class CollectionPage extends Component<
       handle: metadata.user.handle,
       date: metadata.dateAdded || metadata.created_at,
       time: metadata.duration,
-      plays: metadata._listen_count
+      plays: metadata.play_count
     }))
   }
 

packages/web/src/containers/deleted-page/store/lineups/more-by/sagas.ts

@@ -1,5 +1,4 @@
 import { call } from 'redux-saga/effects'
-import { keyBy } from 'lodash'
 
 import AudiusBackend from 'services/AudiusBackend'
 
@@ -11,7 +10,7 @@ import { LineupSagas } from 'store/lineup/sagas'
 import { getLineup } from 'containers/deleted-page/store/selectors'
 import { processAndCacheTracks } from 'store/cache/tracks/utils'
 import { ID } from 'models/common/Identifiers'
-import Track from 'models/Track'
+import Track, { UserTrack } from 'models/Track'
 
 function* getTracks({
   offset,
@@ -23,33 +22,18 @@ function* getTracks({
   payload: { userId: ID | null }
 }) {
   const { userId } = payload
-  const tracks = yield call(AudiusBackend.getArtistTracks, {
+  const tracks: UserTrack[] = yield call(AudiusBackend.getArtistTracks, {
     offset,
     limit,
     userId,
     filterDeleted: true
   })
-  const processed = yield call(processAndCacheTracks, tracks)
-
-  const moreByArtistListenCounts = keyBy(
-    yield call(
-      AudiusBackend.getTrackListenCounts,
-      processed.map((track: any) => track.track_id)
-    ),
-    'trackId'
-  )
+  const processed: Track[] = yield call(processAndCacheTracks, tracks)
 
   return (
     processed
-      // Add listen counts
-      .map((t: Track, i: number) => ({
-        ...t,
-        _listen_count: moreByArtistListenCounts[t.track_id]
-          ? moreByArtistListenCounts[t.track_id].listens
-          : 0
-      }))
       // Sort by listen count desc
-      .sort((a: Track, b: Track) => b._listen_count! - a._listen_count!)
+      .sort((a, b) => b.play_count - a.play_count)
       // Take only the first 5
       .slice(0, 5)
   )

packages/web/src/containers/history-page/HistoryPageProvider.tsx

@@ -89,7 +89,7 @@ const HistoryPage = g(props => {
       handle: entry.user.handle,
       date: entry.dateListened,
       time: entry.duration,
-      plays: entry._listen_count
+      plays: entry.play_count
     }))
   }
 

packages/web/src/containers/history-page/components/desktop/HistoryPage.tsx

@@ -54,9 +54,7 @@ const HistoryPage = ({
   onFilterChange,
   filterText
 }: HistoryPageProps) => {
-  const tableLoading = !dataSource.every(
-    (track: any) => track._listen_count > -1
-  )
+  const tableLoading = !dataSource.every((track: any) => track.play_count > -1)
 
   const playAllButton = !loading ? (
     <Button

packages/web/src/containers/profile-page/store/lineups/tracks/sagas.js

@@ -14,7 +14,6 @@ import { LineupSagas } from 'store/lineup/sagas'
 import { getTrack } from 'store/cache/tracks/selectors'
 import { fetchUserByHandle } from 'store/cache/users/sagas'
 import { tracksActions as lineupActions } from './actions'
-import { keyBy } from 'lodash'
 import { SET_ARTIST_PICK } from 'store/social/tracks/actions'
 import { retrieveTracks, processAndCacheTracks } from 'store/cache/tracks/utils'
 
@@ -40,22 +39,11 @@ const getSortedTracks = async ({ offset, limit, payload, user }) => {
       userId: user.user_id,
       filterDeleted: true
     })
-    const trackListenCounts = await AudiusBackend.getTrackListenCounts(
-      tracks.map(track => track.track_id)
-    )
-    const moreByArtistListenCounts = keyBy(trackListenCounts, 'trackId')
 
     const sortedPopularTracks = tracks
       .filter(t => !t.is_delete)
-      // Add listen counts
-      .map((t, i) => ({
-        ...t,
-        _listen_count: moreByArtistListenCounts[t.track_id]
-          ? moreByArtistListenCounts[t.track_id].listens
-          : 0
-      }))
       // Sort by listen count desc
-      .sort((a, b) => b._listen_count - a._listen_count)
+      .sort((a, b) => b.play_count - a.play_count)
 
     userTracks.userId = user.user_id
     userTracks.tracks = sortedPopularTracks

packages/web/src/containers/saved-page/SavedPageProvider.tsx

@@ -104,7 +104,7 @@ class SavedPage extends PureComponent<SavedPageProps, SavedPageState> {
       handle: entry.user.handle,
       date: entry.dateSaved,
       time: entry.duration,
-      plays: entry._listen_count
+      plays: entry.play_count
     }))
   }
 

packages/web/src/containers/track-page/components/desktop/TrackPage.tsx

@@ -153,7 +153,7 @@ const TrackPage = ({
       coverArtSizes={defaults.coverArtSizes}
       tags={defaults.tags}
       description={defaults.description}
-      listenCount={defaults.listenCount}
+      listenCount={defaults.playCount}
       duration={defaults.duration}
       released={defaults.released}
       credits={defaults.credits}

packages/web/src/containers/track-page/components/mobile/TrackPage.tsx

@@ -161,7 +161,7 @@ const TrackPage = ({
             coverArtSizes={defaults.coverArtSizes}
             tags={defaults.tags}
             description={defaults.description}
-            listenCount={defaults.listenCount}
+            listenCount={defaults.playCount}
             repostCount={defaults.repostCount}
             duration={defaults.duration}
             released={defaults.released}

packages/web/src/containers/track-page/store/lineups/tracks/sagas.js

@@ -1,5 +1,4 @@
 import { call, select } from 'redux-saga/effects'
-import { keyBy } from 'lodash'
 import AudiusBackend from 'services/AudiusBackend'
 
 import {
@@ -29,14 +28,6 @@ function* getTracks({ offset, limit, payload }) {
   })
   const processed = yield call(processAndCacheTracks, tracks)
 
-  const moreByArtistListenCounts = keyBy(
-    yield call(
-      AudiusBackend.getTrackListenCounts,
-      processed.map(track => track.track_id)
-    ),
-    'trackId'
-  )
-
   // Add the hero track into the lineup so that the queue can pull directly from the lineup
   // TODO: Create better ad-hoc add to queue methods and use that instead of this
   const track = yield select(getTrack, { id: trackId })
@@ -60,15 +51,8 @@ function* getTracks({ offset, limit, payload }) {
           t.track_id !== remixParentTrackId &&
           !t.is_delete
       )
-      // Add listen counts
-      .map((t, i) => ({
-        ...t,
-        _listen_count: moreByArtistListenCounts[t.track_id]
-          ? moreByArtistListenCounts[t.track_id].listens
-          : 0
-      }))
-      // Sort by listen count desc
-      .sort((a, b) => b._listen_count - a._listen_count)
+      // Sort by play count desc
+      .sort((a, b) => b.play_count - a.play_count)
       // Take only the first 5
       .slice(0, 5)
   )

packages/web/src/containers/track-page/utils.ts

@@ -18,7 +18,7 @@ export const getTrackDefaults = (heroTrack: Track | null) => ({
   coverArtSizes: heroTrack?._cover_art_sizes ?? null,
   tags: emptyStringGuard(heroTrack?.tags),
   description: emptyStringGuard(heroTrack?.description),
-  listenCount: heroTrack?._listen_count ?? 0,
+  playCount: heroTrack?.play_count ?? 0,
   duration: heroTrack?.duration ?? 0,
   released: emptyStringGuard(heroTrack?.release_date || heroTrack?.created_at),
   credits: emptyStringGuard(heroTrack?.credits_splits),

packages/web/src/models/Track.ts

@@ -62,14 +62,16 @@ export type TrackMetadata = {
   length: number | null
   license: string
   mood: string
+  play_count: number
   owner_id: ID
   release_date: string
   repost_count: number
   save_count: number
   tags: string
   title: string
   track_segments: TrackSegment[]
-  cover_art: string
+  cover_art: CID | null
+  cover_art_sizes: CID
   is_unlisted: boolean
   field_visibility?: FieldVisibility
   listenCount?: number
@@ -96,7 +98,6 @@ export type Track = {
   track_id: number
   cover_art_url: string
   _cover_art_sizes: CoverArtSizes
-  _listen_count?: number
   _first_segment?: string
   _followees?: Followee[]
   _cover_art_color?: Color

packages/web/src/store/cache/tracks/sagas.js

@@ -40,27 +40,6 @@ import { makeKindId } from 'utils/uid'
 
 const NATIVE_MOBILE = process.env.REACT_APP_NATIVE_MOBILE
 
-function* fetchListenCounts(entries) {
-  try {
-    const needsCount = entries.filter(e => !e.metadata._listen_count)
-    const listenCounts = yield call(
-      AudiusBackend.getTrackListenCounts,
-      needsCount.map(e => e.id)
-    )
-    yield put(
-      cacheActions.update(
-        Kind.TRACKS,
-        listenCounts.map(lc => ({
-          id: lc.trackId,
-          metadata: { _listen_count: lc.listens }
-        }))
-      )
-    )
-  } catch (err) {
-    console.error(err)
-  }
-}
-
 function* fetchRepostInfo(entries) {
   const userIds = []
   entries.forEach(entry => {
@@ -106,7 +85,6 @@ function* fetchFirstSegments(entries) {
 function* watchAdd() {
   yield takeEvery(cacheActions.ADD_SUCCEEDED, function* (action) {
     if (action.kind === Kind.TRACKS) {
-      yield fork(fetchListenCounts, action.entries)
       if (!NATIVE_MOBILE) {
         yield fork(fetchRepostInfo, action.entries)
         yield fork(fetchFirstSegments, action.entries)

packages/web/src/store/queue/mobileSagas.ts

@@ -14,6 +14,8 @@ import {
 } from 'services/native-mobile-interface/queue'
 import { MessageType, Message } from 'services/native-mobile-interface/types'
 import { getUserId } from 'store/account/selectors'
+import Track from 'models/Track'
+import User from 'models/User'
 
 const PUBLIC_IPFS_GATEWAY = 'http://cloudflare-ipfs.com/ipfs/'
 const DEFAULT_IMAGE_URL =
@@ -26,8 +28,8 @@ const getImageUrl = (cid: string, gateway: string | null): string => {
 
 function* getTrackInfo(id: ID, uid: UID) {
   const currentUserId = yield select(getUserId)
-  const track = yield select(getTrack, { id })
-  const owner = yield select(getUser, { id: track.owner_id })
+  const track: Track = yield select(getTrack, { id })
+  const owner: User = yield select(getUser, { id: track.owner_id })
   const gateways = owner
     ? getCreatorNodeIPFSGateways(owner.creator_node_endpoint)
     : []
@@ -44,11 +46,11 @@ function* getTrackInfo(id: ID, uid: UID) {
   return {
     title: track.title,
     artist: owner.name,
-    artwork: getImageUrl(imageHash, gateways[0]),
-    largeArtwork: getImageUrl(largeImageHash, gateways[0]),
+    artwork: getImageUrl(imageHash!, gateways[0]),
+    largeArtwork: getImageUrl(largeImageHash!, gateways[0]),
     uid,
     currentUserId,
-    currentListenCount: track._listen_count,
+    currentListenCount: track.play_count,
     isDelete: track.is_delete,
     ownerId: track.owner_id,
     trackId: id,

packages/web/src/store/social/tracks/sagas.ts

@@ -539,9 +539,9 @@ export function* watchRecordListen() {
     if (NATIVE_MOBILE) return
     console.debug('Listen recorded for track', action.trackId)
     const userId = yield select(getUserId)
-    const track = yield select(getTrack, { id: action.trackId })
+    const track: Track = yield select(getTrack, { id: action.trackId })
 
-    if (userId !== track.owner_id || track._listen_count < 10) {
+    if (userId !== track.owner_id || track.play_count < 10) {
       yield call(AudiusBackend.recordTrackListen, action.trackId)
     }