<template>
    <div class="d-flex flex-column w-100">
        <div ref="progressbar" class="progress-bar position-relative">
            <div
                class="progress"
                :class="moving ? '' : 'animated'"
                :style="getProgressWidth"
            ></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'AudioProgressBar',
    props: {
        duration: {
            type: Number,
            default: 0,
            required: true,
        },
        currentTime: {
            type: Number,
            default: 0,
            required: true,
        },
    },
    data() {
        return {
            moving: false,
        }
    },
    computed: {
        getProgressWidth() {
            if (this.duration) {
                return { width: (100 / this.duration) * this.currentTime + '%' }
            }
            return { width: 0 + '%' }
        },
    },
}
</script>

<style lang="scss" scoped>
@import 'assets/scss/variables';
@import 'assets/scss/buttons';
@import 'assets/scss/global';

$progress-bar-height: 20vw;

.progress-bar {
    width: 100%;
    overflow: visible;
    display: block;
    background-color: transparent;
    height: calc(#{$progress-bar-height} * var(--pxToVw));

    &::before {
        content: '';
        display: block;
        position: absolute;
        margin-left: 0;
        min-width: 100%;
        min-height: calc(#{$progress-bar-height} * var(--pxToVw));
        opacity: 0.4;
        background-color: var(--primary);
    }

    .progress {
        height: calc(#{$progress-bar-height} * var(--pxToVw));
        background-color: var(--primary);
        opacity: 1;
        border-radius: 0;
    }
}

.animated {
    transition: all 0.5s linear;
}
</style>
