Merge branch 'develop'

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>

Author: pedrolamas

package-lock.json

@@ -34,25 +34,25 @@
   "main": "index.js",
   "dependencies": {
     "@ctrl/tinycolor": "^3.6.0",
-    "@fontsource/raleway": "^4.5.12",
-    "@fontsource/roboto": "^4.5.8",
+    "@fontsource/raleway": "^5.0.2",
+    "@fontsource/roboto": "^5.0.2",
     "@jaames/iro": "^5.5.2",
     "axios": "^0.27.2",
     "consola": "^3.1.0",
     "deepmerge": "^4.3.1",
     "echarts": "^5.4.2",
     "echarts-gl": "^2.0.9",
-    "hls.js": "^1.4.2",
+    "hls.js": "^1.4.5",
     "jwt-decode": "^3.1.2",
     "lodash-es": "^4.17.21",
     "md5": "^2.3.0",
-    "monaco-editor": "^0.38.0",
+    "monaco-editor": "^0.39.0",
     "monaco-editor-textmate": "^4.0.0",
     "monaco-textmate": "^3.0.1",
     "onigasm": "^2.2.5",
     "panzoom": "^9.4.3",
     "qrcode.vue": "^1.7.0",
-    "semver": "^7.5.0",
+    "semver": "^7.5.1",
     "shlex": "^2.1.2",
     "sortablejs": "^1.15.0",
     "uuid": "^9.0.0",
@@ -77,38 +77,38 @@
     "@types/jsdom": "^21.1.1",
     "@types/lodash-es": "^4.17.7",
     "@types/md5": "^2.3.2",
-    "@types/node": "^20.1.2",
+    "@types/node": "^18.16.16",
     "@types/semver": "^7.5.0",
     "@types/sortablejs": "^1.15.1",
     "@types/uuid": "^9.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.5",
-    "@typescript-eslint/parser": "^5.59.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/parser": "^5.59.9",
     "@vitejs/plugin-vue2": "^2.2.0",
     "@vue/eslint-config-standard": "^8.0.1",
     "@vue/eslint-config-typescript": "^11.0.3",
-    "@vue/test-utils": "^1.3.5",
+    "@vue/test-utils": "^1.3.6",
     "@vue/tsconfig": "^0.1.3",
-    "eslint": "^8.40.0",
-    "eslint-plugin-vue": "^9.12.0",
+    "eslint": "^8.42.0",
+    "eslint-plugin-vue": "^9.14.1",
     "husky": "^8.0.3",
-    "jsdom": "^22.0.0",
+    "jsdom": "^22.1.0",
     "madge": "^5.0.1",
     "mockdate": "^3.0.5",
     "monaco-vscode-textmate-theme-converter": "^0.1.7",
     "sass": "~1.32",
     "shx": "^0.3.4",
     "standard-version": "^9.5.0",
-    "typescript": "^5.0.4",
-    "unplugin-vue-components": "^0.24.1",
-    "vite": "^4.3.5",
+    "typescript": "^5.1.3",
+    "unplugin-vue-components": "^0.25.1",
+    "vite": "^4.3.9",
     "vite-plugin-checker": "^0.6.0",
     "vite-plugin-monaco-editor": "^1.1.0",
-    "vite-plugin-pwa": "^0.14.7",
-    "vitest": "^0.31.0",
+    "vite-plugin-pwa": "^0.16.3",
+    "vitest": "^0.32.0",
     "vue-debounce-decorator": "^1.0.1",
     "vue-i18n-extract": "^2.0.7",
     "vue-template-compiler": "^2.7.14",
-    "vue-tsc": "^1.6.4"
+    "vue-tsc": "^1.6.5"
   },
   "_id": "fluidd@0.0.3",
   "bugs": {

package.json

@@ -4,7 +4,7 @@
     :title="(camera.id != '') ? $t('app.general.label.edit_camera') : $t('app.general.label.add_camera')"
     :cancel-button-text="camera.source === 'config' ? $t('app.general.btn.close') : $t('app.general.btn.cancel')"
     :save-button-text="(camera.id !== '') ? $t('app.general.btn.save') : $t('app.general.btn.add')"
-    max-width="500"
+    max-width="600"
     :disabled="camera.source === 'config'"
     @save="handleSave"
   >
@@ -83,6 +83,7 @@
             { text: $t('app.setting.camera_type_options.mjpegadaptive'), value: 'mjpegstreamer-adaptive' },
             { text: $t('app.setting.camera_type_options.mjpegstream'), value: 'mjpegstreamer' },
             { text: $t('app.setting.camera_type_options.hlsstream'), value: 'hlsstream' },
+            { text: $t('app.setting.camera_type_options.webrtc_camera_streamer'), value: 'webrtc-camerastreamer' },
             { text: $t('app.setting.camera_type_options.video'), value: 'ipstream' },
             { text: $t('app.setting.camera_type_options.iframe'), value: 'iframe' }
           ]"

src/components/settings/cameras/CameraConfigDialog.vue

@@ -13,7 +13,7 @@
     >
 
     <video
-      v-else-if="camera.service === 'ipstream' || camera.service === 'hlsstream'"
+      v-else-if="camera.service === 'ipstream' || camera.service === 'hlsstream' || camera.service === 'webrtc-camerastreamer'"
       ref="camera_image"
       :src="cameraUrl"
       autoplay
@@ -66,6 +66,7 @@ import { CameraConfig } from '@/store/cameras/types'
 import { noop } from 'vue-class-component/lib/util'
 import { CameraFullscreenAction } from '@/store/config/types'
 import type HlsType from 'hls.js'
+import consola from 'consola'
 let Hls: typeof HlsType
 
 /**
@@ -91,6 +92,8 @@ export default class CameraItem extends Vue {
   request_time_smoothing = 0.1
   currentFPS = '0'
   hls: HlsType | null = null
+  pc: RTCPeerConnection | null = null
+  remoteId: string | null = null
 
   // URL used by camera
   cameraUrl = ''
@@ -157,6 +160,7 @@ export default class CameraItem extends Vue {
    */
   beforeDestroy () {
     this.hls?.destroy()
+    this.pc?.close()
     this.cancelCameraTransform()
     this.cameraUrl = this.cameraImage.src = ''
     this.cameraFullScreenUrl = ''
@@ -286,9 +290,82 @@ export default class CameraItem extends Vue {
           }
           break
         }
+
+        case 'webrtc-camerastreamer': {
+          const cameraVideo = this.cameraImage as HTMLVideoElement
+
+          this.pc?.close()
+
+          const config = {
+            sdpSemantics: 'unified-plan'
+          } as RTCConfiguration
+
+          this.pc = new RTCPeerConnection(config)
+
+          this.pc.addTransceiver('video', {
+            direction: 'recvonly'
+          })
+
+          this.pc.ontrack = (evt: RTCTrackEvent) => {
+            if (evt.track.kind === 'video' && cameraVideo) {
+              cameraVideo.srcObject = evt.streams[0]
+            }
+          }
+
+          fetch(baseUrl, {
+            body: JSON.stringify({
+              type: 'request'
+            }),
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            method: 'POST'
+          })
+            .then(response => response.json())
+            .then((answer: RTCSessionDescriptionInit) => {
+              this.remoteId = 'id' in answer && typeof (answer.id) === 'string' ? answer.id : null
+
+              return this.pc?.setRemoteDescription(answer)
+            })
+            .then(() => this.pc?.createAnswer())
+            .then(answer => this.pc?.setLocalDescription(answer))
+            .then(() => new Promise(resolve => {
+              const checkState = () => {
+                if (this.pc?.iceGatheringState === 'complete') {
+                  this.pc?.removeEventListener('icegatheringstatechange', checkState)
+
+                  resolve(true)
+                }
+              }
+
+              if (this.pc?.iceGatheringState === 'complete') {
+                resolve(true)
+              } else {
+                this.pc?.addEventListener('icegatheringstatechange', checkState)
+              }
+            }))
+            .then(() => {
+              const offer = this.pc?.localDescription
+
+              return fetch(baseUrl, {
+                body: JSON.stringify({
+                  type: offer?.type,
+                  id: this.remoteId,
+                  sdp: offer?.sdp
+                }),
+                headers: {
+                  'Content-Type': 'application/json'
+                },
+                method: 'POST'
+              })
+            })
+            .then(response => response.json())
+            .catch(e => consola.error('[CameraItem] setUrl', e))
+        }
       }
     } else {
       this.hls?.destroy()
+      this.pc?.close()
       this.cameraUrl = ''
     }
   }

src/components/widgets/camera/CameraItem.vue

@@ -101,6 +101,15 @@ export default class FileEditor extends Mixins(BrowserMixin) {
       rulers: (this.isMobileViewport) ? [80, 120] : []
     })
 
+    this.editor.addAction({
+      id: 'action-save-file',
+      label: this.$tc('app.general.btn.save'),
+      keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS],
+      run: () => {
+        this.$emit('save')
+      }
+    })
+
     const filename = this.path ? `${this.path}/${this.filename}` : this.filename
     const apiFileUrl = `${this.activeInstance.apiUrl}/server/files/${filename}`
 
@@ -126,16 +135,22 @@ export default class FileEditor extends Mixins(BrowserMixin) {
 
     // Focus the editor.
     this.$nextTick(() => {
-      this.editor?.focus()
+      focus()
     })
 
     this.$emit('ready')
-    this.editor.onDidChangeModelContent(event => {
+
+    this.editor.onDidChangeModelContent(() => {
       const value = this.editor?.getValue()
-      this.emitChange(value, event)
+
+      this.$emit('input', value)
     })
   }
 
+  focus () {
+    this.editor?.focus()
+  }
+
   showCommandPalette () {
     if (this.editor) {
       this.editor.focus()
@@ -162,11 +177,6 @@ export default class FileEditor extends Mixins(BrowserMixin) {
     if (monaco) monaco.editor.getModels().forEach(model => model.dispose())
     if (this.editor) this.editor.dispose()
   }
-
-  emitChange (value: string | undefined, event: Monaco.editor.IModelContentChangedEvent) {
-    this.$emit('change', value, event)
-    this.$emit('input', value)
-  }
 }
 </script>
 

src/components/widgets/filesystem/FileEditor.vue

@@ -27,7 +27,7 @@
         >
           <v-icon>$close</v-icon>
         </app-btn>
-        <v-toolbar-title>{{ filename }}</v-toolbar-title>
+        <v-toolbar-title>{{ filename }}{{ updatedContent !== lastSavedContent ? " *" : "" }}</v-toolbar-title>
         <v-spacer />
         <v-toolbar-items>
           <app-btn
@@ -104,6 +104,7 @@
         :readonly="readonly"
         :code-lens="codeLens"
         @ready="editorReady = true"
+        @save="emitSave(false)"
       />
 
       <file-editor-text-only
@@ -118,7 +119,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Prop, Ref, VModel } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Ref, VModel, Watch } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
 import BrowserMixin from '@/mixins/browser'
 import FileEditor from './FileEditor.vue'
@@ -168,6 +169,13 @@ export default class FileEditorDialog extends Mixins(StateMixin, BrowserMixin) {
     )
   }
 
+  @Watch('ready')
+  onReady (value: boolean) {
+    if (value) {
+      this.editor?.focus()
+    }
+  }
+
   get isWebAssemblySupported () {
     return isWebAssemblySupported()
   }

src/components/widgets/filesystem/FileEditorDialog.vue

@@ -1,34 +1,24 @@
 <template>
   <textarea
+    v-model="content"
     class="v-input v-textarea px-2"
     :class="{'theme--dark': $vuetify.theme.dark}"
     :readonly="readonly"
-    :value="value"
     :spellcheck="false"
-    @change="emitChange($event)"
   />
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop, VModel } from 'vue-property-decorator'
 
 @Component({})
 export default class FileEditorText extends Vue {
-  @Prop({ type: String, required: true })
-  readonly value!: string
+  @VModel({ type: String, required: true })
+    content!: string
 
   @Prop({ type: Boolean, default: false })
   readonly readonly!: boolean
 
-  emitChange (e: Event) {
-    const element = e.target as HTMLTextAreaElement
-
-    if (element) {
-      this.$emit('change', element.value)
-      this.$emit('input', element.value)
-    }
-  }
-
   mounted () {
     this.$emit('ready')
   }

src/components/widgets/filesystem/FileEditorTextOnly.vue

@@ -403,6 +403,8 @@ export default class FileSystemBrowser extends Mixins(FilesMixin) {
       }
     } else if (item.name === '..') {
       return '$folderUp'
+    } else if (item.permissions === 'r' || this.readonly) {
+      return '$folderLock'
     } else {
       return '$folder'
     }

src/components/widgets/filesystem/FileSystemBrowser.vue

@@ -11,12 +11,13 @@ import themeLight from '@/monaco/theme/editor.light.theme.json'
 
 import { MonacoLanguageImports } from '@/dynamicImports'
 
-type CodeLensSupportedService = 'klipper' | 'moonraker' | 'moonraker-telegram-bot'
+type CodeLensSupportedService = 'klipper' | 'moonraker' | 'moonraker-telegram-bot' | 'crowsnest'
 
 const isCodeLensSupportedService = (service: string) : service is CodeLensSupportedService => [
   'klipper',
   'moonraker',
-  'moonraker-telegram-bot'
+  'moonraker-telegram-bot',
+  'crowsnest'
 ].includes(service)
 
 const getDocsSection = (service: CodeLensSupportedService, sectionName: string) => {