Lots of changes and modernization. WIP
This commit is contained in:
16
js/config_panel/helpers.ts
Normal file
16
js/config_panel/helpers.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
// Loads in ha-config-dashboard which is used to copy styling
|
||||
export const loadDevTools = async () => {
|
||||
if (customElements.get("ha-config-dashboard")) return;
|
||||
const ppResolver = document.createElement("partial-panel-resolver");
|
||||
const routes = (ppResolver as any).getRoutes([
|
||||
{
|
||||
component_name: "config",
|
||||
url_path: "a",
|
||||
},
|
||||
]);
|
||||
await routes?.routes?.a?.load?.();
|
||||
const configRouter = document.createElement("ha-panel-config");
|
||||
await (configRouter as any)?.routerOptions?.routes?.dashboard?.load?.(); // Load ha-config-dashboard
|
||||
await (configRouter as any)?.routerOptions?.routes?.cloud?.load?.(); // Load ha-settings-row
|
||||
await customElements.whenDefined("ha-config-dashboard");
|
||||
};
|
||||
@@ -1,124 +1,205 @@
|
||||
import { LitElement, html, css } from "lit";
|
||||
import { deviceID } from "card-tools/src/deviceID";
|
||||
import { property } from "lit/decorators.js";
|
||||
import { loadDevTools } from "./helpers";
|
||||
|
||||
class BrowserModPanel extends LitElement {
|
||||
hass;
|
||||
narrow;
|
||||
render() {
|
||||
return html`
|
||||
<ha-app-layout>
|
||||
<app-header slot="header" fixed>
|
||||
<app-toolbar>
|
||||
<ha-menu-button
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
></ha-menu-button>
|
||||
<div main-title>Browser Mod Settingss</div>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<ha-config-section .narrow=${this.narrow} full-width>
|
||||
<ha-card header="This Browser">
|
||||
<div class="card-content">
|
||||
<div class="option">
|
||||
<h3>Enable</h3>
|
||||
<ha-switch></ha-switch>
|
||||
</div>
|
||||
Enable this browser as a Device in Home Assistant
|
||||
<div class="option">
|
||||
<h3>DeviceID</h3>
|
||||
</div>
|
||||
<ha-textfield .value=${deviceID}> </ha-textfield>
|
||||
The device ID is a unique identifier for your browser/device
|
||||
combination.
|
||||
<div class="option">
|
||||
<h3>Enable Camera</h3>
|
||||
<ha-switch> </ha-switch>
|
||||
</div>
|
||||
Get Camera input from this device (hardware dependent)
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<div class="spacer"></div>
|
||||
<mwc-button>Update</mwc-button>
|
||||
</div>
|
||||
</ha-card>
|
||||
|
||||
<ha-card header="Current User">
|
||||
<div class="card-content"></div>
|
||||
</ha-card>
|
||||
|
||||
<ha-card header="Tweaks">
|
||||
<div class="card-content">
|
||||
<div class="option">
|
||||
<h3>Cool function</h3>
|
||||
<ha-switch> </ha-switch>
|
||||
</div>
|
||||
Enabling this will cause cool stuff to happen.
|
||||
<div class="option">
|
||||
<h3>Another function</h3>
|
||||
<ha-switch> </ha-switch>
|
||||
</div>
|
||||
Enabling this will cause less cool stuff to happen.
|
||||
</div>
|
||||
</ha-card>
|
||||
</ha-config-section>
|
||||
</ha-app-layout>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return [
|
||||
...(customElements.get("ha-config-dashboard") as any).styles,
|
||||
css`
|
||||
:host {
|
||||
--app-header-background-color: var(--sidebar-background-color);
|
||||
--app-header-text-color: var(--sidebar-text-color);
|
||||
--app-header-border-bottom: 1px solid var(--divider-color);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
const loadDevTools = async () => {
|
||||
if (customElements.get("ha-config-dashboard")) return;
|
||||
const ppResolver = document.createElement("partial-panel-resolver");
|
||||
const routes = (ppResolver as any).getRoutes([
|
||||
{
|
||||
component_name: "config",
|
||||
url_path: "a",
|
||||
},
|
||||
]);
|
||||
await routes?.routes?.a?.load?.();
|
||||
const configRouter = document.createElement("ha-panel-config");
|
||||
await (configRouter as any)?.routerOptions?.routes?.dashboard?.load?.();
|
||||
await customElements.whenDefined("ha-config-dashboard");
|
||||
};
|
||||
const bmWindow = window as any;
|
||||
|
||||
loadDevTools().then(() => {
|
||||
class BrowserModPanel extends LitElement {
|
||||
@property() hass;
|
||||
@property() narrow;
|
||||
@property() connection;
|
||||
|
||||
toggleRegister() {
|
||||
if (!window.browser_mod?.connected) return;
|
||||
window.browser_mod.registered = !window.browser_mod.registered;
|
||||
}
|
||||
changeDeviceID(ev) {
|
||||
window.browser_mod.deviceID = ev.target.value;
|
||||
}
|
||||
|
||||
unregister_device(ev) {
|
||||
const deviceID = ev.currentTarget.deviceID;
|
||||
if (deviceID === window.browser_mod.deviceID)
|
||||
window.browser_mod.registered = false;
|
||||
else
|
||||
window.browser_mod.connection.sendMessage({
|
||||
type: "browser_mod/unregister",
|
||||
deviceID,
|
||||
});
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
window.browser_mod.addEventListener("browser-mod-config-update", () =>
|
||||
this.requestUpdate()
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<ha-app-layout>
|
||||
<app-header slot="header" fixed>
|
||||
<app-toolbar>
|
||||
<ha-menu-button
|
||||
.hass=${this.hass}
|
||||
.narrow=${this.narrow}
|
||||
></ha-menu-button>
|
||||
<div main-title>Browser Mod Settings</div>
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
|
||||
<ha-config-section .narrow=${this.narrow} full-width>
|
||||
<ha-card outlined>
|
||||
<h1 class="card-header">
|
||||
<div class="name">This Browser</div>
|
||||
${bmWindow.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">Browser-mod not connected.</div>
|
||||
<div class="card-content">
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Enable</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">DeviceID</span>
|
||||
<span slot="description"
|
||||
>A unique identifier for this browser-device
|
||||
combination.</span
|
||||
>
|
||||
<ha-textfield
|
||||
.value=${window.browser_mod?.deviceID}
|
||||
@change=${this.changeDeviceID}
|
||||
></ha-textfield>
|
||||
</ha-settings-row>
|
||||
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Enable camera</span>
|
||||
<span slot="description"
|
||||
>Get camera input from this device (hardware
|
||||
dependent)</span
|
||||
>
|
||||
<ha-switch> </ha-switch>
|
||||
</ha-settings-row>
|
||||
</div>
|
||||
</ha-card>
|
||||
|
||||
<ha-card header="Registered devices" outlined>
|
||||
<div class="card-content">
|
||||
${Object.keys(window.browser_mod.devices).map(
|
||||
(d) => html` <ha-settings-row>
|
||||
<span slot="heading"> ${d} </span>
|
||||
<span slot="description">
|
||||
Last connected:
|
||||
<ha-relative-time
|
||||
.hass=${this.hass}
|
||||
.datetime=${window.browser_mod.devices[d].last_seen}
|
||||
></ha-relative-time>
|
||||
</span>
|
||||
<ha-icon-button .deviceID=${d} @click=${this.unregister_device}>
|
||||
<ha-icon .icon=${"mdi:delete"}></ha-icon>
|
||||
</ha-icon-button>
|
||||
<ha-icon-button>
|
||||
<ha-icon .icon=${"mdi:wrench"}></ha-icon>
|
||||
</ha-icon-button>
|
||||
</ha-settings-row>`
|
||||
)}
|
||||
</div>
|
||||
</ha-card>
|
||||
|
||||
<ha-card outlined header="Tweaks">
|
||||
<div class="card-content">
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Auto enable devices</span>
|
||||
<ha-switch></ha-switch>
|
||||
</ha-settings-row>
|
||||
<ha-settings-row>
|
||||
<span slot="heading">User sidebar</span>
|
||||
<span slot="description"
|
||||
>Save sidebar as default for current user
|
||||
(${this.hass.user.name})</span
|
||||
>
|
||||
<mwc-button>Save</mwc-button>
|
||||
</ha-settings-row>
|
||||
<ha-settings-row>
|
||||
<span slot="heading">Global sidebar</span>
|
||||
<span slot="description"
|
||||
>Save sidebar as default for all users</span
|
||||
>
|
||||
<mwc-button>Save</mwc-button>
|
||||
</ha-settings-row>
|
||||
</div>
|
||||
</ha-card>
|
||||
</ha-config-section>
|
||||
</ha-app-layout>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return [
|
||||
...((customElements.get("ha-config-dashboard") as any)?.styles ?? []),
|
||||
css`
|
||||
:host {
|
||||
--app-header-background-color: var(--sidebar-background-color);
|
||||
--app-header-text-color: var(--sidebar-text-color);
|
||||
--app-header-border-bottom: 1px solid var(--divider-color);
|
||||
--ha-card-border-radius: var(--ha-config-card-border-radius, 8px);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("browser-mod-panel", BrowserModPanel);
|
||||
});
|
||||
|
||||
63
js/helpers.ts
Normal file
63
js/helpers.ts
Normal file
@@ -0,0 +1,63 @@
|
||||
const TIMEOUT_ERROR = "SLECTTREE-TIMEOUT";
|
||||
|
||||
async function _await_el(el) {
|
||||
if (el.localName?.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];
|
||||
}
|
||||
|
||||
export 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"),
|
||||
customElements.whenDefined("hc-main"),
|
||||
]);
|
||||
|
||||
const element = customElements.get("home-assistant")
|
||||
? "home-assistant"
|
||||
: "hc-main";
|
||||
|
||||
while (!document.querySelector(element))
|
||||
await new Promise((r) => window.setTimeout(r, 100));
|
||||
return document.querySelector(element);
|
||||
}
|
||||
|
||||
export async function hass() {
|
||||
const base: any = await _hass_base_el();
|
||||
while (!base.hass) await new Promise((r) => window.setTimeout(r, 100));
|
||||
return base.hass;
|
||||
}
|
||||
|
||||
export async function provideHass(el) {
|
||||
const base: any = await _hass_base_el();
|
||||
base.provideHass(el);
|
||||
}
|
||||
@@ -8,7 +8,10 @@ export const BrowserModBrowserMixin = (C) =>
|
||||
document.addEventListener("visibilitychange", () => this.sensor_update());
|
||||
window.addEventListener("location-changed", () => this.sensor_update());
|
||||
|
||||
window.setInterval(() => this.sensor_update(), 10000);
|
||||
this.addEventListener("browser-mod-connected", () =>
|
||||
this.sensor_update()
|
||||
);
|
||||
// window.setInterval(() => this.sensor_update(), 10000);
|
||||
}
|
||||
|
||||
sensor_update() {
|
||||
@@ -28,7 +31,7 @@ export const BrowserModBrowserMixin = (C) =>
|
||||
charging: window.fully?.isPlugged() ?? battery?.charging,
|
||||
darkMode: this.hass?.themes?.darkMode,
|
||||
userData: this.hass?.user,
|
||||
config: this.config,
|
||||
// config: this.config,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
@@ -1,42 +1,175 @@
|
||||
import { deviceID } from "card-tools/src/deviceID";
|
||||
import { hass, provideHass } from "card-tools/src/hass";
|
||||
import { hass, provideHass } from "../helpers";
|
||||
|
||||
export class BrowserModConnection {
|
||||
hass;
|
||||
connection;
|
||||
const ID_STORAGE_KEY = "browser_mod-device-id";
|
||||
|
||||
async connect() {
|
||||
const isCast = document.querySelector("hc-main") !== null;
|
||||
if (!isCast) {
|
||||
while (!window.hassConnection)
|
||||
await new Promise((resolve) => window.setTimeout(resolve, 100));
|
||||
this.connection = (await window.hassConnection).conn;
|
||||
} else {
|
||||
this.connection = hass().connection;
|
||||
export const ConnectionMixin = (SuperClass) => {
|
||||
class BrowserModConnection extends SuperClass {
|
||||
public hass;
|
||||
public connection;
|
||||
private _data;
|
||||
public connected = false;
|
||||
private _connectionResolve;
|
||||
public connectionPromise = new Promise(resolve => { this._connectionResolve = resolve; });
|
||||
|
||||
LOG(...args) {
|
||||
const dt = new Date();
|
||||
console.log(`${dt.toLocaleTimeString()}`, ...args);
|
||||
}
|
||||
|
||||
this.connection.subscribeMessage((msg) => this.msg_callback(msg), {
|
||||
type: "browser_mod/connect",
|
||||
deviceID: deviceID,
|
||||
});
|
||||
private fireEvent(event, detail = undefined) {
|
||||
this.dispatchEvent(new CustomEvent(event, { detail }));
|
||||
}
|
||||
|
||||
provideHass(this);
|
||||
private incoming_message(msg) {
|
||||
if (msg.command) {
|
||||
this.LOG("Command:", msg);
|
||||
this.fireEvent(`command-${msg.command}`, msg)
|
||||
} else if (msg.result) {
|
||||
this.update_config(msg.result);
|
||||
}
|
||||
this._connectionResolve?.();
|
||||
}
|
||||
|
||||
private update_config(cfg) {
|
||||
this.LOG("Receive:", cfg);
|
||||
|
||||
let update = false;
|
||||
if (!this.registered && cfg.devices?.[this.deviceID]) {
|
||||
update = true;
|
||||
}
|
||||
this._data = cfg;
|
||||
|
||||
if (!this.connected) {
|
||||
this.connected = true;
|
||||
this.fireEvent("browser-mod-connected");
|
||||
}
|
||||
|
||||
this.fireEvent("browser-mod-config-update");
|
||||
|
||||
if (update) this.sendUpdate({});
|
||||
}
|
||||
|
||||
async connect() {
|
||||
const conn = (await hass()).connection;
|
||||
this.connection = conn;
|
||||
|
||||
// Subscribe to configuration updates
|
||||
conn.subscribeMessage((msg) => this.incoming_message(msg), {
|
||||
type: "browser_mod/connect",
|
||||
deviceID: this.deviceID,
|
||||
});
|
||||
|
||||
// Keep connection status up to date
|
||||
conn.addEventListener("disconnected", () => {
|
||||
this.connected = false;
|
||||
this.fireEvent("browser-mod-disconnected");
|
||||
});
|
||||
conn.addEventListener("ready", () => {
|
||||
this.connected = true;
|
||||
this.fireEvent("browser-mod-connected");
|
||||
this.sendUpdate({});
|
||||
});
|
||||
|
||||
provideHass(this);
|
||||
}
|
||||
|
||||
get config() {
|
||||
return this._data?.config ?? {};
|
||||
}
|
||||
|
||||
get devices() {
|
||||
return this._data?.devices ?? [];
|
||||
}
|
||||
|
||||
get registered() {
|
||||
return this.devices?.[this.deviceID] !== undefined;
|
||||
}
|
||||
|
||||
set registered(reg) {
|
||||
(async () => {
|
||||
if (reg) {
|
||||
if (this.registered) return;
|
||||
await this.connection.sendMessage({
|
||||
type: "browser_mod/register",
|
||||
deviceID: this.deviceID,
|
||||
});
|
||||
} else {
|
||||
if (!this.registered) return;
|
||||
await this.connection.sendMessage({
|
||||
type: "browser_mod/unregister",
|
||||
deviceID: this.deviceID,
|
||||
});
|
||||
}
|
||||
})();
|
||||
}
|
||||
|
||||
get meta() {
|
||||
if (!this.registered) return null;
|
||||
return this.devices[this.deviceID].meta;
|
||||
}
|
||||
set meta(value) {
|
||||
(async () => {
|
||||
await this.connection.sendMessage({
|
||||
type: "browser_mod/reregister",
|
||||
deviceID: this.deviceID,
|
||||
data: {
|
||||
...this.devices[this.deviceID],
|
||||
meta: value,
|
||||
}
|
||||
})
|
||||
})()
|
||||
}
|
||||
|
||||
sendUpdate(data) {
|
||||
if (!this.connected || !this.registered) return;
|
||||
|
||||
const dt = new Date();
|
||||
this.LOG("Send:", data);
|
||||
|
||||
this.connection.sendMessage({
|
||||
type: "browser_mod/update",
|
||||
deviceID: this.deviceID,
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
get deviceID() {
|
||||
if (localStorage[ID_STORAGE_KEY]) return localStorage[ID_STORAGE_KEY];
|
||||
this.deviceID = "";
|
||||
return this.deviceID;
|
||||
}
|
||||
set deviceID(id) {
|
||||
function _createDeviceID() {
|
||||
const s4 = () => {
|
||||
return Math.floor((1 + Math.random()) * 100000)
|
||||
.toString(16)
|
||||
.substring(1);
|
||||
};
|
||||
return window.fully?.getDeviceId() ?? `${s4()}${s4()}-${s4()}${s4()}`;
|
||||
}
|
||||
|
||||
if (id === "") id = _createDeviceID();
|
||||
const oldID = localStorage[ID_STORAGE_KEY];
|
||||
localStorage[ID_STORAGE_KEY] = id;
|
||||
|
||||
this.fireEvent("browser-mod-config-update");
|
||||
|
||||
if (this.devices?.[oldID] !== undefined && this.devices?.[this.deviceID] === undefined) {
|
||||
(async () => {
|
||||
await this.connection.sendMessage({
|
||||
type: "browser_mod/reregister",
|
||||
deviceID: oldID,
|
||||
data: {
|
||||
...this.devices[oldID],
|
||||
deviceID: this.deviceID,
|
||||
}
|
||||
})
|
||||
})()
|
||||
}
|
||||
|
||||
// TODO: Send update to backend to update device
|
||||
}
|
||||
}
|
||||
|
||||
get connected() {
|
||||
return this.connection !== undefined;
|
||||
}
|
||||
|
||||
msg_callback(message) {
|
||||
console.log(message);
|
||||
}
|
||||
|
||||
sendUpdate(data) {
|
||||
if (!this.connected) return;
|
||||
this.connection.sendMessage({
|
||||
type: "browser_mod/update",
|
||||
deviceID,
|
||||
data,
|
||||
});
|
||||
}
|
||||
return BrowserModConnection;
|
||||
}
|
||||
|
||||
@@ -5,8 +5,10 @@ import { fireEvent } from "card-tools/src/event";
|
||||
import { ha_element, hass_loaded } from "card-tools/src/hass";
|
||||
import "./browser-player";
|
||||
|
||||
import { BrowserModConnection } from "./connection";
|
||||
import { BrowserModMediaPlayerMixin } from "./mediaPlayer";
|
||||
// import { BrowserModConnection } from "./connection";
|
||||
import { ConnectionMixin } from "./connection";
|
||||
import { ScreenSaverMixin } from "./screensaver";
|
||||
import { MediaPlayerMixin } from "./mediaPlayer";
|
||||
import { FullyKioskMixin } from "./fullyKiosk";
|
||||
import { BrowserModCameraMixin } from "./camera";
|
||||
import { BrowserModScreensaverMixin } from "./screensaver";
|
||||
@@ -17,14 +19,15 @@ import pjson from "../../package.json";
|
||||
const ext = (baseClass, mixins) =>
|
||||
mixins.reduceRight((base, mixin) => mixin(base), baseClass);
|
||||
|
||||
export class BrowserMod extends ext(BrowserModConnection, [
|
||||
BrowserModBrowserMixin,
|
||||
BrowserModPopupsMixin,
|
||||
BrowserModScreensaverMixin,
|
||||
BrowserModCameraMixin,
|
||||
FullyKioskMixin,
|
||||
BrowserModMediaPlayerMixin,
|
||||
]) {
|
||||
// export class BrowserMod extends ext(BrowserModConnection, [
|
||||
// BrowserModBrowserMixin,
|
||||
// BrowserModPopupsMixin,
|
||||
// BrowserModScreensaverMixin,
|
||||
// BrowserModCameraMixin,
|
||||
// FullyKioskMixin,
|
||||
// BrowserModMediaPlayerMixin,
|
||||
// ]) {
|
||||
export class BrowserMod extends MediaPlayerMixin(ScreenSaverMixin(ConnectionMixin(EventTarget))) {
|
||||
constructor() {
|
||||
super();
|
||||
this.entity_id = deviceID.replace("-", "_");
|
||||
@@ -121,21 +124,21 @@ export class BrowserMod extends ext(BrowserModConnection, [
|
||||
this.hass.callService(domain, service, service_data);
|
||||
}
|
||||
|
||||
update(msg = null) {
|
||||
if (msg) {
|
||||
if (msg.name) {
|
||||
this.entity_id = msg.name.toLowerCase();
|
||||
}
|
||||
if (msg.camera && !this.isFully) {
|
||||
this.setup_camera();
|
||||
}
|
||||
this.config = { ...this.config, ...msg };
|
||||
}
|
||||
this.player_update();
|
||||
this.fully_update();
|
||||
this.screen_update();
|
||||
this.sensor_update();
|
||||
}
|
||||
// update(msg = null) {
|
||||
// if (msg) {
|
||||
// if (msg.name) {
|
||||
// this.entity_id = msg.name.toLowerCase();
|
||||
// }
|
||||
// if (msg.camera && !this.isFully) {
|
||||
// this.setup_camera();
|
||||
// }
|
||||
// this.config = { ...this.config, ...msg };
|
||||
// }
|
||||
// this.player_update();
|
||||
// this.fully_update();
|
||||
// this.screen_update();
|
||||
// this.sensor_update();
|
||||
// }
|
||||
}
|
||||
|
||||
(async () => {
|
||||
|
||||
@@ -1,59 +1,71 @@
|
||||
export const BrowserModMediaPlayerMixin = (C) =>
|
||||
class extends C {
|
||||
export const MediaPlayerMixin = (SuperClass) => {
|
||||
return class MediaPlayerMixinClass extends SuperClass {
|
||||
|
||||
public player;
|
||||
private _player_enabled;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.player = new Audio();
|
||||
|
||||
for (const event of ["play", "pause", "ended", "volumechange"]) {
|
||||
this.player.addEventListener(event, () => this.player_update());
|
||||
this.player = new Audio();
|
||||
this._player_enabled = false;
|
||||
|
||||
for (const ev of ["play", "pause", "ended", "volumechange"]) {
|
||||
this.player.addEventListener(ev, () => this._player_update());
|
||||
}
|
||||
|
||||
window.addEventListener(
|
||||
"click",
|
||||
() => {
|
||||
window.addEventListener("pointerdown", () => {
|
||||
this._player_enabled = true;
|
||||
if (!this.player.ended) this.player.play();
|
||||
},
|
||||
{
|
||||
once: true,
|
||||
}
|
||||
{ once: true }
|
||||
);
|
||||
|
||||
this.addEventListener("command-player-play", (ev) => {
|
||||
if (ev.detail?.media_content_id)
|
||||
this.player.src = ev.detail.media_content_id;
|
||||
this.player.play();
|
||||
});
|
||||
this.addEventListener("command-player-pause", (ev) => this.player.pause());
|
||||
this.addEventListener("command-player-stop", (ev) => {
|
||||
this.player.src = null;
|
||||
this.player.pause();
|
||||
});
|
||||
this.addEventListener("command-player-set-volume", (ev) => {
|
||||
if (ev.detail?.volume_level === undefined) return;
|
||||
this.player.volume = ev.detail.volume_level;
|
||||
});
|
||||
this.addEventListener("command-player-mute", (ev) => {
|
||||
if (ev.detail?.mute !== undefined)
|
||||
this.player.muted = Boolean(ev.detail.mute);
|
||||
else
|
||||
this.player.muted = !this.player.muted;
|
||||
});
|
||||
|
||||
this.connectionPromise.then(() => this._player_update());
|
||||
}
|
||||
|
||||
player_update(ev?) {
|
||||
private _player_update() {
|
||||
const state =
|
||||
this._player_enabled
|
||||
? this.player.src
|
||||
? this.player.ended
|
||||
? "stopped"
|
||||
: this.player.paused
|
||||
? "paused"
|
||||
: "playing"
|
||||
: "stopped"
|
||||
: "unavailable"
|
||||
;
|
||||
this.sendUpdate({
|
||||
player: {
|
||||
volume: this.player.volume,
|
||||
muted: this.player.muted,
|
||||
src: this.player.src,
|
||||
state: this.player_state,
|
||||
},
|
||||
});
|
||||
}
|
||||
state,
|
||||
}
|
||||
})
|
||||
|
||||
get player_state() {
|
||||
if (!this.player.src) return "stopped";
|
||||
if (this.player.ended) return "stopped";
|
||||
if (this.player.paused) return "paused";
|
||||
return "playing";
|
||||
}
|
||||
|
||||
player_play(src) {
|
||||
if (src) this.player.src = src;
|
||||
this.player.play();
|
||||
}
|
||||
player_pause() {
|
||||
this.player.pause();
|
||||
}
|
||||
player_stop() {
|
||||
this.player.pause();
|
||||
this.player.src = null;
|
||||
}
|
||||
player_set_volume(level) {
|
||||
if (level === undefined) return;
|
||||
this.player.volume = level;
|
||||
}
|
||||
player_mute(mute) {
|
||||
if (mute === undefined) mute = !this.player.muted;
|
||||
this.player.muted = Boolean(mute);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,82 @@
|
||||
export const ScreenSaverMixin = (SuperClass) => {
|
||||
class ScreenSaverMixinClass extends SuperClass {
|
||||
|
||||
private _panel;
|
||||
private _listeners = {};
|
||||
private _brightness = 255;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
const panel = this._panel = document.createElement("div")
|
||||
panel.setAttribute("browser-mod", "");
|
||||
panel.attachShadow({ mode: "open" });
|
||||
const styleEl = document.createElement("style");
|
||||
styleEl.innerHTML = `
|
||||
:host {
|
||||
background: rgba(0,0,0, var(--darkness));
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10000;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
}
|
||||
:host([dark]) {
|
||||
background: rgba(0,0,0,1);
|
||||
}
|
||||
`
|
||||
panel.shadowRoot.appendChild(styleEl);
|
||||
document.body.appendChild(panel);
|
||||
|
||||
this.addEventListener("command-screen_off", () => this._screen_off());
|
||||
this.addEventListener("command-screen_on", (ev) => this._screen_on(ev));
|
||||
|
||||
this.connectionPromise.then(() => this._screen_on());
|
||||
}
|
||||
|
||||
private _screen_off() {
|
||||
this._panel.setAttribute("dark", "");
|
||||
|
||||
this.sendUpdate({
|
||||
screen_on: false,
|
||||
screen_brightness: 0,
|
||||
});
|
||||
|
||||
const l = () => this._screen_on();
|
||||
for (const ev of ["pointerdown", "pointermove", "keydown"]) {
|
||||
this._listeners[ev] = l;
|
||||
window.addEventListener(ev, l);
|
||||
}
|
||||
}
|
||||
|
||||
private _screen_on(ev=undefined) {
|
||||
if (ev?.detail?.brightness) {
|
||||
this._brightness = ev.detail.brightness;
|
||||
this._panel.style.setProperty("--darkness", 1-ev.detail.brightness/255)
|
||||
}
|
||||
this._panel.removeAttribute("dark");
|
||||
this.sendUpdate({
|
||||
screen_on: true,
|
||||
screen_brightness: this._brightness,
|
||||
});
|
||||
|
||||
for (const ev of ["pointerdown", "pointermove", "keydown"]) {
|
||||
if (this._listeners[ev]) {
|
||||
window.removeEventListener(ev, this._listeners[ev])
|
||||
this._listeners[ev] = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
return ScreenSaverMixinClass
|
||||
}
|
||||
|
||||
export const BrowserModScreensaverMixin = (C) =>
|
||||
class extends C {
|
||||
constructor() {
|
||||
|
||||
Reference in New Issue
Block a user