From aa8899f157a123de8e9a7c52335113b39a925bf9 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 7 Apr 2026 22:38:40 +0000 Subject: [PATCH 1/2] Remove download button from giant track tile, keep in metadata section Remove the DownloadSection and download count stat from the giant track tile header. Downloads are now only shown in the metadata section (genre, mood, key, BPM, etc.) and only when the count is greater than zero. https://claude.ai/code/session_01TFkhjQRGjeoZrtiaXsqC5j --- packages/common/src/hooks/useTrackMetadata.ts | 5 +++- .../src/components/track/GiantTrackTile.tsx | 18 +------------ .../web/src/components/track/TrackStats.tsx | 26 +++---------------- 3 files changed, 9 insertions(+), 40 deletions(-) diff --git a/packages/common/src/hooks/useTrackMetadata.ts b/packages/common/src/hooks/useTrackMetadata.ts index c5ff523b73f..e5a378950ce 100644 --- a/packages/common/src/hooks/useTrackMetadata.ts +++ b/packages/common/src/hooks/useTrackMetadata.ts @@ -123,7 +123,10 @@ export const useTrackMetadata = ({ { id: TrackMetadataType.DOWNLOADS, label: 'Downloads', - value: isDownloadable ? formatCount(downloadCount) : '', + value: + isDownloadable && downloadCount > 0 + ? formatCount(downloadCount) + : '', isHidden: !isDownloadable } ].filter(({ isHidden, value }) => !isHidden && !!value) diff --git a/packages/web/src/components/track/GiantTrackTile.tsx b/packages/web/src/components/track/GiantTrackTile.tsx index abcc9c8bd1c..31fb6095d5a 100644 --- a/packages/web/src/components/track/GiantTrackTile.tsx +++ b/packages/web/src/components/track/GiantTrackTile.tsx @@ -1,10 +1,9 @@ -import { Suspense, lazy, useCallback, useState, useEffect, useRef } from 'react' +import { useCallback, useState, useEffect, useRef } from 'react' import { useTrackRank, useRemixContest, useToggleFavoriteTrack, - useStems, useTrack } from '@audius/common/api' import { @@ -72,12 +71,6 @@ import { TrackDogEar } from './TrackDogEar' import { TrackMetadataList } from './TrackMetadataList' import { TrackStats } from './TrackStats' -const DownloadSection = lazy(() => - import('./DownloadSection').then((module) => ({ - default: module.DownloadSection - })) -) - const BUTTON_COLLAPSE_WIDTHS = { first: 1095, second: 1190, @@ -219,8 +212,6 @@ export const GiantTrackTile = ({ const { data: track } = useTrack(trackId, { select: (track) => pick(track, ['is_downloadable', 'preview_cid']) }) - const { data: stems = [] } = useStems(trackId) - const hasDownloadableAssets = track?.is_downloadable || stems.length > 0 // Preview button is shown for USDC-gated tracks if user does not have access // or is the owner const showPreview = @@ -692,13 +683,6 @@ export const GiantTrackTile = ({ ) : null} {renderTags()} - {hasDownloadableAssets ? ( - - - - - - ) : null} ) diff --git a/packages/web/src/components/track/TrackStats.tsx b/packages/web/src/components/track/TrackStats.tsx index 95bd1ac57b7..bca4ecbebe7 100644 --- a/packages/web/src/components/track/TrackStats.tsx +++ b/packages/web/src/components/track/TrackStats.tsx @@ -1,20 +1,17 @@ import { useCurrentUserId, - useTrack, - useTrackDownloadCount + useTrack } from '@audius/common/api' import { ID, Name } from '@audius/common/models' import { formatCount, isLongFormContent, pluralize } from '@audius/common/utils' import { Flex, - IconCloudDownload, IconHeart, IconMessage, IconPlay, IconRepost, PlainButton } from '@audius/harmony' -import { encodeHashId } from '@audius/sdk' import { pick } from 'lodash' import { useDispatch } from 'react-redux' @@ -29,8 +26,7 @@ const messages = { repost: 'Repost', favorite: 'Favorite', comment: 'Comment', - play: 'Play', - download: 'Download' + play: 'Play' } type TrackStatsProps = { @@ -51,13 +47,10 @@ export const TrackStats = (props: TrackStatsProps) => { 'is_unlisted', 'play_count', 'comments_disabled', - 'genre', - 'is_downloadable' + 'genre' ]) }) const { data: currentUserId } = useCurrentUserId() - const trackIdHash = partialTrack ? encodeHashId(trackId as number) : null - const { data: downloadCount = 0 } = useTrackDownloadCount(trackIdHash) const dispatch = useDispatch() const comment_count = partialTrack?.comment_count ?? 0 @@ -70,8 +63,7 @@ export const TrackStats = (props: TrackStatsProps) => { play_count, is_stream_gated, owner_id, - is_unlisted, - is_downloadable + is_unlisted } = partialTrack const isOwner = currentUserId === owner_id @@ -151,16 +143,6 @@ export const TrackStats = (props: TrackStatsProps) => { {formatCount(play_count)} {pluralize(messages.play, play_count)} ) : null} - {is_downloadable ? ( - - {formatCount(downloadCount)}{' '} - {pluralize(messages.download, downloadCount)} - - ) : null} ) } From 40f6e0a7e1ff2a81dad0a4d46af1ac383e34d1d1 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Wed, 8 Apr 2026 01:04:20 +0000 Subject: [PATCH 2/2] Fix prettier lint in track metadata and stats Co-authored-by: Dylan Jeffers --- packages/common/src/hooks/useTrackMetadata.ts | 4 +--- packages/web/src/components/track/TrackStats.tsx | 5 +---- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/common/src/hooks/useTrackMetadata.ts b/packages/common/src/hooks/useTrackMetadata.ts index e5a378950ce..d020a78a467 100644 --- a/packages/common/src/hooks/useTrackMetadata.ts +++ b/packages/common/src/hooks/useTrackMetadata.ts @@ -124,9 +124,7 @@ export const useTrackMetadata = ({ id: TrackMetadataType.DOWNLOADS, label: 'Downloads', value: - isDownloadable && downloadCount > 0 - ? formatCount(downloadCount) - : '', + isDownloadable && downloadCount > 0 ? formatCount(downloadCount) : '', isHidden: !isDownloadable } ].filter(({ isHidden, value }) => !isHidden && !!value) diff --git a/packages/web/src/components/track/TrackStats.tsx b/packages/web/src/components/track/TrackStats.tsx index bca4ecbebe7..b901b4c9341 100644 --- a/packages/web/src/components/track/TrackStats.tsx +++ b/packages/web/src/components/track/TrackStats.tsx @@ -1,7 +1,4 @@ -import { - useCurrentUserId, - useTrack -} from '@audius/common/api' +import { useCurrentUserId, useTrack } from '@audius/common/api' import { ID, Name } from '@audius/common/models' import { formatCount, isLongFormContent, pluralize } from '@audius/common/utils' import {