From eab9060fa6e143acd50eeb8f8b0078cb64cc15bb Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 8 Dec 2023 17:08:44 +0100
Subject: [PATCH 1/9] refactor: fix linter issue in SettingsControlTab (#1677)

---
 .../settings/SettingsControlTab.vue           | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/components/settings/SettingsControlTab.vue b/src/components/settings/SettingsControlTab.vue
index 8fbe7eb92..6a8ff0f76 100644
--- a/src/components/settings/SettingsControlTab.vue
+++ b/src/components/settings/SettingsControlTab.vue
@@ -178,20 +178,18 @@
                     </settings-row>
                     <v-divider class="my-2" />
                 </template>
-                <template>
-                    <settings-row
-                        :title="$t('Settings.ControlTab.ZOffsetSaveOption')"
-                        :sub-title="$t('Settings.ControlTab.ZOffsetSaveOptionDescription')">
-                        <v-select
-                            v-model="offsetZSaveOption"
-                            :items="offsetZSaveOptions"
-                            class="mt-0"
-                            hide-details
-                            outlined
-                            dense />
-                    </settings-row>
-                    <v-divider class="my-2" />
-                </template>
+                <settings-row
+                    :title="$t('Settings.ControlTab.ZOffsetSaveOption')"
+                    :sub-title="$t('Settings.ControlTab.ZOffsetSaveOptionDescription')">
+                    <v-select
+                        v-model="offsetZSaveOption"
+                        :items="offsetZSaveOptions"
+                        class="mt-0"
+                        hide-details
+                        outlined
+                        dense />
+                </settings-row>
+                <v-divider class="my-2" />
                 <settings-row :title="$t('Settings.ControlTab.ZOffsetIncrements')" :mobile-second-row="true">
                     <v-combobox
                         v-model="offsetsZ"

From fdf3a9354a4a58665b9e05c94d1d6c96c5526c81 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 8 Dec 2023 17:08:57 +0100
Subject: [PATCH 2/9] fix: more tolerant with thumbnails sizes (#1674)

---
 src/components/dialogs/StartPrintDialog.vue | 18 ++++++++++++------
 src/store/variables.ts                      |  4 ++--
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/dialogs/StartPrintDialog.vue b/src/components/dialogs/StartPrintDialog.vue
index df282f951..e0642a80c 100644
--- a/src/components/dialogs/StartPrintDialog.vue
+++ b/src/components/dialogs/StartPrintDialog.vue
@@ -1,7 +1,13 @@
 <template>
-    <v-dialog v-model="bool" :max-width="dialogWidth" @click:outside="closeDialog" @keydown.esc="closeDialog">
+    <v-dialog v-model="bool" :max-width="400" @click:outside="closeDialog" @keydown.esc="closeDialog">
         <v-card>
-            <v-img v-if="file.big_thumbnail" contain :src="file.big_thumbnail" :style="bigThumbnailStyle" />
+            <div v-if="file.big_thumbnail" class="d-flex align-center justify-center" style="min-height: 200px">
+                <v-img
+                    :src="file.big_thumbnail"
+                    :max-width="maxThumbnailWidth"
+                    class="d-inline-block"
+                    :style="bigThumbnailStyle" />
+            </div>
             <v-card-title class="text-h5">{{ $t('Dialogs.StartPrint.Headline') }}</v-card-title>
             <v-card-text class="pb-0">
                 <p class="body-2">
@@ -71,10 +77,6 @@ export default class StartPrintDialog extends Mixins(BaseMixin) {
         )
     }
 
-    get dialogWidth() {
-        return this.file.big_thumbnail_width ?? 400
-    }
-
     get bigThumbnailBackground() {
         return this.$store.state.gui.uiSettings.bigThumbnailBackground ?? defaultBigThumbnailBackground
     }
@@ -112,6 +114,10 @@ export default class StartPrintDialog extends Mixins(BaseMixin) {
         return this.$t('Dialogs.StartPrint.DoYouWantToStartFilename', { filename: this.file?.filename ?? 'unknown' })
     }
 
+    get maxThumbnailWidth() {
+        return this.file?.big_thumbnail_width ?? 400
+    }
+
     startPrint(filename = '') {
         filename = (this.currentPath + '/' + filename).substring(1)
         this.closeDialog()
diff --git a/src/store/variables.ts b/src/store/variables.ts
index 5673c35ce..71c6ca2f2 100644
--- a/src/store/variables.ts
+++ b/src/store/variables.ts
@@ -92,9 +92,9 @@ export const allDashboardPanels = [
     'webcam',
 ]
 
-export const thumbnailSmallMin = 32
+export const thumbnailSmallMin = 30
 export const thumbnailSmallMax = 64
-export const thumbnailBigMin = 256
+export const thumbnailBigMin = 128
 
 export const navigationWidth = 220
 export const navigationItemHeight = 48

From 523d1558ab9b3a33dd2f2d8d499521023c147ffc Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 8 Dec 2023 20:38:31 +0100
Subject: [PATCH 3/9] feat: add minimum_cruise_ratio support in
 MotionSettingsPanel (#1670)

---
 .../panels/MachineSettings/MotionSettings.vue | 52 ++++++++++++++-----
 src/locales/de.json                           |  1 +
 src/locales/en.json                           |  1 +
 3 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/components/panels/MachineSettings/MotionSettings.vue b/src/components/panels/MachineSettings/MotionSettings.vue
index 14d5c71ff..315290a08 100644
--- a/src/components/panels/MachineSettings/MotionSettings.vue
+++ b/src/components/panels/MachineSettings/MotionSettings.vue
@@ -9,7 +9,7 @@
                 <v-row>
                     <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
                         <number-input
-                            :label="$t('Panels.MachineSettingsPanel.MotionSettings.Velocity').toString()"
+                            :label="$t('Panels.MachineSettingsPanel.MotionSettings.Velocity')"
                             param="VELOCITY"
                             :target="velocity"
                             :default-value="defaultVelocity"
@@ -21,11 +21,11 @@
                             :max="null"
                             :dec="0"
                             unit="mm/s"
-                            @submit="sendCmd"></number-input>
+                            @submit="sendCmd" />
                     </v-col>
                     <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
                         <number-input
-                            :label="$t('Panels.MachineSettingsPanel.MotionSettings.SquareCornerVelocity').toString()"
+                            :label="$t('Panels.MachineSettingsPanel.MotionSettings.SquareCornerVelocity')"
                             param="SQUARE_CORNER_VELOCITY"
                             :target="squareCornerVelocity"
                             :default-value="defaultSquareCornerVelocity"
@@ -36,13 +36,13 @@
                             :max="null"
                             :dec="1"
                             unit="mm/s"
-                            @submit="sendCmd"></number-input>
+                            @submit="sendCmd" />
                     </v-col>
                 </v-row>
                 <v-row>
                     <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
                         <number-input
-                            :label="$t('Panels.MachineSettingsPanel.MotionSettings.Acceleration').toString()"
+                            :label="$t('Panels.MachineSettingsPanel.MotionSettings.Acceleration')"
                             param="ACCEL"
                             :target="accel"
                             :default-value="defaultAccel"
@@ -54,11 +54,12 @@
                             :max="null"
                             :dec="0"
                             unit="mm/s²"
-                            @submit="sendCmd"></number-input>
+                            @submit="sendCmd" />
                     </v-col>
                     <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
                         <number-input
-                            :label="$t('Panels.MachineSettingsPanel.MotionSettings.MaxAccelToDecel').toString()"
+                            v-if="minimumCruiseRatio === null"
+                            :label="$t('Panels.MachineSettingsPanel.MotionSettings.MaxAccelToDecel')"
                             param="ACCEL_TO_DECEL"
                             :target="accelToDecel"
                             :default-value="defaultAccelToDecel"
@@ -70,7 +71,21 @@
                             :max="null"
                             :dec="0"
                             unit="mm/s²"
-                            @submit="sendCmd"></number-input>
+                            @submit="sendCmd" />
+                        <number-input
+                            v-else
+                            :label="$t('Panels.MachineSettingsPanel.MotionSettings.MinimumCruiseRatio')"
+                            param="MINIMUM_CRUISE_RATIO"
+                            :target="minimumCruiseRatio"
+                            :default-value="defaultMinimumCruiseRatio"
+                            :output-error-msg="true"
+                            :has-spinner="true"
+                            :spinner-factor="5"
+                            :step="0.01"
+                            :min="0.0"
+                            :max="0.99"
+                            :dec="2"
+                            @submit="sendCmd" />
                     </v-col>
                 </v-row>
             </template>
@@ -102,6 +117,14 @@ export default class MotionSettings extends Mixins(BaseMixin) {
         return Math.trunc(this.$store.state.printer?.toolhead?.max_accel_to_decel ?? this.accel / 2)
     }
 
+    get minimumCruiseRatio(): number | null {
+        const value = this.$store.state.printer?.toolhead?.minimum_cruise_ratio ?? null
+
+        if (value === null) return null
+
+        return Math.round(value * 100) / 100
+    }
+
     get squareCornerVelocity(): number {
         return Math.floor((this.$store.state.printer?.toolhead?.square_corner_velocity ?? 8) * 10) / 10
     }
@@ -118,11 +141,16 @@ export default class MotionSettings extends Mixins(BaseMixin) {
         return Math.trunc(this.$store.state.printer?.configfile?.settings?.printer?.max_accel_to_decel ?? 1500)
     }
 
+    get defaultMinimumCruiseRatio(): number {
+        const value = this.$store.state.printer?.configfile?.settings?.printer?.minimum_cruise_ratio ?? 0.5
+
+        return Math.round(value / 10) * 10
+    }
+
     get defaultSquareCornerVelocity(): number {
-        return (
-            Math.floor((this.$store.state.printer?.configfile?.settings?.printer?.square_corner_velocity ?? 8) * 10) /
-            10
-        )
+        const value = this.$store.state.printer?.configfile?.settings?.printer?.square_corner_velocity ?? 8
+
+        return Math.floor(value * 10) / 10
     }
 
     @Debounce(500)
diff --git a/src/locales/de.json b/src/locales/de.json
index b6e494ec9..cf956e1e8 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -582,6 +582,7 @@
             "MotionSettings": {
                 "Acceleration": "Beschleunigung",
                 "MaxAccelToDecel": "Max. Beschl. zu Verz.",
+                "MinimumCruiseRatio": "Min. Kreuzfahr Quote",
                 "SquareCornerVelocity": "Eck-Geschwindigkeit",
                 "Velocity": "Geschwindigkeit"
             }
diff --git a/src/locales/en.json b/src/locales/en.json
index e62fb45a2..9ad788d7d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -582,6 +582,7 @@
             "MotionSettings": {
                 "Acceleration": "Acceleration",
                 "MaxAccelToDecel": "Max Accel. to Decel.",
+                "MinimumCruiseRatio": "Min. Cruise Ratio",
                 "SquareCornerVelocity": "Square Corner Velocity",
                 "Velocity": "Velocity"
             }

From c5b3f473e4ff43b0cba69166d1831632a70deb83 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 8 Dec 2023 20:39:50 +0100
Subject: [PATCH 4/9] build(deps-dev): bump vite from 4.4.10 to 4.4.12 (#1671)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e0ed3dd7f..46813fa9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -79,7 +79,7 @@
                 "start-server-and-test": "^2.0.0",
                 "typescript": "^4.5.5",
                 "unplugin-vue-components": "^0.22.12",
-                "vite": "^4.4.9",
+                "vite": "^4.4.12",
                 "vite-plugin-checker": "^0.6.0",
                 "vite-plugin-package-version": "^1.0.2",
                 "vite-plugin-pwa": "^0.16.4",
@@ -9593,9 +9593,9 @@
             }
         },
         "node_modules/vite": {
-            "version": "4.4.10",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.10.tgz",
-            "integrity": "sha512-TzIjiqx9BEXF8yzYdF2NTf1kFFbjMjUSV0LFZ3HyHoI3SGSPLnnFUKiIQtL3gl2AjHvMrprOvQ3amzaHgQlAxw==",
+            "version": "4.4.12",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.12.tgz",
+            "integrity": "sha512-KtPlUbWfxzGVul8Nut8Gw2Qe8sBzWY+8QVc5SL8iRFnpnrcoCaNlzO40c1R6hPmcdTwIPEDkq0Y9+27a5tVbdQ==",
             "dev": true,
             "dependencies": {
                 "esbuild": "^0.18.10",
diff --git a/package.json b/package.json
index ce340e1cd..24a1efda6 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,7 @@
         "start-server-and-test": "^2.0.0",
         "typescript": "^4.5.5",
         "unplugin-vue-components": "^0.22.12",
-        "vite": "^4.4.9",
+        "vite": "^4.4.12",
         "vite-plugin-checker": "^0.6.0",
         "vite-plugin-package-version": "^1.0.2",
         "vite-plugin-pwa": "^0.16.4",

From 9395a8142f6834c034beb46007de8655c8e678c2 Mon Sep 17 00:00:00 2001
From: Francois Chagnon <fc@francoischagnon.net>
Date: Fri, 8 Dec 2023 15:37:57 -0500
Subject: [PATCH 5/9] feat: show filament sensor state even when it is disabled
 (#1656)

Co-authored-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/inputs/FilamentSensor.vue | 23 ++++++++++++-----------
 src/locales/de.json                      |  3 +--
 src/locales/en.json                      |  3 +--
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/components/inputs/FilamentSensor.vue b/src/components/inputs/FilamentSensor.vue
index 8e0565815..82b53085a 100644
--- a/src/components/inputs/FilamentSensor.vue
+++ b/src/components/inputs/FilamentSensor.vue
@@ -1,9 +1,3 @@
-<style scoped>
-._filamentRunout-subheader {
-    height: auto;
-}
-</style>
-
 <template>
     <v-container class="px-0 py-2">
         <v-row>
@@ -11,7 +5,7 @@
                 <v-subheader class="_filamentRunout-subheader">
                     <v-icon small class="mr-2">{{ mdiPrinter3dNozzleAlert }}</v-icon>
                     <span>{{ convertName(name) }}</span>
-                    <v-spacer></v-spacer>
+                    <v-spacer />
                     <small :class="'mr-3 ' + statusColor + '--text'">{{ statusText }}</small>
                     <v-icon @click="changeSensor">
                         {{ enabled ? mdiToggleSwitch : mdiToggleSwitchOffOutline }}
@@ -47,13 +41,14 @@ export default class FilamentSensor extends Mixins(BaseMixin) {
     get statusColor() {
         if (!this.enabled) return 'gray'
         else if (this.filament_detected) return 'success'
-        else return 'danger'
+
+        return 'warning'
     }
 
     get statusText() {
-        if (!this.enabled) return this.$t('Panels.MiscellaneousPanel.RunoutSensor.Disabled')
-        else if (this.filament_detected) return this.$t('Panels.MiscellaneousPanel.RunoutSensor.Detected')
-        else return this.$t('Panels.MiscellaneousPanel.RunoutSensor.Empty')
+        if (this.filament_detected) return this.$t('Panels.MiscellaneousPanel.RunoutSensor.Detected')
+
+        return this.$t('Panels.MiscellaneousPanel.RunoutSensor.Empty')
     }
 
     changeSensor() {
@@ -63,3 +58,9 @@ export default class FilamentSensor extends Mixins(BaseMixin) {
     }
 }
 </script>
+
+<style scoped>
+._filamentRunout-subheader {
+    height: auto;
+}
+</style>
diff --git a/src/locales/de.json b/src/locales/de.json
index cf956e1e8..2b5b75b5d 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -615,8 +615,7 @@
             },
             "RunoutSensor": {
                 "Detected": "erkannt",
-                "Disabled": "deaktiviert",
-                "Empty": "Leer"
+                "Empty": "leer"
             }
         },
         "PowerControlPanel": {
diff --git a/src/locales/en.json b/src/locales/en.json
index 9ad788d7d..6083a4104 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -615,8 +615,7 @@
             },
             "RunoutSensor": {
                 "Detected": "detected",
-                "Disabled": "disabled",
-                "Empty": "Empty"
+                "Empty": "empty"
             }
         },
         "PowerControlPanel": {

From dd7da32766502fb50f105e1e44d776e503b658fd Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 9 Dec 2023 10:14:04 +0100
Subject: [PATCH 6/9] feat: add option to hide parts of the ExtruderPanel
 (#1679)

---
 src/components/mixins/control.ts              |  16 +++
 .../Extruder/EstimatedExtrusionOutput.vue     |   2 +-
 .../Extruder/ExtruderControlPanelControl.vue  |   2 +
 .../Extruder/ExtruderControlPanelTools.vue    |  18 +--
 .../panels/Extruder/ExtruderPanelSettings.vue | 101 ++++++++++++++
 .../Extruder/ExtrusionFactorSettings.vue      |   2 +-
 .../Extruder/FirmwareRetractionSettings.vue   |   1 -
 .../Extruder/PressureAdvanceSettings.vue      | 131 ++++++++----------
 .../panels/ExtruderControlPanel.vue           |  59 ++++++--
 src/locales/de.json                           |   4 +
 src/locales/en.json                           |   4 +
 src/store/gui/index.ts                        |   7 +
 src/store/gui/types.ts                        |   7 +
 13 files changed, 253 insertions(+), 101 deletions(-)
 create mode 100644 src/components/panels/Extruder/ExtruderPanelSettings.vue

diff --git a/src/components/mixins/control.ts b/src/components/mixins/control.ts
index 8e4c6834e..0e669f1a4 100644
--- a/src/components/mixins/control.ts
+++ b/src/components/mixins/control.ts
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
+import { PrinterStateMacro, PrinterStateToolchangeMacro } from '@/store/printer/types'
 
 @Component
 export default class ControlMixin extends Vue {
@@ -83,6 +84,21 @@ export default class ControlMixin extends Vue {
         return this.homedAxes.includes('z')
     }
 
+    get macros() {
+        return this.$store.getters['printer/getMacros']
+    }
+
+    get toolchangeMacros(): PrinterStateToolchangeMacro[] {
+        return this.macros
+            .filter((macro: PrinterStateMacro) => macro.name.toUpperCase().match(/^T\d+/))
+            .sort((a: PrinterStateMacro, b: PrinterStateMacro) => {
+                const numberA = parseInt(a.name.slice(1))
+                const numberB = parseInt(b.name.slice(1))
+
+                return numberA - numberB
+            })
+    }
+
     doHome() {
         this.$store.dispatch('server/addEvent', { message: 'G28', type: 'command' })
         this.$socket.emit('printer.gcode.script', { script: 'G28' }, { loading: 'homeAll' })
diff --git a/src/components/panels/Extruder/EstimatedExtrusionOutput.vue b/src/components/panels/Extruder/EstimatedExtrusionOutput.vue
index 251cf1f23..6d252ed84 100644
--- a/src/components/panels/Extruder/EstimatedExtrusionOutput.vue
+++ b/src/components/panels/Extruder/EstimatedExtrusionOutput.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-container v-if="showEstimatedExtrusion" class="pa-0 ma-0 pb-1">
+    <v-container v-if="showEstimatedExtrusion" class="pa-0 ma-0 pb-2">
         <div style="font-size: 0.8em" class="text--disabled text-caption font-weight-light d-flex justify-center">
             <span>
                 {{ $t('Panels.ExtruderControlPanel.EstimatedExtrusion') }} ~ {{ extrudedLength }} mm @
diff --git a/src/components/panels/Extruder/ExtruderControlPanelControl.vue b/src/components/panels/Extruder/ExtruderControlPanelControl.vue
index 162d7c6a1..1c142e972 100644
--- a/src/components/panels/Extruder/ExtruderControlPanelControl.vue
+++ b/src/components/panels/Extruder/ExtruderControlPanelControl.vue
@@ -187,6 +187,8 @@
                     </v-col>
                 </v-row>
             </v-container>
+            <!-- EXTRUSION ESTIMATION NOTE -->
+            <estimated-extrusion-output />
         </template>
     </responsive>
 </template>
diff --git a/src/components/panels/Extruder/ExtruderControlPanelTools.vue b/src/components/panels/Extruder/ExtruderControlPanelTools.vue
index 740d1f8a8..5248d26f8 100644
--- a/src/components/panels/Extruder/ExtruderControlPanelTools.vue
+++ b/src/components/panels/Extruder/ExtruderControlPanelTools.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="toolchangeMacros.length > 1">
+    <div class="mb-3">
         <v-row v-for="(row, index) in rows" :key="'row_' + index" class="mt-0">
             <v-col>
                 <v-item-group class="_btn-group py-0 px-3">
@@ -13,7 +13,6 @@
 <script lang="ts">
 import { mdiPrinter3dNozzle } from '@mdi/js'
 import { Component, Mixins } from 'vue-property-decorator'
-import { PrinterStateMacro, PrinterStateToolchangeMacro } from '@/store/printer/types'
 import BaseMixin from '@/components/mixins/base'
 import ControlMixin from '@/components/mixins/control'
 
@@ -21,21 +20,6 @@ import ControlMixin from '@/components/mixins/control'
 export default class ExtruderControlPanel extends Mixins(BaseMixin, ControlMixin) {
     mdiPrinter3dNozzle = mdiPrinter3dNozzle
 
-    get macros() {
-        return this.$store.getters['printer/getMacros']
-    }
-
-    get toolchangeMacros(): PrinterStateToolchangeMacro[] {
-        return this.macros
-            .filter((macro: PrinterStateMacro) => macro.name.toUpperCase().match(/^T\d+/))
-            .sort((a: PrinterStateMacro, b: PrinterStateMacro) => {
-                const numberA = parseInt(a.name.slice(1))
-                const numberB = parseInt(b.name.slice(1))
-
-                return numberA - numberB
-            })
-    }
-
     get rows() {
         const cols = 6
         let rows = []
diff --git a/src/components/panels/Extruder/ExtruderPanelSettings.vue b/src/components/panels/Extruder/ExtruderPanelSettings.vue
new file mode 100644
index 000000000..68b944933
--- /dev/null
+++ b/src/components/panels/Extruder/ExtruderPanelSettings.vue
@@ -0,0 +1,101 @@
+<template>
+    <v-menu :offset-y="true" :left="true" :close-on-content-click="false">
+        <template #activator="{ on, attrs }">
+            <v-btn icon tile v-bind="attrs" v-on="on">
+                <v-icon small>{{ mdiCog }}</v-icon>
+            </v-btn>
+        </template>
+        <v-list>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="showTools"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ExtruderControlPanel.Tools')" />
+            </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="showExtrusionFactor"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ExtruderControlPanel.ExtrusionFactor')" />
+            </v-list-item>
+            <v-list-item v-if="existsPressureAdvance" class="minHeight36">
+                <v-checkbox
+                    v-model="showPressureAdvance"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ExtruderControlPanel.PressureAdvance')" />
+            </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="showFirmwareRetraction"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ExtruderControlPanel.FirmwareRetraction')" />
+            </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="showExtruderControl"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.ExtruderControlPanel.ExtruderControl')" />
+            </v-list-item>
+        </v-list>
+    </v-menu>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiCog } from '@mdi/js'
+@Component
+export default class ExtruderPanelSettings extends Mixins(BaseMixin) {
+    mdiCog = mdiCog
+
+    get showTools(): boolean {
+        return this.$store.state.gui.view.extruder.showTools ?? true
+    }
+
+    set showTools(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.extruder.showTools', value: newVal })
+    }
+
+    get showExtrusionFactor(): boolean {
+        return this.$store.state.gui.view.extruder.showExtrusionFactor ?? true
+    }
+
+    set showExtrusionFactor(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.extruder.showExtrusionFactor', value: newVal })
+    }
+
+    get existsPressureAdvance(): boolean {
+        return !(this.$store.getters['printer/getExtruderSteppers'].length > 0)
+    }
+
+    get showPressureAdvance(): boolean {
+        return this.$store.state.gui.view.extruder.showPressureAdvance ?? true
+    }
+
+    set showPressureAdvance(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.extruder.showPressureAdvance', value: newVal })
+    }
+
+    get showFirmwareRetraction(): boolean {
+        return this.$store.state.gui.view.extruder.showFirmwareRetraction ?? true
+    }
+
+    set showFirmwareRetraction(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.extruder.showFirmwareRetraction', value: newVal })
+    }
+
+    get showExtruderControl(): boolean {
+        return this.$store.state.gui.view.extruder.showExtruderControl ?? true
+    }
+
+    set showExtruderControl(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.extruder.showExtruderControl', value: newVal })
+    }
+}
+</script>
diff --git a/src/components/panels/Extruder/ExtrusionFactorSettings.vue b/src/components/panels/Extruder/ExtrusionFactorSettings.vue
index 0766e7ccf..654facc00 100644
--- a/src/components/panels/Extruder/ExtrusionFactorSettings.vue
+++ b/src/components/panels/Extruder/ExtrusionFactorSettings.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-container class="pb-1">
+    <v-container>
         <tool-slider
             :label="$t('Panels.ExtruderControlPanel.ExtrusionFactor')"
             :icon="mdiPrinter3dNozzleOutline"
diff --git a/src/components/panels/Extruder/FirmwareRetractionSettings.vue b/src/components/panels/Extruder/FirmwareRetractionSettings.vue
index 9e42f99a8..aa7b5f718 100644
--- a/src/components/panels/Extruder/FirmwareRetractionSettings.vue
+++ b/src/components/panels/Extruder/FirmwareRetractionSettings.vue
@@ -1,6 +1,5 @@
 <template>
     <div v-if="existsFirmwareRetraction">
-        <v-divider />
         <v-container>
             <responsive
                 :breakpoints="{
diff --git a/src/components/panels/Extruder/PressureAdvanceSettings.vue b/src/components/panels/Extruder/PressureAdvanceSettings.vue
index 32ac28ef6..fa46ca35a 100644
--- a/src/components/panels/Extruder/PressureAdvanceSettings.vue
+++ b/src/components/panels/Extruder/PressureAdvanceSettings.vue
@@ -1,71 +1,64 @@
 <template>
-    <div v-if="show">
-        <v-divider />
-        <v-container>
-            <responsive
-                :breakpoints="{
-                    small: (el) => el.width <= 350,
-                    medium: (el) => el.width > 350 && el.width <= 500,
-                }">
-                <template #default="{ el }">
-                    <v-row>
-                        <v-col v-if="allExtruders.length > 1" :class="{ 'col-12': el.is.small || el.is.medium }">
-                            <div class="d-flex align-center">
-                                <v-btn
-                                    v-if="selectedExtruder !== activeExtruder"
-                                    icon
-                                    plain
-                                    @click="resetToActiveExtruder">
-                                    <v-icon>{{ mdiRestart }}</v-icon>
-                                </v-btn>
-                                <v-select
-                                    v-model="selectedExtruder"
-                                    :label="$t('Panels.ExtruderControlPanel.PressureAdvanceSettings.Extruder')"
-                                    :items="allExtruders"
-                                    :value="activeExtruder"
-                                    hide-details
-                                    outlined
-                                    dense />
-                            </div>
-                        </v-col>
-                        <v-col :class="{ 'col-12': el.is.small }">
-                            <number-input
-                                :label="$t('Panels.ExtruderControlPanel.PressureAdvanceSettings.Advance')"
-                                param="ADVANCE"
-                                :target="pressureAdvance"
-                                :default-value="defaultPressureAdvance"
-                                :extruder="selectedExtruder"
-                                :output-error-msg="true"
-                                :has-spinner="true"
-                                :min="0"
-                                :max="null"
-                                :step="0.001"
-                                :dec="3"
-                                unit="s"
-                                @submit="sendCmd" />
-                        </v-col>
-                        <v-col :class="{ 'col-12': el.is.small }">
-                            <number-input
-                                :label="$t('Panels.ExtruderControlPanel.PressureAdvanceSettings.SmoothTime')"
-                                param="SMOOTH_TIME"
-                                :target="smoothTime"
-                                :default-value="defaultSmoothTime"
-                                :extruder="selectedExtruder"
-                                :output-error-msg="true"
-                                :has-spinner="true"
-                                :spinner-factor="10"
-                                :min="0"
-                                :max="0.2"
-                                :step="0.001"
-                                :dec="3"
-                                unit="s"
-                                @submit="sendCmd" />
-                        </v-col>
-                    </v-row>
-                </template>
-            </responsive>
-        </v-container>
-    </div>
+    <responsive
+        :breakpoints="{
+            small: (el) => el.width <= 350,
+            medium: (el) => el.width > 350 && el.width <= 500,
+        }">
+        <template #default="{ el }">
+            <v-container>
+                <v-row>
+                    <v-col v-if="allExtruders.length > 1" :class="{ 'col-12': el.is.small || el.is.medium }">
+                        <div class="d-flex align-center">
+                            <v-btn v-if="selectedExtruder !== activeExtruder" icon plain @click="resetToActiveExtruder">
+                                <v-icon>{{ mdiRestart }}</v-icon>
+                            </v-btn>
+                            <v-select
+                                v-model="selectedExtruder"
+                                :label="$t('Panels.ExtruderControlPanel.PressureAdvanceSettings.Extruder')"
+                                :items="allExtruders"
+                                :value="activeExtruder"
+                                hide-details
+                                outlined
+                                dense />
+                        </div>
+                    </v-col>
+                    <v-col :class="{ 'col-12': el.is.small }">
+                        <number-input
+                            :label="$t('Panels.ExtruderControlPanel.PressureAdvanceSettings.Advance')"
+                            param="ADVANCE"
+                            :target="pressureAdvance"
+                            :default-value="defaultPressureAdvance"
+                            :extruder="selectedExtruder"
+                            :output-error-msg="true"
+                            :has-spinner="true"
+                            :min="0"
+                            :max="null"
+                            :step="0.001"
+                            :dec="3"
+                            unit="s"
+                            @submit="sendCmd" />
+                    </v-col>
+                    <v-col :class="{ 'col-12': el.is.small }">
+                        <number-input
+                            :label="$t('Panels.ExtruderControlPanel.PressureAdvanceSettings.SmoothTime')"
+                            param="SMOOTH_TIME"
+                            :target="smoothTime"
+                            :default-value="defaultSmoothTime"
+                            :extruder="selectedExtruder"
+                            :output-error-msg="true"
+                            :has-spinner="true"
+                            :spinner-factor="10"
+                            :min="0"
+                            :max="0.2"
+                            :step="0.001"
+                            :dec="3"
+                            unit="s"
+                            @submit="sendCmd" />
+                    </v-col>
+                </v-row>
+            </v-container>
+        </template>
+    </responsive>
 </template>
 
 <script lang="ts">
@@ -90,10 +83,6 @@ export default class PressureAdvanceSettings extends Mixins(BaseMixin) {
         this.selectedExtruder = this.$store.state.printer.toolhead?.extruder
     }
 
-    get show(): boolean {
-        return !(this.$store.getters['printer/getExtruderSteppers'].length > 0)
-    }
-
     get allExtruders(): string[] {
         Object.keys(this.$store.state.printer).forEach((e) => {
             if (e.startsWith('extruder') && !this.extruders.includes(e)) this.extruders.push(e)
diff --git a/src/components/panels/ExtruderControlPanel.vue b/src/components/panels/ExtruderControlPanel.vue
index e4c7db4b7..a3a9c9ad7 100644
--- a/src/components/panels/ExtruderControlPanel.vue
+++ b/src/components/panels/ExtruderControlPanel.vue
@@ -4,8 +4,7 @@
         :icon="mdiPrinter3dNozzle"
         :title="$t('Panels.ExtruderControlPanel.Headline')"
         :collapsible="true"
-        card-class="extruder-control-panel"
-        class="pb-1">
+        card-class="extruder-control-panel">
         <!-- PANEL-HEADER 3-DOT-MENU -->
         <template #buttons>
             <v-menu v-if="showFilamentMacros" :offset-y="true" :close-on-content-click="false" left>
@@ -79,20 +78,30 @@
                     </v-list-item>
                 </v-list>
             </v-menu>
+            <extruder-panel-settings />
         </template>
         <!-- TOOL SELECTOR BUTTONS -->
-        <extruder-control-panel-tools />
+        <extruder-control-panel-tools v-if="showTools" />
         <!-- EXTRUSION FACTOR SLIDER -->
-        <extrusion-factor-settings />
+        <template v-if="showExtrusionFactor">
+            <v-divider v-if="showTools" />
+            <extrusion-factor-settings />
+        </template>
         <!-- PRESSURE ADVANCE SETTINGS -->
-        <pressure-advance-settings />
+        <template v-if="showPressureAdvance">
+            <v-divider v-if="showTools || showExtrusionFactor" />
+            <pressure-advance-settings />
+        </template>
         <!-- FIRMWARE RETRACTION SETTINGS -->
-        <firmware-retraction-settings />
-        <v-divider class="pb-1" />
+        <template v-if="showFirmwareRetraction">
+            <v-divider v-if="showTools || showExtrusionFactor || showPressureAdvance" />
+            <firmware-retraction-settings />
+        </template>
         <!-- EXTRUDER INPUTS AND QUICKSELECTS -->
-        <extruder-control-panel-control />
-        <!-- EXTRUSION ESTIMATION NOTE -->
-        <estimated-extrusion-output />
+        <template v-if="showExtruderControl">
+            <v-divider v-if="showTools || showExtrusionFactor || showPressureAdvance || showFirmwareRetraction" />
+            <extruder-control-panel-control />
+        </template>
     </panel>
 </template>
 
@@ -177,5 +186,35 @@ export default class ExtruderControlPanel extends Mixins(BaseMixin, ControlMixin
     get extruders(): PrinterStateExtruder[] {
         return this.$store.getters['printer/getExtruders']
     }
+
+    get showTools(): boolean {
+        if (this.toolchangeMacros.length < 1) return false
+
+        return this.$store.state.gui.view.extruder.showTools ?? true
+    }
+
+    get showExtrusionFactor(): boolean {
+        return this.$store.state.gui.view.extruder.showExtrusionFactor ?? true
+    }
+
+    get existsPressureAdvance(): boolean {
+        return !(this.$store.getters['printer/getExtruderSteppers'].length > 0)
+    }
+
+    get showPressureAdvance(): boolean {
+        if (!this.existsPressureAdvance) return false
+
+        return this.$store.state.gui.view.extruder.showPressureAdvance ?? true
+    }
+
+    get showFirmwareRetraction(): boolean {
+        if (!this.existsFirmwareRetraction) return false
+
+        return this.$store.state.gui.view.extruder.showFirmwareRetraction ?? true
+    }
+
+    get showExtruderControl(): boolean {
+        return this.$store.state.gui.view.extruder.showExtruderControl ?? true
+    }
 }
 </script>
diff --git a/src/locales/de.json b/src/locales/de.json
index 2b5b75b5d..44326dbd9 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -539,10 +539,12 @@
             "CleanNozzle": "Düse reinigen",
             "EstimatedExtrusion": "Extrusion:",
             "Extrude": "Extrudieren",
+            "ExtruderControl": "Extruder Control",
             "ExtruderTempTooLow": "Extruder Temp. <",
             "ExtrusionFactor": "Extrusionsfaktor",
             "ExtrusionFeedrate": "Extrusionsgeschwindigkeit",
             "FilamentLength": "Filamentlänge",
+            "FirmwareRetraction": "Firmware Rückzug",
             "FirmwareRetractionSettings": {
                 "RetractLength": "Rückzugslänge",
                 "RetractSpeed": "Rückzuggeschwindigkeit",
@@ -551,6 +553,7 @@
             },
             "Headline": "Extruder",
             "LoadFilament": "Filament laden",
+            "PressureAdvance": "Pressure Advance",
             "PressureAdvanceSettings": {
                 "Advance": "Pressure Advance",
                 "Extruder": "Extruder",
@@ -560,6 +563,7 @@
             "Requested": "Angefordert",
             "Retract": "Rückzug",
             "TooLargeExtrusion": "Extrusion zu groß!",
+            "Tools": "Werkzeuge",
             "UnloadFilament": "Filament entladen"
         },
         "FarmPrinterPanel": {
diff --git a/src/locales/en.json b/src/locales/en.json
index 6083a4104..8388d465f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -539,10 +539,12 @@
             "CleanNozzle": "Clean Nozzle",
             "EstimatedExtrusion": "Extrusion:",
             "Extrude": "Extrude",
+            "ExtruderControl": "Extruder Control",
             "ExtruderTempTooLow": "Extruder temp. <",
             "ExtrusionFactor": "Extrusion factor",
             "ExtrusionFeedrate": "Extrusion Feedrate",
             "FilamentLength": "Filament Length",
+            "FirmwareRetraction": "Firmware Retraction",
             "FirmwareRetractionSettings": {
                 "RetractLength": "Retract Length",
                 "RetractSpeed": "Retract Speed",
@@ -551,6 +553,7 @@
             },
             "Headline": "Extruder",
             "LoadFilament": "Load Filament",
+            "PressureAdvance": "Pressure Advance",
             "PressureAdvanceSettings": {
                 "Advance": "Pressure Advance",
                 "Extruder": "Extruder",
@@ -560,6 +563,7 @@
             "Requested": "Requested",
             "Retract": "Retract",
             "TooLargeExtrusion": "Extrusion too large!",
+            "Tools": "Tools",
             "UnloadFilament": "Unload Filament"
         },
         "FarmPrinterPanel": {
diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index f1c095b12..99376754c 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -183,6 +183,13 @@ export const getDefaultState = (): GuiState => {
                 rootPath: 'config',
                 selectedFiles: [],
             },
+            extruder: {
+                showTools: true,
+                showExtrusionFactor: true,
+                showPressureAdvance: true,
+                showFirmwareRetraction: true,
+                showExtruderControl: true,
+            },
             gcodefiles: {
                 countPerPage: 10,
                 sortBy: 'modified',
diff --git a/src/store/gui/types.ts b/src/store/gui/types.ts
index 0555ebc4b..7bafd8b27 100644
--- a/src/store/gui/types.ts
+++ b/src/store/gui/types.ts
@@ -132,6 +132,13 @@ export interface GuiState {
             rootPath: string
             selectedFiles: FileStateFile[]
         }
+        extruder: {
+            showTools: boolean
+            showExtrusionFactor: boolean
+            showPressureAdvance: boolean
+            showFirmwareRetraction: boolean
+            showExtruderControl: boolean
+        }
         gcodefiles: {
             countPerPage: number
             sortBy: string

From 7939357d69ccef522390eef79891f1d8e99205f3 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 10 Dec 2023 11:02:44 +0100
Subject: [PATCH 7/9] feat(webcam): add support for go2rtc webrtc (#1651)

---
 .../settings/Webcams/WebcamForm.vue           |  31 +++
 src/components/webcams/WebcamWrapperItem.vue  |   4 +
 .../webcams/streamers/DynamicCamLoader.ts     |   3 +
 .../webcams/streamers/WebrtcGo2rtc.vue        | 247 ++++++++++++++++++
 src/locales/de.json                           |   1 +
 src/locales/en.json                           |   2 +
 src/store/gui/webcams/types.ts                |   1 +
 7 files changed, 289 insertions(+)
 create mode 100644 src/components/webcams/streamers/WebrtcGo2rtc.vue

diff --git a/src/components/settings/Webcams/WebcamForm.vue b/src/components/settings/Webcams/WebcamForm.vue
index 167dc1f85..5a43c4fbc 100644
--- a/src/components/settings/Webcams/WebcamForm.vue
+++ b/src/components/settings/Webcams/WebcamForm.vue
@@ -111,6 +111,15 @@
                                 :label="$t('Settings.WebcamsTab.HideFps')" />
                         </v-col>
                     </v-row>
+                    <v-row v-if="hasAudioOption">
+                        <v-col class="pt-1 pb-3">
+                            <v-checkbox
+                                v-model="enableAudio"
+                                class="mt-1"
+                                hide-details
+                                :label="$t('Settings.WebcamsTab.EnableAudio')" />
+                        </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">
@@ -231,6 +240,7 @@ export default class WebcamForm extends Mixins(BaseMixin, WebcamMixin) {
             { value: 'uv4l-mjpeg', text: this.$t('Settings.WebcamsTab.Uv4lMjpeg') },
             { value: 'ipstream', text: this.$t('Settings.WebcamsTab.Ipstream') },
             { value: 'webrtc-camerastreamer', text: this.$t('Settings.WebcamsTab.WebrtcCameraStreamer') },
+            { value: 'webrtc-go2rtc', text: this.$t('Settings.WebcamsTab.WebrtcGo2rtc') },
             { value: 'webrtc-mediamtx', text: this.$t('Settings.WebcamsTab.WebrtcMediaMTX') },
             { value: 'hlsstream', text: this.$t('Settings.WebcamsTab.Hlsstream') },
             { value: 'jmuxer-stream', text: this.$t('Settings.WebcamsTab.JMuxerStream') },
@@ -263,6 +273,10 @@ export default class WebcamForm extends Mixins(BaseMixin, WebcamMixin) {
         return ['mjpegstreamer', 'mjpegstreamer-adaptive'].includes(this.webcam.service)
     }
 
+    get hasAudioOption() {
+        return ['webrtc-go2rtc'].includes(this.webcam.service)
+    }
+
     get hideFps() {
         return this.webcam.extra_data?.hideFps ?? false
     }
@@ -280,6 +294,23 @@ export default class WebcamForm extends Mixins(BaseMixin, WebcamMixin) {
         this.webcam.extra_data.hideFps = newVal
     }
 
+    get enableAudio() {
+        return this.webcam.extra_data?.enableAudio ?? false
+    }
+
+    set enableAudio(newVal) {
+        if (!('extra_data' in this.webcam)) {
+            this.webcam.extra_data = {
+                enableAudio: newVal,
+            }
+
+            return
+        }
+
+        // @ts-ignore
+        this.webcam.extra_data.enableAudio = newVal
+    }
+
     mounted() {
         this.oldWebcamName = this.webcam.name
     }
diff --git a/src/components/webcams/WebcamWrapperItem.vue b/src/components/webcams/WebcamWrapperItem.vue
index 989a88e07..4e7217ef1 100644
--- a/src/components/webcams/WebcamWrapperItem.vue
+++ b/src/components/webcams/WebcamWrapperItem.vue
@@ -27,6 +27,9 @@
         <template v-else-if="service === 'webrtc-mediamtx'">
             <webrtc-media-m-t-x-async :cam-settings="webcam" :printer-url="printerUrl" />
         </template>
+        <template v-else-if="service === 'webrtc-go2rtc'">
+            <webrtc-go2rtc-async :cam-settings="webcam" :printer-url="printerUrl" />
+        </template>
         <template v-else>
             <p class="text-center py-3 font-italic">{{ $t('Panels.WebcamPanel.UnknownWebcamService') }}</p>
         </template>
@@ -51,6 +54,7 @@ import { DynamicCamLoader } from '@/components/webcams/streamers/DynamicCamLoade
         Uv4lMjpegAsync: DynamicCamLoader('Uv4lMjpeg'),
         WebrtcCameraStreamerAsync: DynamicCamLoader('WebrtcCameraStreamer'),
         WebrtcMediaMTXAsync: DynamicCamLoader('WebrtcMediaMTX'),
+        WebrtcGo2rtcAsync: DynamicCamLoader('WebrtcGo2rtc'),
     },
 })
 export default class WebcamWrapperItem extends Mixins(BaseMixin) {
diff --git a/src/components/webcams/streamers/DynamicCamLoader.ts b/src/components/webcams/streamers/DynamicCamLoader.ts
index 663206e51..a41182f37 100644
--- a/src/components/webcams/streamers/DynamicCamLoader.ts
+++ b/src/components/webcams/streamers/DynamicCamLoader.ts
@@ -10,6 +10,7 @@ type StreamerTypes =
     | 'Uv4lMjpeg'
     | 'WebrtcCameraStreamer'
     | 'WebrtcMediaMTX'
+    | 'WebrtcGo2rtc'
 
 function getDynamicCamImport(componentName: StreamerTypes) {
     // split each webcam streamer into its own chunk
@@ -32,6 +33,8 @@ function getDynamicCamImport(componentName: StreamerTypes) {
             return () => import('@/components/webcams/streamers/WebrtcCameraStreamer.vue')
         case 'WebrtcMediaMTX':
             return () => import('@/components/webcams/streamers/WebrtcMediaMTX.vue')
+        case 'WebrtcGo2rtc':
+            return () => import('@/components/webcams/streamers/WebrtcGo2rtc.vue')
     }
 }
 
diff --git a/src/components/webcams/streamers/WebrtcGo2rtc.vue b/src/components/webcams/streamers/WebrtcGo2rtc.vue
new file mode 100644
index 000000000..f3bb47926
--- /dev/null
+++ b/src/components/webcams/streamers/WebrtcGo2rtc.vue
@@ -0,0 +1,247 @@
+<template>
+    <div>
+        <video
+            v-show="status === 'connected'"
+            ref="video"
+            :style="webcamStyle"
+            class="webcamImage"
+            autoplay
+            playsinline
+            muted />
+        <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>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script lang="ts">
+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'
+
+@Component
+export default class WebrtcGo2rtc extends Mixins(BaseMixin, WebcamMixin) {
+    @Prop({ required: true }) readonly camSettings!: GuiWebcamStateWebcam
+    @Prop({ default: null }) readonly printerUrl!: string | null
+    @Ref() declare video: HTMLVideoElement
+
+    pc: RTCPeerConnection | null = null
+    ws: WebSocket | null = null
+    restartPause = 2000
+    restartTimeout: any = null
+    status: string = 'connecting'
+
+    mounted() {
+        this.start()
+    }
+
+    // stop the video and close the streams if the component is going to be destroyed so we don't leave hanging streams
+    beforeDestroy() {
+        this.terminate()
+
+        // clear any potentially open restart timeout
+        if (this.restartTimeout) clearTimeout(this.restartTimeout)
+    }
+
+    get webcamStyle() {
+        return {
+            transform: this.generateTransform(
+                this.camSettings.flip_horizontal ?? false,
+                this.camSettings.flip_vertical ?? false,
+                this.camSettings.rotation ?? 0
+            ),
+        }
+    }
+
+    get url() {
+        let urlSearch = ''
+        let url = new URL(location.href)
+
+        try {
+            urlSearch = new URL(this.camSettings.stream_url).search.toString()
+            url = new URL('api/ws' + urlSearch, this.camSettings.stream_url)
+        } catch (e) {
+            this.log('invalid url', this.camSettings.stream_url)
+        }
+
+        // create media types array
+        const media = ['video']
+        if (this.enableAudio) media.push('audio')
+
+        url.searchParams.set('media', media.join('+'))
+        // change protocol to ws
+        url.protocol = this.$store.state.socket.protocol + ':'
+
+        // output a warning, if no src is set in the url
+        if (!url.searchParams.has('src')) {
+            this.log('no src set in url')
+        }
+
+        return this.convertUrl(url.toString(), this.printerUrl)
+    }
+
+    get enableAudio() {
+        return this.camSettings.extra_data?.enableAudio ?? false
+    }
+
+    // stop and restart the video if the url changes
+    @Watch('url')
+    changedUrl() {
+        this.terminate()
+        this.start()
+    }
+
+    // stop and restart the video if enableAudio changes
+    @Watch('enableAudio')
+    changedEnableAudio() {
+        this.terminate()
+        this.start()
+    }
+
+    get expanded(): boolean {
+        return this.$store.getters['gui/getPanelExpand']('webcam-panel', this.viewport) ?? false
+    }
+
+    // start or stop the video when the expand state changes
+    @Watch('expanded', { immediate: true })
+    expandChanged(newExpanded: boolean): void {
+        if (!newExpanded) {
+            this.terminate()
+            return
+        }
+
+        this.start()
+    }
+
+    log(msg: string, obj?: any) {
+        if (obj) {
+            window.console.log(`[WebRTC go2rtc] ${msg}`, obj)
+            return
+        }
+
+        window.console.log(`[WebRTC go2rtc] ${msg}`)
+    }
+
+    // webrtc player methods
+    // adapted from https://github.com/AlexxIT/go2rtc/blob/master/www/webrtc.html
+
+    start() {
+        if (!this.video) {
+            this.scheduleRestart()
+            return
+        }
+
+        this.log('connecting to ' + this.url)
+        this.status = 'connecting'
+
+        this.pc = new RTCPeerConnection({
+            iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
+        })
+
+        let localTracks: MediaStreamTrack[] = []
+        const kinds = ['video', 'audio']
+        kinds.forEach((kind: string) => {
+            const track = this.pc?.addTransceiver(kind, { direction: 'recvonly' }).receiver.track
+            if (track) localTracks.push(track)
+        })
+        this.video.srcObject = new MediaStream(localTracks)
+
+        this.ws = new WebSocket(this.url)
+        this.ws.addEventListener('open', () => this.onWebSocketOpen())
+        this.ws.addEventListener('message', (ev) => this.onWebSocketMessage(ev))
+        this.ws.addEventListener('close', (ev) => this.onWebSocketClose(ev))
+    }
+
+    onWebSocketOpen() {
+        this.log('open')
+
+        if (this.restartTimeout !== null) {
+            clearTimeout(this.restartTimeout)
+            this.restartTimeout = null
+        }
+
+        this.pc?.addEventListener('icecandidate', (ev) => {
+            if (!ev.candidate) return
+            const msg = { type: 'webrtc/candidate', value: ev.candidate.candidate }
+            this.ws?.send(JSON.stringify(msg))
+        })
+
+        this.pc?.addEventListener('connectionstatechange', () => {
+            this.status = (this.pc?.connectionState ?? '').toString()
+            this.log('connection state changed', this.status)
+
+            if (['failed', 'disconnected'].includes(this.status)) {
+                this.scheduleRestart()
+            }
+        })
+
+        this.pc
+            ?.createOffer()
+            .then((offer) => this.pc?.setLocalDescription(offer))
+            .then(() => {
+                const msg = { type: 'webrtc/offer', value: this.pc?.localDescription?.sdp }
+                this.ws?.send(JSON.stringify(msg))
+            })
+    }
+
+    onWebSocketMessage(ev: MessageEvent) {
+        const msg = JSON.parse(ev.data)
+
+        if (msg.type === 'webrtc/candidate') {
+            this.pc?.addIceCandidate({ candidate: msg.value, sdpMid: '0' })
+        } else if (msg.type === 'webrtc/answer') {
+            this.pc?.setRemoteDescription({ type: 'answer', sdp: msg.value })
+        }
+    }
+
+    onWebSocketClose(ev: CloseEvent) {
+        this.log('close')
+        this.status = 'disconnected'
+
+        if (!ev.wasClean) this.scheduleRestart()
+    }
+
+    terminate() {
+        this.log('terminating')
+
+        if (this.pc !== null) {
+            this.pc.close()
+            this.pc = null
+        }
+
+        if (this.ws !== null) {
+            this.ws.close()
+            this.ws = null
+        }
+    }
+
+    scheduleRestart() {
+        if (this.restartTimeout !== null) return
+
+        this.terminate()
+
+        this.restartTimeout = window.setTimeout(() => {
+            this.restartTimeout = null
+            this.start()
+        }, this.restartPause)
+    }
+}
+</script>
+
+<style scoped>
+.webcamImage {
+    width: 100%;
+}
+
+._webcam_webrtc_output {
+    aspect-ratio: calc(3 / 2);
+}
+
+video {
+    width: 100%;
+}
+</style>
diff --git a/src/locales/de.json b/src/locales/de.json
index 44326dbd9..e8b227864 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -1146,6 +1146,7 @@
             "CreateWebcam": "Erstelle Webcam",
             "EditCrowsnestConf": "crowsnest.conf bearbeiten",
             "EditWebcam": "Webcam bearbeiten",
+            "EnableAudio": "Ton einschalten",
             "FlipWebcam": "Webcam-Bild spiegeln:",
             "HideFps": "FPS-Anzeige verstecken",
             "Hlsstream": "HLS-Stream",
diff --git a/src/locales/en.json b/src/locales/en.json
index 8388d465f..c0f99508f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1164,6 +1164,7 @@
             "CreateWebcam": "Create Webcam",
             "EditCrowsnestConf": "Edit crowsnest.conf",
             "EditWebcam": "Edit Webcam",
+            "EnableAudio": "Enable audio",
             "FlipWebcam": "Flip webcam image:",
             "HideFps": "Hide FPS counter",
             "Hlsstream": "HLS Stream",
@@ -1194,6 +1195,7 @@
             "Vertically": "vertically",
             "Webcams": "Webcams",
             "WebrtcCameraStreamer": "WebRTC (camera-streamer)",
+            "WebrtcGo2rtc": "WebRTC (go2rtc)",
             "WebrtcJanus": "WebRTC (janus-gateway)",
             "WebrtcMediaMTX": "WebRTC (MediaMTX)"
         }
diff --git a/src/store/gui/webcams/types.ts b/src/store/gui/webcams/types.ts
index 50f03153b..a5566b62c 100644
--- a/src/store/gui/webcams/types.ts
+++ b/src/store/gui/webcams/types.ts
@@ -26,6 +26,7 @@ export interface GuiWebcamStateWebcam {
     rotation: number
     aspect_ratio?: string
     extra_data?: {
+        enableAudio?: boolean
         hideFps?: boolean
     }
     source?: 'config' | 'database'

From 623bdae6bb11291d4039fbe21ca3d0553a35ec6d Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 10 Dec 2023 21:41:46 +0100
Subject: [PATCH 8/9] feat: add moonraker init component check with warning
 (#1680)

---
 src/locales/de.json                    |  4 ++-
 src/locales/en.json                    |  2 ++
 src/plugins/webSocketClient.ts         | 17 +++++++++--
 src/store/gui/notifications/getters.ts | 41 ++++++++++++++++++++++++++
 src/store/server/actions.ts            |  5 ++++
 src/store/server/index.ts              |  1 +
 src/store/server/mutations.ts          | 17 +++++++++++
 src/store/server/types.ts              |  1 +
 src/store/socket/actions.ts            |  6 ++++
 src/store/socket/mutations.ts          | 18 +++++++++++
 10 files changed, 108 insertions(+), 4 deletions(-)

diff --git a/src/locales/de.json b/src/locales/de.json
index e8b227864..10ab43ba8 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -17,7 +17,9 @@
             },
             "MoonrakerWarnings": {
                 "MoonrakerComponent": "Moonraker: {component}",
-                "MoonrakerFailedComponentDescription": "Beim Laden der Moonraker-Komponenten wurde ein Fehler festgestellt. Bitte prüfe die Logdatei und behebe das Problem.",
+                "MoonrakerFailedComponentDescription": "Beim Laden der Moonraker-Komponente '{component}' wurde ein Fehler festgestellt. Bitte prüfe die Logdatei und behebe das Problem.",
+                "MoonrakerFailedInitComponentDescription": "Beim Initialisieren der Moonraker-Komponente '{component}' wurde ein Fehler festgestellt. Bitte prüfe die Logdatei und behebe das Problem.",
+                "MoonrakerInitComponent": "Init. Moonraker: {component}",
                 "MoonrakerWarning": "Moonraker Warnung",
                 "UnparsedConfigOption": "Nicht erkannte Config-Option '{option}: {value}' in Abschnitt [{section}] entdeckt. Dies kann eine Option sein, die nicht mehr verfügbar ist, oder das Ergebnis eines Moduls sein, das nicht geladen werden konnte. In Zukunft wird dies zu einem Startfehler führen.",
                 "UnparsedConfigSection": "Nicht erkannter Config-Abschnitt [{section}] gefunden. Dies kann das Ergebnis einer Komponente sein, die nicht geladen werden konnte. In Zukunft wird dies zu einem Startfehler führen."
diff --git a/src/locales/en.json b/src/locales/en.json
index c0f99508f..6624ccb3c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -18,6 +18,8 @@
             "MoonrakerWarnings": {
                 "MoonrakerComponent": "Moonraker: {component}",
                 "MoonrakerFailedComponentDescription": "An error was detected while loading the moonraker component '{component}'. Please check the log file and fix the issue.",
+                "MoonrakerFailedInitComponentDescription": "An error was detected during initialization the moonraker component '{component}'. Please check the log file and fix the issue.",
+                "MoonrakerInitComponent": "Init. Moonraker: {component}",
                 "MoonrakerWarning": "Moonraker warning",
                 "UnparsedConfigOption": "Unparsed config option '{option}: {value}' detected in section [{section}]. This may be an option no longer available or could be the result of a module that failed to load. In the future this will result in a startup error.",
                 "UnparsedConfigSection": "Unparsed config section [{section}] detected. This may be the result of a component that failed to load. In the future this will result in a startup error."
diff --git a/src/plugins/webSocketClient.ts b/src/plugins/webSocketClient.ts
index b79d5cc35..ec5a34f84 100644
--- a/src/plugins/webSocketClient.ts
+++ b/src/plugins/webSocketClient.ts
@@ -61,10 +61,21 @@ export class WebSocketClient {
 
             // report error messages
             if (data.error?.message) {
-                if (data.error?.message !== 'Klippy Disconnected')
+                // only report errors, if not disconnected and no init component
+                if (data.error?.message !== 'Klippy Disconnected' && !wait?.action?.startsWith('server/')) {
                     window.console.error(`Response Error: ${data.error.message} (${wait?.action ?? 'no action'})`)
-
-                if (wait?.id) this.removeWaitById(wait.id)
+                }
+
+                if (wait?.id) {
+                    if (wait.action?.startsWith('server/')) {
+                        const component = wait.action.replace('server/', '').split('/')[0]
+                        window.console.error(`init server component ${component} failed`)
+                        this.store?.dispatch('server/addFailedInitComponent', component)
+                        this.store?.dispatch('socket/removeInitComponent', `server/${component}/`)
+                    }
+
+                    this.removeWaitById(wait.id)
+                }
 
                 return
             }
diff --git a/src/store/gui/notifications/getters.ts b/src/store/gui/notifications/getters.ts
index a4072f186..2384c1d90 100644
--- a/src/store/gui/notifications/getters.ts
+++ b/src/store/gui/notifications/getters.ts
@@ -28,6 +28,9 @@ export const getters: GetterTree<GuiNotificationState, any> = {
         // moonraker failed components
         notifications = notifications.concat(getters['getNotificationsMoonrakerFailedComponents'])
 
+        // moonraker failed init components
+        notifications = notifications.concat(getters['getNotificationsMoonrakerFailedInitComponents'])
+
         // klipper warnings
         notifications = notifications.concat(getters['getNotificationsKlipperWarnings'])
 
@@ -224,6 +227,44 @@ export const getters: GetterTree<GuiNotificationState, any> = {
         return notifications
     },
 
+    getNotificationsMoonrakerFailedInitComponents: (state, getters, rootState, rootGetters) => {
+        const notifications: GuiNotificationStateEntry[] = []
+
+        let failedInitCompontents = rootState.server.failed_init_components ?? []
+        if (failedInitCompontents.length) {
+            const date = rootState.server.system_boot_at ?? new Date()
+
+            // get all dismissed failed components and convert it to a string[]
+            const flagDismisses = rootGetters['gui/notifications/getDismissByCategory'](
+                'moonrakerFailedInitComponent'
+            ).map((dismiss: GuiNotificationStateDismissEntry) => {
+                return dismiss.id
+            })
+
+            // filter all dismissed failed init components
+            failedInitCompontents = failedInitCompontents.filter(
+                (component: string) => !flagDismisses.includes(component)
+            )
+
+            failedInitCompontents.forEach((component: string) => {
+                notifications.push({
+                    id: `moonrakerFailedInitComponent/${component}`,
+                    priority: 'high',
+                    title: i18n
+                        .t('App.Notifications.MoonrakerWarnings.MoonrakerInitComponent', { component })
+                        .toString(),
+                    description: i18n
+                        .t('App.Notifications.MoonrakerWarnings.MoonrakerFailedInitComponentDescription', { component })
+                        .toString(),
+                    date,
+                    dismissed: false,
+                } as GuiNotificationStateEntry)
+            })
+        }
+
+        return notifications
+    },
+
     getNotificationsKlipperWarnings: (state, getters, rootState, rootGetters) => {
         const notifications: GuiNotificationStateEntry[] = []
 
diff --git a/src/store/server/actions.ts b/src/store/server/actions.ts
index b5a915735..93aeb4ce3 100644
--- a/src/store/server/actions.ts
+++ b/src/store/server/actions.ts
@@ -292,4 +292,9 @@ export const actions: ActionTree<ServerState, RootState> = {
     serviceStateChanged({ commit }, payload) {
         commit('updateServiceState', payload)
     },
+
+    addFailedInitComponent({ commit }, payload) {
+        commit('removeComponent', payload)
+        commit('addFailedInitComponent', payload)
+    },
 }
diff --git a/src/store/server/index.ts b/src/store/server/index.ts
index 643e9ce4c..1fde111a3 100644
--- a/src/store/server/index.ts
+++ b/src/store/server/index.ts
@@ -23,6 +23,7 @@ export const getDefaultState = (): ServerState => {
         klippy_message: '',
         components: [],
         failed_components: [],
+        failed_init_components: [],
         warnings: [],
         registered_directories: [],
         events: [],
diff --git a/src/store/server/mutations.ts b/src/store/server/mutations.ts
index d31d00693..da2777490 100644
--- a/src/store/server/mutations.ts
+++ b/src/store/server/mutations.ts
@@ -160,4 +160,21 @@ export const mutations: MutationTree<ServerState> = {
 
         if (state.system_info?.service_state) Vue.set(state.system_info.service_state, name, payload[name])
     },
+
+    addFailedInitComponent(state, payload) {
+        const failed_init_components = state.failed_init_components
+        if (!failed_init_components.includes(payload)) failed_init_components.push(payload)
+
+        Vue.set(state, 'failed_init_components', failed_init_components)
+    },
+
+    removeComponent(state, payload) {
+        const components = state.components
+        const index = components.indexOf(payload)
+
+        if (index === -1) return
+
+        components.splice(index, 1)
+        Vue.set(state, 'components', components)
+    },
 }
diff --git a/src/store/server/types.ts b/src/store/server/types.ts
index 03c5f0c11..69d6fe399 100644
--- a/src/store/server/types.ts
+++ b/src/store/server/types.ts
@@ -11,6 +11,7 @@ export interface ServerState {
     klippy_message: string
     components: string[]
     failed_components: string[]
+    failed_init_components: string[]
     warnings: string[]
     registered_directories: string[]
     events: ServerStateEvent[]
diff --git a/src/store/socket/actions.ts b/src/store/socket/actions.ts
index a58a016d1..30f8cf7c8 100644
--- a/src/store/socket/actions.ts
+++ b/src/store/socket/actions.ts
@@ -153,10 +153,16 @@ export const actions: ActionTree<SocketState, RootState> = {
         commit('addInitModule', payload)
     },
 
+    // remove only one module from init component like 'server/spoolman/getActiveSpoolId'
     removeInitModule({ commit }, payload: string) {
         commit('removeInitModule', payload)
     },
 
+    // remove a complete init component like 'server/spoolman'
+    removeInitComponent({ commit }, payload: string) {
+        commit('removeInitComponent', payload)
+    },
+
     reportDebug(_, payload) {
         window.console.log(payload)
     },
diff --git a/src/store/socket/mutations.ts b/src/store/socket/mutations.ts
index 61972f40f..9399eb169 100644
--- a/src/store/socket/mutations.ts
+++ b/src/store/socket/mutations.ts
@@ -61,4 +61,22 @@ export const mutations: MutationTree<SocketState> = {
         list.splice(index, 1)
         Vue.set(state, 'initializationList', list)
     },
+
+    removeInitComponent(state, payload) {
+        const list = [...state.initializationList]
+
+        // remove all components witch starts with payload
+        const indexes = list.reduce((acc: number[], item, index) => {
+            if (item.startsWith(payload)) acc.push(index)
+            return acc
+        }, [])
+
+        // stop if no items found
+        if (!indexes.length) return
+
+        // remove all items
+        indexes.forEach((index) => list.splice(index, 1))
+
+        Vue.set(state, 'initializationList', list)
+    },
 }

From af959d1c5202560e8d735490330d508c4d6c1a65 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 13 Dec 2023 21:40:14 +0100
Subject: [PATCH 9/9] feat: resize heightmap to get a better heightmap overview
 (#1683)

---
 src/pages/Heightmap.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/pages/Heightmap.vue b/src/pages/Heightmap.vue
index f193982fa..062ac7b15 100644
--- a/src/pages/Heightmap.vue
+++ b/src/pages/Heightmap.vue
@@ -89,7 +89,7 @@
                                         ref="heightmap"
                                         :option="chartOptions"
                                         :init-options="{ renderer: 'canvas' }"
-                                        style="height: 400px; width: 100%; overflow: hidden" />
+                                        style="height: 600px; width: 100%; overflow: hidden" />
                                 </v-col>
                             </v-row>
                             <v-row>
@@ -546,7 +546,7 @@ export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
                 top: 20,
                 bottom: 0,
                 itemWidth: this.isMobile ? 10 : 30,
-                itemHeight: 350,
+                itemHeight: 550,
                 precision: 3,
                 textStyle: {
                     color: this.colorVisualMap,
@@ -619,6 +619,9 @@ export default class PageHeightmap extends Mixins(BaseMixin, ControlMixin) {
                 },
                 boxWidth: 100 * this.scaleX,
                 boxDepth: 100 * this.scaleY,
+                viewControl: {
+                    distance: 150,
+                },
             },
             series: this.series,
         }