thomas/hass-browser_mod
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add info boxed to browser mod panel

Browse Source
This commit is contained in:
Thomas Lovén 2022-07-18 22:32:58 +00:00
parent acc4a15e02
commit f7d3874010
4 changed files with 147 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
custom_components/browser_mod/browser_mod.js
View File

@ -1263,10 +1263,10 @@ var pjson = {
X Timeout X Timeout
X Fullscreen X Fullscreen
- Motion/occupancy tracker - Motion/occupancy tracker
- Information about interaction requirement x Information about interaction requirement
- Information about fullykiosk - Information about fullykiosk
- Commands - Commands
- Rename browser_mod commands to browser_mod services x Rename browser_mod commands to browser_mod services
x Framework x Framework
- ll-custom handling - ll-custom handling
- Commands - Commands

96
custom_components/browser_mod/browser_mod_panel.js
View File

@ -84,17 +84,24 @@ const loadDevTools = async () => {
const bmWindow = window; const bmWindow = window;
loadDevTools().then(() => { loadDevTools().then(() => {
class BrowserModPanel extends s { class BrowserModPanel extends s {
constructor() {
super(...arguments);
this.dirty = false;
}
toggleRegister() { toggleRegister() {
var _a; var _a;
if (!((_a = window.browser_mod) === null || _a === void 0 ? void 0 : _a.connected)) if (!((_a = window.browser_mod) === null || _a === void 0 ? void 0 : _a.connected))
return; return;
window.browser_mod.registered = !window.browser_mod.registered; window.browser_mod.registered = !window.browser_mod.registered;
this.dirty = true;
} }
changeBrowserID(ev) { changeBrowserID(ev) {
window.browser_mod.browserID = ev.target.value; window.browser_mod.browserID = ev.target.value;
this.dirty = true;
} }
toggleCameraEnabled() { toggleCameraEnabled() {
window.browser_mod.cameraEnabled = !window.browser_mod.cameraEnabled; window.browser_mod.cameraEnabled = !window.browser_mod.cameraEnabled;
this.dirty = true;
} }
unregister_browser(ev) { unregister_browser(ev) {
const browserID = ev.currentTarget.browserID; const browserID = ev.currentTarget.browserID;
@ -112,18 +119,16 @@ loadDevTools().then(() => {
} }
}; };
window.browser_mod.showPopup("Unregister browser", `Are you sure you want to unregister browser ${browserID}?`, { window.browser_mod.showPopup("Unregister browser", `Are you sure you want to unregister browser ${browserID}?`, {
primary_action: "Yes", right_button: "Yes",
secondary_action: "No", right_button_action: unregisterCallback,
callbacks: { left_button: "No",
primary_action: unregisterCallback,
},
}); });
} }
firstUpdated() { firstUpdated() {
window.browser_mod.addEventListener("browser-mod-config-update", () => this.requestUpdate()); window.browser_mod.addEventListener("browser-mod-config-update", () => this.requestUpdate());
} }
render() { render() {
var _a, _b, _c, _d; var _a, _b, _c, _d, _e;
return $ ` return $ `
<ha-app-layout> <ha-app-layout>
<app-header slot="header" fixed> <app-header slot="header" fixed>
@ -158,10 +163,14 @@ loadDevTools().then(() => {
</h1> </h1>
<div class="card-content"> <div class="card-content">
<p>Settings that apply to this browser.</p> <p>Settings that apply to this browser.</p>
<p> ${this.dirty
It is strongly recommended to refresh your browser window ? $ `
after any change to those settings. <ha-alert alert-type="warning">
</p> It is strongly recommended to refresh your browser
window after changing any of the settings in this box.
</ha-alert>
`
: ""}
</div> </div>
<div class="card-content"> <div class="card-content">
<ha-settings-row> <ha-settings-row>
@ -187,21 +196,61 @@ loadDevTools().then(() => {
></ha-textfield> ></ha-textfield>
</ha-settings-row> </ha-settings-row>
<ha-settings-row> ${((_d = window.browser_mod) === null || _d === void 0 ? void 0 : _d.registered)
<span slot="heading">Enable camera</span> ? $ `
<span slot="description" ${this.hass.suspendWhenHidden
>Get camera input from this browser (hardware ? $ `<ha-alert
dependent)</span alert-type="warning"
> title="Auto closing connection"
<ha-switch >
.checked=${(_d = window.browser_mod) === null || _d === void 0 ? void 0 : _d.cameraEnabled} Home Assistant will close the websocket connection
@change=${this.toggleCameraEnabled} to the server automatically after 5 minutes of
></ha-switch> inactivity.<br /><br />
</ha-settings-row> While decreasing network trafic and memory usage,
this may cause problems for browser_mod operation.
<br /><br />
If you find that some things stop working for this
Browser after a time, try going to your
<a
href="/profile"
style="text-decoration: underline; color: var(--primary-color);"
>Profile Settings</a
>
and disabling the option
"${this.hass.localize("ui.panel.profile.suspend.header") || "Automatically close connection"}".
</ha-alert>`
: ""}
<ha-settings-row>
<span slot="heading">Enable camera</span>
<span slot="description"
>Get camera input from this browser (hardware
dependent)</span
>
<ha-switch
.checked=${(_e = window.browser_mod) === null || _e === void 0 ? void 0 : _e.cameraEnabled}
@change=${this.toggleCameraEnabled}
></ha-switch>
</ha-settings-row>
<ha-alert title="Interaction requirement">
For security reasons many browsers require the user to
interact with a webpage before allowing audio playback
or video capture. This may affect the
<code>media_player</code> and
<code>camera</code> components of Browser Mod.
<br /><br />
If you ever see a
<ha-icon icon="mdi:gesture-tap"></ha-icon> 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.
</ha-alert>
`
: ""}
</div> </div>
</ha-card> </ha-card>
<ha-card header="Registered browsers" outlined> <ha-card header="Registered Browsers" outlined>
<div class="card-content"> <div class="card-content">
${Object.keys(window.browser_mod.browsers).map((d) => $ ` <ha-settings-row> ${Object.keys(window.browser_mod.browsers).map((d) => $ ` <ha-settings-row>
<span slot="heading"> ${d} </span> <span slot="heading"> ${d} </span>
@ -300,5 +349,8 @@ loadDevTools().then(() => {
__decorate([ __decorate([
e() e()
], BrowserModPanel.prototype, "connection", void 0); ], BrowserModPanel.prototype, "connection", void 0);
__decorate([
e()
], BrowserModPanel.prototype, "dirty", void 0);
customElements.define("browser-mod-panel", BrowserModPanel); customElements.define("browser-mod-panel", BrowserModPanel);
}); });

90
js/config_panel/main.ts
View File

@ -9,16 +9,20 @@ loadDevTools().then(() => {
@property() hass; @property() hass;
@property() narrow; @property() narrow;
@property() connection; @property() connection;
@property() dirty = false;
toggleRegister() { toggleRegister() {
if (!window.browser_mod?.connected) return; if (!window.browser_mod?.connected) return;
window.browser_mod.registered = !window.browser_mod.registered; window.browser_mod.registered = !window.browser_mod.registered;
this.dirty = true;
} }
changeBrowserID(ev) { changeBrowserID(ev) {
window.browser_mod.browserID = ev.target.value; window.browser_mod.browserID = ev.target.value;
this.dirty = true;
} }
toggleCameraEnabled() { toggleCameraEnabled() {
window.browser_mod.cameraEnabled = !window.browser_mod.cameraEnabled; window.browser_mod.cameraEnabled = !window.browser_mod.cameraEnabled;
this.dirty = true;
} }
unregister_browser(ev) { unregister_browser(ev) {
@ -41,11 +45,9 @@ loadDevTools().then(() => {
"Unregister browser", "Unregister browser",
`Are you sure you want to unregister browser ${browserID}?`, `Are you sure you want to unregister browser ${browserID}?`,
{ {
primary_action: "Yes", right_button: "Yes",
secondary_action: "No", right_button_action: unregisterCallback,
callbacks: { left_button: "No",
primary_action: unregisterCallback,
},
} }
); );
} }
@ -91,10 +93,14 @@ loadDevTools().then(() => {
</h1> </h1>
<div class="card-content"> <div class="card-content">
<p>Settings that apply to this browser.</p> <p>Settings that apply to this browser.</p>
<p> ${this.dirty
It is strongly recommended to refresh your browser window ? html`
after any change to those settings. <ha-alert alert-type="warning">
</p> It is strongly recommended to refresh your browser
window after changing any of the settings in this box.
</ha-alert>
`
: ""}
</div> </div>
<div class="card-content"> <div class="card-content">
<ha-settings-row> <ha-settings-row>
@ -120,21 +126,63 @@ loadDevTools().then(() => {
></ha-textfield> ></ha-textfield>
</ha-settings-row> </ha-settings-row>
<ha-settings-row> ${window.browser_mod?.registered
<span slot="heading">Enable camera</span> ? html`
<span slot="description" ${this.hass.suspendWhenHidden
>Get camera input from this browser (hardware ? html`<ha-alert
dependent)</span alert-type="warning"
> title="Auto closing connection"
<ha-switch >
.checked=${window.browser_mod?.cameraEnabled} Home Assistant will close the websocket connection
@change=${this.toggleCameraEnabled} to the server automatically after 5 minutes of
></ha-switch> inactivity.<br /><br />
</ha-settings-row> While decreasing network trafic and memory usage,
this may cause problems for browser_mod operation.
<br /><br />
If you find that some things stop working for this
Browser after a time, try going to your
<a
href="/profile"
style="text-decoration: underline; color: var(--primary-color);"
>Profile Settings</a
>
and disabling the option
"${this.hass.localize(
"ui.panel.profile.suspend.header"
) || "Automatically close connection"}".
</ha-alert>`
: ""}
<ha-settings-row>
<span slot="heading">Enable camera</span>
<span slot="description"
>Get camera input from this browser (hardware
dependent)</span
>
<ha-switch
.checked=${window.browser_mod?.cameraEnabled}
@change=${this.toggleCameraEnabled}
></ha-switch>
</ha-settings-row>
<ha-alert title="Interaction requirement">
For security reasons many browsers require the user to
interact with a webpage before allowing audio playback
or video capture. This may affect the
<code>media_player</code> and
<code>camera</code> components of Browser Mod.
<br /><br />
If you ever see a
<ha-icon icon="mdi:gesture-tap"></ha-icon> 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.
</ha-alert>
`
: ""}
</div> </div>
</ha-card> </ha-card>
<ha-card header="Registered browsers" outlined> <ha-card header="Registered Browsers" outlined>
<div class="card-content"> <div class="card-content">
${Object.keys(window.browser_mod.browsers).map( ${Object.keys(window.browser_mod.browsers).map(
(d) => html` <ha-settings-row> (d) => html` <ha-settings-row>

4
js/plugin/main.ts
View File

@ -24,10 +24,10 @@ import pjson from "../../package.json";
X Timeout X Timeout
X Fullscreen X Fullscreen
- Motion/occupancy tracker - Motion/occupancy tracker
- Information about interaction requirement x Information about interaction requirement
- Information about fullykiosk - Information about fullykiosk
- Commands - Commands
- Rename browser_mod commands to browser_mod services x Rename browser_mod commands to browser_mod services
x Framework x Framework
- ll-custom handling - ll-custom handling
- Commands - Commands