Made the video player work better on mobile
ci/woodpecker/push/ociImagePush Pipeline is running Details

This commit is contained in:
Natty 2024-04-16 03:49:18 +02:00
parent b5812de552
commit 8b6bdd6e02
Signed by: natty
GPG Key ID: BF6CB659ADEE60EC
3 changed files with 113 additions and 26 deletions

View File

@ -28,6 +28,7 @@
"@types/uuid": "8.3.4", "@types/uuid": "8.3.4",
"@vitejs/plugin-vue": "^5.0.4", "@vitejs/plugin-vue": "^5.0.4",
"@vue/runtime-core": "^3.4", "@vue/runtime-core": "^3.4",
"@vueuse/core": "^10.9.0",
"autobind-decorator": "2.4.0", "autobind-decorator": "2.4.0",
"autosize": "5.0.2", "autosize": "5.0.2",
"blurhash": "1.1.5", "blurhash": "1.1.5",

View File

@ -1,11 +1,12 @@
<template> <template>
<media-player <media-player
class="player" class="magVideoPlayer"
:title="video.comment" :title="video.comment"
:src="{ :src="{
src: video.url, src: video.url,
type: magTransProperty(video, 'mime_type', 'type'), type: magTransProperty(video, 'mime_type', 'type'),
}" }"
:media-type="magTransProperty(video, 'mime_type', 'type')"
:volume="volume" :volume="volume"
:controlsDelay="500" :controlsDelay="500"
:hideOnMouseLeave="true" :hideOnMouseLeave="true"
@ -22,18 +23,9 @@
</media-provider> </media-provider>
<media-plyr-layout <media-plyr-layout
:download="{ filename: video.name, url: video.url }" :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> </media-player>
</template> </template>
@ -47,28 +39,65 @@ import type * as misskey from "calckey-js";
import { packed } from "magnetar-common"; import { packed } from "magnetar-common";
import { magTransProperty } from "@/scripts-mag/mag-util"; import { magTransProperty } from "@/scripts-mag/mag-util";
import { ColdDeviceStorage } from "@/store"; import { ColdDeviceStorage } from "@/store";
import { ref } from "vue"; import { computed, ref } from "vue";
import { useWindowSize } from "@vueuse/core";
import { MediaPlayerElement } from "vidstack/elements";
defineProps<{ defineProps<{
video: packed.PackDriveFileBase | misskey.entities.DriveFile; 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 volume = ref(ColdDeviceStorage.get("mediaVolume"));
const { width } = useWindowSize();
const controls = computed(() =>
structuredClone(getLayoutControls(width.value))
);
function volumeChange(e: Event): void { 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> </script>
<style lang="scss"> <style lang="scss">
.player { .magVideoPlayer {
--plyr-color-main: var(--accent); --plyr-color-main: var(--accent);
&[data-view-type="video"] { &[data-view-type="video"] {
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
} }
video { & video {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -76,6 +105,16 @@ function volumeChange(e: Event): void {
& .plyr--video { & .plyr--video {
& .plyr__controls { & .plyr__controls {
transition: opacity 0.2s ease-in-out; 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 { &.plyr--hide-controls .plyr__controls {

View File

@ -65,7 +65,7 @@ importers:
version: 1.15.2 version: 1.15.2
ts-node: ts-node:
specifier: ^10.9.2 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: typescript:
specifier: ^5.4.5 specifier: ^5.4.5
version: 5.4.5 version: 5.4.5
@ -164,6 +164,9 @@ importers:
'@vue/runtime-core': '@vue/runtime-core':
specifier: ^3.4 specifier: ^3.4
version: 3.4.21 version: 3.4.21
'@vueuse/core':
specifier: ^10.9.0
version: 10.9.0(vue@3.4.21)
autobind-decorator: autobind-decorator:
specifier: 2.4.0 specifier: 2.4.0
version: 2.4.0 version: 2.4.0
@ -334,7 +337,7 @@ importers:
version: 1.11.12 version: 1.11.12
vite: vite:
specifier: ^5.2.8 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: vite-plugin-compression:
specifier: ^0.5.1 specifier: ^0.5.1
version: 0.5.1(vite@5.2.8) version: 0.5.1(vite@5.2.8)
@ -1702,6 +1705,10 @@ packages:
'@types/node': 20.8.10 '@types/node': 20.8.10
dev: true 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): /@types/webpack@5.28.5(@swc/core@1.4.12)(webpack-cli@5.1.4):
resolution: {integrity: sha512-wR87cgvxj3p6D0Crt1r5avwqffqPXUkNlnQ1mjU93G7gCuFjufZR4I6j8cz5g1F1tTYpfOOFvly+cmIQwL9wvw==} resolution: {integrity: sha512-wR87cgvxj3p6D0Crt1r5avwqffqPXUkNlnQ1mjU93G7gCuFjufZR4I6j8cz5g1F1tTYpfOOFvly+cmIQwL9wvw==}
dependencies: dependencies:
@ -1730,7 +1737,7 @@ packages:
vite: ^5.0.0 vite: ^5.0.0
vue: ^3.2.25 vue: ^3.2.25
dependencies: 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) vue: 3.4.21(typescript@5.4.4)
dev: true dev: true
@ -1807,6 +1814,31 @@ packages:
resolution: {integrity: sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==} resolution: {integrity: sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==}
dev: true 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: /@webassemblyjs/ast@1.12.1:
resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==} resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==}
dependencies: dependencies:
@ -6299,7 +6331,7 @@ packages:
yn: 3.1.1 yn: 3.1.1
dev: true 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==} resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
hasBin: true hasBin: true
peerDependencies: peerDependencies:
@ -6318,7 +6350,7 @@ packages:
'@tsconfig/node12': 1.0.11 '@tsconfig/node12': 1.0.11
'@tsconfig/node14': 1.0.3 '@tsconfig/node14': 1.0.3
'@tsconfig/node16': 1.0.4 '@tsconfig/node16': 1.0.4
'@types/node': 20.12.7 '@types/node': 20.8.10
acorn: 8.11.3 acorn: 8.11.3
acorn-walk: 8.3.2 acorn-walk: 8.3.2
arg: 4.1.3 arg: 4.1.3
@ -6646,12 +6678,12 @@ packages:
chalk: 4.1.2 chalk: 4.1.2
debug: 4.3.4(supports-color@8.1.1) debug: 4.3.4(supports-color@8.1.1)
fs-extra: 10.1.0 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: transitivePeerDependencies:
- supports-color - supports-color
dev: true 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==} resolution: {integrity: sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==}
engines: {node: ^18.0.0 || >=20.0.0} engines: {node: ^18.0.0 || >=20.0.0}
hasBin: true hasBin: true
@ -6679,7 +6711,7 @@ packages:
terser: terser:
optional: true optional: true
dependencies: dependencies:
'@types/node': 20.12.7 '@types/node': 20.8.10
esbuild: 0.20.2 esbuild: 0.20.2
postcss: 8.4.38 postcss: 8.4.38
rollup: 4.14.1 rollup: 4.14.1
@ -6692,6 +6724,21 @@ packages:
resolution: {integrity: sha512-8aluKz5oVC8PvVQAYgyIefOlqzKVmAOTCx2imbrFBVLbF7mnJvyMsE2A7rqX/4f4uT6ee9o8u3GcoRpUWc0xsw==} resolution: {integrity: sha512-8aluKz5oVC8PvVQAYgyIefOlqzKVmAOTCx2imbrFBVLbF7mnJvyMsE2A7rqX/4f4uT6ee9o8u3GcoRpUWc0xsw==}
dev: true 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: /vue-isyourpasswordsafe@2.0.0:
resolution: {integrity: sha512-j3ORj18R9AgFiP2UOM35KuZbSeJAUiwCSyeRBFN3CGFYTJSKsxqU9qGqOHOz6OhLAYKMTin8JOmqugAbF9O+Bg==} resolution: {integrity: sha512-j3ORj18R9AgFiP2UOM35KuZbSeJAUiwCSyeRBFN3CGFYTJSKsxqU9qGqOHOz6OhLAYKMTin8JOmqugAbF9O+Bg==}
dependencies: dependencies: