Changeset 35304

Timestamp:

2021-08-17T15:03:14+12:00 (3 years ago)

Author:

davidb

Message:

Add dynamic word highlighting

Location:

main/trunk/model-interfaces-dev/atea

Files:

• js/asr/asr-controller.js (modified) (7 diffs)
• style/asr.scss (modified) (1 diff)
• transform/pages/asr.xsl (modified) (1 diff)

main/trunk/model-interfaces-dev/atea/js/asr/asr-controller.js

@@ -34 +34 @@
         /** @type {Boolean} Gets or sets a value indicating if this transcription view has been deleted. */
         this.isDeleted = false;
+
+        /** @type {{word: String, startTime: Number, endTime: Number, shouldHighlight: Boolean}[]} */
+        this.words = [];
     }
 }
@@ -83 +86 @@
         {
             lastTime = EL_AUDIO_TRANSCRIPTION_AUDIO.currentTime;
-            console.log("time updated! " + lastTime);
+            TranscriptionsListVM.currentAudioTime = lastTime;
         }
         
@@ -189 +192 @@
             showCharDisplay: false,
             /** @type {{id: String, url: String} | null} Gets the ID of the transcription for which the audio is currently loaded */
-            currentlyLoadedAudio: null
+            currentlyLoadedAudio: null,
+            currentAudioTime: 0
         }
     },
@@ -221 +225 @@
             this.failures.delete(id);
         },
-        getWords(transcriptionId)
-        {
-            /** @type {TranscriptionModel} */
-            const transcription = this.transcriptions.get(transcriptionId);
-            const words = [];
-
-            let lastWord = "";
-            let currStartTime = 0;
-
-            for (const metadata of transcription.metadata) 
-            {
-                if (metadata.char == ' ')
-                {
-                    lastWord += "\u00A0";
-                    words.push({ word: lastWord, startTime: currStartTime });
-
-                    lastWord = "";
-                    currStartTime = metadata.start_time;
-                }
-                else
-                {
-                    lastWord += metadata.char;
-                }
-            }
-
-            // Push the last word, as most transcriptions will not end in a space (hence breaking the above algorithm)
-            if (lastWord.length > 0) {
-                words.push({ word: lastWord, startTime: currStartTime });
-            }
-
-            return words;
-            // console.log(this);
-            // console.log(this.$refs);
-            // let charsPerLine = Math.floor(this.$refs.wordListContainer.clientWidth / MONOSPACE_CHAR_SIZE);
-
-            // return getWidthNormalisedLines(transcription.transcription, charsPerLine);
-        },
         getChars(transcriptionId)
         {
@@ -275 +242 @@
 
             return chars;
+        }
+    },
+    watch:
+    {
+        currentAudioTime(newValue)
+        {
+            // TODO: Replace with more efficient search. Even binary would be a significant improvment for longer transcriptions.
+            const t = this.transcriptions.get(this.currentlyLoadedAudio.id);
+
+            for (let i = 0; i < t.words.length; i++)
+            {
+                const word = t.words[i];
+
+                if (word.startTime < newValue && word.endTime > newValue) {
+                    word.shouldHighlight = true;
+                }
+                else {
+                    word.shouldHighlight = false;
+                }
+            }
         }
     }
@@ -328 +315 @@
 
                     let model = new TranscriptionViewModel(t, f);
+                    model.words = getTranscriptionWords(t);
 
                     TranscriptionsListVM.transcriptions.set(model.id, model);
@@ -342 +330 @@
     
     AudioUploadVM.isTranscribing = false;
+}
+
+/**
+ * 
+ * @param {TranscriptionModel} transcription The transcription.
+ * @returns {{word: String, startTime: Number, endTime: Number, shouldHighlight: Boolean}[]}
+ */
+function getTranscriptionWords(transcription)
+{
+    /** @type {{word: String, startTime: Number, endTime: Number, shouldHighlight: Boolean}[]} */
+    const words = [];
+
+    let lastWord = "";
+    let currStartTime = 0;
+
+    for (const metadata of transcription.metadata) 
+    {
+        if (metadata.char == ' ')
+        {
+            lastWord += "\u00A0";
+            words.push({ word: lastWord, startTime: currStartTime, endTime: metadata.start_time, shouldHighlight: false });
+
+            lastWord = "";
+            currStartTime = metadata.start_time;
+        }
+        else
+        {
+            lastWord += metadata.char;
+        }
+    }
+
+    // Push the last word, as most transcriptions will not end in a space (hence breaking the above algorithm)
+    if (lastWord.length > 0) {
+        words.push(
+            {
+                word: lastWord,
+                startTime: currStartTime,
+                endTime: transcription.metadata[transcription.metadata.length].start_time,
+                shouldHighlight: false
+            });
+    }
+
+    return words;
+    // console.log(this);
+    // console.log(this.$refs);
+    // let charsPerLine = Math.floor(this.$refs.wordListContainer.clientWidth / MONOSPACE_CHAR_SIZE);
+
+    // return getWidthNormalisedLines(transcription.transcription, charsPerLine);
 }
 

main/trunk/model-interfaces-dev/atea/style/asr.scss

@@ -121 +121 @@
 
     &:hover {
-        background-color: rgba(255, 255, 0, 0.315)
-    }
+        background-color: rgba(255, 255, 0, 0.4)
+    }
+}
+
+.yellow {
+    background-color: rgba(255, 255, 0, 0.4);
 }
 

main/trunk/model-interfaces-dev/atea/transform/pages/asr.xsl

@@ -126 +126 @@
                                 <ul class="transcription__list">
                                     <li v-if="!showCharDisplay">
-                                        <span v-for="word in getWords(transcription.id)" class="transcription__word"
-                                              v-on:click="playAudioFile(id, word.startTime)">
+                                        <span v-for="word in transcription.words" class="transcription__word"
+                                            v-on:click="playAudioFile(id, word.startTime)">
+                                            <xsl:attribute name="v-bind:class">
+                                                <xsl:text disable-output-escaping="yes">{ yellow: word.shouldHighlight }</xsl:text>
+                                            </xsl:attribute>
+
                                             {{ word.word }}
                                         </span>
                                     </li>
                                     <li v-if="showCharDisplay">
-                                        <span v-for="char in getChars(transcription.id)" class="transcription__word"
+                                        <span v-for="char in getChars(id)" class="transcription__word"
                                               v-on:click="playAudioFile(id, char.startTime)">
                                             {{ char.char }}