Changeset 35445 for main/trunk

Timestamp:

2021-09-21T14:36:58+12:00 (3 years ago)

Author:

cstephen

Message:

Create AudioPlaybackModule

Location:

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

Files:

• App.vue (modified) (1 diff)
• components/TranscriptionItem.vue (modified) (2 diffs)
• components/TranscriptionItemEditor.vue (modified) (1 diff)
• js/AudioPlaybackModule.js (added)
• main.js (modified) (4 diffs)
• styles/_material.scss (modified) (2 diffs)
• styles/theme.scss (modified) (2 diffs)

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

@@ -154 +154 @@
         if (audioElement.currentTime !== lastTime) {
             lastTime = audioElement.currentTime;
-            store.commit("setCurrentPlaybackTime", lastTime);
-            store.commit("setCurrentlyPlaying", true);
+            store.commit("playbackStateSetCurrentTime", lastTime);
+            store.commit("playbackStateSetIsPlaying", true);
         }
         else {
-            store.commit("setCurrentlyPlaying", false);
+            store.commit("playbackStateSetIsPlaying", false);
         }
 

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" title="Play Audio">
-                <span class="material-icons mdi-l">play_arrow</span>
+            <button class="btn-fab" v-on:click="playAudio(-1)" type="button" title="Play Audio">
+                <span class="material-icons mdi-l play-button" v-if="!isPlaying">play_arrow</span>
+                <span class="material-icons mdi-l play-button" v-if="isPlaying">pause</span>
             </button>
 
@@ -113 +114 @@
     },
     computed: mapState({
-        translations: state => state.translations
+        translations: state => state.translations,
+        isPlaying: state => state.playbackState.isPlaying
     }),
     methods: {

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

@@ -130 +130 @@
             },
             set(value) {
-                this.$store.commit("setCurrentPlaybackTime", value);
+                this.$store.commit("playbackStateSetCurrentTime", value);
             }
         },

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

@@ -1 +1 @@
 import { createApp } from "vue";
 import { createStore } from "vuex"
+import AudioPlayback from "./js/AudioPlaybackModule";
 import App from "./App.vue";
 import ToggleButton from "./components/ToggleButton.vue"
@@ -94 +95 @@
         },
 
+        playbackStateSetID(state, id) {
+            state.playbackState.id = id;
+        },
+        playbackStateSetIsPlaying(state, isPlaying) {
+            state.playbackState.isPlaying = isPlaying;
+        },
+        playbackStateSetCurrentTime(state, time) {
+            state.playbackState.currentTime = time;
+        },
+
         /**
          * Sets the current playback state.
@@ -101 +112 @@
         setPlaybackState(state, playbackState) {
             state.playbackState = playbackState;
-        },
-        setCurrentlyPlaying(state, isPlaying) {
-            state.playbackState.isPlaying = isPlaying;
-        },
-        setCurrentPlaybackTime(state, time) {
-            state.playbackState.currentTime = time;
-        },
-        setCurrentlyPlayingId(state, id) {
-            state.playbackState.id = id;
         },
         setTranslations(state, translations) {
@@ -122 +124 @@
     }
 });
+
+AudioPlayback.initialise(store);
 
 createApp(App)

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

@@ -5 +5 @@
 
 :root {
+    // Set these to adjust the colour palette
     --primary-bg-color-l1: 36, 156, 207;
     --primary-bg-color: 33, 145, 192;
@@ -25 +26 @@
     --transition-duration: 0.15s;
 
-
+    // Default theme
     @extend .theme-primary;
 }

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

@@ -14 +14 @@
 
 :root {
-    --monospace-font: 16px 'Roboto Mono', sans-serif;
+    --monospace-font: 1rem 'Roboto Mono', sans-serif;
     --page-bg-color: #f7f4f0;
 }
@@ -21 +21 @@
     background-color: var(--page-bg-color);
     font-family: 'Roboto', sans-serif;
-    font-size: 16px;
     
     margin: 0;