mirrors/mStream
3
0
Fork 0
mirror of https://github.com/IrosTheBeggar/mStream.git synced 2025-10-27 07:31:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed seek bug

Browse Source
This commit is contained in:
IrosTheBeggar 2017-02-08 17:23:57 -05:00
parent 0d54bdcc7b
commit f6eb04bf86
2 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/js/mstream.vue-player-controls.js
View File

@ -98,15 +98,6 @@ var VUEPLAYER = function() {
}
},
methods: {
goToPosition: function(event){
console.log(event.target);
console.log(this.$el);
var relativeClickPosition = event.clientX - this.$el.getBoundingClientRect().left;
var totalWidth = this.$el.getBoundingClientRect().width;
var percentage = (relativeClickPosition / totalWidth) * 100;
// Set Player time
MSTREAM.seekByPercentage(percentage);
},
toggleRepeat: function(){
MSTREAM.toggleRepeat();
},
@ -117,6 +108,15 @@ var VUEPLAYER = function() {
});
// Button Events
document.getElementById( "progress-bar" ).addEventListener("click",function(event) {
var relativeClickPosition = event.clientX - this.getBoundingClientRect().left;
var totalWidth = this.getBoundingClientRect().width;
var percentage = (relativeClickPosition / totalWidth) * 100;
// Set Player time
MSTREAM.seekByPercentage(percentage);
});
// Button Events
document.getElementById( "next-button" ).addEventListener("click",function() {
MSTREAM.nextSong();

6
public/mstream.html
View File

@ -273,7 +273,7 @@
<img class="mext-image center" src="/public/img/next-white.svg">
</div>
<div v-on:click="goToPosition($event)" id="progress-bar" class="progress-bar">
<div id="progress-bar" class="progress-bar">
<div class="titlebar">
<div id="title-text" class="title-text">{{currentSongText}}</div>
</div>
@ -284,11 +284,11 @@
<div class="duration-text">{{showTime}}</div>
<div class="aux-button-group">
<!-- For precise control we have to have the svg code embedded in the html -->
<!-- <img v-on:click="toggleRepeat" v-bind:class="{ 'aux-button-active': playerStats.shouldLoop }" class="repeat-button" src="/public/img/repeat-white.svg"> -->
<!-- <img class="shuffle-button" src="/public/img/shuffle-white.svg"> -->
<svg v-on:click="toggleRepeat" v-bind:class="{ 'aux-button-active': playerStats.shouldLoop }" class="repeat-button" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="25" height="25">
<path d="M 17 2 L 17 5 L 6 5 C 4.3 5 3 6.3 3 8 L 3 14.8125 L 5 13.1875 L 5 8 C 5 7.4 5.4 7 6 7 L 17 7 L 17 10 L 22 6 L 17 2 z M 21 9.1875 L 19 10.8125 L 19 16 C 19 16.6 18.6 17 18 17 L 7 17 L 7 14 L 2 18 L 7 22 L 7 19 L 18 19 C 19.7 19 21 17.7 21 16 L 21 9.1875 z"/>
</svg>
<!-- <img v-on:click="toggleRepeat" v-bind:class="{ 'aux-button-active': playerStats.shouldLoop }" class="repeat-button" src="/public/img/repeat-white.svg"> -->
<!-- <img class="shuffle-button" src="/public/img/shuffle-white.svg"> -->
<svg class="shuffle-button" v-on:click="toggleShuffle" v-bind:class="{ 'aux-button-active': playerStats.shuffle }" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="25" height="25" >
<path d="M 17 2 L 17 5 L 14.1875 5 C 13.0875 5 12 5.5875 11.5 6.6875 L 6.59375 16.5 C 6.49375 16.8 6.1125 17 5.8125 17 L 2 17 L 2 19 L 5.8125 19 C 6.9125 19 8 18.4125 8.5 17.3125 L 13.40625 7.5 C 13.50625 7.2 13.8875 7 14.1875 7 L 17 7 L 17 10 L 22 6 L 17 2 z M 2 5 L 2 7 L 5.8125 7 C 6.1125 7 6.4875 7.19375 6.6875 7.59375 L 8.40625 10.90625 L 9.5 8.6875 L 8.5 6.6875 C 7.9 5.5875 6.9125 5 5.8125 5 L 2 5 z M 11.59375 13.09375 L 10.5 15.3125 L 11.5 17.3125 C 12 18.3125 12.9875 19 14.1875 19 L 17 19 L 17 22 L 22 18 L 17 14 L 17 17 L 14.1875 17 C 13.8875 17 13.5125 16.80625 13.3125 16.40625 L 11.59375 13.09375 z"/>
</svg>