source: main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue@ 35517

<template>
<div>
    <div class="text-container words-container" :hidden="enableEditing">
        <ul class="list-view" v-if="!enableEditing">
            <li v-for="word in words" :key="word.id" class="word-container" @click="playAudio(word.startTime)">
                <span class="word-highlight word" :class="{ 'word-highlight-applied': word.shouldHighlight }">
                    {{ word.word }}
                </span>
            </li>
        </ul>

        <ul class="list-view" v-else>
            <li v-for="(word, index) in words" :key="word.id" class="word-container">
                <input :size="word.word.length === 0 ? 1 : word.word.length" :ref="word.id"
                    class="editor-word" v-model="word.word" type="text" onpaste="return false;" :class="{ 'word-highlight-applied': word.shouldHighlight }"
                    @beforeinput="onEditorBeforeInput($event, index)" @focusout="onEditorFocusOut(index)" @keyup="onEditorKeyUp($event, index)" @focus="onEditorFocus(index)" />
                <span>&nbsp;</span>
            </li>
        </ul>
    </div>

    <!-- <word-timing-selector class="word-timing-selector" :surroundingWords="surroundingWords" :word="selectedWord" /> -->

    <div class="editor-controls">
        <audio-time-bar v-model.number="currentPlaybackTime" :audio-length="audioLength" :isDisabled="playbackState.id != transcription.id" />

        <toggle-button v-model="enableEditing" :title="translations.get('TranscriptionItemEditor_ToggleEditTooltip')">
            <span class="material-icons">edit</span>
        </toggle-button>
    </div>
</div>
</template>

<style scoped lang="scss">
.word {
    padding: 0.25em;
}

.editor-controls {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr auto;
    margin: 0.5em 0 0.3em 0;
    gap: 1em;
}

.words-container {
    transition-duration: var(--transition-duration);

    &[hidden] {
        background-color: inherit;
    }
}

.word-container {
    font: var(--monospace-font);
    display: inline-block;
    line-height: 2em;
}

.word-highlight-applied {
    background-color: var(--highlighted-word-bg);
}

.word-highlight {
    &:hover {
        @extend .word-highlight-applied;
    }
}

.editor-word {
    border: 1px solid black;
    border-radius: 2px;
    padding: 2px;
    font-family: inherit;
    font-size: 1rem;
}

.word-timing-selector {
    margin: 0.5em auto;
}
</style>

<script>
import { mapState } from "vuex";
import { TranscriptionViewModel } from "../main";
import AudioPlayback from "../js/AudioPlaybackModule"
import AudioTimeBar from "./AudioTimeBar.vue"
// import WordTimingSelector from "./WordTimingSelector.vue"
import Util, { log } from "../js/Util";

export class Word {
    /**
     * Initialises a new instance of the Word class.
     * @param {String} word The word.
     * @param {Number} startTime The time within the audio that this word starts being spoken.
     * @param {Number} endTime The time within the audio that this word finishes being spoken.
     */
    constructor(word, startTime, endTime) {
        /** @type {String} The ID of this word. */
        this.id = Util.generateUuid();

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

        /** @type {Number} The time within the audio that this word starts being spoken. */
        this.startTime = startTime;

        /** @type {Number} The time within the audio that this word finishes being spoken. */
        this.endTime = endTime;

        /** @type {Boolean} A value indicating whether this word should be highlighted. */
        this.shouldHighlight = false;

        /** @type {Number} The number of times the user has tried to delete this word. */
        this.deletionAttempts = 0;
    }
}

export default {
    name: "TranscriptionItemEditor",
    components: {
        AudioTimeBar//,
        // WordTimingSelector
    },
    props: {
        transcription: TranscriptionViewModel
    },
    data() {
        return {
            enableEditing: false,
            words: [],
            lastHighlightedWordIndex: 0,
            selectedIndex: 0
        }
    },
    computed: {
        currentPlaybackTime: {
            get() {
                return this.$store.getters.transcriptionPlaybackTime(this.transcription.id);
            },
            set(value) {
                this.$store.commit("playbackStateSetTime", { id: this.transcription.id, time: value });
            }
        },
        audioLength() {
            return this.$store.getters.transcriptionPlaybackLength(this.transcription.id);
        },
        surroundingWords() {
            return this.getSurroundingWords(this.selectedIndex);
        },
        selectedWord() {
            return this.words[this.selectedIndex];
        },
        ...mapState({
            playbackState: state => state.playbackState,
            translations: state => state.translations
        })
    },
    methods: {
        async playAudio(startTime) {
            await AudioPlayback.play(this.transcription.id, startTime);
        },
        getSurroundingWords(index) {
            const BUFFER = 2; // The number of words to take on each side

            let min = index;
            for (let i = index; i > index - BUFFER && i > 0; i--) {
                min--;
            }

            let max = index + 1;
            for (let i = index; i < index + BUFFER && i < this.words.length; i++) {
                max++;
            }

            return this.words.slice(min, max);
        },
        /**
         * Invoked when the value of a word changes.
         * @param {InputEvent} event The input event.
         * @param {Number} index The index of the word that has changed.
         */
        onEditorBeforeInput(event, index) {
            log(event);

            const deletionEvents = [
                "deleteWordForward", "deleteWordBackward",
                "deleteSoftLineBackward", "deleteSoftLineForward", "deleteEntireSoftLine",
                "deleteHardLineBackward", "deleteHardLineForward",
                "deleteByDrag", "deleteByCut",
                "deleteContent", "deleteContentBackward", "deleteContentForward"
            ];

            const insertionEvents = [
                "insertText", "insertReplacementText",
                "insertLineBreak", "insertParagraph",
                "insertOrderedList", "insertUnorderedList", "insertHorizontalRule",
                "insertFromYank", "insertFromDrop", "insertFromPaste", "insertFromPasteAsQuotation",
                "insertTranspose", "insertCompositionText", "insertLink"
            ];

            if (event.inputType === "historyUndo" || event.inputType === "historyRedo") {
                event.preventDefault();
                return;
            }

            /** @type {Word} */
            const word = this.words[index];

            if (deletionEvents.includes(event.inputType) && word.word.length === 0) {
                event.preventDefault(); // Prevents the event from being propagated to the newly focused input
                this.setFocus(index, event.inputType === "deleteContentBackward"); // Shifting focus off an empty input, hence the word will be removed
            }

            if (insertionEvents.includes(event.inputType)) {
                if (event.data === " ") {
                    // Only insert if the current word isn't blank, to prevent 'jumping jacks' as the duplicate empty boxes are removed
                    if (word.word !== "") {
                        const newStartTime = word.startTime + ((word.endTime - word.startTime) / 2);
                        const newWord = new Word("", newStartTime, word.endTime);
                        this.words.splice(index + 1, 0, newWord);

                        // We have to give the element some time to be mounted before we can focus it
                        setTimeout(() => this.$refs[newWord.id].focus(), 50);
                    }

                    event.preventDefault();
                }
            }
        },
        onEditorFocus(index) {
            if (this.currentPlaybackTime < this.words[index].startTime || this.currentPlaybackTime > this.words[index].endTime) {
                const wordStartTime = this.words[index].startTime;
                this.$store.commit("playbackStateSetTime", { id: this.transcription.id, time: wordStartTime });
            }

            this.selectedIndex = index;
        },
        onEditorFocusOut(index) {
            // Remove empty words when they lose focus
            if (this.words[index].word === "") {
                this.words.splice(index, 1);
            }
        },
        onEditorKeyUp(event, index) {
            /** @type {Word} */
            const word = this.words[index];

            if (event.code === "Spacebar" && word.length > 0) {
                // - if at either edge, create new word before/after
                // - else split word
            }

            // // Focus on the next word if the user is moving right with their caret at the word's end
            // if (event.code === "ArrowRight") {
            //     const inputElement = this.$refs[word.id];

            //     if (inputElement.selectionStart === word.word.length) {
            //         this.setFocus(index, false);
            //     }
            // }

            // // Focus on the previous word if the user is moving left with their caret at the word's start
            // if (event.code === "ArrowLeft") {
            //     const inputElement = this.$refs[word.id];

            //     if (inputElement.selectionStart === 0) {
            //         this.setFocus(index, true);
            //     }
            // }
        },

        /**
         * Gets the index of an adjacent word to focus on.
         * @param {Number} index The index of the currently focused word.
         * @param {Boolean} focusLeft Whether to focus on the word to the left or right of the current index.
         */
        getFocusIndex(index, focusLeft) {
            let focusIndex = 0;

            if (focusLeft) {
                focusIndex = index === 0 ? 0 : index - 1;
            }
            else {
                focusIndex = index === this.words.length - 1 ? this.words.length - 1 : index + 1;
            }

            return focusIndex;
        },

        /**
         * Sets the focus to an adjacent word.
         * @param {Number} index The index of the currently focused word.
         * @param {Boolean} focusLeft Whether to focus on the word to the left or right of the current index.
         */
        setFocus(index, focusLeft) {
            const focusIndex = this.getFocusIndex(index, focusLeft);
            const focusId = this.words[focusIndex].id;
            this.$refs[focusId].focus();

            if (!focusLeft) {
                this.$refs[focusId].setSelectionRange(-1, 0);
            }
        }
    },
    watch: {
        currentPlaybackTime(newValue) {
            this.words[this.lastHighlightedWordIndex].shouldHighlight = false;

            if (this.playbackState.id !== this.transcription.id) {
                return;
            }

            for (let i = 0; i < this.words.length; i++) {
                const word = this.words[i];

                if (word.startTime <= newValue && word.endTime > newValue) {
                    word.shouldHighlight = true;

                    if (this.$refs[word.id]) {
                        this.$refs[word.id].focus();
                    }

                    this.lastHighlightedWordIndex = i;
                    break;
                }
            }
        }
    },
    beforeMount() {
        this.words = getWords(this.transcription);
    }
}

/**
 * Gets the words in a transcription.
 * @param {TranscriptionViewModel} transcription The transcription.
 * @returns {Word[]}
 */
export function getWords(transcription) {
    /** @type {Word[]} */
    const words = [];

    let lastWord = "";
    let currStartTime = 0;

    for (const metadata of transcription.metadata) {
        if (metadata.char === " ") {
            words.push(new Word(lastWord, currStartTime, metadata.start_time));

            lastWord = "";
            currStartTime = metadata.start_time;
        }
        else {
            lastWord += metadata.char;
        }
    }

    // Push the last word, as most transcriptions will not end in a space (hence breaking the above algorithm)
    if (lastWord.length > 0) {
        const newWord = new Word(lastWord, currStartTime, transcription.metadata[transcription.metadata.length - 1].start_time)
        words.push(newWord);
    }

    return words;
}
</script>