source: main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/App.vue@ 35432

<template>
    <!-- Used to calculate the character size of our monospace font -->
    <span class="monospace-font-sizer">ngā tama a rangi</span>

    <div class="app-bar">
        <div class="app-bar-content">
            <span class="heading1">{{ translations.get("Title") }}</span>

            <a class="btn-primary theme-accent" href="https://koreromaori.io" target="_blank">
                <span class="material-icons mdi-m">open_in_new</span>
                <u>koreromaori.io</u>
            </a>

            <toggle-button class="theme-accent" v-model="showInfo" :reverseState="true">
                <span class="material-icons mdi-l">info</span>
            </toggle-button>
        </div>

        <div v-if="showInfo" class="paper">
            A tool to transcribe audio recordings of spoken Māori. Basic support for editing the transcriptions is provided,
            and they can be downloaded in multiple formats.
            <br />
            The actual transcriptions are produced with gratitude by using <a href="https://koreromaori.io">koreromaori.io's</a> service.
        </div>
    </div>

    <div class="paper content">
        <AudioUpload />
    </div>

    <ul id="transcription-list" class="list-view content">
        <transition-group name="transcription-list">
            <li class="list-item transcription-list-item" v-for="[id, transcription] in transcriptions" :key="id">
                <TranscriptionItem :transcription="transcription" />
            </li>
        </transition-group>
    </ul>
</template>

<style lang="scss">
#transcription-list {
    margin-bottom: 1em;
}

.monospace-font-sizer {
    font: var(--monospace-font);
    padding: 0;
    position: absolute;
    top: -100px;
}

.app-bar {
    display: flex;
    flex-direction: column;
    gap: 1em;

    color: var(--primary-fg-color);
    background-color: var(--primary-bg-color-l1);
    box-shadow: 0px 0px 4px 3px #6d6d6d;

    padding: 1em;
    margin-bottom: 1em;
}

.app-bar-content {
    display: flex;
    align-items: center;
    gap: 1em;

    width: 100%;

    & :first-child {
        flex-grow: 1;
    }
}

.content {
    margin: 1em;
}

.transcription-list-item {
    transition: all 0.8s ease;
    margin-bottom: 1em;

    &:last-child {
        margin-bottom: 0;
    }
}

.transcription-list-leave-to {
    opacity: 0;
    transform: translateX(30%);
}

.transcription-list-leave-active {
  position: absolute;
}
</style>

<script>
import { mapState } from "vuex";
import AudioUpload from "./components/AudioUpload.vue"
import ToggleButton from "./components/ToggleButton.vue";
import TranscriptionItem from "./components/TranscriptionItem.vue"

export default {
    name: "App",
    components: {
        AudioUpload,
        TranscriptionItem,
        ToggleButton
    },
    data() {
        return {
            /** @type {{id: String, url: String} | null} */
            currentlyLoadedAudio: null,
            player: new Audio(),
            showInfo: false
        }
    },
    computed: mapState({
        translations: state => state.translations,
        transcriptions: state => state.rawTranscriptions,
        playbackState: state => state.playbackState,
        shouldPlayAudio: state => state.playbackState.isPlaying
    }),
    watch: {
        async playbackState(newValue) {
            if (!newValue.isPlaying) {
                return;
            }

            const transcription = this.transcriptions.get(newValue.id);
            loadTranscriptionAudio(this.player, transcription, this.currentlyLoadedAudio);

            let playbackTime = 0;
            if (newValue.currentTime > 0) {
                playbackTime = newValue.currentTime;
            }

            this.player.currentTime = playbackTime;
            await this.player.play();

            this.playbackState.length = this.player.duration;
        }//,
        // shouldPlayAudio(newValue) {
        //     if (newValue && this.$refs.audioPlayer.paused) {
        //         this.$refs.audioPlayer.play();
        //     }
        //     else if (!newValue && !this.$refs.audioPlayer.paused) {
        //         this.$refs.audioPlayer.pause();
        //     }
        // }
    },
    mounted() {
        pollAudioTime(this.player, this.$store);
    }
}

// Adapted from https://davidwalsh.name/javascript-polling
function pollAudioTime(audioElement, store) {
    var lastTime = 0;
    (function p() {
        if (audioElement.currentTime !== lastTime) {
            lastTime = audioElement.currentTime;
            store.commit("setCurrentPlaybackTime", lastTime);
            store.commit("setCurrentlyPlaying", true);
        }
        else {
            store.commit("setCurrentlyPlaying", false);
        }

        setTimeout(p, 33); // Slightly more than 30hz
    })();
}

/**
 * Loads an audio file.
 * @param {Audio} player The audio player.
 * @param {TranscriptionViewModel} transcription The name of the requested audio file.
 * @param {{id: String, url: String} | null} current The currently loaded audio.
 * @returns {{id: String, url: String}} If a new audio file was loaded, a new audio tracking object, else the current one.
 */
function loadTranscriptionAudio(player, transcription, current) {
    if (current == null || current.id !== transcription.id) {
        // TODO: Need to profile on some larger tracks; this may not be worth it? Better to cache a URL object instead?
        if (current !== null) {
            URL.revokeObjectURL(current.url);
        }

        const urlObject = URL.createObjectURL(transcription.file);
        player.src = urlObject;
        player.load();

        return { id: transcription.id, url: urlObject };
    }

    return current;
}
</script>