Front Vue: Player: Slider + callback on select

front-vue/components/player/player-controls.vue

@@ -6,6 +6,9 @@ defineProps<{
     poster: ImageModel | undefined | null;
     title: string | undefined;
     subtitle: string | undefined | null;
+    progress: number | undefined;
+    totalDuration: number | undefined;
+    onSlide: (newProgess: number) => void;
     onBackButtonTap: () => void;
 }>();
 </script>
@@ -20,15 +23,35 @@ defineProps<{
             </button>
         </div>
         <div
-            class="w-full absolute bottom-0 h-[140px] controls flex p-3 flex-row"
+            class="w-full absolute bottom-0 h-[150px] controls flex p-3 flex-row"
         >
             <Image :image="poster" image-type="poster" />
             <div class="w-full flex flex-col justify-between mt-7 pl-3">
-                <p v-if="title !== undefined" class="controls-text prose-md">{{ title }}</p>
-                <div v-else class="skeleton h-4 w-20"/>
-                <p v-if="subtitle !== undefined" class="controls-text prose-sm">{{ subtitle }}</p>
-                <div v-else class="skeleton h-3 w-20"/>
-                <div/>
+                <p v-if="title !== undefined" class="controls-text prose-lg">
+                    {{ title }}
+                </p>
+                <div v-else class="skeleton h-6 w-20 mb-3" />
+                <p v-if="subtitle !== undefined" class="controls-text prose-md">
+                    {{ subtitle }}
+                </p>
+                <div v-else class="skeleton h-3 w-20" />
+                <div class="flex flex-row w-full items-center">
+                    <div class="controls-text prose-sm">
+                        <p v-if="progress === undefined">--:--</p>
+                        <p v-else>{{ formatDuration(progress) }}</p>
+                    </div>
+                    <div class="w-full px-2">
+                        <PlayerSlider
+                            :progress="progress ?? 0"
+                            :total-duration="totalDuration"
+                            :on-click="onSlide"
+                        />
+                    </div>
+                    <div class="controls-text prose-sm">
+                        <p v-if="totalDuration === undefined">--:--</p>
+                        <p v-else>{{ formatDuration(totalDuration) }}</p>
+                    </div>
+                </div>
             </div>
         </div>
     </div>

front-vue/components/player/player-slider.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+defineProps<{
+    progress: number;
+    totalDuration: number | undefined;
+    onClick: (requestedProgress: number) => void;
+}>();
+</script>
+<template>
+    <div class="flex items-center">
+        <input
+            type="range"
+            min="0"
+            :max="totalDuration ?? 1"
+            :value="progress ?? 0"
+            class="player-slider"
+            @change="
+                (e) => {
+                    if (totalDuration !== undefined) {
+                        const target: any = e.target;
+                        const newProgress = target.value;
+                        // newProgress is a string :(
+                        onClick(parseInt(newProgress));
+                    }
+                }
+            "
+        />
+    </div>
+</template>
+<style scoped>
+/* Stolen from DaisyUI + changed to our needs */
+.player-slider {
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    --range-shdw: theme(colors.primary);
+    @apply rounded-box w-full overflow-hidden bg-neutral;
+    &:focus-visible::-webkit-slider-thumb {
+        --focus-shadow: 0 0 0 6px theme(colors.base-100) inset,
+            0 0 0 2rem var(--range-shdw) inset;
+    }
+    &:focus-visible::-moz-range-thumb {
+        --focus-shadow: 0 0 0 6px theme(colors.base-100) inset,
+            0 0 0 2rem var(--range-shdw) inset;
+    }
+    &::-webkit-slider-runnable-track {
+        @apply rounded-box bg-base-content/10 h-1.5 w-full;
+    }
+    &::-moz-range-track {
+        @apply rounded-box bg-base-content/10 h-1.5 w-full;
+    }
+    &::-webkit-slider-thumb {
+        @apply rounded-box bg-base-100 relative h-0 w-0 border-none;
+        appearance: none;
+        -webkit-appearance: none;
+        color: var(--range-shdw);
+        transform: translateY(-50%);
+        --filler-size: 100rem;
+        --filler-offset: 0rem;
+        box-shadow:
+            0 0 0 3px var(--range-shdw) inset,
+            var(--focus-shadow, 0 0),
+            calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0
+                var(--filler-size);
+    }
+    &::-moz-range-thumb {
+        @apply rounded-box bg-base-100 relative h-0 w-0 border-none;
+        color: var(--range-shdw);
+        --filler-size: 100rem;
+        --filler-offset: 0rem;
+        box-shadow:
+            0 0 0 3px var(--range-shdw) inset,
+            var(--focus-shadow, 0 0),
+            calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0
+                var(--filler-size);
+    }
+}
+</style>

front-vue/pages/player/[id].vue

@@ -33,6 +33,7 @@ const { resourceType, resourceId, startTimestamp } = (() => {
 const movieData = useQuery(API.getMovie(resourceId), {
     enabled: resourceType == "movie",
 });
+
 const extraData = useQuery(API.getExtra(resourceId), {
     enabled: resourceType == "extra",
 });
@@ -64,6 +65,7 @@ const packageData = useTanQuery(packageQueryProps);
 const fileData = useTanQuery(fileQueryProps);
 const r = useRouter();
 const canGoBack = r.options.history.state["back"] != null;
+const progress = ref(startTimestamp);
 </script>
 <template>
     <div class="w-full h-full relative">
@@ -80,10 +82,16 @@ const canGoBack = r.options.history.state["back"] != null;
             <span class="loading loading-spinner loading-lg text-primary" />
         </div>
         <!-- TODO Subtitle should include chapter if resouce is movie -->
+        <!-- TODO Handle Progress -->
         <PlayerControls
             :poster="packageData.data.value?.poster"
+            :total-duration="fileData.data.value?.duration"
+            :on-slide="(p) => (progress = p)"
+            :progress="progress"
             :title="(movieData.data.value ?? extraData.data.value)?.name"
-            :subtitle="(movieData.data.value ?? extraData.data.value)?.artist_name"
+            :subtitle="
+                (movieData.data.value ?? extraData.data.value)?.artist_name
+            "
             :can-go-back="canGoBack"
             :on-back-button-tap="() => (canGoBack ? r.go(-1) : r.replace('/'))"
         />