feat: add now playing

client/app/components/LastPlays.tsx

@@ -1,8 +1,8 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { useQuery } from "@tanstack/react-query"
 import { timeSince } from "~/utils/utils"
 import ArtistLinks from "./ArtistLinks"
-import { deleteListen, getLastListens, type getItemsArgs, type Listen } from "api/api"
+import { deleteListen, getLastListens, type getItemsArgs, type Listen, type Track } from "api/api"
 import { Link } from "react-router"
 import { useAppContext } from "~/providers/AppProvider"
 
@@ -12,6 +12,7 @@ interface Props {
     albumId?: Number
     trackId?: number
     hideArtists?: boolean
+    showNowPlaying?: boolean
 }
 
 export default function LastPlays(props: Props) {
@@ -27,7 +28,20 @@ export default function LastPlays(props: Props) {
         queryFn: ({ queryKey }) => getLastListens(queryKey[1] as getItemsArgs),
     })
 
+
     const [items, setItems] = useState<Listen[] | null>(null)
+    const [nowPlaying, setNowPlaying] = useState<Track | undefined>(undefined)
+
+    useEffect(() => {
+        fetch('/apis/web/v1/now-playing')
+            .then(r => r.json())
+            .then(r => {
+                console.log(r)
+                if (r.currently_playing) {
+                    setNowPlaying(r.track)
+                }
+            })
+    }, [])
 
     const handleDelete = async (listen: Listen) => {
         if (!data) return 
@@ -69,6 +83,30 @@ export default function LastPlays(props: Props) {
             </h2>
             <table className="-ml-4">
                 <tbody>
+                    {props.showNowPlaying && nowPlaying && 
+                        <tr className="group hover:bg-[--color-bg-secondary]">
+                            <td className="w-[18px] pr-2 align-middle" >
+                            </td>
+                            <td
+                                className="color-fg-tertiary pr-2 sm:pr-4 text-sm whitespace-nowrap w-0"
+                            >
+                                Now Playing
+                            </td>
+                            <td className="text-ellipsis overflow-hidden max-w-[400px] sm:max-w-[600px]">
+                                {props.hideArtists ? null : (
+                                    <>
+                                        <ArtistLinks artists={nowPlaying.artists} /> –{' '}
+                                    </>
+                                )}
+                                <Link
+                                    className="hover:text-[--color-fg-secondary]"
+                                    to={`/track/${nowPlaying.id}`}
+                                >
+                                    {nowPlaying.title}
+                                </Link>
+                            </td>
+                        </tr>
+                    }
                     {listens.map((item) => (
                         <tr key={`last_listen_${item.time}`} className="group hover:bg-[--color-bg-secondary]">
                             <td className="w-[18px] pr-2 align-middle" >

client/app/routes/Home.tsx

@@ -33,7 +33,7 @@ export default function Home() {
           <TopArtists period={period} limit={homeItems} />
           <TopAlbums period={period} limit={homeItems} />
           <TopTracks period={period} limit={homeItems} />
-          <LastPlays limit={Math.floor(homeItems * 2.7)} />
+          <LastPlays showNowPlaying={true} limit={Math.floor(homeItems * 2.7)} />
         </div>
       </div>
     </main>

engine/long_test.go

@@ -917,3 +917,60 @@ func TestManualListen(t *testing.T) {
 	require.NoError(t, err)
 	assert.Equal(t, http.StatusBadRequest, resp.StatusCode)
 }
+
+func TestNowPlaying(t *testing.T) {
+
+	t.Run("Submit Listens", doSubmitListens)
+
+	// no playing
+	resp, err := http.DefaultClient.Get(host() + "/apis/web/v1/now-playing")
+	require.NoError(t, err)
+	assert.Equal(t, http.StatusOK, resp.StatusCode)
+	var result handlers.NowPlayingResponse
+	require.NoError(t, json.NewDecoder(resp.Body).Decode(&result))
+	require.False(t, result.CurrentlyPlaying)
+
+	body := `{
+		"listen_type": "playing_now",
+		"payload": [
+			{
+				"track_metadata": {
+					"additional_info": {
+						"artist_mbids": [
+							"efc787f0-046f-4a60-beff-77b398c8cdf4"
+						],
+						"artist_names": [
+							"さユり"
+						],
+						"duration_ms": 275960,
+						"recording_mbid": "21524d55-b1f8-45d1-b172-976cba447199",
+						"release_group_mbid": "3281e0d9-fa44-4337-a8ce-6f264beeae16",
+						"release_mbid": "eb790e90-0065-4852-b47d-bbeede4aa9fc",
+						"submission_client": "navidrome",
+						"submission_client_version": "0.56.1 (fa2cf362)"
+					},
+					"artist_name": "さユり",
+					"release_name": "酸欠少女",
+					"track_name": "花の塔"
+				}
+			}
+		]
+	}`
+
+	req, err := http.NewRequest("POST", host()+"/apis/listenbrainz/1/submit-listens", strings.NewReader(body))
+	require.NoError(t, err)
+	req.Header.Add("Authorization", fmt.Sprintf("Token %s", apikey))
+	resp, err = http.DefaultClient.Do(req)
+	require.NoError(t, err)
+	respBytes, err := io.ReadAll(resp.Body)
+	require.NoError(t, err)
+	assert.Equal(t, `{"status": "ok"}`, string(respBytes))
+
+	// yes playing
+	resp, err = http.DefaultClient.Get(host() + "/apis/web/v1/now-playing")
+	require.NoError(t, err)
+	assert.Equal(t, http.StatusOK, resp.StatusCode)
+	require.NoError(t, json.NewDecoder(resp.Body).Decode(&result))
+	require.True(t, result.CurrentlyPlaying)
+	require.Equal(t, "花の塔", result.Track.Title)
+}