Changeset 35456

Timestamp:

2021-09-23T16:52:55+12:00 (3 years ago)

Author:

cstephen

Message:

Hoist active word

Location:

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

Files:

• components/TranscriptionItemEditor.vue (modified) (5 diffs)
• components/WordTimingSelector.vue (modified) (7 diffs)
• styles/theme.scss (modified) (1 diff)

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

@@ -20 +20 @@
     </div>
 
-    <word-timing-selector :surroundingWords="surroundingWords" :word="selectedWord" :wordIndex="selectedIndex" />
+    <word-timing-selector class="word-timing-selector" :surroundingWords="surroundingWords" :word="selectedWord" />
 
     <div class="editor-controls">
@@ -60 +60 @@
 
 .word-highlight-applied {
-    background-color: rgba(255, 255, 0, 0.4);
+    background-color: var(--highlighted-word-bg);
 }
 
@@ -75 +75 @@
     font-family: inherit;
     font-size: 1rem;
+}
+
+.word-timing-selector {
+    margin: 0.5em auto;
 }
 </style>
@@ -171 +175 @@
             }
 
-            const words = this.words.slice(min, max);
-            // words.splice(index - min, 1); // Remove the index word, as it is not a 'surrounding' word
-
-            return words;
+            return this.words.slice(min, max);
         },
         /**
@@ -200 +201 @@
         },
         onEditorFocus(index) {
-            const wordStartTime = this.words[index].startTime + 0.01;
-            this.$store.commit("playbackStateSetTime", { id: this.transcription.id, time: wordStartTime });
+            if (this.playbackState.currentTime < this.words[index].startTime || this.playbackState.curentTime > this.words[index].endTime) {
+                const wordStartTime = this.words[index].startTime + 0.01;
+                this.$store.commit("playbackStateSetTime", { id: this.transcription.id, time: wordStartTime });
+            }
+
             this.selectedIndex = index;
         },

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

@@ -4 +4 @@
 
     <div class="words-container" ref="wordsContainer">
-        <input type="range" class="slider-continuous" ref="slider" />
-
-        <div class="surround-word" v-for="word in mySurroundingWords" :key="word.id" :style="{ left: word.left, width: word.length }">
+        <div class="word" v-for="word in mySurroundingWords" :key="word.id" :style="{ left: word.left, width: word.length }"
+            :class="[ shouldHoist(word) ? 'hoisted' : 'surround-word' ]">
             <span>{{ word.word }}</span>
         </div>
@@ -19 +18 @@
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: 1em;
+    height: 3em;
 }
 
 .words-container {
-    flex-grow: 0.5;
+    flex-grow: 0.6;
     position: relative;
-    height: 2.5em;
+    height: 1.5em;
 }
 
-.surround-word {
+.word {
     position: absolute;
     text-align: center;
@@ -39 +40 @@
     background-color: rgba(var(--bg-color-raw), 0.3);
     border: 1px solid rgba(var(--bg-color-raw), 0.6);
+}
+
+.surround-word {
+    top: 50%;
+}
+
+.hoisted {
+    top: -50%;
+    background-color: var(--highlighted-word-bg);
 }
 </style>
@@ -62 +72 @@
         surroundingWords: Array,
         word: { word: String, startTime: Number, endTime: Number },
-        wordIndex: Number,
         upperBound: Number
     },
@@ -90 +99 @@
     watch: {
         surroundingWords() {
-            this.scaleWords();
+            this.getMySurroundingWords();
         }
     },
     methods: {
-        scaleWords() {
+        getMySurroundingWords() {
             if (!this.isMounted) {
                 return;
@@ -105 +114 @@
 
             const audioLength = this.surroundingWords[this.surroundingWords.length - 1].endTime - this.surroundingWords[0].startTime;
-            const sliderLengthPx = this.$refs.slider.offsetWidth;
+            const sliderLengthPx = this.$refs.wordsContainer.offsetWidth;
 
             const scalingFactor = sliderLengthPx / audioLength;
@@ -118 +127 @@
             }
 
+            // myWords.splice(this.surroundingWords.indexOf(this.word), 1);
             this.mySurroundingWords = myWords;
+        },
+        shouldHoist(word) {
+            return word.startTime === this.word.startTime;
         }
     },
     mounted() {
         this.isMounted = true;
-        this.scaleWords();
+        this.getMySurroundingWords();
     }
 }

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);
 }