From dd9c923b0ad055a1fecc7788b6a74693efd9fe09 Mon Sep 17 00:00:00 2001
From: Basma Elhoseny <basmaelhoseny6@gmail.com>
Date: Sat, 17 Aug 2024 15:26:28 +0300
Subject: [PATCH] added container to the controls

---
 src/components/molecules/AudioWave.vue | 77 ++++++++++++++++----------
 1 file changed, 47 insertions(+), 30 deletions(-)

diff --git a/src/components/molecules/AudioWave.vue b/src/components/molecules/AudioWave.vue
index 427a0642..e23899d2 100644
--- a/src/components/molecules/AudioWave.vue
+++ b/src/components/molecules/AudioWave.vue
@@ -8,30 +8,39 @@
 
 
     <!-- Controls -->
-     <!-- Play -->
-    <v-btn icon @click="playPause">
-      <v-icon>
-        {{ playing ? 'mdi-pause' : 'mdi-play' }}
-      </v-icon>
-    </v-btn>
-
-    <!-- Speed -->
-    <div class="speed-control">
-      <button id="speedButton" @click="changeSpeed">{{speedText}}</button>
-    </div>
-
-
-    <!-- Volume -->
-    <div class="volume-control">
-      <v-slider
-        v-model="volume"
-        min="0"
-        max="1"
-        step="0.01"
-        label="Volume"
-        @change="setVolume"
-      />
-    </div>
+    <v-row align="center" no-gutters class="controls-row">
+      <!-- Play -->
+      <v-col cols="auto">
+        <v-btn icon @click="playPause">
+          <v-icon>{{ playing ? 'mdi-pause' : 'mdi-play' }}</v-icon>
+        </v-btn>
+      </v-col>
+
+      <!-- Speed -->
+      <v-col cols="auto">
+        <v-btn @click="changeSpeed">
+          {{ speedText }}
+        </v-btn>
+      </v-col>
+
+      <!-- Volume -->
+      <v-col cols="auto" class="volume-col">
+        <v-slider
+          v-model="volume"
+          min="0"
+          max="1"
+          step="0.01"
+          label="Volume"
+          @change="setVolume"
+          hide-details
+          class="volume-slider"
+        />
+      </v-col>
+
+      <!-- Download -->
+      
+    </v-row>
+
   </div>
 </template>
 
@@ -283,12 +292,6 @@ export default {
           console.error(error)
         })
     },
-    // updateRegion(newStart, newEnd) {
-      updateRegion() {
-      const newStart=0
-      const newEnd=8
-      this.$emit('update:newRegion', { start: newStart, end: newEnd });
-    },
   },
 }
 </script>
@@ -297,6 +300,20 @@ export default {
 .custom-btn {
   text-transform: none; /* Preserve the original text case */
 }
+
+.controls-row {
+  margin-top: 16px;
+}
+
+.volume-col {
+  flex: 1;
+  max-width: 300px; /* Adjust width as needed */
+}
+
+.volume-slider {
+  width: 100%;
+}
+
 /* .waveform-container { */
 /* height: 100px; */
 /* Additional styles can be added here */