versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 11:39:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
Download patch file Download diff file Expand all files Collapse all files

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>