Made the video player work better on mobile

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",

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="[
+            :controls="controls"
-                'play',
+        >
-                'current-time',
+        </media-plyr-layout>
-                'progress',
-                'duration',
-                'mute+volume',
-                'settings',
-                'download',
-                'pip',
-                'fullscreen',
-            ]"
-        />
     </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)
+    let tgt = e.target as MediaPlayerElement | undefined;
-        ColdDeviceStorage.set("mediaVolume", e.target.volume);
+
+    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 {

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: