janishutz/MusicPlayer
1
0
Fork 0
mirror of https://github.com/janishutz/MusicPlayer.git synced 2026-09-10 14:25:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: Progress bar not moving properly when updated

Browse Source
This commit is contained in:
janishutz
2026-09-07 16:15:00 +02:00
parent cb5cdc483f
commit a5910df441
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/player/ProgressBar.vue
+6 -4
View File
@@ -8,6 +8,7 @@
'required': true, 'required': true,
'default': 0.5 'default': 0.5
} ); } );
const moveVal = ref( 0 );
const offset = ref( -1 ); const offset = ref( -1 );
const isMoving = ref( false ); const isMoving = ref( false );
const bar = useTemplateRef( 'bar' ); const bar = useTemplateRef( 'bar' );
@@ -15,19 +16,20 @@
const start = ( ev: MouseEvent ) => { const start = ( ev: MouseEvent ) => {
offset.value = bar.value!.getBoundingClientRect().x; offset.value = bar.value!.getBoundingClientRect().x;
isMoving.value = true; isMoving.value = true;
val.value = ( ev.x - offset.value ) / bar.value!.clientWidth; moveVal.value = ( ev.x - offset.value ) / bar.value!.clientWidth;
emit( 'move-start' ); emit( 'move-start' );
}; };
const move = ( ev: MouseEvent ) => { const move = ( ev: MouseEvent ) => {
if ( isMoving.value ) { if ( isMoving.value ) {
val.value = Math.max( 0, Math.min( ( ev.x - offset.value ) / bar.value!.clientWidth, 1 ) ); moveVal.value = Math.max( 0, Math.min( ( ev.x - offset.value ) / bar.value!.clientWidth, 1 ) );
} }
}; };
const end = () => { const end = ( ev: MouseEvent ) => {
if ( !isMoving.value ) return; if ( !isMoving.value ) return;
val.value = ( ev.x - offset.value ) / bar.value!.clientWidth;
offset.value = -1; offset.value = -1;
isMoving.value = false; isMoving.value = false;
emit( 'move-end' ); emit( 'move-end' );
@@ -42,7 +44,7 @@
<template> <template>
<div class="progressbar"> <div class="progressbar">
<div ref="bar" class="back"> <div ref="bar" class="back">
<div :style="`width: ${ val * 100 }%;`"></div> <div :style="`width: ${ isMoving ? moveVal * 100 : val * 100 }%;`"></div>
</div> </div>
<div <div
:class="['click-target', offset >= 0 ? 'active' : undefined]" :class="['click-target', offset >= 0 ? 'active' : undefined]"