source: main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/main.js@ 35430

Last change on this file since 35430 was 35430, checked in by cstephen, 3 years ago

Add audio length to playback state.
Disable audio time bar when irrelevant.

File size: 4.9 KB
Line 
1import { createApp } from "vue";
2import { createStore } from "vuex"
3import App from "./App.vue";
4import ToggleButton from "./components/ToggleButton.vue"
5import Util from "./js/Util"
6
7export class TranscriptionViewModel {
8 /**
9 * Initialises a new instance of the {@link TranscriptionViewModel} class.
10 *
11 * @param {TranscriptionModel} transcription
12 * @param {File} file The file from which the transcription was generated.
13 */
14 constructor(transcription, file) {
15 /** @type {String} The UUID of this transcription. */
16 this.id = Util.generateUuid();
17
18 /** @type {String} The transcription. */
19 this.transcription = transcription.transcription;
20
21 /** @type {String} The name of the file from which the transcription was generated. */
22 this.fileName = transcription.file_name;
23
24 /** @type {TranscriptionMetadata[]} The transcription metadata. */
25 this.metadata = transcription.metadata;
26
27 /** @type {File} The file from which the transcription was generated. */
28 this.file = file;
29 }
30}
31
32export class PlaybackState {
33 /**
34 * Initialises a new instance of the {@link PlaybackState} class.
35 * @param {String} id The ID of the transcription for which audio is being played.
36 * @param {Boolean} isPlaying A value indicating if audio is currently being played.
37 * @param {Number} currentTime The current time in the audio playback.
38 * @param {Number} length The length of the audio track.
39 */
40 constructor(id = "", isPlaying = false, currentTime = 0, length = 0) {
41 /** @type {String} The ID of the transcription for which audio is currently being played. */
42 this.id = id;
43
44 /** @type {Boolean} Gets a value indicating if audio is currently being played back. */
45 this.isPlaying = isPlaying;
46
47 /** @type {Number} Gets the current time in the playback. */
48 this.currentTime = currentTime;
49
50 /** @type {Number} Gets the length of the current audio track. */
51 this.length = length;
52 }
53}
54
55const store = createStore({
56 state() {
57 return {
58 /** @type {Map<String, String>} */
59 translations: new Map(),
60 /** @type {Map<String, TranscriptionViewModel>} */
61 rawTranscriptions: new Map(),
62 playbackState: new PlaybackState()
63 }
64 },
65 mutations: {
66 /**
67 * Adds a new transcription to the store.
68 * @param {*} state The state of the store.
69 * @param {TranscriptionViewModel} transcription The transcription's view model object.
70 */
71 transcriptionAdd(state, transcription) {
72 state.rawTranscriptions.set(transcription.id, transcription);
73 },
74
75 /**
76 * Removes a transcription from the store.
77 * @param {*} state The state of the store.
78 * @param {String} id The UUID of the transcription.
79 */
80 transcriptionRemove(state, id) {
81 state.rawTranscriptions.delete(id);
82 },
83
84 /**
85 * Sets the current playback state.
86 * @param {*} state The state of the store.
87 * @param {PlaybackState} playbackState The new playback state.
88 */
89 setPlaybackState(state, playbackState) {
90 state.playbackState = playbackState;
91 },
92 setCurrentlyPlaying(state, isPlaying) {
93 state.playbackState.isPlaying = isPlaying;
94 },
95 setCurrentPlaybackTime(state, time) {
96 state.playbackState.currentTime = time;
97 },
98 setCurrentlyPlayingId(state, id) {
99 state.playbackState.id = id;
100 },
101 setTranslations(state, translations) {
102 state.translations = translations;
103 }
104 }
105});
106
107createApp(App)
108 .use(store)
109 .component("ToggleButton", ToggleButton)
110 .mount("#app");
111
112/* === Get interface translations === */
113
114/** @type {Map<String, String>} */
115const translations = new Map();
116
117/* We might be running under Greenstone, so pull the tranlsations from there if so */
118/* eslint-disable no-undef */
119if (typeof gs !== "undefined" && gs.text && gs.text.atea) {
120 for (const key in gs.text.atea) {
121 translations.set(key, gs.text.atea[key]);
122 }
123
124 store.commit("setTranslations", translations)
125}
126/* eslint-enable no-undef */
127else {
128 fetch("resources/interface_atea.properties")
129 .then(async response => {
130 const responseText = await response.text();
131 const responseTranslations = responseText.split("\n");
132
133 for (const translation of responseTranslations) {
134 const components = translation.split("=");
135
136 if (components[0] === "") {
137 continue;
138 }
139
140 const namespaceEndIndex = components[0].lastIndexOf(".");
141 translations.set(components[0].slice(namespaceEndIndex + 1), components[1]);
142 }
143
144 store.commit("setTranslations", translations)
145 });
146}
Note: See TracBrowser for help on using the repository browser.