From c79a1f1a9c53ce215f1e9c088d537afa1af0df48 Mon Sep 17 00:00:00 2001
From: Dharit Tantiviramanond <dharit.tan@gmail.com>
Date: Thu, 16 May 2024 19:24:42 -0400
Subject: [PATCH 1/3] [PAY-3041] Fix green play button in TracksTable

---
 .../components/table/components/TablePlayButton.tsx  | 12 +++++-------
 .../web/src/components/tracks-table/TracksTable.tsx  |  2 +-
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/components/table/components/TablePlayButton.tsx b/packages/web/src/components/table/components/TablePlayButton.tsx
index 5a942e1f44f..82b23a74978 100644
--- a/packages/web/src/components/table/components/TablePlayButton.tsx
+++ b/packages/web/src/components/table/components/TablePlayButton.tsx
@@ -14,7 +14,7 @@ type TablePlayButtonProps = {
   paused?: boolean
   playing?: boolean
   isTrackPremium?: boolean
-  isOwned?: boolean
+  isLocked?: boolean
 }
 
 export const TablePlayButton = ({
@@ -23,29 +23,27 @@ export const TablePlayButton = ({
   onClick,
   paused,
   playing = false,
-  isTrackPremium = false,
-  isOwned = false
+  isLocked = false
 }: TablePlayButtonProps) => {
   const {
     color: {
-      special,
+      special: { lightGreen },
       primary: { p300 }
     }
   } = useTheme()
-  const showPremiumColor = isOwned && isTrackPremium
   return (
     <div onClick={onClick} className={cn(styles.tablePlayButton, className)}>
       {playing && !paused ? (
         <IconPause
           className={styles.icon}
-          fill={showPremiumColor ? special.lightGreen : p300}
+          fill={isLocked ? lightGreen : p300}
         />
       ) : (
         <IconPlay
           className={cn(styles.icon, {
             [styles.hideDefault]: hideDefault && !playing
           })}
-          fill={showPremiumColor ? special.lightGreen : p300}
+          fill={isLocked ? lightGreen : p300}
         />
       )}
     </div>
diff --git a/packages/web/src/components/tracks-table/TracksTable.tsx b/packages/web/src/components/tracks-table/TracksTable.tsx
index 5110bb72147..7b290cbaaa6 100644
--- a/packages/web/src/components/tracks-table/TracksTable.tsx
+++ b/packages/web/src/components/tracks-table/TracksTable.tsx
@@ -188,7 +188,7 @@ export const TracksTable = ({
             playing={active}
             hideDefault={false}
             isTrackPremium={isTrackPremium && isPremiumEnabled}
-            isOwned={!isLocked}
+            isLocked={isLocked}
           />
           {isTrackUnlisted ? (
             <IconVisibilityHidden

From 08c067037cc68e6fb448c805beff6e0b17c0b6ea Mon Sep 17 00:00:00 2001
From: Dharit Tantiviramanond <dharit.tan@gmail.com>
Date: Thu, 16 May 2024 20:55:58 -0400
Subject: [PATCH 2/3] fix

---
 .../web/src/components/table/components/TablePlayButton.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/components/table/components/TablePlayButton.tsx b/packages/web/src/components/table/components/TablePlayButton.tsx
index 82b23a74978..4512eb16ffe 100644
--- a/packages/web/src/components/table/components/TablePlayButton.tsx
+++ b/packages/web/src/components/table/components/TablePlayButton.tsx
@@ -23,6 +23,7 @@ export const TablePlayButton = ({
   onClick,
   paused,
   playing = false,
+  isTrackPremium = false,
   isLocked = false
 }: TablePlayButtonProps) => {
   const {
@@ -31,19 +32,20 @@ export const TablePlayButton = ({
       primary: { p300 }
     }
   } = useTheme()
+  const shouldShowPremiumColor = isLocked && isTrackPremium
   return (
     <div onClick={onClick} className={cn(styles.tablePlayButton, className)}>
       {playing && !paused ? (
         <IconPause
           className={styles.icon}
-          fill={isLocked ? lightGreen : p300}
+          fill={shouldShowPremiumColor ? lightGreen : p300}
         />
       ) : (
         <IconPlay
           className={cn(styles.icon, {
             [styles.hideDefault]: hideDefault && !playing
           })}
-          fill={isLocked ? lightGreen : p300}
+          fill={shouldShowPremiumColor ? lightGreen : p300}
         />
       )}
     </div>

From c7ba10d6a8b9ffeb059fb427aedbb9c14d327285 Mon Sep 17 00:00:00 2001
From: Dharit Tantiviramanond <dharit.tan@gmail.com>
Date: Thu, 16 May 2024 21:09:31 -0400
Subject: [PATCH 3/3] Fix TrackListItem

---
 .../web/src/components/track/desktop/TrackListItem.tsx    | 8 ++++++--
 .../web/src/components/track/mobile/TrackListItem.tsx     | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/components/track/desktop/TrackListItem.tsx b/packages/web/src/components/track/desktop/TrackListItem.tsx
index 719c6257f47..181dafd3dbd 100644
--- a/packages/web/src/components/track/desktop/TrackListItem.tsx
+++ b/packages/web/src/components/track/desktop/TrackListItem.tsx
@@ -1,7 +1,10 @@
 import { memo, MouseEvent, useRef } from 'react'
 
 import { useGetCurrentUserId } from '@audius/common/api'
-import { useIsGatedContentPlaylistAddable } from '@audius/common/hooks'
+import {
+  useGatedContentAccess,
+  useIsGatedContentPlaylistAddable
+} from '@audius/common/hooks'
 import {
   ID,
   isContentUSDCPurchaseGated,
@@ -65,6 +68,7 @@ const TrackListItem = ({
   const isOwner = track?.owner_id === currentUserId
   const isPlaylistAddable = useIsGatedContentPlaylistAddable(track as Track)
   const isPremium = isContentUSDCPurchaseGated(track?.stream_conditions)
+  const { hasStreamAccess } = useGatedContentAccess(track as Track)
 
   if (forceSkeleton) {
     return (
@@ -170,7 +174,7 @@ const TrackListItem = ({
               paused={!playing}
               hideDefault={false}
               isTrackPremium={isPremium}
-              isOwned={isOwner}
+              isLocked={!hasStreamAccess}
             />
           </div>
         ) : null}
diff --git a/packages/web/src/components/track/mobile/TrackListItem.tsx b/packages/web/src/components/track/mobile/TrackListItem.tsx
index aaecb194557..747851100fb 100644
--- a/packages/web/src/components/track/mobile/TrackListItem.tsx
+++ b/packages/web/src/components/track/mobile/TrackListItem.tsx
@@ -198,7 +198,7 @@ const TrackListItem = ({
             paused={!isPlaying}
             hideDefault={false}
             isTrackPremium={isPremium}
-            isOwned={!isLocked}
+            isLocked={isLocked}
           />
         </div>
       ) : null}