From 69eaeb65573c5dda5773c5f9c60fa249d136c213 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 9 Aug 2023 20:04:48 +0200
Subject: [PATCH] feat: add option to hide FPS counter in webcams (#1488)

---
 .../settings/Webcams/WebcamForm.vue           | 30 +++++++++++++++++++
 src/components/webcams/Mjpegstreamer.vue      |  8 ++++-
 .../webcams/MjpegstreamerAdaptive.vue         |  8 ++++-
 src/locales/de.json                           |  1 +
 src/locales/en.json                           |  1 +
 src/store/gui/webcams/types.ts                |  4 ++-
 6 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/components/settings/Webcams/WebcamForm.vue b/src/components/settings/Webcams/WebcamForm.vue
index 55ae5a5e9..d6e28ae0b 100644
--- a/src/components/settings/Webcams/WebcamForm.vue
+++ b/src/components/settings/Webcams/WebcamForm.vue
@@ -102,6 +102,15 @@
                                 :label="$t('Settings.WebcamsTab.Rotate')" />
                         </v-col>
                     </v-row>
+                    <v-row v-if="hasFpsCounter">
+                        <v-col class="pt-1 pb-3">
+                            <v-checkbox
+                                v-model="hideFps"
+                                class="mt-1"
+                                hide-details
+                                :label="$t('Settings.WebcamsTab.HideFps')" />
+                        </v-col>
+                    </v-row>
                     <v-row>
                         <v-col class="pt-1 pb-3">
                             <div class="v-label v-label--active theme--dark text-subtitle-1">
@@ -250,6 +259,27 @@ export default class WebcamForm extends Mixins(BaseMixin, WebcamMixin) {
         return classes
     }
 
+    get hasFpsCounter() {
+        return ['mjpegstreamer', 'mjpegstreamer-adaptive'].includes(this.webcam.service)
+    }
+
+    get hideFps() {
+        return this.webcam.extra_data?.hideFps ?? false
+    }
+
+    set hideFps(newVal) {
+        if (!('extra_data' in this.webcam)) {
+            this.webcam.extra_data = {
+                hideFps: newVal,
+            }
+
+            return
+        }
+
+        // @ts-ignore
+        this.webcam.extra_data.hideFps = newVal
+    }
+
     mounted() {
         this.oldWebcamName = this.webcam.name
     }
diff --git a/src/components/webcams/Mjpegstreamer.vue b/src/components/webcams/Mjpegstreamer.vue
index 7d9cc1671..90c208a51 100644
--- a/src/components/webcams/Mjpegstreamer.vue
+++ b/src/components/webcams/Mjpegstreamer.vue
@@ -6,7 +6,7 @@
             class="webcamImage"
             :style="webcamStyle"
             @load="onload" />
-        <span v-if="showFps" class="webcamFpsOutput">{{ $t('Panels.WebcamPanel.FPS') }}: {{ fpsOutput }}</span>
+        <span v-if="showFpsCounter" class="webcamFpsOutput">{{ $t('Panels.WebcamPanel.FPS') }}: {{ fpsOutput }}</span>
     </div>
 </template>
 
@@ -72,6 +72,12 @@ export default class Mjpegstreamer extends Mixins(BaseMixin, WebcamMixin) {
         return this.currentFPS < 10 ? '0' + this.currentFPS.toString() : this.currentFPS
     }
 
+    get showFpsCounter() {
+        if (!this.showFps) return false
+
+        return !(this.camSettings.extra_data?.hideFps ?? false)
+    }
+
     startStream() {
         if (this.streamState) return
         this.streamState = true
diff --git a/src/components/webcams/MjpegstreamerAdaptive.vue b/src/components/webcams/MjpegstreamerAdaptive.vue
index 0966770d7..41ca032c1 100644
--- a/src/components/webcams/MjpegstreamerAdaptive.vue
+++ b/src/components/webcams/MjpegstreamerAdaptive.vue
@@ -10,7 +10,7 @@
             height="400"
             :style="webcamStyle"
             :class="'webcamImage ' + (isLoaded ? '' : 'hiddenWebcam')"></canvas>
-        <span v-if="isLoaded && showFps" class="webcamFpsOutput">
+        <span v-if="isLoaded && showFpsCounter" class="webcamFpsOutput">
             {{ $t('Panels.WebcamPanel.FPS') }}: {{ fpsOutput }}
         </span>
     </div>
@@ -74,6 +74,12 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin, WebcamMixin
         return this.currentFPS < 10 ? '0' + this.currentFPS.toString() : this.currentFPS
     }
 
+    get showFpsCounter() {
+        if (!this.showFps) return false
+
+        return !(this.camSettings.extra_data?.hideFps ?? false)
+    }
+
     get rotate() {
         return [90, 270].includes(this.camSettings.rotation ?? 0)
     }
diff --git a/src/locales/de.json b/src/locales/de.json
index 3f779a3d7..6d7d1b593 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -1104,6 +1104,7 @@
             "EditWebcam": "Webcam bearbeiten",
             "FlipWebcam": "Webcam-Bild spiegeln:",
             "Hlsstream": "HLS-Stream",
+            "HideFps": "FPS-Anzeige verstecken",
             "Horizontally": "horizontal",
             "IconBed": "Bett",
             "IconCam": "Kamera",
diff --git a/src/locales/en.json b/src/locales/en.json
index 717d3b652..b295721a3 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1104,6 +1104,7 @@
             "EditCrowsnestConf": "Edit crowsnest.conf",
             "EditWebcam": "Edit Webcam",
             "FlipWebcam": "Flip webcam image:",
+            "HideFps": "Hide FPS counter",
             "Horizontally": "horizontally",
             "IconBed": "Bed",
             "IconCam": "Cam",
diff --git a/src/store/gui/webcams/types.ts b/src/store/gui/webcams/types.ts
index 1fa1385bb..50f03153b 100644
--- a/src/store/gui/webcams/types.ts
+++ b/src/store/gui/webcams/types.ts
@@ -25,6 +25,8 @@ export interface GuiWebcamStateWebcam {
     flip_vertical: boolean
     rotation: number
     aspect_ratio?: string
-    extra_data?: {}
+    extra_data?: {
+        hideFps?: boolean
+    }
     source?: 'config' | 'database'
 }