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

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

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

    <ul id="transcription-list" class="list-view">
        <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;
}

.transform-rotate180 {
    --transition-duration: 0.4s;
    transition-duration: var(--transition-duration);

    transform: rotate(180deg);
}

.transform-slideout-up {
    --transition-duration: 0.4s;
    transition-duration: var(--transition-duration);

    z-index: -1;
    transform: translate(0, -100%);
    opacity: 0;
}

.transcription-list-item {
    transition: all 0.8s ease;
}

.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 TranscriptionItem from "./components/TranscriptionItem.vue"

export default {
    name: "App",
    components: {
        AudioUpload,
        TranscriptionItem
    },
    data() {
        return {
            /** @type {{id: String, url: String} | null} */
            currentlyLoadedAudio: null,
            player: new Audio()
        }
    },
    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();
        }//,
        // 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>