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

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

Improve audio time bar implementation

File size: 4.7 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 {Numbe} currentTime The current time in the audio playback.
38 */
39 constructor(id = "", isPlaying = false, currentTime = 0) {
40 /** @type {String} The ID of the transcription for which audio is currently being played. */
41 this.id = id;
42
43 /** @type {Boolean} Gets a value indicating if audio is currently being played back. */
44 this.isPlaying = isPlaying;
45
46 /** @type {Number} Gets the current time in the playback. */
47 this.currentTime = currentTime;
48 }
49}
50
51const store = createStore({
52 state() {
53 return {
54 /** @type {Map<String, String>} */
55 translations: new Map(),
56 /** @type {Map<String, TranscriptionViewModel>} */
57 rawTranscriptions: new Map(),
58 playbackState: new PlaybackState()
59 }
60 },
61 mutations: {
62 /**
63 * Adds a new transcription to the store.
64 * @param {*} state The state of the store.
65 * @param {TranscriptionViewModel} transcription The transcription's view model object.
66 */
67 transcriptionAdd(state, transcription) {
68 state.rawTranscriptions.set(transcription.id, transcription);
69 },
70
71 /**
72 * Removes a transcription from the store.
73 * @param {*} state The state of the store.
74 * @param {String} id The UUID of the transcription.
75 */
76 transcriptionRemove(state, id) {
77 state.rawTranscriptions.delete(id);
78 },
79
80 /**
81 * Sets the current playback state.
82 * @param {*} state The state of the store.
83 * @param {PlaybackState} playbackState The new playback state.
84 */
85 setPlaybackState(state, playbackState) {
86 state.playbackState = playbackState;
87 },
88 setCurrentlyPlaying(state, isPlaying) {
89 state.playbackState.isPlaying = isPlaying;
90 },
91 setCurrentPlaybackTime(state, time) {
92 state.playbackState.currentTime = time;
93 },
94 setCurrentlyPlayingId(state, id) {
95 state.playbackState.id = id;
96 },
97 setTranslations(state, translations) {
98 state.translations = translations;
99 }
100 }
101});
102
103createApp(App)
104 .use(store)
105 .component("ToggleButton", ToggleButton)
106 .mount("#app");
107
108/* === Get interface translations === */
109
110/** @type {Map<String, String>} */
111const translations = new Map();
112
113/* We might be running under Greenstone, so pull the tranlsations from there if so */
114/* eslint-disable no-undef */
115if (typeof gs !== "undefined" && gs.text && gs.text.atea) {
116 for (const key in gs.text.atea) {
117 translations.set(key, gs.text.atea[key]);
118 }
119
120 store.commit("setTranslations", translations)
121}
122/* eslint-enable no-undef */
123else {
124 fetch("resources/interface_atea.properties")
125 .then(async response => {
126 const responseText = await response.text();
127 const responseTranslations = responseText.split("\n");
128
129 for (const translation of responseTranslations) {
130 const components = translation.split("=");
131
132 if (components[0] === "") {
133 continue;
134 }
135
136 const namespaceEndIndex = components[0].lastIndexOf(".");
137 translations.set(components[0].slice(namespaceEndIndex + 1), components[1]);
138 }
139
140 store.commit("setTranslations", translations)
141 });
142}
Note: See TracBrowser for help on using the repository browser.