From ebd5db3eea56156b897fb67d06c955ddd6899e4c Mon Sep 17 00:00:00 2001
From: Basma Elhoseny <basmaelhoseny6@gmail.com>
Date: Sat, 17 Aug 2024 15:08:33 +0300
Subject: [PATCH] feat: Added Change Volume , Speed and Coorperators Section

---
 src/components/molecules/AudioWave.vue        | 47 +++++++++++++++----
 .../molecules/ModeratedTestCard.vue           | 47 +++++++++++++++++++
 .../organisms/UserModeratedSentiment.vue      | 32 ++++++++++---
 3 files changed, 110 insertions(+), 16 deletions(-)
 create mode 100644 src/components/molecules/ModeratedTestCard.vue

diff --git a/src/components/molecules/AudioWave.vue b/src/components/molecules/AudioWave.vue
index 61213a4e..427a0642 100644
--- a/src/components/molecules/AudioWave.vue
+++ b/src/components/molecules/AudioWave.vue
@@ -8,21 +8,30 @@
 
 
     <!-- Controls -->
-      <v-btn icon @click="playPause">
+     <!-- Play -->
+    <v-btn icon @click="playPause">
       <v-icon>
         {{ playing ? 'mdi-pause' : 'mdi-play' }}
       </v-icon>
     </v-btn>
 
-    <!-- <v-btn icon @click="playSegment(0, 5)">
-      <v-icon>
-        mdi-plus
-      </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>
   </div>
 </template>
 
@@ -58,6 +67,8 @@ export default {
     return {
       wave_surfer: null,
       playing: false,      
+      volume: 1, // Volume level (0 to 1)
+      speedText: '1x', // Display text for speed
     }
   },
 
@@ -103,6 +114,7 @@ export default {
           minPxPerSec: 10,
           dragToSeek: true,
 
+          // plugins: [this.regionsPlugin,this.timelinePlugin],
           plugins: [this.regionsPlugin,this.timelinePlugin],
           // cursorWidth: 1,
           // height: 500,
@@ -206,6 +218,21 @@ export default {
       });
     },
 
+    changeSpeed() {
+      const speeds = [0.5,1, 1.5, 2]
+      let currentSpeedIndex = speeds.indexOf(this.wave_surfer.getPlaybackRate())
+      currentSpeedIndex = (currentSpeedIndex + 1) % speeds.length
+      const newSpeed = speeds[currentSpeedIndex]
+      this.wave_surfer.setPlaybackRate(newSpeed)
+      this.speedText = `${newSpeed}x` // Update the speed display text
+    },
+
+    setVolume() {
+      if (this.wave_surfer) {
+        this.wave_surfer.setVolume(this.volume)
+      }
+    },
+  
     async loadAudioFile() {
       if (!this.wave_surfer){
         console.error('Wave Surfer not initialized')
diff --git a/src/components/molecules/ModeratedTestCard.vue b/src/components/molecules/ModeratedTestCard.vue
new file mode 100644
index 00000000..fd00ecb5
--- /dev/null
+++ b/src/components/molecules/ModeratedTestCard.vue
@@ -0,0 +1,47 @@
+<template>
+    <v-card class="d-flex align-center pa-2 my-2">
+
+        <!-- Moderator -->
+        <v-avatar size="48" color="#FEF4E5" class="orange--text">
+            <span class="text-h5">{{ moderator.name[0] }}</span>
+        </v-avatar>
+        <v-card-text class="ml-3">
+            <div class="font-weight-bold">{{ moderator.name }}</div>
+            <div class="text-caption grey--text">Moderator</div>
+        </v-card-text>
+        <v-spacer></v-spacer>
+
+        <!-- Evaluator -->
+        <v-avatar size="48" color="#FEF4E5" class="orange--text">
+            <span class="text-h5">{{ evaluator.name[0] }}</span>
+        </v-avatar>
+        <v-card-text class="ml-3">
+            <div class="font-weight-bold">{{ evaluator.name }}</div>
+            <div class="text-caption grey--text">Evaluator</div>
+        </v-card-text>
+    </v-card>
+</template>
+  
+<script>
+
+  
+  // Components
+  
+  export default {
+    components: {},
+    props: {
+        moderator: {
+            type: Object,
+            required: true,
+        },
+        evaluator: {
+            type: Object,
+            required: true,
+        }
+    }
+}
+</script>
+  
+<style scoped>
+
+</style>
diff --git a/src/components/organisms/UserModeratedSentiment.vue b/src/components/organisms/UserModeratedSentiment.vue
index a46d8ce3..71973e57 100644
--- a/src/components/organisms/UserModeratedSentiment.vue
+++ b/src/components/organisms/UserModeratedSentiment.vue
@@ -28,10 +28,11 @@
 
             <!-- Answer Sentiment -->
             <v-col class="ma-0 pa-1 answer-list" cols="9">
-              <!-- Co-operators -->
-              <div>Copoprators</div>
-
-
+              <!-- Co-operators -->              
+              <ModeratedTestCard
+                :moderator="{ name: testDocument ? testDocument.testAdmin.email : '<Error>' }"
+                :evaluator="{ name: selectedAnswerDocument ? getCooperatorEmail(selectedAnswerDocument.userDocId) : '<Error>' }"
+              />              
     
 
               <!-- Audio Wave -->
@@ -44,7 +45,23 @@
 
 
               <!-- Control Wave -->
-              <v-btn
+
+              <v-row class="align-center justify-space-between pa-3">
+                <!-- Left Text -->
+                <v-col cols="12" md="8">
+                  <span class="text--secondary caption">
+                    Drag the sliders to adjust the start and end points or enter the exact times in the input fields.
+                  </span>
+                </v-col>
+
+                <!-- Right Controls -->
+                <v-col cols="12" md="4" class="text-right">
+                  <v-btn color="orange" class="white--text">
+                    + Analyze
+                  </v-btn>
+                </v-col>
+              </v-row>
+              <!-- <v-btn
                 color="#F9A826"
                 class="white--text custom-btn"
                 @click="analyzeTimeStamp()"
@@ -54,7 +71,7 @@
 
 
               {{ newRegion.start }} - {{ newRegion.end }}
-
+ -->
 
               <!-- Transcripts -->
               <SentimentTranscriptsList
@@ -101,18 +118,21 @@ import axios from 'axios'
 
 // Components
 import ShowInfo from '@/components/organisms/ShowInfo.vue'
+import ModeratedTestCard from '@/components/molecules/ModeratedTestCard.vue';
 import AudioWave from '@/components/molecules/AudioWave.vue'
 import SentimentTranscriptsList from './SentimentTranscriptsList.vue';
 
 
 // Controller
 import AudioSentimentController from '@/controllers/AudioSentimentController';
+import { evaluatorStatisticsHeaders } from '@/utils/headers';
 
 const audioSentimentController = new AudioSentimentController()
 
 export default {
   components: {
     ShowInfo,
+    ModeratedTestCard,
     AudioWave,
     SentimentTranscriptsList
   },