webbandd/src/components/Player.vue

<template>
    <div v-if="!collapsed" class="player">
      <div class="progress-wrap">
        <div class="time-info">
            {{audio ? formatDuration(audio.currentTime) : "00:00"}}
        </div>
        <progress :value="audioPosition" :max="audio ? Math.floor(audio.duration): 0"></progress>
        <div class="time-info">
          {{audio ? formatDuration(audio.duration) : "00:00"}}
        </div>
      </div>
      <h3>{{album.title}}</h3>
      <ul>
        <li
          v-for="(track, index) in album.tracks"
          v-on:click="trackClicked('track-'+index)"
          v-bind:key="index+'-'+track.title"
          v-bind:class="{ active: audio && audio.getAttribute('id') === 'track-'+index }">
          <span class="track-number">{{index + 1}}</span>
          <span class="track-title">{{track.title.trim()}}</span>
          <audio v-on:timeupdate="updateAudioPosition()" v-bind:src="track.file" v-bind:id="'track-'+ index"></audio>
        </li>
      </ul>
      <div class="button-wrap">
        <img v-if="playing" v-on:click="pause()" src="../assets/images/pause.png" id="play-button">
        <img v-else v-on:click="play()" src="../assets/images/play.png" id="play-button">
      </div>
      <div class="player-switch opened" v-on:click="toggle()"></div>
   </div>
   <div v-else class="player-switch" v-on:click="toggle()">
   </div>
</template>

<script>


export default {
  name: 'Player',
  props: {
    album: Object,
  },

  data: function () {
   return {
     switcher : null,
     collapsed: true,
     playing: false,
     audioPosition: 0,
     audio : null,
     startTimeInfo: "00:00",
     endTimeInfo: "00:00",
     playerImage: '../assets/images/play.png'
   }
 },
  updated() {
    //this.bindAudioTags();
  },

  mounted(){
    this.switcher = document.getElementsByClassName('player-switch')[0];
    document.body.append(this.switcher);

    // this.currentAudio = null;
    // this.playing = false;
    // this.playerContainer = document.createElement("div");
    // this.container = document.querySelector('#player')
    // 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.switcher);
    //
    // this.switcher.addEventListener('click', () => {
    //   this.playerContainer.classList.toggle('collapsed');
    //   this.switcher.classList.toggle('opened');
    // });
    //
    //
    // this.addProgressBar();
    // this.bindAudioTags();
    // this.addPlayButton();
    //
    // let wrap =  document.createElement("div");
    // wrap.setAttribute('id', 'wrap-playlist')
    // this.container.parentElement.appendChild(this.playerContainer);
    // this.playerContainer.appendChild(wrap);
    // wrap.appendChild(this.container);

  },

  methods: {

    toggle : function(){
        // this.playerContainer.classList.toggle('collapsed');
        this.collapsed = !this.collapsed;
        this.switcher.classList.toggle('opened');
    },

    play: function(){
      if(!this.audio)
        this.audio = document.querySelectorAll('audio')[0];
      this.playing = true;
      this.audio.play();
      // if(this.playing){
      //   this.audio.play();
      //   // this.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','./images/pause.png');
      // }
      // else{
      //   this.audio.pause();
      //   // self.currentAudio.parentElement.classList.remove('playing');
      //   // this.playButton.setAttribute('src','./images/play.png');
      // }
    },

    pause: function(){
      this.playing = false;
      this.audio.pause();
    },

    trackClicked: function(audioId){
      //let track = document.getElementById(audioId);
      if(this.playing){
          this.pause();
          this.audio = document.getElementById(audioId);
      }
      else{
          this.audio = document.getElementById(audioId);
      }
      this.playing = true;
      this.audio.play();
    },

    updateAudioPosition: function(){
      this.audioPosition = Math.floor(this.audio.currentTime);
    },

    // addProgressBar: function(){
    //   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: function(){
    //   this.playButton = document.createElement("img");
    //   this.playButton.setAttribute('src','./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', () => {
    //       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','./images/pause.png');
    //       }
    //       else{
    //         self.currentAudio.pause();
    //         self.currentAudio.parentElement.classList.remove('playing');
    //         this.playButton.setAttribute('src','./images/play.png');
    //       }
    //   })
    // },

    // bindAudioTags: function(){
    //   let liTags = this.container.querySelectorAll('li')
    //   let self = this;
    //   let i = 0;
    //   liTags.forEach(function(itemElement){
    //     let audioTag = itemElement.querySelector('audio')
    //     if(audioTag){
    //       audioTag.addEventListener('timeupdate', () => {
    //         self.audioTimeUpdate(audioTag);
    //       });
    //       audioTag.addEventListener('ended', () => {
    //         self.audioEnded(i);
    //       })
    //
    //       //itemElement.appendChild(audioElement);
    //       audioTag.setAttribute('id','track-'+i);
    //       if(i === 0)
    //         self.currentAudio = audioTag;
    //       itemElement.addEventListener('click', () => {
    //         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','./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: function(audioElt){
    //   this.progressBar.value = Math.floor(audioElt.currentTime);
    //   this.startTimeInfo.innerHTML = this.formatDuration(audioElt.currentTime);
    // },
    //
    // audioEnded: function(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: function(time){
      let s = parseInt(time% 60);
      let m = parseInt((time / 60) % 60);
      return (m < 10 ? ('0'+m) : m) + ':' +  (s < 10 ? ('0'+s) : s);
    }
  }
}
</script>

<style>

*{
  --one-dpi: 72px;
  --dd-blue: rgb(0,42,255);
}


.player{
  width: 25vw;
  height: 100vh;
  position:fixed;
  top: 0px;
  background-color: white;
  right:0px;
  color: black;
  padding-top:  var(--one-dpi);
  padding-bottom:  var(--one-dpi);
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
}

.collapsed{
  display: none;
}

.player-switch{
  position :fixed;
  bottom: 0;
  right: 0;
  width: var(--one-dpi);
  height:var(--one-dpi);
  background-color: white;
  cursor: pointer;
  z-index:10;
}

.player-switch.opened{
  background-color: var(--dd-blue);
}

li.active{
  font-weight: bold;
}

.player h3 {
  font-size: 1rem;
  margin: calc(var(--one-dpi) / 2);
}

.player ul {
  margin-left : calc(var(--one-dpi) / 2);
  color: var(--dd-blue);
  font-size: 1.5rem;
  list-style-type : none;
}
/*
.dd-player ul li img{
  width:24px;
  height:24px;
  margin-right: 12px;
}

.playing{
  font-weight: bold;
  color : black;
}
*/
.progress-wrap{
  display:flex;
  width: 100%;
  justify-content: space-around;

}
.progress-wrap .time-info{
  font-size:0.66rem;
  display: flex;
  justify-content: center;
}

progress{
  display: inline;
  height: 10px;
  width:66%;
}

/*
#play-button{
  max-width: calc(var(--one-dpi) / 2);
  max-height: calc(var(--one-dpi) / 2);
  margin: calc(var(--one-dpi) / 2);
}
*/
progress::-moz-progress-bar{
  background-color: black;
}
progress{
  background-color: #rgba(200,200,200,0.5);
}
.button-wrap{
  margin-top: 100px;
}
/*
.dd-player ul li, #play-button{
  cursor : pointer;
}

#wrap-playlist{
  flex: 1;
}
*/
span.track-number{
  width: 25px;
  display: inline-block;
}
span.track-title:before{
  content: " - ";
}

</style>