Changeset 35641 for main

Timestamp:

2021-10-20T11:49:36+13:00 (3 years ago)

Author:

cstephen

Message:

Add shadow word representation.
Show absolute time boundaries, rather than selected words time boundaries.
Cleanup

Location:

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

Files:

• assets (deleted)
• components/WordTimingSelector.vue (modified) (9 diffs)
• styles/asr.scss (deleted)
• styles/theme.scss (modified) (1 diff)

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

@@ -5 +5 @@
 
     <div class="words-container" v-width="onWordsContainerWidthChanged">
+        <div class="shadow-word" v-for="word in shadowWords" :key="word.id" :style="{ left: `${word.left}px`, width: `${word.length}px` }"
+            :class="{ 'shadow-hoisted': shouldHoist(word) }">
+            <span>{{ word.word }}</span>
+        </div>
+
         <div class="word" v-for="word in mySurroundingWords" :key="word.id" :style="{ left: `${word.left}px`, width: `${word.length}px` }"
             :class="{ 'hoisted': shouldHoist(word) }">
@@ -67 +72 @@
 }
 
+.shadow-word {
+    @extend .word;
+
+    opacity: 0.7;
+    color: #BBB;
+    background-color: #DDD;
+    border: 1px solid #AAA;
+}
+
+.hoisted {
+    top: -100%;
+    background-color: var(--highlighted-word-bg);
+}
+
+.shadow-hoisted {
+    @extend .hoisted;
+
+    background-color: #DDD;
+}
+
 .word-attachment-container {
     position: absolute;
@@ -92 +117 @@
     }
 }
-
-.hoisted {
-    top: -100%;
-    background-color: var(--highlighted-word-bg);
-}
 </style>
 
@@ -104 +124 @@
 
 class Word {
-    constructor(word, startTime, endTime, left, length) {
-        this.id = Util.generateUuid();
+    constructor(id, word, startTime, endTime, left, length) {
+        this.id = id;
         this.word = word;
         this.startTime = startTime;
@@ -131 +151 @@
             canAdjustWordStartTime: false,
             canAdjustWordEndTime: false,
-            wordsContainerWidth: 0
+            wordsContainerWidth: 0,
+            shadowWords: []
         }
     },
@@ -147 +168 @@
             }
 
+            if (this.wordIndex === 0) {
+                return Util.formatSecondsTimeString(0, false, 2);
+            }
+
             return Util.formatSecondsTimeString(this.surroundingWords[0].startTime, false, 2);
         },
@@ -152 +177 @@
             if (this.surroundingWords.length === 0) {
                 return 0;
+            }
+
+            if (this.wordIndex === this.surroundingWords.length - 1) {
+                return Util.formatSecondsTimeString(this.$store.getters.transcriptionPlaybackLength(this.transcriptionID), false, 2);
             }
 
@@ -222 +251 @@
         }
     },
+    watch: {
+        /**
+         * Watches for changes to the myWord computed property.
+         * Updates the shadow words.
+         * @param {Word} newValue The new word.
+         * @param {Word} oldValue The old word.
+         */
+        myWord(newValue, oldValue) {
+            if (newValue.id === oldValue.id && this.shadowWords.length > 0) {
+                console.log(`New: ${newValue.id} | Old: ${oldValue.id}`);
+                return;
+            }
+
+            console.log("Updating");
+            this.shadowWords = [];
+            for (const word of this.mySurroundingWords) {
+                this.shadowWords.push(word);
+            }
+        }
+    },
     methods: {
         onWordsContainerWidthChanged(newValue) {
@@ -232 +281 @@
             return time * this.scalingFactor - this.wordLeftOffsetPx;
         },
+        /**
+         * Converts a {@link TWord} to a {@link Word}.
+         * @param {TWord} word The word to convert.
+         */
         convertWord(word) {
             const left = this.timeToPosition(word.startTime);
             const length = (word.endTime - word.startTime) * this.scalingFactor;
 
-            return new Word(word.word, word.startTime, word.endTime, left, length);
+            return new Word(word.id, word.word, word.startTime, word.endTime, left, length);
         },
         shouldHoist(word) {
-            return word === this.myWord;
+            return word.id === this.myWord.id;
         },
 

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/theme.scss

@@ -16 +16 @@
     --monospace-font: 1rem 'Roboto Mono', sans-serif;
     --page-bg-color: #f7f4f0;
-    --highlighted-word-bg: rgba(255, 255, 0, 0.4);
+    --highlighted-word-bg: rgb(255, 255, 100);
 
     --primary-bg-color-l1: 196, 36, 44;