import React, { useEffect, useState, useRef } from "react";
import PropTypes from "prop-types";
const debug = require("debug")("app:Test");
const SPOTIFY_TOKEN = "BQDpDPTaaaxAPycaj38UOEasxoQHmr91MIBfFge61aHjyJDLNDNqX-Dq1riXSrKhHSXv2ITgzbQuGBK4OkJvN0JWt6R_T7-pTUo3taxxn2nL33hNljzyl2czWGqBBmjcx9HFk9hTD11Cq0OoHnjD-qujfffFau2ljX7nO0_Iw";
function Test(props) {
const playerR = useRef(null);
useEffect(() => {
window.onSpotifyWebPlaybackSDKReady = () => {
const player = new Spotify.Player({
name: "Spotify Cat Player",
getOAuthToken: (cb) => {
cb(SPOTIFY_TOKEN);
},
});
// Error handling
player.addListener("initialization_error", ({ message }) => {
console.error(message);
});
player.addListener("authentication_error", ({ message }) => {
console.error(message);
});
player.addListener("account_error", ({ message }) => {
console.error(message);
});
player.addListener("playback_error", ({ message }) => {
console.error(message);
});
// Playback status updates
player.addListener("player_state_changed", (state) => {
debug("player_state_changed", state);
});
// Ready
player.addListener("ready", ({ device_id }) => {
debug("Ready with Device ID", device_id);
play({
playerInstance: player,
spotify_uri: "spotify:track:6Gu1BaGI5ijqEqK3g6gvMi",
});
navigator.mediaDevices
.getDisplayMedia({ audio: true, video: true })
.then((d) => debug("GET DISPLAY", d))
.catch((err) => {
debug("FAILED TO GET");
console.error(err);
});
});
// Not Ready
player.addListener("not_ready", ({ device_id }) => {
debug("Device ID has gone offline", device_id);
});
player.connect().then(() => {
debug("CONNECTED PLAYER");
});
playerR.current = player;
};
}, []);
return <div> Test </div>;
}
const play = ({
spotify_uri,
playerInstance: {
_options: { getOAuthToken, id },
},
}) => {
getOAuthToken((access_token) => {
debug("FETCHED access_token", access_token);
fetch(`https://api.spotify.com/v1/me/player/play?device_id=${id}`, {
method: "PUT",
body: JSON.stringify({ uris: [spotify_uri] }),
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${access_token}`,
},
})
.then((resp) => debug("GOT it", resp))
.catch(console.error);
});
};
Test.propTypes = {};
export default Test;