254 lines
8.0 KiB
TypeScript
254 lines
8.0 KiB
TypeScript
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`
|
|
<ha-card outlined>
|
|
<h1 class="card-header">
|
|
<div class="name">This Browser</div>
|
|
${window.browser_mod?.connected
|
|
? html`
|
|
<ha-icon
|
|
class="icon"
|
|
.icon=${"mdi:check-circle-outline"}
|
|
style="color: var(--success-color, green);"
|
|
></ha-icon>
|
|
`
|
|
: html`
|
|
<ha-icon
|
|
class="icon"
|
|
.icon=${"mdi:circle-outline"}
|
|
style="color: var(--error-color, red);"
|
|
></ha-icon>
|
|
`}
|
|
</h1>
|
|
<div class="card-content">
|
|
${this.dirty
|
|
? html`
|
|
<ha-alert alert-type="warning">
|
|
It is strongly recommended to refresh your browser window
|
|
after changing any of the settings in this box.
|
|
</ha-alert>
|
|
`
|
|
: ""}
|
|
</div>
|
|
<div class="card-content">
|
|
<ha-settings-row>
|
|
<span slot="heading">Register</span>
|
|
<span slot="description"
|
|
>Enable this browser as a Device in Home Assistant</span
|
|
>
|
|
<ha-switch
|
|
.checked=${window.browser_mod?.registered}
|
|
@change=${this.toggleRegister}
|
|
></ha-switch>
|
|
</ha-settings-row>
|
|
|
|
<ha-settings-row>
|
|
<span slot="heading">BrowserID</span>
|
|
<span slot="description"
|
|
>A unique identifier for this browser-device combination.</span
|
|
>
|
|
<ha-textfield
|
|
.value=${window.browser_mod?.browserID}
|
|
@change=${this.changeBrowserID}
|
|
></ha-textfield>
|
|
</ha-settings-row>
|
|
|
|
${window.browser_mod?.registered
|
|
? html`
|
|
${this._renderSuspensionAlert()}
|
|
<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>
|
|
${this._renderInteractionAlert()}
|
|
${this._renderFKBSettingsInfo()}
|
|
`
|
|
: ""}
|
|
</div>
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
private _renderSuspensionAlert() {
|
|
if (!this.hass.suspendWhenHidden) return html``;
|
|
return html`
|
|
<ha-alert alert-type="warning" title="Auto closing connection">
|
|
Home Assistant will close the websocket connection to the server
|
|
automatically after 5 minutes of inactivity.<br /><br />
|
|
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>
|
|
`;
|
|
}
|
|
|
|
private _renderInteractionAlert() {
|
|
return html`
|
|
<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>
|
|
`;
|
|
}
|
|
|
|
private _renderFKBSettingsInfo() {
|
|
if (!window.browser_mod?.fully || !this.getFullySettings()) return html``;
|
|
return html`
|
|
${window.browser_mod?.fully && this.getFullySettings()
|
|
? html` <ha-alert title="FullyKiosk Browser">
|
|
You are using FullyKiosk Browser. It is recommended to enable the
|
|
following settings:
|
|
<ul>
|
|
${this.getFullySettings()}
|
|
</ul>
|
|
</ha-alert>`
|
|
: ""}
|
|
`;
|
|
}
|
|
|
|
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`<li>Autoplay Videos</li>`);
|
|
// Autoplay Audio
|
|
if (window.fully.getBooleanSetting("autoplayAudio") !== "true")
|
|
wcs.push(html`<li>Autoplay Audio</li>`);
|
|
// Enable Webcam Access (PLUS)
|
|
if (window.fully.getBooleanSetting("webcamAccess") !== "true")
|
|
wcs.push(html`<li>Enable Webcam Access (PLUS)</li>`);
|
|
|
|
if (wcs.length !== 0) {
|
|
retval.push(html`<li>Web Content Settings</li>
|
|
<ul>
|
|
${wcs}
|
|
</ul>`);
|
|
}
|
|
|
|
// Advanced Web Settings
|
|
// Enable JavaScript Interface (PLUS)
|
|
if (window.fully.getBooleanSetting("websiteIntegration") !== "true")
|
|
retval.push(html`<li>Advanced Web Settings</li>
|
|
<ul>
|
|
<li>Enable JavaScript Interface (PLUS)</li>
|
|
</ul>`);
|
|
|
|
// Device Management
|
|
// Keep Screen On
|
|
if (window.fully.getBooleanSetting("keepScreenOn") !== "true")
|
|
retval.push(html`<li>Device Management</li>
|
|
<ul>
|
|
<li>Keep Screen On</li>
|
|
</ul>`);
|
|
|
|
// Power Settings
|
|
// Prevent from Sleep while Screen Off
|
|
if (window.fully.getBooleanSetting("preventSleepWhileScreenOff") !== "true")
|
|
retval.push(html`<li>Power Settings</li>
|
|
<ul>
|
|
<li>Prevent from Sleep while Screen Off</li>
|
|
</ul>`);
|
|
|
|
const md = [];
|
|
// Motion Detection (PLUS)
|
|
// Enable Visual Motion Detection
|
|
if (window.fully.getBooleanSetting("motionDetection") !== "true")
|
|
md.push(html`<li>Enable Visual Motion Detection</li>`);
|
|
// Turn Screen On on Motion
|
|
if (window.fully.getBooleanSetting("screenOnOnMotion") !== "true")
|
|
md.push(html`<li>Turn Screen On on Motion</li>`);
|
|
// Exit Screensaver on Motion
|
|
if (window.fully.getBooleanSetting("stopScreensaverOnMotion") !== "true")
|
|
md.push(html`<li>Exit Screensaver on Motion</li>`);
|
|
|
|
if (md.length !== 0) {
|
|
retval.push(html`<li>Motion Detection (PLUS)</li>
|
|
<ul>
|
|
${md}
|
|
</ul>`);
|
|
}
|
|
|
|
// Remote Administration (PLUS)
|
|
// Enable Remote Administration
|
|
if (window.fully.getBooleanSetting("remoteAdmin") !== "true")
|
|
retval.push(html`<li>Remote Administration (PLUS)</li>
|
|
<ul>
|
|
<li>Enable Remote Administration</li>
|
|
</ul>`);
|
|
|
|
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
|
|
);
|