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

Timestamp:

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

Author:

cstephen

Message:

Hoist active word

File:

• main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/WordTimingSelector.vue (modified) (7 diffs)

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