feat: add option to hide FPS counter

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
     }

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>
 
@@ -73,6 +73,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

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>
@@ -75,6 +75,12 @@ export default class MjpegstreamerAdaptive extends Mixins(BaseMixin) {
         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)
     }

src/locales/de.json

@@ -1097,6 +1097,7 @@
             "EditWebcam": "Webcam bearbeiten",
             "FlipWebcam": "Webcam-Bild spiegeln:",
             "Hlsstream": "HLS-Stream",
+            "HideFps": "FPS-Anzeige verstecken",
             "Horizontally": "horizontal",
             "IconBed": "Bett",
             "IconCam": "Kamera",

src/locales/en.json

@@ -1096,6 +1096,7 @@
             "EditCrowsnestConf": "Edit crowsnest.conf",
             "EditWebcam": "Edit Webcam",
             "FlipWebcam": "Flip webcam image:",
+            "HideFps": "Hide FPS counter",
             "Horizontally": "horizontally",
             "IconBed": "Bed",
             "IconCam": "Cam",

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'
 }