Merge branch 'develop'

Signed-off-by: Pedro Lamas <[email protected]>

Author: pedrolamas

package-lock.json

@@ -17,16 +17,15 @@
     "serve:docs": "cd ./docs; bundle exec jekyll serve",
     "lint": "eslint .",
     "bootstrap": "husky",
-    "copy:host:config": "shx cp -f ./server/config.json ./dist/config.json",
     "i18n-extract": "vue-i18n-extract use-config",
     "release": "standard-version",
     "release:major": "npm run release -- --release-as major",
     "release:minor": "npm run release -- --release-as minor",
     "release:patch": "npm run release -- --release-as patch",
     "release:rc": "npm run release -- --prerelease rc",
     "test": "npm run test:unit",
-    "test:unit": "vitest --environment jsdom",
-    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json",
+    "test:unit": "vitest --environment jsdom --config ./vitest.config.ts",
+    "type-check": "vue-tsc --build --noEmit",
     "circular-check": "skott --displayMode=file-tree --showCircularDependencies --tsconfig=./tsconfig.app.json",
     "theme:convert": "cd tools; node convertTheme.mjs"
   },
@@ -38,14 +37,14 @@
     "@irojs/iro-core": "^1.2.1",
     "@jaames/iro": "^5.5.2",
     "axios": "^1.7.9",
-    "consola": "^3.2.3",
+    "consola": "^3.3.1",
     "dompurify": "^3.2.3",
     "echarts": "^5.5.1",
     "echarts-gl": "^2.0.9",
-    "hls.js": "^1.5.17",
+    "hls.js": "^1.5.18",
     "jwt-decode": "^4.0.0",
     "lodash-es": "^4.17.21",
-    "marked": "^15.0.3",
+    "marked": "^15.0.4",
     "marked-base-url": "^1.1.6",
     "md5": "^2.3.0",
     "monaco-editor": "^0.52.2",
@@ -81,34 +80,33 @@
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
     "@types/md5": "^2.3.5",
-    "@types/node": "^22.10.1",
+    "@types/node": "^22.10.2",
     "@types/semver": "^7.5.8",
     "@types/sortablejs": "^1.15.8",
     "@vitejs/plugin-vue2": "^2.3.3",
-    "@vue/eslint-config-typescript": "^14.1.4",
+    "@vue/eslint-config-typescript": "^14.2.0",
     "@vue/test-utils": "^1.3.6",
     "@vue/tsconfig": "~0.1.3",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
     "eslint-plugin-regexp": "^2.7.0",
     "eslint-plugin-vue": "^9.32.0",
     "husky": "^9.1.7",
     "jsdom": "^25.0.1",
     "mockdate": "^3.0.5",
     "monaco-vscode-textmate-theme-converter": "^0.1.7",
     "neostandard": "^0.12.0",
-    "rollup": "^4.28.1",
+    "rollup": "^4.29.1",
     "sass": "~1.32.13",
-    "shx": "^0.3.4",
     "skott": "^0.35.4",
     "standard-version": "^9.5.0",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.18.0",
-    "unplugin-vue-components": "^0.27.5",
-    "vite": "^6.0.3",
+    "typescript-eslint": "^8.18.2",
+    "unplugin-vue-components": "^0.28.0",
+    "vite": "^6.0.6",
     "vite-plugin-checker": "^0.8.0",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vite-plugin-pwa": "^0.21.1",
-    "vitest": "^1.6.0",
+    "vitest": "^2.1.8",
     "vue-debounce-decorator": "^1.0.1",
     "vue-i18n-extract": "^2.0.7",
     "vue-template-compiler": "^2.7.16",

package.json

@@ -414,7 +414,7 @@ export default class ManualProbeDialog extends Mixins(StateMixin) {
           break
 
         case 'can':
-          for (const canbusInterface in this.canbusInterfaces) {
+          for (const canbusInterface of this.canbusInterfaces) {
             SocketActions.machinePeripheralsCanbus(canbusInterface)
           }
           break

src/components/common/PeripheralsDialog.vue

@@ -11,11 +11,11 @@
         :camera="camera"
         :crossorigin="crossorigin"
         class="camera-image"
+        @update:status="status = $event"
         @update:camera-name="cameraName = $event"
         @update:camera-name-menu-items="cameraNameMenuItems = $event"
         @update:raw-camera-url="rawCameraUrl = $event"
         @update:frames-per-second="framesPerSecond = $event"
-        @playback="setupFrameEvents()"
       />
     </template>
     <div v-else>
@@ -35,7 +35,7 @@
             class="camera-name"
             v-on="on"
           >
-            {{ cameraName || camera.name }}
+            {{ cameraNameAndStatus }}
             <v-icon
               small
               class="ml-1"
@@ -49,11 +49,11 @@
           <v-list-item
             v-for="(item, index) in cameraNameMenuItems"
             :key="index"
-            @click="cameraNameMenuItemClick(item.value)"
+            @click="cameraNameMenuItemClick(item)"
           >
             <v-list-item-icon>
               <v-icon>
-                $camera
+                {{ item.icon }}
               </v-icon>
             </v-list-item-icon>
             <v-list-item-content>
@@ -69,7 +69,7 @@
         v-else
         class="camera-name"
       >
-        {{ cameraName || camera.name }}
+        {{ cameraNameAndStatus }}
       </div>
     </template>
 
@@ -108,6 +108,8 @@ import type { WebcamConfig } from '@/store/webcams/types'
 import type { CameraFullscreenAction } from '@/store/config/types'
 import { CameraComponents } from '@/dynamicImports'
 import CameraMixin from '@/mixins/camera'
+import type { CameraConnectionStatus, CameraNameMenuItem } from '@/types'
+import { startCase } from 'lodash-es'
 
 @Component({})
 export default class CameraItem extends Vue {
@@ -123,19 +125,17 @@ export default class CameraItem extends Vue {
   @Ref('component-instance')
   readonly componentInstance!: CameraMixin
 
-  rawCameraUrl: string | null = null
-  framesPerSecond: string | null = null
-  cameraName: string | null = null
-  cameraNameMenuItems: { text: string, value: string }[] = []
+  status: CameraConnectionStatus = 'disconnected'
+  rawCameraUrl = ''
+  framesPerSecond = ''
+  cameraName = ''
+  cameraNameMenuItems: CameraNameMenuItem[] = []
 
-  mounted () {
-    this.setupFrameEvents()
-  }
-
-  setupFrameEvents () {
-    if (this.$listeners?.frame && this.componentInstance) {
+  @Watch('status')
+  onStatus (value: CameraConnectionStatus) {
+    if (value === 'connected' && this.$listeners?.frame && this.componentInstance) {
       if (this.componentInstance.streamingElement instanceof HTMLImageElement) {
-        this.componentInstance.streamingElement.addEventListener('load', () => this.handleFrame())
+        this.handleFrame()
       } else if (this.componentInstance.streamingElement instanceof HTMLVideoElement) {
         this.handleFrame(true)
       }
@@ -153,12 +153,13 @@ export default class CameraItem extends Vue {
     }
   }
 
-  cameraNameMenuItemClick (value: string) {
-    this.componentInstance.menuItemClick(value)
+  cameraNameMenuItemClick (item: CameraNameMenuItem) {
+    this.componentInstance.menuItemClick(item)
   }
 
   @Watch('camera')
   onCamera () {
+    this.status = 'disconnected'
     this.rawCameraUrl = ''
     this.framesPerSecond = ''
     this.cameraName = ''
@@ -171,13 +172,23 @@ export default class CameraItem extends Vue {
 
   get cameraComponent () {
     if (this.camera.service) {
-      const componentName = `${this.$filters.startCase(this.camera.service).replace(/ /g, '')}Camera`
+      const componentName = `${startCase(this.camera.service).replace(/ /g, '')}Camera`
 
       if (componentName in CameraComponents) {
         return CameraComponents[componentName]
       }
     }
   }
+
+  get cameraNameAndStatus () {
+    const cameraName = this.cameraName || this.camera.name
+
+    if (this.status !== 'connected') {
+      return `${cameraName} (${this.status})`
+    }
+
+    return cameraName
+  }
 }
 </script>
 
@@ -196,6 +207,7 @@ export default class CameraItem extends Vue {
   .camera-container {
     position: relative;
     background: rgba(0, 0, 0, 1);
+    min-height: 70px;
   }
 
   .camera-name,

src/components/widgets/camera/CameraItem.vue

@@ -4,31 +4,41 @@
     autoplay
     muted
     :style="cameraStyle"
+    @play="updateStatus('connected')"
+    @error="updateStatus('error')"
   />
 </template>
 
 <script lang="ts">
 import { Component, Ref, Mixins } from 'vue-property-decorator'
 import CameraMixin from '@/mixins/camera'
 import consola from 'consola'
+import type { CameraNameMenuItem } from '@/types'
 
 @Component({})
 export default class DeviceCamera extends Mixins(CameraMixin) {
   @Ref('streamingElement')
   readonly cameraVideo!: HTMLVideoElement
 
-  cameraNameMenuItems: { text: string, value: string }[] = []
-
   async startPlayback () {
-    const stream = await this.getUserMedia()
+    this.updateStatus('connecting')
+
+    try {
+      const stream = await this.getUserMedia()
 
-    this.cameraVideo.srcObject = stream
-    this.$emit('playback')
+      this.cameraVideo.srcObject = stream
+
+      this.updateCameraName(await this.getDeviceLabel() ?? '')
+    } catch (e) {
+      consola.error(`[DeviceCamera] failed to start playback "${this.getSelectedDeviceCamera()}"`, e)
 
-    this.$emit('update:camera-name', await this.getDeviceLabel())
+      this.updateStatus('error')
+    }
   }
 
   stopPlayback () {
+    this.updateStatus('disconnected')
+
     try {
       const stream = this.cameraVideo.srcObject as MediaStream
 
@@ -39,7 +49,7 @@ export default class DeviceCamera extends Mixins(CameraMixin) {
         }
       }
     } catch (e) {
-      consola.error('[Device Camera] failed to stop and remove all tracks', e)
+      consola.error('[DeviceCamera] failed to stop and remove all tracks', e)
     }
 
     this.cameraVideo.srcObject = null
@@ -59,7 +69,7 @@ export default class DeviceCamera extends Mixins(CameraMixin) {
         }
       })
     } catch (e) {
-      consola.error(`[Device Camera] failed to select device ${selectedDeviceCamera}`, e)
+      consola.error(`[DeviceCamera] failed to select device "${selectedDeviceCamera}"`, e)
 
       this.setSelectedDeviceCamera(null)
 
@@ -78,7 +88,7 @@ export default class DeviceCamera extends Mixins(CameraMixin) {
       return devices
         .filter(device => device.kind === 'videoinput')
     } catch (e) {
-      consola.error('[Device Camera] failed to enumerate devices', e)
+      consola.error('[DeviceCamera] failed to enumerate devices', e)
 
       return []
     }
@@ -88,23 +98,26 @@ export default class DeviceCamera extends Mixins(CameraMixin) {
     if (this.cameraNameMenuItems.length === 0) {
       const devices = await this.enumerateDevices()
 
-      this.cameraNameMenuItems = [
+      const cameraNameMenuItems = [
         {
+          icon: '$camera',
           text: this.$tc('app.general.label.environment_facing'),
           value: 'environment'
         },
         {
+          icon: '$camera',
           text: this.$tc('app.general.label.user_facing'),
           value: 'user'
         },
         ...devices
           .map(device => ({
+            icon: '$camera',
             text: device.label,
             value: device.deviceId
           }))
       ]
 
-      this.$emit('update:camera-name-menu-items', this.cameraNameMenuItems)
+      this.updateCameraNameMenuItems(cameraNameMenuItems)
     }
 
     const selectedDeviceCamera = this.getSelectedDeviceCamera()
@@ -125,11 +138,14 @@ export default class DeviceCamera extends Mixins(CameraMixin) {
     }
   }
 
-  menuItemClick (value: string) {
-    if (this.getSelectedDeviceCamera() !== value) {
-      this.setSelectedDeviceCamera(value)
+  menuItemClick (item: CameraNameMenuItem) {
+    if (this.getSelectedDeviceCamera() !== item.value) {
+      this.setSelectedDeviceCamera(item.value)
 
       this.stopPlayback()
+
+      this.updateCameraName(item.text)
+
       this.startPlayback()
     }
   }