Made the video player work better on mobile
ci/woodpecker/push/ociImagePush Pipeline is running
Details
ci/woodpecker/push/ociImagePush Pipeline is running
Details
This commit is contained in:
parent
b5812de552
commit
8b6bdd6e02
|
@ -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",
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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:
|
||||||
|
|
Loading…
Reference in New Issue