fix: video player integration with nuxt - [CU-869baghca] (#131)

Author: AhmedAmrNabil

app/components/ui/VideoPlayer.vue

@@ -2,28 +2,11 @@
 // Import the Vue wrapper
 import { VideoPlayer } from '@videojs-player/vue';
 
-// Import the default videojs to access Player type
-import type videojs from 'video.js';
-
-import 'video.js/dist/video-js.css';
-
 interface Props {
   src: string;
   poster?: string;
 }
-
 const props = defineProps<Props>();
-type VideoJsPlayer = ReturnType<typeof videojs>;
-
-function onPlayerReady(player: VideoJsPlayer) {
-  player.on('click', () => {
-    if (player.paused()) {
-      player.play();
-    } else {
-      player.pause();
-    }
-  });
-}
 </script>
 
 <template>
@@ -44,6 +27,5 @@ function onPlayerReady(player: VideoJsPlayer) {
         },
       ],
     }"
-    @mounted="onPlayerReady"
   />
 </template>

app/plugins/videojs-player.ts

@@ -0,0 +1,6 @@
+import VueVideoPlayer from '@videojs-player/vue';
+import 'video.js/dist/video-js.css';
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueVideoPlayer);
+});