From aa39e55e69f72c3cb632a773b2d1328b020b4b79 Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Wed, 1 Nov 2023 13:48:04 -0400
Subject: [PATCH 1/4] Disable pay extra input when purchase in progress

---
 .../premium-track-purchase-drawer/PayExtraFormSection.tsx        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mobile/src/components/premium-track-purchase-drawer/PayExtraFormSection.tsx b/packages/mobile/src/components/premium-track-purchase-drawer/PayExtraFormSection.tsx
index 8493091e5ae..d42bd0eea4d 100644
--- a/packages/mobile/src/components/premium-track-purchase-drawer/PayExtraFormSection.tsx
+++ b/packages/mobile/src/components/premium-track-purchase-drawer/PayExtraFormSection.tsx
@@ -107,6 +107,7 @@ export const PayExtraFormSection = ({
           value={String(customAmount)}
           placeholder={messages.placeholder}
           errorMessage={customAmountError}
+          editable={!disabled}
           noGutter
         />
       ) : null}

From c4c2c3301cc8132d138a6fc0d7fa0795a1869fb1 Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Wed, 1 Nov 2023 14:21:07 -0400
Subject: [PATCH 2/4] Remove draggability of premium tracks from library

---
 packages/web/src/components/table/Table.tsx | 41 +++++++++++++--------
 1 file changed, 26 insertions(+), 15 deletions(-)

diff --git a/packages/web/src/components/table/Table.tsx b/packages/web/src/components/table/Table.tsx
index 7e1305507e5..ce63e1e1941 100644
--- a/packages/web/src/components/table/Table.tsx
+++ b/packages/web/src/components/table/Table.tsx
@@ -7,7 +7,7 @@ import {
   useState
 } from 'react'
 
-import { ID, Kind } from '@audius/common'
+import { ID, Kind, TrackMetadata } from '@audius/common'
 import cn from 'classnames'
 import { debounce, range } from 'lodash'
 import moment from 'moment'
@@ -476,15 +476,20 @@ export const Table = ({
       if (!row) return
 
       prepareRow(row)
+      const rowProps = { ...row.getRowProps({ style }) }
+      const isPremium = (row.original as TrackMetadata).is_premium
 
-      const render = isEmptyRow(row)
-        ? renderSkeletonRow
-        : isReorderable
-        ? renderReorderableRow
-        : isTracksTable
-        ? renderDraggableRow
-        : renderTableRow
-      return render(row, key, { ...row.getRowProps({ style }) })
+      if (isEmptyRow(row)) {
+        return renderSkeletonRow(row, key, rowProps)
+      }
+      if (isReorderable) {
+        return renderReorderableRow(row, key, rowProps)
+      }
+      // Cannot drag premium tracks
+      if (isTracksTable && !isPremium) {
+        return renderDraggableRow(row, key, rowProps)
+      }
+      return renderTableRow(row, key, rowProps)
     },
     [
       rows,
@@ -503,12 +508,18 @@ export const Table = ({
     const displayRows = !showMore ? rows.slice(0, showMoreLimit) : rows
     return displayRows.map((row) => {
       prepareRow(row)
-      const render = isReorderable
-        ? renderReorderableRow
-        : isTracksTable
-        ? renderDraggableRow
-        : renderTableRow
-      return render(row, row.id, { ...row.getRowProps() })
+
+      const rowProps = { ...row.getRowProps() }
+      const isPremium = (row.original as TrackMetadata).is_premium
+
+      if (isReorderable) {
+        return renderReorderableRow(row, row.id, rowProps)
+      }
+      // Cannot drag premium tracks
+      if (isTracksTable && !isPremium) {
+        return renderDraggableRow(row, row.id, rowProps)
+      }
+      return renderTableRow(row, row.id, rowProps)
     })
   }, [
     showMore,

From b0985b43251e5c051cd3f9762d69d6d66a4143e4 Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Wed, 1 Nov 2023 14:47:56 -0400
Subject: [PATCH 3/4] Remove draggability of premium tracks from now playing
 title

---
 .../components/play-bar/desktop/PlayBar.js    |  3 +
 .../desktop/components/PlayingTrackInfo.tsx   | 72 +++++++++++--------
 .../pages/visualizer/VisualizerProvider.tsx   |  1 +
 3 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/packages/web/src/components/play-bar/desktop/PlayBar.js b/packages/web/src/components/play-bar/desktop/PlayBar.js
index c2a4e7d2de1..7278639f2e5 100644
--- a/packages/web/src/components/play-bar/desktop/PlayBar.js
+++ b/packages/web/src/components/play-bar/desktop/PlayBar.js
@@ -310,6 +310,7 @@ class PlayBar extends Component {
     let duration = null
     let isOwner = false
     let isTrackUnlisted = false
+    let isPremium = false
     let trackPermalink = ''
 
     if (uid && track && user) {
@@ -325,6 +326,7 @@ class PlayBar extends Component {
       duration = audioPlayer.getDuration()
       trackId = track.track_id
       isTrackUnlisted = track.is_unlisted
+      isPremium = track.is_premium
     } else if (collectible && user) {
       // Special case for audio nft playlist
       trackTitle = collectible.name
@@ -369,6 +371,7 @@ class PlayBar extends Component {
               artistUserId={artistUserId}
               isVerified={isVerified}
               isTrackUnlisted={isTrackUnlisted}
+              isPremium={isPremium}
               onClickTrackTitle={this.goToTrackPage}
               onClickArtistName={this.goToArtistPage}
               hasShadow={false}
diff --git a/packages/web/src/components/play-bar/desktop/components/PlayingTrackInfo.tsx b/packages/web/src/components/play-bar/desktop/components/PlayingTrackInfo.tsx
index 118db590f86..d5c179acc55 100644
--- a/packages/web/src/components/play-bar/desktop/components/PlayingTrackInfo.tsx
+++ b/packages/web/src/components/play-bar/desktop/components/PlayingTrackInfo.tsx
@@ -38,6 +38,7 @@ interface PlayingTrackInfoProps {
   profilePictureSizes: ProfilePictureSizes
   isVerified: boolean
   isTrackUnlisted: boolean
+  isPremium: boolean
   artistUserId: ID
   artistName: string
   artistHandle: string
@@ -64,6 +65,7 @@ const PlayingTrackInfo = ({
   onClickTrackTitle,
   onClickArtistName,
   isTrackUnlisted,
+  isPremium,
   hasShadow,
   dominantColor
 }: PlayingTrackInfoProps) => {
@@ -99,6 +101,33 @@ const PlayingTrackInfo = ({
         }
       : {}
 
+  const renderTrackTitle = () => {
+    return (
+      <animated.div
+        style={trackSpringProps}
+        className={styles.trackTitleContainer}
+      >
+        <div
+          className={cn(styles.trackTitle, {
+            [styles.textShadow]: hasShadow
+          })}
+          onClick={onClickTrackTitle}
+        >
+          {trackTitle}
+        </div>
+        {shouldShowPreviewLock ? (
+          <LockedStatusBadge
+            locked
+            iconSize='small'
+            coloredWhenLocked
+            variant='premium'
+            text={messages.preview}
+          />
+        ) : null}
+      </animated.div>
+    )
+  }
+
   return (
     <div className={styles.info}>
       <div className={styles.profilePictureWrapper}>
@@ -113,37 +142,20 @@ const PlayingTrackInfo = ({
         />
       </div>
       <div className={styles.text}>
-        <Draggable
-          isDisabled={!trackTitle || isTrackUnlisted}
-          text={trackTitle}
-          isOwner={isOwner}
-          kind='track'
-          id={trackId}
-          link={fullTrackPage(trackPermalink)}
-        >
-          <animated.div
-            style={trackSpringProps}
-            className={styles.trackTitleContainer}
+        {isPremium ? (
+          renderTrackTitle()
+        ) : (
+          <Draggable
+            isDisabled={!trackTitle || isTrackUnlisted}
+            text={trackTitle}
+            isOwner={isOwner}
+            kind='track'
+            id={trackId}
+            link={fullTrackPage(trackPermalink)}
           >
-            <div
-              className={cn(styles.trackTitle, {
-                [styles.textShadow]: hasShadow
-              })}
-              onClick={onClickTrackTitle}
-            >
-              {trackTitle}
-            </div>
-            {shouldShowPreviewLock ? (
-              <LockedStatusBadge
-                locked
-                iconSize='small'
-                coloredWhenLocked
-                variant='premium'
-                text={messages.preview}
-              />
-            ) : null}
-          </animated.div>
-        </Draggable>
+            {renderTrackTitle()}
+          </Draggable>
+        )}
         <animated.div
           className={styles.artistNameWrapper}
           style={artistSpringProps}
diff --git a/packages/web/src/pages/visualizer/VisualizerProvider.tsx b/packages/web/src/pages/visualizer/VisualizerProvider.tsx
index f00f38b426a..02b4e2c8f9f 100644
--- a/packages/web/src/pages/visualizer/VisualizerProvider.tsx
+++ b/packages/web/src/pages/visualizer/VisualizerProvider.tsx
@@ -176,6 +176,7 @@ const Visualizer = ({
           artistUserId={user.user_id}
           isVerified={user.is_verified}
           isTrackUnlisted={track.is_unlisted}
+          isPremium={track.is_premium}
           onClickTrackTitle={() => {
             goToTrackPage()
             onClose()

From 9b571fd5606bd930bdefc02b275ba7865fedb891 Mon Sep 17 00:00:00 2001
From: Saliou Diallo <saliou@audius.co>
Date: Wed, 1 Nov 2023 14:54:35 -0400
Subject: [PATCH 4/4] Remove draggability of premium tracks from now playing
 artwork

---
 .../nav/desktop/NowPlayingArtworkTile.tsx     | 48 +++++++++++++------
 1 file changed, 34 insertions(+), 14 deletions(-)

diff --git a/packages/web/src/components/nav/desktop/NowPlayingArtworkTile.tsx b/packages/web/src/components/nav/desktop/NowPlayingArtworkTile.tsx
index b3a6952ece4..92b38a154aa 100644
--- a/packages/web/src/components/nav/desktop/NowPlayingArtworkTile.tsx
+++ b/packages/web/src/components/nav/desktop/NowPlayingArtworkTile.tsx
@@ -68,6 +68,7 @@ export const NowPlayingArtworkTile = () => {
   const track = useSelector((state: CommonState) =>
     getTrack(state, { id: trackId })
   )
+  const isPremium = !!track?.is_premium
   const { doesUserHaveAccess } = usePremiumContentAccess(track)
   const isPreviewing = useSelector(getPreviewing)
   const shouldShowPurchaseDogEar =
@@ -128,20 +129,16 @@ export const NowPlayingArtworkTile = () => {
 
   if (!permalink || !trackId) return null
 
-  return (
-    <Draggable
-      text={track?.title}
-      kind='track'
-      id={trackId}
-      isOwner={isOwner}
-      link={fullTrackPage(permalink)}
-      className={styles.root}
-    >
-      {shouldShowPurchaseDogEar ? (
-        <div className={styles.borderOffset}>
-          <DogEar type={DogEarType.USDC_PURCHASE} className={styles.dogEar} />
-        </div>
-      ) : null}
+  const renderDogEar = () => {
+    return shouldShowPurchaseDogEar ? (
+      <div className={styles.borderOffset}>
+        <DogEar type={DogEarType.USDC_PURCHASE} className={styles.dogEar} />
+      </div>
+    ) : null
+  }
+
+  const renderCoverArt = () => {
+    return (
       <FadeInUp style={{ boxShadow: coverArtColor }}>
         <Link to={permalink} aria-label={messages.viewTrack}>
           <DynamicImage
@@ -157,6 +154,29 @@ export const NowPlayingArtworkTile = () => {
           </DynamicImage>
         </Link>
       </FadeInUp>
+    )
+  }
+
+  if (isPremium) {
+    return (
+      <div className={styles.root}>
+        {renderDogEar()}
+        {renderCoverArt()}
+      </div>
+    )
+  }
+
+  return (
+    <Draggable
+      text={track?.title}
+      kind='track'
+      id={trackId}
+      isOwner={isOwner}
+      link={fullTrackPage(permalink)}
+      className={styles.root}
+    >
+      {renderDogEar()}
+      {renderCoverArt()}
     </Draggable>
   )
 }