Changeset 35525

Timestamp:

2021-09-29T15:28:53+13:00 (3 years ago)

Author:

cstephen

Message:

Add hold-to-scrub for audio steppers. Split word when pressing space in the middle.

Location:

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

Files:

• AudioTimeBar.vue (modified) (4 diffs)
• TranscriptionItemEditor.vue (modified) (3 diffs)
• WordTimingSelector.vue (modified) (1 diff)

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

@@ -3 +3 @@
     <input type="range" class="slider-continuous" v-model.number="sliderValue" min="0" :max="audioLength" step="0.01" :disabled="isDisabled" />
 
-    <button type="button" class="btn-fab theme-flat" @click="stepBack" :disabled="isDisabled">
+    <button type="button" class="btn-fab theme-flat" :disabled="isDisabled"
+            @click="stepBack" @mousedown="onStepBackMouseDown" @mouseup="onStepperMouseUp">
         <span class="material-icons mdi-s">arrow_back_ios_new</span>
     </button>
@@ -9 +10 @@
     <span>{{ stringSliderValue }}</span>
 
-    <button type="button" class="btn-fab theme-flat" @click="stepForward" :disabled="isDisabled">
+    <button type="button" class="btn-fab theme-flat" :disabled="isDisabled"
+            @click="stepForward" @mousedown="onStepForwardMouseDown" @mouseup="onStepperMouseUp">
         <span class="material-icons mdi-s">arrow_forward_ios</span>
     </button>
@@ -35 +37 @@
     },
     emits: [ "update:modelValue" ],
+    data() {
+        return {
+            stepperHeld: false,
+            stepperHeldTimeout: null
+        }
+    },
     computed: {
         sliderValue: {
@@ -62 +70 @@
         stepForward() {
             AudioPlayback.scrub(this.modelValue + 0.1);
+        },
+        onStepBackMouseDown() {
+            this.stepperHeldTimeout = setTimeout(() => this.continuousStep(true, this), 500);
+            this.stepperHeld = true;
+        },
+        onStepForwardMouseDown() {
+            this.stepperHeldTimeout = setTimeout(() => this.continuousStep(false, this), 500);
+            this.stepperHeld = true;
+        },
+        onStepperMouseUp() {
+            this.stepperHeld = false;
+            clearTimeout(this.stepperHeldTimeout);
+        },
+        continuousStep(back, vm) {
+            (function run() {
+                if (!vm.stepperHeld) {
+                    return;
+                }
+
+                if (back) {
+                    vm.stepBack();
+                }
+                else {
+                    vm.stepForward();
+                }
+
+                setTimeout(run, 25); // 40hz
+            })();
         }
     }

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

@@ -208 +208 @@
             /** @type {Word} */
             const word = this.words[index];
-
-            if (deletionEvents.includes(event.inputType) && word.word.length === 0) {
-                event.preventDefault(); // Prevents the event from being propagated to the newly focused input
-                this.setFocus(index, event.inputType === "deleteContentBackward"); // Shifting focus off an empty input, hence the word will be removed
+            const inputIndex = this.$refs[word.id].selectionStart;
+
+            if (deletionEvents.includes(event.inputType)) {
+                if (word.word.length === 0) { // Remove the word
+                    this.setFocus(index, event.inputType === "deleteContentBackward"); // Shifting focus off an empty input, hence the word will be removed
+                    event.preventDefault(); // Prevents the event from being propagated to the newly focused input
+                    // TODO: Shuffle timestamps
+                }
+                else if (inputIndex === 0 && event.inputType === "deleteContentBackward") {
+                    // TODO: Join with previous
+                }
+                else if (inputIndex === word.word.length && event.inputType === "deleteContentForward") {
+                    // TODO: Join with next
+                }
             }
 
             if (insertionEvents.includes(event.inputType)) {
-                const inputIndex = this.$refs[word.id].selectionStart;
-
                 if (event.data === " ") { // ONLY whitespace entered. Split or add new word
                     let newWord;
 
-                    if (inputIndex === 0) {
+                    if (inputIndex === 0) { // Insert on left side
                         const newEndTime = word.startTime + (word.endTime - word.startTime) / 2;
                         newWord = new Word("", word.startTime, newEndTime);
@@ -227 +235 @@
                         word.startTime = newEndTime;
                     }
-                    else if (inputIndex === word.word.length) {
+                    else if (inputIndex === word.word.length) { // Insert on right side
                         const newStartTime = word.startTime + ((word.endTime - word.startTime) / 2);
                         newWord = new Word("", newStartTime, word.endTime);
@@ -234 +242 @@
                         word.endTime = newStartTime;
                     }
-                    else {
-                        // Split down middle
+                    else { // Split down the middle
+                        const metadataIndex = this.transcription.metadata.findIndex(m => m.start_time === word.startTime) + inputIndex;
+                        const newStartTime = this.transcription.metadata[metadataIndex].start_time;
+                        newWord = new Word(word.word.slice(inputIndex), newStartTime, word.endTime);
+
+                        this.words.splice(index + 1, 0, newWord);
+                        word.endTime = newStartTime;
+                        word.word = word.word.slice(0, inputIndex);
                     }
 
                     event.preventDefault();
-                    setTimeout(() => this.$refs[newWord.id].focus(), 50); // Give the element time to be mounted before focusing
+                    // Give the element time to be mounted before focusing
+                    setTimeout(
+                        () => {
+                            this.$refs[newWord.id].focus();
+                            this.$refs[newWord.id].selectionStart = 0;
+                            this.$refs[newWord.id].selectionEnd = null;
+                        },
+                        50
+                    );
                 }
                 else if (event.data.includes(" ")) {
-                    // Split input
+                    // TODO: Split input
                 }
             }

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

@@ -191 +191 @@
         },
         shouldHoist(word) {
-            return word.startTime === this.word.startTime && word.word === this.word.word;
+            return word && this.word && word.startTime === this.word.startTime && word.word === this.word.word;
         },
         /**