fix(timelapse): add warning if snapshoturl is set in moonraker (#1921)

src/components/settings/SettingsTimelapseTab.vue

@@ -27,14 +27,19 @@
                 <v-divider class="my-2" />
                 <settings-row
                     :title="$t('Settings.TimelapseTab.Camera')"
-                    :sub-title="$t('Settings.TimelapseTab.CameraDescription')">
+                    :sub-title="$t('Settings.TimelapseTab.CameraDescriptionWithSnapshotUrl')">
+                    <v-alert v-if="blockedsettings.includes('snapshoturl')" dense text type="warning" class="mb-0">
+                        {{ $t('Settings.TimelapseTab.CameraWarningAlreadySet') }}
+                        <small>({{ $t('Settings.TimelapseTab.CameraWarningAlreadySetSmall') }})</small>
+                    </v-alert>
                     <v-select
+                        v-else
                         v-model="camera"
                         :items="cameraOptions"
                         hide-details
                         outlined
                         dense
-                        :disabled="blockedsettings.includes('camera') || blockedsettings.includes('snapshoturl')" />
+                        :disabled="blockedsettings.includes('camera') || availableSnapshotWebcams.length === 0" />
                 </settings-row>
                 <v-divider class="my-2" />
                 <settings-row
@@ -502,6 +507,7 @@ import BaseMixin from '@/components/mixins/base'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
 import { caseInsensitiveSort } from '@/plugins/helpers'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import { TranslateResult } from 'vue-i18n'
 @Component({
     components: { SettingsRow },
 })
@@ -552,20 +558,33 @@ export default class SettingsTimelapseTab extends Mixins(BaseMixin) {
         },
     ]
 
+    get availableSnapshotWebcams(): GuiWebcamStateWebcam[] {
+        return this.$store.getters['gui/webcams/getWebcams'].filter(
+            (webcam: GuiWebcamStateWebcam) => webcam.snapshot_url !== ''
+        )
+    }
+
     get cameraOptions() {
-        const webcams = this.$store.getters['gui/webcams/getWebcams']
-        const output: any = []
-
-        webcams
-            .filter((webcam: GuiWebcamStateWebcam) => webcam.snapshot_url !== '')
-            .forEach((webcam: GuiWebcamStateWebcam) => {
-                output.push({
-                    text: webcam.name,
-                    value: webcam.name,
-                })
+        let output: { text: string | TranslateResult; value: string | null }[] = []
+
+        if (this.availableSnapshotWebcams.length === 0) {
+            return [{ value: null, text: this.$t('Settings.TimelapseTab.NoWebcamFound') }]
+        }
+
+        this.availableSnapshotWebcams.forEach((webcam: GuiWebcamStateWebcam) => {
+            output.push({
+                text: webcam.name,
+                value: webcam.name,
             })
+        })
 
-        return caseInsensitiveSort(output, 'text')
+        output = caseInsensitiveSort(output, 'text')
+
+        if (this.camera === null) {
+            output.unshift({ value: null, text: this.$t('Settings.TimelapseTab.SelectWebcam') })
+        }
+
+        return output
     }
 
     get blockedsettings() {
@@ -853,6 +872,17 @@ export default class SettingsTimelapseTab extends Mixins(BaseMixin) {
     }
 
     get camera() {
+        const value = this.$store.state.server.timelapse.settings.camera ?? null
+
+        if (
+            value === null ||
+            this.blockedsettings.includes('snapshoturl') ||
+            this.availableSnapshotWebcams.length === 0 ||
+            this.availableSnapshotWebcams.find((webcam) => webcam.name === value) === undefined
+        ) {
+            return null
+        }
+
         return this.$store.state.server.timelapse.settings.camera
     }
 

src/locales/en.json

@@ -1112,7 +1112,9 @@
             "Autorender": "Autorender",
             "AutorenderDescription": "If enabled, the timelapse video will automatically render at the end of the print",
             "Camera": "Camera",
-            "CameraDescription": "Select which camera should be used",
+            "CameraDescriptionWithSnapshotUrl": "Select which camera (with snapshot URL) should be used",
+            "CameraWarningAlreadySet": "This value is already set in the Moonraker configuration file.",
+            "CameraWarningAlreadySetSmall": "snapshoturl in the [timelapse] section",
             "ConstantRateFactor": "Constant Rate Factor",
             "ConstantRateFactorDescription": "This configure quality vs file size of the rendered video. The range of the CRF scale is 0–51, where 0 is lossless, 23 is the default and 51 is worst quality possible. A lower value generally leads to higher quality and a subjectively sane range is 17–28. Consider 17 or 18 to be visually lossless.",
             "duplicatelastframe": "Duplicate Last Frame",
@@ -1130,6 +1132,7 @@
             "HyperlapseCycleDescription": "A snapshot will be taken any X seconds",
             "Mode": "Mode",
             "ModeDescription": "Select between Layer macro and Hyperlapse (time-based) mode",
+            "NoWebcamFound": "No Webcam available",
             "OutputFramerate": "Output Framerate",
             "OutputFramerateDescription": "Defines the framerate of the video. Note: this will be ignored if variable_fps is enabled",
             "Parkhead": "Park Toolhead",
@@ -1160,6 +1163,7 @@
             "RulesZeroAndPositive": "Value must be 0 or greater!",
             "SaveFrames": "Save Frames",
             "SaveFramesDescription": "Save the frames to a zip-file for external rendering",
+            "SelectWebcam": "Select webcam...",
             "StreamDelayCompensation": "Stream Delay Compensation",
             "StreamDelayCompensationDescription": "Delay frame capture",
             "Targetlength": "Target Length",

src/store/server/actions.ts

@@ -59,15 +59,15 @@ export const actions: ActionTree<ServerState, RootState> = {
             dispatch('socket/addInitModule', 'gui/init', { root: true })
             dispatch('gui/init', null, { root: true })
         } else dispatch('gui/initDb', null, { root: true })
-        if (payload.namespaces?.includes('webcams')) {
-            dispatch('socket/addInitModule', 'gui/webcam/init', { root: true })
-            dispatch('gui/webcams/init', null, { root: true })
-        }
         if (payload.namespaces?.includes('maintenance')) {
             dispatch('socket/addInitModule', 'gui/maintenance/init', { root: true })
             dispatch('gui/maintenance/init', null, { root: true })
         } else dispatch('gui/maintenance/initDb', null, { root: true })
 
+        // init webcams
+        dispatch('socket/addInitModule', 'gui/webcam/init', { root: true })
+        dispatch('gui/webcams/init', null, { root: true })
+
         commit('saveDbNamespaces', payload.namespaces)
 
         Vue.$socket.emit('server.info', {}, { action: 'server/checkKlippyConnected' })