fix: progress slider sync

ExpTechTW · Apr 29, 2024 · be5612e · be5612e
1 parent 783eda6
commit be5612e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/components/replay/ReplayController.vue b/src/components/replay/ReplayController.vue
@@ -38,6 +38,15 @@ watch(
   }
 );
 
+const slidestart = () => {
+  syncProgress.value = false;
+};
+
+const slideend = () => {
+  syncProgress.value = true;
+  emit("seek", sliderProgress.value);
+};
+
 const endReplay = () => {
   router.back();
 };
@@ -59,7 +68,8 @@ const endReplay = () => {
         :class="{ loaded: !loading }"
         :min="0"
         :max="frames"
-        @slideend="() => emit('seek', sliderProgress)"
+        @change="slidestart"
+        @slideend="slideend"
       />
     </div>
     <div class="replay-actions">

diff --git a/src/view/ReplayView.vue b/src/view/ReplayView.vue
@@ -100,6 +100,7 @@ const scheduleNextFrame = () => {
       player = window.setTimeout(() => {
         if (isPlaying.value) {
           currentFrame.value++;
+          progress.value = (currentFrame.value / replayData.value.length) * 100;
           player = null;
           scheduleNextFrame();
         } else {