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

Linting and remove duplicate code

Browse Source
This commit is contained in:
Thomas Lovén 2021-05-10 09:41:47 +00:00
parent f342c20b91
commit f4ca95d436
14 changed files with 1356 additions and 3754 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

415
custom_components/browser_mod/browser_mod.js
View File

File diff suppressed because one or more lines are too long

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

@ -1,30 +1,28 @@
import { registerCard } from "card-tools/src/editor";
const bases = [customElements.whenDefined('home-assistant-main'), customElements.whenDefined('hui-view')];
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 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) {
}
setConfig(config) {}
render() {
return html`
<div>
Nothing to configure.
</div>
`;
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});
window.customCards.push({
type: "browser-player",
name: "Browser Player",
preview: true,
});
}
});

62
js/browser-player.js
View File

@ -1,18 +1,19 @@
import { deviceID, setDeviceID } from "card-tools/src/deviceId"
import { moreInfo } from "card-tools/src/more-info"
import "./browser-player-editor.js"
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')];
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 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: {},
@ -28,8 +29,17 @@ class BrowserPlayer extends LitElement {
setConfig(config) {
this._config = config;
for (const event of ["play", "pause", "ended", "volumechange", "canplay", "loadeddata"])
window.browser_mod.player.addEventListener(event, () => this.requestUpdate());
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();
@ -42,10 +52,8 @@ class BrowserPlayer extends LitElement {
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();
if (window.browser_mod.player.paused) window.browser_mod.player_play();
else window.browser_mod.player_pause();
}
setDeviceID() {
const newID = prompt("Set deviceID", deviceID);
@ -65,16 +73,13 @@ class BrowserPlayer extends LitElement {
<ha-card>
<div class="card-content">
<ha-icon-button
.icon=${player.muted
? "mdi:volume-off"
: "mdi:volume-high"
}
.icon=${player.muted ? "mdi:volume-off" : "mdi:volume-high"}
@click=${this.handleMute}
></ha-icon-button>
<ha-slider
min=0
max=1
step=0.01
min="0"
max="1"
step="0.01"
?disabled=${player.muted}
value=${player.volume}
@change=${this.handleVolumeChange}
@ -84,10 +89,7 @@ class BrowserPlayer extends LitElement {
? html`<div class="placeholder"></div>`
: html`
<ha-icon-button
.icon=${player.paused
? "mdi:play"
: "mdi:pause"
}
.icon=${player.paused ? "mdi:play" : "mdi:pause"}
@click=${this.handlePlayPause}
highlight
></ha-icon-button>
@ -98,10 +100,7 @@ class BrowserPlayer extends LitElement {
></ha-icon-button>
</div>
<div class="device-id" @click=${this.setDeviceID}>
${deviceID}
</div>
<div class="device-id" @click=${this.setDeviceID}>${deviceID}</div>
</ha-card>
`;
}
@ -128,9 +127,8 @@ class BrowserPlayer extends LitElement {
-moz-user-select: all;
-ms-user-select: all;
}
`
`;
}
}
if (!customElements.get("browser-player"))

34
js/browser.js
View File

@ -1,7 +1,7 @@
import { fireEvent } from "card-tools/src/event";
export const BrowserModBrowserMixin = (C) => class extends C {
export const BrowserModBrowserMixin = (C) =>
class extends C {
constructor() {
super();
document.addEventListener("visibilitychange", () => this.sensor_update());
@ -12,8 +12,11 @@ export const BrowserModBrowserMixin = (C) => class extends C {
sensor_update() {
const update = async () => {
const battery = navigator.getBattery ? await navigator.getBattery() : undefined;
this.sendUpdate({browser: {
const battery = navigator.getBattery
? await navigator.getBattery()
: undefined;
this.sendUpdate({
browser: {
path: window.location.pathname,
visibility: document.visibilityState,
userAgent: navigator.userAgent,
@ -21,9 +24,18 @@ export const BrowserModBrowserMixin = (C) => class extends 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: this.isFully
? window.fully.getBatteryLevel()
: battery
? battery.level * 100
: undefined,
charging: this.isFully
? window.fully.isPlugged()
: battery
? battery.charging
: undefined,
},
});
};
update();
}
@ -31,6 +43,10 @@ export const BrowserModBrowserMixin = (C) => class extends C {
do_navigate(path) {
if (!path) return;
history.pushState(null, "", path);
fireEvent("location-changed", {}, document.querySelector("home-assistant"));
}
fireEvent(
"location-changed",
{},
document.querySelector("home-assistant")
);
}
};

39
js/camera.js
View File

@ -1,8 +1,7 @@
export const BrowserModCameraMixin = (C) => class extends C {
export const BrowserModCameraMixin = (C) =>
class extends C {
setup_camera() {
console.log("Starting camera")
console.log("Starting camera");
if (this._video) return;
this._video = document.createElement("video");
@ -18,29 +17,41 @@ export const BrowserModCameraMixin = (C) => class extends C {
if (!navigator.mediaDevices) return;
console.log("Starting devices")
navigator.mediaDevices.getUserMedia({video: true, audio: false}).then((stream) => {
console.log("Starting devices");
navigator.mediaDevices
.getUserMedia({ video: true, audio: false })
.then((stream) => {
this._video.srcObject = stream;
this._video.play();
this.update_camera();
})
});
this._camera_framerate = 2;
window.addEventListener("click", () => this._video.play(), {once: true});
window.addEventListener("click", () => this._video.play(), {
once: true,
});
}
update_camera() {
this._canvas.width = this._video.videoWidth;
this._canvas.height = this._video.videoHeight;
const context = this._canvas.getContext('2d');
context.drawImage(this._video, 0, 0, this._video.videoWidth, this._video.videoHeight);
const context = this._canvas.getContext("2d");
context.drawImage(
this._video,
0,
0,
this._video.videoWidth,
this._video.videoHeight
);
this.sendUpdate({
camera: this._canvas.toDataURL('image/jpeg'),
camera: this._canvas.toDataURL("image/jpeg"),
});
setTimeout(() => this.update_camera(), Math.round(1000 / this._camera_framerate));
}
setTimeout(
() => this.update_camera(),
Math.round(1000 / this._camera_framerate)
);
}
};

12
js/connection.js
View File

@ -1,8 +1,7 @@
import { deviceID } from "card-tools/src/deviceId";
import { deviceID } from "card-tools/src/deviceID";
import { hass, provideHass } from "card-tools/src/hass";
export class BrowserModConnection {
async connect() {
const isCast = document.querySelector("hc-main") !== null;
if (!isCast) {
@ -17,7 +16,7 @@ export class BrowserModConnection{
}
this._connection.subscribeMessage((msg) => this.msg_callback(msg), {
type: 'browser_mod/connect',
type: "browser_mod/connect",
deviceID: deviceID,
});
@ -40,12 +39,9 @@ export class BrowserModConnection{
sendUpdate(data) {
if (!this.connected) return;
this._connection.sendMessage({
type: 'browser_mod/update',
type: "browser_mod/update",
deviceID,
data,
});
}
)
}
}

27
js/fullyKiosk.js
View File

@ -1,4 +1,5 @@
export const FullyKioskMixin = (C) => class extends C {
export const FullyKioskMixin = (C) =>
class extends C {
get isFully() {
return window.fully !== undefined;
}
@ -11,7 +12,16 @@ export const FullyKioskMixin = (C) => class extends C {
this._fullyMotion = false;
this._motionTimeout = undefined;
for (const ev of ["screenOn", "screenOff", "pluggedAC", "pluggedUSB", "onBatteryLevelChanged", "unplugged", "networkReconnect", "onMotion"]) {
for (const ev of [
"screenOn",
"screenOff",
"pluggedAC",
"pluggedUSB",
"onBatteryLevelChanged",
"unplugged",
"networkReconnect",
"onMotion",
]) {
window.fully.bind(ev, `window.browser_mod.fully_update("${ev}");`);
}
@ -19,11 +29,10 @@ export const FullyKioskMixin = (C) => class extends C {
}
fully_update(event) {
if(!this.isFully) return
if (!this.isFully) return;
if (event === "screenOn") {
window.clearTimeout(this._keepAliveTimer);
if(!this._keepingAlive)
this.screen_update();
if (!this._keepingAlive) this.screen_update();
} else if (event === "screenOff") {
this.screen_update();
this._keepingAlive = false;
@ -38,12 +47,14 @@ export const FullyKioskMixin = (C) => class extends C {
this.fullyMotionTriggered();
}
this.sendUpdate({fully: {
this.sendUpdate({
fully: {
battery: window.fully.getBatteryLevel(),
charging: window.fully.isPlugged(),
motion: this._fullyMotion,
ip: window.fully.getIp4Address(),
}})
},
});
}
fullyMotionTriggered() {
@ -56,4 +67,4 @@ export const FullyKioskMixin = (C) => class extends C {
}, 5000);
this.fully_update();
}
}
};

67
js/main.js
View File

@ -1,4 +1,4 @@
import { deviceID } from "card-tools/src/deviceId";
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";
@ -12,7 +12,6 @@ import { BrowserModScreensaverMixin } from "./screensaver";
import { BrowserModPopupsMixin } from "./popups";
import { BrowserModBrowserMixin } from "./browser";
const ext = (baseClass, mixins) =>
mixins.reduceRight((base, mixin) => mixin(base), baseClass);
@ -24,8 +23,6 @@ class BrowserMod extends ext(BrowserModConnection, [
FullyKioskMixin,
BrowserModMediaPlayerMixin,
]) {
constructor() {
super();
this.entity_id = deviceID.replace("-", "_");
@ -36,12 +33,15 @@ class BrowserMod extends ext(BrowserModConnection, [
if (ev.detail.browser_mod) {
this.msg_callback(ev.detail.browser_mod);
}
})
});
const pjson = require('../package.json');
console.info(`%cBROWSER_MOD ${pjson.version} IS INSTALLED
const pjson = require("../package.json");
console.info(
`%cBROWSER_MOD ${pjson.version} IS INSTALLED
%cDeviceID: ${deviceID}`,
"color: green; font-weight: bold", "");
"color: green; font-weight: bold",
""
);
}
async msg_callback(msg) {
@ -65,56 +65,62 @@ class BrowserMod extends ext(BrowserModConnection, [
"lovelace-reload": (msg) => this.lovelace_reload(msg),
"window-reload": () => window.location.reload(),
blackout: (msg) => this.do_blackout(msg.time ? parseInt(msg.time) : undefined),
blackout: (msg) =>
this.do_blackout(msg.time ? parseInt(msg.time) : undefined),
"no-blackout": (msg) => {
if (msg.brightness && this.isFully) {
window.fully.setScreenBrightness(msg.brightness);
}
this.no_blackout()
this.no_blackout();
},
"call-service": (msg) => this.call_service(msg),
"commands": async (msg) => {
commands: async (msg) => {
for (const m of msg.commands) {
await this.msg_callback(m);
}
},
"delay": async (msg) => await new Promise((resolve) => {window.setTimeout(resolve, msg.seconds*1000)}),
delay: async (msg) =>
await new Promise((resolve) => {
window.setTimeout(resolve, msg.seconds * 1000);
}),
};
await handlers[msg.command.replace("_", "-")](msg);
}
debug(msg) {
popUp(`deviceID`, {type: "markdown", content: `# ${deviceID}`})
popUp(`deviceID`, { type: "markdown", content: `# ${deviceID}` });
alert(deviceID);
}
set_theme(msg) {
if (!msg.theme) msg.theme = "default";
fireEvent("settheme", {theme: msg.theme}, document.querySelector("home-assistant"));
fireEvent(
"settheme",
{ theme: msg.theme },
document.querySelector("home-assistant")
);
}
lovelace_reload(msg) {
const ll = lovelace_view();
if (ll)
fireEvent("config-refresh", {}, ll);
if (ll) fireEvent("config-refresh", {}, ll);
}
call_service(msg) {
const _replaceThis = (data) => {
if (typeof(data) === "string" && data === "this")
return deviceID;
if (Array.isArray(data))
return data.map(_replaceThis);
if (typeof data === "string" && data === "this") return deviceID;
if (Array.isArray(data)) return data.map(_replaceThis);
if (data.constructor == Object) {
for (const key in data)
data[key] = _replaceThis(data[key]);
for (const key in data) data[key] = _replaceThis(data[key]);
}
return data;
}
const [domain, service] = msg.service.split(".", 2);
let service_data = _replaceThis(JSON.parse(JSON.stringify(msg.service_data)));
};
const [domain, service] = msg.service.split(".", 2);
let service_data = _replaceThis(
JSON.parse(JSON.stringify(msg.service_data))
);
this._hass.callService(domain, service, service_data);
}
@ -133,15 +139,14 @@ class BrowserMod extends ext(BrowserModConnection, [
this.screen_update();
this.sensor_update();
}
}
const bases = [customElements.whenDefined('home-assistant'), customElements.whenDefined('hc-main')];
const bases = [
customElements.whenDefined("home-assistant"),
customElements.whenDefined("hc-main"),
];
Promise.race(bases).then(() => {
window.setTimeout(() => {
window.browser_mod = window.browser_mod || new BrowserMod();
},
1000
);
}, 1000);
});

22
js/mediaPlayer.js
View File

@ -1,5 +1,5 @@
export const BrowserModMediaPlayerMixin = (C) => class extends C {
export const BrowserModMediaPlayerMixin = (C) =>
class extends C {
constructor() {
super();
this.player = new Audio();
@ -8,16 +8,20 @@ export const BrowserModMediaPlayerMixin = (C) => class extends C {
this.player.addEventListener(event, () => this.player_update());
}
window.addEventListener("click", () => this.player.play(), {once: true});
window.addEventListener("click", () => this.player.play(), {
once: true,
});
}
player_update(ev) {
this.sendUpdate({player: {
this.sendUpdate({
player: {
volume: this.player.volume,
muted: this.player.muted,
src: this.player.src,
state: this.player_state,
}})
},
});
}
get player_state() {
@ -28,8 +32,7 @@ export const BrowserModMediaPlayerMixin = (C) => class extends C {
}
player_play(src) {
if(src)
this.player.src = src;
if (src) this.player.src = src;
this.player.play();
}
player_pause() {
@ -44,8 +47,7 @@ export const BrowserModMediaPlayerMixin = (C) => class extends C {
this.player.volume = level;
}
player_mute(mute) {
if(mute === undefined)
mute = !this.player.muted;
if (mute === undefined) mute = !this.player.muted;
this.player.muted = Boolean(mute);
}
}
};

50
js/popups.js
View File

@ -3,16 +3,17 @@ import { load_lovelace, lovelace } from "card-tools/src/hass";
import { moreInfo } from "card-tools/src/more-info";
import { closePopUp, popUp } from "card-tools/src/popup";
export const BrowserModPopupsMixin = (C) => class extends C {
export const BrowserModPopupsMixin = (C) =>
class extends C {
constructor() {
super();
if (document.querySelector("home-assistant"))
document.querySelector("home-assistant").addEventListener("hass-more-info", (ev) => this._popup_card(ev));
document
.querySelector("home-assistant")
.addEventListener("hass-more-info", (ev) => this._popup_card(ev));
const isCast = document.querySelector("hc-main") !== null;
if(!isCast)
load_lovelace();
if (!isCast) load_lovelace();
}
_popup_card(ev) {
@ -25,20 +26,27 @@ export const BrowserModPopupsMixin = (C) => class extends C {
const d = data[ev.detail.entityId];
if (!d) return;
popUp(
d.title,
d.card,
d.large || false,
d.style
);
this.do_popup(d);
window.setTimeout(() => {
fireEvent("hass-more-info", {entityID: "."}, document.querySelector("home-assistant"));
fireEvent(
"hass-more-info",
{ entityID: "." },
document.querySelector("home-assistant")
);
}, 50);
}
do_popup(cfg) {
if (!(cfg.title || cfg.auto_close || cfg.hide_header)) return;
if (!cfg.card) return;
if (!(cfg.title || cfg.auto_close || cfg.hide_header)) {
console.error(
"browser_mod: popup: Must specify title, auto_close or hide_header."
);
return;
}
if (!cfg.card) {
console.error("browser_mod: popup: No card specified");
return;
}
const open = () => {
popUp(
@ -46,7 +54,7 @@ export const BrowserModPopupsMixin = (C) => class extends C {
cfg.card,
cfg.large,
cfg.style,
cfg.auto_close || cfg.hide_header,
cfg.auto_close || cfg.hide_header
);
};
@ -69,11 +77,13 @@ export const BrowserModPopupsMixin = (C) => class extends C {
do_toast(message, duration) {
if (!message) return;
fireEvent("hass-notification", {
fireEvent(
"hass-notification",
{
message,
duration: parseInt(duration),
}, document.querySelector("home-assistant"));
}
},
document.querySelector("home-assistant")
);
}
};

46
js/screensaver.js
View File

@ -1,4 +1,5 @@
export const BrowserModScreensaverMixin = (C) => class extends C {
export const BrowserModScreensaverMixin = (C) =>
class extends C {
constructor() {
super();
this._blackout_panel = document.createElement("div");
@ -28,7 +29,6 @@ export const BrowserModScreensaverMixin = (C) => class extends C {
display: none;
`;
document.body.appendChild(this._blackout_panel);
}
screensaver_set(fn, clearfn, time) {
@ -40,13 +40,16 @@ export const BrowserModScreensaverMixin = (C) => class extends C {
timeout: time,
listeners: {},
active: false,
}
};
const l = () => this.screensaver_update();
for (const event of ["mousemove", "mousedown", "keydown", "touchstart"]) {
window.addEventListener(event, l);
this._screenSaver.listeners[event] = l;
}
this._screenSaver.timer = window.setTimeout(() => this._ss_run(), time*1000);
this._screenSaver.timer = window.setTimeout(
() => this._ss_run(),
time * 1000
);
}
screensaver_update() {
@ -54,20 +57,22 @@ export const BrowserModScreensaverMixin = (C) => class extends C {
this.screensaver_stop();
} else {
window.clearTimeout(this._screenSaver.timer);
this._screenSaver.timer = window.setTimeout(() => this._ss_run(), this._screenSaver.timeout*1000);
this._screenSaver.timer = window.setTimeout(
() => this._ss_run(),
this._screenSaver.timeout * 1000
);
}
}
screensaver_stop() {
this._ss_clear();
this._screenSaver.active = false;
if(this._screenSaver.clearfn)
this._screenSaver.clearfn();
if (this._screenSaver.clearfn) this._screenSaver.clearfn();
if (this._screenSaver.timeout) {
this.screensaver_set(
this._screenSaver.fn,
this._screenSaver.clearfn,
this._screenSaver.timeout,
this._screenSaver.timeout
);
}
}
@ -87,15 +92,13 @@ export const BrowserModScreensaverMixin = (C) => class extends C {
do_blackout(timeout) {
this.screensaver_set(
() => {
if(this.isFully)
window.fully.turnScreenOff(true);
else
this._blackout_panel.style.display = "block";
if (this.isFully) window.fully.turnScreenOff(true);
else this._blackout_panel.style.display = "block";
this.screen_update();
},
() => {
if(this._blackout_panel.style.display = "block")
this._blackout_panel.style.display = "none"
if ((this._blackout_panel.style.display = "block"))
this._blackout_panel.style.display = "none";
if (this.isFully && !window.fully.getScreenOn())
window.fully.turnScreenOn();
this.screen_update();
@ -105,17 +108,20 @@ export const BrowserModScreensaverMixin = (C) => class extends C {
}
no_blackout() {
if(this.isFully)
window.fully.turnScreenOn();
if (this.isFully) window.fully.turnScreenOn();
this.screensaver_stop();
}
screen_update() {
this.sendUpdate({screen: {
this.sendUpdate({
screen: {
blackout: this.isFully
? !window.fully.getScreenOn()
: Boolean(this._blackout_panel.style.display === "block"),
brightness: this.isFully ? window.fully.getScreenBrightness() : undefined,
}})
}
brightness: this.isFully
? window.fully.getScreenBrightness()
: undefined,
},
});
}
};

3643
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -12,8 +12,8 @@
"author": "Thomas Lovén",
"license": "MIT",
"devDependencies": {
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
"webpack": "^5.36.2",
"webpack-cli": "^4.7.0"
},
"dependencies": {
"card-tools": "github:thomasloven/lovelace-card-tools"

7
test/lovelace.yaml
View File

@ -45,6 +45,8 @@ views:
card:
type: markdown
content: Local popup for climate.hvac
light.kitchen_lights:
type: No card
cards:
- type: button
@ -57,3 +59,8 @@ views:
name: Override global popup-card
tap_action:
action: more-info
- type: button
entity: light.kitchen_lights
name: No card config
tap_action:
action: more-info