Added timeline

ruxailab · Aug 16, 2024 · efe2ff7 · efe2ff7
1 parent b68b7e0
commit efe2ff7
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git a/src/components/molecules/AudioWave.vue b/src/components/molecules/AudioWave.vue
@@ -31,6 +31,8 @@ import { getStorage, ref, getDownloadURL } from 'firebase/storage'
 
 import WaveSurfer from 'wavesurfer.js'
 import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions.esm.js'
+import TimelinePlugin from 'wavesurfer.js/dist/plugins/timeline.esm.js'
+
 
 
 // Components
@@ -67,6 +69,20 @@ export default {
  // Regions
  this.regionsPlugin = RegionsPlugin.create()
 
+
+ // Timeline
+ this.timelinePlugin = TimelinePlugin.create({
+ height: 12, 
+ timeInterval: 1,
+ primaryLabelInterval: 10,
+ secondaryLabelInterval:10,
+ style: {
+ fontSize: '10px',
+ // color: '#6A3274',
+ }
+ })
+ 
+
  // Initialize WaveSurfer
  this.initWaveSurfer()
 
@@ -83,7 +99,11 @@ export default {
  cursorColor: '#666',
  barWidth: 2,
  barRadius: 3,
- plugins: [this.regionsPlugin],
+
+ minPxPerSec: 10,
+ dragToSeek: true,
+
+ plugins: [this.regionsPlugin,this.timelinePlugin],
  // cursorWidth: 1,
  // height: 500,
  })

diff --git a/src/components/organisms/SentimentTranscriptsList.vue b/src/components/organisms/SentimentTranscriptsList.vue
@@ -37,14 +37,14 @@
  </v-btn>
 
  <!-- Start and End Times -->
- <v-list-item-text class="segment-time">
+ <v-list-item-subtitle class="segment-time">
  {{ region.start.toFixed(2) }} - {{ region.end.toFixed(2) }}
- </v-list-item-text>
+ </v-list-item-subtitle>
  </v-list-item-icon>
 
  <!-- List Item Content -->
  <v-list-item-content>
- <v-list-item-title v-text="'item.title'"></v-list-item-title>
+ <!-- <v-list-item-title v-text="'item.title'"></v-list-item-title> -->
 
  <v-list-item-subtitle
  class="text--primary"

diff --git a/src/controllers/AudioSentimentController.js b/src/controllers/AudioSentimentController.js
@@ -87,8 +87,6 @@ export default class AudioSentimentController extends Controller {
  return null;
  }
 
- console.log("doc.data()............", doc.data());
-
  return new AudioSentiment({
  id: doc.id,
  ...doc.data()