Template titles

custom_components/browser_mod/browser_mod.js

@@ -1863,8 +1863,15 @@ const AutoSettingsMixin = (SuperClass) => {
     return class AutoSettingsMixinClass extends SuperClass {
         constructor() {
             super();
+            this.__currentTitle = undefined;
             this._auto_settings_setup();
             this.addEventListener("browser-mod-config-update", () => this._auto_settings_setup());
+            window.addEventListener("location-changed", () => {
+                this._updateTitle();
+                setTimeout(() => this._updateTitle(), 500);
+                setTimeout(() => this._updateTitle(), 1000);
+                setTimeout(() => this._updateTitle(), 5000);
+            });
         }
         async _auto_settings_setup() {
             await this.connectionPromise;
@@ -1908,7 +1915,20 @@ const AutoSettingsMixin = (SuperClass) => {
                 })();
             }
             // Title template
-            if (settings.titleTemplate !== undefined) ;
+            if (settings.titleTemplate !== undefined) {
+                (async () => {
+                    if (this._titleTemplateSubscription) {
+                        this._titleTemplateSubscription();
+                    }
+                    this._titleTemplateSubscription = undefined;
+                    this._titleTemplateSubscription =
+                        await this.connection.subscribeMessage(this._updateTitle.bind(this), {
+                            type: "render_template",
+                            template: settings.titleTemplate,
+                            variables: {},
+                        });
+                })();
+            }
         }
         get _currentFavicon() {
             const link = document.head.querySelector("link[rel~='icon']");
@@ -1927,6 +1947,16 @@ const AutoSettingsMixin = (SuperClass) => {
             link.href = result;
             window.browser_mod.fireEvent("browser-mod-favicon-update");
         }
+        get _currentTitle() {
+            return this.__currentTitle;
+        }
+        _updateTitle(data = undefined) {
+            if (data)
+                this.__currentTitle = data.result;
+            if (this.__currentTitle)
+                document.title = this.__currentTitle;
+            window.browser_mod.fireEvent("browser-mod-favicon-update");
+        }
     };
 };
 
@@ -1967,12 +1997,13 @@ const AutoSettingsMixin = (SuperClass) => {
     X Framework
     x Save sidebar
     x Kiosk mode
-    - Default panel?
+    - Default panel
     - Screensaver?
     x Favicon templates
-    - Title templates
+    x Title templates
   - Tweaks
     - Quickbar tweaks (ctrl+enter)?
+    - Card-mod preload
   - Video player?
   - Media_seek
   - Screensavers

custom_components/browser_mod/browser_mod_panel.js

@@ -119,8 +119,9 @@ class BrowserModSettingsCard extends s {
         return $ `
       <ha-card header="Frontend settings" outlined>
         <div class="card-content">
+        <ha-alert alert-type="warning">
           <p>
-            Please note: Those settings severely change the way the Home
+            Please note: The settings in this section severely change the way the Home
             Assistant frontend works and looks. It is very easy to forget that
             you made a setting here when you switch devices or user.
           </p>
@@ -130,6 +131,7 @@ class BrowserModSettingsCard extends s {
             caches. Failure to do so means you risk wasting a lot of peoples
             time, and you will be severly and rightfully ridiculed.
           </p>
+          </ha-alert>
           <p>
           Global settings are applied for all users and browsers.</br>
           User settings are applied to the current user and overrides any Global settings.</br>
@@ -189,10 +191,32 @@ class BrowserModSettingsCard extends s {
 
         <div class="separator"></div>
 
+        <ha-settings-row>
+          <span slot="heading">Title template</span>
+          ${OVERRIDDEN("titleTemplate")}
+        </ha-settings-row>
+        <ha-code-editor
+          .hass=${this.hass}
+          .value=${current.titleTemplate}
+          @value-changed=${(ev) => {
+            const tpl = ev.detail.value || undefined;
+            window.browser_mod.set_setting("titleTemplate", tpl, level);
+        }}
+        ></ha-code-editor>
+        <ha-settings-row>
+          <mwc-button
+            @click=${() => window.browser_mod.set_setting("titleTemplate", undefined, level)}
+          >
+            Clear
+          </mwc-button>
+        </ha-settings-row>
+
+        <div class="separator"></div>
+
         <ha-settings-row>
           <span slot="heading">Hide Sidebar</span>
           <span slot="description">Hide the sidebar and hamburger menu</span>
-          Currenty: ${DESC_BOOLEAN(current.hideSidebar)}
+          Currently: ${DESC_BOOLEAN(current.hideSidebar)}
           ${OVERRIDDEN("hideSidebar")}
         </ha-settings-row>
         <ha-settings-row>
@@ -218,7 +242,7 @@ class BrowserModSettingsCard extends s {
         <ha-settings-row>
           <span slot="heading">Hide Header</span>
           <span slot="description">Hide the header on all pages</span>
-          Currenty: ${DESC_BOOLEAN(current.hideHeader)}
+          Currently: ${DESC_BOOLEAN(current.hideHeader)}
           ${OVERRIDDEN("hideHeader")}
         </ha-settings-row>
         <ha-settings-row>
@@ -246,7 +270,7 @@ class BrowserModSettingsCard extends s {
           <span slot="description"
             >Order and visibility of sidebar buttons</span
           >
-          Currenty: ${DESC_SET_UNSET(current.sidebarPanelOrder)}
+          Currently: ${DESC_SET_UNSET(current.sidebarPanelOrder)}
           ${OVERRIDDEN("sidebarPanelOrder")}
         </ha-settings-row>
         <ha-settings-row>

js/config_panel/settings-card.ts

@@ -27,8 +27,9 @@ class BrowserModSettingsCard extends LitElement {
     return html`
       <ha-card header="Frontend settings" outlined>
         <div class="card-content">
+        <ha-alert alert-type="warning">
           <p>
-            Please note: Those settings severely change the way the Home
+            Please note: The settings in this section severely change the way the Home
             Assistant frontend works and looks. It is very easy to forget that
             you made a setting here when you switch devices or user.
           </p>
@@ -38,6 +39,7 @@ class BrowserModSettingsCard extends LitElement {
             caches. Failure to do so means you risk wasting a lot of peoples
             time, and you will be severly and rightfully ridiculed.
           </p>
+          </ha-alert>
           <p>
           Global settings are applied for all users and browsers.</br>
           User settings are applied to the current user and overrides any Global settings.</br>
@@ -106,10 +108,33 @@ class BrowserModSettingsCard extends LitElement {
 
         <div class="separator"></div>
 
+        <ha-settings-row>
+          <span slot="heading">Title template</span>
+          ${OVERRIDDEN("titleTemplate")}
+        </ha-settings-row>
+        <ha-code-editor
+          .hass=${this.hass}
+          .value=${current.titleTemplate}
+          @value-changed=${(ev) => {
+            const tpl = ev.detail.value || undefined;
+            window.browser_mod.set_setting("titleTemplate", tpl, level);
+          }}
+        ></ha-code-editor>
+        <ha-settings-row>
+          <mwc-button
+            @click=${() =>
+              window.browser_mod.set_setting("titleTemplate", undefined, level)}
+          >
+            Clear
+          </mwc-button>
+        </ha-settings-row>
+
+        <div class="separator"></div>
+
         <ha-settings-row>
           <span slot="heading">Hide Sidebar</span>
           <span slot="description">Hide the sidebar and hamburger menu</span>
-          Currenty: ${DESC_BOOLEAN(current.hideSidebar)}
+          Currently: ${DESC_BOOLEAN(current.hideSidebar)}
           ${OVERRIDDEN("hideSidebar")}
         </ha-settings-row>
         <ha-settings-row>
@@ -138,7 +163,7 @@ class BrowserModSettingsCard extends LitElement {
         <ha-settings-row>
           <span slot="heading">Hide Header</span>
           <span slot="description">Hide the header on all pages</span>
-          Currenty: ${DESC_BOOLEAN(current.hideHeader)}
+          Currently: ${DESC_BOOLEAN(current.hideHeader)}
           ${OVERRIDDEN("hideHeader")}
         </ha-settings-row>
         <ha-settings-row>
@@ -169,7 +194,7 @@ class BrowserModSettingsCard extends LitElement {
           <span slot="description"
             >Order and visibility of sidebar buttons</span
           >
-          Currenty: ${DESC_SET_UNSET(current.sidebarPanelOrder)}
+          Currently: ${DESC_SET_UNSET(current.sidebarPanelOrder)}
           ${OVERRIDDEN("sidebarPanelOrder")}
         </ha-settings-row>
         <ha-settings-row>

js/plugin/auto-settings.ts

@@ -4,6 +4,7 @@ export const AutoSettingsMixin = (SuperClass) => {
   return class AutoSettingsMixinClass extends SuperClass {
     _faviconTemplateSubscription;
     _titleTemplateSubscription;
+    __currentTitle = undefined;
 
     constructor() {
       super();
@@ -12,6 +13,13 @@ export const AutoSettingsMixin = (SuperClass) => {
       this.addEventListener("browser-mod-config-update", () =>
         this._auto_settings_setup()
       );
+
+      window.addEventListener("location-changed", () => {
+        this._updateTitle();
+        setTimeout(() => this._updateTitle(), 500);
+        setTimeout(() => this._updateTitle(), 1000);
+        setTimeout(() => this._updateTitle(), 5000);
+      });
     }
 
     async _auto_settings_setup() {
@@ -72,6 +80,21 @@ export const AutoSettingsMixin = (SuperClass) => {
 
       // Title template
       if (settings.titleTemplate !== undefined) {
+        (async () => {
+          if (this._titleTemplateSubscription) {
+            this._titleTemplateSubscription();
+          }
+          this._titleTemplateSubscription = undefined;
+          this._titleTemplateSubscription =
+            await this.connection.subscribeMessage(
+              this._updateTitle.bind(this),
+              {
+                type: "render_template",
+                template: settings.titleTemplate,
+                variables: {},
+              }
+            );
+        })();
       }
     }
 
@@ -93,5 +116,15 @@ export const AutoSettingsMixin = (SuperClass) => {
       link.href = result;
       window.browser_mod.fireEvent("browser-mod-favicon-update");
     }
+
+    get _currentTitle() {
+      return this.__currentTitle;
+    }
+
+    _updateTitle(data = undefined) {
+      if (data) this.__currentTitle = data.result;
+      if (this.__currentTitle) document.title = this.__currentTitle;
+      window.browser_mod.fireEvent("browser-mod-favicon-update");
+    }
   };
 };

js/plugin/main.ts

@@ -53,12 +53,13 @@ import { AutoSettingsMixin } from "./auto-settings";
     X Framework
     x Save sidebar
     x Kiosk mode
-    - Default panel?
+    - Default panel
     - Screensaver?
     x Favicon templates
-    - Title templates
+    x Title templates
   - Tweaks
     - Quickbar tweaks (ctrl+enter)?
+    - Card-mod preload
   - Video player?
   - Media_seek
   - Screensavers