versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: ✨ Introduce videojs as video player

Browse source 
Replaces the old default HTML video player with one on the basis of video.js
This commit is contained in:
aprilthepink 2025-02-05 20:34:09 +01:00
parent 094cb16801
commit 223d8b7870
4 changed files with 14 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
bun.lock
View file

@ -23,6 +23,7 @@
"@tiptap/vue-3": "^2.11.3",
"@vee-validate/zod": "^4.15.0",
"@versia/client": "0.1.5",
"@videojs-player/vue": "^1.0.0",
"@vite-pwa/nuxt": "^0.10.6",
"@vueuse/core": "^12.5.0",
"@vueuse/nuxt": "^12.5.0",
@ -744,6 +745,8 @@
"@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
"@types/video.js": ["@types/video.js@7.3.58", "", {}, "sha512-1CQjuSrgbv1/dhmcfQ83eVyYbvGyqhTvb2Opxr0QCV+iJ4J6/J+XWQ3Om59WiwCd1MN3rDUHasx5XRrpUtewYQ=="],
"@types/web-bluetooth": ["@types/web-bluetooth@0.0.20", "", {}, "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="],
"@unhead/dom": ["@unhead/dom@1.11.18", "", { "dependencies": { "@unhead/schema": "1.11.18", "@unhead/shared": "1.11.18" } }, "sha512-zQuJUw/et9zYEV0SZWTDX23IgurwMaXycAuxt4L6OgNL0T4TWP3a0J/Vm3Q02hmdNo/cPKeVBrwBdnFUXjGU4w=="],
@ -762,6 +765,8 @@
"@versia/client": ["@versia/client@0.1.5", "", { "dependencies": { "@badgateway/oauth2-client": "^2.4.2", "zod": "^3.24.1" } }, "sha512-POD2/IT98EZZ32kWEPc3XUY2zApX94tuBftNWIMyoT04Sp7CPuvv1TT2fxM2kmgrC6kgbh4I6yirPpzVY+FpSA=="],
"@videojs-player/vue": ["@videojs-player/vue@1.0.0", "", { "peerDependencies": { "@types/video.js": "7.x", "video.js": "7.x", "vue": "3.x" } }, "sha512-WonTezRfKu3fYdQLt/ta+nuKH6gMZUv8l40Jke/j4Lae7IqeO/+lLAmBnh3ni88bwR+vkFXIlZ2Ci7VKInIYJg=="],
"@videojs/http-streaming": ["@videojs/http-streaming@3.17.0", "", { "dependencies": { "@babel/runtime": "^7.12.5", "@videojs/vhs-utils": "^4.1.1", "aes-decrypter": "^4.0.2", "global": "^4.4.0", "m3u8-parser": "^7.2.0", "mpd-parser": "^1.3.1", "mux.js": "7.1.0", "video.js": "^7 || ^8" } }, "sha512-Ch1P3tvvIEezeZXyK11UfWgp4cWKX4vIhZ30baN/lRinqdbakZ5hiAI3pGjRy3d+q/Epyc8Csz5xMdKNNGYpcw=="],
"@videojs/vhs-utils": ["@videojs/vhs-utils@4.1.1", "", { "dependencies": { "@babel/runtime": "^7.12.5", "global": "^4.4.0" } }, "sha512-5iLX6sR2ownbv4Mtejw6Ax+naosGvoT9kY+gcuHzANyUZZ+4NpeNdKMUhb6ag0acYej1Y7cmr/F2+4PrggMiVA=="],

33
components/notes/attachment.vue
View file

@ -5,18 +5,9 @@
<img :src="attachment.url" :alt="attachment.description ?? undefined"
class="w-full h-full object-contain bg-muted/20" />
</DialogTrigger>
<VideoPlayer v-else-if="attachment.type === 'video' || attachment.type === 'gifv'" :src="attachment.url"
:alt="attachment.description ?? undefined" class="w-full h-full object-cover bg-muted/20" :options="{
autoplay: false,
controls: true,
preload: 'auto',
sources: [
{
src: attachment.url,
type: 'video/mp4'
}
]
}" />
<video-player v-else-if="attachment.type === 'video' || attachment.type === 'gifv'"
:alt="attachment.description ?? undefined" class="w-full h-full object-cover bg-muted/20"
src="attachment.url" controls :volume="0.6" />
<audio v-else-if="attachment.type === 'audio'" :src="attachment.url"
:alt="attachment.description ?? undefined" class="w-full h-full object-cover bg-muted/20" controls />
<DialogTrigger v-else :as-child="true">
@ -56,18 +47,9 @@
<div class="flex items-center justify-center overflow-hidden *:max-h-[80vh] *:max-w-[80vw]">
<img v-if="attachment.type === 'image'" :src="attachment.url" :alt="attachment.description ?? ''"
class="object-contain" />
<VideoPlayer v-else-if="attachment.type === 'video' || attachment.type === 'gifv'" :src="attachment.url"
:alt="attachment.description ?? undefined" class="w-full h-full object-cover bg-muted/20" :options="{
autoplay: false,
controls: true,
preload: 'auto',
sources: [
{
src: attachment.url,
type: 'video/mp4'
}
]
}" />
<video-player v-else-if="attachment.type === 'video' || attachment.type === 'gifv'"
:alt="attachment.description ?? undefined" class="w-full h-full object-cover bg-muted/20"
src="attachment.url" controls :volume="0.6" />
<audio v-else-if="attachment.type === 'audio'" :src="attachment.url" :alt="attachment.description ?? ''"
class="object-cover" controls />
<div v-else class="flex flex-col items-center justify-center">
@ -98,7 +80,8 @@ import {
DialogTrigger,
} from "../ui/dialog";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import VideoPlayer from '@/components/notes/videoplayer.vue';
import { VideoPlayer } from '@videojs-player/vue'
import 'video.js/dist/video-js.css'
defineProps<{
attachment: Attachment;

44
components/notes/videoplayer.vue
View file

@ -1,44 +0,0 @@
<script lang="ts">
import videojs from 'video.js';
export default {
name: 'VideoPlayer',
props: {
options: {
type: Object,
default() {
return {};
}
},
url: {
type: String,
default() {
return "";
}
}
},
data() {
return {
player: null
}
},
mounted() {
this.player = videojs(this.$refs.videoPlayer, this.options, () => {
this.player.log('onPlayerReady', this);
});
},
beforeDestroy() {
if (this.player) {
this.player.dispose();
}
}
}
</script>
<template>
<div>
<video ref="videoPlayer" class="video-js" controls>
Your browser does not support the video tag.
</video>
</div>
</template>

1
package.json
View file

@ -49,6 +49,7 @@
"@tiptap/vue-3": "^2.11.3",
"@vee-validate/zod": "^4.15.0",
"@versia/client": "0.1.5",
"@videojs-player/vue": "^1.0.0",
"@vite-pwa/nuxt": "^0.10.6",
"@vueuse/core": "^12.5.0",
"@vueuse/nuxt": "^12.5.0",