janishutz/MusicPlayer
1
0
Fork 0
mirror of https://github.com/janishutz/MusicPlayerV2.git synced 2025-11-25 13:04:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix progress bar

Browse Source
This commit is contained in:
Janis Hutz
2023-10-29 19:11:50 +01:00
parent 07d3258161
commit eaf24e4dee
3 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/fancyView.vue
View File

@@ -8,7 +8,8 @@
<div style="margin-right: auto;">{{ playbackPosBeautified }}</div> <div style="margin-right: auto;">{{ playbackPosBeautified }}</div>
<div>{{ durationBeautified }}</div> <div>{{ durationBeautified }}</div>
</div> </div>
<sliderView :active="audioLoaded" :position="playbackPos" :duration="song.duration" @pos="( p ) => { setPos( p ) }"></sliderView> <sliderView :active="true" :position="playbackPos" :duration="song.duration" @pos="( p ) => { setPos( p ) }"
name="fancy"></sliderView>
</div> </div>
</div> </div>
</template> </template>

3
frontend/src/components/player.vue
View File

@@ -32,7 +32,8 @@
<div style="margin-right: auto;">{{ playbackPosBeautified }}</div> <div style="margin-right: auto;">{{ playbackPosBeautified }}</div>
<div>{{ durationBeautified }}</div> <div>{{ durationBeautified }}</div>
</div> </div>
<sliderView :active="audioLoaded" :position="playbackPos" :duration="playingSong.duration" @pos="( p ) => { setPos( p ) }"></sliderView> <sliderView :active="audioLoaded" :position="playbackPos" :duration="playingSong.duration" @pos="( p ) => { setPos( p ) }"
name="player"></sliderView>
</div> </div>
<FancyView v-if="isShowingFancyView" :song="playingSong" @control="instruction => { control( instruction ) }" :isPlaying="isPlaying" <FancyView v-if="isShowingFancyView" :song="playingSong" @control="instruction => { control( instruction ) }" :isPlaying="isPlaying"
:shuffle="isShuffleEnabled" :repeatMode="repeatMode" :durationBeautified="durationBeautified" :shuffle="isShuffleEnabled" :repeatMode="repeatMode" :durationBeautified="durationBeautified"

24
frontend/src/components/sliderView.vue
View File

@@ -1,6 +1,7 @@
<template> <template>
<div style="width: 100%; height: 100%;"> <div style="width: 100%; height: 100%;">
<progress id="progress-slider" :value="sliderProgress" max="1000" @mousedown="( e ) => { setPos( e ) }" :class="active ? '' : 'slider-inactive'"></progress> <progress :id="'progress-slider-' + name" class="progress-slider" :value="sliderProgress" max="1000" @mousedown="( e ) => { setPos( e ) }"
:class="active ? '' : 'slider-inactive'"></progress>
<div v-if="active" id="slider-knob" @mousedown="( e ) => { startMove( e ) }" <div v-if="active" id="slider-knob" @mousedown="( e ) => { startMove( e ) }"
:style="'left: ' + ( parseInt( originalPos ) + parseInt( sliderPos ) ) + 'px;'"> :style="'left: ' + ( parseInt( originalPos ) + parseInt( sliderPos ) ) + 'px;'">
<div id="slider-knob-style"></div> <div id="slider-knob-style"></div>
@@ -13,7 +14,7 @@
</template> </template>
<style scoped> <style scoped>
#progress-slider { .progress-slider {
width: 100%; width: 100%;
margin: 0; margin: 0;
position: absolute; position: absolute;
@@ -24,7 +25,7 @@
background-color: #baf4c9; background-color: #baf4c9;
} }
#progress-slider::-webkit-progress-value { .progress-slider::-webkit-progress-value {
background-color: #baf4c9; background-color: #baf4c9;
} }
@@ -85,6 +86,10 @@ export default {
active: { active: {
type: Boolean, type: Boolean,
default: true, default: true,
},
name: {
type: String,
default: '1',
} }
}, },
data () { data () {
@@ -99,7 +104,7 @@ export default {
methods: { methods: {
handleDrag( e ) { handleDrag( e ) {
if ( this.isDragging ) { if ( this.isDragging ) {
if ( 0 < this.originalPos + e.screenX - this.offset && this.originalPos + e.screenX - this.offset < document.getElementById( 'progress-slider' ).clientWidth - 5 ) { if ( 0 < this.originalPos + e.screenX - this.offset && this.originalPos + e.screenX - this.offset < document.getElementById( 'progress-slider-' + this.name ).clientWidth - 5 ) {
this.sliderPos = e.screenX - this.offset; this.sliderPos = e.screenX - this.offset;
this.calcProgressPos(); this.calcProgressPos();
} }
@@ -126,19 +131,24 @@ export default {
} }
}, },
calcProgressPos() { calcProgressPos() {
this.sliderProgress = Math.ceil( ( this.originalPos + parseInt( this.sliderPos ) ) / ( document.getElementById( 'progress-slider' ).clientWidth - 5 ) * 1000 ); this.sliderProgress = Math.ceil( ( this.originalPos + parseInt( this.sliderPos ) ) / ( document.getElementById( 'progress-slider-' + this.name ).clientWidth - 5 ) * 1000 );
}, },
calcPlaybackPos() { calcPlaybackPos() {
this.$emit( 'pos', Math.round( ( this.originalPos + parseInt( this.sliderPos ) ) / ( document.getElementById( 'progress-slider' ).clientWidth - 5 ) * this.duration ) ); this.$emit( 'pos', Math.round( ( this.originalPos + parseInt( this.sliderPos ) ) / ( document.getElementById( 'progress-slider-' + this.name ).clientWidth - 5 ) * this.duration ) );
} }
}, },
watch: { watch: {
position() { position() {
if ( !this.isDragging ) { if ( !this.isDragging ) {
this.sliderProgress = Math.ceil( this.position / this.duration * 1000 + 2 ); this.sliderProgress = Math.ceil( this.position / this.duration * 1000 + 2 );
this.originalPos = Math.ceil( this.position / this.duration * ( document.getElementById( 'progress-slider' ).clientWidth - 5 ) ); this.originalPos = Math.ceil( this.position / this.duration * ( document.getElementById( 'progress-slider-' + this.name ).scrollWidth - 5 ) );
} }
} }
},
created() {
setTimeout( () => {
console.log( document.getElementById( 'progress-slider-' + this.name ).scrollWidth );
}, 1000 );
} }
} }
</script> </script>