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,
  },

  watch: {
      // whenever question changes, this function will run
      album: function (newAlbum, oldAlbum) {
        if(newAlbum !== oldAlbum)
          this.collapsed = false;
      }
  },
  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);
  },

  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();
    },

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

    trackClicked: function(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);
    },


    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: var(--player-bg-color);/*rgba(var(--secondary-color), 0.8);*/
  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{
  cursor: pointer;
}

li:hover{
  color: var(--main-color);
}
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;
}



.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%;
}

progress::-moz-progress-bar{
  background-color: black;
}
progress{
  background-color: #rgba(200,200,200,0.5);
}
.button-wrap{
  margin-top: 100px;
  margin-left: calc(var(--one-dpi) / 2);
}
.button-wrap img{
    cursor: pointer;
}

span.track-number{
  width: 25px;
  display: inline-block;
}
span.track-title:before{
  content: " - ";
}

</style>