diff --git a/package.json b/package.json index cfff3fc5741..6b0bf10ba66 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "web:dev": "npm run start:dev -w audius-client", "web:prod": "npm run start:prod -w audius-client", "web:stage": "npm run start:stage -w audius-client", + "web:prod-local-trpc": "npm run start:prod-local-trpc -w audius-client", "web:stage-local-trpc": "npm run start:stage-local-trpc -w audius-client", "DESKTOP====================================": "", "desktop:dev": "concurrently -k 'BROWSER=none npm run start:dev -w audius-client' 'wait-on http://0.0.0.0:3000 && npm run electron:localhost -w audius-client -- 3000'", diff --git a/packages/web/package.json b/packages/web/package.json index e63904f25a9..b832e69ff3d 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -10,8 +10,9 @@ "start": "vite", "start:dev": "npm run write-sha && npm run publish-scripts && env-cmd ./.env/.env.git env-cmd --no-override ./.env/.env.dev turbo run start", "start:stage": "npm run write-sha && npm run publish-scripts && env-cmd ./.env/.env.git env-cmd --no-override ./.env/.env.stage turbo run start", - "start:stage-local-trpc": "npm run write-sha && npm run publish-scripts && env-cmd ./.env/.env.git env-cmd --no-override ./.env/.env.stage-local-trpc turbo run start", "start:prod": "npm run write-sha && npm run publish-scripts && env-cmd ./.env/.env.git env-cmd --no-override ./.env/.env.prod env-cmd ./.env/.env.source-maps turbo run start", + "start:stage-local-trpc": "npm run write-sha && npm run publish-scripts && env-cmd ./.env/.env.git env-cmd --no-override ./.env/.env.stage-local-trpc turbo run start", + "start:prod-local-trpc": "npm run write-sha && npm run publish-scripts && env-cmd ./.env/.env.git env-cmd --no-override ./.env/.env.prod-local-trpc turbo run start", "preview:prod": "npm run build:prod && vite preview --outDir build-production", "prebuild": "npm run publish-scripts", "build": "vite build && cp package.json build/package.json", diff --git a/packages/web/src/components/track/GiantTrackTile.tsx b/packages/web/src/components/track/GiantTrackTile.tsx index ad2392c7498..bf007a18f92 100644 --- a/packages/web/src/components/track/GiantTrackTile.tsx +++ b/packages/web/src/components/track/GiantTrackTile.tsx @@ -15,7 +15,7 @@ import { getDogEarType, isPremiumContentUSDCPurchaseGated } from '@audius/common' -import { Flex, TextLink } from '@audius/harmony' +import { Flex } from '@audius/harmony' import { Mood } from '@audius/sdk' import { Button, @@ -26,7 +26,6 @@ import { IconHeart, IconKebabHorizontal } from '@audius/stems' -import type { APlaylist } from '@audius/trpc-server' import cn from 'classnames' import moment from 'moment' @@ -47,7 +46,6 @@ import { ComponentPlacement } from 'components/types' import { UserGeneratedText } from 'components/user-generated-text' import { getFeatureEnabled } from 'services/remote-config/featureFlagHelpers' import { moodMap } from 'utils/Moods' -import { NOT_FOUND_PAGE } from 'utils/route' import { trpc } from 'utils/trpcClientWeb' import { AiTrackSection } from './AiTrackSection' @@ -195,11 +193,10 @@ export const GiantTrackTile = ({ const showPreview = isUSDCPurchaseGated && (isOwner || !doesUserHaveAccess) // Play button is conditionally hidden for USDC-gated tracks when the user does not have access const showPlay = isUSDCPurchaseGated ? doesUserHaveAccess : true - const { data: playlists } = trpc.playlists.containTrackId.useQuery( - { trackId, collectionType: 'album' }, + const { data: albumInfo } = trpc.tracks.getAlbumBacklink.useQuery( + { trackId }, { enabled: !!trackId } ) - const album = playlists?.[0] as unknown as APlaylist | undefined let isScheduledRelease = false if (!isPublishing && moment.utc(released).isAfter(moment())) { isScheduledRelease = true @@ -415,6 +412,29 @@ export const GiantTrackTile = ({ ) } + const renderAlbum = () => { + if (!isEditAlbumsEnabled || !albumInfo) return null + return ( + ({ + // the link is too tall + marginTop: spacing.negativeUnit + })} + > + {albumInfo.playlist_name} + + } + /> + ) + } + const renderReleased = () => { return ( !isUnlisted && @@ -547,16 +567,6 @@ export const GiantTrackTile = ({ badgeSize={18} popover /> - {isEditAlbumsEnabled && album ? ( - <> - from - - - {album.playlistName} - - - - ) : null} {isLoading && ( @@ -662,6 +672,7 @@ export const GiantTrackTile = ({ labelValue={`${formatSeconds(duration)}`} /> {renderReleased()} + {renderAlbum()} {renderGenre()} {renderMood()} {credits ? ( diff --git a/packages/web/src/components/track/InfoLabel.module.css b/packages/web/src/components/track/InfoLabel.module.css index 18cbb5506f7..480912e4971 100644 --- a/packages/web/src/components/track/InfoLabel.module.css +++ b/packages/web/src/components/track/InfoLabel.module.css @@ -22,6 +22,10 @@ text-transform: capitalize; word-break: keep-all; text-decoration: none; + + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .labelValue > * {