feat: Added Change Volume , Speed and Coorperators Section

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')

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>

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
  },