From a2c8b3b47a8f0269fe59ca254c29468a90abfa7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Jos=C3=A9=20Pereira?= <patrickelectric@gmail.com>
Date: Sun, 18 Aug 2024 07:25:37 -0700
Subject: [PATCH] widgets: Add Webcam
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Patrick José Pereira <patrickelectric@gmail.com>
---
 src/components/EditMenu.vue       |   2 +
 src/components/widgets/Webcam.vue | 101 ++++++++++++++++++++++++++++++
 src/types/widgets.ts              |   1 +
 3 files changed, 104 insertions(+)
 create mode 100644 src/components/widgets/Webcam.vue

diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue
index e358eba38..066a1610c 100644
--- a/src/components/EditMenu.vue
+++ b/src/components/EditMenu.vue
@@ -609,6 +609,7 @@ import MiniWidgetsBarImg from '@/assets/widgets/MiniWidgetsBar.png'
 import URLVideoPlayerImg from '@/assets/widgets/URLVideoPlayer.png'
 import VideoPlayerImg from '@/assets/widgets/VideoPlayer.png'
 import VirtualHorizonImg from '@/assets/widgets/VirtualHorizon.png'
+import WebcamViewImg from '@/assets/widgets/WebcamView.png'
 import { useInteractionDialog } from '@/composables/interactionDialog'
 import { MavType } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
 import { isHorizontalScroll } from '@/libs/utils'
@@ -674,6 +675,7 @@ const widgetImages = {
   CompassHUD: CompassHUDImg,
   IFrame: IFrameImg,
   ImageView: ImageViewImg,
+  Webcam: WebcamViewImg,
   Map: MapImg,
   MiniWidgetsBar: MiniWidgetsBarImg,
   URLVideoPlayer: URLVideoPlayerImg,
diff --git a/src/components/widgets/Webcam.vue b/src/components/widgets/Webcam.vue
new file mode 100644
index 000000000..2c3782507
--- /dev/null
+++ b/src/components/widgets/Webcam.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="w-full h-full">
+    <video ref="videoElement" :style="videoStyles" autoplay playsinline></video>
+    <v-dialog v-model="widgetStore.widgetManagerVars(widget.hash).configMenuOpen" min-width="400" max-width="35%">
+      <v-card class="pa-2" :style="interfaceStore.globalGlassMenuStyles">
+        <v-card-title class="text-center">Webcam Settings</v-card-title>
+        <v-card-text>
+          <div class="mt-4 flex justify-center space-x-4">
+            <GlassButton icon="mdi-rotate-left" :icon-size="40" @click="rotateLeft" />
+            <GlassButton icon="mdi-rotate-right" :icon-size="40" @click="rotateRight" />
+            <GlassButton icon="mdi-flip-horizontal" :icon-size="40" @click="flipHorizontal" />
+            <GlassButton icon="mdi-flip-vertical" :icon-size="40" @click="flipVertical" />
+          </div>
+        </v-card-text>
+        <v-card-actions class="flex justify-end">
+          <v-btn color="white" @click="widgetStore.widgetManagerVars(widget.hash).configMenuOpen = false">
+            Close
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs, onMounted, onUnmounted, computed } from 'vue'
+
+import { useAppInterfaceStore } from '@/stores/appInterface'
+import { useWidgetManagerStore } from '@/stores/widgetManager'
+import type { Widget } from '@/types/widgets'
+
+import GlassButton from '@/components/GlassButton.vue'
+
+const interfaceStore = useAppInterfaceStore()
+const widgetStore = useWidgetManagerStore()
+
+const props = defineProps<{
+  widget: Widget
+}>()
+
+const widget = toRefs(props).widget
+
+const videoElement = ref<HTMLVideoElement | null>(null)
+
+const videoStyles = computed(() => {
+  const rotation = widget.value.options.rotation || 0
+  const flipHorizontal = widget.value.options.flipHorizontal ? -1 : 1
+  const flipVertical = widget.value.options.flipVertical ? -1 : 1
+
+  return {
+    objectFit: widget.value.options.fitStyle,
+    transform: `rotate(${rotation}deg) scale(${flipHorizontal}, ${flipVertical})`,
+  }
+})
+
+const rotateLeft = () => void {
+  widget.value.options.rotation = widget.value.options.rotation - 90
+}
+
+const rotateRight = () => void {
+  widget.value.options.rotation = widget.value.options.rotation + 90
+}
+
+const flipHorizontal = () => void {
+  widget.value.options.flipHorizontal = !widget.value.options.flipHorizontal
+}
+
+const flipVertical = () => void {
+  widget.value.options.flipVertical = !widget.value.options.flipVertical
+}
+
+onMounted(async () => {
+  if (Object.keys(widget.value.options).length === 0) {
+    widget.value.options = {
+      fitStyle: 'cover',
+      rotation: 0,
+      flipHorizontal: false,
+      flipVertical: false,
+    }
+  }
+  const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false })
+  if (videoElement.value) {
+    videoElement.value.srcObject = stream
+  }
+})
+
+onUnmounted(() => {
+  if (videoElement.value && videoElement.value.srcObject) {
+    const mediaStream = videoElement.value.srcObject as MediaStream
+    mediaStream.getTracks().forEach(track => track.stop())
+  }
+})
+</script>
+
+<style scoped>
+video {
+  width: 100%;
+  height: 100%;
+  transition: transform 0.3s ease;
+}
+</style>
diff --git a/src/types/widgets.ts b/src/types/widgets.ts
index 23e2f704e..3475157a7 100644
--- a/src/types/widgets.ts
+++ b/src/types/widgets.ts
@@ -11,6 +11,7 @@ export enum WidgetType {
   CompassHUD = 'CompassHUD',
   IFrame = 'IFrame',
   ImageView = 'ImageView',
+  Webcam = 'Webcam',
   Map = 'Map',
   MiniWidgetsBar = 'MiniWidgetsBar',
   URLVideoPlayer = 'URLVideoPlayer',