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

change video player to videojs

Browse source
This commit is contained in:
aprilthepink 2025-02-05 19:48:27 +01:00
parent ea406c9df4
commit 9e8cb3464c
5 changed files with 204 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

27
components/notes/attachment.vue
View file

@ -5,8 +5,17 @@
<img :src="attachment.url" :alt="attachment.description ?? undefined"
class="w-full h-full object-contain bg-muted/20" />
</DialogTrigger>
<video 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" controls />
<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
}
]
}" />
<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">
@ -46,8 +55,17 @@
<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" />
<video v-else-if="attachment.type === 'video' || attachment.type === 'gifv'" :src="attachment.url"
:alt="attachment.description ?? ''" class="object-cover" controls />
<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
}
]
}" />
<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">
@ -78,6 +96,7 @@ import {
DialogTrigger,
} from "../ui/dialog";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import VideoPlayer from '@/components/notes/videoplayer.vue';
defineProps<{
attachment: Attachment;

44
components/notes/videoplayer.vue Normal file
View file

@ -0,0 +1,44 @@
<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>