feat: use actions (#22)

* Add quality selector

* Improve menu's and navigation

* Code refactoring

package.json

@@ -15,12 +15,12 @@
     "@quasar/extras": "^1.10.12",
     "@types/qs": "^6.9.7",
     "axios": "^0.21.4",
-    "core-js": "^3.17.2",
+    "core-js": "^3.17.3",
     "dashjs": "4.0.1",
-    "dayjs": "^1.10.6",
+    "dayjs": "^1.10.7",
     "laravel-echo": "^1.11.2",
     "lodash": "^4.17.21",
-    "pinia": "^2.0.0-rc.8",
+    "pinia": "^2.0.0-rc.9",
     "pusher-js": "^7.0.3",
     "qs": "^6.10.1",
     "quasar": "^2.0.4",
@@ -30,7 +30,7 @@
     "@babel/eslint-parser": "^7.15.4",
     "@quasar/app": "^3.1.0",
     "@types/lodash": "^4.14.172",
-    "@types/node": "^16.7.12",
+    "@types/node": "^16.9.1",
     "@typescript-eslint/eslint-plugin": "^4.31.0",
     "@typescript-eslint/parser": "^4.31.0",
     "dotenv": "^10.0.0",
@@ -39,7 +39,7 @@
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "eslint-plugin-vue": "^7.17.0",
-    "workbox-webpack-plugin": "^6.2.4"
+    "workbox-webpack-plugin": "^6.3.0"
   },
   "browserslist": [
     "last 10 Chrome versions",

src/components/player/ActionControl.vue

@@ -0,0 +1,53 @@
+<template>
+  <q-icon
+    right
+    color="white"
+    class="header-actions cursor-pointer"
+    name="more_vert"
+    aria-label="More Actions"
+    size="24px"
+  >
+    <q-menu
+      anchor="top right"
+      class="menu"
+      self="top right"
+      square
+      transition-duration="0"
+      style="width: 230px; max-width: 100vw;"
+      @hide="setComponent('ModelControl')"
+    >
+      <component
+        :is="currentComponent"
+        @set-component="setComponent"
+      />
+    </q-menu>
+  </q-icon>
+</template>
+
+<script lang="ts">
+import ModelControl from 'src/components/player/ModelControl.vue';
+import QualityControl from 'src/components/player/QualityControl.vue';
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  name: 'ActionControl',
+
+  components: {
+    ModelControl,
+    QualityControl,
+  },
+
+  setup() {
+    const currentComponent = ref<string>('ModelControl');
+
+    const setComponent = (value: string) => {
+      currentComponent.value = value;
+    };
+
+    return {
+      setComponent,
+      currentComponent,
+    };
+  },
+});
+</script>

src/components/player/ModelControl.vue

@@ -1,65 +1,92 @@
 <template>
-  <q-icon
-    name="more_vert"
-    color="white"
-    class="cursor-pointer"
-    size="24px"
-    right
+  <q-list
+    bordered
+    dense
+    separator
+    style="width: 230px; max-width: 100vw;"
   >
-    <q-menu
-      anchor="top right"
-      class="menu"
-      self="top right"
-      square
-      transition-duration="0"
-      style="width: 160px; max-width: 100vw;"
+    <q-item
+      v-close-popup
+      clickable
+      @click="edit"
     >
-      <q-list
-        bordered
-        dense
-      >
-        <q-item
-          v-close-popup
-          clickable
-          @click="edit"
-        >
-          <q-item-section>Edit Model</q-item-section>
-        </q-item>
-
-        <q-item
-          v-close-popup
-          clickable
-          @click="capture"
-        >
-          <q-item-section>Set Thumbnail</q-item-section>
-        </q-item>
-      </q-list>
-    </q-menu>
-  </q-icon>
+      <q-item-section side>
+        <q-icon name="o_movie" />
+      </q-item-section>
+
+      <q-item-section>
+        <q-item-label>
+          Edit Video
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+
+    <q-item
+      v-close-popup
+      clickable
+      @click="capture"
+    >
+      <q-item-section side>
+        <q-icon name="o_photo_camera" />
+      </q-item-section>
+
+      <q-item-section>
+        <q-item-label>
+          Set as Thumbnail
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+
+    <q-item
+      clickable
+      @click="$emit('setComponent', 'QualityControl')"
+    >
+      <q-item-section side>
+        <q-icon name="o_video_settings" />
+      </q-item-section>
+
+      <q-item-section>Quality</q-item-section>
+
+      <q-item-section side>
+        <div class="row items-center justify-end">
+          <span class="text-caption">{{ resolution?.label }}</span>
+
+          <q-icon
+            name="keyboard_arrow_right"
+            size="24px"
+            right
+          />
+        </div>
+      </q-item-section>
+    </q-item>
+  </q-list>
 </template>
 
 <script lang="ts">
 import { useQuasar } from 'quasar';
 import VideoEdit from 'src/components/video/Edit.vue';
 import useDash from 'src/composables/useDash';
-import { save } from 'src/repositories/media';
-import { defineComponent } from 'vue';
+import useFilters from 'src/composables/useFilters';
+import { VideoModel } from 'src/interfaces/video';
+import { save } from 'src/repositories/video';
+import { computed, defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'ModelControl',
 
+  emits: ['setComponent'],
+
   setup() {
     const { store } = useDash();
+    const { formatResolution } = useFilters();
     const $q = useQuasar();
 
     const capture = async (): Promise<void> => {
-      if (!store.model?.clip) {
-        return;
-      }
+      if (store.properties?.time < 1) return;
 
-      await save({
-        ...store.model.clip,
-        ...{ thumbnail: store.properties?.time || 0 },
+      await save(<VideoModel>{
+        ...store.model,
+        ...{ capture_time: store.properties?.time || 0 },
       });
 
       $q.notify({
@@ -77,9 +104,17 @@ export default defineComponent({
       });
     };
 
+    const bitrate = computed(() => store.properties.videoTrack?.bitrateList.find(Boolean));
+
+    const resolution = computed(() => formatResolution(
+      bitrate.value?.height || 0,
+      bitrate.value?.width || 0,
+    ));
+
     return {
       capture,
       edit,
+      resolution,
     };
   },
 });

src/components/player/QualityControl.vue

@@ -0,0 +1,52 @@
+<template>
+  <q-list
+    v-for="(item, index) in bitrates"
+    :key="index"
+    bordered
+    dense
+    separator
+    style="width: 230px; max-width: 100vw;"
+  >
+    <q-item
+      v-close-popup
+      clickable
+    >
+      <q-item-section side>
+        <q-icon :name="item.icon" />
+      </q-item-section>
+
+      <q-item-section>{{ item.label }}</q-item-section>
+
+      <q-item-section side>
+        <q-icon name="o_check" />
+      </q-item-section>
+    </q-item>
+  </q-list>
+</template>
+
+<script lang="ts">
+import useDash from 'src/composables/useDash';
+import useFilters from 'src/composables/useFilters';
+import { computed, defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'QualityControl',
+
+  emits: ['setComponent'],
+
+  setup() {
+    const { store } = useDash();
+    const { formatResolution } = useFilters();
+
+    const bitrates = computed(() => store.properties.videoTracks?.map((x) => {
+      const bitrate = x.bitrateList.find(Boolean);
+      return formatResolution(bitrate?.height || 0, bitrate?.width || 0);
+    }));
+
+    return {
+      store,
+      bitrates,
+    };
+  },
+});
+</script>

src/components/player/SettingsControl.vue

@@ -2,26 +2,23 @@
   <div class="player-settings absolute-top-right">
     <favorite-control />
     <follow-control />
-    <caption-control />
-    <model-control />
+    <action-control />
   </div>
 </template>
 
 <script lang="ts">
-import CaptionControl from 'src/components/player/CaptionControl.vue';
+import ActionControl from 'src/components/player/ActionControl.vue';
 import FavoriteControl from 'src/components/player/FavoriteControl.vue';
 import FollowControl from 'src/components/player/FollowControl.vue';
-import ModelControl from 'src/components/player/ModelControl.vue';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
   name: 'SettingsControl',
 
   components: {
-    CaptionControl,
+    ActionControl,
     FavoriteControl,
     FollowControl,
-    ModelControl,
   },
 });
 </script>

src/components/player/TooltipControl.vue

@@ -22,6 +22,7 @@
 import { clamp, debounce, find, inRange } from 'lodash';
 import useDash from 'src/composables/useDash';
 import useFilters from 'src/composables/useFilters';
+import { PlayerThumbnail } from 'src/interfaces/player';
 import { getBlob } from 'src/services/api';
 import {
   computed, defineComponent, ref, watch,
@@ -50,7 +51,11 @@ export default defineComponent({
         (o: VTTCue) => inRange(time.value, o.startTime, o.endTime),
       ) as VTTCue;
 
-      const response = await getBlob(cue?.text || '');
+      if (!cue) return;
+
+      const text = JSON.parse(cue?.text) as PlayerThumbnail;
+
+      const response = await getBlob(text.url || '');
       const reader = new window.FileReader();
 
       reader.readAsDataURL(response);