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

import { createApp } from "vue";
import { createStore } from "vuex"
import AudioPlayback from "./js/AudioPlaybackModule";
import App from "./App.vue";
import ToggleButton from "./components/ToggleButton.vue"

export class TranscriptionViewModel {
    /**
     * Initialises a new instance of the {@link TranscriptionViewModel} class.
     *
     * @param {TranscriptionModel} transcription
     * @param {File} file The file from which the transcription was generated.
     */
    constructor(transcription, file) {
        /** @type {String} The UUID of this transcription. */
        this.id = TranscriptionViewModel.getId(file); // Should be a fairly reliable indicator of uniqueness.

        /** @type {String} The transcription. */
        this.transcription = transcription.transcription;

        /** @type {String} The name of the file from which the transcription was generated. */
        this.fileName = transcription.file_name;

        /** @type {TranscriptionMetadata[]} The transcription metadata. */
        this.metadata = transcription.metadata;

        /** @type {File} The file from which the transcription was generated. */
        this.file = file;
    }

    static getId(file) {
        return file.name + file.size + file.type;
    }
}

export class PlaybackState {
    /**
     * Initialises a new instance of the {@link PlaybackState} class.
     * @param {String} id The ID of the transcription for which audio is being played.
     * @param {Boolean} isPlaying A value indicating if audio is currently being played.
     * @param {Number} currentTime The current time in the audio playback.
     * @param {Number} length The length of the audio track.
     */
    constructor(id = "", isPlaying = false, length = 0) {
        /** @type {String} The ID of the transcription for which audio is currently being played. */
        this.id = id;

        /** @type {Boolean} Gets a value indicating if audio is currently being played back. */
        this.isPlaying = isPlaying;

        /** @type {Map<String, Number} The current playback time of each transcription's audio. */
        this.playbackTimes = new Map();

        /** @type {Map<String, Number} The length of each transcription's audio. */
        this.playbackLengths = new Map();
    }
}

export class TranscriptionExistsError extends Error {
    constructor(message = "", ...args) {
        super(message, ...args);
    }
}

const store = createStore({
    state() {
        return {
            /** @type {Map<String, String>} */
            translations: new Map(),
            /** @type {Map<String, TranscriptionViewModel>} */
            rawTranscriptions: new Map(),
            playbackState: new PlaybackState()
        }
    },
    mutations: {
        /**
         * Adds a new transcription to the store.
         * @param {*} state The state of the store.
         * @param {TranscriptionViewModel} transcription The transcription's view model object.
         */
        rawTranscriptionAdd(state, transcription) {
            if (state.rawTranscriptions.has(transcription.id)) {
                throw new TranscriptionExistsError("Cannot add the transcription because it already exists.");
            }
            state.rawTranscriptions.set(transcription.id, transcription);
        },

        /**
         * Removes a transcription from the store.
         * @param {*} state The state of the store.
         * @param {String} id The ID of the transcription.
         */
        rawTranscriptionRemove(state, id) {
            state.rawTranscriptions.delete(id);
        },

        playbackStateSetID(state, id) {
            state.playbackState.id = id;
        },
        playbackStateSetIsPlaying(state, isPlaying) {
            state.playbackState.isPlaying = isPlaying;
        },
        playbackStateSetTime(state, object) {
            state.playbackState.playbackTimes.set(object.id, object.time);
        },
        playbackStateSetLength(state, object) {
            state.playbackState.playbackLengths.set(object.id, object.time);
        },

        setTranslations(state, translations) {
            state.translations = translations;
        }
    },
    getters: {
        hasTranscriptionOfFile: (state) => (file) => {
            const id = TranscriptionViewModel.getId(file);
            return state.rawTranscriptions.has(id);
        },
        transcriptionPlaybackTime: (state) => (id) => {
            return state.playbackState.playbackTimes.has(id) ? state.playbackState.playbackTimes.get(id) : 0;
        },
        transcriptionPlaybackLength: (state) => (id) => {
            return state.playbackState.playbackLengths.has(id) ? state.playbackState.playbackLengths.get(id) : 0;
        }
    }
});

AudioPlayback.initialise(store);

const app = createApp(App);

app.use(store)
    .component("ToggleButton", ToggleButton)
    .directive("width", {
        mounted(el, binding) {
            binding.value(el.offsetWidth);

            window.addEventListener("resize", function() {
                binding.value(el.offsetWidth);
            });
        }
    })
    .mount("#app");

/* === Get interface translations === */

/** @type {Map<String, String>} */
const translations = new Map();

/* We might be running under Greenstone, so pull the tranlsations from there if so */
/* eslint-disable no-undef */
if (typeof gs !== "undefined" && gs.text && gs.text.atea) {
    for (const key in gs.text.atea) {
        translations.set(key, gs.text.atea[key]);
    }

    store.commit("setTranslations", translations)
}
/* eslint-enable no-undef */
else {
    fetch("resources/interface_atea.properties")
        .then(
            async response => {
                const responseText = await response.text();
                const responseTranslations = responseText.split("\n");

                for (const translation of responseTranslations) {
                    const keyvalue = translation.split("=");

                    if (keyvalue.length !== 2) {
                        continue;
                    }

                    const namespace = keyvalue[0].split(".");
                    if (namespace.length !== 3 || namespace[1] !== "asr") {
                        continue;
                    }

                    translations.set(namespace[namespace.length - 1], keyvalue[1]);
                }

                store.commit("setTranslations", translations)
            }
        );
}