feat(web): waveform with comment avatars on desktop track tiles

packages/common/src/api/tan-query/comments/index.ts

@@ -2,6 +2,7 @@ export * from './types'
 export * from './utils'
 export * from './useUserComments'
 export * from './useTrackComments'
+export * from './useTimestampedComments'
 export * from './useComment'
 export * from './useComments'
 export * from './useTrackCommentCount'

packages/mobile/src/components/now-playing-drawer/useTimestampedComments.ts → packages/common/src/api/tan-query/comments/useTimestampedComments.ts

@@ -1,7 +1,8 @@
 import { useMemo } from 'react'
 
-import { useTrackComments } from '@audius/common/api'
-import type { Comment, ID } from '@audius/common/models'
+import type { Comment, ID } from '~/models'
+
+import { useTrackComments } from './useTrackComments'
 
 const PAGE_SIZE = 50
 // GetTrackCommentsSortMethodEnum.Timestamp

packages/common/src/services/remote-config/feature-flags.ts

@@ -18,7 +18,8 @@ export enum FeatureFlags {
   QUEUE_NEW_FEATURE_BADGE = 'queue_new_feature_badge',
   WEEKLY_ROTATION = 'weekly_rotation',
   TRACK_ROWS = 'track_rows',
-  NOW_PLAYING_COMMENTS = 'now_playing_comments'
+  NOW_PLAYING_COMMENTS = 'now_playing_comments',
+  TRACK_TILE_WAVEFORM = 'track_tile_waveform'
 }
 
 type FlagDefaults = Record<FeatureFlags, boolean>
@@ -28,7 +29,8 @@ export const environmentFlagDefaults: Record<
   Partial<FlagDefaults>
 > = {
   development: {
-    [FeatureFlags.FAN_CLUB_TEXT_POST_POSTING]: true
+    [FeatureFlags.FAN_CLUB_TEXT_POST_POSTING]: true,
+    [FeatureFlags.TRACK_TILE_WAVEFORM]: true
   },
   production: {}
 }
@@ -59,5 +61,7 @@ export const flagDefaults: FlagDefaults = {
   [FeatureFlags.TRACK_ROWS]: false,
   // Timestamped comments as markers and bubbles on the Now Playing scrubber.
   // Default on; the remote flag is the kill switch.
-  [FeatureFlags.NOW_PLAYING_COMMENTS]: true
+  [FeatureFlags.NOW_PLAYING_COMMENTS]: true,
+  // Waveform with timestamped comment avatars on desktop web track tiles.
+  [FeatureFlags.TRACK_TILE_WAVEFORM]: false
 }

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

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { useUser } from '@audius/common/api'
+import type { TimestampedComment } from '@audius/common/api'
 import type { ID } from '@audius/common/models'
 import { playbackSelectors } from '@audius/common/store'
 import { Dimensions, Pressable, View } from 'react-native'
@@ -13,8 +14,6 @@ import { useCommentDrawer } from 'app/components/comments/CommentDrawerContext'
 import { ProfilePicture } from 'app/components/core'
 import { useNavigation } from 'app/hooks/useNavigation'
 
-import type { TimestampedComment } from './useTimestampedComments'
-
 const { getSeek, getSeekCounter } = playbackSelectors
 
 const messages = {

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

@@ -8,7 +8,7 @@ import {
   useState
 } from 'react'
 
-import { useUser } from '@audius/common/api'
+import { useUser, useTimestampedComments } from '@audius/common/api'
 import { useCurrentTrack, useFeatureFlag } from '@audius/common/hooks'
 import { FeatureFlags } from '@audius/common/services'
 import { playbackActions, playbackSelectors } from '@audius/common/store'
@@ -60,7 +60,6 @@ import { TitleBar } from './TitleBar'
 import { TrackInfo } from './TrackInfo'
 import { PLAY_BAR_HEIGHT } from './constants'
 import { useCurrentTrackDuration } from './useCurrentTrackDuration'
-import { useTimestampedComments } from './useTimestampedComments'
 const { seekTo: seek, reset, next, previous } = playbackActions
 
 const { getPlaying, getTrackId, getCounter, getBuffering } = playbackSelectors

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

@@ -1,13 +1,14 @@
 import { useCallback, useEffect, MouseEvent } from 'react'
 
 import { useCurrentUserId, useTrack, useUser } from '@audius/common/api'
-import { useGatedContentAccess } from '@audius/common/hooks'
+import { useFeatureFlag, useGatedContentAccess } from '@audius/common/hooks'
 import {
   ShareSource,
   RepostSource,
   FavoriteSource,
   ID
 } from '@audius/common/models'
+import { FeatureFlags } from '@audius/common/services'
 import {
   tracksSocialActions,
   shareModalUIActions,
@@ -51,6 +52,7 @@ import { TrackTileSize } from '../types'
 
 import styles from './TrackTile.module.css'
 import { TrackTileDuration } from './TrackTileDuration'
+import { TrackTileWaveform } from './TrackTileWaveform'
 
 const { requestOpen: requestOpenShareModal } = shareModalUIActions
 const { repostTrack, undoRepostTrack, saveTrack, unsaveTrack } =
@@ -62,6 +64,8 @@ const {
   getPlaying
 } = playbackSelectors
 
+const WAVEFORM_ARTWORK_SIZE = 176
+
 // Props from ConnectedTrackTile
 export type TrackTileProps = {
   id: ID
@@ -139,7 +143,9 @@ export const TrackTile = ({
     permalink,
     _co_sign: coSign,
     has_current_user_reposted: isReposted,
-    has_current_user_saved: isFavorited
+    has_current_user_saved: isFavorited,
+    duration,
+    comment_count: commentCount
   } = trackWithFallback
 
   const isArtistPick = partialUser?.artist_pick_track_id === trackId
@@ -148,6 +154,21 @@ export const TrackTile = ({
     useGatedContentAccess(trackWithFallback)
   const loading = isLoading || isFetchingNFTAccess || isPending
 
+  const { isEnabled: isWaveformEnabled } = useFeatureFlag(
+    FeatureFlags.TRACK_TILE_WAVEFORM
+  )
+  const showWaveform =
+    isWaveformEnabled &&
+    size === TrackTileSize.LARGE &&
+    !loading &&
+    duration > 0
+  // With the waveform the right column is ~176px tall; the artwork matches it.
+  const artworkSize = showWaveform
+    ? WAVEFORM_ARTWORK_SIZE
+    : size === TrackTileSize.LARGE
+      ? 128
+      : 108
+
   const [, setLockedContentVisibility] = useModalState('LockedContent')
 
   useEffect(() => {
@@ -319,7 +340,12 @@ export const TrackTile = ({
         disableActions && { opacity: 0.5, pointerEvents: 'none' },
         {
           cursor: canClickTile ? 'pointer' : 'default',
-          height: size === TrackTileSize.LARGE ? 144 : 128,
+          // The waveform tile is taller; its height comes from the content.
+          height: showWaveform
+            ? undefined
+            : size === TrackTileSize.LARGE
+              ? 144
+              : 128,
           containerType: 'inline-size',
           '&:hover .artworkIcon': { opacity: 0.75 },
           '&:hover': { transform: 'scale(1.004)' },
@@ -343,10 +369,7 @@ export const TrackTile = ({
           </Flex>
         )}
         {/* Track tile image */}
-        <Box
-          h={size === TrackTileSize.LARGE ? 128 : 108}
-          w={size === TrackTileSize.LARGE ? 128 : 108}
-        >
+        <Box h={artworkSize} w={artworkSize}>
           <button
             type='button'
             aria-label={artworkActionLabel}
@@ -440,6 +463,19 @@ export const TrackTile = ({
               </Flex>
             </Flex>
           </Flex>
+          {showWaveform ? (
+            <TrackTileWaveform
+              trackId={trackId}
+              title={title}
+              permalink={permalink}
+              duration={duration}
+              commentCount={commentCount}
+              isActive={isActive}
+              isPlaying={isTrackPlaying}
+              canSeek={hasStreamAccess}
+              onPlay={onTogglePlay}
+            />
+          ) : null}
           <TrackTileStats
             trackId={trackId}
             size={size}