From b2eec704cf6e736bec9573f3dfe79ba7e8e02e4f Mon Sep 17 00:00:00 2001
From: "Const.Dave" <const.dave@gmail.com>
Date: Thu, 18 May 2023 21:06:28 -0500
Subject: [PATCH] fix issue-#20

---
 src/components/AudioWrapper.vue               | 47 +++++++---
 .../dialogs/AudioRecordingDialog.vue          | 89 -------------------
 2 files changed, 34 insertions(+), 102 deletions(-)
 delete mode 100644 src/components/dialogs/AudioRecordingDialog.vue

diff --git a/src/components/AudioWrapper.vue b/src/components/AudioWrapper.vue
index 459e3936..e7d7abb4 100644
--- a/src/components/AudioWrapper.vue
+++ b/src/components/AudioWrapper.vue
@@ -3,9 +3,14 @@
     <div ref="waveform" class="mb-2 waveform"></div>
     <v-row>
       <v-col cols="12" class="progress-bar">
-        <span class="time">00:00</span>
+        <span class="time" :style="{ color: currentTheme.secondary }"
+          >00:00</span
+        >
         <div class="progress">
           <v-slider
+            v-model="currentProgress"
+            max="100"
+            min="0"
             color="primary"
             step="1"
             thumb-label
@@ -13,9 +18,13 @@
             hide-details
             hide-spin-buttons
             track-color="#D1D5DB"
+            @change="syncSlideWithAudio"
           ></v-slider>
         </div>
-        <span class="time">{{ durationTime }}</span>
+        <!-- move prop from controlPanel and get colors from Vuetify.js -->
+        <span class="time" :style="{ color: currentTheme.secondary }">{{
+          durationTime
+        }}</span>
       </v-col>
     </v-row>
     <v-row class="d-flex justify-space-between">
@@ -114,6 +123,7 @@ export default {
   data: () => ({
     wavesurfer: null,
     volume: 20,
+    currentProgress: 0,
   }),
   watch: {
     triggerSave: function (oldValue, newValue) {
@@ -123,6 +133,13 @@ export default {
     },
   },
   computed: {
+    currentTheme() {
+      if (this.$vuetify.theme.dark) {
+        return this.$vuetify.theme.themes.dark;
+      } else {
+        return this.$vuetify.theme.themes.light;
+      }
+    },
     isPlaying() {
       if (!this.wavesurfer) return false;
 
@@ -141,22 +158,11 @@ export default {
         duration = parseFloat(this.wavesurfer.getDuration()).toFixed(2);
       }
 
-      duration = 0;
-
       const date = new Date(null);
       date.setSeconds(duration);
       const result = date.toISOString().substr(14, 5);
       return result;
     },
-    currentTime() {
-      if (!this.wavesurfer) return 0;
-
-      // return this.wavesurfer.getCurrentTime();
-      const duration = parseInt(this.wavesurfer.getDuration());
-      const current = parseInt(this.wavesurfer.getCurrentTime());
-      const result = Math.round((current / duration) * 100);
-      return result;
-    },
   },
   mounted() {
     if (!this.wavesurfer) {
@@ -176,6 +182,21 @@ export default {
         barWidth: 3,
       });
       this.wavesurfer.load(`file://${this.item.filePath}`);
+      this.wavesurfer.on("audioprocess", () => {
+        this.setCurrentProgress();
+      });
+    },
+    setCurrentProgress() {
+      if (!this.wavesurfer) return 0;
+
+      // return this.wavesurfer.getCurrentTime();
+      const duration = parseFloat(this.wavesurfer.getDuration());
+      const current = parseFloat(this.wavesurfer.getCurrentTime());
+      const result = Math.round((current / duration) * 100);
+      this.currentProgress = result;
+    },
+    syncSlideWithAudio() {
+      this.wavesurfer.seekTo(this.currentProgress / 100);
     },
     setVolume() {
       const volume = Math.round(this.volume);
diff --git a/src/components/dialogs/AudioRecordingDialog.vue b/src/components/dialogs/AudioRecordingDialog.vue
deleted file mode 100644
index e169f020..00000000
--- a/src/components/dialogs/AudioRecordingDialog.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <v-dialog v-bind="$attrs" v-on="$listeners" persistent width="350">
-    <v-sheet outlined rounded>
-      <v-card :style="{ backgroundColor: currentTheme.background }">
-        <LogoWrapper :height="20" :width="60" />
-        <v-card-text class="text" :style="{ color: currentTheme.secondary }">
-          {{ text || $t("message.confirm_delete") }}
-        </v-card-text>
-        <v-card-actions>
-          <v-btn
-            small
-            :color="currentTheme.primary"
-            class="text-capitalize btn"
-            @click="allow"
-          >
-            {{ $tc("caption.allow", 1) }}
-          </v-btn>
-          <v-btn
-            small
-            :color="currentTheme.background"
-            class="text-capitalize btn"
-            @click="cancel"
-          >
-            {{ $tc("caption.cancel", 1) }}
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-sheet>
-  </v-dialog>
-</template>
-
-<script>
-import LogoWrapper from "../LogoWrapper.vue";
-export default {
-  name: "AudioRecordingDialog",
-  components: {
-    LogoWrapper,
-  },
-  props: {
-    title: String,
-    text: String,
-  },
-  computed: {
-    currentTheme() {
-      if (this.$vuetify.theme.dark) {
-        return this.$vuetify.theme.themes.dark;
-      } else {
-        return this.$vuetify.theme.themes.light;
-      }
-    },
-  },
-  methods: {
-    cancel() {
-      this.$emit("cancel");
-    },
-    allow() {
-      this.$emit("allow");
-    },
-  },
-};
-</script>
-
-<style scoped>
-.v-card {
-  padding: 24px;
-}
-.v-card__title {
-  padding: 0;
-  padding-top: 0.5rem;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 14px;
-  line-height: 20px;
-  color: #111827;
-}
-.v-card__text {
-  padding: 0;
-  padding-top: 0.5rem;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 13px;
-  line-height: 16px;
-  color: #6b7280;
-}
-.v-card__actions {
-  padding: 0;
-  padding-top: 1rem;
-}
-</style>