Add option to show duration at the right edge

src/components/AudioTrack/Waveform.vue

@@ -55,6 +55,12 @@
     >
       {{ timeFmt(seekPercentage * duration) }}
     </div>
+    <div
+      v-if="showDuration"
+      class="duration absolute top-1 right-0 px-1 font-bold text-sm pointer-events-none"
+    >
+      {{ timeFmt(duration) }}
+    </div>
   </div>
 </template>
 
@@ -99,6 +105,13 @@ export default {
       type: Number,
       default: 0,
     },
+    /**
+     * whether to show the duration of the audio at the ending edge
+     */
+    showDuration: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: () => ({
     barWidth: 2, // px
@@ -202,4 +215,9 @@ export default {
 .seek {
   left: var(--seek-time-left);
 }
+
+.duration {
+  /* opaque equivalent of dark-charcoal-04 on top of white */
+  background-color: rgb(247, 246, 247);
+}
 </style>

src/components/AudioTrack/meta/Waveform.stories.mdx

@@ -48,6 +48,7 @@ Here 9 points are upsampled to as many as required to fill the viewport.
       isReady: true,
       currentTime: 2,
       duration: 10,
+      showDuration: true,
     }}
   >
     {Template.bind({})}
@@ -69,6 +70,7 @@ Here 1000 points are downsampled to as many as required to fill the viewport.
       isReady: true,
       currentTime: 2,
       duration: 10,
+      showDuration: true,
     }}
   >
     {Template.bind({})}