Made the video player work better on mobile

2024-04-16 03:49:18 +02:00 · 2024-04-16 03:49:18 +02:00 · 8b6bdd6e02
parent b5812de552
commit 8b6bdd6e02
3 changed files with 113 additions and 26 deletions
--- a/fe_calckey/frontend/client/package.json
+++ b/fe_calckey/frontend/client/package.json
@ -28,6 +28,7 @@
        "@types/uuid": "8.3.4",
        "@vitejs/plugin-vue": "^5.0.4",
        "@vue/runtime-core": "^3.4",
+        "@vueuse/core": "^10.9.0",
        "autobind-decorator": "2.4.0",
        "autosize": "5.0.2",
        "blurhash": "1.1.5",
--- a/fe_calckey/frontend/client/src/components/MagVideoPlayer.vue
+++ b/fe_calckey/frontend/client/src/components/MagVideoPlayer.vue
@ -1,11 +1,12 @@
 <template>
    <media-player
-        class="player"
+        class="magVideoPlayer"
        :title="video.comment"
        :src="{
            src: video.url,
            type: magTransProperty(video, 'mime_type', 'type'),
        }"
+        :media-type="magTransProperty(video, 'mime_type', 'type')"
        :volume="volume"
        :controlsDelay="500"
        :hideOnMouseLeave="true"
@ -22,18 +23,9 @@
        </media-provider>
        <media-plyr-layout
            :download="{ filename: video.name, url: video.url }"
-            :controls="[
-                'play',
-                'current-time',
-                'progress',
-                'duration',
-                'mute+volume',
-                'settings',
-                'download',
-                'pip',
-                'fullscreen',
-            ]"
-        />
+            :controls="controls"
+        >
+        </media-plyr-layout>
    </media-player>
 </template>

@ -47,28 +39,65 @@ import type * as misskey from "calckey-js";
 import { packed } from "magnetar-common";
 import { magTransProperty } from "@/scripts-mag/mag-util";
 import { ColdDeviceStorage } from "@/store";
-import { ref } from "vue";
+import { computed, ref } from "vue";
+import { useWindowSize } from "@vueuse/core";
+import { MediaPlayerElement } from "vidstack/elements";

 defineProps<{
    video: packed.PackDriveFileBase | misskey.entities.DriveFile;
 }>();

+const controlsSmall = [
+    "play",
+    "current-time",
+    "progress",
+    "duration",
+    "mute",
+    "download",
+    "fullscreen",
+];
+
+const controlsLarge = [
+    "play",
+    "current-time",
+    "progress",
+    "duration",
+    "mute+volume",
+    "settings",
+    "download",
+    "pip",
+    "fullscreen",
+];
+
+function getLayoutControls(width: number) {
+    if (width > 600) {
+        return controlsLarge;
+    } else {
+        return controlsSmall;
+    }
+}
+
 const volume = ref(ColdDeviceStorage.get("mediaVolume"));
+const { width } = useWindowSize();
+const controls = computed(() =>
+    structuredClone(getLayoutControls(width.value))
+);

 function volumeChange(e: Event): void {
-    if (e?.target?.volume)
-        ColdDeviceStorage.set("mediaVolume", e.target.volume);
+    let tgt = e.target as MediaPlayerElement | undefined;
+
+    if (tgt?.volume) ColdDeviceStorage.set("mediaVolume", tgt?.volume);
 }
 </script>
 <style lang="scss">
-.player {
+.magVideoPlayer {
    --plyr-color-main: var(--accent);

    &[data-view-type="video"] {
        aspect-ratio: 16 / 9;
    }

-    video {
+    & video {
        width: 100%;
        height: 100%;
    }
@ -76,6 +105,16 @@ function volumeChange(e: Event): void {
    & .plyr--video {
        & .plyr__controls {
            transition: opacity 0.2s ease-in-out;
+
+            & .plyr__volume {
+                @media all and (max-width: 600px) {
+                    flex: initial;
+
+                    & + .plyr__controls__item {
+                        margin-left: 0;
+                    }
+                }
+            }
        }

        &.plyr--hide-controls .plyr__controls {
--- a/fe_calckey/frontend/pnpm-lock.yaml
+++ b/fe_calckey/frontend/pnpm-lock.yaml
@ -65,7 +65,7 @@ importers:
        version: 1.15.2
      ts-node:
        specifier: ^10.9.2
-        version: 10.9.2(@types/node@20.12.7)(typescript@5.4.5)
+        version: 10.9.2(@types/node@20.8.10)(typescript@5.4.5)
      typescript:
        specifier: ^5.4.5
        version: 5.4.5
@ -164,6 +164,9 @@ importers:
      '@vue/runtime-core':
        specifier: ^3.4
        version: 3.4.21
+      '@vueuse/core':
+        specifier: ^10.9.0
+        version: 10.9.0(vue@3.4.21)
      autobind-decorator:
        specifier: 2.4.0
        version: 2.4.0
@ -334,7 +337,7 @@ importers:
        version: 1.11.12
      vite:
        specifier: ^5.2.8
-        version: 5.2.8(@types/node@20.12.7)(sass@1.62.1)
+        version: 5.2.8(@types/node@20.8.10)(sass@1.62.1)
      vite-plugin-compression:
        specifier: ^0.5.1
        version: 0.5.1(vite@5.2.8)
@ -1702,6 +1705,10 @@ packages:
      '@types/node': 20.8.10
    dev: true

+  /@types/web-bluetooth@0.0.20:
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+    dev: true
+
  /@types/webpack@5.28.5(@swc/core@1.4.12)(webpack-cli@5.1.4):
    resolution: {integrity: sha512-wR87cgvxj3p6D0Crt1r5avwqffqPXUkNlnQ1mjU93G7gCuFjufZR4I6j8cz5g1F1tTYpfOOFvly+cmIQwL9wvw==}
    dependencies:
@ -1730,7 +1737,7 @@ packages:
      vite: ^5.0.0
      vue: ^3.2.25
    dependencies:
-      vite: 5.2.8(@types/node@20.12.7)(sass@1.62.1)
+      vite: 5.2.8(@types/node@20.8.10)(sass@1.62.1)
      vue: 3.4.21(typescript@5.4.4)
    dev: true

@ -1807,6 +1814,31 @@ packages:
    resolution: {integrity: sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==}
    dev: true

+  /@vueuse/core@10.9.0(vue@3.4.21):
+    resolution: {integrity: sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.9.0
+      '@vueuse/shared': 10.9.0(vue@3.4.21)
+      vue-demi: 0.14.7(vue@3.4.21)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
+  /@vueuse/metadata@10.9.0:
+    resolution: {integrity: sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==}
+    dev: true
+
+  /@vueuse/shared@10.9.0(vue@3.4.21):
+    resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
+    dependencies:
+      vue-demi: 0.14.7(vue@3.4.21)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
  /@webassemblyjs/ast@1.12.1:
    resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==}
    dependencies:
@ -6299,7 +6331,7 @@ packages:
      yn: 3.1.1
    dev: true

-  /ts-node@10.9.2(@types/node@20.12.7)(typescript@5.4.5):
+  /ts-node@10.9.2(@types/node@20.8.10)(typescript@5.4.5):
    resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
    hasBin: true
    peerDependencies:
@ -6318,7 +6350,7 @@ packages:
      '@tsconfig/node12': 1.0.11
      '@tsconfig/node14': 1.0.3
      '@tsconfig/node16': 1.0.4
-      '@types/node': 20.12.7
+      '@types/node': 20.8.10
      acorn: 8.11.3
      acorn-walk: 8.3.2
      arg: 4.1.3
@ -6646,12 +6678,12 @@ packages:
      chalk: 4.1.2
      debug: 4.3.4(supports-color@8.1.1)
      fs-extra: 10.1.0
-      vite: 5.2.8(@types/node@20.12.7)(sass@1.62.1)
+      vite: 5.2.8(@types/node@20.8.10)(sass@1.62.1)
    transitivePeerDependencies:
      - supports-color
    dev: true

-  /vite@5.2.8(@types/node@20.12.7)(sass@1.62.1):
+  /vite@5.2.8(@types/node@20.8.10)(sass@1.62.1):
    resolution: {integrity: sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==}
    engines: {node: ^18.0.0 || >=20.0.0}
    hasBin: true
@ -6679,7 +6711,7 @@ packages:
      terser:
        optional: true
    dependencies:
-      '@types/node': 20.12.7
+      '@types/node': 20.8.10
      esbuild: 0.20.2
      postcss: 8.4.38
      rollup: 4.14.1
@ -6692,6 +6724,21 @@ packages:
    resolution: {integrity: sha512-8aluKz5oVC8PvVQAYgyIefOlqzKVmAOTCx2imbrFBVLbF7mnJvyMsE2A7rqX/4f4uT6ee9o8u3GcoRpUWc0xsw==}
    dev: true

+  /vue-demi@0.14.7(vue@3.4.21):
+    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      vue: 3.4.21(typescript@5.4.4)
+    dev: true
+
  /vue-isyourpasswordsafe@2.0.0:
    resolution: {integrity: sha512-j3ORj18R9AgFiP2UOM35KuZbSeJAUiwCSyeRBFN3CGFYTJSKsxqU9qGqOHOz6OhLAYKMTin8JOmqugAbF9O+Bg==}
    dependencies: