Renamed Device to Browser throughout

This commit is contained in:
2022-07-18 20:51:07 +00:00
parent 3bf2481e5b
commit acc4a15e02
18 changed files with 227 additions and 369 deletions

View File

@@ -14,32 +14,32 @@ loadDevTools().then(() => {
if (!window.browser_mod?.connected) return;
window.browser_mod.registered = !window.browser_mod.registered;
}
changeDeviceID(ev) {
window.browser_mod.deviceID = ev.target.value;
changeBrowserID(ev) {
window.browser_mod.browserID = ev.target.value;
}
toggleCameraEnabled() {
window.browser_mod.cameraEnabled = !window.browser_mod.cameraEnabled;
}
unregister_device(ev) {
const deviceID = ev.currentTarget.deviceID;
unregister_browser(ev) {
const browserID = ev.currentTarget.browserID;
const unregisterCallback = () => {
console.log(deviceID, window.browser_mod.deviceID);
if (deviceID === window.browser_mod.deviceID) {
console.log(browserID, window.browser_mod.browserID);
if (browserID === window.browser_mod.browserID) {
console.log("Unregister self");
window.browser_mod.registered = false;
} else {
window.browser_mod.connection.sendMessage({
type: "browser_mod/unregister",
deviceID,
browserID,
});
}
};
window.browser_mod.showPopup(
"Unregister device",
`Are you sure you want to unregister device ${deviceID}?`,
"Unregister browser",
`Are you sure you want to unregister browser ${browserID}?`,
{
primary_action: "Yes",
secondary_action: "No",
@@ -109,21 +109,21 @@ loadDevTools().then(() => {
</ha-settings-row>
<ha-settings-row>
<span slot="heading">DeviceID</span>
<span slot="heading">BrowserID</span>
<span slot="description"
>A unique identifier for this browser-device
combination.</span
>
<ha-textfield
.value=${window.browser_mod?.deviceID}
@change=${this.changeDeviceID}
.value=${window.browser_mod?.browserID}
@change=${this.changeBrowserID}
></ha-textfield>
</ha-settings-row>
<ha-settings-row>
<span slot="heading">Enable camera</span>
<span slot="description"
>Get camera input from this device (hardware
>Get camera input from this browser (hardware
dependent)</span
>
<ha-switch
@@ -134,21 +134,21 @@ loadDevTools().then(() => {
</div>
</ha-card>
<ha-card header="Registered devices" outlined>
<ha-card header="Registered browsers" outlined>
<div class="card-content">
${Object.keys(window.browser_mod.devices).map(
${Object.keys(window.browser_mod.browsers).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}
.datetime=${window.browser_mod.browsers[d].last_seen}
></ha-relative-time>
</span>
<ha-icon-button
.deviceID=${d}
@click=${this.unregister_device}
.browserID=${d}
@click=${this.unregister_browser}
>
<ha-icon .icon=${"mdi:delete"}></ha-icon>
</ha-icon-button>

View File

@@ -47,7 +47,7 @@ class BrowserPlayer extends LitElement {
composed: true,
cancelable: false,
detail: {
entityId: window.browser_mod.deviceEntities?.player,
entityId: window.browser_mod.browserEntities?.player,
},
})
);
@@ -98,7 +98,7 @@ class BrowserPlayer extends LitElement {
</ha-icon-button>
</div>
<div class="device-id">${window.browser_mod.deviceID}</div>
<div class="browser-id">${window.browser_mod.browserID}</div>
</ha-card>
`;
}
@@ -116,7 +116,7 @@ class BrowserPlayer extends LitElement {
width: 24px;
padding: 8px;
}
.device-id {
.browser-id {
opacity: 0.7;
font-size: xx-small;
margin-top: -10px;

View File

@@ -1,6 +1,6 @@
import { hass, provideHass } from "../helpers";
const ID_STORAGE_KEY = "browser_mod-device-id";
const ID_STORAGE_KEY = "browser_mod-browser-id";
export const ConnectionMixin = (SuperClass) => {
class BrowserModConnection extends SuperClass {
@@ -12,7 +12,7 @@ export const ConnectionMixin = (SuperClass) => {
public connectionPromise = new Promise((resolve) => {
this._connectionResolve = resolve;
});
public deviceEntities = {};
public browserEntities = {};
LOG(...args) {
const dt = new Date();
@@ -27,8 +27,8 @@ export const ConnectionMixin = (SuperClass) => {
if (msg.command) {
this.LOG("Command:", msg);
this.fireEvent(`command-${msg.command}`, msg);
} else if (msg.deviceEntities) {
this.deviceEntities = msg.deviceEntities;
} else if (msg.browserEntities) {
this.browserEntities = msg.browserEntities;
} else if (msg.result) {
this.update_config(msg.result);
}
@@ -39,7 +39,7 @@ export const ConnectionMixin = (SuperClass) => {
this.LOG("Receive:", cfg);
let update = false;
if (!this.registered && cfg.devices?.[this.deviceID]) {
if (!this.registered && cfg.browsers?.[this.browserID]) {
update = true;
}
this._data = cfg;
@@ -61,7 +61,7 @@ export const ConnectionMixin = (SuperClass) => {
// Subscribe to configuration updates
conn.subscribeMessage((msg) => this.incoming_message(msg), {
type: "browser_mod/connect",
deviceID: this.deviceID,
browserID: this.browserID,
});
// Keep connection status up to date
@@ -82,12 +82,12 @@ export const ConnectionMixin = (SuperClass) => {
return this._data?.config ?? {};
}
get devices() {
return this._data?.devices ?? [];
get browsers() {
return this._data?.browsers ?? [];
}
get registered() {
return this.devices?.[this.deviceID] !== undefined;
return this.browsers?.[this.browserID] !== undefined;
}
set registered(reg) {
@@ -96,13 +96,13 @@ export const ConnectionMixin = (SuperClass) => {
if (this.registered) return;
await this.connection.sendMessage({
type: "browser_mod/register",
deviceID: this.deviceID,
browserID: this.browserID,
});
} else {
if (!this.registered) return;
await this.connection.sendMessage({
type: "browser_mod/unregister",
deviceID: this.deviceID,
browserID: this.browserID,
});
}
})();
@@ -111,9 +111,9 @@ export const ConnectionMixin = (SuperClass) => {
private async _reregister(newData = {}) {
await this.connection.sendMessage({
type: "browser_mod/reregister",
deviceID: this.deviceID,
browserID: this.browserID,
data: {
...this.devices[this.deviceID],
...this.browsers[this.browserID],
...newData,
},
});
@@ -121,7 +121,7 @@ export const ConnectionMixin = (SuperClass) => {
get meta() {
if (!this.registered) return null;
return this.devices[this.deviceID].meta;
return this.browsers[this.browserID].meta;
}
set meta(value) {
this._reregister({ meta: value });
@@ -129,7 +129,7 @@ export const ConnectionMixin = (SuperClass) => {
get cameraEnabled() {
if (!this.registered) return null;
return this.devices[this.deviceID].camera;
return this.browsers[this.browserID].camera;
}
set cameraEnabled(value) {
this._reregister({ camera: value });
@@ -143,18 +143,18 @@ export const ConnectionMixin = (SuperClass) => {
this.connection.sendMessage({
type: "browser_mod/update",
deviceID: this.deviceID,
browserID: this.browserID,
data,
});
}
get deviceID() {
get browserID() {
if (localStorage[ID_STORAGE_KEY]) return localStorage[ID_STORAGE_KEY];
this.deviceID = "";
return this.deviceID;
this.browserID = "";
return this.browserID;
}
set deviceID(id) {
function _createDeviceID() {
set browserID(id) {
function _createBrowserID() {
const s4 = () => {
return Math.floor((1 + Math.random()) * 100000)
.toString(16)
@@ -163,29 +163,27 @@ export const ConnectionMixin = (SuperClass) => {
return window.fully?.getDeviceId() ?? `${s4()}${s4()}-${s4()}${s4()}`;
}
if (id === "") id = _createDeviceID();
if (id === "") id = _createBrowserID();
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
this.browsers?.[oldID] !== undefined &&
this.browsers?.[this.browserID] === undefined
) {
(async () => {
await this.connection.sendMessage({
type: "browser_mod/reregister",
deviceID: oldID,
browserID: oldID,
data: {
...this.devices[oldID],
deviceID: this.deviceID,
...this.browsers[oldID],
browserID: this.browserID,
},
});
})();
}
// TODO: Send update to backend to update device
}
}

View File

@@ -16,8 +16,8 @@ import pjson from "../../package.json";
/*
TODO:
- Fix nomenclature
- Command -> Service
- Device -> Browser
x Command -> Service
x Device -> Browser
- Popups
X Basic popups
- Card-mod integration
@@ -81,107 +81,11 @@ export class BrowserMod extends ServicesMixin(
console.info(
`%cBROWSER_MOD ${pjson.version} IS INSTALLED
%cDeviceID: ${this.deviceID}`,
%cBrowserID: ${this.browserID}`,
"color: green; font-weight: bold",
""
);
}
// async msg_callback(msg) {
// const handlers = {
// update: (msg) => this.update(msg),
// debug: (msg) => this.debug(msg),
// play: (msg) => this.player_play(msg.media_content_id),
// pause: (msg) => this.player_pause(),
// stop: (msg) => this.player_stop(),
// "set-volume": (msg) => this.player_set_volume(msg.volume_level),
// mute: (msg) => this.player_mute(msg.mute),
// toast: (msg) => this.do_toast(msg.message, msg.duration),
// popup: (msg) => this.do_popup(msg),
// "close-popup": (msg) => this.do_close_popup(),
// "more-info": (msg) => this.do_more_info(msg.entity_id, msg.large),
// navigate: (msg) => this.do_navigate(msg.navigation_path),
// "set-theme": (msg) => this.set_theme(msg),
// "lovelace-reload": (msg) => this.lovelace_reload(msg),
// "window-reload": () => window.location.reload(),
// blackout: (msg) =>
// this.do_blackout(msg.time ? parseInt(msg.time) : undefined),
// "no-blackout": (msg) => {
// if (msg.brightness && this.isFully) {
// (window as any).fully.setScreenBrightness(msg.brightness);
// }
// this.no_blackout();
// },
// "call-service": (msg) => this.call_service(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);
// }),
// };
// await handlers[msg.command.replace("_", "-")](msg);
// }
// debug(msg) {
// popUp(`deviceID`, { type: "markdown", content: `# ${deviceID}` });
// alert(deviceID);
// }
// set_theme(msg) {
// if (!msg.theme) msg.theme = "default";
// fireEvent("settheme", { theme: msg.theme }, ha_element());
// }
// lovelace_reload(msg) {
// const ll = lovelace_view();
// if (ll) fireEvent("config-refresh", {}, ll);
// }
// call_service(msg) {
// const _replaceThis = (data) => {
// if (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]);
// }
// return 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);
// }
// // 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 () => {
// await hass_loaded();
if (!window.browser_mod) window.browser_mod = new BrowserMod();
// })();