fix: replace videojs with plyr

packages/nc-gui/components/cell/attachment/Carousel.vue

@@ -144,8 +144,8 @@ watchOnce(emblaMainApi, async (emblaMainApi) => {
               <LazyCellAttachmentPreviewVideo
                 v-else-if="isVideo(item.title, item.mimeType)"
                 class="flex items-center w-full"
-                :src="getPossibleAttachmentSrc(item)[0]"
-                :sources="getPossibleAttachmentSrc(item).map((src) => ({ src, type: item.mimeType }))"
+                :mime-type="item.mimeType"
+                :src="getPossibleAttachmentSrc(item)"
               />
               <LazyCellAttachmentPreviewPdf
                 v-else-if="isPdf(item.title, item.mimeType)"

packages/nc-gui/components/cell/attachment/Preview/Video.vue

@@ -1,76 +1,14 @@
 <script setup lang="ts">
-import videojs from 'video.js'
-import { stripUndefinedOrNull } from '~/utils/objectUtils'
-import 'video.js/dist/video-js.css'
+import Plyr from 'plyr'
+import 'plyr/dist/plyr.css'
 
 interface Props {
-  autoplay?: boolean
-  controls?: boolean
-  height?: string | number
-  loop?: boolean
-  muted?: boolean
-  poster?: string
-  preload?: 'auto' | 'metadata' | 'none'
-  width?: string | number
-  aspectRatio?: string
-  audioOnlyMode?: boolean
-  audioPosterMode?: boolean
-  autoSetup?: boolean
-  disablePictureInPicture?: boolean
-  enableDocumentPictireInPicture?: boolean
-  enableSmoothSeeking?: boolean
-  fluid?: boolean
-  src?: string
-  fullScreen?: {
-    options?: {
-      navigationUI?: 'hide' | 'show'
-      id?: string
-    }
-  }
-  inactivityTimeout?: number
-  language?: string
-  liveui?: boolean
-  notSupportedMessage?: string
-  playbackRates?: number[]
-  playsinline?: boolean
-  plugins?: Record<string, any>
-  preferFullWindow?: boolean
-  responsive?: boolean
-  restoreEl?: Element | boolean
-  skipButtons?: {
-    forward?: number
-    back?: number
-  }
-  sources?: {
-    src: string
-    type: string
-  }[]
-  suppressNotSupportedError?: boolean
-  techOrder?: string[]
-  userActions?: {
-    click?: (event: Event) => void | boolean
-    doubleClick?: (event: Event) => void | boolean
-    hotkeys?: (event: Event) => void | boolean | Record<string, (event: Event) => void>
-  }
+  src?: string[]
+  mimeType?: string
   class?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  preload: 'metadata',
-  controls: true,
-  audioOnlyMode: false,
-  audioPosterMode: false,
-  autoSetup: true,
-  disablePictureInPicture: false,
-  enableDocumentPictireInPicture: false,
-  enableSmoothSeeking: true,
-  fluid: true,
-  language: 'en',
-  liveui: true,
-  playsinline: true,
-  preferFullWindow: false,
-  responsive: true,
-  restoreEl: false,
   class: '',
 })
 
@@ -80,19 +18,19 @@ interface Emits {
   (event: 'init', player: any): void
 }
 
-const videoPlayer = ref<Element>()
+const videoPlayer = ref<HTMLElement>()
 
 const player = ref()
 
 onMounted(() => {
   if (!videoPlayer.value) return
-  player.value = videojs(videoPlayer.value, stripUndefinedOrNull(props))
+  player.value = new Plyr(videoPlayer.value)
   emit('init', player.value)
 })
 
 onBeforeUnmount(() => {
   if (player.value) {
-    player.value.dispose()
+    player.value.destroy()
   }
 })
 </script>
@@ -100,11 +38,16 @@ onBeforeUnmount(() => {
 <template>
   <video
     ref="videoPlayer"
+    controls
+    crossorigin
+    playsinline
     :class="{
       [props.class]: props.class,
     }"
-    class="video-js h-auto w-full"
-  ></video>
+    class="videoplayer h-auto w-full"
+  >
+    <source v-for="(src, id) in props.src" :key="id" :src="src" :type="mimeType" />
+  </video>
 </template>
 
 <style scoped lang="scss"></style>

packages/nc-gui/utils/objectUtils.ts

@@ -1,26 +0,0 @@
-type NonUndefined<T> = T extends undefined ? never : T
-type NonNull<T> = T extends null ? never : T
-type NonNullableObject<T> = {
-  [K in keyof T]: NonUndefined<NonNull<T[K]>>
-}
-
-type Prettify<T> = {
-  [K in keyof T]: T[K]
-} & {}
-
-export const stripUndefinedOrNull = <T>(obj: T): Prettify<NonNullableObject<T>> => {
-  const strip = (input: unknown): unknown => {
-    return Array.isArray(input)
-      ? input.map(strip)
-      : input !== null && typeof input === 'object'
-      ? Object.entries(input)
-          .filter(([, value]) => value !== undefined && value !== null)
-          .reduce((acc, [key, value]) => {
-            acc[key as keyof typeof acc] = strip(value)
-            return acc
-          }, {} as Record<string, unknown>)
-      : input
-  }
-
-  return strip(obj) as Prettify<NonNullableObject<T>>
-}