add mock jukeboxes, improve spotify config for dev mode

src/apps/admin/pages/Overview.tsx

@@ -8,6 +8,7 @@ import Disk from 'src/assets/svg/Disk.svg?react'
 import { mockTrack } from 'src/mock'
 
 import { useSelector } from 'react-redux'
+import { REACT_ENV, SPOTIFY_PLAYER_NAME } from 'src/config'
 import { SpotifyPlayerContext } from 'src/context'
 import { selectCurrentTrack, selectNextTracks } from 'src/store/track'
 import { Track } from './Track'
@@ -16,36 +17,38 @@ export const Overview = () => {
   const [song, setSong] = useState('')
   const [author, setAuthor] = useState('')
   // const { currentTrack } = useContext(SpotifyPlayerContext)
-  const currentTrack = useSelector(selectCurrentTrack)
+  const storeCurrentTrack = useSelector(selectCurrentTrack)
   const queuedTracks = useSelector(selectNextTracks)
   const [currentTrackImage, setCurrentTrackImage] = useState('')
   const songTitleRef = useRef<HTMLHeadingElement>(null)
+
   const {
-    nextTracks: nextPlayerTracks,
+    nextTracks: playerNextTracks,
+    currentTrack: playerCurrentTrack,
     isActive,
     isConnected,
     connectDevice,
   } = useContext(SpotifyPlayerContext)
 
   useEffect(() => {
-    if (!currentTrack) {
+    if (!playerCurrentTrack) {
       setSong('No song Playing')
       setAuthor('No Author')
       setCurrentTrackImage(track?.album?.images[0].url)
     } else {
-      setSong(currentTrack.name)
+      setSong(playerCurrentTrack.name)
       setAuthor(
-        currentTrack.artists
+        playerCurrentTrack.artists
           .map((artist: { name: any }) => artist.name)
           .join(', '),
       )
-      setCurrentTrackImage(currentTrack?.album?.images[0].url)
+      setCurrentTrackImage(playerCurrentTrack?.album?.images[0].url)
 
-      if (currentTrack.name.length > 15) {
+      if (playerCurrentTrack.name.length > 15) {
         songTitleRef.current?.classList.add('song-title--small')
       }
     }
-  }, [currentTrack])
+  }, [playerCurrentTrack])
 
   const track = mockTrack
   return (
@@ -85,10 +88,10 @@ export const Overview = () => {
                   ))}
                 </>
               )) ||
-                (nextPlayerTracks.length > 0 && (
+                (playerNextTracks.length > 0 && (
                   <>
                     <h2 className="song-queue__title">Next Up</h2>
-                    {nextPlayerTracks.map((track) => (
+                    {playerNextTracks.map((track) => (
                       <Track track={track} />
                     ))}
                   </>
@@ -99,24 +102,21 @@ export const Overview = () => {
                     {(isConnected && !isActive && (
                       <>
                         <p>
-                          Your account is connected to Spotify, click below to
-                          transfer playback to this browser.
-                        </p>
-                        <p>
-                          <button
-                            className="button-solid"
-                            onClick={connectDevice}
-                          >
-                            Connect
-                          </button>
+                          Your account is connected to Spotify, transfer
+                          playback to "{SPOTIFY_PLAYER_NAME}" to get started.
                         </p>
+                        {REACT_ENV !== 'dev' && (
+                          <p>
+                            <button
+                              className="button-solid"
+                              onClick={connectDevice}
+                            >
+                              Connect
+                            </button>
+                          </p>
+                        )}
                       </>
-                    )) || (
-                      <p>
-                        Connect the jukebox to your spotify account to get
-                        started.
-                      </p>
-                    )}
+                    )) || <p>Connect your Spotify account to get started.</p>}
                   </>
                 )}
             </ol>

src/context/PlayerContext.tsx

@@ -90,14 +90,18 @@ export const SpotifyPlayerProvider = (props: {
     }
   }, [token])
 
+  useEffect(() => {
+    console.log('Current track:', currentTrack)
+  }, [currentTrack])
+
   const onPlayerStateChange = (state?: Spotify.PlaybackState) => {
     if (!state) {
       return
     }
     const { current_track: spotifyTrack } = state.track_window
 
     setCurrentTrack((prev) => {
-      if (prev?.id !== spotifyTrack?.id && !paused) {
+      if ((prev?.id !== spotifyTrack?.id && !paused) || !prev) {
         debounce(() => {
           onTrackChange(spotifyTrack, prev ?? undefined)
         })

src/mock/index.ts

@@ -1,2 +1,4 @@
+export * from './mock-clubs'
+export * from './mock-jukeboxes'
 export * from './mock-track'
 export * from './mock-user'

src/mock/mock-jukeboxes.ts

@@ -0,0 +1,16 @@
+export const mockJukeboxes: IJukebox[] = [
+  {
+    id: 0,
+    name: 'Club 1 Jukebox',
+    club_id: 0,
+    links: [
+      { id: 0, type: 'spotify', email: '[email protected]', active: true },
+    ],
+  },
+  {
+    id: 1,
+    name: 'Club 2 Jukebox',
+    club_id: 1,
+    links: [],
+  },
+]

src/network/network.ts

@@ -1,7 +1,7 @@
 import { type AxiosRequestConfig } from 'axios'
 import { REACT_ENV } from 'src/config'
 import { httpRequest } from 'src/lib'
-import { mockUser } from 'src/mock'
+import { mockJukeboxes, mockUser } from 'src/mock'
 import {
   err,
   NetworkLoginError,
@@ -257,7 +257,7 @@ export class Network {
   public async sendGetJukeboxes(): Promise<IJukebox[]> {
     if (this.env === 'dev') {
       await sleep(1000)
-      return []
+      return mockJukeboxes
     }
 
     const res = await this.sendRequest(this.routes.jukebox.list)