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",
|
||||
"@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",
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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:
|
||||
|
|
Loading…
Reference in New Issue