Favicon templates

js/plugin/auto-settings.ts

@@ -2,10 +2,16 @@ import { selectTree } from "../helpers";
 
 export const AutoSettingsMixin = (SuperClass) => {
   return class AutoSettingsMixinClass extends SuperClass {
+    _faviconTemplateSubscription;
+    _titleTemplateSubscription;
+
     constructor() {
       super();
 
       this._auto_settings_setup();
+      this.addEventListener("browser-mod-config-update", () =>
+        this._auto_settings_setup()
+      );
     }
 
     async _auto_settings_setup() {
@@ -13,6 +19,7 @@ export const AutoSettingsMixin = (SuperClass) => {
 
       const settings = this.settings;
 
+      // Sidebar panel order and hiding
       if (settings.sidebarPanelOrder) {
         localStorage.setItem("sidebarPanelOrder", settings.sidebarPanelOrder);
       }
@@ -23,6 +30,7 @@ export const AutoSettingsMixin = (SuperClass) => {
         );
       }
 
+      // Hide sidebar
       if (settings.hideSidebar === true) {
         selectTree(
           document.body,
@@ -33,6 +41,8 @@ export const AutoSettingsMixin = (SuperClass) => {
           "home-assistant$home-assistant-main$app-drawer-layout app-drawer"
         ).then((el) => el.remove());
       }
+
+      // Hide header
       if (settings.hideHeader === true) {
         customElements.whenDefined("app-header-layout").then(() => {
           const appHeader = customElements.get("app-header").prototype;
@@ -43,6 +53,45 @@ export const AutoSettingsMixin = (SuperClass) => {
           };
         });
       }
+
+      // Favicon template
+      if (settings.faviconTemplate !== undefined) {
+        (async () => {
+          if (this._faviconTemplateSubscription) {
+            this._faviconTemplateSubscription();
+          }
+          this._faviconTemplateSubscription = undefined;
+          this._faviconTemplateSubscription =
+            await this.connection.subscribeMessage(this._updateFavicon, {
+              type: "render_template",
+              template: settings.faviconTemplate,
+              variables: {},
+            });
+        })();
+      }
+
+      // Title template
+      if (settings.titleTemplate !== undefined) {
+      }
+    }
+
+    get _currentFavicon() {
+      const link: any = document.head.querySelector("link[rel~='icon']");
+      return link?.href;
+    }
+
+    _updateFavicon({ result }) {
+      // TEMP: Template for testing
+      /*
+        {% if is_state("light.bed_light", "on") %}
+        /local/workspace/test/icons/green.png
+        {% else %}
+        /local/workspace/test/icons/red.png
+        {% endif %}
+      */
+      const link: any = document.head.querySelector("link[rel~='icon']");
+      link.href = result;
+      window.browser_mod.fireEvent("browser-mod-favicon-update");
     }
   };
 };

js/plugin/main.ts

@@ -55,9 +55,9 @@ import { AutoSettingsMixin } from "./auto-settings";
     x Kiosk mode
     - Default panel?
     - Screensaver?
-  - Tweaks
-    - Favicon templates
+    x Favicon templates
     - Title templates
+  - Tweaks
     - Quickbar tweaks (ctrl+enter)?
   - Video player?
   - Media_seek