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

Timestamp:

2021-10-01T16:35:55+13:00 (3 years ago)

Author:

cstephen

Message:

Refactor the audio bar and transcription edit button to the TranscriptionItem component

File:

• main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItem.vue (modified) (5 diffs)

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

@@ -43 +43 @@
         <hr />
 
-        <TranscriptionItemEditor ref="editor" :transcription="transcription" style="margin-bottom: 1em" />
+        <TranscriptionItemEditor ref="editor" :transcription="transcription" style="margin-bottom: 1em" :enableEditing="enableEditing" />
+
+        <div class="editor-controls">
+            <audio-time-bar v-model.number="currentPlaybackTime" :audio-length="audioLength" :isDisabled="playbackState.id != transcription.id" />
+
+            <toggle-button v-model="enableEditing" :title="translations.get('TranscriptionItemEditor_ToggleEditTooltip')">
+                <span class="material-icons">edit</span>
+            </toggle-button>
+        </div>
     </div>
 </template>
@@ -78 +86 @@
 }
 
-.expander-toggle {
-    transition-duration: 0.4s;
+.editor-controls {
+    display: grid;
+    align-items: center;
+    grid-template-columns: 1fr auto;
+    margin: 0.5em 0 0.3em 0;
+    gap: 1em;
 }
 
@@ -93 +105 @@
 import AudioPlayback from "../js/AudioPlaybackModule"
 import Util from "../js/Util"
+import AudioTimeBar from "./AudioTimeBar.vue"
 import TranscriptionItemEditor from "./TranscriptionItemEditor.vue"
 
@@ -98 +111 @@
     name: "TranscriptionItem",
     components: {
+        AudioTimeBar,
         TranscriptionItemEditor
     },
@@ -105 +119 @@
     data() {
         return {
+            enableEditing: false,
             showDownloadOptions: false
         }
     },
-    computed: mapState({
-        translations: state => state.translations,
-        isPlaying(state) {
-            return state.playbackState.isPlaying && state.playbackState.id === this.transcription.id
-        }
-    }),
+    computed: {
+        currentPlaybackTime: {
+            get() {
+                return this.$store.getters.transcriptionPlaybackTime(this.transcription.id);
+            },
+            set(value) {
+                this.$store.commit("playbackStateSetTime", { id: this.transcription.id, time: value });
+            }
+        },
+        audioLength() {
+            return this.$store.getters.transcriptionPlaybackLength(this.transcription.id);
+        },
+        isPlaying() {
+            return this.playbackState.isPlaying && this.playbackState.id === this.transcription.id;
+        },
+        ...mapState({
+            translations: state => state.translations,
+            playbackState: state => state.playbackState
+        })
+    },
     methods: {
         async toggleAudio() {