Changeset 35450

Timestamp:

2021-09-22T14:03:14+12:00 (3 years ago)

Author:

cstephen

Message:

Keep playback state when switching audio tracks

Location:

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

Files:

• components/AudioTimeBar.vue (modified) (2 diffs)
• components/TranscriptionItemEditor.vue (modified) (3 diffs)
• js/AudioPlaybackModule.js (modified) (3 diffs)
• main.js (modified) (4 diffs)

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

@@ -1 +1 @@
 <template>
 <div class="root">
-    <input type="range" class="slider-continuous" v-model.number="sliderValue" :max="audioLength" step="0.01" :disabled="isDisabled" />
+    <input type="range" class="slider-continuous" v-model.number="sliderValue" min="0" :max="audioLength" step="0.01" :disabled="isDisabled" />
     <span>{{ stringSliderValue }}</span>
 </div>
@@ -28 +28 @@
         sliderValue: {
             get() {
-                if (this.modelValue < 0 || this.isDisabled) {
-                    return 0;
-                }
-
                 if (this.modelValue > this.audioLength) {
                     return this.audioLength;
                 }
-
-                return this.modelValue;
+                else if (this.modelValue < 0) {
+                    return 0;
+                }
+                else {
+                    return this.modelValue;
+                }
             },
             set(newValue) {

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

@@ -21 +21 @@
 
     <div class="editor-controls">
-        <audio-time-bar v-model.number="currentPlaybackTime" :audio-length="playbackState.length" :isDisabled="playbackState.id != transcription.id" />
+        <audio-time-bar v-model.number="currentPlaybackTime" :audio-length="audioLength" :isDisabled="playbackState.id != transcription.id" />
 
         <toggle-button v-model="enableEditing" title="Toggle Edit Mode">
@@ -129 +129 @@
         currentPlaybackTime: {
             get() {
-                return this.$store.state.playbackState.currentTime;
+                return this.$store.getters.transcriptionPlaybackTime(this.transcription.id);
             },
             set(value) {
-                this.$store.commit("playbackStateSetCurrentTime", value);
-            }
+                this.$store.commit("playbackStateSetTime", { id: this.transcription.id, time: value });
+            }
+        },
+        audioLength() {
+            return this.$store.getters.transcriptionPlaybackLength(this.transcription.id);
         },
         ...mapState({
@@ -169 +172 @@
         onEditorFocus(index) {
             const wordStartTime = this.words[index].startTime + 0.01;
-            this.$store.commit("playbackStateSetCurrentTime", wordStartTime);
+            this.$store.commit("playbackStateSetTime", { id: this.transcription.id, time: wordStartTime });
         },
         onEditorFocusOut(index) {

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

@@ -32 +32 @@
         if (audioElement.currentTime !== lastTime) {
             lastTime = audioElement.currentTime;
-            store.commit("playbackStateSetCurrentTime", lastTime);
+            store.commit("playbackStateSetTime", { id: store.state.playbackState.id, time: lastTime });
         }
 
@@ -84 +84 @@
      */
     static async play(id, startTime = -1) {
-        const playbackState = this.store.state.playbackState;
+        const playbackTimes = this.store.state.playbackState.playbackTimes;
 
         let playbackTime = startTime;
-        if (playbackState.id === id && startTime < 0) {
-            playbackTime = playbackState.currentTime;
+        if (playbackTimes.has(id) && startTime < 0) {
+            playbackTime = playbackTimes.get(id);
         }
 
@@ -100 +100 @@
         await this.player.play();
 
-        this.store.commit("playbackStateSetLength", this.player.duration);
+        this.store.commit("playbackStateSetLength", { id: id, time: this.player.duration });
         this.store.commit("playbackStateSetIsPlaying", true);
     }
 
+    /**
+     * Pauses playback.
+     */
     static pause() {
         this.player.pause();

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

@@ -42 +42 @@
      * @param {Number} length The length of the audio track.
      */
-    constructor(id = "", isPlaying = false, currentTime = 0, length = 0) {
+    constructor(id = "", isPlaying = false, length = 0) {
         /** @type {String} The ID of the transcription for which audio is currently being played. */
         this.id = id;
@@ -49 +49 @@
         this.isPlaying = isPlaying;
 
-        /** @type {Number} Gets the current time in the playback. */
-        this.currentTime = currentTime;
+        /** @type {Map<String, Number} The current playback time of each transcription's audio. */
+        this.playbackTimes = new Map();
 
-        /** @type {Number} Gets the length of the current audio track. */
-        this.length = length;
+        /** @type {Map<String, Number} The length of each transcription's audio. */
+        this.playbackLengths = new Map();
     }
 }
@@ -101 +101 @@
             state.playbackState.isPlaying = isPlaying;
         },
-        playbackStateSetCurrentTime(state, time) {
-            state.playbackState.currentTime = time;
+        playbackStateSetTime(state, object) {
+            state.playbackState.playbackTimes.set(object.id, object.time);
         },
-        playbackStateSetLength(state, length) {
-            state.playbackState.length = length;
+        playbackStateSetLength(state, object) {
+            state.playbackState.playbackLengths.set(object.id, object.time);
         },
 
@@ -116 +116 @@
             const id = TranscriptionViewModel.getId(file);
             return state.rawTranscriptions.has(id);
+        },
+        transcriptionPlaybackTime: (state) => (id) => {
+            return state.playbackState.playbackTimes.has(id) ? state.playbackState.playbackTimes.get(id) : 0;
+        },
+        transcriptionPlaybackLength: (state) => (id) => {
+            return state.playbackState.playbackLengths.has(id) ? state.playbackState.playbackLengths.get(id) : 0;
         }
     }