Move playback control

src/components/player/VideoControls.vue

@@ -16,7 +16,6 @@
         class="player-video-controls absolute-full all-pointer-events"
       >
         <control-bar />
-        <playback-control />
       </div>
     </transition>
   </div>
@@ -31,7 +30,6 @@ export default defineComponent({
 
   components: {
     ControlBar: defineAsyncComponent(() => import('components/player/controls/ControlBar.vue')),
-    PlaybackControl: defineAsyncComponent(() => import('components/player/controls/PlaybackControl.vue')),
   },
 
   setup() {

src/components/player/controls/ControlBar.vue

@@ -3,8 +3,10 @@
     <seek-control />
 
     <q-toolbar class="player-video-toolbar">
+      <playback-control />
       <duration-control />
       <q-space />
+      <loading-control />
       <quality-control />
       <fullscreen-control />
     </q-toolbar>
@@ -20,6 +22,8 @@ export default defineComponent({
   components: {
     DurationControl: defineAsyncComponent(() => import('components/player/controls/DurationControl.vue')),
     FullscreenControl: defineAsyncComponent(() => import('components/player/controls/FullscreenControl.vue')),
+    LoadingControl: defineAsyncComponent(() => import('components/player/controls/LoadingControl.vue')),
+    PlaybackControl: defineAsyncComponent(() => import('components/player/controls/PlaybackControl.vue')),
     QualityControl: defineAsyncComponent(() => import('components/player/controls/QualityControl.vue')),
     SeekControl: defineAsyncComponent(() => import('components/player/controls/SeekControl.vue')),
   },

src/components/player/controls/DurationControl.vue

@@ -1,5 +1,7 @@
 <template>
-  <span class="player-video-control text-caption">{{ time }} / {{ duration }}</span>
+  <div class="player-video-control q-px-sm">
+    <span class="text-caption text-weight-bold">{{ time }} / {{ duration }}</span>
+  </div>
 </template>
 
 <script lang="ts">

src/components/player/controls/LoadingControl.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="player-video-control q-px-sm">
+    <q-spinner
+      v-if="loading"
+      size="20px"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { usePlayer } from 'src/composables/usePlayer';
+import { computed, defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'LoadingControl',
+
+  setup() {
+    const { state } = usePlayer();
+
+    const loading = computed(() => !state.ready || !state.buffered);
+
+    return {
+      loading,
+    };
+  },
+});
+</script>

src/components/player/controls/PlaybackControl.vue

@@ -1,30 +1,28 @@
 <template>
-  <div class="player-video-control absolute-center">
-    <div class="row no-wrap items-center content-center q-col-gutter-lg">
-      <q-icon
-        name="replay_10"
-        class="cursor-pointer"
-        size="36px"
-        tabindex="0"
-        @click="decreaseTime"
-      />
-
-      <q-icon
-        :name="playing"
-        class="cursor-pointer"
-        size="72px"
-        tabindex="0"
-        @click="togglePlayback"
-      />
-
-      <q-icon
-        name="forward_10"
-        class="cursor-pointer"
-        size="36px"
-        tabindex="0"
-        @click="increaseTime"
-      />
-    </div>
+  <div class="row no-wrap items-center content-center q-col-gutter-xs">
+    <q-icon
+      :name="playing"
+      class="cursor-pointer"
+      size="24px"
+      tabindex="0"
+      @click="togglePlayback"
+    />
+
+    <q-icon
+      name="replay_10"
+      class="cursor-pointer"
+      size="24px"
+      tabindex="0"
+      @click="decreaseTime"
+    />
+
+    <q-icon
+      name="forward_10"
+      class="cursor-pointer"
+      size="24px"
+      tabindex="0"
+      @click="increaseTime"
+    />
   </div>
 </template>
 

src/components/player/controls/QualityControl.vue

@@ -1,9 +1,5 @@
 <template>
-  <div class="player-video-control q-gutter-x-md">
-    <template v-if="loading">
-      <q-spinner size="20px" />
-    </template>
-
+  <div class="player-video-control">
     <span class="text-weight-medium">{{ resolution?.label }}</span>
   </div>
 </template>
@@ -35,11 +31,9 @@ export default defineComponent({
       return heightMatch || widthMatch;
     };
 
-    const loading = computed(() => !state.ready || !state.buffered);
     const resolution = computed(() => getResolution(state.bitrate?.height || 0, state.bitrate?.width || 0));
 
     return {
-      loading,
       resolution,
     };
   },

src/components/player/controls/SeekControl.vue

@@ -8,12 +8,13 @@
 
   <q-slider
     ref="slider"
-    class="player-video-control player-video-seeker"
     :model-value="state.time || 0"
     :min="0.0"
     :max="state.duration || 0"
     :step="0"
     :style="{ '--buffer': `${buffered}%` }"
+    class="player-video-control player-video-seeker"
+    dense
     color="primary"
     tabindex="0"
     @mousemove="onMouseHover"

src/components/video/VideoPlayer.vue

@@ -45,7 +45,6 @@ export default defineComponent({
 
     const capture = async () => {
       const data = <VideoModel>{ thumbnail: state.time || video.data?.thumbnail };
-
       await save(video.data?.id || '', data);
     };
 

src/css/quasar.variables.scss

@@ -144,8 +144,6 @@ $button-line-height: 32px;
 $button-shadow: none;
 $button-shadow-active: none;
 $button-font-weight: map-get($text-weights, "medium");
-$button-rounded-border-radius: 60px;
-$button-push-border-radius: 8px;
 
 $item-base-color: transparent;