From 46719354916a5f11ebeff3513f5ea9e1876c98b2 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 29 May 2022 13:28:42 +0200
Subject: [PATCH] fix: fix img size without a stream (u4vl-mode) (#860)

---
 src/components/webcams/Mjpegstreamer.vue |  2 +-
 src/components/webcams/Uv4lMjpeg.vue     | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/webcams/Mjpegstreamer.vue b/src/components/webcams/Mjpegstreamer.vue
index 0d93cacb3..ad415fbbd 100644
--- a/src/components/webcams/Mjpegstreamer.vue
+++ b/src/components/webcams/Mjpegstreamer.vue
@@ -1,4 +1,4 @@
-<style>
+<style scoped>
 .webcamImage {
     width: 100%;
     background: lightgray;
diff --git a/src/components/webcams/Uv4lMjpeg.vue b/src/components/webcams/Uv4lMjpeg.vue
index fecd4e056..d4f2e7fac 100644
--- a/src/components/webcams/Uv4lMjpeg.vue
+++ b/src/components/webcams/Uv4lMjpeg.vue
@@ -9,15 +9,13 @@
     <img
         ref="webcamUv4lMjpegImage"
         v-observe-visibility="viewportVisibilityChanged"
-        :src="url"
-        :alt="camSettings.name"
         :style="webcamStyle"
         class="webcamImage"
         @load="onload" />
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 
@@ -109,5 +107,11 @@ export default class Uv4lMjpeg extends Mixins(BaseMixin) {
                 this.$refs.webcamUv4lMjpegImage.naturalWidth / this.$refs.webcamUv4lMjpegImage.naturalHeight
         }
     }
+
+    @Watch('url')
+    async urlChanged() {
+        await this.stopStream()
+        await this.startStream()
+    }
 }
 </script>