chore: refactor vue components

2026-09-10 14:25:24 +02:00 · 2026-09-02 15:21:43 +02:00
parent 8a3dd7a583
commit b903eb416f
30 changed files with 209 additions and 52 deletions
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+    import ProgressBar from './ProgressBar.vue';
+    import {
+        beautifyTime
+    } from '@/ts/util/time';
+    import {
+        computed
+    } from 'vue';
+    import player from '@/ts/player';
+
+    const playbackPercentage = player.playbackPercentage;
+    const repeatMode = player.repeat;
+    const shuffleMode = player.shuffle;
+
+    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 = () => {
+        alert( 'Share menu not yet implemented' );
+    };
+
+    const current = computed( () => {
+        return beautifyTime( player.playbackPercentage.value * player.duration.value );
+    } );
+    const duration = computed( () => {
+        return beautifyTime( player.duration.value );
+    } );
+
+
+    // TODO: Button availability
+</script>
+
+<template>
+    <div class="mp-player">
+        <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>