JSFiddle - React, Tailwind, and code Playground

by techunter

HTML

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div class="main-container">dddd</div>

CSS

* {
  font-family: 'Montserrat', sans-serif;
  color: #ffffff;
  font-size: 14px;
  overflow: hidden;
}

JavaScript

const fields = {
  "clientId": {
    "type": "text",
    "label": "Client ID",
    "value": "98d643a69b73435db50e23ff2b36521a"
  },
  "clientSecret": {
    "type": "password",
    "label": "Client Secret",
    "value": "4bd6419ed714485ca0544a5b95bd254d"
  },
  "pollTimer": {
    "type": "number",
    "label": "Poll Frequency in millis",
    "value": 5000
  },
  "noTrack": {
    "type": "text",
    "label": "No track text",
    "value": "No track"
  }
};


/*just for jsfiddle delete next line*/
const obj = {
  detail: {
    fieldData: fields
  }
};
const params = obj.detail.fieldData;
let token;


function getCurrentlyPlaying(token) {

  const noTrackText = params.noTrack || 'No track';
  // Make a request for a user with a given ID
  axios.get('https://api.spotify.com/v1/me/player/currently-playing', {
      headers: {
        Authorization: `Bearer ${token}`
      }
    })
    .then(function(response) {
      if (response.is_playing)
        $('.main-container').text(`${response.item.name} - ${response.artists[0].name}`);
      else
        $('.main-container').text(noTrackText);
    })
    .catch(function(error) {
      // handle error
      console.log(error);
    });
}

function refreshToken() {
  const formParam = new URLSearchParams();
  formParam.append('grant_type', 'client_credentials');
  return axios.post('https://accounts.spotify.com/api/token', formParam, {
  crossDomain: false,
    headers: {
    "Access-Control-Allow-Origin": "*",
      "Content-Type": 'application/x-www-form-urlencoded',
      Authorization: `Basic ${btoa(params.clientId+':'+params.clientSecret)}`
    }
  }).then((response) => {
    /*
  {
   "access_token": "NgCXRKc...MzYjw",
   "token_type": "bearer",
   "expires_in": 3600,
}
  */
    token = response.access_token;
    setTimeout(refreshToken, Math.max(response.expires_in, 3600) * 1000);
  }).catch((error) => {
    console.error(error);
    if (timer) clearInterval(timer);
  });
}

//window.addEventListener('onWidgetLoad',...