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

<template>
<div class="root">
    <button type="button" class="btn-fab theme-flat" :disabled="isDisabled"
            @click="stepBack" @mousedown="onStepBackMouseDown" @mouseup="onStepperMouseUp">
        <span class="material-icons mdi-s">arrow_back_ios_new</span>
    </button>

    <span>{{ stringSliderValue }}</span>

    <button type="button" class="btn-fab theme-flat" :disabled="isDisabled"
            @click="stepForward" @mousedown="onStepForwardMouseDown" @mouseup="onStepperMouseUp">
        <span class="material-icons mdi-s">arrow_forward_ios</span>
    </button>

    <input type="range" class="slider-continuous" v-model.number="sliderValue" min="0" :max="audioLength" step="0.01" :disabled="isDisabled" />
</div>
</template>

<style lang="scss" scoped>
.root {
    display: flex;
    align-items: center;
    gap: 0.5em;
}
</style>

<script>
import AudioPlayback from "../js/AudioPlaybackModule"
import Util from "../js/Util"

export default {
    name: "AudioTimeBar",
    props: {
        modelValue: Number,
        audioLength: Number,
        isDisabled: Boolean
    },
    emits: [ "update:modelValue" ],
    data() {
        return {
            stepperHeld: false,
            stepperHeldTimeout: null
        }
    },
    computed: {
        sliderValue: {
            get() {
                if (this.modelValue > this.audioLength) {
                    return this.audioLength;
                }
                else if (this.modelValue < 0) {
                    return 0;
                }
                else {
                    return this.modelValue;
                }
            },
            set(newValue) {
                this.$emit("update:modelValue", newValue);
            }
        },
        stringSliderValue() {
            return Util.formatSecondsTimeString(this.sliderValue, false, 2);
        }
    },
    methods: {
        stepBack() {
            AudioPlayback.scrub(this.modelValue - 0.1);
        },
        stepForward() {
            AudioPlayback.scrub(this.modelValue + 0.1);
        },
        onStepBackMouseDown() {
            this.stepperHeldTimeout = setTimeout(() => this.continuousStep(true, this), 500);
            this.stepperHeld = true;
        },
        onStepForwardMouseDown() {
            this.stepperHeldTimeout = setTimeout(() => this.continuousStep(false, this), 500);
            this.stepperHeld = true;
        },
        onStepperMouseUp() {
            this.stepperHeld = false;
            clearTimeout(this.stepperHeldTimeout);
        },
        continuousStep(back, vm) {
            (function run() {
                if (!vm.stepperHeld) {
                    return;
                }

                if (back) {
                    vm.stepBack();
                }
                else {
                    vm.stepForward();
                }

                setTimeout(run, 25); // 40hz
            })();
        }
    }
}
</script>