m-labelize/assets/js/player.js

export default class DedePlayer{

  constructor(container){
    this.currentAudio = null;
    this.playing = false;
    this.playerContainer = document.createElement("div");
    this.container = container;
    this.playerContainer.classList.add('dd-player');
    this.switcher = document.createElement("div");
    this.switcher.classList.add('dd-player-switch');
    this.playerContainer.classList.add('collapsed');
    //document.body.appendChild(this.container);
    document.body.appendChild(this.switcher);

    this.switcher.addEventListener('click', event => {
      this.playerContainer.classList.toggle('collapsed');
      this.switcher.classList.toggle('opened');
    });

    let title = document.createElement("h3");
    //title.innerHTML = playList.title;
    title.appendChild(document.createTextNode(this.container.dataset.title));

    this.addProgressBar();
//    this.container.appendChild(title);
    this.bindAudioTags();
    this.addPlayButton();
    //console.log(Math.floor(this.currentAudio.duration));

//    let playerLinks = document.querySelectorAll('.dd-player-link');
//    let self = this;
//    playerLinks.forEach(function(pl){
//      pl.addEventListener('click', (e) => {
//        self.container.classList.toggle('collapsed');
//        self.switcher.classList.toggle('opened');
//      })
//    });

    let wrap =  document.createElement("div");
    wrap.setAttribute('id', 'wrap-playlist')
    this.container.parentElement.appendChild(this.playerContainer);
    this.playerContainer.appendChild(title);
    this.playerContainer.appendChild(wrap);
    wrap.appendChild(this.container);

  };

  addProgressBar(){
    this.progressBar = document.createElement("progress");
    this.progressBar.setAttribute('value', 0);
    this.startTimeInfo = document.createElement('div');
    this.endTimeInfo = document.createElement('div');
    let progressWrap = document.createElement("div");
    this.startTimeInfo.innerHTML = "00:00";
    this.endTimeInfo.innerHTML = "00:00";
    progressWrap.appendChild(this.startTimeInfo);
    progressWrap.appendChild(this.progressBar);
    progressWrap.appendChild(this.endTimeInfo);
    this.startTimeInfo.classList.add('time-info');
    this.endTimeInfo.classList.add('time-info');
    progressWrap.classList.add('progress-wrap');
    this.playerContainer.append(progressWrap);
    let self = this;
    this.progressBar.addEventListener('click', (e) => {
      if(self.currentAudio){
        self.currentAudio.currentTime = Math.floor(((e.layerX - self.progressBar.offsetLeft) * self.currentAudio.duration) / self.progressBar.offsetWidth);
        self.progressBar.value = Math.floor(self.currentAudio.currentTime );
      }
    });


  }


  addPlayButton(){
    this.playButton = document.createElement("img");
    this.playButton.setAttribute('src','assets/images/play.png');
    this.playButton.setAttribute('id','play-button');
    let wrap =  document.createElement("div");
    wrap.append(this.playButton);
    this.container.append(wrap);
    let self = this;
    this.playButton.addEventListener('click', event => {
        self.playing = !self.playing;
        if(self.playing){
          self.currentAudio.play();
          self.currentAudio.parentElement.classList.add('playing');
          self.progressBar.setAttribute('max', Math.floor(self.currentAudio.duration));
          self.endTimeInfo.innerHTML = self.formatDuration(self.currentAudio.duration);
          this.playButton.setAttribute('src','assets/images/pause.png');
        }
        else{
          self.currentAudio.pause();
          self.currentAudio.parentElement.classList.remove('playing');
          this.playButton.setAttribute('src','assets/images/play.png');
        }
    })
  }

  bindAudioTags(){
    //let listElement =  document.createElement("ul");
    let liTags = this.container.querySelectorAll('li')
    let self = this;
    let i = 0;
    liTags.forEach(function(itemElement){
//      //let playBtn = document.createElement("img");
//      //playBtn.setAttribute('src','images/icons/play.png');
//      let itemElement =  document.createElement("li");
//      //itemElement.appendChild(playBtn);
//      itemElement.appendChild(document.createTextNode(track.title));
//      listElement.appendChild(itemElement);
//      let audioElement = document.createElement('audio');
//      audioElement.setAttribute('src',track.src);
      let audioTag = itemElement.querySelector('audio')

      audioTag.addEventListener('timeupdate', (event) => {
        self.audioTimeUpdate(audioTag);
      });
      audioTag.addEventListener('ended', (event) => {
        self.audioEnded(i);
      })

      //itemElement.appendChild(audioElement);
      audioTag.setAttribute('id','track-'+i);
      if(i === 0)
        self.currentAudio = audioTag;
      itemElement.addEventListener('click', event => {
        let items = self.container.getElementsByTagName('li');
        for(let i = 0; i < items.length; i++){
          items[i].classList.remove('playing');
        }
        if(self.currentAudio)
          self.currentAudio.pause();
        audioTag.play();
        self.playButton.setAttribute('src','assets/images/pause.png');
        self.playing = true;
        itemElement.classList.add('playing');
        self.currentAudio = audioTag;
        self.progressBar.setAttribute('max', Math.floor(self.currentAudio.duration));
        self.endTimeInfo.innerHTML = self.formatDuration(self.currentAudio.duration);
        self.progressBar.setAttribute('value', 0);
      });

    i++;

    });



  }

  audioTimeUpdate(audioElt){
    this.progressBar.value = Math.floor(audioElt.currentTime);
    this.startTimeInfo.innerHTML = this.formatDuration(audioElt.currentTime);
  }

  audioEnded(n){
    let audios = document.getElementsByTagName('audio');
    let next = n == audios.length - 1 ? 0 : n + 1;
    this.currentAudio.pause();
    this.currentAudio.currentTime = 0;
    this.currentAudio = document.getElementsByTagName('audio')[next];
    this.currentAudio.parentElement.click();
  }

  formatDuration(time){
    let s = parseInt(time% 60);
    let m = parseInt((time / 60) % 60);
    return (m < 10 ? ('0'+m) : m) + ':' +  (s < 10 ? ('0'+s) : s);
  }


}