fix: fix browser title, when printer is off (#1300)

src/App.vue

@@ -66,6 +66,8 @@ import TheManualProbeDialog from '@/components/dialogs/TheManualProbeDialog.vue'
 import TheBedScrewsDialog from '@/components/dialogs/TheBedScrewsDialog.vue'
 import TheScrewsTiltAdjustDialog from '@/components/dialogs/TheScrewsTiltAdjustDialog.vue'
 
+Component.registerHooks(['metaInfo'])
+
 @Component({
     components: {
         TheTimelapseRenderingSnackbar,
@@ -81,14 +83,19 @@ import TheScrewsTiltAdjustDialog from '@/components/dialogs/TheScrewsTiltAdjustD
         TheBedScrewsDialog,
         TheScrewsTiltAdjustDialog,
     },
-    metaInfo() {
-        const title = this.$store.getters['getTitle']
-        return {
-            titleTemplate: () => title,
-        }
-    },
 })
 export default class App extends Mixins(BaseMixin) {
+    public metaInfo(): any {
+        let title = this.$store.getters['getTitle']
+
+        if (this.isPrinterPowerOff) title = this.$t('App.Titles.PrinterOff')
+
+        return {
+            title,
+            titleTemplate: '%s',
+        }
+    }
+
     get title(): string {
         return this.$store.getters['getTitle']
     }

src/locales/de.json

@@ -52,6 +52,7 @@
             "Complete": "Fertiggestellt - {filename}",
             "Error": "FEHLER",
             "Pause": "Druck pausiert",
+            "PrinterOff": "Drucker AUS",
             "Printing": "{percent}% Drucken - {filename}",
             "PrintingETA": "{percent}% Drucken - ETA: {eta} - {filename}"
         },

src/locales/en.json

@@ -52,6 +52,7 @@
             "Complete": "Complete - {filename}",
             "Error": "ERROR",
             "Pause": "Pause Print",
+            "PrinterOff": "Printer OFF",
             "Printing": "{percent}% Printing - {filename}",
             "PrintingETA": "{percent}% Printing - ETA: {eta} - {filename}"
         },

src/store/getters.ts

@@ -11,35 +11,41 @@ export const getters: GetterTree<RootState, any> = {
     },
 
     getTitle: (state, getters) => {
-        if (state.socket?.isConnected && state.printer) {
+        if (!state.socket?.isConnected) return 'Mainsail'
-            let printer_state = state.printer?.print_stats?.state ?? ''
+        if (state.server?.klippy_state !== 'ready') return i18n.t('App.Titles.Error')
 
-            if (state.printer['gcode_macro TIMELAPSE_TAKE_FRAME']?.is_paused && printer_state === 'paused')
+        // get printer_state
+        let printer_state = state.printer?.print_stats?.state ?? ''
+        // skip pause, if timelapse is active
+        if (state.printer && state.printer['gcode_macro TIMELAPSE_TAKE_FRAME']?.is_paused && printer_state === 'paused')
             printer_state = 'printing'
 
-            if (state.server?.klippy_state !== 'ready') return i18n.t('App.Titles.Error')
+        // return pause title
-            else if (printer_state === 'paused') return i18n.t('App.Titles.Pause')
+        if (printer_state === 'paused') return i18n.t('App.Titles.Pause')
-            else if (printer_state === 'printing') {
+
+        // return complete title
+        if (state.printer?.print_stats?.state === 'complete')
+            return i18n.t('App.Titles.Complete', { filename: state.printer.print_stats.filename })
+
+        // return printing title
+        if (printer_state === 'printing') {
             const eta = getters['printer/getEstimatedTimeETAFormat']
+            const percent = (getters['printer/getPrintPercent'] * 100).toFixed(0)
 
             if (eta !== '--')
                 return i18n.t('App.Titles.PrintingETA', {
-                        percent: (getters['printer/getPrintPercent'] * 100).toFixed(0),
+                    percent: percent,
-                        filename: state.printer.print_stats?.filename,
+                    filename: state.printer?.print_stats?.filename,
                     eta,
                 })
-                else
-                    return i18n.t('App.Titles.Printing', {
-                        percent: (getters['printer/getPrintPercent'] * 100).toFixed(0),
-                        filename: state.printer.print_stats?.filename,
-                    })
-            } else if (state.printer?.print_stats?.state === 'complete')
-                return i18n.t('App.Titles.Complete', { filename: state.printer.print_stats.filename })
 
-            return state.gui?.general.printername ?? state.printer?.hostname ?? 'Mainsail'
+            return i18n.t('App.Titles.Printing', {
+                percent: percent,
+                filename: state.printer?.print_stats?.filename,
+            })
         }
 
-        return 'Mainsail'
+        return state.gui?.general.printername ?? state.printer?.hostname ?? 'Mainsail'
     },
 
     getDependencies: (state) => {