From c363651c7414fa08f75c51cc0429bb6ff42ffafc Mon Sep 17 00:00:00 2001
From: Arturo Manzoli <arturomanzoli@gmail.com>
Date: Wed, 27 Mar 2024 17:36:52 -0300
Subject: [PATCH] components: VideoPlayer: first version

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
---
 src/components/VideoPlayer.vue | 95 ++++++++++++++++++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 src/components/VideoPlayer.vue

diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue
new file mode 100644
index 000000000..bb335a2fe
--- /dev/null
+++ b/src/components/VideoPlayer.vue
@@ -0,0 +1,95 @@
+<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="video-player" class="w-[100%]" controls autoplay preload="auto">
+        <source :src="videoFileUrl" type="video/webm" />
+      </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>