Changeset 35426 for main

Timestamp:

2021-09-20T10:06:23+12:00 (3 years ago)

Author:

cstephen

Message:

Improve audio time bar implementation

Location:

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src

Files:

• App.vue (modified) (1 diff)
• components/AudioTimeBar.vue (modified) (2 diffs)
• components/TranscriptionItemEditor.vue (modified) (2 diffs)
• js/Util.js (modified) (2 diffs)
• main.js (modified) (1 diff)

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/App.vue

@@ -126 +126 @@
         }
 
-        setTimeout(p, 50);
+        setTimeout(p, 33); // Slightly more than 30hz
     })();
 }

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/AudioTimeBar.vue

@@ -1 +1 @@
 <template>
 <div class="root">
-    <input type="range" class="slider-continuous" v-model="sliderValue" :max="audioLength" step="0.01" />
-    <span>{{ sliderValue }}</span>
+    <input type="range" class="slider-continuous" v-model.number="sliderValue" :max="audioLength" step="0.01" />
+    <span>{{ stringSliderValue }}</span>
 </div>
 </template>
@@ -32 +32 @@
         sliderValue: {
             get() {
-                if (this.myValue < 0) {
+                if (this.modelValue < 0) {
                     return 0;
                 }
 
-                if (this.myValue > this.audioLength) {
+                if (this.modelValue > this.audioLength) {
                     return this.audioLength;
                 }
 
-                return this.myValue;
+                return this.modelValue;
             },
             set(newValue) {
+                // this.myValue = newValue;
                 this.$emit("update:modelValue", newValue);
-                this.myValue = newValue;
             }
         },
         stringSliderValue() {
-            return Util.formatSecondsTimeString(this.sliderValue);
+            return Util.formatSecondsTimeString(this.sliderValue, false, 2);
         }
     }

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue

@@ -2 +2 @@
 <div>
     <div class="editor-controls">
-        <audio-time-bar v-model="currentPlaybackTime" :audio-length="2" />
+        <audio-time-bar v-model.number="currentPlaybackTime" :audio-length="2" />
 
         <toggle-button v-model="enableEditing">
@@ -125 +125 @@
         }
     },
-    computed: mapState({
-        playbackState: state => state.playbackState,
-        currentPlaybackTime: state => state.playbackState.currentTime,
-        translations: state => state.translations
-    }),
+    computed: {
+        currentPlaybackTime: {
+            get() {
+                return this.$store.state.playbackState.currentTime;
+            },
+            set(value) {
+                this.$store.commit("setCurrentPlaybackTime", value);
+            }
+        },
+        ...mapState({
+            playbackState: state => state.playbackState,
+            translations: state => state.translations
+        })
+    },
     methods: {
         playAudio(startTime) {

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/js/Util.js

@@ -48 +48 @@
      * @param {Number} seconds The number of seconds.
      * @param {Boolean} includeHoursIfNone Defines whether to include the hours component if it is empty.
+     * @param {Number} fractionDigits The number of millisecond digits to include in the time string.
      * @returns {String} The formatted time string.
      */
-    static formatSecondsTimeString(seconds, includeHoursIfNone) {
+    static formatSecondsTimeString(seconds, includeHoursIfNone, fractionDigits = 3) {
         const hours = (seconds / 3600) | 0;
         const minutes = ((seconds - (hours * 60)) / 60) | 0;
@@ -65 +66 @@
 
         result += minutes.toLocaleString("en-US", { maximumFractionDigits: 0, minimumIntegerDigits: 2 });
-        result += ":" + actualSeconds.toLocaleString("en-US", { minimumFractionDigits: 3, maximumFractionDigis: 3, minimumIntegerDigits: 2 });
+        result += ":" + actualSeconds.toLocaleString("en-US", { minimumFractionDigits: fractionDigits, maximumFractionDigits: fractionDigits, minimumIntegerDigits: 2 });
 
         return result;

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/main.js

@@ -37 +37 @@
      * @param {Numbe} currentTime The current time in the audio playback.
      */
-    constructor(id = "", isPlaying = false, currentTime = -1) {
+    constructor(id = "", isPlaying = false, currentTime = 0) {
         /** @type {String} The ID of the transcription for which audio is currently being played. */
         this.id = id;