Disable add to playlist for prem tracks if not purchased (#8336)

packages/common/src/hooks/purchaseContent/utils.ts

@@ -1,4 +1,8 @@
-import { isContentUSDCPurchaseGated } from '~/models/Track'
+import { Collection, Track } from '~/models'
+import { UserTrackMetadata, isContentUSDCPurchaseGated } from '~/models/Track'
+import { Nullable } from '~/utils'
+
+import { useGatedContentAccess } from '../useGatedContent'
 
 import {
   PayExtraAmountPresetValues,
@@ -55,3 +59,20 @@ export const isTrackDownloadPurchaseable = (
 ): metadata is PurchaseableTrackDownloadMetadata =>
   'download_conditions' in metadata &&
   isContentUSDCPurchaseGated(metadata.download_conditions)
+
+export const useIsGatedContentPlaylistAddable = (
+  contentArg?: Nullable<Partial<Track | UserTrackMetadata | Collection>>
+) => {
+  const content = contentArg ?? {}
+  const {
+    stream_conditions: streamConditions,
+    is_stream_gated: isStreamGated,
+    ddex_app: ddexApp
+  } = content
+  const { hasStreamAccess } = useGatedContentAccess(content)
+  return (
+    !ddexApp &&
+    (!isStreamGated ||
+      (isContentUSDCPurchaseGated(streamConditions) && hasStreamAccess))
+  )
+}

packages/mobile/src/components/lineup-tile/TrackTile.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from 'react'
 
+import { useIsGatedContentPlaylistAddable } from '@audius/common/hooks'
 import {
   ShareSource,
   RepostSource,
@@ -126,6 +127,7 @@ export const TrackTileComponent = ({
     isUSDCEnabled &&
     isContentUSDCPurchaseGated(streamConditions) &&
     !!preview_cid
+  const isPlaylistAddable = useIsGatedContentPlaylistAddable(track)
 
   const renderImage = useCallback(
     (props: ImageProps) => (
@@ -167,7 +169,7 @@ export const TrackTileComponent = ({
       isEditAlbumsEnabled && isOwner && !ddexApp
         ? OverflowAction.ADD_TO_ALBUM
         : null,
-      OverflowAction.ADD_TO_PLAYLIST,
+      isPlaylistAddable ? OverflowAction.ADD_TO_PLAYLIST : null,
       isNewPodcastControlsEnabled && isLongFormContent
         ? OverflowAction.VIEW_EPISODE_PAGE
         : OverflowAction.VIEW_TRACK_PAGE,
@@ -198,6 +200,7 @@ export const TrackTileComponent = ({
     isEditAlbumsEnabled,
     isOwner,
     ddexApp,
+    isPlaylistAddable,
     isNewPodcastControlsEnabled,
     albumInfo,
     playbackPositionInfo?.status,

packages/mobile/src/components/now-playing-drawer/ActionsBar.tsx

@@ -1,6 +1,9 @@
 import { useCallback, useLayoutEffect } from 'react'
 
-import { useGatedContentAccess } from '@audius/common/hooks'
+import {
+  useGatedContentAccess,
+  useIsGatedContentPlaylistAddable
+} from '@audius/common/hooks'
 import {
   ShareSource,
   RepostSource,
@@ -120,6 +123,7 @@ export const ActionsBar = ({ track }: ActionsBarProps) => {
   const { isEnabled: isEditAlbumsEnabled } = useFeatureFlag(
     FeatureFlags.EDIT_ALBUMS
   )
+  const isPlaylistAddable = useIsGatedContentPlaylistAddable(track)
 
   const isOwner = track?.owner_id === accountUser?.user_id
   const { onOpen: openPremiumContentPurchaseModal } =
@@ -201,7 +205,7 @@ export const ActionsBar = ({ track }: ActionsBarProps) => {
         track.genre === Genre.PODCASTS || track.genre === Genre.AUDIOBOOKS
       const overflowActions = [
         isEditAlbumsEnabled && isOwner ? OverflowAction.ADD_TO_ALBUM : null,
-        OverflowAction.ADD_TO_PLAYLIST,
+        isPlaylistAddable ? OverflowAction.ADD_TO_PLAYLIST : null,
         isNewPodcastControlsEnabled && isLongFormContent
           ? OverflowAction.VIEW_EPISODE_PAGE
           : OverflowAction.VIEW_TRACK_PAGE,
@@ -228,6 +232,7 @@ export const ActionsBar = ({ track }: ActionsBarProps) => {
     track,
     isEditAlbumsEnabled,
     isOwner,
+    isPlaylistAddable,
     isNewPodcastControlsEnabled,
     albumInfo,
     playbackPositionInfo?.status,

packages/mobile/src/components/track-list/TrackListItem.tsx

@@ -1,7 +1,10 @@
 import type { ComponentType } from 'react'
 import { memo, useCallback, useMemo, useState } from 'react'
 
-import { useGatedContentAccess } from '@audius/common/hooks'
+import {
+  useGatedContentAccess,
+  useIsGatedContentPlaylistAddable
+} from '@audius/common/hooks'
 import type { Collection, ID, UID, Track, User } from '@audius/common/models'
 import { FeatureFlags } from '@audius/common/services'
 import {
@@ -262,6 +265,7 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => {
   const isPlaying = useSelector((state) => {
     return isActive && getPlaying(state)
   })
+  const isPlaylistAddable = useIsGatedContentPlaylistAddable(track)
 
   const messages = getMessages({ isDeleted })
   const styles = useStyles()
@@ -323,7 +327,7 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => {
       isEditAlbumsEnabled && isTrackOwner && !ddexApp
         ? OverflowAction.ADD_TO_ALBUM
         : null,
-      OverflowAction.ADD_TO_PLAYLIST,
+      isPlaylistAddable ? OverflowAction.ADD_TO_PLAYLIST : null,
       isNewPodcastControlsEnabled && isLongFormContent
         ? OverflowAction.VIEW_EPISODE_PAGE
         : OverflowAction.VIEW_TRACK_PAGE,
@@ -354,6 +358,7 @@ const TrackListItemComponent = (props: TrackListItemComponentProps) => {
     has_current_user_reposted,
     isEditAlbumsEnabled,
     ddexApp,
+    isPlaylistAddable,
     isNewPodcastControlsEnabled,
     isLongFormContent,
     showViewAlbum,

packages/mobile/src/screens/track-screen/TrackScreenDetailsTile.tsx

@@ -1,6 +1,9 @@
 import { useCallback } from 'react'
 
-import { useGatedContentAccess } from '@audius/common/hooks'
+import {
+  useGatedContentAccess,
+  useIsGatedContentPlaylistAddable
+} from '@audius/common/hooks'
 import {
   Name,
   ShareSource,
@@ -145,6 +148,7 @@ export const TrackScreenDetailsTile = ({
   const hasDownloadableAssets =
     (track as Track)?.is_downloadable ||
     ((track as Track)?._stems?.length ?? 0) > 0
+  const isPlaylistAddable = useIsGatedContentPlaylistAddable(track as Track)
 
   const { data: albumInfo } = trpc.tracks.getAlbumBacklink.useQuery(
     { trackId },
@@ -249,9 +253,12 @@ export const TrackScreenDetailsTile = ({
       isEditAlbumsEnabled && isOwner && !ddexApp
         ? OverflowAction.ADD_TO_ALBUM
         : null
+    const addToPlaylistAction = isPlaylistAddable
+      ? OverflowAction.ADD_TO_PLAYLIST
+      : null
     const overflowActions = [
       addToAlbumAction,
-      OverflowAction.ADD_TO_PLAYLIST,
+      addToPlaylistAction,
       isOwner
         ? null
         : user.does_current_user_follow

packages/web/src/components/track/GiantTrackTile.tsx

@@ -1,5 +1,6 @@
 import { Suspense, lazy, useCallback, useState } from 'react'
 
+import { useIsGatedContentPlaylistAddable } from '@audius/common/hooks'
 import {
   isContentUSDCPurchaseGated,
   ID,
@@ -223,6 +224,7 @@ export const GiantTrackTile = ({
   const showPreview = isUSDCPurchaseGated && (isOwner || !hasStreamAccess)
   // Play button is conditionally hidden for USDC-gated tracks when the user does not have access
   const showPlay = isUSDCPurchaseGated ? hasStreamAccess : true
+  const isPlaylistAddable = useIsGatedContentPlaylistAddable(track)
   const { data: albumInfo } = trpc.tracks.getAlbumBacklink.useQuery(
     { trackId },
     { enabled: !!trackId }
@@ -521,7 +523,8 @@ export const GiantTrackTile = ({
       isUnlisted,
       includeEmbed: !(isUnlisted || isStreamGated),
       includeArtistPick: !isUnlisted,
-      includeAddToAlbum: isOwner,
+      includeAddToPlaylist: isPlaylistAddable,
+      includeAddToAlbum: isPlaylistAddable,
       extraMenuItems: overflowMenuExtraItems
     }
   }

packages/web/src/components/track/desktop/ConnectedTrackTile.tsx

@@ -7,14 +7,19 @@ import {
   useRef
 } from 'react'
 
-import { useGatedContentAccess } from '@audius/common/hooks'
+import {
+  useFeatureFlag,
+  useGatedContentAccess,
+  useIsGatedContentPlaylistAddable
+} from '@audius/common/hooks'
 import {
   ShareSource,
   RepostSource,
   FavoriteSource,
   ID,
   UID
 } from '@audius/common/models'
+import { FeatureFlags } from '@audius/common/services'
 import {
   accountSelectors,
   cacheTracksSelectors,
@@ -154,10 +159,15 @@ const ConnectedTrackTile = ({
   const isOwner = handle === userHandle
   const isArtistPick = showArtistPick && artist_pick_track_id === trackId
   const hasPreview = !!track?.preview_cid
+  const { isEnabled: isEditAlbumsEnabled } = useFeatureFlag(
+    FeatureFlags.EDIT_ALBUMS
+  )
 
   const { isFetchingNFTAccess, hasStreamAccess } =
     useGatedContentAccess(trackWithFallback)
   const loading = isLoading || isFetchingNFTAccess
+  const isPlaylistAddable = useIsGatedContentPlaylistAddable(trackWithFallback)
+  const isAlbumAddable = isEditAlbumsEnabled && isOwner
 
   const dispatch = useDispatch()
   const [, setLockedContentVisibility] = useModalState('LockedContent')
@@ -202,8 +212,8 @@ const ConnectedTrackTile = ({
     const menu: Omit<TrackMenuProps, 'children'> = {
       extraMenuItems: [],
       handle,
-      includeAddToPlaylist: true,
-      includeAddToAlbum: true,
+      includeAddToPlaylist: isPlaylistAddable,
+      includeAddToAlbum: isAlbumAddable,
       includeArtistPick: handle === userHandle && !isUnlisted,
       includeEdit: handle === userHandle,
       ddexApp: track?.ddex_app,

packages/web/src/components/track/desktop/TrackListItem.tsx

@@ -1,7 +1,8 @@
 import { memo, MouseEvent, useRef } from 'react'
 
 import { useGetCurrentUserId } from '@audius/common/api'
-import { ID, UID } from '@audius/common/models'
+import { useIsGatedContentPlaylistAddable } from '@audius/common/hooks'
+import { ID, Track, UID } from '@audius/common/models'
 import { EnhancedCollectionTrack } from '@audius/common/store'
 import { Genre, formatSeconds } from '@audius/common/utils'
 import { IconKebabHorizontal } from '@audius/harmony'
@@ -57,6 +58,7 @@ const TrackListItem = ({
   const menuRef = useRef<HTMLDivElement>(null)
   const { data: currentUserId } = useGetCurrentUserId({})
   const isOwner = track?.owner_id === currentUserId
+  const isPlaylistAddable = useIsGatedContentPlaylistAddable(track as Track)
 
   if (forceSkeleton) {
     return (
@@ -114,7 +116,7 @@ const TrackListItem = ({
 
   const menu: Omit<TrackMenuProps, 'children'> = {
     handle: track.user.handle,
-    includeAddToPlaylist: true,
+    includeAddToPlaylist: isPlaylistAddable,
     includeAddToAlbum: isOwner,
     includeArtistPick: false,
     includeEdit: false,

packages/web/src/components/track/mobile/ConnectedTrackListItem.tsx

@@ -1,5 +1,7 @@
 import { memo, useCallback } from 'react'
 
+import { useGetTrackById } from '@audius/common/api'
+import { useIsGatedContentPlaylistAddable } from '@audius/common/hooks'
 import {
   RepostSource,
   FavoriteSource,
@@ -65,6 +67,7 @@ const ConnectedTrackListItem = (props: ConnectedTrackListItemProps) => {
     { trackId },
     { enabled: !!trackId }
   )
+  const { data: track } = useGetTrackById({ id: trackId })
   const dispatch = useDispatch()
   const { onOpen: openPremiumContentPurchaseModal } =
     usePremiumContentPurchaseModal()
@@ -73,6 +76,7 @@ const ConnectedTrackListItem = (props: ConnectedTrackListItemProps) => {
     dispatch(setLockedContentId({ id: trackId }))
     setLockedContentVisibility(true)
   }, [dispatch, trackId, setLockedContentVisibility])
+  const isPlaylistAddable = useIsGatedContentPlaylistAddable(track)
 
   const onClickOverflow = () => {
     const overflowActions = [
@@ -89,7 +93,7 @@ const ConnectedTrackListItem = (props: ConnectedTrackListItemProps) => {
       isEditAlbumsEnabled && user?.user_id === currentUserId && !ddexApp
         ? OverflowAction.ADD_TO_ALBUM
         : null,
-      OverflowAction.ADD_TO_PLAYLIST,
+      isPlaylistAddable ? OverflowAction.ADD_TO_PLAYLIST : null,
       OverflowAction.VIEW_TRACK_PAGE,
       isEditAlbumsEnabled && albumInfo ? OverflowAction.VIEW_ALBUM_PAGE : null,
       OverflowAction.VIEW_ARTIST_PAGE

packages/web/src/components/track/mobile/ConnectedTrackTile.tsx

@@ -1,6 +1,9 @@
 import { memo, MouseEvent } from 'react'
 
-import { useGatedContentAccess } from '@audius/common/hooks'
+import {
+  useGatedContentAccess,
+  useIsGatedContentPlaylistAddable
+} from '@audius/common/hooks'
 import {
   ShareSource,
   RepostSource,
@@ -152,6 +155,7 @@ const ConnectedTrackTile = ({
   )
   const { isFetchingNFTAccess, hasStreamAccess } =
     useGatedContentAccess(trackWithFallback)
+  const isPlaylistAddable = useIsGatedContentPlaylistAddable(track)
   const loading = isLoading || isFetchingNFTAccess
 
   const toggleSave = (trackId: ID) => {
@@ -205,11 +209,14 @@ const ConnectedTrackTile = ({
         : null
     const addToAlbumAction =
       isEditAlbumsEnabled && isOwner ? OverflowAction.ADD_TO_ALBUM : null
+    const addToPlaylistAction = isPlaylistAddable
+      ? OverflowAction.ADD_TO_PLAYLIST
+      : null
     const overflowActions = [
       repostAction,
       favoriteAction,
       addToAlbumAction,
-      OverflowAction.ADD_TO_PLAYLIST,
+      addToPlaylistAction,
       isNewPodcastControlsEnabled && isLongFormContent
         ? OverflowAction.VIEW_EPISODE_PAGE
         : OverflowAction.VIEW_TRACK_PAGE,

packages/web/src/pages/track-page/components/mobile/TrackHeader.tsx

@@ -1,6 +1,7 @@
 import { Suspense, useCallback } from 'react'
 
 import { imageBlank as placeholderArt } from '@audius/common/assets'
+import { useIsGatedContentPlaylistAddable } from '@audius/common/hooks'
 import {
   SquareSizes,
   isContentCollectibleGated,
@@ -218,6 +219,7 @@ const TrackHeader = ({
     { trackId },
     { enabled: !!trackId }
   )
+  const isPlaylistAddable = useIsGatedContentPlaylistAddable(track)
 
   const image = useTrackCoverArt(
     trackId,
@@ -263,7 +265,7 @@ const TrackHeader = ({
         ? OverflowAction.UNFAVORITE
         : OverflowAction.FAVORITE,
       isEditAlbumsEnabled && isOwner ? OverflowAction.ADD_TO_ALBUM : null,
-      OverflowAction.ADD_TO_PLAYLIST,
+      isPlaylistAddable ? OverflowAction.ADD_TO_PLAYLIST : null,
       isEditAlbumsEnabled && albumInfo ? OverflowAction.VIEW_ALBUM_PAGE : null,
       isFollowing
         ? OverflowAction.UNFOLLOW_ARTIST