MusicPlayer/web/src/components/player/PlayerControls.vue

<script setup lang="ts">
    import {
        computed,
        ref
    } from 'vue';
    import ProgressBar from './ProgressBar.vue';
    import ShareManagement from './ShareManagement.vue';
    import {
        beautifyTime
    } from '@/ts/util/time';
    import player from '@/ts/player';

    const playbackPercentage = player.playbackPercentage;
    const repeatMode = player.repeat;
    const shuffleMode = player.shuffle;
    const showShareMenu = ref( false );

    const seek = () => {
        player.seekTo( playbackPercentage.value );
    };

    const toggleRepeatMode = () => {
        switch ( repeatMode.value ) {
            case 'one':
                player.setRepeat( 'all' );
                break;
            case 'off':
                player.setRepeat( 'one' );
                break;
            case 'all':
                player.setRepeat( 'off' );
        }
    };

    const openShareMenu = () => {
        showShareMenu.value = true;
    };

    const current = computed( () => {
        return beautifyTime( player.playbackPercentage.value * player.duration.value );
    } );
    const duration = computed( () => {
        return beautifyTime( player.duration.value );
    } );
</script>

<template>
    <div class="mp-player">
        <ShareManagement v-model="showShareMenu" />
        <div class="controls">
            <i class="fa-solid fa-backward-step" @click="player.prev"></i>
            <i class="fa-solid fa-arrow-rotate-left quick-seek" @click="player.back10"></i>
            <div :class="['play-pause', player.isPlaying.value ? undefined : 'paused']">
                <i class="fa-solid fa-play" @click="player.play"></i>
                <i class="fa-solid fa-pause" @click="player.pause"></i>
            </div>
            <i class="fa-solid fa-arrow-rotate-right quick-seek" @click="player.skip10"></i>
            <i class="fa-solid fa-forward-step" @click="player.next"></i>
        </div>

        <div class="time">
            <p class="current">
                {{ current }}
            </p>
            <p class="duration">
                {{ duration }}
            </p>
        </div>
        <ProgressBar v-model="playbackPercentage" @move-end="seek" />
        <div class="bottom-bar">
            <!-- FA being a POS means need to make own mods to it -->
            <i
                :class="[
                    'fa-solid',
                    'fa-repeat',
                    'repeat',
                    repeatMode === 'one' ? 'once' : undefined,
                    repeatMode === 'all' ? 'all' : undefined
                ]"
                @click="toggleRepeatMode"
            ></i>
            <i class="fa-solid fa-share-from-square" @click="openShareMenu"></i>
            <i
                :class="['fa-solid', 'fa-shuffle', shuffleMode ? 'active' : undefined]"
                @click="player.setShuffle( !shuffleMode )"
            ></i>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    @use '@/scss/components/player.scss';
</style>