Changeset 35383

Timestamp:

2021-09-14T10:55:28+12:00 (3 years ago)

Author:

davidb

Message:

Implement basic transcription editing

Location:

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

Files:

• package-lock.json (modified) (1 diff)
• package.json (modified) (1 diff)
• public/interface_atea.properties (added)
• src/components/TranscriptionItemEditor.vue (modified) (7 diffs)
• src/styles/_material.scss (modified) (1 diff)
• src/styles/theme.scss (modified) (1 diff)

main/trunk/model-interfaces-dev/atea/korero-maori-asr/package-lock.json

@@ -11938 +11938 @@
       }
     },
-    "vue-contenteditable": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/vue-contenteditable/-/vue-contenteditable-3.0.4.tgz",
-      "integrity": "sha512-CmtqT4zHQwLoJEyNVaXUjjUFPUVYlXXBHfSbRCHCUjODMqrn6L293LM1nc1ELx8epitZZvecTfIqOLlSzB3d+w=="
-    },
     "vue-eslint-parser": {
       "version": "7.10.0",

main/trunk/model-interfaces-dev/atea/korero-maori-asr/package.json

@@ -11 +11 @@
     "core-js": "^3.16.4",
     "vue": "^3.0.0",
-    "vue-contenteditable": "^3.0.4",
     "vuex": "^4.0.2"
   },

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

@@ -31 +31 @@
         <ul class="list-view" v-if="displayMode == 'editor'">
             <li v-for="(word, index) in words" :key="word.id" class="word-container">
-                <contenteditable class="editor-word" tag="span" v-model="word.word" :noNL="true" :noHTML="true" @input="onEditorInput($event, index)" />
+                <input :size="word.word.length <= 1 ? 1 : word.word.length - 1" :ref="word.id"
+                    class="editor-word" v-model="word.word" type="text"
+                    @input="onEditorInput($event, index)" @focusout="onEditorFocusOut(index)" />
                 <span>&nbsp;</span>
             </li>
         </ul>
-        <!-- <ul class="list-view" v-if="displayMode == 'editor'">
-            <li v-for="(word, index) in transcription.words" class="transcription__word-container">
-                <span class="transcription__word" v-on:input="onEditorWordInput($event, word.word)" contenteditable="true" v-text="word.word" />
-                <input type="text" v-bind:size="word.word.length == 1 ? 1 : word.word.length - 1" v-model="word.word"
-                    class="transcription__word" v-on:input="onEditorWordInput($event, index, id)" />
-                <span>&nbsp;</span>
-            </li>
-        </ul> -->
     </div>
 </template>
@@ -72 +66 @@
 .editor-word {
     border: 1px solid black;
+    border-radius: 2px;
     padding: 2px;
-    min-width: 5px;
+    font-family: inherit;
+    font-size: 1rem;
 }
 </style>
@@ -79 +75 @@
 <script>
 import { mapState } from "vuex";
-import contenteditable from "vue-contenteditable"
 import { TranscriptionViewModel } from "../main";
 import Util from "../js/Util";
@@ -111 +106 @@
 export default {
     name: "TranscriptionItemEditor",
-    components: {
-        contenteditable
-    },
     props: {
         transcription: TranscriptionViewModel
@@ -140 +132 @@
          */
         onEditorInput(event, index) {
+            console.log(event);
+
             /** @type {Word} */
             const word = this.words[index];
+
             if (event.inputType === "insertText") {
                 if (event.data === " ") {
                     word.word = word.word.replace(" ", "");
-                    // TODO: Proper timing
-                    this.words.splice(index + 1, 0, new Word("", word.startTime, word.endTime));
+
+                    // TODO: Proper timing metadata
+                    const newWord = new Word("", word.startTime, word.endTime);
+                    this.words.splice(index + 1, 0, newWord);
+
+                    // We have to give the element some time to render, even though the ref is registered immediately
+                    setTimeout(() => this.$refs[newWord.id].focus(), 50);
                 }
             }
-            console.log(index);
+        },
+        onEditorFocusOut(index) {
+            if (this.words[index].word === "") {
+                this.words.splice(index, 1);
+            }
         }
     },
@@ -192 +196 @@
     for (const metadata of transcription.metadata) {
         if (metadata.char === " ") {
-            words.push({ word: lastWord, startTime: currStartTime, endTime: metadata.start_time, shouldHighlight: false });
+            words.push(new Word(lastWord, currStartTime, metadata.start_time));
 
             lastWord = "";
@@ -204 +208 @@
     // Push the last word, as most transcriptions will not end in a space (hence breaking the above algorithm)
     if (lastWord.length > 0) {
-        words.push(new Word(lastWord, currStartTime, transcription.metadata[transcription.metadata.length - 1].start_time));
+        const newWord = new Word(lastWord, currStartTime, transcription.metadata[transcription.metadata.length - 1].start_time)
+        words.push(newWord);
     }
 

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

@@ -10 +10 @@
 :root {
     --primary-bg-color-l1: #249ccf;
-    --primary-bg-color: #2191c0;
-    --primary-bg-color-d1: #2785ad;
-    --primary-bg-color-d2: #227497;
+    --primary-bg-color: #21c05e; // #21c05e
 
     --primary-fg-color: white;

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

@@ -6 +6 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;700&display=swap');
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
 
 :root {