album link on track

AudiusProject · Jan 4, 2024 · 1f2cca8 · 1f2cca8
1 parent edf24bc
commit 1f2cca8
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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 (
+      <InfoLabel
+        className={styles.infoLabelPlacement}
+        labelName='album'
+        labelValue={
+          <Link
+            to={albumInfo.permalink}
+            color='accentPurple'
+            size='small'
+            css={({ spacing }) => ({
+              // the link is too tall
+              marginTop: spacing.negativeUnit
+            })}
+          >
+            {albumInfo.playlist_name}
+          </Link>
+        }
+      />
+    )
+  }
+
   const renderReleased = () => {
     return (
       !isUnlisted &&
@@ -547,16 +567,6 @@ export const GiantTrackTile = ({
                   badgeSize={18}
                   popover
                 />
-                {isEditAlbumsEnabled && album ? (
-                  <>
-                    <span>from</span>
-                    <TextLink variant='visible' textVariant='display' asChild>
-                      <Link to={album?.permalink ?? NOT_FOUND_PAGE}>
-                        {album.playlistName}
-                      </Link>
-                    </TextLink>
-                  </>
-                ) : null}
               </Flex>
               {isLoading && (
                 <Skeleton className={styles.skeleton} width='60%' />
@@ -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
@@ -22,6 +22,10 @@
   text-transform: capitalize;
   word-break: keep-all;
   text-decoration: none;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .labelValue > * {