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

<template>
<div class="word-timing-selector-root">
    <span>{{ minTimeString }}</span>

    <div class="words-container" v-width="onWordsContainerWidthChanged">
        <div class="word" v-for="word in mySurroundingWords" :key="word.id" :style="{ left: `${word.left}px`, width: `${word.length}px` }"
            :class="{ 'hoisted': shouldHoist(word) }">
            <span>{{ word.word }}</span>
        </div>

        <div class="word-attachment-container" :style="{ left: leftHandleLeft }">
            <span>{{ wordStartTimeString }}</span>
            <span v-if="isMounted" class="material-icons mdi-m word-handle" @mousedown="canAdjustWordStartTime = true">
                first_page
            </span>
        </div>

        <div class="word-attachment-container" :style="{ left: rightHandleLeft }">
            <span v-if="isMounted" class="material-icons mdi-m word-handle" @mousedown="canAdjustWordEndTime = true">
                last_page
            </span>
            <span>{{ wordEndTimeString }}</span>
        </div>
    </div>

    <span>{{ maxTimeString }}</span>
</div>
</template>

<style scoped lang="scss">
.word-timing-selector-root {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1em;
    height: 3em;
}

.words-container {
    flex-grow: 0.6;
    position: relative;
    height: 1.5em;
}

.word {
    position: absolute;
    text-align: center;

    user-select: none;
    text-overflow: ellipsis;
    white-space: nowrap;

    overflow: hidden;
    background-color: rgba(var(--bg-color-raw), 0.3);
    border: 1px solid rgba(var(--bg-color-raw), 0.6);
}

.word-attachment-container {
    position: absolute;
    top: -105%;
    display: flex;
    align-items: center
}

.word-handle {
    @extend .theme-flat;

    color: var(--fg-color);
    cursor: pointer;
    user-select: none;

    animation: pulse 0.8s linear 0s infinite alternate;
}

@keyframes pulse {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.2;
    }
}

.hoisted {
    top: -100%;
    background-color: var(--highlighted-word-bg);
}
</style>

<script>
import { Word as TWord } from "./TranscriptionItemEditor.vue"
import Util from "../js/Util"

class Word {
    constructor(word, startTime, endTime, left, length) {
        this.id = Util.generateUuid();
        this.word = word;
        this.startTime = startTime;
        this.endTime = endTime;
        this.left = left;
        this.length = length;
    }

    right() {
        return this.left + this.length;
    }
}

export default {
    name: "WordTimingSelector",
    props: {
        /** @type {Array<TWord>} */
        surroundingWords: Array,
        wordIndex: Number
    },
    data() {
        return {
            isMounted: false,
            canAdjustWordStartTime: false,
            canAdjustWordEndTime: false,
            wordsContainerWidth: 0,
            isProduction: false
        }
    },
    emits: [ "update:surroundingWords" ],
    computed: {
        word() {
            return this.surroundingWords[this.wordIndex];
        },
        myWord() {
            return this.mySurroundingWords[this.wordIndex];
        },
        minTimeString() {
            if (this.surroundingWords.length === 0) {
                return 0;
            }

            return Util.formatSecondsTimeString(this.surroundingWords[0].startTime, false, 2);
        },
        maxTimeString() {
            if (this.surroundingWords.length === 0) {
                return 0;
            }

            return Util.formatSecondsTimeString(this.surroundingWords[this.surroundingWords.length - 1].endTime, false, 2);
        },
        wordStartTimeString() {
            return Util.formatSecondsTimeString(this.word.startTime, false, 2);
        },
        wordEndTimeString() {
            return Util.formatSecondsTimeString(this.word.endTime, false, 2);
        },
        leftHandleLeft() {
            // The time component of the handles is a fixed width, so we can get away with this horrid hardcoded 5.5em
            return `calc(${this.myWord.left}px - 5.5em)`;
        },
        rightHandleLeft() {
            return `calc(${this.myWord.left}px + ${this.myWord.length}px)`;
        },
        audioSnippetLength() {
            if (this.surroundingWords.length === 0) {
                return 0;
            }
            else {
                let length = this.surroundingWords[this.surroundingWords.length - 1].endTime;

                // Removes the buffer from 0s
                if (this.wordIndex !== 0) {
                    length -= this.surroundingWords[0].startTime;
                }

                return length;
            }
        },
        /**
         * Gets the factor used to scale word's audio parameters into on-screen positional values.
         * @returns {Number} The scaling factor.
         */
        scalingFactor() {
            return this.wordsContainerWidth / this.audioSnippetLength;
        },
        /**
         * Gets the required pixel offset of a word's left position.
         * @returns {Number} The offset.
         */
        wordLeftOffsetPx() {
            if (this.wordIndex === 0) {
                return 0;
            }
            else {
                return this.surroundingWords[0].startTime * this.scalingFactor;
            }
        },
        mySurroundingWords() {
            const myWords = [];

            if (this.surroundingWords.length === 0) {
                return myWords;
            }

            for (const word of this.surroundingWords) {
                myWords.push(this.convertWord(word));
            }

            return myWords;
        }
    },
    methods: {
        onWordsContainerWidthChanged(newValue) {
            this.wordsContainerWidth = newValue;
        },
        scaleTime(time) {
            return time * this.scalingFactor;
        },
        timeToPosition(time) {
            return time * this.scalingFactor - this.wordLeftOffsetPx;
        },
        convertWord(word) {
            const left = this.timeToPosition(word.startTime);
            const length = (word.endTime - word.startTime) * this.scalingFactor;

            return new Word(word.word, word.startTime, word.endTime, left, length);
        },
        shouldHoist(word) {
            return word === this.myWord;
        },
        onDocumentMouseMove(event) {
            if (this.isProduction) {
                return;
            }

            if (this.canAdjustWordStartTime) {
                this.onMinHandleMouseMove(event);
            }
            else if (this.canAdjustWordEndTime) {
                this.onMaxHandleMouseMove(event);
            }
        },
        /**
         * @param {MouseEvent} event
         */
        onMinHandleMouseMove(event) {
            if (event.buttons < 1) {
                return;
            }

            // const word = this.mySurroundingWords[this.wordIndex];

            // if (event.movementX < 0 && word.left + event.movementX < 0) {
            //     return;
            // }

            // if (event.movementX > 0 && word.left + event.movementX >= word.right()) {
            //     return;
            // }

            // word.left += event.movementX;
            // word.length -= event.movementX;

            this.adjustWordStartTime(event.movementX);

            this.updateSurroundingWords();
        },
        onMaxHandleMouseMove(event) {
            if (event.buttons < 1) {
                return;
            }

            const word = this.myWord;

            const lastWord = this.mySurroundingWords[this.mySurroundingWords.length - 1];

            if (event.movementX > 0 && word.right() + event.movementX > lastWord.right()) {
                return;
            }

            if (event.movementX < 0 && word.right() + event.movementX <= word.left) {
                return;
            }

            word.length += event.movementX;

            this.updateSurroundingWords();
        },
        onDocumentMouseUp() {
            this.canAdjustWordStartTime = false;
            this.canAdjustWordEndTime = false;
        },
        adjustWordStartTime(amount) {
            const word = this.myWord;
            word.left += amount;
            word.length -= amount;

            if (amount < 0) {
                if (this.wordIndex === 0) {
                    if (word.left > 0) {
                        return;
                    }

                    const diff = 0 - word.left;
                    word.left = 0;
                    word.length -= diff;
                }
                else {
                    // Adjust previous word
                    const previousWord = this.mySurroundingWords[this.wordIndex - 1];

                    if (word.left > previousWord.right()) {
                        return;
                    }

                    const diff = word.left - previousWord.right(); // Will be negative
                    word.left -= diff;
                    word.length += diff;

                    // TODO: This logic needs all words to be reactively updated to work

                    // previousWord.length += amount;
                    // const leftBoundary = previousWord.left + this.timeToPosition(0.1);

                    // if (previousWord.right() > leftBoundary) {
                    //     return;
                    // }

                    // const diff = leftBoundary - previousWord.right(); // Will be negative
                    // word.left -= diff;
                    // word.length += diff;
                    // previousWord.length -= diff;
                }
            }
            else {
                if (word.left > (word.right() - this.scaleTime(0.1))) {
                    const diff = word.left - (word.right() - this.scaleTime(0.1)) // Will be positive
                    word.left -= diff;
                    word.length += diff;
                }
            }
        },
        updateSurroundingWords() {
            const updatedWords = [];

            for (let i = 0; i < this.mySurroundingWords.length; i++) {
                updatedWords.push(
                    this.convertMyWord(this.mySurroundingWords[i], this.surroundingWords[i])
                );
            }

            console.log(updatedWords);
            this.$emit("update:surroundingWords", updatedWords);
        },
        convertMyWord(myWord, actualWord) {
            const startTime = (myWord.left + this.wordLeftOffsetPx) / this.scalingFactor;
            const endTime = (myWord.right() + this.wordLeftOffsetPx) / this.scalingFactor;

            return new TWord(actualWord.word, startTime, endTime, actualWord.id, actualWord.shouldHighlight, actualWord.deletionAttempts);
        }
    },
    beforeMount() {
        this.isProduction = process.env.NODE_ENV === "production";
    },
    mounted() {
        this.isMounted = true;

        document.addEventListener("mousemove", this.onDocumentMouseMove);
        document.addEventListener("mouseup", this.onDocumentMouseUp);
    },
    beforeUnmount() {
        document.removeEventListener("mousemove", this.onDocumentMouseMove);
        document.removeEventListener("mouseup", this.onDocumentMouseUp);
    }
}
</script>