feat: scrobbling

ui/src/player/Player.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { useAuthState } from 'react-admin'
+import { fetchUtils, useAuthState } from 'react-admin'
 import ReactJkMusicPlayer from 'react-jinke-music-player'
 import 'react-jinke-music-player/assets/index.css'
-import { syncQueue } from './queue'
+import { markScrobbled, syncQueue } from './queue'
 
 const defaultOptions = {
   bounds: 'body',
@@ -49,6 +49,26 @@ const Player = () => {
 
   const OnAudioProgress = (info) => {
     const progress = (info.currentTime / info.duration) * 100
+    if (isNaN(info.duration) || progress < 90) {
+      return
+    }
+    const item = queue.queue.find((item) => item.id === info.id)
+    if (item && !item.scrobbled) {
+      dispatch(markScrobbled(info.id, true))
+      fetchUtils.fetchJson(
+        `/rest/scrobble?u=admin&p=enc:73756e6461&f=json&v=1.8.0&c=NavidromeUI&id=${info.id}&submission=true`
+      )
+    }
+  }
+
+  const OnAudioPlay = (info) => {
+    console.log('AUDIOPLAY: ', info)
+    if (info.duration) {
+      dispatch(markScrobbled(info.id, false))
+      fetchUtils.fetchJson(
+        `/rest/scrobble?u=admin&p=enc:73756e6461&f=json&v=1.8.0&c=NavidromeUI&id=${info.id}&submission=false`
+      )
+    }
   }
 
   if (authenticated && options.audioLists.length > 0) {
@@ -57,6 +77,7 @@ const Player = () => {
         {...options}
         onAudioListsChange={OnAudioListsChange}
         onAudioProgress={OnAudioProgress}
+        onAudioPlay={OnAudioPlay}
       />
     )
   }

ui/src/player/queue.js

@@ -3,13 +3,14 @@ import 'react-jinke-music-player/assets/index.css'
 const PLAYER_ADD_TRACK = 'PLAYER_ADD_TRACK'
 const PLAYER_SET_TRACK = 'PLAYER_SET_TRACK'
 const PLAYER_SYNC_QUEUE = 'PLAYER_SYNC_QUEUE'
+const PLAYER_SCROBBLE = 'PLAYER_SCROBBLE'
 
 const mapToAudioLists = (item) => ({
   id: item.id,
   name: item.title,
   singer: item.artist,
-  cover: `/rest/getCoverArt.view?u=admin&p=enc:73756e6461&f=json&v=1.8.0&c=Jamstash&size=300&id=${item.id}`,
-  musicSrc: `/rest/stream.view?u=admin&p=enc:73756e6461&f=json&v=1.8.0&c=Jamstash&id=${
+  cover: `/rest/getCoverArt?u=admin&p=enc:73756e6461&f=json&v=1.8.0&c=NavidromeUI&size=300&id=${item.id}`,
+  musicSrc: `/rest/stream?u=admin&p=enc:73756e6461&f=json&v=1.8.0&c=NavidromeUI&id=${
     item.id
   }&ts=${new Date().getTime()}`
 })
@@ -29,6 +30,11 @@ const syncQueue = (data) => ({
   data
 })
 
+const markScrobbled = (id, submission = false) => ({
+  type: PLAYER_SCROBBLE,
+  data: { id, submission }
+})
+
 const playQueueReducer = (
   previousState = { queue: [], clear: true },
   { type, data }
@@ -42,9 +48,17 @@ const playQueueReducer = (
       return { queue: [mapToAudioLists(data)], clear: true }
     case PLAYER_SYNC_QUEUE:
       return { queue: data, clear: false }
+    case PLAYER_SCROBBLE:
+      const newQueue = previousState.queue.map((item) => {
+        return {
+          ...item,
+          scrobbled: item.scrobbled || (item.id === data.id && data.submission)
+        }
+      })
+      return { queue: newQueue, clear: false }
     default:
       return previousState
   }
 }
 
-export { addTrack, setTrack, syncQueue, playQueueReducer }
+export { addTrack, setTrack, syncQueue, markScrobbled, playQueueReducer }

ui/src/song/AddToQueueButton.js

@@ -10,7 +10,6 @@ const AddToQueueButton = ({ selectedIds }) => {
   const addToQueue = () => {
     selectedIds.forEach((id) => {
       dataProvider.getOne('song', { id }).then((response) => {
-        console.log(response.data)
         dispatch(addTrack(response.data))
       })
     })