player.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { get, ready } from 'scriptjs';
import { AuthService } from '../core/services/auth.service';
import { SpotifyService } from '../core/services/spotify.service';
declare var Spotify:any;

@Component({
  selector: 'app-player',
  templateUrl: './player.component.html',
  styleUrls: ['./player.component.scss']
})
export class PlayerComponent implements OnInit, OnDestroy {
  loadAPI: any;
  player:any;
  device_id:string;
  player_state:any;
  player_state_interval:any;
  devices:any;
  devicesForm:any;

  constructor(
    private authService: AuthService,
    private spotify: SpotifyService,
    private formBuilder: FormBuilder
  ) {
    this.device_id = '';
   }

  ngOnInit(): void {

    (<any>window).onSpotifyWebPlaybackSDKReady = this.connectPlayer.bind(this);

    this.loadAPI = new Promise((resolve) => {
      console.log('resolving promise...');
      this.loadScript();
      resolve("Complete")
    });

    this.loadAPI.then((arg:any)=>{
      console.log(arg);
      console.log("Script loaded");
    })

    this.loadPlayerState();

    this.player_state_interval = setInterval(() => {
      this.loadPlayerState()
    }, 5000);

    let initial_values = {
      device:['', Validators.required]
    }

    this.devicesForm = this.formBuilder.group(initial_values)

    this.getAvailableDevices();
  }

  ngOnDestroy(){
    clearInterval(this.player_state_interval);
  }

  loadScript() {
    console.log('preparing to load...')
    let node = document.createElement('script');
    node.src = "https://sdk.scdn.co/spotify-player.js";
    node.type = 'text/javascript';
    node.async = true;
    document.getElementsByTagName('head')[0].appendChild(node);
  }

  connectPlayer(){

    const token = this.authService.getToken();
    this.player = new Spotify.Player({
      name: 'Web Playback SDK Quick Start Player',
      getOAuthToken: (cb:any) => { cb(token); },
      volume: 0.5
    });

    console.log(this.player);
    console.log("onSpotifyWebPlaybackSDKReady");

    // ready listener
      this.player.addListener('ready', this.ready.bind(this));

    // not_ready listener
      this.player.addListener('not_ready', this.not_ready.bind(this));


    // initialization_error listener
      this.player.addListener('initialization_error', this.initialization_error.bind(this));


    // authentication_error listener
      this.player.addListener('authentication_error', this.authentication_error.bind(this));

    // account_error listener
      this.player.addListener('account_error', this.account_error.bind(this));

    // playback_error listener
      this.player.addListener('playback_error', this.playback_error.bind(this));

    this.player.connect().then((success:any) => {
      console.log(success);
      console.log("Player connected!");
    });
  }

  isListenerExists(listener:string):boolean{

    console.log(this.player._eventListeners['ready'].length);

    if(this.player._eventListeners['ready'].length > 0){
      return true;
    }else{
      return false;
    }

  }

  ready(device_id:string){
    this.device_id = device_id;
    console.log("ready Listener");
  }

  not_ready(device_id:string){
    this.device_id = device_id;
    console.log("not_ready Listener");
  }

  // error listeners
  initialization_error(message:any){
    console.log("initialization_error Listener")
    console.log(message);
  }

  authentication_error(message:any){
    console.log("authentication_error Listener")
    console.log(message);
  }

  account_error(message:any){
    console.log("account_error Listener")
    console.log(message);
  }

  playback_error(message:any){
    console.log("playback_error Listener")
    console.log(message);
  }

  getCurrentState(){
    this.player.getCurrentState().then((state:any) => {
      console.log("Current State: ", state);
    })
  }

  togglePlay(){

    // if listening on local Web SDK player
    if(this.device_id === this.player_state.device_id){

      console.log("Toggle Play for Device: ",this.device_id);
      this.player.togglePlay();

    }else{
    // else (listening on other devices)

      if(!this.player_state?.is_playing){
        // play

        this.spotify.perform("endpoint-start-a-users-playback").subscribe(
          (message:any) => {
            console.log(message);
          }
        )
      }else{
        // stop

        this.spotify.perform("endpoint-pause-a-users-playback").subscribe(
          (message:any) => {
            console.log(message);
          }
        )
      }

    }


  }

  playPreviousTrack(){

    // if listening on local Web SDK player
    if(this.device_id === this.player_state.device_id){

      this.player.previousTrack().then(() => {
        console.log("Playing previous track");
      })

    }else{
    // else (listening on other devices)

      this.spotify.perform("endpoint-skip-users-playback-to-previous-track").subscribe(
        (message:any) => {
          console.log(message);
        }
      )

    }

  }

  playNextTrack(){

    // if listening on local Web SDK player
    if(this.device_id === this.player_state.device_id){

      this.player.nextTrack().then(() => {
        console.log("Playing next track");
      })

    }else{
    // else (listening on other devices)

      this.spotify.perform("endpoint-skip-users-playback-to-next-track").subscribe(
        (message:any) => {
          console.log(message);
        }
      )

    }


  }

  incrementVolume(){
    console.log("Incrementing volume by 1%")
  }

  decrementVolume(){
    console.log("decrementing volumne by 1%")
  }

  loadPlayerState(){
    this.spotify.perform("endpoint-get-information-about-the-users-current-playback").subscribe(
      (player:any) => {
        console.log(player);
        this.player_state = player;
      }
    )

  }

  getSongProgress(){
    if(!this.player_state){
      return 0;
    }else{
      let percent = Math.trunc((this.player_state.progress_ms/this.player_state.item.duration_ms) * 100);

      if(!Number.isNaN(percent)){
        return percent;
      }else{
        return 0;
      }
    }
  }

  getAvailableDevices(){
    this.spotify.perform("endpoint-get-a-users-available-devices").subscribe(
      {
        next: (devices:any) => {
          this.devices = devices.devices;
          console.log(this.devices);
        }
      }
    )
  }

}