Fix embed for premium tracks and albums (#8604)

AudiusProject · May 24, 2024 · 6cd83f9 · 6cd83f9
1 parent 876c741
commit 6cd83f9
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 28 deletions.
diff --git a/packages/embed/src/components/app.jsx b/packages/embed/src/components/app.jsx
@@ -439,14 +439,19 @@ const App = (props) => {
         : null
     const listenOnAudiusURL = artworkClickURL
     const flavor = requestState.playerFlavor
+    const isTrack = !!tracksResponse
     return (
       <PausePopover
         artworkURL={artworkURL}
         artworkClickURL={artworkClickURL}
         listenOnAudiusURL={listenOnAudiusURL}
         flavor={flavor}
         isMobileWebTwitter={mobileWebTwitter}
-        streamConditions={tracksResponse?.streamConditions}
+        streamConditions={
+          tracksResponse?.streamConditions ||
+          collectionsResponse?.streamConditions
+        }
+        isTrack={isTrack}
       />
     )
   }

diff --git a/packages/embed/src/components/collection/CollectionPlayerCard.jsx b/packages/embed/src/components/collection/CollectionPlayerCard.jsx
@@ -1,3 +1,4 @@
+import { instanceOfPurchaseGate } from '@audius/sdk'
 import cn from 'classnames'
 import SimpleBar from 'simplebar-react'
 
@@ -9,7 +10,9 @@ import Artwork from '../artwork/Artwork'
 import AudiusLogoButton from '../button/AudiusLogoButton'
 import ShareButton from '../button/ShareButton'
 import Card from '../card/Card'
+import { DogEar } from '../dog-ear/DogEar'
 import PlayButton, { PlayingState } from '../playbutton/PlayButton'
+import { Preview } from '../preview/Preview'
 import BedtimeScrubber from '../scrubber/BedtimeScrubber'
 import Titles from '../titles/Titles'
 
@@ -87,16 +90,19 @@ const CollectionPlayerCard = ({
   rowBackgroundColor,
   activeTrackIndex,
   onTogglePlay,
-  isTwitter
+  isTwitter,
+  streamConditions
 }) => {
   const makeOnTogglePlay = (index) => () => onTogglePlay(index)
   const permalink = `${stripLeadingSlash(collection.permalink)}`
+  const isPurchaseable = instanceOfPurchaseGate(streamConditions)
   return (
     <Card
       isTwitter={isTwitter}
       backgroundColor={backgroundColor}
       twitterURL={permalink}
     >
+      {isPurchaseable ? <DogEar size='s' /> : null}
       <div className={styles.padding}>
         <div className={styles.topRow}>
           <div className={styles.logo}>
@@ -128,13 +134,16 @@ const CollectionPlayerCard = ({
               title={collection.playlistName}
               titleUrl={permalink}
             />
-            <BedtimeScrubber
-              duration={duration}
-              elapsedSeconds={elapsedSeconds}
-              mediaKey={mediaKey}
-              playingState={playingState}
-              seekTo={seekTo}
-            />
+            <div className={styles.scrubber}>
+              <BedtimeScrubber
+                duration={duration}
+                elapsedSeconds={elapsedSeconds}
+                mediaKey={mediaKey}
+                playingState={playingState}
+                seekTo={seekTo}
+              />
+              {isPurchaseable ? <Preview /> : null}
+            </div>
           </div>
         </div>
         <div className={styles.listContainer}>

diff --git a/packages/embed/src/components/collection/CollectionPlayerCard.module.css b/packages/embed/src/components/collection/CollectionPlayerCard.module.css
@@ -53,10 +53,6 @@
   min-width: 0;
 }
 
-.middleRowRight div {
-  margin-top: auto;
-}
-
 .listContainer {
   display: flex;
   flex-direction: column;
@@ -149,3 +145,10 @@
   width: 20px;
   border-radius: 10px;
 }
+
+.scrubber {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
+}
diff --git a/packages/embed/src/components/collection/CollectionPlayerContainer.jsx b/packages/embed/src/components/collection/CollectionPlayerContainer.jsx
@@ -1,5 +1,7 @@
 import { useState, useContext, useCallback, useEffect } from 'react'
 
+import { instanceOfPurchaseGate } from '@audius/sdk'
+
 import usePlayback from '../../hooks/usePlayback'
 import { useRecordListens } from '../../hooks/useRecordListens'
 import { useSpacebar } from '../../hooks/useSpacebar'
@@ -31,17 +33,24 @@ const CollectionPlayerContainer = ({
   const getTrackInfoForPlayback = useCallback(
     (trackIndex) => {
       const activeTrack = collection.tracks[trackIndex]
+      const isPurchaseable = instanceOfPurchaseGate(
+        activeTrack.streamConditions
+      )
       if (activeTrack == null) {
         return null
       }
-      const mp3StreamUrl = getTrackStreamEndpoint(activeTrack.id)
+      const mp3StreamUrl = getTrackStreamEndpoint(
+        activeTrack.id,
+        isPurchaseable
+      )
 
       return {
         segments: activeTrack.trackSegments,
         gateways: formatGateways(activeTrack.user.creatorNodeEndpoint),
         title: activeTrack.title,
         artistName: activeTrack.user.name,
-        mp3StreamUrl
+        mp3StreamUrl,
+        isPurchaseable
       }
     },
     [collection.tracks]
@@ -169,6 +178,7 @@ const CollectionPlayerContainer = ({
         playingState={playingState}
         seekTo={seekTo}
         isTwitter={isTwitter}
+        streamConditions={collection.streamConditions}
       />
     </>
   )

diff --git a/packages/embed/src/components/pausedpopover/ListenOnAudiusCTA.jsx b/packages/embed/src/components/pausedpopover/ListenOnAudiusCTA.jsx
@@ -1,5 +1,6 @@
 import { USDC } from '@audius/fixed-decimal'
 import { Button, Text } from '@audius/harmony'
+import { instanceOfPurchaseGate } from '@audius/sdk'
 
 import { getCopyableLink } from '../../util/shareUtil'
 
@@ -12,7 +13,7 @@ const ListenOnAudiusCTA = ({ audiusURL, streamConditions }) => {
   const onClick = () => {
     window.open(getCopyableLink(audiusURL), '_blank')
   }
-  const isPurchaseable = streamConditions && 'usdc_purchase' in streamConditions
+  const isPurchaseable = instanceOfPurchaseGate(streamConditions)
 
   return (
     <Button
@@ -23,7 +24,7 @@ const ListenOnAudiusCTA = ({ audiusURL, streamConditions }) => {
       <Text variant='title' size='l'>
         {isPurchaseable
           ? `${messages.buy} $${USDC(
-              streamConditions.usdc_purchase.price / 100
+              streamConditions.usdcPurchase.price / 100
             ).toLocaleString('en-US', {
               minimumFractionDigits: 2,
               maximumFractionDigits: 2

diff --git a/packages/embed/src/components/pausedpopover/PausePopover.jsx b/packages/embed/src/components/pausedpopover/PausePopover.jsx
@@ -23,7 +23,8 @@ const PausedPopoverCard = ({
   listenOnAudiusURL,
   flavor,
   isMobileWebTwitter,
-  streamConditions
+  streamConditions,
+  isTrack
 }) => {
   const { popoverVisibility, setPopoverVisibility } = useContext(PauseContext)
   const { width } = useContext(CardDimensionsContext)
@@ -75,7 +76,10 @@ const PausedPopoverCard = ({
                 <IconRemove />
               </div>
             ) : null}
-            <PrimaryLabel streamConditions={streamConditions} />
+            <PrimaryLabel
+              streamConditions={streamConditions}
+              isTrack={isTrack}
+            />
             {flavor === PlayerFlavor.COMPACT ? (
               <div className={styles.audiusIcon}>
                 <IconAudius />

diff --git a/packages/embed/src/components/pausedpopover/PrimaryLabel.jsx b/packages/embed/src/components/pausedpopover/PrimaryLabel.jsx
@@ -1,16 +1,17 @@
 import { Text } from '@audius/harmony'
+import { instanceOfPurchaseGate } from '@audius/sdk'
 
 const messages = {
   more: 'Looking for more like this?',
-  buy: 'Buy The Full Track On Audius'
+  buy: (isTrack) => `Buy The Full ${isTrack ? 'Song' : 'Album'} On Audius`
 }
 
-const PrimaryLabel = ({ streamConditions }) => {
-  const isPurchaseable = streamConditions && 'usdc_purchase' in streamConditions
+const PrimaryLabel = ({ streamConditions, isTrack }) => {
+  const isPurchaseable = instanceOfPurchaseGate(streamConditions)
 
   return (
     <Text color='default' variant='heading' size='s'>
-      {isPurchaseable ? messages.buy : messages.more}
+      {isPurchaseable ? messages.buy(isTrack) : messages.more}
     </Text>
   )
 }

diff --git a/packages/embed/src/components/track/TrackPlayerCard.jsx b/packages/embed/src/components/track/TrackPlayerCard.jsx
@@ -1,5 +1,7 @@
 import { useState, useContext, useEffect } from 'react'
 
+import { instanceOfPurchaseGate } from '@audius/sdk'
+
 import { isMobileWebTwitter } from '../../util/isMobileWebTwitter'
 import Artwork from '../artwork/Artwork'
 import ShareButton from '../button/ShareButton'
@@ -58,7 +60,7 @@ const TrackPlayerCard = ({
     }
     setArtworkWrapperStyle(newStyle)
   }, [height, width])
-  const isPurchaseable = streamConditions && 'usdc_purchase' in streamConditions
+  const isPurchaseable = instanceOfPurchaseGate(streamConditions)
 
   return (
     <Card

diff --git a/packages/embed/src/components/track/TrackPlayerCompact.jsx b/packages/embed/src/components/track/TrackPlayerCompact.jsx
@@ -1,3 +1,5 @@
+import { instanceOfPurchaseGate } from '@audius/sdk'
+
 import Artwork from '../artwork/Artwork'
 import AudiusLogoButton from '../button/AudiusLogoButton'
 import ShareButton from '../button/ShareButton'
@@ -25,7 +27,7 @@ const TrackPlayerCompact = ({
   backgroundColor,
   streamConditions
 }) => {
-  const isPurchaseable = streamConditions && 'usdc_purchase' in streamConditions
+  const isPurchaseable = instanceOfPurchaseGate(streamConditions)
 
   return (
     <div

diff --git a/packages/embed/src/components/track/TrackPlayerContainer.jsx b/packages/embed/src/components/track/TrackPlayerContainer.jsx
@@ -1,5 +1,7 @@
 import { useState, useContext, useCallback, useEffect, useMemo } from 'react'
 
+import { instanceOfPurchaseGate } from '@audius/sdk'
+
 import usePlayback from '../../hooks/usePlayback'
 import { useRecordListens } from '../../hooks/useRecordListens'
 import { useSpacebar } from '../../hooks/useSpacebar'
@@ -49,8 +51,7 @@ const TrackPlayerContainer = ({
   } = usePlayback(track.id, onTrackEnd)
 
   const trackInfoForPlayback = useMemo(() => {
-    const isPurchaseable =
-      track.streamConditions && 'usdc_purchase' in track.streamConditions
+    const isPurchaseable = instanceOfPurchaseGate(track.streamConditions)
     return {
       gateways: formatGateways(track.user.creatorNodeEndpoint),
       title: track.title,

diff --git a/packages/embed/src/components/track/TrackPlayerTiny.jsx b/packages/embed/src/components/track/TrackPlayerTiny.jsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 
+import { instanceOfPurchaseGate } from '@audius/sdk'
 import cn from 'classnames'
 
 import AudiusLogoGlyph from '../../assets/img/audiusLogoGlyph.svg'
@@ -73,7 +74,7 @@ const TrackPlayerTiny = ({
     infoStyle['--info-width'] = `${infoWidth + MARQUEE_SPACING}px`
   }
 
-  const isPurchaseable = streamConditions && 'usdc_purchase' in streamConditions
+  const isPurchaseable = instanceOfPurchaseGate(streamConditions)
 
   return (
     <div className={styles.wrapper}>