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