components: VideoPlayer: first version

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>

src/components/VideoPlayer.vue

@@ -0,0 +1,99 @@
+<template>
+  <div v-if="openDialog" class="modal">
+    <div class="overlay" @click="closeDialog">
+      <span class="close-icon mdi mdi-close" @click.stop="closeDialog"></span>
+    </div>
+    <div class="modal-content">
+      <video id="my-video" class="video-js" controls preload="auto" width="1000px" data-setup="{}">
+        <source :src="videoFileUrl" type="video/webm" />
+        <p class="vjs-no-js">
+          To view this video please enable JavaScript, and consider upgrading to a web browser that
+          <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
+        </p>
+      </video>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watchEffect } from 'vue'
+
+const props = defineProps({
+  videoUrl: {
+    type: String,
+    default: '',
+  },
+  openVideoPlayerDialog: Boolean,
+})
+
+const emit = defineEmits(['update:openVideoPlayerDialog'])
+
+const videoFileUrl = ref(props.videoUrl)
+const openDialog = ref(props.openVideoPlayerDialog)
+
+const closeDialog = (): void => {
+  openDialog.value = false
+  emit('update:openVideoPlayerDialog', false)
+}
+
+watchEffect(() => {
+  videoFileUrl.value = props.videoUrl
+  openDialog.value = props.openVideoPlayerDialog
+})
+</script>
+
+<style scoped>
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 30px;
+  z-index: 1000;
+  backdrop-filter: blur(10px);
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(255, 255, 255, 0.2);
+  z-index: 990;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+}
+
+.close-icon {
+  position: absolute;
+  top: 0px;
+  right: 5px;
+  cursor: pointer;
+  color: white;
+  font-size: 24px;
+  border-radius: 8px;
+}
+
+.modal-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 8px;
+  padding: 5px;
+  width: 1000px;
+  height: 565px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: 1200;
+}
+
+video {
+  height: 580px;
+}
+</style>