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

Switch to typescript

Browse Source
This commit is contained in:
Thomas Lovén 2022-04-18 18:49:31 +00:00
parent df6bada119
commit 089ca8dc08
18 changed files with 1455 additions and 276 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1139
custom_components/browser_mod/browser_mod.js
View File

File diff suppressed because one or more lines are too long

28
js/browser-player-editor.js
View File

@ -1,28 +0,0 @@
const bases = [
customElements.whenDefined("home-assistant-main"),
customElements.whenDefined("hui-view"),
];
Promise.race(bases).then(() => {
const LitElement = customElements.get("home-assistant-main")
? Object.getPrototypeOf(customElements.get("home-assistant-main"))
: Object.getPrototypeOf(customElements.get("hui-view"));
const html = LitElement.prototype.html;
const css = LitElement.prototype.css;
class BrowserPlayerEditor extends LitElement {
setConfig(config) {}
render() {
return html` <div>Nothing to configure.</div> `;
}
}
if (!customElements.get("browser-player-editor")) {
customElements.define("browser-player-editor", BrowserPlayerEditor);
window.customCards = window.customCards || [];
window.customCards.push({
type: "browser-player",
name: "Browser Player",
preview: true,
});
}
});

25
js/browser-player-editor.ts Normal file
View File

@ -0,0 +1,25 @@
import { LitElement, html } from "lit";
class BrowserPlayerEditor extends LitElement {
setConfig(config) {}
render() {
return html` <div>Nothing to configure.</div> `;
}
}
(async () => {
while (
(customElements.get("home-assistant") ?? customElements.get("hc-main")) ===
undefined
)
await new Promise((resolve) => window.setTimeout(resolve, 100));
if (!customElements.get("browser-player-editor")) {
customElements.define("browser-player-editor", BrowserPlayerEditor);
(window as any).customCards = (window as any).customCards || [];
(window as any).customCards.push({
type: "browser-player",
name: "Browser Player",
preview: true,
});
}
})();

142
js/browser-player.js
View File

@ -1,142 +0,0 @@
import { deviceID, setDeviceID } from "card-tools/src/deviceID";
import { moreInfo } from "card-tools/src/more-info";
import "./browser-player-editor.js";
const bases = [
customElements.whenDefined("home-assistant-main"),
customElements.whenDefined("hui-view"),
];
Promise.race(bases).then(() => {
const LitElement = customElements.get("home-assistant-main")
? Object.getPrototypeOf(customElements.get("home-assistant-main"))
: Object.getPrototypeOf(customElements.get("hui-view"));
const html = LitElement.prototype.html;
const css = LitElement.prototype.css;
class BrowserPlayer extends LitElement {
static get properties() {
return {
hass: {},
};
}
static getConfigElement() {
return document.createElement("browser-player-editor");
}
static getStubConfig() {
return {};
}
async setConfig(config) {
this._config = config;
while (!window.browser_mod) {
await new Promise((resolve) => setTimeout(resolve, 1000));
}
for (const event of [
"play",
"pause",
"ended",
"volumechange",
"canplay",
"loadeddata",
])
window.browser_mod.player.addEventListener(event, () =>
this.requestUpdate()
);
}
handleMute(ev) {
window.browser_mod.player_mute();
}
handleVolumeChange(ev) {
const vol = parseFloat(ev.target.value);
window.browser_mod.player_set_volume(vol);
}
handleMoreInfo(ev) {
moreInfo("media_player." + window.browser_mod.entity_id);
}
handlePlayPause(ev) {
if (window.browser_mod.player.paused) window.browser_mod.player_play();
else window.browser_mod.player_pause();
}
setDeviceID() {
const newID = prompt("Set deviceID", deviceID);
if (newID !== deviceID) {
setDeviceID(newID);
this.requestUpdate();
}
}
render() {
if (!window.browser_mod) {
window.setTimeout(() => this.requestUpdate(), 100);
return html``;
}
const player = window.browser_mod.player;
return html`
<ha-card>
<div class="card-content">
<ha-icon-button @click=${this.handleMute}>
<ha-icon
.icon=${player.muted ? "mdi:volume-off" : "mdi:volume-high"}
></ha-icon>
</ha-icon-button>
<ha-slider
min="0"
max="1"
step="0.01"
?disabled=${player.muted}
value=${player.volume}
@change=${this.handleVolumeChange}
></ha-slider>
${window.browser_mod.player_state === "stopped"
? html`<div class="placeholder"></div>`
: html`
<ha-icon-button @click=${this.handlePlayPause} highlight>
<ha-icon
.icon=${player.paused ? "mdi:play" : "mdi:pause"}
></ha-icon>
</ha-icon-button>
`}
<ha-icon-button @click=${this.handleMoreInfo}>
<ha-icon .icon=${"mdi:cog"}></ha-icon>
</ha-icon-button>
</div>
<div class="device-id" @click=${this.setDeviceID}>${deviceID}</div>
</ha-card>
`;
}
static get styles() {
return css`
paper-icon-button[highlight] {
color: var(--accent-color);
}
.card-content {
display: flex;
justify-content: center;
}
.placeholder {
width: 24px;
padding: 8px;
}
.device-id {
opacity: 0.7;
font-size: xx-small;
margin-top: -10px;
user-select: all;
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
}
ha-icon-button ha-icon {
display: flex;
}
`;
}
}
if (!customElements.get("browser-player"))
customElements.define("browser-player", BrowserPlayer);
});

142
js/browser-player.ts Normal file
View File

@ -0,0 +1,142 @@
import { LitElement, html, css } from "lit";
import { property } from "lit/decorators.js";
import { deviceID, setDeviceID } from "card-tools/src/deviceID";
import { fireEvent } from "card-tools/src/event";
import "./browser-player-editor.ts";
import "./types";
class BrowserPlayer extends LitElement {
@property() hass;
static getConfigElement() {
return document.createElement("browser-player-editor");
}
static getStubConfig() {
return {};
}
async setConfig(config) {
while (!window.browser_mod) {
await new Promise((resolve) => setTimeout(resolve, 1000));
}
for (const event of [
"play",
"pause",
"ended",
"volumechange",
"canplay",
"loadeddata",
])
window.browser_mod.player.addEventListener(event, () =>
this.requestUpdate()
);
}
handleMute(ev) {
window.browser_mod.player_mute();
}
handleVolumeChange(ev) {
const vol = parseFloat(ev.target.value);
window.browser_mod.player_set_volume(vol);
}
handleMoreInfo(ev) {
fireEvent(
"hass-more-info",
{ entityId: `media_player.${window.browser_mod.entity_id}` },
this
);
}
handlePlayPause(ev) {
if (window.browser_mod.player.paused) window.browser_mod.player_play();
else window.browser_mod.player_pause();
}
setDeviceID() {
const newID = prompt("Set deviceID", deviceID);
if (newID !== deviceID) {
setDeviceID(newID);
this.requestUpdate();
}
}
render() {
if (!window.browser_mod) {
window.setTimeout(() => this.requestUpdate(), 100);
return html``;
}
const player = window.browser_mod.player;
return html`
<ha-card>
<div class="card-content">
<ha-icon-button @click=${this.handleMute}>
<ha-icon
.icon=${player.muted ? "mdi:volume-off" : "mdi:volume-high"}
></ha-icon>
</ha-icon-button>
<ha-slider
min="0"
max="1"
step="0.01"
?disabled=${player.muted}
value=${player.volume}
@change=${this.handleVolumeChange}
></ha-slider>
${window.browser_mod.player_state === "stopped"
? html`<div class="placeholder"></div>`
: html`
<ha-icon-button @click=${this.handlePlayPause} highlight>
<ha-icon
.icon=${player.paused ? "mdi:play" : "mdi:pause"}
></ha-icon>
</ha-icon-button>
`}
<ha-icon-button @click=${this.handleMoreInfo}>
<ha-icon .icon=${"mdi:cog"}></ha-icon>
</ha-icon-button>
</div>
<div class="device-id" @click=${this.setDeviceID}>${deviceID}</div>
</ha-card>
`;
}
static get styles() {
return css`
paper-icon-button[highlight] {
color: var(--accent-color);
}
.card-content {
display: flex;
justify-content: center;
}
.placeholder {
width: 24px;
padding: 8px;
}
.device-id {
opacity: 0.7;
font-size: xx-small;
margin-top: -10px;
user-select: all;
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
}
ha-icon-button ha-icon {
display: flex;
}
`;
}
}
(async () => {
while (
(customElements.get("home-assistant") ?? customElements.get("hc-main")) ===
undefined
)
await new Promise((resolve) => window.setTimeout(resolve, 100));
if (!customElements.get("browser-player"))
customElements.define("browser-player", BrowserPlayer);
})();

24
js/browser.js → js/browser.ts
View File

@ -1,4 +1,5 @@
import { fireEvent } from "card-tools/src/event";
import { ha_element } from "card-tools/src/hass";
export const BrowserModBrowserMixin = (C) =>
class extends C {
@ -12,9 +13,7 @@ export const BrowserModBrowserMixin = (C) =>
sensor_update() {
const update = async () => {
const battery = navigator.getBattery
? await navigator.getBattery()
: undefined;
const battery = (<any>navigator).getBattery?.();
this.sendUpdate({
browser: {
path: window.location.pathname,
@ -24,16 +23,9 @@ export const BrowserModBrowserMixin = (C) =>
fullyKiosk: this.isFully,
width: window.innerWidth,
height: window.innerHeight,
battery_level: this.isFully
? window.fully.getBatteryLevel()
: battery
? battery.level * 100
: undefined,
charging: this.isFully
? window.fully.isPlugged()
: battery
? battery.charging
: undefined,
battery_level:
window.fully?.getBatteryLevel() ?? battery?.level * 100,
charging: window.fully?.isPlugged() ?? battery?.charging,
darkMode:
this._hass && this._hass.themes && this._hass.themes.darkMode,
userData: this._hass && this._hass.user,
@ -47,10 +39,6 @@ export const BrowserModBrowserMixin = (C) =>
do_navigate(path) {
if (!path) return;
history.pushState(null, "", path);
fireEvent(
"location-changed",
{},
document.querySelector("home-assistant")
);
fireEvent("location-changed", {}, ha_element());
}
};

0
js/camera.js → js/camera.ts
View File

15
js/connection.js → js/connection.ts
View File

@ -1,16 +1,18 @@
import { deviceID } from "card-tools/src/deviceID";
import { hass, provideHass } from "card-tools/src/hass";
const hassWindow: any = window;
export class BrowserModConnection {
_connection;
_hass;
async connect() {
const isCast = document.querySelector("hc-main") !== null;
if (!isCast) {
if (!window.hassConnection) {
window.setTimeout(() => this.connect(), 100);
return;
} else {
this._connection = (await window.hassConnection).conn;
}
while (!hassWindow.hassConnection)
await new Promise((resolve) => window.setTimeout(resolve, 100));
this._connection = (await hassWindow.hassConnection).conn;
} else {
this._connection = hass().connection;
}
@ -20,7 +22,6 @@ export class BrowserModConnection {
deviceID: deviceID,
});
this._hass_patched = false;
provideHass(this);
}

2
js/fullyKiosk.js → js/fullyKiosk.ts
View File

@ -37,7 +37,7 @@ export const FullyKioskMixin = (C) =>
this._keepingAlive = false;
}
fully_update(event) {
fully_update(event?) {
if (!this.isFully) return;
if (event === "screenOn") {
window.clearTimeout(this._keepAliveTimer);

18
js/main.js → js/main.ts
View File

@ -2,6 +2,7 @@ import { deviceID } from "card-tools/src/deviceID";
import { lovelace_view } from "card-tools/src/hass";
import { popUp } from "card-tools/src/popup";
import { fireEvent } from "card-tools/src/event";
import { ha_element } from "card-tools/src/hass";
import "./browser-player";
import { BrowserModConnection } from "./connection";
@ -16,7 +17,7 @@ import pjson from "../package.json";
const ext = (baseClass, mixins) =>
mixins.reduceRight((base, mixin) => mixin(base), baseClass);
class BrowserMod extends ext(BrowserModConnection, [
export class BrowserMod extends ext(BrowserModConnection, [
BrowserModBrowserMixin,
BrowserModPopupsMixin,
BrowserModScreensaverMixin,
@ -31,8 +32,8 @@ class BrowserMod extends ext(BrowserModConnection, [
this.connect();
document.body.addEventListener("ll-custom", (ev) => {
if (ev.detail.browser_mod) {
this.msg_callback(ev.detail.browser_mod);
if ((ev as CustomEvent).detail.browser_mod) {
this.msg_callback((ev as CustomEvent).detail.browser_mod);
}
});
@ -69,7 +70,7 @@ class BrowserMod extends ext(BrowserModConnection, [
this.do_blackout(msg.time ? parseInt(msg.time) : undefined),
"no-blackout": (msg) => {
if (msg.brightness && this.isFully) {
window.fully.setScreenBrightness(msg.brightness);
(window as any).fully.setScreenBrightness(msg.brightness);
}
this.no_blackout();
},
@ -96,11 +97,7 @@ class BrowserMod extends ext(BrowserModConnection, [
set_theme(msg) {
if (!msg.theme) msg.theme = "default";
fireEvent(
"settheme",
{ theme: msg.theme },
document.querySelector("home-assistant")
);
fireEvent("settheme", { theme: msg.theme }, ha_element());
}
lovelace_reload(msg) {
@ -147,6 +144,7 @@ const bases = [
];
Promise.race(bases).then(() => {
window.setTimeout(() => {
window.browser_mod = window.browser_mod || new BrowserMod();
(window as any).browser_mod =
(window as any).browser_mod || new BrowserMod();
}, 1000);
});

2
js/mediaPlayer.js → js/mediaPlayer.ts
View File

@ -19,7 +19,7 @@ export const BrowserModMediaPlayerMixin = (C) =>
);
}
player_update(ev) {
player_update(ev?) {
this.sendUpdate({
player: {
volume: this.player.volume,

10
js/popups.js → js/popups.ts
View File

@ -1,5 +1,5 @@
import { fireEvent } from "card-tools/src/event";
import { load_lovelace, lovelace } from "card-tools/src/hass";
import { load_lovelace, lovelace, ha_element } from "card-tools/src/hass";
import { moreInfo } from "card-tools/src/more-info";
import { closePopUp, popUp } from "card-tools/src/popup";
@ -28,11 +28,7 @@ export const BrowserModPopupsMixin = (C) =>
this.do_popup(d);
window.setTimeout(() => {
fireEvent(
"hass-more-info",
{ entityID: "." },
document.querySelector("home-assistant")
);
fireEvent("hass-more-info", { entityID: "." }, ha_element());
}, 50);
}
@ -83,7 +79,7 @@ export const BrowserModPopupsMixin = (C) =>
message,
duration: parseInt(duration),
},
document.querySelector("home-assistant")
ha_element()
);
}
};

2
js/screensaver.js → js/screensaver.ts
View File

@ -80,7 +80,7 @@ export const BrowserModScreensaverMixin = (C) =>
_ss_clear() {
window.clearTimeout(this._screenSaverTimer);
for (const [k, v] of Object.entries(this._screenSaver.listeners)) {
window.removeEventListener(k, v);
window.removeEventListener(k as any, v as any);
}
}

34
js/types.ts Normal file
View File

@ -0,0 +1,34 @@
const a = {};
import { BrowserMod } from "./main";
interface FullyKiosk {
// Get device info
getIp4Address: { (): String };
getDeviceId: { (): String };
getBatteryLevel: { (): Number };
getScreenBrightness: { (): Number };
getScreenOn: { (): Boolean };
isPlugged: { (): Boolean };
// Controll device, show notifications, send network data etc.
turnScreenOn: { () };
turnScreenOff: { (keepAlive?: Boolean) };
// Control fully and browsing
startScreensaver: { () };
stopScreensaver: { () };
// Respond to events
bind: { (event: String, action: String) };
// Motion detection
getCamshotJpgBase64: { (): String };
}
declare global {
interface Window {
browser_mod?: BrowserMod;
fully?: FullyKiosk;
}
}

44
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "browser_mod",
"version": "1.5.1",
"version": "1.5.3",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -346,6 +346,12 @@
"@jridgewell/sourcemap-codec": "^1.4.10"
}
},
"@lit/reactive-element": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.3.1.tgz",
"integrity": "sha512-nOJARIr3pReqK3hfFCSW2Zg/kFcFsSAlIE7z4a0C9D2dPrgD/YSn3ZP2ET/rxKB65SXyG7jJbkynBRm+tGlacw==",
"dev": true
},
"@rollup/plugin-babel": {
"version": "5.3.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@ -413,6 +419,12 @@
"@types/node": "*"
}
},
"@types/trusted-types": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
"integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==",
"dev": true
},
"@yarn-tool/resolve-package": {
"version": "1.0.46",
"resolved": "https://registry.npmjs.org/@yarn-tool/resolve-package/-/resolve-package-1.0.46.tgz",
@ -751,6 +763,36 @@
"universalify": "^2.0.0"
}
},
"lit": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/lit/-/lit-2.2.2.tgz",
"integrity": "sha512-eN3+2QRHn/erxYB88AXiiRgQA6RltE9MhzySCwX+ACOxA/MLWN3VdXvcbZD9PN09zmUwlgzDvW3T84YWj2Sa0A==",
"dev": true,
"requires": {
"@lit/reactive-element": "^1.3.0",
"lit-element": "^3.2.0",
"lit-html": "^2.2.0"
}
},
"lit-element": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.0.tgz",
"integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==",
"dev": true,
"requires": {
"@lit/reactive-element": "^1.3.0",
"lit-html": "^2.2.0"
}
},
"lit-html": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.2.2.tgz",
"integrity": "sha512-cJofCRXuizwyaiGt9pJjJOcauezUlSB6t87VBXsPwRhbzF29MgD8GH6fZ0BuZdXAAC02IRONZBd//VPUuU8QbQ==",
"dev": true,
"requires": {
"@types/trusted-types": "^2.0.2"
}
},
"locate-path": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",

1
package.json
View File

@ -16,6 +16,7 @@
"@rollup/plugin-babel": "^5.3.1",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^13.2.1",
"lit": "^2.2.2",
"rollup": "^2.70.2",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.31.2",

6
rollup.config.js
View File

@ -1,13 +1,13 @@
import nodeResolve from "@rollup/plugin-node-resolve";
import json from "@rollup/plugin-json";
// import typescript from "rollup-plugin-typescript2";
import typescript from "rollup-plugin-typescript2";
import { terser } from "rollup-plugin-terser";
import babel from "@rollup/plugin-babel";
const dev = process.env.ROLLUP_WATCH;
export default {
input: "js/main.js",
input: "js/main.ts",
output: {
file: "custom_components/browser_mod/browser_mod.js",
format: "es",
@ -15,7 +15,7 @@ export default {
plugins: [
nodeResolve(),
json(),
// typescript(),
typescript(),
babel({
exclude: "node_modules/**",
}),

9
tsconfig.json Normal file
View File

@ -0,0 +1,9 @@
{
"compilerOptions": {
"target": "es2017",
"moduleResolution": "node",
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true
}
}