video: add embedded video player & libraries

package.json

@@ -25,6 +25,7 @@
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "@mdi/font": "^7.0.96",
     "@mdi/js": "^7.2.96",
+    "@videojs-player/vue": "^1.0.0",
     "@vue-leaflet/vue-leaflet": "^0.6.1",
     "@vueuse/core": "9.8.1",
     "@vueuse/math": "^10.1.2",
@@ -50,6 +51,7 @@
     "sweetalert2": "^11.7.1",
     "tailwind-scrollbar-hide": "^1.1.7",
     "uuid": "^8.3.2",
+    "video.js": "^8.10.0",
     "vue": "^3.3.4",
     "vue-draggable-plus": "^0.2.0-beta.2",
     "vue-router": "^4.0.14",

src/components/VideoPlayer.vue

@@ -0,0 +1,99 @@
+<template>
+  <div v-if="openDialog" class="modal">
+    <div class="overlay" @click="closeDialog"></div>
+    <div class="modal-content">
+      <video-player
+        class="video-player vjs-big-play-centered"
+        :src="videoFile"
+        poster="/images/poster/oceans.png"
+        crossorigin="anonymous"
+        playsinline
+        controls
+        :volume="0.6"
+        :height="640"
+        :playback-rates="[0.7, 1.0, 1.5, 2.0]"
+        @mounted="handleMounted"
+        @ready="handleEvent"
+        @play="handleEvent"
+        @pause="handleEvent"
+        @ended="handleEvent"
+        @loadeddata="handleEvent"
+        @waiting="handleEvent"
+        @playing="handleEvent"
+        @canplay="handleEvent"
+        @canplaythrough="handleEvent"
+        @timeupdate="(event) => handleEvent(player?.currentTime())"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import 'video.js/dist/video-js.css'
+
+import { VideoPlayer } from '@videojs-player/vue'
+import videojs from 'video.js'
+import { ref, shallowRef, watchEffect } from 'vue'
+
+type VideoJsPlayer = ReturnType<typeof videojs>
+
+const props = defineProps({
+  videoUrl: String,
+  openVideoPlayerDialog: Boolean,
+})
+
+const emit = defineEmits(['update:openVideoPlayerDialog'])
+
+const player = shallowRef<VideoJsPlayer | null>(null)
+
+const videoFile = ref(props.videoUrl)
+const openDialog = ref(props.openVideoPlayerDialog)
+
+const handleMounted = (payload: any): void => {
+  player.value = payload.player
+  console.log('Video player mounted', payload)
+}
+
+const handleEvent = (log: any): void => {
+  console.log('Video player event', log)
+}
+
+const closeDialog = (): void => {
+  emit('update:openVideoPlayerDialog', false)
+}
+
+watchEffect(() => {
+  videoFile.value = props.videoUrl
+  openDialog.value = props.openVideoPlayerDialog
+})
+</script>
+
+<style scoped>
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+  z-index: 10;
+  position: relative;
+  padding: 20px;
+  background: white;
+  border-radius: 8px;
+}
+</style>

src/views/ConfigurationVideoView.vue

@@ -72,7 +72,6 @@
         </p>
       </div>
 
-      <!-- @vue-ignore -->
       <v-data-table
         v-else
         v-model="selectedFilesNames"
@@ -112,6 +111,10 @@
                 class="mx-2 text-2xl transition-all cursor-pointer hover:text-slate-500/50 mdi mdi-download"
                 @click="downloadAndUpdateDB(selectedFilesNames)"
               />
+              <span
+                class="mx-2 text-2xl transition-all cursor-pointer hover:text-slate-500/50 mdi mdi-play"
+                @click="downloadAndUpdateDB(selectedFilesNames)"
+              />
             </div>
           </Transition>
         </template>
@@ -136,6 +139,7 @@
       </div>
     </template>
   </BaseConfigurationView>
+  <VideoPlayer :video-url="videoFile" :open-video-player-dialog="openDialog" />
 </template>
 
 <script setup lang="ts">
@@ -145,6 +149,7 @@ import { computed, onMounted, ref, watch, watchEffect } from 'vue'
 import type { VDataTable } from 'vuetify/components'
 
 import Button from '@/components/Button.vue'
+import VideoPlayer from '@/components/VideoPlayer.vue'
 import { formatBytes } from '@/libs/utils'
 import { useVideoStore } from '@/stores/video'
 
@@ -162,6 +167,8 @@ const props = defineProps<{
 }>()
 
 const isVideoLibraryOnly = ref(props.asVideoLibrary)
+const videoFile = ref<string | undefined>()
+const openDialog = ref<boolean>(false)
 
 watchEffect(() => {
   isVideoLibraryOnly.value = props.asVideoLibrary ?? false
@@ -217,6 +224,11 @@ const downloadAndUpdateDB = async (filenames: string[]): Promise<void> => {
   selectedFilesNames.value = []
 }
 
+const playVideoOnModal = (filenames: string[]): void => {
+  videoFile.value = filenames[0]
+  openDialog.value = true
+}
+
 const clearTemporaryVideoFiles = async (): Promise<void> => {
   const videosBeingRecorded = videoStore.keysAllUnprocessedVideos.length > videoStore.keysFailedUnprocessedVideos.length