Changeset 35413

Timestamp:

2021-09-16T17:00:27+12:00 (3 years ago)

Author:

cstephen

Message:

Shift time string formatting to Util.
Start AudioTimeBar implementation.

Location:

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

Files:

• components/AudioTimeBar.vue (added)
• components/TranscriptionItem.vue (modified) (2 diffs)
• components/TranscriptionItemEditor.vue (modified) (4 diffs)
• js/Util.js (modified) (1 diff)

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

@@ -97 +97 @@
 import TranscriptionItemEditor, { getWords } from "./TranscriptionItemEditor.vue"
 import { TranscriptionViewModel, PlaybackState } from "../main";
+import Util from "../js/Util"
 
 export default {
@@ -172 +173 @@
 
     for (const word of getWords(transcription)) {
-        contents += getTime(word.startTime) + " --> " + getTime(word.endTime) + "\n";
+        const startTime = Util.formatSecondsTimeString(word.startTime, true);
+        const endTime = Util.formatSecondsTimeString(word.endTime, true);
+
+        contents += startTime + " --> " + endTime + "\n";
         contents += "- " + word.word + "\n\n";
     }
 
     return contents;
-
-    function getTime(seconds) {
-        const hours = (seconds / 3600) | 0;
-        const minutes = ((seconds - (hours * 60)) / 60) | 0;
-        const actualSeconds = seconds - (minutes * 60);
-
-        let result = hours.toLocaleString("en-US", { maximumFractionDigits: 0, minimumIntegerDigits: 2 });
-        result += ":" + minutes.toLocaleString("en-US", { maximumFractionDigits: 0, minimumIntegerDigits: 2 });
-        result += ":" + actualSeconds.toLocaleString("en-US", { minimumFractionDigits: 3, maximumFractionDigis: 3, minimumIntegerDigits: 2 });
-
-        return result;
-    }
 }
 </script>

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

@@ -2 +2 @@
 <div>
     <div class="editor-controls">
-        <input type="range" class="slider-continuous" />
+        <audio-time-bar v-model="currentPlaybackTime" :audio-length="2" />
 
         <toggle-button v-model="enableEditing">
@@ -12 +12 @@
         <ul class="list-view" v-if="!enableEditing">
             <li v-for="word in words" :key="word.id" class="word-container" @click="playAudio(word.startTime)">
-                    <span class="word-highlight word" :class="{ 'word-highlight-applied': word.shouldHighlight }">
-                        {{ word.word }}
-                    </span>
+                <span class="word-highlight word" :class="{ 'word-highlight-applied': word.shouldHighlight }">
+                    {{ word.word }}
+                </span>
             </li>
         </ul>
@@ -79 +79 @@
 import { mapState } from "vuex";
 import { TranscriptionViewModel, PlaybackState } from "../main";
+import AudioTimeBar from "./AudioTimeBar.vue"
 import Util from "../js/Util";
 
@@ -111 +112 @@
 export default {
     name: "TranscriptionItemEditor",
+    components: {
+        AudioTimeBar
+    },
     props: {
         transcription: TranscriptionViewModel

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

@@ -43 +43 @@
             this.lut[d3 & 0xff] + this.lut[d3 >> 8 & 0xff] + this.lut[d3 >> 16 & 0xff] + this.lut[d3 >> 24 & 0xff];
     }
+
+    /**
+     * Formats a number of seconds into a time string.
+     * @param {Number} seconds The number of seconds.
+     * @param {Boolean} includeHoursIfNone Defines whether to include the hours component if it is empty.
+     * @returns {String} The formatted time string.
+     */
+    static formatSecondsTimeString(seconds, includeHoursIfNone) {
+        const hours = (seconds / 3600) | 0;
+        const minutes = ((seconds - (hours * 60)) / 60) | 0;
+        const actualSeconds = seconds - (minutes * 60);
+
+        let result = "";
+
+        if (includeHoursIfNone) {
+            result = hours.toLocaleString("en-US", { maximumFractionDigits: 0, minimumIntegerDigits: 2 }) + ":";
+        }
+        else if (!includeHoursIfNone && hours > 0) {
+            result = hours.toLocaleString("en-US", { maximumFractionDigits: 0, minimumIntegerDigits: 2 }) + ":";
+        }
+
+        result += minutes.toLocaleString("en-US", { maximumFractionDigits: 0, minimumIntegerDigits: 2 });
+        result += ":" + actualSeconds.toLocaleString("en-US", { minimumFractionDigits: 3, maximumFractionDigis: 3, minimumIntegerDigits: 2 });
+
+        return result;
+    }
 }