Changeset 35408
- Timestamp:
- 2021-09-16T10:06:12+12:00 (3 years ago)
- Location:
- main/trunk/model-interfaces-dev/atea/korero-maori-asr/src
- Files:
-
- 4 edited
Legend:
- Unmodified
- Added
- Removed
-
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/App.vue
r35407 r35408 63 63 64 64 <script> 65 import { mapState } from "vuex"; 65 66 import AudioUpload from "./components/AudioUpload.vue" 66 67 import TranscriptionItem from "./components/TranscriptionItem.vue" … … 78 79 } 79 80 }, 80 computed: {81 trans criptions() {82 return this.$store.state.rawTranscriptions;83 }84 } ,81 computed: mapState({ 82 translations: state => state.translations, 83 transcriptions: state => state.rawTranscriptions, 84 playbackState: state => state.playbackState 85 }), 85 86 methods: { 86 87 /** … … 96 97 } 97 98 99 this.$store.commit("setCurrentlyPlayingId", event.id); 100 98 101 this.$refs.audioPlayer.currentTime = event.time; 99 102 this.$refs.audioPlayer.play(); 103 } 104 }, 105 watch: { 106 playbackState(newValue) { 107 console.log("Playback state changed."); 100 108 } 101 109 }, -
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/AudioUpload.vue
r35407 r35408 3 3 <div class="audio-file-picker"> 4 4 <div class="input-bar"> 5 <!-- <button type="button" v-on:click="openFilePicker">6 <span class="material-icons"></span> file_upload7 <span>Upload Audio Files</span>8 </button>-->9 10 5 <div class="text-input-sl" style="cursor: pointer;" @click="openFilePicker"> 11 6 <span class="text-placeholder material-icons" v-if="!anyFiles"></span> <!-- attach_file --> -
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue
r35405 r35408 121 121 emits: [ "playAudio" ], 122 122 computed: mapState({ 123 currentPlaybackTime: state => state.currentPlaybackTime, 123 playbackState: state => state.playbackState, 124 currentPlaybackTime: state => state.playbackState.currentTime, 124 125 translations: state => state.translations 125 126 }), … … 233 234 this.words[this.lastHighlightedWord].shouldHighlight = false; 234 235 235 if (!this. $store.state.isCurrentlyPlaying) {236 return -1;236 if (!this.playbackState.isPlaying || this.playbackState.id !== this.transcription.id) { 237 return; 237 238 } 238 239 … … 240 241 word.shouldHighlight = word.startTime < newValue && word.endTime > newValue; 241 242 } 242 243 return -1;244 243 } 245 244 }, -
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/main.js
r35399 r35408 29 29 } 30 30 31 export class PlaybackState { 32 constructor() { 33 /** @type {String} The ID of the transcription for which audio is currently being played. */ 34 this.id = ""; 35 36 /** @type {Boolean} Gets a value indicating if audio is currently being played back. */ 37 this.isPlaying = false; 38 39 /** @type {Number} Gets the current time in the playback. */ 40 this.currentTime = -1; 41 } 42 } 43 31 44 const store = createStore({ 32 45 state() { … … 36 49 /** @type {Map<String, TranscriptionViewModel>} */ 37 50 rawTranscriptions: new Map(), 38 isCurrentlyPlaying: false, 39 currentPlaybackTime: -1 51 playbackState: new PlaybackState() 40 52 } 41 53 }, … … 49 61 state.rawTranscriptions.set(transcription.id, transcription); 50 62 }, 63 64 /** 65 * Removes a transcription from the store. 66 * @param {*} state The state of the store. 67 * @param {String} id The UUID of the transcription. 68 */ 51 69 transcriptionRemove(state, id) { 52 70 state.rawTranscriptions.delete(id); 53 71 }, 72 73 /** 74 * Sets the current playback state. 75 * @param {*} state The state of the store. 76 * @param {PlaybackState} playbackState The new playback state. 77 */ 78 setPlaybackState(state, playbackState) { 79 state.playbackState = playbackState; 80 }, 54 81 setCurrentlyPlaying(state, isPlaying) { 55 state. isCurrentlyPlaying = isPlaying;82 state.playbackState.isPlaying = isPlaying; 56 83 }, 57 84 setCurrentPlaybackTime(state, time) { 58 state.currentPlaybackTime = time; 85 state.playbackState.currentTime = time; 86 }, 87 setCurrentlyPlayingId(state, id) { 88 state.playbackState.id = id; 59 89 }, 60 90 setTranslations(state, translations) { … … 67 97 .use(store) 68 98 .mount("#app"); 99 100 /* === Get interface translations === */ 69 101 70 102 /** @type {Map<String, String>} */
Note:
See TracChangeset
for help on using the changeset viewer.