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

Lots of changes and modernization. WIP

Browse Source
This commit is contained in:
Thomas Lovén
2022-07-13 21:02:47 +00:00
parent 69e9642b4b
commit 466a5eb5e7
26 changed files with 1691 additions and 1185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
js/plugin/browser.ts
View File

@@ -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,
},
});
};

201
js/plugin/connection.ts
View File

@@ -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;
}

53
js/plugin/main.ts
View File

@@ -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 () => {

96
js/plugin/mediaPlayer.ts
View File

@@ -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);
}
};
}
}

79
js/plugin/screensaver.ts
View File

@@ -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() {