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

Remove card-tools dependencies

Browse Source
This commit is contained in:
Thomas Lovén 2022-07-16 01:06:52 +00:00
parent 0ebd347035
commit 09faf4a286
5 changed files with 82 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
custom_components/browser_mod/browser_mod.js
View File

@ -59,85 +59,6 @@ const i$1=(i,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...
* SPDX-License-Identifier: BSD-3-Clause * SPDX-License-Identifier: BSD-3-Clause
*/var n;null!=(null===(n=window.HTMLSlotElement)||void 0===n?void 0:n.prototype.assignedElements)?(o,n)=>o.assignedElements(n):(o,n)=>o.assignedNodes(n).filter((o=>o.nodeType===Node.ELEMENT_NODE)); */var n;null!=(null===(n=window.HTMLSlotElement)||void 0===n?void 0:n.prototype.assignedElements)?(o,n)=>o.assignedElements(n):(o,n)=>o.assignedNodes(n).filter((o=>o.nodeType===Node.ELEMENT_NODE));
const ID_STORAGE_KEY$1 = 'lovelace-player-device-id';
function _deviceID() {
if(!localStorage[ID_STORAGE_KEY$1])
{
const s4 = () => {
return Math.floor((1+Math.random())*100000).toString(16).substring(1);
};
if(window['fully'] && typeof fully.getDeviceId === "function")
localStorage[ID_STORAGE_KEY$1] = fully.getDeviceId();
else
localStorage[ID_STORAGE_KEY$1] = `${s4()}${s4()}-${s4()}${s4()}`;
}
return localStorage[ID_STORAGE_KEY$1];
}
let deviceID = _deviceID();
const setDeviceID = (id) => {
if(id === null) return;
if(id === "clear") {
localStorage.removeItem(ID_STORAGE_KEY$1);
} else {
localStorage[ID_STORAGE_KEY$1] = id;
}
deviceID = _deviceID();
};
const params = new URLSearchParams(window.location.search);
if(params.get('deviceID')) {
setDeviceID(params.get('deviceID'));
}
async function hass_loaded() {
await Promise.race([
customElements.whenDefined("home-assistant"),
customElements.whenDefined("hc-main")
]);
return true;
}
function lovelace_view() {
var root = document.querySelector("hc-main");
if(root) {
root = root && root.shadowRoot;
root = root && root.querySelector("hc-lovelace");
root = root && root.shadowRoot;
root = root && root.querySelector("hui-view") || root.querySelector("hui-panel-view");
return root;
}
root = document.querySelector("home-assistant");
root = root && root.shadowRoot;
root = root && root.querySelector("home-assistant-main");
root = root && root.shadowRoot;
root = root && root.querySelector("app-drawer-layout partial-panel-resolver");
root = root && root.shadowRoot || root;
root = root && root.querySelector("ha-panel-lovelace");
root = root && root.shadowRoot;
root = root && root.querySelector("hui-root");
root = root && root.shadowRoot;
root = root && root.querySelector("ha-app-layout");
root = root && root.querySelector("#view");
root = root && root.firstElementChild;
return root;
}
function fireEvent(ev, detail, entity=null) {
ev = new Event(ev, {
bubbles: true,
cancelable: false,
composed: true,
});
ev.detail = detail || {};
if(entity) {
entity.dispatchEvent(ev);
} else {
var root = lovelace_view();
if (root) root.dispatchEvent(ev);
}
}
class BrowserPlayerEditor extends s { class BrowserPlayerEditor extends s {
setConfig(config) { } setConfig(config) { }
render() { render() {
@ -145,7 +66,10 @@ class BrowserPlayerEditor extends s {
} }
} }
(async () => { (async () => {
await hass_loaded(); while (!window.browser_mod) {
await new Promise((resolve) => setTimeout(resolve, 1000));
}
await window.browser_mod.connectionPromise;
if (!customElements.get("browser-player-editor")) { if (!customElements.get("browser-player-editor")) {
customElements.define("browser-player-editor", BrowserPlayerEditor); customElements.define("browser-player-editor", BrowserPlayerEditor);
window.customCards = window.customCards || []; window.customCards = window.customCards || [];
@ -168,6 +92,7 @@ class BrowserPlayer extends s {
while (!window.browser_mod) { while (!window.browser_mod) {
await new Promise((resolve) => setTimeout(resolve, 1000)); await new Promise((resolve) => setTimeout(resolve, 1000));
} }
this.player = window.browser_mod.player;
for (const event of [ for (const event of [
"play", "play",
"pause", "pause",
@ -176,51 +101,51 @@ class BrowserPlayer extends s {
"canplay", "canplay",
"loadeddata", "loadeddata",
]) ])
window.browser_mod.player.addEventListener(event, () => this.requestUpdate()); this.player.addEventListener(event, () => this.requestUpdate());
} }
handleMute(ev) { handleMute(ev) {
window.browser_mod.player_mute(); this.player.muted = !this.player.muted;
} }
handleVolumeChange(ev) { handleVolumeChange(ev) {
const vol = parseFloat(ev.target.value); const volume_level = parseFloat(ev.target.value);
window.browser_mod.player_set_volume(vol); this.player.volume = volume_level;
} }
handleMoreInfo(ev) { handleMoreInfo(ev) {
fireEvent("hass-more-info", { entityId: `media_player.${window.browser_mod.entity_id}` }, this); var _a;
this.dispatchEvent(new CustomEvent("hass-more-info", {
bubbles: true,
composed: true,
cancelable: false,
detail: {
entityId: (_a = window.browser_mod.deviceEntities) === null || _a === void 0 ? void 0 : _a.player,
},
}));
} }
handlePlayPause(ev) { handlePlayPause(ev) {
if (window.browser_mod.player.paused) if (!this.player.src || this.player.paused || this.player.ended)
window.browser_mod.player_play(); this.player.play();
else else
window.browser_mod.player_pause(); this.player.pause();
}
setDeviceID() {
const newID = prompt("Set deviceID", deviceID);
if (newID !== deviceID) {
setDeviceID(newID);
this.requestUpdate();
}
} }
render() { render() {
if (!window.browser_mod) { if (!window.browser_mod) {
window.setTimeout(() => this.requestUpdate(), 100); window.setTimeout(() => this.requestUpdate(), 100);
return $ ``; return $ ``;
} }
const player = window.browser_mod.player;
return $ ` return $ `
<ha-card> <ha-card>
<div class="card-content"> <div class="card-content">
<ha-icon-button @click=${this.handleMute}> <ha-icon-button @click=${this.handleMute}>
<ha-icon <ha-icon
.icon=${player.muted ? "mdi:volume-off" : "mdi:volume-high"} .icon=${this.player.muted ? "mdi:volume-off" : "mdi:volume-high"}
></ha-icon> ></ha-icon>
</ha-icon-button> </ha-icon-button>
<ha-slider <ha-slider
min="0" min="0"
max="1" max="1"
step="0.01" step="0.01"
?disabled=${player.muted} ?disabled=${this.player.muted}
value=${player.volume} value=${this.player.volume}
@change=${this.handleVolumeChange} @change=${this.handleVolumeChange}
></ha-slider> ></ha-slider>
@ -229,7 +154,11 @@ class BrowserPlayer extends s {
: $ ` : $ `
<ha-icon-button @click=${this.handlePlayPause} highlight> <ha-icon-button @click=${this.handlePlayPause} highlight>
<ha-icon <ha-icon
.icon=${player.paused ? "mdi:play" : "mdi:pause"} .icon=${!this.player.src ||
this.player.ended ||
this.player.paused
? "mdi:play"
: "mdi:pause"}
></ha-icon> ></ha-icon>
</ha-icon-button> </ha-icon-button>
`} `}
@ -238,7 +167,7 @@ class BrowserPlayer extends s {
</ha-icon-button> </ha-icon-button>
</div> </div>
<div class="device-id" @click=${this.setDeviceID}>${deviceID}</div> <div class="device-id">${window.browser_mod.deviceID}</div>
</ha-card> </ha-card>
`; `;
} }
@ -274,7 +203,10 @@ __decorate([
e$2() e$2()
], BrowserPlayer.prototype, "hass", void 0); ], BrowserPlayer.prototype, "hass", void 0);
(async () => { (async () => {
await hass_loaded(); while (!window.browser_mod) {
await new Promise((resolve) => setTimeout(resolve, 1000));
}
await window.browser_mod.connectionPromise;
if (!customElements.get("browser-player")) if (!customElements.get("browser-player"))
customElements.define("browser-player", BrowserPlayer); customElements.define("browser-player", BrowserPlayer);
})(); })();
@ -325,6 +257,7 @@ const ConnectionMixin = (SuperClass) => {
this.connectionPromise = new Promise((resolve) => { this.connectionPromise = new Promise((resolve) => {
this._connectionResolve = resolve; this._connectionResolve = resolve;
}); });
this.deviceEntities = {};
} }
LOG(...args) { LOG(...args) {
const dt = new Date(); const dt = new Date();
@ -339,6 +272,9 @@ const ConnectionMixin = (SuperClass) => {
this.LOG("Command:", msg); this.LOG("Command:", msg);
this.fireEvent(`command-${msg.command}`, msg); this.fireEvent(`command-${msg.command}`, msg);
} }
else if (msg.deviceEntities) {
this.deviceEntities = msg.deviceEntities;
}
else if (msg.result) { else if (msg.result) {
this.update_config(msg.result); this.update_config(msg.result);
} }

4
custom_components/browser_mod/device.py
View File

@ -90,6 +90,10 @@ class BrowserModDevice:
er.async_remove(self.entities["camera"].entity_id) er.async_remove(self.entities["camera"].entity_id)
del self.entities["camera"] del self.entities["camera"]
self.send(
None, deviceEntities={k: v.entity_id for k, v in self.entities.items()}
)
def send(self, command, **kwargs): def send(self, command, **kwargs):
"""Send a command to this device.""" """Send a command to this device."""
if self.connection is None: if self.connection is None:

6
js/plugin/browser-player-editor.ts
View File

@ -1,5 +1,4 @@
import { LitElement, html } from "lit"; import { LitElement, html } from "lit";
import { hass_loaded } from "card-tools/src/hass";
class BrowserPlayerEditor extends LitElement { class BrowserPlayerEditor extends LitElement {
setConfig(config) {} setConfig(config) {}
@ -9,7 +8,10 @@ class BrowserPlayerEditor extends LitElement {
} }
(async () => { (async () => {
await hass_loaded(); while (!window.browser_mod) {
await new Promise((resolve) => setTimeout(resolve, 1000));
}
await window.browser_mod.connectionPromise;
if (!customElements.get("browser-player-editor")) { if (!customElements.get("browser-player-editor")) {
customElements.define("browser-player-editor", BrowserPlayerEditor); customElements.define("browser-player-editor", BrowserPlayerEditor);

63
js/plugin/browser-player.ts
View File

@ -1,10 +1,6 @@
import { LitElement, html, css } from "lit"; import { LitElement, html, css } from "lit";
import { property } from "lit/decorators.js"; import { property } from "lit/decorators.js";
import { deviceID, setDeviceID } from "card-tools/src/deviceID";
import { fireEvent } from "card-tools/src/event";
import { hass_loaded } from "card-tools/src/hass";
import "./browser-player-editor.ts"; import "./browser-player-editor.ts";
import "./types"; import "./types";
@ -12,6 +8,8 @@ import "./types";
class BrowserPlayer extends LitElement { class BrowserPlayer extends LitElement {
@property() hass; @property() hass;
player;
static getConfigElement() { static getConfigElement() {
return document.createElement("browser-player-editor"); return document.createElement("browser-player-editor");
} }
@ -23,6 +21,8 @@ class BrowserPlayer extends LitElement {
while (!window.browser_mod) { while (!window.browser_mod) {
await new Promise((resolve) => setTimeout(resolve, 1000)); await new Promise((resolve) => setTimeout(resolve, 1000));
} }
this.player = window.browser_mod.player;
for (const event of [ for (const event of [
"play", "play",
"pause", "pause",
@ -31,34 +31,31 @@ class BrowserPlayer extends LitElement {
"canplay", "canplay",
"loadeddata", "loadeddata",
]) ])
window.browser_mod.player.addEventListener(event, () => this.player.addEventListener(event, () => this.requestUpdate());
this.requestUpdate()
);
} }
handleMute(ev) { handleMute(ev) {
window.browser_mod.player_mute(); this.player.muted = !this.player.muted;
} }
handleVolumeChange(ev) { handleVolumeChange(ev) {
const vol = parseFloat(ev.target.value); const volume_level = parseFloat(ev.target.value);
window.browser_mod.player_set_volume(vol); this.player.volume = volume_level;
} }
handleMoreInfo(ev) { handleMoreInfo(ev) {
fireEvent( this.dispatchEvent(
"hass-more-info", new CustomEvent("hass-more-info", {
{ entityId: `media_player.${window.browser_mod.entity_id}` }, bubbles: true,
this composed: true,
cancelable: false,
detail: {
entityId: window.browser_mod.deviceEntities?.player,
},
})
); );
} }
handlePlayPause(ev) { handlePlayPause(ev) {
if (window.browser_mod.player.paused) window.browser_mod.player_play(); if (!this.player.src || this.player.paused || this.player.ended)
else window.browser_mod.player_pause(); this.player.play();
} else this.player.pause();
setDeviceID() {
const newID = prompt("Set deviceID", deviceID);
if (newID !== deviceID) {
setDeviceID(newID);
this.requestUpdate();
}
} }
render() { render() {
@ -66,21 +63,20 @@ class BrowserPlayer extends LitElement {
window.setTimeout(() => this.requestUpdate(), 100); window.setTimeout(() => this.requestUpdate(), 100);
return html``; return html``;
} }
const player = window.browser_mod.player;
return html` return html`
<ha-card> <ha-card>
<div class="card-content"> <div class="card-content">
<ha-icon-button @click=${this.handleMute}> <ha-icon-button @click=${this.handleMute}>
<ha-icon <ha-icon
.icon=${player.muted ? "mdi:volume-off" : "mdi:volume-high"} .icon=${this.player.muted ? "mdi:volume-off" : "mdi:volume-high"}
></ha-icon> ></ha-icon>
</ha-icon-button> </ha-icon-button>
<ha-slider <ha-slider
min="0" min="0"
max="1" max="1"
step="0.01" step="0.01"
?disabled=${player.muted} ?disabled=${this.player.muted}
value=${player.volume} value=${this.player.volume}
@change=${this.handleVolumeChange} @change=${this.handleVolumeChange}
></ha-slider> ></ha-slider>
@ -89,7 +85,11 @@ class BrowserPlayer extends LitElement {
: html` : html`
<ha-icon-button @click=${this.handlePlayPause} highlight> <ha-icon-button @click=${this.handlePlayPause} highlight>
<ha-icon <ha-icon
.icon=${player.paused ? "mdi:play" : "mdi:pause"} .icon=${!this.player.src ||
this.player.ended ||
this.player.paused
? "mdi:play"
: "mdi:pause"}
></ha-icon> ></ha-icon>
</ha-icon-button> </ha-icon-button>
`} `}
@ -98,7 +98,7 @@ class BrowserPlayer extends LitElement {
</ha-icon-button> </ha-icon-button>
</div> </div>
<div class="device-id" @click=${this.setDeviceID}>${deviceID}</div> <div class="device-id">${window.browser_mod.deviceID}</div>
</ha-card> </ha-card>
`; `;
} }
@ -133,7 +133,10 @@ class BrowserPlayer extends LitElement {
} }
(async () => { (async () => {
await hass_loaded(); while (!window.browser_mod) {
await new Promise((resolve) => setTimeout(resolve, 1000));
}
await window.browser_mod.connectionPromise;
if (!customElements.get("browser-player")) if (!customElements.get("browser-player"))
customElements.define("browser-player", BrowserPlayer); customElements.define("browser-player", BrowserPlayer);

3
js/plugin/connection.ts
View File

@ -12,6 +12,7 @@ export const ConnectionMixin = (SuperClass) => {
public connectionPromise = new Promise((resolve) => { public connectionPromise = new Promise((resolve) => {
this._connectionResolve = resolve; this._connectionResolve = resolve;
}); });
public deviceEntities = {};
LOG(...args) { LOG(...args) {
const dt = new Date(); const dt = new Date();
@ -26,6 +27,8 @@ export const ConnectionMixin = (SuperClass) => {
if (msg.command) { if (msg.command) {
this.LOG("Command:", msg); this.LOG("Command:", msg);
this.fireEvent(`command-${msg.command}`, msg); this.fireEvent(`command-${msg.command}`, msg);
} else if (msg.deviceEntities) {
this.deviceEntities = msg.deviceEntities;
} else if (msg.result) { } else if (msg.result) {
this.update_config(msg.result); this.update_config(msg.result);
} }