From bbce16b4d2cba04171bcda8f8ff69e6c0acdfc97 Mon Sep 17 00:00:00 2001 From: Muhammed Erdem Date: Tue, 13 Aug 2019 17:45:50 +0300 Subject: [PATCH] player controls changes --- css/main.css | 1 + css/main.css.map | 2 +- css/main.scss | 1 + scripts/script.js | 73 ++++++++++++++++++++++++++--------------------- 4 files changed, 44 insertions(+), 33 deletions(-) diff --git a/css/main.css b/css/main.css index 864e78d..6747698 100644 --- a/css/main.css +++ b/css/main.css @@ -133,6 +133,7 @@ body { .progress { width: 100%; margin-top: -15px; + user-select: none; } .progress__top { display: flex; diff --git a/css/main.css.map b/css/main.css.map index 6955250..697fe5b 100644 --- a/css/main.css.map +++ b/css/main.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EAEA;EACA;;AAIA;EACE;;;AAMV;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;;AACA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;;AAMJ;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAKF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA","file":"main.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EAEA;EACA;;AAIA;EACE;;;AAMV;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;;AAMJ;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAKF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA","file":"main.css"} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index a86ab18..7cfd0f8 100644 --- a/css/main.scss +++ b/css/main.scss @@ -146,6 +146,7 @@ body { .progress { width: 100%; margin-top: -15px; + user-select: none; &__top { display: flex; align-items: flex-end; diff --git a/scripts/script.js b/scripts/script.js index b0a959f..3d03c73 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -14,65 +14,75 @@ new Vue({ isTimerPlaying: false, tracks: [ { - name: "The Upside 1", - artist: "Lindsey Stirling", - cover: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/1.jpg", - source: "https://customhtml5video.000webhostapp.com/audio.mp3", + name: "Mekanın Sahibi", + artist: "Norm Ender", + cover: + "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/1.jpg", + source: + "https://raw.githubusercontent.com/muhammederdem/mini-player/master/mp3/1.mp3", favorited: false }, { name: "The Upside 2", artist: "Lindsey Stirling", - cover: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/2.jpg", + cover: + "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/2.jpg", source: "https://customhtml5video.000webhostapp.com/audio.mp3", favorited: true }, { name: "The Upside 3", artist: "Lindsey Stirling", - cover: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/3.jpg", + cover: + "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/3.jpg", source: "https://customhtml5video.000webhostapp.com/audio.mp3", favorited: false }, { name: "The Upside 4", artist: "Lindsey Stirling", - cover: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/4.jpg", + cover: + "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/4.jpg", source: "https://customhtml5video.000webhostapp.com/audio.mp3", favorited: false }, { name: "The Upside 5", artist: "Lindsey Stirling", - cover: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/5.jpg", + cover: + "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/5.jpg", source: "https://customhtml5video.000webhostapp.com/audio.mp3", favorited: true }, { name: "The Upside 6", artist: "Lindsey Stirling", - cover: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/6.jpg", + cover: + "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/6.jpg", source: "https://customhtml5video.000webhostapp.com/audio.mp3", favorited: false }, { name: "The Upside 7", artist: "Lindsey Stirling", - cover: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/7.jpg", + cover: + "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/7.jpg", source: "https://customhtml5video.000webhostapp.com/audio.mp3", favorited: true }, { name: "The Upside 8", artist: "Lindsey Stirling", - cover: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/8.jpg", + cover: + "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/8.jpg", source: "https://customhtml5video.000webhostapp.com/audio.mp3", favorited: false }, { name: "The Upside 9", artist: "Lindsey Stirling", - cover: "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/9.jpg", + cover: + "https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/9.jpg", source: "https://customhtml5video.000webhostapp.com/audio.mp3", favorited: false } @@ -117,9 +127,6 @@ new Vue({ }, updateBar(x) { let progress = this.$refs.progress; - //calculate drag position - //and update video currenttime - //as well as progress bar let maxduration = this.audio.duration; let position = x - progress.offsetLeft; let percentage = (100 * position) / progress.offsetWidth; @@ -139,43 +146,45 @@ new Vue({ this.audio.pause(); this.updateBar(e.pageX); }, - nextTrack () { - console.log('next'); + prevTrack() { this.transitionName = "scale-in"; this.isShowCover = false; - if (this.currentTrackIndex < this.tracks.length - 1) { - this.currentTrackIndex++; + if (this.currentTrackIndex > 0) { + this.currentTrackIndex--; } else { - this.currentTrackIndex = 0; + this.currentTrackIndex = this.tracks.length - 1; } this.currentTrack = this.tracks[this.currentTrackIndex]; this.resetPlayer(); }, - prevTrack () { - console.log('prev'); + nextTrack() { this.transitionName = "scale-out"; this.isShowCover = false; - if (this.currentTrackIndex > 0) { - this.currentTrackIndex--; + if (this.currentTrackIndex < this.tracks.length - 1) { + this.currentTrackIndex++; } else { - this.currentTrackIndex = this.tracks.length - 1; + this.currentTrackIndex = 0; } this.currentTrack = this.tracks[this.currentTrackIndex]; this.resetPlayer(); }, - resetPlayer () { - this.audio.pause(); + resetPlayer() { this.barWidth = 0; this.circleLeft = 0; this.audio.currentTime = 0; this.audio.src = this.currentTrack.source; - this.isTimerPlaying = true; setTimeout(() => { - this.audio.play(); + if(this.isTimerPlaying) { + this.audio.play(); + } else { + this.audio.pause(); + } }, 300); }, - favorite () { - this.tracks[this.currentTrackIndex].favorited = !this.tracks[this.currentTrackIndex].favorited + favorite() { + this.tracks[this.currentTrackIndex].favorited = !this.tracks[ + this.currentTrackIndex + ].favorited; } }, created() { @@ -190,8 +199,8 @@ new Vue({ vm.generateTime(); }; this.audio.onended = function() { - vm.isTimerPlaying = false; vm.nextTrack(); + this.isTimerPlaying = true; }; } });