Changeset 35409 for main

Timestamp:

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

Author:

cstephen

Message:

Refactor to use state-based audio playback

Location:

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

Files:

• App.vue (modified) (2 diffs)
• components/TranscriptionItem.vue (modified) (5 diffs)
• components/TranscriptionItemEditor.vue (modified) (3 diffs)
• main.js (modified) (1 diff)

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

@@ -14 +14 @@
         <transition-group name="transcription-list">
             <li class="list-item transcription-list-item" v-for="[id, transcription] in transcriptions" :key="id">
-                <TranscriptionItem :transcription="transcription" @playAudio="playAudio($event)" />
+                <TranscriptionItem :transcription="transcription" />
             </li>
         </transition-group>
@@ -82 +82 @@
         translations: state => state.translations,
         transcriptions: state => state.rawTranscriptions,
-        playbackState: state => state.playbackState
+        playbackState: state => state.playbackState,
+        shouldPlayAudio: state => state.playbackState.isPlaying
     }),
-    methods: {
-        /**
-         * Plays transcription audio.
-         * @param {{id: String, time: Number}} event The playback request event.
-         */
-        playAudio(event) {
-            const transcription = this.transcriptions.get(event.id);
+    watch: {
+        playbackState(newValue) {
+            if (!newValue.isPlaying) {
+                return;
+            }
+
+            const transcription = this.transcriptions.get(newValue.id);
             loadTranscriptionAudio(this.$refs.audioPlayer, this.$refs.audioPlayerSource, transcription, this.currentlyLoadedAudio);
 
-            if (event.time < 0) {
-                event.time = 0;
+            let playbackTime = 0;
+            if (newValue.currentTime > 0) {
+                playbackTime = newValue.currentTime;
             }
 
-            this.$store.commit("setCurrentlyPlayingId", event.id);
-
-            this.$refs.audioPlayer.currentTime = event.time;
+            this.$refs.audioPlayer.currentTime = playbackTime;
             this.$refs.audioPlayer.play();
-        }
-    },
-    watch: {
-        playbackState(newValue) {
-            console.log("Playback state changed.");
-        }
+        }//,
+        // shouldPlayAudio(newValue) {
+        //     if (newValue && this.$refs.audioPlayer.paused) {
+        //         this.$refs.audioPlayer.play();
+        //     }
+        //     else if (!newValue && !this.$refs.audioPlayer.paused) {
+        //         this.$refs.audioPlayer.pause();
+        //     }
+        // }
     },
     mounted() {

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

@@ -3 +3 @@
         <!-- Header containing info and actions for the transcription -->
         <div class="transcription__header">
-            <button class="btn-fab" v-on:click="playAudio(0)" type="button">
+            <button class="btn-fab" v-on:click="playAudio" type="button">
                 <span class="material-icons mdi-l">play_arrow</span>
             </button>
@@ -40 +40 @@
         </div>
 
-        <TranscriptionItemEditor :transcription="transcription" @playAudio="playAudio($event)" />
+        <TranscriptionItemEditor :transcription="transcription" />
 
         <hr />
@@ -96 +96 @@
 import { saveAs } from "file-saver"
 import TranscriptionItemEditor, { getWords } from "./TranscriptionItemEditor.vue"
-import { TranscriptionViewModel } from "../main";
+import { TranscriptionViewModel, PlaybackState } from "../main";
 
 export default {
@@ -106 +106 @@
         transcription: TranscriptionViewModel
     },
-    emits: [ "playAudio" ],
     data() {
         return {
@@ -121 +120 @@
         },
         playAudio(startTime = 0) {
-            this.$emit("playAudio", { id: this.transcription.id, time: startTime });
+            const pState = new PlaybackState(this.transcription.id, true, startTime);
+            this.$store.commit("setPlaybackState", pState);
         },
         remove() {

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

@@ -76 +76 @@
 <script>
 import { mapState } from "vuex";
-import { TranscriptionViewModel } from "../main";
+import { TranscriptionViewModel, PlaybackState } from "../main";
 import Util from "../js/Util";
 
@@ -119 +119 @@
         }
     },
-    emits: [ "playAudio" ],
     computed: mapState({
         playbackState: state => state.playbackState,
@@ -127 +126 @@
     methods: {
         playAudio(startTime) {
-            this.$emit("playAudio", startTime);
+            const pState = new PlaybackState(this.transcription.id, true, startTime);
+            this.$store.commit("setPlaybackState", pState);
         },
         /**

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

@@ -30 +30 @@
 
 export class PlaybackState {
-    constructor() {
+    /**
+     * Initialises a new instance of the {@link PlaybackState} class.
+     * @param {String} id The ID of the transcription for which audio is being played.
+     * @param {Boolean} isPlaying A value indicating if audio is currently being played.
+     * @param {Numbe} currentTime The current time in the audio playback.
+     */
+    constructor(id = "", isPlaying = false, currentTime = -1) {
         /** @type {String} The ID of the transcription for which audio is currently being played. */
-        this.id = "";
+        this.id = id;
 
         /** @type {Boolean} Gets a value indicating if audio is currently being played back. */
-        this.isPlaying = false;
+        this.isPlaying = isPlaying;
 
         /** @type {Number} Gets the current time in the playback. */
-        this.currentTime = -1;
+        this.currentTime = currentTime;
     }
 }