🐛 (music) NICE-133 recently_played [b] (#3160)

Haha, whoops. I had the wrong `SPOTIFY_REFRESH_TOKEN`. That is updated in all `.env` et al. Eh, using Tidal more anyway and going away from Spotify. But until then finish up the `recently-played` route.
JeromeFitz · Jan 18, 2025 · f8a2aee · f8a2aee
1 parent 85acb73
commit f8a2aee
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 67 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/sites/jerandky.com/package.json b/sites/jerandky.com/package.json
@@ -39,7 +39,7 @@
     "@date-fns/utc": "2.1.0",
     "@heroicons/react": "2.2.0",
     "@jeromefitz/notion": "5.1.1",
-    "@jeromefitz/spotify": "4.1.1",
+    "@jeromefitz/spotify": "4.2.0-canary.2",
     "@jeromefitz/utils": "3.1.1",
     "@mantine/hooks": "7.16.0",
     "@notionhq/client": "2.2.15",

diff --git a/sites/jeromefitzgerald.com/package.json b/sites/jeromefitzgerald.com/package.json
@@ -43,7 +43,7 @@
     "@date-fns/utc": "2.1.0",
     "@heroicons/react": "2.2.0",
     "@jeromefitz/notion": "5.1.1",
-    "@jeromefitz/spotify": "4.1.1",
+    "@jeromefitz/spotify": "4.2.0-canary.2",
     "@jeromefitz/utils": "3.1.1",
     "@mantine/hooks": "7.16.0",
     "@notionhq/client": "2.2.15",

diff --git a/...jeromefitzgerald.com/src/app/(notion)/currently/listening-to/_components/Music.client.tsx b/...jeromefitzgerald.com/src/app/(notion)/currently/listening-to/_components/Music.client.tsx
@@ -157,48 +157,49 @@ function DataItem({ item, type }) {
               </Text>
             </DataList.Value>
           </DataList.Item>
-          {type === 'top-tracks' && (
-            <>
-              <DataList.Item align="start" className="flex flex-col gap-0">
-                <DataList.Label>
-                  <Text size="1">
-                    <Code variant="ghost">Song</Code>
-                  </Text>
-                </DataList.Label>
-                <DataList.Value>
-                  <Text size={{ initial: '1', md: '2' }} weight="medium">
-                    {_title2}
-                  </Text>
-                </DataList.Value>
-              </DataList.Item>
-              <DataList.Item align="start" className="flex flex-col gap-0">
-                <DataList.Label>
-                  <Text size="1">
-                    <Code variant="ghost">Album</Code>
-                  </Text>
-                </DataList.Label>
-                <DataList.Value>
-                  <Text size={{ initial: '1', md: '2' }} weight="medium">
-                    {_title3}
-                  </Text>
-                </DataList.Value>
-              </DataList.Item>
-              <DataList.Item align="start" className="flex flex-col gap-0">
-                <DataList.Label>
-                  <Text size="1">
-                    <Code variant="ghost">Year</Code>
-                  </Text>
-                </DataList.Label>
-                <DataList.Value>
-                  <Text size={{ initial: '1', md: '2' }}>
-                    <Code variant="ghost">
-                      {item.album.release_date.slice(0, 4)}
-                    </Code>
-                  </Text>
-                </DataList.Value>
-              </DataList.Item>
-            </>
-          )}
+          {type === 'top-tracks' ||
+            (type === 'recently-played' && (
+              <>
+                <DataList.Item align="start" className="flex flex-col gap-0">
+                  <DataList.Label>
+                    <Text size="1">
+                      <Code variant="ghost">Song</Code>
+                    </Text>
+                  </DataList.Label>
+                  <DataList.Value>
+                    <Text size={{ initial: '1', md: '2' }} weight="medium">
+                      {_title2}
+                    </Text>
+                  </DataList.Value>
+                </DataList.Item>
+                <DataList.Item align="start" className="flex flex-col gap-0">
+                  <DataList.Label>
+                    <Text size="1">
+                      <Code variant="ghost">Album</Code>
+                    </Text>
+                  </DataList.Label>
+                  <DataList.Value>
+                    <Text size={{ initial: '1', md: '2' }} weight="medium">
+                      {_title3}
+                    </Text>
+                  </DataList.Value>
+                </DataList.Item>
+                <DataList.Item align="start" className="flex flex-col gap-0">
+                  <DataList.Label>
+                    <Text size="1">
+                      <Code variant="ghost">Year</Code>
+                    </Text>
+                  </DataList.Label>
+                  <DataList.Value>
+                    <Text size={{ initial: '1', md: '2' }}>
+                      <Code variant="ghost">
+                        {item.album.release_date.slice(0, 4)}
+                      </Code>
+                    </Text>
+                  </DataList.Value>
+                </DataList.Item>
+              </>
+            ))}
           <DataList.Item
             align="start"
             className={cx(
@@ -459,7 +460,13 @@ function DataItems() {
   )
 
   useEffect(() => {
-    if (canFetchMore && !isFetchingMore && !isLoadingMore && isVisible) {
+    if (
+      canFetchMore &&
+      !isFetchingMore &&
+      !isLoadingMore &&
+      isVisible &&
+      spotifyType !== 'recently-played'
+    ) {
       void fetchMore()
     }
   }, [canFetchMore, fetchMore, isFetchingMore, isLoadingMore, isVisible])
@@ -608,6 +615,7 @@ function MusicClient() {
                 <Flex gap="3">
                   <SelectRoot
                     defaultValue={spotifyTimeRange ?? INIT.time_range}
+                    disabled={spotifyType === 'recently-played'}
                     onValueChange={(value) => handleValueChangeTimeRange(value)}
                     size={{ initial: '3', md: '3' }}
                   >
@@ -658,6 +666,11 @@ function MusicClient() {
                       {/* @todo(radix) children */}
                       {/* @ts-ignore */}
                       <SelectItem value="top-tracks">Top Tracks</SelectItem>
+                      {/* @todo(radix) children */}
+                      {/* @ts-ignore */}
+                      <SelectItem value="recently-played">
+                        Recently Played
+                      </SelectItem>
                     </SelectContent>
                   </SelectRoot>
                 </Flex>

diff --git a/sites/jeromefitzgerald.com/src/app/api/v1/music/[slug]/route.ts b/sites/jeromefitzgerald.com/src/app/api/v1/music/[slug]/route.ts
@@ -35,10 +35,16 @@ const evictionPolicyTiming = {
   long_term: getTimeInSeconds(ms('30d')),
   medium_term: getTimeInSeconds(ms('7d')),
   now_playing: getTimeInSeconds(ms('2m')),
+  recently_played: getTimeInSeconds(ms('1d')),
   short_term: getTimeInSeconds(ms('1d')),
 }
 
-const SLUG__VALIDATION = ['now-playing', 'top-artists', 'top-tracks']
+const SLUG__VALIDATION = [
+  'now-playing',
+  'recently-played',
+  'top-artists',
+  'top-tracks',
+]
 const dataEmpty = { debug: { latency: 0, type: 'api' }, is_playing: false }
 
 const getKey = ({ limit, offset, slug, time_range }) => {
@@ -50,6 +56,16 @@ const getKey = ({ limit, offset, slug, time_range }) => {
     }
   }
 
+  if (slug === 'recently-played') {
+    const _params = `?limit=50`
+    const params = _slug(_params)
+    const key = `${keyPrefixSpotify}/${slug}/${params}`.toLowerCase()
+    return {
+      evictionPolicy: evictionPolicyTiming['recently_played'],
+      key,
+    }
+  }
+
   const _params = `?time_range=${time_range}&limit=${limit}&offset=${offset}`
   const params = _slug(_params)
   const key = `${keyPrefixSpotify}/${slug}/${params}`.toLowerCase()
@@ -142,6 +158,19 @@ export async function GET(
           void redis.set(key, stringify(result.data), { ex: evictionPolicy })
         }
         break
+      case 'recently-played':
+        start = Date.now()
+        data = await spotify.get.recentlyPlayed({ limit, withImages: true })
+        result.data = data
+        result.debug = {
+          key,
+          latency: Date.now() - start,
+          type: 'api',
+        }
+        // @cache(set) redis
+        // void redis.set(key, stringify(result.data), 'EX', evictionPolicy)
+        void redis.set(key, stringify(result.data), { ex: evictionPolicy })
+        break
       case 'top-artists':
         start = Date.now()
         data = await spotify.get.topArtists({

diff --git a/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Currently.Item.tsx b/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Currently.Item.tsx
@@ -17,7 +17,7 @@ function CurrentlyItem({ headline, id = '', isLoading, subline }) {
         <Component>{headline}</Component>
         <Text className="hidden"> – </Text>
         <br />
-        <Text size={{ initial: '4', md: '5' }}>
+        <Text className="line-clamp-1" size={{ initial: '4', md: '5' }}>
           <Text as="span">“</Text>
           <Text as="span" className="pr-0.5">
             <Em>{subline}</Em>

diff --git a/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Currently.Music.Client.tsx b/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Currently.Music.Client.tsx
@@ -3,39 +3,42 @@
  * @todo(api) NICE-125 this takes way too long to run
  *                on what should be a redis cache hit
  */
-// import { fetcher } from '@jeromefitz/shared/lib'
+import { fetcher } from '@jeromefitz/shared/lib'
 
-// import useSWR from 'swr'
+import useSWR from 'swr'
 
-// import { INIT, getKey } from '@/utils/getKey'
+import { getKey, INIT } from '@/utils/getKey'
 
 import { CurrentlyItem } from './Currently.Item'
 import { CurrentlyWrapper } from './Currently.Item.Wrapper'
 
-// const key = getKey(0, { ...INIT, time_range: 'long_term', type: 'top-tracks' })
-// const options = {}
+// const key = getKey(0, { ...INIT, time_range: 'short_term', type: 'top-tracks' })
+const key = getKey(0, { ...INIT, limit: 50, type: 'recently-played' })
+
+const options = {}
 
 function CurrentlyMusicClient({ titleSub, ...c }) {
   const { color, href, icon, id, title } = c
   const propsParent = { color, href, icon, id, title }
-  // const { data, error, isLoading } = useSWR(key, fetcher, options)
+  const { data, error, isLoading } = useSWR(key, fetcher, options)
 
-  // const hasError = !!error
+  const hasError = !!error
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  // const top = hasError ? {} : data?.items[0]
+  const top = hasError ? {} : data?.items[0]
 
-  // const headline = hasError ? titleSub[0] : top?.artist
+  const headline = hasError ? titleSub[0] : top?.artist
   // const subline = hasError ? titleSub[1] : top?.album?.name
+  const subline = hasError ? titleSub[1] : top?.name
 
-  const headline = titleSub[0]
-  const subline = titleSub[1]
+  // const headline = titleSub[0]
+  // const subline = titleSub[1]
 
   const props = {
     headline,
     id,
-    isLoading: false,
+    isLoading,
     subline,
   }
 

diff --git a/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Currently.tsx b/sites/jeromefitzgerald.com/src/app/playground/2024/_components/Currently.tsx
@@ -28,7 +28,8 @@ const currently = [
     titleSub: 'N/A',
   },
   {
-    apiUrl: '/api/v1/music/top-artists?limit=10&offset=0&time_range=medium_term',
+    // apiUrl: '/api/v1/music/top-tracks?limit=10&offset=0&time_range=short_term',
+    apiUrl: '/api/v1/music/recently-played?limit=10',
     color: 'orange',
     component: CurrentlyMusicClient,
     href: '/currently/listening-to',
@@ -102,12 +103,20 @@ function Currently() {
         {}
         {currently.map((c, idx) => {
           if (!c?.isActive) return null
+
           const key = `currently-${idx}-${c.id}`
 
           const Component = c.component
           const titleSub = c?.titleSub.split(' – ')
           const props = { ...c, titleSub }
 
+          // if (c.id === 'listening') {
+          //   console.dir(`c:`)
+          //   console.dir(c)
+          //   console.dir(`props:`)
+          //   console.dir(props)
+          // }
+
           return <Component key={key} {...props} />
         })}
       </Box>