From 67529032dcca2961ee22c64a10b38ebb30fa0716 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= Date: Fri, 22 Jul 2022 23:34:52 +0000 Subject: [PATCH] Refactoring config panel --- custom_components/browser_mod/browser_mod.js | 2 +- .../browser_mod/browser_mod_panel.js | 587 ++++++++++-------- js/config_panel/browser-settings-card.ts | 253 ++++++++ ...ings-card.ts => frontend-settings-card.ts} | 7 +- js/config_panel/main.ts | 291 +-------- js/config_panel/registered-browsers-card.ts | 75 +++ ...{auto-settings.ts => frontend-settings.ts} | 0 js/plugin/main.ts | 4 +- 8 files changed, 667 insertions(+), 552 deletions(-) create mode 100644 js/config_panel/browser-settings-card.ts rename js/config_panel/{settings-card.ts => frontend-settings-card.ts} (98%) create mode 100644 js/config_panel/registered-browsers-card.ts rename js/plugin/{auto-settings.ts => frontend-settings.ts} (100%) diff --git a/custom_components/browser_mod/browser_mod.js b/custom_components/browser_mod/browser_mod.js index fdb081e..2ecb9fd 100644 --- a/custom_components/browser_mod/browser_mod.js +++ b/custom_components/browser_mod/browser_mod.js @@ -1991,7 +1991,7 @@ const AutoSettingsMixin = (SuperClass) => { x javascript eval - toast? x Redesign services to target devices - - frontend editor for popup cards + x frontend editor for popup cards - also screensavers - Saved frontend settings X Framework diff --git a/custom_components/browser_mod/browser_mod_panel.js b/custom_components/browser_mod/browser_mod_panel.js index 7b487f1..7274c8e 100644 --- a/custom_components/browser_mod/browser_mod_panel.js +++ b/custom_components/browser_mod/browser_mod_panel.js @@ -101,8 +101,312 @@ const loadDeveloperToolsTemplate = async () => { await customElements.whenDefined("developer-tools-template"); }; +class BrowserModRegisteredBrowsersCard$1 extends s { + constructor() { + super(...arguments); + this.dirty = false; + } + toggleRegister() { + var _a; + if (!((_a = window.browser_mod) === null || _a === void 0 ? void 0 : _a.connected)) + return; + window.browser_mod.registered = !window.browser_mod.registered; + this.dirty = true; + } + changeBrowserID(ev) { + window.browser_mod.browserID = ev.target.value; + this.dirty = true; + } + toggleCameraEnabled() { + window.browser_mod.cameraEnabled = !window.browser_mod.cameraEnabled; + this.dirty = true; + } + firstUpdated() { + window.browser_mod.addEventListener("browser-mod-config-update", () => this.requestUpdate()); + } + render() { + var _a, _b, _c, _d, _e; + return $ ` + +

+
This Browser
+ ${((_a = window.browser_mod) === null || _a === void 0 ? void 0 : _a.connected) + ? $ ` + + ` + : $ ` + + `} +

+
+ ${this.dirty + ? $ ` + + It is strongly recommended to refresh your browser window + after changing any of the settings in this box. + + ` + : ""} +
+
+ + Enable + Enable this browser as a Device in Home Assistant + + + + + BrowserID + A unique identifier for this browser-device combination. + + + + ${((_d = window.browser_mod) === null || _d === void 0 ? void 0 : _d.registered) + ? $ ` + ${this._renderSuspensionAlert()} + + Enable camera + Get camera input from this browser (hardware + dependent) + + + ${this._renderInteractionAlert()} + ${this._renderFKBSettingsInfo()} + ` + : ""} +
+ + `; + } + _renderSuspensionAlert() { + if (!this.hass.suspendWhenHidden) + return $ ``; + return $ ` + + Home Assistant will close the websocket connection to the server + automatically after 5 minutes of inactivity.

+ While decreasing network trafic and memory usage, this may cause + problems for browser_mod operation. +

+ If you find that some things stop working for this Browser after a time, + try going to your + Profile Settings + and disabling the option + "${this.hass.localize("ui.panel.profile.suspend.header") || + "Automatically close connection"}". + + `; + } + _renderInteractionAlert() { + return $ ` + + For security reasons many browsers require the user to interact with a + webpage before allowing audio playback or video capture. This may affect + the + media_player and camera components of Browser + Mod.

+ + If you ever see a + symbol at the bottom right + corner of the screen, please tap or click anywhere on the page. This + should allow Browser Mod to work again. + + `; + } + _renderFKBSettingsInfo() { + var _a, _b; + if (!((_a = window.browser_mod) === null || _a === void 0 ? void 0 : _a.fully) || !this.getFullySettings()) + return $ ``; + return $ ` + ${((_b = window.browser_mod) === null || _b === void 0 ? void 0 : _b.fully) && this.getFullySettings() + ? $ ` + You are using FullyKiosk Browser. It is recommended to enable the + following settings: + + ` + : ""} + `; + } + getFullySettings() { + if (!window.browser_mod.fully) + return null; + const retval = []; + const wcs = []; + // Web Content Settings + // Autoplay Videos + if (window.fully.getBooleanSetting("autoplayVideos") !== "true") + wcs.push($ `
  • Autoplay Videos
    • `); + // Autoplay Audio + if (window.fully.getBooleanSetting("autoplayAudio") !== "true") + wcs.push($ `
  • Autoplay Audio
    • `); + // Enable Webcam Access (PLUS) + if (window.fully.getBooleanSetting("webcamAccess") !== "true") + wcs.push($ `
  • Enable Webcam Access (PLUS)
    • `); + if (wcs.length !== 0) { + retval.push($ `
  • Web Content Settings
    • + `); + } + // Advanced Web Settings + // Enable JavaScript Interface (PLUS) + if (window.fully.getBooleanSetting("websiteIntegration") !== "true") + retval.push($ `
  • Advanced Web Settings
    • + `); + // Device Management + // Keep Screen On + if (window.fully.getBooleanSetting("keepScreenOn") !== "true") + retval.push($ `
  • Device Management
    • + `); + // Power Settings + // Prevent from Sleep while Screen Off + if (window.fully.getBooleanSetting("preventSleepWhileScreenOff") !== "true") + retval.push($ `
  • Power Settings
    • + `); + const md = []; + // Motion Detection (PLUS) + // Enable Visual Motion Detection + if (window.fully.getBooleanSetting("motionDetection") !== "true") + md.push($ `
  • Enable Visual Motion Detection
    • `); + // Turn Screen On on Motion + if (window.fully.getBooleanSetting("screenOnOnMotion") !== "true") + md.push($ `
  • Turn Screen On on Motion
    • `); + // Exit Screensaver on Motion + if (window.fully.getBooleanSetting("stopScreensaverOnMotion") !== "true") + md.push($ `
  • Exit Screensaver on Motion
    • `); + if (md.length !== 0) { + retval.push($ `
  • Motion Detection (PLUS)
    • + `); + } + // Remote Administration (PLUS) + // Enable Remote Administration + if (window.fully.getBooleanSetting("remoteAdmin") !== "true") + retval.push($ `
  • Remote Administration (PLUS)
    • + `); + return retval.length ? retval : null; + } + static get styles() { + return r$2 ` + .card-header { + display: flex; + justify-content: space-between; + } + ha-textfield { + width: 250px; + display: block; + margin-top: 8px; + } + `; + } +} +__decorate([ + e() +], BrowserModRegisteredBrowsersCard$1.prototype, "hass", void 0); +__decorate([ + e() +], BrowserModRegisteredBrowsersCard$1.prototype, "dirty", void 0); +customElements.define("browser-mod-browser-settings-card", BrowserModRegisteredBrowsersCard$1); + +class BrowserModRegisteredBrowsersCard extends s { + firstUpdated() { + window.browser_mod.addEventListener("browser-mod-config-update", () => this.requestUpdate()); + } + unregister_browser(ev) { + const browserID = ev.currentTarget.browserID; + const unregisterCallback = () => { + console.log(browserID, window.browser_mod.browserID); + if (browserID === window.browser_mod.browserID) { + console.log("Unregister self"); + window.browser_mod.registered = false; + } + else { + window.browser_mod.connection.sendMessage({ + type: "browser_mod/unregister", + browserID, + }); + } + }; + window.browser_mod.showPopup("Unregister browser", `Are you sure you want to unregister browser ${browserID}?`, { + right_button: "Yes", + right_button_action: unregisterCallback, + left_button: "No", + }); + } + render() { + return $ ` + +
    + ${Object.keys(window.browser_mod.browsers).map((d) => $ ` + ${d} + + Last connected: + + + + + + `)} +
    +     + `; + } + static get styles() { + return r$2 ` + ha-icon-button > * { + display: flex; + } + `; + } +} +__decorate([ + e() +], BrowserModRegisteredBrowsersCard.prototype, "hass", void 0); +customElements.define("browser-mod-registered-browsers-card", BrowserModRegisteredBrowsersCard); + loadDeveloperToolsTemplate(); -class BrowserModSettingsCard extends s { +class BrowserModFrontendSettingsCard extends s { constructor() { super(...arguments); this._selectedTab = 0; @@ -321,128 +625,18 @@ class BrowserModSettingsCard extends s { } __decorate([ e() -], BrowserModSettingsCard.prototype, "hass", void 0); +], BrowserModFrontendSettingsCard.prototype, "hass", void 0); __decorate([ t() -], BrowserModSettingsCard.prototype, "_selectedTab", void 0); -customElements.define("browser-mod-settings-card", BrowserModSettingsCard); +], BrowserModFrontendSettingsCard.prototype, "_selectedTab", void 0); +customElements.define("browser-mod-frontend-settings-card", BrowserModFrontendSettingsCard); -const bmWindow = window; loadConfigDashboard().then(() => { class BrowserModPanel extends s { - constructor() { - super(...arguments); - this.dirty = false; - } - toggleRegister() { - var _a; - if (!((_a = window.browser_mod) === null || _a === void 0 ? void 0 : _a.connected)) - return; - window.browser_mod.registered = !window.browser_mod.registered; - this.dirty = true; - } - changeBrowserID(ev) { - window.browser_mod.browserID = ev.target.value; - this.dirty = true; - } - toggleCameraEnabled() { - window.browser_mod.cameraEnabled = !window.browser_mod.cameraEnabled; - this.dirty = true; - } - unregister_browser(ev) { - const browserID = ev.currentTarget.browserID; - const unregisterCallback = () => { - console.log(browserID, window.browser_mod.browserID); - if (browserID === window.browser_mod.browserID) { - console.log("Unregister self"); - window.browser_mod.registered = false; - } - else { - window.browser_mod.connection.sendMessage({ - type: "browser_mod/unregister", - browserID, - }); - } - }; - window.browser_mod.showPopup("Unregister browser", `Are you sure you want to unregister browser ${browserID}?`, { - right_button: "Yes", - right_button_action: unregisterCallback, - left_button: "No", - }); - } firstUpdated() { window.browser_mod.addEventListener("browser-mod-config-update", () => this.requestUpdate()); } - getFullySettings() { - if (!window.browser_mod.fully) - return null; - const retval = []; - const wcs = []; - // Web Content Settings - // Autoplay Videos - if (window.fully.getBooleanSetting("autoplayVideos") !== "true") - wcs.push($ `
  • Autoplay Videos
    • `); - // Autoplay Audio - if (window.fully.getBooleanSetting("autoplayAudio") !== "true") - wcs.push($ `
  • Autoplay Audio
    • `); - // Enable Webcam Access (PLUS) - if (window.fully.getBooleanSetting("webcamAccess") !== "true") - wcs.push($ `
  • Enable Webcam Access (PLUS)
    • `); - if (wcs.length !== 0) { - retval.push($ `
  • Web Content Settings
    • - `); - } - // Advanced Web Settings - // Enable JavaScript Interface (PLUS) - if (window.fully.getBooleanSetting("websiteIntegration") !== "true") - retval.push($ `
  • Advanced Web Settings
    • - `); - // Device Management - // Keep Screen On - if (window.fully.getBooleanSetting("keepScreenOn") !== "true") - retval.push($ `
  • Device Management
    • - `); - // Power Settings - // Prevent from Sleep while Screen Off - if (window.fully.getBooleanSetting("preventSleepWhileScreenOff") !== "true") - retval.push($ `
  • Power Settings
    • - `); - const md = []; - // Motion Detection (PLUS) - // Enable Visual Motion Detection - if (window.fully.getBooleanSetting("motionDetection") !== "true") - md.push($ `
  • Enable Visual Motion Detection
    • `); - // Turn Screen On on Motion - if (window.fully.getBooleanSetting("screenOnOnMotion") !== "true") - md.push($ `
  • Turn Screen On on Motion
    • `); - // Exit Screensaver on Motion - if (window.fully.getBooleanSetting("stopScreensaverOnMotion") !== "true") - md.push($ `
  • Exit Screensaver on Motion
    • `); - if (md.length !== 0) { - retval.push($ `
  • Motion Detection (PLUS)
    • - `); - } - // Remote Administration (PLUS) - // Enable Remote Administration - if (window.fully.getBooleanSetting("remoteAdmin") !== "true") - retval.push($ `
  • Remote Administration (PLUS)
    • - `); - return retval.length ? retval : null; - } render() { - var _a, _b, _c, _d, _e, _f; return $ ` @@ -456,147 +650,17 @@ loadConfigDashboard().then(() => { - -

    -
    This Browser
    - ${((_a = bmWindow.browser_mod) === null || _a === void 0 ? void 0 : _a.connected) - ? $ ` - - ` - : $ ` - - `} -

    -
    -

    Settings that apply to this browser.

    - ${this.dirty - ? $ ` - - It is strongly recommended to refresh your browser - window after changing any of the settings in this box. - - ` - : ""} -
    -
    - - Enable - Enable this browser as a Device in Home Assistant - - - - - BrowserID - A unique identifier for this browser-device - combination. - - - - ${((_d = window.browser_mod) === null || _d === void 0 ? void 0 : _d.registered) - ? $ ` - ${this.hass.suspendWhenHidden - ? $ ` - Home Assistant will close the websocket connection - to the server automatically after 5 minutes of - inactivity.

    - While decreasing network trafic and memory usage, - this may cause problems for browser_mod operation. -

    - If you find that some things stop working for this - Browser after a time, try going to your - Profile Settings - and disabling the option - "${this.hass.localize("ui.panel.profile.suspend.header") || "Automatically close connection"}". -     ` - : ""} - - Enable camera - Get camera input from this browser (hardware - dependent) - - - - For security reasons many browsers require the user to - interact with a webpage before allowing audio playback - or video capture. This may affect the - media_player and - camera components of Browser Mod. -

    - - If you ever see a - symbol at the - bottom right corner of the screen, please tap or click - anywhere on the page. This should allow Browser Mod to - work again. -     - ${((_f = window.browser_mod) === null || _f === void 0 ? void 0 : _f.fully) && this.getFullySettings() - ? $ ` - You are using FullyKiosk Browser. It is recommended - to enable the following settings: -
      - ${this.getFullySettings()} -
    -     ` - : ""} - ` - : ""} -
    -     - - -
    - ${Object.keys(window.browser_mod.browsers).map((d) => $ ` - ${d} - - Last connected: - - - - - - `)} -
    -     - - + > + + + +     `; @@ -615,18 +679,6 @@ loadConfigDashboard().then(() => { ha-config-section { padding: 16px 0; } - .card-header { - display: flex; - justify-content: space-between; - } - ha-textfield { - width: 250px; - display: block; - margin-top: 8px; - } - ha-icon-button > * { - display: flex; - } `, ]; } @@ -640,8 +692,5 @@ loadConfigDashboard().then(() => { __decorate([ e() ], BrowserModPanel.prototype, "connection", void 0); - __decorate([ - e() - ], BrowserModPanel.prototype, "dirty", void 0); customElements.define("browser-mod-panel", BrowserModPanel); }); diff --git a/js/config_panel/browser-settings-card.ts b/js/config_panel/browser-settings-card.ts new file mode 100644 index 0000000..53fb3f4 --- /dev/null +++ b/js/config_panel/browser-settings-card.ts @@ -0,0 +1,253 @@ +import { LitElement, html, css } from "lit"; +import { property, state } from "lit/decorators.js"; + +class BrowserModRegisteredBrowsersCard extends LitElement { + @property() hass; + @property() dirty = false; + + toggleRegister() { + if (!window.browser_mod?.connected) return; + window.browser_mod.registered = !window.browser_mod.registered; + this.dirty = true; + } + changeBrowserID(ev) { + window.browser_mod.browserID = ev.target.value; + this.dirty = true; + } + toggleCameraEnabled() { + window.browser_mod.cameraEnabled = !window.browser_mod.cameraEnabled; + this.dirty = true; + } + + firstUpdated() { + window.browser_mod.addEventListener("browser-mod-config-update", () => + this.requestUpdate() + ); + } + + render() { + return html` + +

    +
    This Browser
    + ${window.browser_mod?.connected + ? html` + + ` + : html` + + `} +

    +
    + ${this.dirty + ? html` + + It is strongly recommended to refresh your browser window + after changing any of the settings in this box. + + ` + : ""} +
    +
    + + Enable + Enable this browser as a Device in Home Assistant + + + + + BrowserID + A unique identifier for this browser-device combination. + + + + ${window.browser_mod?.registered + ? html` + ${this._renderSuspensionAlert()} + + Enable camera + Get camera input from this browser (hardware + dependent) + + + ${this._renderInteractionAlert()} + ${this._renderFKBSettingsInfo()} + ` + : ""} +
    +     + `; + } + + private _renderSuspensionAlert() { + if (!this.hass.suspendWhenHidden) return html``; + return html` + + Home Assistant will close the websocket connection to the server + automatically after 5 minutes of inactivity.

    + While decreasing network trafic and memory usage, this may cause + problems for browser_mod operation. +

    + If you find that some things stop working for this Browser after a time, + try going to your + Profile Settings + and disabling the option + "${this.hass.localize("ui.panel.profile.suspend.header") || + "Automatically close connection"}". +     + `; + } + + private _renderInteractionAlert() { + return html` + + For security reasons many browsers require the user to interact with a + webpage before allowing audio playback or video capture. This may affect + the + media_player and camera components of Browser + Mod.

    + + If you ever see a + symbol at the bottom right + corner of the screen, please tap or click anywhere on the page. This + should allow Browser Mod to work again. +     + `; + } + + private _renderFKBSettingsInfo() { + if (!window.browser_mod?.fully || !this.getFullySettings()) return html``; + return html` + ${window.browser_mod?.fully && this.getFullySettings() + ? html` + You are using FullyKiosk Browser. It is recommended to enable the + following settings: + + ` + : ""} + `; + } + + private getFullySettings() { + if (!window.browser_mod.fully) return null; + const retval = []; + const wcs = []; + // Web Content Settings + // Autoplay Videos + if (window.fully.getBooleanSetting("autoplayVideos") !== "true") + wcs.push(html`
  • Autoplay Videos
    • `); + // Autoplay Audio + if (window.fully.getBooleanSetting("autoplayAudio") !== "true") + wcs.push(html`
  • Autoplay Audio
    • `); + // Enable Webcam Access (PLUS) + if (window.fully.getBooleanSetting("webcamAccess") !== "true") + wcs.push(html`
  • Enable Webcam Access (PLUS)
    • `); + + if (wcs.length !== 0) { + retval.push(html`
  • Web Content Settings
    • + `); + } + + // Advanced Web Settings + // Enable JavaScript Interface (PLUS) + if (window.fully.getBooleanSetting("websiteIntegration") !== "true") + retval.push(html`
  • Advanced Web Settings
    • + `); + + // Device Management + // Keep Screen On + if (window.fully.getBooleanSetting("keepScreenOn") !== "true") + retval.push(html`
  • Device Management
    • + `); + + // Power Settings + // Prevent from Sleep while Screen Off + if (window.fully.getBooleanSetting("preventSleepWhileScreenOff") !== "true") + retval.push(html`
  • Power Settings
    • + `); + + const md = []; + // Motion Detection (PLUS) + // Enable Visual Motion Detection + if (window.fully.getBooleanSetting("motionDetection") !== "true") + md.push(html`
  • Enable Visual Motion Detection
    • `); + // Turn Screen On on Motion + if (window.fully.getBooleanSetting("screenOnOnMotion") !== "true") + md.push(html`
  • Turn Screen On on Motion
    • `); + // Exit Screensaver on Motion + if (window.fully.getBooleanSetting("stopScreensaverOnMotion") !== "true") + md.push(html`
  • Exit Screensaver on Motion
    • `); + + if (md.length !== 0) { + retval.push(html`
  • Motion Detection (PLUS)
    • + `); + } + + // Remote Administration (PLUS) + // Enable Remote Administration + if (window.fully.getBooleanSetting("remoteAdmin") !== "true") + retval.push(html`
  • Remote Administration (PLUS)
    • + `); + + return retval.length ? retval : null; + } + + static get styles() { + return css` + .card-header { + display: flex; + justify-content: space-between; + } + ha-textfield { + width: 250px; + display: block; + margin-top: 8px; + } + `; + } +} +customElements.define( + "browser-mod-browser-settings-card", + BrowserModRegisteredBrowsersCard +); diff --git a/js/config_panel/settings-card.ts b/js/config_panel/frontend-settings-card.ts similarity index 98% rename from js/config_panel/settings-card.ts rename to js/config_panel/frontend-settings-card.ts index b8fe323..5b9cf2f 100644 --- a/js/config_panel/settings-card.ts +++ b/js/config_panel/frontend-settings-card.ts @@ -4,7 +4,7 @@ import { loadDeveloperToolsTemplate } from "../helpers"; loadDeveloperToolsTemplate(); -class BrowserModSettingsCard extends LitElement { +class BrowserModFrontendSettingsCard extends LitElement { @property() hass; @state() _selectedTab = 0; @@ -261,4 +261,7 @@ class BrowserModSettingsCard extends LitElement { } } -customElements.define("browser-mod-settings-card", BrowserModSettingsCard); +customElements.define( + "browser-mod-frontend-settings-card", + BrowserModFrontendSettingsCard +); diff --git a/js/config_panel/main.ts b/js/config_panel/main.ts index dfca215..c804af9 100644 --- a/js/config_panel/main.ts +++ b/js/config_panel/main.ts @@ -1,9 +1,10 @@ import { LitElement, html, css } from "lit"; import { property } from "lit/decorators.js"; import { loadConfigDashboard } from "../helpers"; -import { loadHaForm } from "../helpers"; -import "./settings-card"; +import "./browser-settings-card"; +import "./registered-browsers-card"; +import "./frontend-settings-card"; const bmWindow = window as any; @@ -12,48 +13,6 @@ loadConfigDashboard().then(() => { @property() hass; @property() narrow; @property() connection; - @property() dirty = false; - - toggleRegister() { - if (!window.browser_mod?.connected) return; - window.browser_mod.registered = !window.browser_mod.registered; - this.dirty = true; - } - changeBrowserID(ev) { - window.browser_mod.browserID = ev.target.value; - this.dirty = true; - } - toggleCameraEnabled() { - window.browser_mod.cameraEnabled = !window.browser_mod.cameraEnabled; - this.dirty = true; - } - - unregister_browser(ev) { - const browserID = ev.currentTarget.browserID; - - const unregisterCallback = () => { - console.log(browserID, window.browser_mod.browserID); - if (browserID === window.browser_mod.browserID) { - console.log("Unregister self"); - window.browser_mod.registered = false; - } else { - window.browser_mod.connection.sendMessage({ - type: "browser_mod/unregister", - browserID, - }); - } - }; - - window.browser_mod.showPopup( - "Unregister browser", - `Are you sure you want to unregister browser ${browserID}?`, - { - right_button: "Yes", - right_button_action: unregisterCallback, - left_button: "No", - } - ); - } firstUpdated() { window.browser_mod.addEventListener("browser-mod-config-update", () => @@ -61,84 +20,6 @@ loadConfigDashboard().then(() => { ); } - getFullySettings() { - if (!window.browser_mod.fully) return null; - const retval = []; - const wcs = []; - // Web Content Settings - // Autoplay Videos - if (window.fully.getBooleanSetting("autoplayVideos") !== "true") - wcs.push(html`
  • Autoplay Videos
    • `); - // Autoplay Audio - if (window.fully.getBooleanSetting("autoplayAudio") !== "true") - wcs.push(html`
  • Autoplay Audio
    • `); - // Enable Webcam Access (PLUS) - if (window.fully.getBooleanSetting("webcamAccess") !== "true") - wcs.push(html`
  • Enable Webcam Access (PLUS)
    • `); - - if (wcs.length !== 0) { - retval.push(html`
  • Web Content Settings
    • - `); - } - - // Advanced Web Settings - // Enable JavaScript Interface (PLUS) - if (window.fully.getBooleanSetting("websiteIntegration") !== "true") - retval.push(html`
  • Advanced Web Settings
    • - `); - - // Device Management - // Keep Screen On - if (window.fully.getBooleanSetting("keepScreenOn") !== "true") - retval.push(html`
  • Device Management
    • - `); - - // Power Settings - // Prevent from Sleep while Screen Off - if ( - window.fully.getBooleanSetting("preventSleepWhileScreenOff") !== "true" - ) - retval.push(html`
  • Power Settings
    • - `); - - const md = []; - // Motion Detection (PLUS) - // Enable Visual Motion Detection - if (window.fully.getBooleanSetting("motionDetection") !== "true") - md.push(html`
  • Enable Visual Motion Detection
    • `); - // Turn Screen On on Motion - if (window.fully.getBooleanSetting("screenOnOnMotion") !== "true") - md.push(html`
  • Turn Screen On on Motion
    • `); - // Exit Screensaver on Motion - if (window.fully.getBooleanSetting("stopScreensaverOnMotion") !== "true") - md.push(html`
  • Exit Screensaver on Motion
    • `); - - if (md.length !== 0) { - retval.push(html`
  • Motion Detection (PLUS)
    • - `); - } - - // Remote Administration (PLUS) - // Enable Remote Administration - if (window.fully.getBooleanSetting("remoteAdmin") !== "true") - retval.push(html`
  • Remote Administration (PLUS)
    • - `); - - return retval.length ? retval : null; - } - render() { return html` @@ -153,151 +34,17 @@ loadConfigDashboard().then(() => { - -

    -
    This Browser
    - ${bmWindow.browser_mod?.connected - ? html` - - ` - : html` - - `} -

    -
    -

    Settings that apply to this browser.

    - ${this.dirty - ? html` - - It is strongly recommended to refresh your browser - window after changing any of the settings in this box. - - ` - : ""} -
    -
    - - Enable - Enable this browser as a Device in Home Assistant - - - - - BrowserID - A unique identifier for this browser-device - combination. - - - - ${window.browser_mod?.registered - ? html` - ${this.hass.suspendWhenHidden - ? html` - Home Assistant will close the websocket connection - to the server automatically after 5 minutes of - inactivity.

    - While decreasing network trafic and memory usage, - this may cause problems for browser_mod operation. -

    - If you find that some things stop working for this - Browser after a time, try going to your - Profile Settings - and disabling the option - "${this.hass.localize( - "ui.panel.profile.suspend.header" - ) || "Automatically close connection"}". -     ` - : ""} - - Enable camera - Get camera input from this browser (hardware - dependent) - - - - For security reasons many browsers require the user to - interact with a webpage before allowing audio playback - or video capture. This may affect the - media_player and - camera components of Browser Mod. -

    - - If you ever see a - symbol at the - bottom right corner of the screen, please tap or click - anywhere on the page. This should allow Browser Mod to - work again. -     - ${window.browser_mod?.fully && this.getFullySettings() - ? html` - You are using FullyKiosk Browser. It is recommended - to enable the following settings: -
      - ${this.getFullySettings()} -
    -     ` - : ""} - ` - : ""} -
    -     - - -
    - ${Object.keys(window.browser_mod.browsers).map( - (d) => html` - ${d} - - Last connected: - - - - - - ` - )} -
    -     - - + > + + + +     `; @@ -316,18 +63,6 @@ loadConfigDashboard().then(() => { ha-config-section { padding: 16px 0; } - .card-header { - display: flex; - justify-content: space-between; - } - ha-textfield { - width: 250px; - display: block; - margin-top: 8px; - } - ha-icon-button > * { - display: flex; - } `, ]; } diff --git a/js/config_panel/registered-browsers-card.ts b/js/config_panel/registered-browsers-card.ts new file mode 100644 index 0000000..a60789a --- /dev/null +++ b/js/config_panel/registered-browsers-card.ts @@ -0,0 +1,75 @@ +import { LitElement, html, css } from "lit"; +import { property, state } from "lit/decorators.js"; + +class BrowserModRegisteredBrowsersCard extends LitElement { + @property() hass; + + firstUpdated() { + window.browser_mod.addEventListener("browser-mod-config-update", () => + this.requestUpdate() + ); + } + + unregister_browser(ev) { + const browserID = ev.currentTarget.browserID; + + const unregisterCallback = () => { + console.log(browserID, window.browser_mod.browserID); + if (browserID === window.browser_mod.browserID) { + console.log("Unregister self"); + window.browser_mod.registered = false; + } else { + window.browser_mod.connection.sendMessage({ + type: "browser_mod/unregister", + browserID, + }); + } + }; + + window.browser_mod.showPopup( + "Unregister browser", + `Are you sure you want to unregister browser ${browserID}?`, + { + right_button: "Yes", + right_button_action: unregisterCallback, + left_button: "No", + } + ); + } + + render() { + return html` + +
    + ${Object.keys(window.browser_mod.browsers).map( + (d) => html` + ${d} + + Last connected: + + + + + + ` + )} +
    +     + `; + } + + static get styles() { + return css` + ha-icon-button > * { + display: flex; + } + `; + } +} +customElements.define( + "browser-mod-registered-browsers-card", + BrowserModRegisteredBrowsersCard +); diff --git a/js/plugin/auto-settings.ts b/js/plugin/frontend-settings.ts similarity index 100% rename from js/plugin/auto-settings.ts rename to js/plugin/frontend-settings.ts diff --git a/js/plugin/main.ts b/js/plugin/main.ts index 34426a2..7af950c 100644 --- a/js/plugin/main.ts +++ b/js/plugin/main.ts @@ -14,7 +14,7 @@ import "./popups"; import { PopupMixin } from "./popups"; import pjson from "../../package.json"; import "./popup-card"; -import { AutoSettingsMixin } from "./auto-settings"; +import { AutoSettingsMixin } from "./frontend-settings"; /* TODO: @@ -47,7 +47,7 @@ import { AutoSettingsMixin } from "./auto-settings"; x javascript eval - toast? x Redesign services to target devices - - frontend editor for popup cards + x frontend editor for popup cards - also screensavers - Saved frontend settings X Framework