Changeset 35408 for main

Timestamp:

2021-09-16T10:06:12+12:00 (3 years ago)

Author:

cstephen

Message:

Fix word highlighting occuring globally

Location:

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

Files:

• App.vue (modified) (3 diffs)
• components/AudioUpload.vue (modified) (1 diff)
• components/TranscriptionItemEditor.vue (modified) (3 diffs)
• main.js (modified) (4 diffs)

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

@@ -63 +63 @@
 
 <script>
+import { mapState } from "vuex";
 import AudioUpload from "./components/AudioUpload.vue"
 import TranscriptionItem from "./components/TranscriptionItem.vue"
@@ -78 +79 @@
         }
     },
-    computed: {
-        transcriptions() {
-            return this.$store.state.rawTranscriptions;
-        }
-    },
+    computed: mapState({
+        translations: state => state.translations,
+        transcriptions: state => state.rawTranscriptions,
+        playbackState: state => state.playbackState
+    }),
     methods: {
         /**
@@ -96 +97 @@
             }
 
+            this.$store.commit("setCurrentlyPlayingId", event.id);
+
             this.$refs.audioPlayer.currentTime = event.time;
             this.$refs.audioPlayer.play();
+        }
+    },
+    watch: {
+        playbackState(newValue) {
+            console.log("Playback state changed.");
         }
     },

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

@@ -3 +3 @@
     <div class="audio-file-picker">
         <div class="input-bar">
-            <!-- <button type="button" v-on:click="openFilePicker">
-                <span class="material-icons">&#xE2C6;</span> file_upload
-                <span>Upload Audio Files</span>
-            </button>-->
-
             <div class="text-input-sl" style="cursor: pointer;" @click="openFilePicker">
                 <span class="text-placeholder material-icons" v-if="!anyFiles">&#xe226;</span> <!-- attach_file -->

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

@@ -121 +121 @@
     emits: [ "playAudio" ],
     computed: mapState({
-        currentPlaybackTime: state => state.currentPlaybackTime,
+        playbackState: state => state.playbackState,
+        currentPlaybackTime: state => state.playbackState.currentTime,
         translations: state => state.translations
     }),
@@ -233 +234 @@
             this.words[this.lastHighlightedWord].shouldHighlight = false;
 
-            if (!this.$store.state.isCurrentlyPlaying) {
-                return -1;
+            if (!this.playbackState.isPlaying || this.playbackState.id !== this.transcription.id) {
+                return;
             }
 
@@ -240 +241 @@
                 word.shouldHighlight = word.startTime < newValue && word.endTime > newValue;
             }
-
-            return -1;
         }
     },

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

@@ -29 +29 @@
 }
 
+export class PlaybackState {
+    constructor() {
+        /** @type {String} The ID of the transcription for which audio is currently being played. */
+        this.id = "";
+
+        /** @type {Boolean} Gets a value indicating if audio is currently being played back. */
+        this.isPlaying = false;
+
+        /** @type {Number} Gets the current time in the playback. */
+        this.currentTime = -1;
+    }
+}
+
 const store = createStore({
     state() {
@@ -36 +49 @@
             /** @type {Map<String, TranscriptionViewModel>} */
             rawTranscriptions: new Map(),
-            isCurrentlyPlaying: false,
-            currentPlaybackTime: -1
+            playbackState: new PlaybackState()
         }
     },
@@ -49 +61 @@
             state.rawTranscriptions.set(transcription.id, transcription);
         },
+
+        /**
+         * Removes a transcription from the store.
+         * @param {*} state The state of the store.
+         * @param {String} id The UUID of the transcription.
+         */
         transcriptionRemove(state, id) {
             state.rawTranscriptions.delete(id);
         },
+
+        /**
+         * Sets the current playback state.
+         * @param {*} state The state of the store.
+         * @param {PlaybackState} playbackState The new playback state.
+         */
+        setPlaybackState(state, playbackState) {
+            state.playbackState = playbackState;
+        },
         setCurrentlyPlaying(state, isPlaying) {
-            state.isCurrentlyPlaying = isPlaying;
+            state.playbackState.isPlaying = isPlaying;
         },
         setCurrentPlaybackTime(state, time) {
-            state.currentPlaybackTime = time;
+            state.playbackState.currentTime = time;
+        },
+        setCurrentlyPlayingId(state, id) {
+            state.playbackState.id = id;
         },
         setTranslations(state, translations) {
@@ -67 +97 @@
     .use(store)
     .mount("#app");
+
+/* === Get interface translations === */
 
 /** @type {Map<String, String>} */