From 0a72a7a7311e0654c03f772dc66735b363a61414 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Tue, 5 Nov 2024 20:34:41 +0100
Subject: [PATCH] fix(Webcam): capitalize the connection state (#2019)

---
 .../webcams/streamers/WebrtcCameraStreamer.vue           | 9 +++++++--
 src/components/webcams/streamers/WebrtcMediaMTX.vue      | 5 ++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/webcams/streamers/WebrtcCameraStreamer.vue b/src/components/webcams/streamers/WebrtcCameraStreamer.vue
index f3df789f0..b3422bff8 100644
--- a/src/components/webcams/streamers/WebrtcCameraStreamer.vue
+++ b/src/components/webcams/streamers/WebrtcCameraStreamer.vue
@@ -11,7 +11,7 @@
         <v-row v-if="status !== 'connected'">
             <v-col class="_webcam_webrtc_output text-center d-flex flex-column justify-center align-center">
                 <v-progress-circular v-if="status === 'connecting'" indeterminate color="primary" class="mb-3" />
-                <span class="mt-3">{{ status }}</span>
+                <span class="mt-3">{{ capitalize(status) }}</span>
             </v-col>
         </v-row>
     </div>
@@ -22,14 +22,19 @@ import { Component, Mixins, Prop, Ref, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 import WebcamMixin from '@/components/mixins/webcam'
+import { capitalize } from '@/plugins/helpers'
 
 interface CameraStreamerResponse extends RTCSessionDescriptionInit {
     id: string
     iceServers?: RTCIceServer[]
 }
 
-@Component
+@Component({
+    methods: { capitalize },
+})
 export default class WebrtcCameraStreamer extends Mixins(BaseMixin, WebcamMixin) {
+    capitalize = capitalize
+
     pc: RTCPeerConnection | null = null
     useStun = false
     aspectRatio: null | number = null
diff --git a/src/components/webcams/streamers/WebrtcMediaMTX.vue b/src/components/webcams/streamers/WebrtcMediaMTX.vue
index f5eff6f20..8acc518c8 100644
--- a/src/components/webcams/streamers/WebrtcMediaMTX.vue
+++ b/src/components/webcams/streamers/WebrtcMediaMTX.vue
@@ -11,7 +11,7 @@
         <v-row v-if="status !== 'connected'">
             <v-col class="_webcam_webrtc_output text-center d-flex flex-column justify-center align-center">
                 <v-progress-circular v-if="status === 'connecting'" indeterminate color="primary" class="mb-3" />
-                <span class="mt-3">{{ status }}</span>
+                <span class="mt-3">{{ capitalize(status) }}</span>
             </v-col>
         </v-row>
     </div>
@@ -22,6 +22,7 @@ import { Component, Mixins, Prop, Ref, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 import WebcamMixin from '@/components/mixins/webcam'
+import { capitalize } from '@/plugins/helpers'
 
 interface OfferData {
     iceUfrag: string
@@ -31,6 +32,8 @@ interface OfferData {
 
 @Component
 export default class WebrtcMediaMTX extends Mixins(BaseMixin, WebcamMixin) {
+    capitalize = capitalize
+
     @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
     @Prop({ default: null }) readonly printerUrl!: string | null
     @Prop({ type: String, default: null }) readonly page!: string | null