finish with implementation. saving work

backend/src/routes/spotify.ts

@@ -17,7 +17,8 @@ const scope = `
  user-read-email
  streaming
  user-read-playback-state
- user-modify-playback-state`;
+ user-modify-playback-state
+ app-remote-control`;
 
 const router = express.Router();
 

frontend/package.json

@@ -10,6 +10,7 @@
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
+ "@types/spotify-api": "^0.0.22",
  "@types/spotify-web-playback-sdk": "^0.1.16",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",

frontend/src/SpotifyPlayer.tsx

@@ -1,14 +1,19 @@
 import React, { useEffect, useState } from "react"
 import { 
  SS_ACCESS_TOKEN_KEY, 
- SS_REFRESH_TOKEN_KEY, 
+ SS_REFRESH_TOKEN_KEY,
+ SS_DEVICE_ID_KEY,
  BACKEND_DEV_URL } from "./utils/constants";
 
-import { useSpotifyActions } from "./states/spotifyPlayerStore";
+import { useSpotifyActions, useSpotifyPlayer } from "./states/spotifyPlayerStore";
+import { getAvailableDevices } from "./utils/spotifyClient";
+import { usePlaybackActions } from "./states/playbackStore";
 
 export default function SpotifyPlayer() {
 
- const { setPlayer } = useSpotifyActions();
+ const { setPlayer, setIsCurrentDeviceActive } = useSpotifyActions();
+ const player : Spotify.Player | null = useSpotifyPlayer();
+ const { play, pause } = usePlaybackActions();
 
  const refreshToken = () => {
  const url = `${BACKEND_DEV_URL}api/spotify/refresh_token`;
@@ -67,6 +72,31 @@ export default function SpotifyPlayer() {
  });
  }
 
+ const getDevices = () => {
+
+ const accessToken = localStorage.getItem(SS_ACCESS_TOKEN_KEY);
+
+ if(!accessToken) {
+ console.log("Spotify Access Token Empty");
+ return;
+ }
+ getAvailableDevices(accessToken)
+ .then((data: SpotifyApi.UserDevicesResponse | null) => {
+ if(!data) {
+ return;
+ }
+
+ if(data.devices.length === 0) {
+ // No devices playing.
+ return;
+ }
+
+ data.devices.forEach((device : SpotifyApi.UserDevice) => {
+ console.log(device);
+ });
+ })
+ }
+
  const invokeSpotifyPlayer = () => {
  const accessToken = localStorage.getItem(SS_ACCESS_TOKEN_KEY);
 
@@ -84,23 +114,42 @@ export default function SpotifyPlayer() {
  });
 
  player.addListener('ready', ({ device_id } : any) => {
+ sessionStorage.setItem(SS_DEVICE_ID_KEY, device_id);
  console.log('Ready with Device ID', device_id);
  });
 
  player.addListener('not_ready', ({ device_id } : any) => {
  console.log('Device ID has gone offline', device_id);
  });
 
+ player.addListener('player_state_changed', (
+ playbackPlayer: Spotify.PlaybackState
+ ) => {
+ if(!playbackPlayer) return;
+ if(playbackPlayer.loading) return;
+ if(playbackPlayer.paused && playbackPlayer.playback_id.length === 0) return;
+
+ if(playbackPlayer.paused) {
+ // Invoke pause animation
+ pause()
+ // setIsCurrentDeviceActive(false);
+ console.log("Play from remote pause");
+ // pauseAnimation();
+ } else {
+ // Invoke play animation
+ play()
+ console.log("Play from remote play");
+ }
+
+ console.log(playbackPlayer);
+ })
+
  player.on('authentication_error', ({ message }) => {
  console.log('Failed to authenticate: Attempting to reauthenticate');
  refreshToken()
  });
 
- await player.connect().then((isConnected: boolean) => {
- if(isConnected) {
- player.activateElement();
- }
- });
+ await player.connect();
  // await player.pause();
  setPlayer(player);
  };
@@ -114,7 +163,8 @@ export default function SpotifyPlayer() {
 
  return(
  <div>
- {/* <button onClick={refreshToken}>Refresh</button> */}
+ <button onClick={getDevices}>Get Devices</button>
+ <button onClick={refreshToken}>Refresh</button>
  </div>
  );
 }

frontend/src/components/buttons/Button.tsx

@@ -31,7 +31,8 @@ interface ButtonProps {
  rotation: Array<number>
  actionHandler: () => void,
  modelPathAlternative?: string
- spring?: SpringProps
+ spring?: SpringProps,
+ toggleSwitch?: boolean
 }
 
 export default function Button({
@@ -42,6 +43,7 @@ export default function Button({
  actionHandler,
  modelPathAlternative = modelPath, // Optional. If none is passed in, the alternate path is the default
  spring = DEFAULT_SPRING_VALUES, // Optional
+ toggleSwitch = false // Optional
 } : ButtonProps) {
  const [isShrunk, setShrunk] = useState<boolean>(false);
  const [isHovering, setHovering] = useState<boolean>(false);
@@ -70,6 +72,14 @@ export default function Button({
  document.body.style.cursor = isHovering ? "pointer" : "auto"; // change pointer to finger when hovered
  }, [isHovering]);
 
+ useEffect(() => {
+ if(toggleSwitch === false) {
+ setShowDefaultModel(true);
+ } else {
+ setShowDefaultModel(false);
+ }
+ }, [toggleSwitch])
+
  return (
  <>
  {/* @ts-ignore: https://github.com/pmndrs/react-spring/issues/1515 */}

frontend/src/components/buttons/Buttons.tsx

@@ -48,6 +48,7 @@ export default function Buttons() {
  position={[0, -1, 4]}
  rotation={[0.5, 0.5, -0.25]}
  actionHandler={playClickHandler}
+ toggleSwitch={isPlaying}
  />
 
  <Button