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

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

    <div class="words-container" ref="wordsContainer">
        <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>

        <span v-if="isMounted" class="material-icons mdi-m word-handle" :style="{ left: leftHandleLeft }"
            @mousemove="onMinHandleMouseMove" @mouseup="onHandleMouseUp" @mousedown="canShiftMinValue = true">
            first_page
        </span>
        <span v-if="isMounted" class="material-icons mdi-m word-handle" :style="{ left: rightHandleLeft }" @mousemove="onMaxHandleMouseMove">last_page</span>
    </div>

    <span>{{ maxTime }}</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-handle {
    @extend .theme-flat;

    position: absolute;
    top: -105%;

    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 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;
    }
}

export default {
    name: "WordTimingSelector",
    props: {
        /** @type {Array<{ word: String, startTime: Number, endTime: Number }>} */
        surroundingWords: Array,
        word: { word: String, startTime: Number, endTime: Number },
        upperBound: Number
    },
    data() {
        return {
            isMounted: false,
            /** @type {Array<Word>} */
            mySurroundingWords: [],
            canShiftMinValue: false,
            canShiftMaxValue: false
        }
    },
    emits: [ "update:word" ],
    computed: {
        minTime() {
            if (this.surroundingWords.length === 0) {
                return 0;
            }

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

            return Util.formatSecondsTimeString(this.surroundingWords[this.surroundingWords.length - 1].endTime, false, 2);
        },
        leftHandleLeft() {
            return `calc(${this.getWord().left}px - 1em)`;
        },
        rightHandleLeft() {
            return `calc(${this.getWord().left}px + ${this.getWord().length}px)`;
        },
        wordIndex() {
            return this.surroundingWords.indexOf(this.word);
        }
    },
    watch: {
        surroundingWords() {
            this.getMySurroundingWords();
        }
    },
    methods: {
        getMySurroundingWords() {
            if (!this.isMounted) {
                return;
            }

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

            const audioLength = this.surroundingWords[this.surroundingWords.length - 1].endTime - this.surroundingWords[0].startTime;
            const sliderLengthPx = this.$refs.wordsContainer.offsetWidth;

            const scalingFactor = sliderLengthPx / audioLength;

            const offset = this.surroundingWords[0].startTime * scalingFactor;

            for (const word of this.surroundingWords) {
                const left = (word.startTime * scalingFactor - offset);
                const length = (word.endTime - word.startTime) * scalingFactor;

                myWords.push(new Word(word.word, word.startTime, word.endTime, left, length));
            }

            this.mySurroundingWords = myWords;
        },
        shouldHoist(word) {
            return word.startTime === this.word.startTime && word.word === this.word.word;
        },
        getWord() {
            return this.mySurroundingWords[this.wordIndex];
        },
        /**
         * @param {MouseEvent} event
         */
        onMinHandleMouseMove(event) {
            if (event.buttons < 1) {
                return;
            }

            const word = this.getWord();
            word.left += event.movementX;
            word.length -= event.movementX;
        },
        onMaxHandleMouseMove(event) {
            if (event.buttons < 1) {
                return;
            }

            const word = this.getWord();
            word.length += event.movementX;
        },
        onHandleMouseUp() {
            this.canShiftMinValue = false;
            this.canShiftMaxValue = false;
        }
    },
    mounted() {
        this.isMounted = true;
        this.getMySurroundingWords();
    }
}
</script>