types: widgets: Add URL Video widget

src/components/widgets/URLVideoPlayer.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="w-full h-full">
+    <!-- Some browsers only do autoplay if video is muted -->
+    <video
+      ref="videoPlayer"
+      :key="widget.options.source"
+      :autoplay="widget.options.autoplay"
+      :controls="widget.options.controls"
+      :loop="widget.options.loop"
+      :muted="widget.options.muted"
+    >
+      <source :src="widget.options.source" />
+    </video>
+    <v-dialog v-model="widget.managerVars.configMenuOpen" min-width="400" max-width="35%">
+      <v-card class="pa-2">
+        <v-card-title>Video Source</v-card-title>
+        <v-card-text>
+          <v-text-field
+            label="Video Source"
+            variant="underlined"
+            :model-value="widget.options.source"
+            outlined
+            @change="widget.options.source = $event.srcElement.value"
+            @keydown.enter="widget.options.source = $event.srcElement.value"
+          ></v-text-field>
+          <div>
+            <span class="text-xs font-semibold leading-3 text-slate-600">Fit style</span>
+            <Dropdown
+              v-model="widget.options.fitStyle"
+              :options="['cover', 'fill', 'contain']"
+              variant="outlined"
+              class="max-w-[144px]"
+            />
+            <v-checkbox v-model="widget.options.autoplay" label="Autoplay" hide-details />
+            <v-checkbox v-model="widget.options.controls" label="Controls" hide-details />
+            <v-checkbox v-model="widget.options.loop" label="Loop" hide-details />
+            <v-checkbox v-model="widget.options.muted" label="Muted" hide-details />
+          </div>
+        </v-card-text>
+        <v-card-actions>
+          <v-btn color="primary" @click="widget.managerVars.configMenuOpen = false">Close</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeMount, ref, toRefs, watch } from 'vue'
+
+import Dropdown from '@/components/Dropdown.vue'
+import type { Widget } from '@/types/widgets'
+
+const props = defineProps<{
+  /**
+   * Widget reference
+   */
+  widget: Widget
+}>()
+const widget = toRefs(props).widget
+
+const videoPlayer = ref()
+watch(widget.value.options, () => {
+  console.log(widget.value.options.source)
+  videoPlayer.value.pause()
+  videoPlayer.value.play()
+})
+
+onBeforeMount(() => {
+  if (Object.keys(widget.value.options).length !== 0) {
+    return
+  }
+
+  widget.value.options = {
+    source: '',
+    fitStyle: 'cover',
+    autoplay: true,
+    controls: true,
+    loop: true,
+    muted: true,
+  }
+})
+</script>
+<style scoped>
+video {
+  object-fit: v-bind('widget.options.fitStyle');
+  width: 100%;
+  height: 100%;
+}
+</style>

src/types/widgets.ts

@@ -15,6 +15,7 @@ export enum WidgetType {
   Indicators = 'Indicators',
   Map = 'Map',
   MiniWidgetsBar = 'MiniWidgetsBar',
+  URLVideoPlayer = 'URLVideoPlayer',
   VideoPlayer = 'VideoPlayer',
 }
 

src/views/WidgetsView.vue

@@ -36,6 +36,9 @@
           <template v-if="widget.component === WidgetType.MiniWidgetsBar">
             <MiniWidgetsBar :widget="widget" />
           </template>
+          <template v-if="widget.component === WidgetType.URLVideoPlayer">
+            <URLVideoPlayer :widget="widget" />
+          </template>
           <template v-if="widget.component === WidgetType.VideoPlayer">
             <VideoPlayer :widget="widget" />
           </template>
@@ -65,6 +68,7 @@ import IFrame from '../components/widgets/IFrame.vue'
 import Indicators from '../components/widgets/Indicators.vue'
 import Map from '../components/widgets/Map.vue'
 import MiniWidgetsBar from '../components/widgets/MiniWidgetsBar.vue'
+import URLVideoPlayer from '../components/widgets/URLVideoPlayer.vue'
 import VideoPlayer from '../components/widgets/VideoPlayer.vue'
 
 const store = useWidgetManagerStore()