Добавление функции JS в ReactJS - SDK Spotify Web Playback - PullRequest
Новая
       6

Добавление функции JS в ReactJS - SDK Spotify Web Playback

0 голосов
/ 01 февраля 2019


Я пытаюсь внедрить SDK Spotify Web Playback в Node.js с интерфейсом ReactJS.Руководство разработчика Spotify предоставляет следующий код (сокращенно важный бит) для реализации SDK в HTML: 

<script src="https://sdk.scdn.co/spotify-player.js"></script>
<script>
      window.onSpotifyWebPlaybackSDKReady = () => {
          const token = '[My Spotify Web API access token]';
          const player = new Spotify.Player({
              name: 'Web Playback SDK Quick Start Player',
              getOAuthToken: cb => { cb(token); }
          });
          // Connect to the player!
          player.connect();
      };
</script>

Мне удалось запустить внешний сценарий с помощью response-load-script, но я не могу понять, как добавить обратный вызов window.onSpotifyWebPlaybackSDKReady, который вызывается, когда SDK готов.
Кто-нибудь может подсказать, как это лучше всего реализовать?

РЕШЕНИЕ: Спасибо Петру Шлагура за ответ.Код, который я нашел для работы, показан ниже. 

import React, { Component } from 'react';
import Script from 'react-load-script';
import './App.css';


class App extends Component {

  constructor(props) {
    super(props);
    this.handleLoadSuccess = this.handleLoadSuccess.bind(this);
    this.handleLoadFailure = this.handleLoadSuccess.bind(this);
    this.cb = this.cb.bind(this);
  }

  componentDidMount() {
    window.onSpotifyWebPlaybackSDKReady = () => {
      this.handleLoadSuccess();
    };
  }

  handleLoadSuccess() {
    this.setState({ scriptLoaded: true });
    console.log("Script loaded");
    const token = '[My Spotify Web API access token]';
    const player = new window.Spotify.Player({
      name: 'Web Playback SDK Quick Start Player',
      getOAuthToken: cb => { cb(token); }
    });
    console.log(player);

    // 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 => { console.log(state); });

    // Ready
    player.addListener('ready', ({ device_id }) => {
      console.log('Ready with Device ID', device_id);
    });

    // Not Ready
    player.addListener('not_ready', ({ device_id }) => {
      console.log('Device ID has gone offline', device_id);
    });

    // Connect to the player!
    player.connect();
  }

  cb(token) {
    return(token);
  }

  handleScriptCreate() {
    this.setState({ scriptLoaded: false });
    console.log("Script created");
  }

  handleScriptError() {
    this.setState({ scriptError: true });
    console.log("Script error");
  }

  handleScriptLoad() {
    this.setState({ scriptLoaded: true});
    console.log("Script loaded");
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Script
            url="https://sdk.scdn.co/spotify-player.js"
            onCreate={this.handleScriptCreate.bind(this)}
            onError={this.handleScriptError.bind(this)}
            onLoad={this.handleScriptLoad.bind(this)}
          />
        </header>
      </div>
    );
  }
}
export default App;

В итоге добавьте SDK Spotify Web Playback в качестве тега сценария в функцию рендеринга, а затем подключите обратный вызов onSpotifyWebPlaybackSDKReady в componentDidLoad, чтобы мы знали, что необходимые части будут обработаны/loaded.

1 Ответ

0 голосов
/ 01 февраля 2019

Я бы предложил запустить этот код в методе componentDidMount вашего компонента.Если вы используете рендеринг на стороне сервера, вам также следует проверить, присутствует ли окно (componentDidMount не должно запускаться на стороне сервера, но так безопаснее).

По своему опыту я обнаружил, что каждая операция наwindow, например, добавление прослушивателей событий и т. Д., Работает нормально, если оно запущено в componentDidMount.

Не забудьте удалить этот прослушиватель в componentWillUnmount, чтобы предотвратить утечки памяти.

...