Initial Last.fm UI implementation

server/server.go

@@ -15,6 +15,7 @@ import (
 	"github.com/navidrome/navidrome/log"
 	"github.com/navidrome/navidrome/model"
 	"github.com/navidrome/navidrome/ui"
+	"github.com/navidrome/navidrome/utils"
 )
 
 type Server struct {
@@ -84,6 +85,15 @@ func (s *Server) initRoutes() {
 		r.Post("/createAdmin", createAdmin(s.ds))
 	})
 
+	r.Get("/api/lastfm/link/status", func(w http.ResponseWriter, r *http.Request) {
+		rs := "false"
+		c := utils.ParamInt(r, "c", 0)
+		if (c == 4) {
+			rs = "true"
+		}
+		_, _ = w.Write([]byte(rs))
+	})
+
 	// Redirect root to UI URL
 	r.Get("/*", func(w http.ResponseWriter, r *http.Request) {
 		http.Redirect(w, r, s.appRoot+"/", http.StatusFound)

ui/src/personal/ScrobbleToggle.js

@@ -1,24 +1,63 @@
+import { useState } from 'react'
 import { useNotify, useTranslate } from 'react-admin'
-import { useDispatch, useSelector } from 'react-redux'
-import { setNotificationsState } from '../actions'
 import {
   FormControl,
   FormControlLabel,
   LinearProgress,
   Switch,
 } from '@material-ui/core'
-import { useState } from 'react'
+import { useInterval } from '../common'
-import { openInNewTab } from '../utils'
+import { baseUrl } from '../utils'
+
+const Progress = (props) => {
+  const { setLinked, setCheckingLink } = props
+  const translate = useTranslate()
+  const notify = useNotify()
+  let linkCheckDelay = 2000
+  let linkChecks = 5
+  // openInNewTab(
+  //   '/api/lastfm/link'
+  // )
+
+  const endChecking = (success) => {
+    linkCheckDelay = null
+    setCheckingLink(false)
+    if (success) {
+      notify(translate('Last.fm successfully linked!'), 'success')
+    } else {
+      notify(translate('Last.fm could not be linked'), 'warning')
+    }
+    setLinked(success)
+  }
+
+  useInterval(() => {
+    fetch(baseUrl(`/api/lastfm/link/status?c=${linkChecks}`))
+      .then((response) => response.text())
+      .then((response) => {
+        if (response === 'true') {
+          endChecking(true)
+        }
+      })
+      .catch((error) => {
+        endChecking(false)
+        throw new Error(error)
+      })
+
+    if (--linkChecks === 0) {
+      endChecking(false)
+    }
+  }, linkCheckDelay)
+
+  return linkChecks > 0 && <LinearProgress />
+}
 
 export const ScrobbleToggle = (props) => {
   const translate = useTranslate()
   const [linked, setLinked] = useState(false)
-
+  const [checkingLink, setCheckingLink] = useState(false)
-  const toggleScrobble = (event) => {
+  const toggleScrobble = () => {
     if (!linked) {
-      openInNewTab(
+      return setCheckingLink(true)
-        'https://www.last.fm/api/auth/?api_key=c2918986bf01b6ba353c0bc1bdd27bea'
-      )
     }
     setLinked(!linked)
   }
@@ -30,14 +69,16 @@ export const ScrobbleToggle = (props) => {
           <Switch
             id={'notifications'}
             color="primary"
-            checked={linked}
+            checked={linked || checkingLink}
-            disabled={linked}
+            disabled={checkingLink}
             onChange={toggleScrobble}
           />
         }
         label={<span>{translate('Scrobble to Last.FM')}</span>}
       />
-      {linked && <LinearProgress />}
+      {checkingLink && (
+        <Progress setLinked={setLinked} setCheckingLink={setCheckingLink} />
+      )}
     </FormControl>
   )
 }