Add kiosk settings

2022-07-22 18:25:53 +00:00 · 2022-07-22 18:25:53 +00:00 · 5f2e7d7bfa
commit 5f2e7d7bfa
parent c7ce90883b
9 changed files with 152 additions and 60 deletions
--- a/custom_components/browser_mod/browser_mod.js
+++ b/custom_components/browser_mod/browser_mod.js
@ -242,6 +242,42 @@ __decorate([
        customElements.define("browser-player", BrowserPlayer);
 })();

+const TIMEOUT_ERROR = "SELECTTREE-TIMEOUT";
+async function _await_el(el) {
+    var _a;
+    if ((_a = el.localName) === null || _a === void 0 ? void 0 : _a.includes("-"))
+        await customElements.whenDefined(el.localName);
+    if (el.updateComplete)
+        await el.updateComplete;
+}
+async function _selectTree(root, path, all = false) {
+    let el = [root];
+    if (typeof path === "string") {
+        path = path.split(/(\$| )/);
+    }
+    while (path[path.length - 1] === "")
+        path.pop();
+    for (const [i, p] of path.entries()) {
+        const e = el[0];
+        if (!e)
+            return null;
+        if (!p.trim().length)
+            continue;
+        _await_el(e);
+        el = p === "$" ? [e.shadowRoot] : e.querySelectorAll(p);
+    }
+    return all ? el : el[0];
+}
+async function selectTree(root, path, all = false, timeout = 10000) {
+    return Promise.race([
+        _selectTree(root, path, all),
+        new Promise((_, reject) => setTimeout(() => reject(new Error(TIMEOUT_ERROR)), timeout)),
+    ]).catch((err) => {
+        if (!err.message || err.message !== TIMEOUT_ERROR)
+            throw err;
+        return null;
+    });
+}
 async function hass_base_el() {
    await Promise.race([
        customElements.whenDefined("home-assistant"),
@ -1838,6 +1874,20 @@ const AutoSettingsMixin = (SuperClass) => {
            if (settings.sidebarHiddenPanels) {
                localStorage.setItem("sidebarHiddenPanels", settings.sidebarHiddenPanels);
            }
+            if (settings.hideSidebar === true) {
+                selectTree(document.body, "home-assistant$home-assistant-main$app-drawer-layout").then((el) => el.style.setProperty("--app-drawer-width", "0px"));
+                selectTree(document.body, "home-assistant$home-assistant-main$app-drawer-layout app-drawer").then((el) => el.remove());
+            }
+            if (settings.hideHeader === true) {
+                customElements.whenDefined("app-header-layout").then(() => {
+                    const appHeader = customElements.get("app-header").prototype;
+                    const _attached = appHeader.attached;
+                    appHeader.attached = function () {
+                        _attached.bind(this)();
+                        this.style.setProperty("display", "none");
+                    };
+                });
+            }
        }
    };
 };
@ -1878,7 +1928,7 @@ const AutoSettingsMixin = (SuperClass) => {
  - Saved frontend settings
    X Framework
    x Save sidebar
-    - Kiosk mode
+    x Kiosk mode
    - Default panel?
    - Screensaver?
  - Tweaks
--- a/custom_components/browser_mod/browser_mod_panel.js
+++ b/custom_components/browser_mod/browser_mod_panel.js
@ -69,8 +69,6 @@ const i=(i,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,
 // Also provides ha-settings-row
 const loadDevTools = async () => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    if (customElements.get("ha-config-dashboard"))
-        return;
    await customElements.whenDefined("partial-panel-resolver");
    const ppResolver = document.createElement("partial-panel-resolver");
    const routes = ppResolver.getRoutes([
@ -101,7 +99,7 @@ class BrowserModSettingsCard extends s {
    render() {
        const level = ["browser", "user", "global"][this._selectedTab];
        return $ `
-      <ha-card header="Auto settings" outlined>
+      <ha-card header="Frontend settings" outlined>
        <div class="card-content">
          <mwc-tab-bar
            .activeIndex=${this._selectedTab}
@ -132,23 +130,48 @@ class BrowserModSettingsCard extends s {
        };
        return $ `
      <ha-settings-row>
-        <span slot="heading">Kiosk mode</span>
-        <span slot="description"> Hide sidebar and header </span>
-        Currenty: ${DESC_BOOLEAN(current.kiosk)} ${OVERRIDDEN("kiosk")}
+        <span slot="heading">Hide Sidebar</span>
+        <span slot="description">Hide the sidebar and hamburger menu</span>
+        Currenty: ${DESC_BOOLEAN(current.hideSidebar)}
+        ${OVERRIDDEN("hideSidebar")}
      </ha-settings-row>
      <ha-settings-row>
        <mwc-button
-          @click=${() => window.browser_mod.set_setting("kiosk", true, level)}
+          @click=${() => window.browser_mod.set_setting("hideSidebar", true, level)}
        >
          Enable
        </mwc-button>
        <mwc-button
-          @click=${() => window.browser_mod.set_setting("kiosk", false, level)}
+          @click=${() => window.browser_mod.set_setting("hideSidebar", false, level)}
        >
          Disable
        </mwc-button>
        <mwc-button
-          @click=${() => window.browser_mod.set_setting("kiosk", undefined, level)}
+          @click=${() => window.browser_mod.set_setting("hideSidebar", undefined, level)}
+        >
+          Clear
+        </mwc-button>
+      </ha-settings-row>
+
+      <ha-settings-row>
+        <span slot="heading">Hide Header</span>
+        <span slot="description">Hide the header on all pages</span>
+        Currenty: ${DESC_BOOLEAN(current.hideHeader)}
+        ${OVERRIDDEN("hideHeader")}
+      </ha-settings-row>
+      <ha-settings-row>
+        <mwc-button
+          @click=${() => window.browser_mod.set_setting("hideHeader", true, level)}
+        >
+          Enable
+        </mwc-button>
+        <mwc-button
+          @click=${() => window.browser_mod.set_setting("hideHeader", false, level)}
+        >
+          Disable
+        </mwc-button>
+        <mwc-button
+          @click=${() => window.browser_mod.set_setting("hideHeader", undefined, level)}
        >
          Clear
        </mwc-button>
@ -508,34 +531,18 @@ loadDevTools().then(() => {
            --app-header-border-bottom: 1px solid var(--divider-color);
            --ha-card-border-radius: var(--ha-config-card-border-radius, 8px);
          }
+          ha-config-section {
+            padding: 16px 0;
+          }
          .card-header {
            display: flex;
            justify-content: space-between;
          }
-          .card-actions {
-            display: flex;
-          }
-          .spacer {
-            flex-grow: 1;
-          }
          ha-textfield {
            width: 250px;
            display: block;
            margin-top: 8px;
          }
-          .option {
-            display: flex;
-            margin-top: 16px;
-          }
-          .option h3 {
-            flex-grow: 1;
-            margin: 0;
-          }
-          .option ha-switch {
-            margin-top: 0.25em;
-            margin-right: 7px;
-            margin-left: 0.5em;
-          }
          ha-icon-button > * {
            display: flex;
          }
--- a/custom_components/browser_mod/connection.py
+++ b/custom_components/browser_mod/connection.py
@ -1,5 +1,4 @@
 import logging
-from typing import Any
 import voluptuous as vol
 from datetime import datetime, timezone

--- a/custom_components/browser_mod/store.py
+++ b/custom_components/browser_mod/store.py
@ -11,7 +11,8 @@ _LOGGER = logging.getLogger(__name__)

@attr.s
 class Settings:
-    kiosk = attr.ib(type=bool, default=None)
+    hideSidebar = attr.ib(type=bool, default=None)
+    hideHeader = attr.ib(type=bool, default=None)
    defaultPanel = attr.ib(type=str, default=None)
    sidebarPanelOrder = attr.ib(type=list, default=None)
    sidebarHiddenPanels = attr.ib(type=list, default=None)
--- a/js/config_panel/main.ts
+++ b/js/config_panel/main.ts
@ -313,34 +313,18 @@ loadDevTools().then(() => {
            --app-header-border-bottom: 1px solid var(--divider-color);
            --ha-card-border-radius: var(--ha-config-card-border-radius, 8px);
          }
+          ha-config-section {
+            padding: 16px 0;
+          }
          .card-header {
            display: flex;
            justify-content: space-between;
          }
-          .card-actions {
-            display: flex;
-          }
-          .spacer {
-            flex-grow: 1;
-          }
          ha-textfield {
            width: 250px;
            display: block;
            margin-top: 8px;
          }
-          .option {
-            display: flex;
-            margin-top: 16px;
-          }
-          .option h3 {
-            flex-grow: 1;
-            margin: 0;
-          }
-          .option ha-switch {
-            margin-top: 0.25em;
-            margin-right: 7px;
-            margin-left: 0.5em;
-          }
          ha-icon-button > * {
            display: flex;
          }
--- a/js/config_panel/settings-card.ts
+++ b/js/config_panel/settings-card.ts
@ -19,7 +19,7 @@ class BrowserModSettingsCard extends LitElement {
  render() {
    const level = ["browser", "user", "global"][this._selectedTab];
    return html`
-      <ha-card header="Auto settings" outlined>
+      <ha-card header="Frontend settings" outlined>
        <div class="card-content">
          <mwc-tab-bar
            .activeIndex=${this._selectedTab}
@ -54,24 +54,54 @@ class BrowserModSettingsCard extends LitElement {

    return html`
      <ha-settings-row>
-        <span slot="heading">Kiosk mode</span>
-        <span slot="description"> Hide sidebar and header </span>
-        Currenty: ${DESC_BOOLEAN(current.kiosk)} ${OVERRIDDEN("kiosk")}
+        <span slot="heading">Hide Sidebar</span>
+        <span slot="description">Hide the sidebar and hamburger menu</span>
+        Currenty: ${DESC_BOOLEAN(current.hideSidebar)}
+        ${OVERRIDDEN("hideSidebar")}
      </ha-settings-row>
      <ha-settings-row>
        <mwc-button
-          @click=${() => window.browser_mod.set_setting("kiosk", true, level)}
+          @click=${() =>
+            window.browser_mod.set_setting("hideSidebar", true, level)}
        >
          Enable
        </mwc-button>
        <mwc-button
-          @click=${() => window.browser_mod.set_setting("kiosk", false, level)}
+          @click=${() =>
+            window.browser_mod.set_setting("hideSidebar", false, level)}
        >
          Disable
        </mwc-button>
        <mwc-button
          @click=${() =>
-            window.browser_mod.set_setting("kiosk", undefined, level)}
+            window.browser_mod.set_setting("hideSidebar", undefined, level)}
+        >
+          Clear
+        </mwc-button>
+      </ha-settings-row>
+
+      <ha-settings-row>
+        <span slot="heading">Hide Header</span>
+        <span slot="description">Hide the header on all pages</span>
+        Currenty: ${DESC_BOOLEAN(current.hideHeader)}
+        ${OVERRIDDEN("hideHeader")}
+      </ha-settings-row>
+      <ha-settings-row>
+        <mwc-button
+          @click=${() =>
+            window.browser_mod.set_setting("hideHeader", true, level)}
+        >
+          Enable
+        </mwc-button>
+        <mwc-button
+          @click=${() =>
+            window.browser_mod.set_setting("hideHeader", false, level)}
+        >
+          Disable
+        </mwc-button>
+        <mwc-button
+          @click=${() =>
+            window.browser_mod.set_setting("hideHeader", undefined, level)}
        >
          Clear
        </mwc-button>
--- a/js/helpers.ts
+++ b/js/helpers.ts
@ -89,8 +89,6 @@ export const loadHaForm = async () => {
 // Loads in ha-config-dashboard which is used to copy styling
 // Also provides ha-settings-row
 export const loadDevTools = async () => {
-  if (customElements.get("ha-config-dashboard")) return;
-
  await customElements.whenDefined("partial-panel-resolver");
  const ppResolver = document.createElement("partial-panel-resolver");
  const routes = (ppResolver as any).getRoutes([
--- a/js/plugin/auto-settings.ts
+++ b/js/plugin/auto-settings.ts
@ -1,3 +1,5 @@
+import { selectTree } from "../helpers";
+
 export const AutoSettingsMixin = (SuperClass) => {
  return class AutoSettingsMixinClass extends SuperClass {
    constructor() {
@ -20,6 +22,27 @@ export const AutoSettingsMixin = (SuperClass) => {
          settings.sidebarHiddenPanels
        );
      }
+
+      if (settings.hideSidebar === true) {
+        selectTree(
+          document.body,
+          "home-assistant$home-assistant-main$app-drawer-layout"
+        ).then((el) => el.style.setProperty("--app-drawer-width", "0px"));
+        selectTree(
+          document.body,
+          "home-assistant$home-assistant-main$app-drawer-layout app-drawer"
+        ).then((el) => el.remove());
+      }
+      if (settings.hideHeader === true) {
+        customElements.whenDefined("app-header-layout").then(() => {
+          const appHeader = customElements.get("app-header").prototype;
+          const _attached = appHeader.attached;
+          appHeader.attached = function () {
+            _attached.bind(this)();
+            this.style.setProperty("display", "none");
+          };
+        });
+      }
    }
  };
 };
--- a/js/plugin/main.ts
+++ b/js/plugin/main.ts
@ -52,7 +52,7 @@ import { AutoSettingsMixin } from "./auto-settings";
  - Saved frontend settings
    X Framework
    x Save sidebar
-    - Kiosk mode
+    x Kiosk mode
    - Default panel?
    - Screensaver?
  - Tweaks