[QA-1979] Fix now playing UI in collection pages (#11408)

Author: dylanjeffers

packages/web/src/components/collectibles-playlist-table/CollectiblesPlaylistTable.tsx

@@ -38,7 +38,7 @@ type CollectiblesPlaylistTableProps = {
   onClickRow?: (collectible: any, index: number) => void
   onClickTrackName?: (collectible: any) => void
   playing?: boolean
-  playingIndex?: number
+  activeIndex?: number
   tableClassName?: string
   wrapperClassName?: string
 }
@@ -59,15 +59,15 @@ export const CollectiblesPlaylistTable = ({
   onClickRow,
   onClickTrackName: onClickCollectibleName,
   playing = false,
-  playingIndex = -1,
+  activeIndex = -1,
   tableClassName,
   wrapperClassName
 }: CollectiblesPlaylistTableProps) => {
   // Cell Render Functions
   const renderPlayButtonCell = useCallback(
     (cellInfo: CollectibleCell) => {
       const index = cellInfo.row.index
-      const active = index === playingIndex
+      const active = index === activeIndex
       return (
         <TablePlayButton
           className={cn(styles.tablePlayButton, { [styles.active]: active })}
@@ -77,7 +77,7 @@ export const CollectiblesPlaylistTable = ({
         />
       )
     },
-    [playing, playingIndex]
+    [playing, activeIndex]
   )
 
   const renderCollectibleNameCell = useCallback(
@@ -94,15 +94,15 @@ export const CollectiblesPlaylistTable = ({
         >
           <div
             className={cn(styles.textCell, styles.collectibleName, {
-              [styles.isPlaying]: index === playingIndex
+              [styles.isPlaying]: index === activeIndex
             })}
           >
             {collectible.name}
           </div>
         </div>
       )
     },
-    [onClickCollectibleName, playingIndex]
+    [onClickCollectibleName, activeIndex]
   )
 
   const renderLengthCell = useCallback((cellInfo: CollectibleCell) => {
@@ -198,7 +198,7 @@ export const CollectiblesPlaylistTable = ({
       data={data}
       loading={loading}
       onClickRow={handleClickRow}
-      activeIndex={playingIndex}
+      activeIndex={activeIndex}
       isVirtualized={isVirtualized}
     />
   )

packages/web/src/components/tracks-table/TrackTableLineup.tsx

@@ -84,8 +84,8 @@ export const TrackTableLineup = ({
       : (lineup.entries as LineupTrack[])
   }, [lineup.entries, tracks, hasNextPage, pageSize])
 
-  // Get the playing index by finding the current track in the data
-  const playingIndex = useMemo(() => {
+  // Get the active index by finding the current track in the data
+  const activeIndex = useMemo(() => {
     if (!currentQueueItem?.uid) return -1
     return entries.findIndex((track) => track.uid === currentQueueItem.uid)
   }, [currentQueueItem?.uid, entries])
@@ -124,7 +124,7 @@ export const TrackTableLineup = ({
 
   const onClickRow = useCallback(
     (track: TrackWithUID, index: number) => {
-      if (index === playingIndex && isPlaying) {
+      if (index === activeIndex && isPlaying) {
         pause()
         dispatch(
           make(Name.PLAYBACK_PAUSE, {
@@ -142,7 +142,7 @@ export const TrackTableLineup = ({
         )
       }
     },
-    [dispatch, isPlaying, pause, play, playingSource, playingIndex, entries]
+    [dispatch, isPlaying, pause, play, playingSource, activeIndex, entries]
   )
 
   return (
@@ -152,7 +152,7 @@ export const TrackTableLineup = ({
       onClickFavorite={onClickFavorite}
       onClickRepost={onClickRepost}
       playing={isPlaying && !isBuffering}
-      activeIndex={playingIndex}
+      activeIndex={activeIndex}
       onClickRow={onClickRow}
       fetchMore={loadNextPage}
       loading={isInitialLoading}

packages/web/src/pages/collectibles-playlist-page/CollectiblesPlaylistPageProvider.tsx

@@ -360,14 +360,14 @@ export const CollectiblesPlaylistPageProvider = ({
   const getFilteredData = useCallback(
     (trackMetadatas: CollectionTrack[]) => {
       const playingUid = getPlayingUid()
-      const playingIndex = entries.findIndex(({ uid }) => uid === playingUid)
+      const activeIndex = entries.findIndex(({ uid }) => uid === playingUid)
       const formattedMetadata = formatMetadata(trackMetadatas)
       const filteredIndex =
-        playingIndex > -1
+        activeIndex > -1
           ? formattedMetadata.findIndex(
               (metadata) => metadata.uid === playingUid
             )
-          : playingIndex
+          : activeIndex
       return [formattedMetadata, filteredIndex] as [
         typeof formattedMetadata,
         number

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

@@ -444,7 +444,7 @@ class CollectionPage extends Component<
     const filterText = this.state.filterText
     const { tracks } = this.props
     const playingUid = this.getPlayingUid()
-    const playingIndex = tracks.entries.findIndex(
+    const activeIndex = tracks.entries.findIndex(
       ({ uid }) => uid === playingUid
     )
     const filteredMetadata = this.formatMetadata(trackMetadatas).filter(
@@ -453,9 +453,9 @@ class CollectionPage extends Component<
         item.user.name.toLowerCase().indexOf(filterText.toLowerCase()) > -1
     )
     const filteredIndex =
-      playingIndex > -1
+      activeIndex > -1
         ? filteredMetadata.findIndex((metadata) => metadata.uid === playingUid)
-        : playingIndex
+        : activeIndex
     return [filteredMetadata, filteredIndex] as [
       typeof filteredMetadata,
       number

packages/web/src/pages/collection-page/components/desktop/CollectionPage.tsx

@@ -161,7 +161,7 @@ const CollectionPage = ({
   const { status, metadata, user } = collection
 
   // TODO: Consider dynamic lineups, esp. for caching improvement.
-  const [dataSource, playingIndex] =
+  const [dataSource, activeIndex] =
     tracks.status === Status.SUCCESS
       ? getFilteredData(tracks.entries)
       : [[], -1]
@@ -344,7 +344,7 @@ const CollectionPage = ({
               loading={isNftPlaylist ? collectionLoading : tracksLoading}
               userId={userId}
               playing={playing}
-              playingIndex={playingIndex}
+              activeIndex={activeIndex}
               data={dataSource}
               onClickRow={onClickRow}
               onClickFavorite={onClickSave}

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

@@ -225,14 +225,14 @@ class SavedPage extends PureComponent<SavedPageProps, SavedPageState> {
   ): [SavedPageTrack[], number] => {
     const { tracks } = this.props
     const playingUid = this.getPlayingUid()
-    const playingIndex = tracks.entries.findIndex(
+    const activeIndex = tracks.entries.findIndex(
       ({ uid }: any) => uid === playingUid
     )
     const filteredMetadata = this.formatMetadata(trackMetadatas)
     const filteredIndex =
-      playingIndex > -1
+      activeIndex > -1
         ? filteredMetadata.findIndex((metadata) => metadata.uid === playingUid)
-        : playingIndex
+        : activeIndex
     return [filteredMetadata, filteredIndex]
   }
 
@@ -242,7 +242,7 @@ class SavedPage extends PureComponent<SavedPageProps, SavedPageState> {
     const { tracks } = this.props
     const filterText = this.state.filterText ?? ''
     const playingUid = this.getPlayingUid()
-    const playingIndex = tracks.entries.findIndex(
+    const activeIndex = tracks.entries.findIndex(
       ({ uid }: any) => uid === playingUid
     )
     const filteredMetadata = this.formatMetadata(trackMetadatas)
@@ -253,9 +253,9 @@ class SavedPage extends PureComponent<SavedPageProps, SavedPageState> {
           item.user?.name.toLowerCase().indexOf(filterText.toLowerCase()) > -1
       )
     const filteredIndex =
-      playingIndex > -1
+      activeIndex > -1
         ? filteredMetadata.findIndex((metadata) => metadata.uid === playingUid)
-        : playingIndex
+        : activeIndex
     return [filteredMetadata, filteredIndex]
   }
 

packages/web/src/pages/saved-page/components/desktop/SavedPage.tsx

@@ -138,15 +138,15 @@ const SavedPage = ({
   })
 
   const getTracksTableData = (): [SavedPageTrack[], number] => {
-    let [data, playingIndex] = getFilteredData(entries)
+    let [data, activeIndex] = getFilteredData(entries)
     if (!hasReachedEnd) {
       // Add in some empty rows to show user that more are loading in
       data = data.concat(new Array(5).fill({ kind: Kind.EMPTY }))
     }
-    return [data, playingIndex]
+    return [data, activeIndex]
   }
 
-  const [dataSource, playingIndex] =
+  const [dataSource, activeIndex] =
     status === Status.SUCCESS || entries.length
       ? getTracksTableData()
       : [[], -1]
@@ -244,7 +244,7 @@ const SavedPage = ({
           onClickRow={onClickRow}
           onSort={allTracksFetched ? onSortTracks : onSortChange}
           playing={queuedAndPlaying}
-          activeIndex={playingIndex}
+          activeIndex={activeIndex}
           scrollRef={mainContentRef}
           useLocalSort={allTracksFetched}
           fetchBatchSize={50}