From 089ca8dc08d54f12ef1c622a9caef82a1e332520 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= Date: Mon, 18 Apr 2022 18:49:31 +0000 Subject: [PATCH] Switch to typescript --- custom_components/browser_mod/browser_mod.js | 1227 +++++++++++++++++- js/browser-player-editor.js | 28 - js/browser-player-editor.ts | 25 + js/browser-player.js | 142 -- js/browser-player.ts | 142 ++ js/{browser.js => browser.ts} | 24 +- js/{camera.js => camera.ts} | 0 js/{connection.js => connection.ts} | 15 +- js/{fullyKiosk.js => fullyKiosk.ts} | 2 +- js/{main.js => main.ts} | 18 +- js/{mediaPlayer.js => mediaPlayer.ts} | 2 +- js/{popups.js => popups.ts} | 10 +- js/{screensaver.js => screensaver.ts} | 2 +- js/types.ts | 34 + package-lock.json | 44 +- package.json | 1 + rollup.config.js | 6 +- tsconfig.json | 9 + 18 files changed, 1455 insertions(+), 276 deletions(-) delete mode 100644 js/browser-player-editor.js create mode 100644 js/browser-player-editor.ts delete mode 100644 js/browser-player.js create mode 100644 js/browser-player.ts rename js/{browser.js => browser.ts} (67%) rename js/{camera.js => camera.ts} (100%) rename js/{connection.js => connection.ts} (77%) rename js/{fullyKiosk.js => fullyKiosk.ts} (98%) rename js/{main.js => main.ts} (90%) rename js/{mediaPlayer.js => mediaPlayer.ts} (98%) rename js/{popups.js => popups.ts} (88%) rename js/{screensaver.js => screensaver.ts} (98%) create mode 100644 js/types.ts create mode 100644 tsconfig.json diff --git a/custom_components/browser_mod/browser_mod.js b/custom_components/browser_mod/browser_mod.js index 7450f8d..1acbd0f 100644 --- a/custom_components/browser_mod/browser_mod.js +++ b/custom_components/browser_mod/browser_mod.js @@ -1,12 +1,304 @@ -const e="lovelace-player-device-id";function t(){if(!localStorage[e]){const t=()=>Math.floor(1e5*(1+Math.random())).toString(16).substring(1);window.fully&&"function"==typeof fully.getDeviceId?localStorage[e]=fully.getDeviceId():localStorage[e]=`${t()}${t()}-${t()}${t()}`}return localStorage[e]}let s=t();const o=o=>{null!==o&&("clear"===o?localStorage.removeItem(e):localStorage[e]=o,s=t())},i=new URLSearchParams(window.location.search);function a(){return document.querySelector("hc-main")?document.querySelector("hc-main").hass:document.querySelector("home-assistant")?document.querySelector("home-assistant").hass:void 0}function n(e){return document.querySelector("hc-main")?document.querySelector("hc-main").provideHass(e):document.querySelector("home-assistant")?document.querySelector("home-assistant").provideHass(e):void 0}function r(){var e,t=document.querySelector("hc-main");return t?((e=t._lovelaceConfig).current_view=t._lovelacePath,e):(t=(t=(t=(t=(t=(t=(t=(t=(t=document.querySelector("home-assistant"))&&t.shadowRoot)&&t.querySelector("home-assistant-main"))&&t.shadowRoot)&&t.querySelector("app-drawer-layout partial-panel-resolver"))&&t.shadowRoot||t)&&t.querySelector("ha-panel-lovelace"))&&t.shadowRoot)&&t.querySelector("hui-root"))?((e=t.lovelace).current_view=t.___curView,e):null}function l(){var e=document.querySelector("hc-main");return e=e?(e=(e=(e=e&&e.shadowRoot)&&e.querySelector("hc-lovelace"))&&e.shadowRoot)&&e.querySelector("hui-view")||e.querySelector("hui-panel-view"):(e=(e=(e=(e=(e=(e=(e=(e=(e=(e=(e=(e=document.querySelector("home-assistant"))&&e.shadowRoot)&&e.querySelector("home-assistant-main"))&&e.shadowRoot)&&e.querySelector("app-drawer-layout partial-panel-resolver"))&&e.shadowRoot||e)&&e.querySelector("ha-panel-lovelace"))&&e.shadowRoot)&&e.querySelector("hui-root"))&&e.shadowRoot)&&e.querySelector("ha-app-layout"))&&e.querySelector("#view"))&&e.firstElementChild}async function c(){if(customElements.get("hui-view"))return!0;await customElements.whenDefined("partial-panel-resolver");const e=document.createElement("partial-panel-resolver");if(e.hass={panels:[{url_path:"tmp",component_name:"lovelace"}]},e._updateRoutes(),await e.routerOptions.routes.tmp.load(),!customElements.get("ha-panel-lovelace"))return!1;const t=document.createElement("ha-panel-lovelace");return t.hass=a(),void 0===t.hass&&(await new Promise((e=>{window.addEventListener("connection-status",(t=>{console.log(t),e()}),{once:!0})})),t.hass=a()),t.panel={config:{mode:null}},t._fetchConfig(),!0}async function d(e,t,s=!1){let o=e;"string"==typeof t&&(t=t.split(/(\$| )/)),""===t[t.length-1]&&t.pop();for(const[e,i]of t.entries())if(i.trim().length){if(!o)return null;o.localName&&o.localName.includes("-")&&await customElements.whenDefined(o.localName),o.updateComplete&&await o.updateComplete,o="$"===i?s&&e==t.length-1?[o.shadowRoot]:o.shadowRoot:s&&e==t.length-1?o.querySelectorAll(i):o.querySelector(i)}return o}async function h(e,t,s=!1,o=1e4){return Promise.race([d(e,t,s),new Promise(((e,t)=>setTimeout((()=>t(new Error("timeout"))),o)))]).catch((e=>{if(!e.message||"timeout"!==e.message)throw e;return null}))}function u(e,t,s=null){if((e=new Event(e,{bubbles:!0,cancelable:!1,composed:!0})).detail=t||{},s)s.dispatchEvent(e);else{var o=l();o&&o.dispatchEvent(e)}}i.get("deviceID")&&o(i.get("deviceID"));let m=window.cardHelpers;async function p(){const e=document.querySelector("home-assistant")||document.querySelector("hc-root");u("hass-more-info",{entityId:"."},e);const t=await h(e,"$ card-tools-popup");t&&t.closeDialog()}async function w(e,t,s=!1,o={},i=!1){if(!customElements.get("card-tools-popup")){const e=customElements.get("home-assistant-main")?Object.getPrototypeOf(customElements.get("home-assistant-main")):Object.getPrototypeOf(customElements.get("hui-view")),t=e.prototype.html,s=e.prototype.css;class o extends e{static get properties(){return{open:{},large:{reflect:!0,type:Boolean},hass:{}}}updated(e){e.has("hass")&&this.card&&(this.card.hass=this.hass)}closeDialog(){this.open=!1}async _makeCard(){const e=await window.loadCardHelpers();this.card=await e.createCardElement(this._card),this.card.hass=this.hass,this.requestUpdate()}async _applyStyles(){let e=await h(this,"$ ha-dialog");customElements.whenDefined("card-mod").then((async()=>{if(!e)return;customElements.get("card-mod").applyToElement(e,"more-info",this._style,{config:this._card},[],!1)}))}async showDialog(e,t,s=!1,o={},i=!1){this.title=e,this._card=t,this.large=s,this._style=o,this.fullscreen=!!i,this._makeCard(),await this.updateComplete,this.open=!0,await this._applyStyles()}_enlarge(){this.large=!this.large}render(){return this.open?t` +const ID_STORAGE_KEY = 'lovelace-player-device-id'; +function _deviceID() { + if(!localStorage[ID_STORAGE_KEY]) + { + const s4 = () => { + return Math.floor((1+Math.random())*100000).toString(16).substring(1); + }; + if(window['fully'] && typeof fully.getDeviceId === "function") + localStorage[ID_STORAGE_KEY] = fully.getDeviceId(); + else + localStorage[ID_STORAGE_KEY] = `${s4()}${s4()}-${s4()}${s4()}`; + } + return localStorage[ID_STORAGE_KEY]; +} +let deviceID = _deviceID(); + +const setDeviceID = (id) => { + if(id === null) return; + if(id === "clear") { + localStorage.removeItem(ID_STORAGE_KEY); + } else { + localStorage[ID_STORAGE_KEY] = id; + } + deviceID = _deviceID(); +}; + +const params = new URLSearchParams(window.location.search); +if(params.get('deviceID')) { + setDeviceID(params.get('deviceID')); +} + +function ha_element() { + if(document.querySelector("hc-main")) + return document.querySelector("hc-main"); + if(document.querySelector("home-assistant")) + return document.querySelector("home-assistant"); +} + +function hass() { + if(document.querySelector('hc-main')) + return document.querySelector('hc-main').hass; + + if(document.querySelector('home-assistant')) + return document.querySelector('home-assistant').hass; + + return undefined; +} +function provideHass(element) { + if(document.querySelector('hc-main')) + return document.querySelector('hc-main').provideHass(element); + + if(document.querySelector('home-assistant')) + return document.querySelector("home-assistant").provideHass(element); + + return undefined; +} + +function lovelace() { + var root = document.querySelector("hc-main"); + if(root) { + var ll = root._lovelaceConfig; + ll.current_view = root._lovelacePath; + return ll; + } + + 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"); + if (root) { + var ll = root.lovelace; + ll.current_view = root.___curView; + return ll; + } + + return null; +} +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; +} + +async function load_lovelace() { + if(customElements.get("hui-view")) return true; + + await customElements.whenDefined("partial-panel-resolver"); + const ppr = document.createElement("partial-panel-resolver"); + ppr.hass = {panels: [{ + url_path: "tmp", + "component_name": "lovelace", + }]}; + ppr._updateRoutes(); + await ppr.routerOptions.routes.tmp.load(); + if(!customElements.get("ha-panel-lovelace")) return false; + const p = document.createElement("ha-panel-lovelace"); + p.hass = hass(); + if(p.hass === undefined) { + await new Promise(resolve => { + window.addEventListener('connection-status', (ev) => { + console.log(ev); + resolve(); + }, {once: true}); + }); + p.hass = hass(); + } + p.panel = {config: {mode: null}}; + p._fetchConfig(); + return true; +} + +async function _selectTree(root, path, all=false) { + let el = root; + if(typeof(path) === "string") { + path = path.split(/(\$| )/); + } + if(path[path.length-1] === "") + path.pop(); + for(const [i, p] of path.entries()) { + if(!p.trim().length) continue; + if(!el) return null; + if(el.localName && el.localName.includes("-")) + await customElements.whenDefined(el.localName); + if(el.updateComplete) + await el.updateComplete; + if(p === "$") + if(all && i == path.length-1) + el = [el.shadowRoot]; + else + el = el.shadowRoot; + else + if(all && i == path.length-1) + el = el.querySelectorAll(p); + else + el = el.querySelector(p); + } + return el; +} + +async function selectTree(root, path, all=false, timeout=10000) { + return Promise.race([ + _selectTree(root, path, all), + new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), timeout)) + ]).catch((err) => { + if(!err.message || err.message !== "timeout") + throw(err); + return null; + }); +} + +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); + } +} + +let helpers = window.cardHelpers; +new Promise(async (resolve, reject) => { + if(helpers) resolve(); + + const updateHelpers = async () => { + helpers = await window.loadCardHelpers(); + window.cardHelpers = helpers; + resolve(); + }; + + if(window.loadCardHelpers) { + updateHelpers(); + } else { + // If loadCardHelpers didn't exist, force load lovelace and try once more. + window.addEventListener("load", async () => { + load_lovelace(); + if(window.loadCardHelpers) { + updateHelpers(); + } + }); + } +}); + +async function closePopUp() { + const root = document.querySelector("home-assistant") || document.querySelector("hc-root"); + fireEvent("hass-more-info", {entityId: "."}, root); + const el = await selectTree(root, "$ card-tools-popup"); + + if(el) + el.closeDialog(); +} + +async function popUp(title, card, large=false, style={}, fullscreen=false) { + if(!customElements.get("card-tools-popup")) + { + 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 CardToolsPopup extends LitElement { + + static get properties() { + return { + open: {}, + large: {reflect: true, type: Boolean}, + hass: {}, + }; + } + + updated(changedProperties) { + if(changedProperties.has("hass")) { + if(this.card) + this.card.hass = this.hass; + } + } + + closeDialog() { + this.open = false; + } + + async _makeCard() { + const helpers = await window.loadCardHelpers(); + this.card = await helpers.createCardElement(this._card); + this.card.hass = this.hass; + this.requestUpdate(); + } + + async _applyStyles() { + let el = await selectTree(this, "$ ha-dialog"); + customElements.whenDefined("card-mod").then(async () => { + if(!el) return; + const cm = customElements.get("card-mod"); + cm.applyToElement(el, "more-info", this._style, {config: this._card}, [], false); + }); + + } + + async showDialog(title, card, large=false, style={}, fullscreen=false) { + this.title = title; + this._card = card; + this.large = large; + this._style = style; + this.fullscreen = !!fullscreen; + this._makeCard(); + await this.updateComplete; + this.open = true; + await this._applyStyles(); + } + + _enlarge() { + this.large = !this.large; + } + + render() { + if(!this.open) { + return html``; + } + + return html` - ${this.fullscreen?t`
`:t` + ${this.fullscreen + ? html`
` + : html` - `:t``}static get styles(){return s` + ` + } + + static get styles() { + return css` ha-dialog { --mdc-dialog-min-width: 400px; --mdc-dialog-max-width: 600px; @@ -50,6 +346,10 @@ const e="lovelace-player-device-id";function t(){if(!localStorage[e]){const t=() background-color: var(--secondary-background-color); } + app-toolbar mwc-icon-button ha-icon { + display: flex; + } + .main-title { margin-left: 16px; line-height: 1.3em; @@ -87,59 +387,872 @@ const e="lovelace-player-device-id";function t(){if(!localStorage[e]){const t=() max-width: calc(90vw - 32px); } } - `}}customElements.define("card-tools-popup",o)}const a=document.querySelector("home-assistant")||document.querySelector("hc-root");if(!a)return;let r=await h(a,"$ card-tools-popup");if(!r){r=document.createElement("card-tools-popup");const e=a.shadowRoot.querySelector("ha-more-info-dialog");e?a.shadowRoot.insertBefore(r,e):a.shadowRoot.appendChild(r),n(r)}if(!window._moreInfoDialogListener){const e=async e=>{if(e.state&&"cardToolsPopup"in e.state)if(e.state.cardToolsPopup){const{title:t,card:s,large:o,style:i,fullscreen:a}=e.state.params;w(t,s,o,i,a)}else r.closeDialog()};window.addEventListener("popstate",e),window._moreInfoDialogListener=!0}history.replaceState({cardToolsPopup:!1},""),history.pushState({cardToolsPopup:!0,params:{title:e,card:t,large:s,style:o,fullscreen:i}},""),r.showDialog(e,t,s,o,i)}async function y(e,t=!1){const s=document.querySelector("hc-main")||document.querySelector("home-assistant");u("hass-more-info",{entityId:e},s);const o=await h(s,"$ ha-more-info-dialog");return o&&(o.large=t),o}new Promise((async(e,t)=>{m&&e();const s=async()=>{m=await window.loadCardHelpers(),window.cardHelpers=m,e()};window.loadCardHelpers?s():window.addEventListener("load",(async()=>{c(),window.loadCardHelpers&&s()}))}));const _=[customElements.whenDefined("home-assistant-main"),customElements.whenDefined("hui-view")];Promise.race(_).then((()=>{const e=customElements.get("home-assistant-main")?Object.getPrototypeOf(customElements.get("home-assistant-main")):Object.getPrototypeOf(customElements.get("hui-view")),t=e.prototype.html;e.prototype.css;class s extends e{setConfig(e){}render(){return t`
Nothing to configure.
`}}customElements.get("browser-player-editor")||(customElements.define("browser-player-editor",s),window.customCards=window.customCards||[],window.customCards.push({type:"browser-player",name:"Browser Player",preview:!0}))}));const v=[customElements.whenDefined("home-assistant-main"),customElements.whenDefined("hui-view")];Promise.race(v).then((()=>{const e=customElements.get("home-assistant-main")?Object.getPrototypeOf(customElements.get("home-assistant-main")):Object.getPrototypeOf(customElements.get("hui-view")),t=e.prototype.html,i=e.prototype.css;customElements.get("browser-player")||customElements.define("browser-player",class extends e{static get properties(){return{hass:{}}}static getConfigElement(){return document.createElement("browser-player-editor")}static getStubConfig(){return{}}async setConfig(e){for(this._config=e;!window.browser_mod;)await new Promise((e=>setTimeout(e,1e3)));for(const e of["play","pause","ended","volumechange","canplay","loadeddata"])window.browser_mod.player.addEventListener(e,(()=>this.requestUpdate()))}handleMute(e){window.browser_mod.player_mute()}handleVolumeChange(e){const t=parseFloat(e.target.value);window.browser_mod.player_set_volume(t)}handleMoreInfo(e){y("media_player."+window.browser_mod.entity_id)}handlePlayPause(e){window.browser_mod.player.paused?window.browser_mod.player_play():window.browser_mod.player_pause()}setDeviceID(){const e=prompt("Set deviceID",s);e!==s&&(o(e),this.requestUpdate())}render(){if(!window.browser_mod)return window.setTimeout((()=>this.requestUpdate()),100),t``;const e=window.browser_mod.player;return t` - -
- - - - + `; + } - ${"stopped"===window.browser_mod.player_state?t`
`:t` - - - - `} - - - -
+ } + customElements.define("card-tools-popup", CardToolsPopup); + } -
${s}
- - `}static get styles(){return i` - paper-icon-button[highlight] { - color: var(--accent-color); + const root = document.querySelector("home-assistant") || document.querySelector("hc-root"); + + if(!root) return; + let el = await selectTree(root, "$ card-tools-popup"); + if(!el) { + el = document.createElement("card-tools-popup"); + const mi = root.shadowRoot.querySelector("ha-more-info-dialog"); + if(mi) + root.shadowRoot.insertBefore(el,mi); + else + root.shadowRoot.appendChild(el); + provideHass(el); + } + + if(!window._moreInfoDialogListener) { + const listener = async (ev) => { + if(ev.state && "cardToolsPopup" in ev.state) { + if(ev.state.cardToolsPopup) { + const {title, card, large, style, fullscreen} = ev.state.params; + popUp(title, card, large, style, fullscreen); + } else { + el.closeDialog(); } - .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; - } - `}})}));class g{async connect(){if(null!==document.querySelector("hc-main"))this._connection=a().connection;else{if(!window.hassConnection)return void window.setTimeout((()=>this.connect()),100);this._connection=(await window.hassConnection).conn}this._connection.subscribeMessage((e=>this.msg_callback(e)),{type:"browser_mod/connect",deviceID:s}),this._hass_patched=!1,n(this)}set hass(e){this._hass=e}get connected(){return void 0!==this._connection}msg_callback(e){console.log(e)}sendUpdate(e){this.connected&&this._connection.sendMessage({type:"browser_mod/update",deviceID:s,data:e})}}const f=e=>class extends e{constructor(){super(),this.player=new Audio;for(const e of["play","pause","ended","volumechange"])this.player.addEventListener(e,(()=>this.player_update()));window.addEventListener("click",(()=>{this.player.ended||this.player.play()}),{once:!0})}player_update(e){this.sendUpdate({player:{volume:this.player.volume,muted:this.player.muted,src:this.player.src,state:this.player_state}})}get player_state(){return this.player.src?this.player.ended?"stopped":this.player.paused?"paused":"playing":"stopped"}player_play(e){e&&(this.player.src=e),this.player.play()}player_pause(){this.player.pause()}player_stop(){this.player.pause(),this.player.src=null}player_set_volume(e){void 0!==e&&(this.player.volume=e)}player_mute(e){void 0===e&&(e=!this.player.muted),this.player.muted=Boolean(e)}},b=e=>class extends e{get isFully(){return void 0!==window.fully}constructor(){if(super(),this.isFully){this._fullyMotion=!1,this._motionTimeout=void 0;for(const e of["screenOn","screenOff","pluggedAC","pluggedUSB","onBatteryLevelChanged","unplugged","networkReconnect","onMotion"])window.fully.bind(e,`window.browser_mod.fully_update("${e}");`);window.fully.bind("onScreensaverStart","window.browser_mod.fully_screensaver = true; window.browser_mod.screen_update();"),window.fully.bind("onScreensaverStop","window.browser_mod.fully_screensaver = false; window.browser_mod.screen_update();"),this._keepingAlive=!1}}fully_update(e){this.isFully&&("screenOn"===e?(window.clearTimeout(this._keepAliveTimer),this._keepingAlive||this.screen_update()):"screenOff"===e?(this.screen_update(),this._keepingAlive=!1,this.config.force_stay_awake&&(this._keepAliveTimer=window.setTimeout((()=>{this._keepingAlive=!0,window.fully.turnScreenOn(),window.fully.turnScreenOff()}),27e4))):"onMotion"===e&&this.fullyMotionTriggered(),this.sendUpdate({fully:{battery:window.fully.getBatteryLevel(),charging:window.fully.isPlugged(),motion:this._fullyMotion,ip:window.fully.getIp4Address()}}))}startCamera(){void 0===this._fullyCameraTimer&&(this._fullyCameraTimer=window.setInterval((()=>{this.sendUpdate({camera:window.fully.getCamshotJpgBase64()})}),200))}stopCamera(){window.clearInterval(this._fullyCameraTimer),this._fullyCameraTimer=void 0}fullyMotionTriggered(){this._keepingAlive||(this._fullyMotion=!0,this.startCamera(),clearTimeout(this._motionTimeout),this._motionTimeout=setTimeout((()=>{this._fullyMotion=!1,this.stopCamera(),this.fully_update()}),5e3),this.fully_update())}},S=e=>class extends e{setup_camera(){console.log("Starting camera"),this._video||(this._video=document.createElement("video"),this._video.autoplay=!0,this._video.playsInline=!0,this._video.style.display="none",this._canvas=document.createElement("canvas"),this._canvas.style.display="none",document.body.appendChild(this._video),document.body.appendChild(this._canvas),navigator.mediaDevices&&(console.log("Starting devices"),navigator.mediaDevices.getUserMedia({video:!0,audio:!1}).then((e=>{this._video.srcObject=e,this._video.play(),this.update_camera()})),this._camera_framerate=2,window.addEventListener("click",(()=>{(this._video.ended||this._video.paused)&&this._video.play()}),{once:!0})))}update_camera(){this._canvas.width=this._video.videoWidth,this._canvas.height=this._video.videoHeight;this._canvas.getContext("2d").drawImage(this._video,0,0,this._video.videoWidth,this._video.videoHeight),this.sendUpdate({camera:this._canvas.toDataURL("image/jpeg")}),setTimeout((()=>this.update_camera()),Math.round(1e3/this._camera_framerate))}},k=e=>class extends e{constructor(){super(),this._blackout_panel=document.createElement("div"),this._screenSaver=void 0,this._screenSaverTimer=void 0,this._screenSaverTimeOut=0,this._screenSaver={fn:void 0,clearfn:void 0,timer:void 0,timeout:void 0,listeners:{},active:!1},this._blackout_panel.style.cssText="\n position: fixed;\n left: 0;\n top: 0;\n padding: 0;\n margin: 0;\n width: 100%;\n height: 100%;\n background: black;\n display: none;\n ",document.body.appendChild(this._blackout_panel)}screensaver_set(e,t,s){this._ss_clear(),this._screenSaver={fn:e,clearfn:t,timer:void 0,timeout:s,listeners:{},active:!1};const o=()=>this.screensaver_update();for(const e of["mousemove","mousedown","keydown","touchstart"])window.addEventListener(e,o),this._screenSaver.listeners[e]=o;this._screenSaver.timer=window.setTimeout((()=>this._ss_run()),1e3*s)}screensaver_update(){this._screenSaver.active?this.screensaver_stop():(window.clearTimeout(this._screenSaver.timer),this._screenSaver.timer=window.setTimeout((()=>this._ss_run()),1e3*this._screenSaver.timeout))}screensaver_stop(){this._ss_clear(),this._screenSaver.active=!1,this._screenSaver.clearfn&&this._screenSaver.clearfn(),this._screenSaver.timeout&&this.screensaver_set(this._screenSaver.fn,this._screenSaver.clearfn,this._screenSaver.timeout)}_ss_clear(){window.clearTimeout(this._screenSaverTimer);for(const[e,t]of Object.entries(this._screenSaver.listeners))window.removeEventListener(e,t)}_ss_run(){this._screenSaver.active=!0,this._screenSaver.fn()}do_blackout(e){this.screensaver_set((()=>{this.isFully?this.config.screensaver?window.fully.startScreensaver():window.fully.turnScreenOff(!0):this._blackout_panel.style.display="block",this.screen_update()}),(()=>{(this._blackout_panel.style.display="block")&&(this._blackout_panel.style.display="none"),this.isFully&&(window.fully.getScreenOn()||window.fully.turnScreenOn(),window.fully.stopScreensaver()),this.screen_update()}),e||0)}no_blackout(){this.isFully&&(window.fully.turnScreenOn(),window.fully.stopScreensaver()),this.screensaver_stop()}screen_update(){this.sendUpdate({screen:{blackout:this.isFully?void 0!==this.fully_screensaver?this.fully_screensaver:!window.fully.getScreenOn():Boolean("block"===this._blackout_panel.style.display),brightness:this.isFully?window.fully.getScreenBrightness():void 0}})}},E=e=>class extends e{constructor(){super(),document.querySelector("home-assistant")&&document.querySelector("home-assistant").addEventListener("hass-more-info",(e=>this._popup_card(e)));null!==document.querySelector("hc-main")||c()}_popup_card(e){if(!r())return;if(!e.detail||!e.detail.entityId)return;const t={...r().config.popup_cards,...r().config.views[r().current_view].popup_cards}[e.detail.entityId];t&&(this.do_popup(t),window.setTimeout((()=>{u("hass-more-info",{entityID:"."},document.querySelector("home-assistant"))}),50))}do_popup(e){if(!(e.title||e.auto_close||e.hide_header))return void console.error("browser_mod: popup: Must specify title, auto_close or hide_header.");if(!e.card)return void console.error("browser_mod: popup: No card specified");const t=()=>{w(e.title,e.card,e.large,e.style,e.auto_close||e.hide_header)};e.auto_close?this.screensaver_set(t,p,e.time):t()}do_close_popup(){this.screensaver_stop(),p()}do_more_info(e,t){e&&y(e,t)}do_toast(e,t){e&&u("hass-notification",{message:e,duration:parseInt(t)},document.querySelector("home-assistant"))}},x=e=>class extends e{constructor(){super(),document.addEventListener("visibilitychange",(()=>this.sensor_update())),window.addEventListener("location-changed",(()=>this.sensor_update())),window.setInterval((()=>this.sensor_update()),1e4)}sensor_update(){(async()=>{const e=navigator.getBattery?await navigator.getBattery():void 0;this.sendUpdate({browser:{path:window.location.pathname,visibility:document.visibilityState,userAgent:navigator.userAgent,currentUser:this._hass&&this._hass.user&&this._hass.user.name,fullyKiosk:this.isFully,width:window.innerWidth,height:window.innerHeight,battery_level:this.isFully?window.fully.getBatteryLevel():e?100*e.level:void 0,charging:this.isFully?window.fully.isPlugged():e?e.charging:void 0,darkMode:this._hass&&this._hass.themes&&this._hass.themes.darkMode,userData:this._hass&&this._hass.user,config:this.config}})})()}do_navigate(e){e&&(history.pushState(null,"",e),u("location-changed",{},document.querySelector("home-assistant")))}};var q="1.5.3";class C extends(((e,t)=>t.reduceRight(((e,t)=>t(e)),e))(g,[x,E,k,S,b,f])){constructor(){super(),this.entity_id=s.replace("-","_"),this.cast=null!==document.querySelector("hc-main"),this.connect(),document.body.addEventListener("ll-custom",(e=>{e.detail.browser_mod&&this.msg_callback(e.detail.browser_mod)})),console.info(`%cBROWSER_MOD ${q} IS INSTALLED\n %cDeviceID: ${s}`,"color: green; font-weight: bold","")}async msg_callback(e){const t={update:e=>this.update(e),debug:e=>this.debug(e),play:e=>this.player_play(e.media_content_id),pause:e=>this.player_pause(),stop:e=>this.player_stop(),"set-volume":e=>this.player_set_volume(e.volume_level),mute:e=>this.player_mute(e.mute),toast:e=>this.do_toast(e.message,e.duration),popup:e=>this.do_popup(e),"close-popup":e=>this.do_close_popup(),"more-info":e=>this.do_more_info(e.entity_id,e.large),navigate:e=>this.do_navigate(e.navigation_path),"set-theme":e=>this.set_theme(e),"lovelace-reload":e=>this.lovelace_reload(e),"window-reload":()=>window.location.reload(),blackout:e=>this.do_blackout(e.time?parseInt(e.time):void 0),"no-blackout":e=>{e.brightness&&this.isFully&&window.fully.setScreenBrightness(e.brightness),this.no_blackout()},"call-service":e=>this.call_service(e),commands:async e=>{for(const t of e.commands)await this.msg_callback(t)},delay:async e=>await new Promise((t=>{window.setTimeout(t,1e3*e.seconds)}))};await t[e.command.replace("_","-")](e)}debug(e){w("deviceID",{type:"markdown",content:`# ${s}`}),alert(s)}set_theme(e){e.theme||(e.theme="default"),u("settheme",{theme:e.theme},document.querySelector("home-assistant"))}lovelace_reload(e){const t=l();t&&u("config-refresh",{},t)}call_service(e){const t=e=>{if("string"==typeof e&&"this"===e)return s;if(Array.isArray(e))return e.map(t);if(e.constructor==Object)for(const s in e)e[s]=t(e[s]);return e},[o,i]=e.service.split(".",2);let a=t(JSON.parse(JSON.stringify(e.service_data)));this._hass.callService(o,i,a)}update(e=null){e&&(e.name&&(this.entity_id=e.name.toLowerCase()),e.camera&&!this.isFully&&this.setup_camera(),this.config={...this.config,...e}),this.player_update(),this.fully_update(),this.screen_update(),this.sensor_update()}}const D=[customElements.whenDefined("home-assistant"),customElements.whenDefined("hc-main")];Promise.race(D).then((()=>{window.setTimeout((()=>{window.browser_mod=window.browser_mod||new C}),1e3)})); + } + }; + + window.addEventListener("popstate", listener); + window._moreInfoDialogListener = true; + } + + history.replaceState( { + cardToolsPopup: false, + }, + "" + ); + + history.pushState( { + cardToolsPopup: true, + params: {title, card, large, style, fullscreen}, + }, + "" + ); + + el.showDialog(title, card, large, style, fullscreen); + +} + +/*! ***************************************************************************** +Copyright (c) Microsoft Corporation. + +Permission to use, copy, modify, and/or distribute this software for any +purpose with or without fee is hereby granted. + +THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH +REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY +AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, +INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM +LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR +OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR +PERFORMANCE OF THIS SOFTWARE. +***************************************************************************** */ + +function __decorate(decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +} + +/** + * @license + * Copyright 2019 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t$1=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,e$3=Symbol(),n$4=new Map;class s$3{constructor(t,n){if(this._$cssResult$=!0,n!==e$3)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t;}get styleSheet(){let e=n$4.get(this.cssText);return t$1&&void 0===e&&(n$4.set(this.cssText,e=new CSSStyleSheet),e.replaceSync(this.cssText)),e}toString(){return this.cssText}}const o$3=t=>new s$3("string"==typeof t?t:t+"",e$3),r$2=(t,...n)=>{const o=1===t.length?t[0]:n.reduce(((e,n,s)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(n)+t[s+1]),t[0]);return new s$3(o,e$3)},i$2=(e,n)=>{t$1?e.adoptedStyleSheets=n.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):n.forEach((t=>{const n=document.createElement("style"),s=window.litNonce;void 0!==s&&n.setAttribute("nonce",s),n.textContent=t.cssText,e.appendChild(n);}));},S$1=t$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const n of t.cssRules)e+=n.cssText;return o$3(e)})(t):t; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */var s$2;const e$2=window.trustedTypes,r$1=e$2?e$2.emptyScript:"",h$1=window.reactiveElementPolyfillSupport,o$2={toAttribute(t,i){switch(i){case Boolean:t=t?r$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t);}catch(t){s=null;}}return s}},n$3=(t,i)=>i!==t&&(i==i||t==t),l$2={attribute:!0,type:String,converter:o$2,reflect:!1,hasChanged:n$3};class a$1 extends HTMLElement{constructor(){super(),this._$Et=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Ei=null,this.o();}static addInitializer(t){var i;null!==(i=this.l)&&void 0!==i||(this.l=[]),this.l.push(t);}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=>{const e=this._$Eh(s,i);void 0!==e&&(this._$Eu.set(e,s),t.push(e));})),t}static createProperty(t,i=l$2){if(i.state&&(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&&Object.defineProperty(this.prototype,t,e);}}static getPropertyDescriptor(t,i,s){return {get(){return this[i]},set(e){const r=this[t];this[i]=e,this.requestUpdate(t,r,s);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||l$2}static finalize(){if(this.hasOwnProperty("finalized"))return !1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this._$Eu=new Map,this.hasOwnProperty("properties")){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s]);}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(i){const s=[];if(Array.isArray(i)){const e=new Set(i.flat(1/0).reverse());for(const i of e)s.unshift(S$1(i));}else void 0!==i&&s.push(S$1(i));return s}static _$Eh(t,i){const s=i.attribute;return !1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}o(){var t;this._$Ep=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$Em(),this.requestUpdate(),null===(t=this.constructor.l)||void 0===t||t.forEach((t=>t(this)));}addController(t){var i,s;(null!==(i=this._$Eg)&&void 0!==i?i:this._$Eg=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t));}removeController(t){var i;null===(i=this._$Eg)||void 0===i||i.splice(this._$Eg.indexOf(t)>>>0,1);}_$Em(){this.constructor.elementProperties.forEach(((t,i)=>{this.hasOwnProperty(i)&&(this._$Et.set(i,this[i]),delete this[i]);}));}createRenderRoot(){var t;const s=null!==(t=this.shadowRoot)&&void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return i$2(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}));}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}));}attributeChangedCallback(t,i,s){this._$AK(t,s);}_$ES(t,i,s=l$2){var e,r;const h=this.constructor._$Eh(t,s);if(void 0!==h&&!0===s.reflect){const n=(null!==(r=null===(e=s.converter)||void 0===e?void 0:e.toAttribute)&&void 0!==r?r:o$2.toAttribute)(i,s.type);this._$Ei=t,null==n?this.removeAttribute(h):this.setAttribute(h,n),this._$Ei=null;}}_$AK(t,i){var s,e,r;const h=this.constructor,n=h._$Eu.get(t);if(void 0!==n&&this._$Ei!==n){const t=h.getPropertyOptions(n),l=t.converter,a=null!==(r=null!==(e=null===(s=l)||void 0===s?void 0:s.fromAttribute)&&void 0!==e?e:"function"==typeof l?l:null)&&void 0!==r?r:o$2.fromAttribute;this._$Ei=n,this[n]=a(i,t.type),this._$Ei=null;}}requestUpdate(t,i,s){let e=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||n$3)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&&this._$Ei!==t&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(t,s))):e=!1),!this.isUpdatePending&&e&&(this._$Ep=this._$E_());}async _$E_(){this.isUpdatePending=!0;try{await this._$Ep;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this._$Et&&(this._$Et.forEach(((t,i)=>this[i]=t)),this._$Et=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this._$Eg)||void 0===t||t.forEach((t=>{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this._$EU();}catch(t){throw i=!1,this._$EU(),t}i&&this._$AE(s);}willUpdate(t){}_$AE(t){var i;null===(i=this._$Eg)||void 0===i||i.forEach((t=>{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$Ep}shouldUpdate(t){return !0}update(t){void 0!==this._$EC&&(this._$EC.forEach(((t,i)=>this._$ES(i,this[i],t))),this._$EC=void 0),this._$EU();}updated(t){}firstUpdated(t){}}a$1.finalized=!0,a$1.elementProperties=new Map,a$1.elementStyles=[],a$1.shadowRootOptions={mode:"open"},null==h$1||h$1({ReactiveElement:a$1}),(null!==(s$2=globalThis.reactiveElementVersions)&&void 0!==s$2?s$2:globalThis.reactiveElementVersions=[]).push("1.3.1"); + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +var t;const i$1=globalThis.trustedTypes,s$1=i$1?i$1.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$1=`lit$${(Math.random()+"").slice(9)}$`,o$1="?"+e$1,n$2=`<${o$1}>`,l$1=document,h=(t="")=>l$1.createComment(t),r=t=>null===t||"object"!=typeof t&&"function"!=typeof t,d=Array.isArray,u=t=>{var i;return d(t)||"function"==typeof(null===(i=t)||void 0===i?void 0:i[Symbol.iterator])},c=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,a=/>/g,f=/>|[ \n \r](?:([^\s"'>=/]+)([ \n \r]*=[ \n \r]*(?:[^ \n \r"'`<>=]|("|')|))|$)/g,_=/'/g,m=/"/g,g=/^(?:script|style|textarea|title)$/i,p=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),$=p(1),b=Symbol.for("lit-noChange"),w=Symbol.for("lit-nothing"),T=new WeakMap,x=(t,i,s)=>{var e,o;const n=null!==(e=null==s?void 0:s.renderBefore)&&void 0!==e?e:i;let l=n._$litPart$;if(void 0===l){const t=null!==(o=null==s?void 0:s.renderBefore)&&void 0!==o?o:null;n._$litPart$=l=new N(i.insertBefore(h(),t),t,void 0,null!=s?s:{});}return l._$AI(t),l},A=l$1.createTreeWalker(l$1,129,null,!1),C=(t,i)=>{const o=t.length-1,l=[];let h,r=2===i?"":"",d=c;for(let i=0;i"===u[0]?(d=null!=h?h:c,p=-1):void 0===u[1]?p=-2:(p=d.lastIndex-u[2].length,o=u[1],d=void 0===u[3]?f:'"'===u[3]?m:_):d===m||d===_?d=f:d===v||d===a?d=c:(d=f,h=void 0);const y=d===f&&t[i+1].startsWith("/>")?" ":"";r+=d===c?s+n$2:p>=0?(l.push(o),s.slice(0,p)+"$lit$"+s.slice(p)+e$1+y):s+e$1+(-2===p?(l.push(void 0),i):y);}const u=r+(t[o]||"")+(2===i?"":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return [void 0!==s$1?s$1.createHTML(u):u,l]};class E{constructor({strings:t,_$litType$:s},n){let l;this.parts=[];let r=0,d=0;const u=t.length-1,c=this.parts,[v,a]=C(t,s);if(this.el=E.createElement(v,n),A.currentNode=this.el.content,2===s){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes);}for(;null!==(l=A.nextNode())&&c.length0){l.textContent=i$1?i$1.emptyScript:"";for(let i=0;i2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=w;}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const o=this.strings;let n=!1;if(void 0===o)t=P(this,t,i,0),n=!r(t)||t!==this._$AH&&t!==b,n&&(this._$AH=t);else {const e=t;let l,h;for(t=o[0],l=0;l"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,finisher(n){n.createProperty(e.key,i);}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:e.key,initializer(){"function"==typeof e.initializer&&(this[e.key]=e.initializer.call(this));},finisher(n){n.createProperty(e.key,i);}};function e(e){return (n,t)=>void 0!==t?((i,e,n)=>{e.constructor.createProperty(n,i);})(e,n,t):i(e,n)} + +/** + * @license + * Copyright 2021 Google LLC + * 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)); + +class BrowserPlayerEditor extends s { + setConfig(config) { } + render() { + return $ `
Nothing to configure.
`; + } +} +(async () => { + var _a; + while (((_a = customElements.get("home-assistant")) !== null && _a !== void 0 ? _a : 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.customCards = window.customCards || []; + window.customCards.push({ + type: "browser-player", + name: "Browser Player", + preview: true, + }); + } +})(); + +class BrowserPlayer extends s { + 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 $ ``; + } + const player = window.browser_mod.player; + return $ ` + +
+ + + + + + ${window.browser_mod.player_state === "stopped" + ? $ `
` + : $ ` + + + + `} + + + +
+ +
${deviceID}
+ + `; + } + static get styles() { + return r$2 ` + 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; + } + `; + } +} +__decorate([ + e() +], BrowserPlayer.prototype, "hass", void 0); +(async () => { + var _a; + while (((_a = customElements.get("home-assistant")) !== null && _a !== void 0 ? _a : customElements.get("hc-main")) === + undefined) + await new Promise((resolve) => window.setTimeout(resolve, 100)); + if (!customElements.get("browser-player")) + customElements.define("browser-player", BrowserPlayer); +})(); + +const hassWindow = window; +class BrowserModConnection { + async connect() { + const isCast = document.querySelector("hc-main") !== null; + if (!isCast) { + while (!hassWindow.hassConnection) + await new Promise((resolve) => window.setTimeout(resolve, 100)); + this._connection = (await hassWindow.hassConnection).conn; + } + else { + this._connection = hass().connection; + } + this._connection.subscribeMessage((msg) => this.msg_callback(msg), { + type: "browser_mod/connect", + deviceID: deviceID, + }); + provideHass(this); + } + set hass(hass) { + this._hass = hass; + } + 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, + }); + } +} + +const BrowserModMediaPlayerMixin = (C) => class extends C { + constructor() { + super(); + this.player = new Audio(); + for (const event of ["play", "pause", "ended", "volumechange"]) { + this.player.addEventListener(event, () => this.player_update()); + } + window.addEventListener("click", () => { + if (!this.player.ended) + this.player.play(); + }, { + once: true, + }); + } + player_update(ev) { + this.sendUpdate({ + player: { + volume: this.player.volume, + muted: this.player.muted, + src: this.player.src, + state: this.player_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); + } +}; + +const FullyKioskMixin = (C) => class extends C { + get isFully() { + return window.fully !== undefined; + } + constructor() { + super(); + if (!this.isFully) + return; + this._fullyMotion = false; + this._motionTimeout = undefined; + for (const ev of [ + "screenOn", + "screenOff", + "pluggedAC", + "pluggedUSB", + "onBatteryLevelChanged", + "unplugged", + "networkReconnect", + "onMotion", + ]) { + window.fully.bind(ev, `window.browser_mod.fully_update("${ev}");`); + } + window.fully.bind("onScreensaverStart", `window.browser_mod.fully_screensaver = true; window.browser_mod.screen_update();`); + window.fully.bind("onScreensaverStop", `window.browser_mod.fully_screensaver = false; window.browser_mod.screen_update();`); + this._keepingAlive = false; + } + fully_update(event) { + if (!this.isFully) + return; + if (event === "screenOn") { + window.clearTimeout(this._keepAliveTimer); + if (!this._keepingAlive) + this.screen_update(); + } + else if (event === "screenOff") { + this.screen_update(); + this._keepingAlive = false; + if (this.config.force_stay_awake) { + this._keepAliveTimer = window.setTimeout(() => { + this._keepingAlive = true; + window.fully.turnScreenOn(); + window.fully.turnScreenOff(); + }, 270000); + } + } + else if (event === "onMotion") { + this.fullyMotionTriggered(); + } + this.sendUpdate({ + fully: { + battery: window.fully.getBatteryLevel(), + charging: window.fully.isPlugged(), + motion: this._fullyMotion, + ip: window.fully.getIp4Address(), + }, + }); + } + startCamera() { + if (this._fullyCameraTimer !== undefined) + return; + this._fullyCameraTimer = window.setInterval(() => { + this.sendUpdate({ + camera: window.fully.getCamshotJpgBase64(), + }); + }, 200); + } + stopCamera() { + window.clearInterval(this._fullyCameraTimer); + this._fullyCameraTimer = undefined; + } + fullyMotionTriggered() { + if (this._keepingAlive) + return; + this._fullyMotion = true; + this.startCamera(); + clearTimeout(this._motionTimeout); + this._motionTimeout = setTimeout(() => { + this._fullyMotion = false; + this.stopCamera(); + this.fully_update(); + }, 5000); + this.fully_update(); + } +}; + +const BrowserModCameraMixin = (C) => class extends C { + setup_camera() { + console.log("Starting camera"); + if (this._video) + return; + this._video = document.createElement("video"); + this._video.autoplay = true; + this._video.playsInline = true; + this._video.style.display = "none"; + this._canvas = document.createElement("canvas"); + this._canvas.style.display = "none"; + document.body.appendChild(this._video); + document.body.appendChild(this._canvas); + if (!navigator.mediaDevices) + return; + 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", () => { + if (this._video.ended || this._video.paused) + 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); + this.sendUpdate({ + camera: this._canvas.toDataURL("image/jpeg"), + }); + setTimeout(() => this.update_camera(), Math.round(1000 / this._camera_framerate)); + } +}; + +const BrowserModScreensaverMixin = (C) => class extends C { + constructor() { + super(); + this._blackout_panel = document.createElement("div"); + this._screenSaver = undefined; + this._screenSaverTimer = undefined; + this._screenSaverTimeOut = 0; + this._screenSaver = { + fn: undefined, + clearfn: undefined, + timer: undefined, + timeout: undefined, + listeners: {}, + active: false, + }; + this._blackout_panel.style.cssText = ` + position: fixed; + left: 0; + top: 0; + padding: 0; + margin: 0; + width: 100%; + height: 100%; + background: black; + display: none; + `; + document.body.appendChild(this._blackout_panel); + } + screensaver_set(fn, clearfn, time) { + this._ss_clear(); + this._screenSaver = { + fn, + clearfn, + timer: undefined, + 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); + } + screensaver_update() { + if (this._screenSaver.active) { + this.screensaver_stop(); + } + else { + window.clearTimeout(this._screenSaver.timer); + 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.timeout) { + this.screensaver_set(this._screenSaver.fn, this._screenSaver.clearfn, this._screenSaver.timeout); + } + } + _ss_clear() { + window.clearTimeout(this._screenSaverTimer); + for (const [k, v] of Object.entries(this._screenSaver.listeners)) { + window.removeEventListener(k, v); + } + } + _ss_run() { + this._screenSaver.active = true; + this._screenSaver.fn(); + } + do_blackout(timeout) { + this.screensaver_set(() => { + if (this.isFully) { + if (this.config.screensaver) + window.fully.startScreensaver(); + else + 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.isFully) { + if (!window.fully.getScreenOn()) + window.fully.turnScreenOn(); + window.fully.stopScreensaver(); + } + this.screen_update(); + }, timeout || 0); + } + no_blackout() { + if (this.isFully) { + window.fully.turnScreenOn(); + window.fully.stopScreensaver(); + } + this.screensaver_stop(); + } + screen_update() { + this.sendUpdate({ + screen: { + blackout: this.isFully + ? this.fully_screensaver !== undefined + ? this.fully_screensaver + : !window.fully.getScreenOn() + : Boolean(this._blackout_panel.style.display === "block"), + brightness: this.isFully + ? window.fully.getScreenBrightness() + : undefined, + }, + }); + } +}; + +async function moreInfo(entity, large=false) { + const root = document.querySelector("hc-main") || document.querySelector("home-assistant"); + fireEvent("hass-more-info", {entityId: entity}, root); + const el = await selectTree(root, "$ ha-more-info-dialog"); + if(el) + el.large = large; + return el; +} + +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)); + const isCast = document.querySelector("hc-main") !== null; + if (!isCast) + load_lovelace(); + } + _popup_card(ev) { + if (!lovelace()) + return; + if (!ev.detail || !ev.detail.entityId) + return; + const data = Object.assign(Object.assign({}, lovelace().config.popup_cards), lovelace().config.views[lovelace().current_view].popup_cards); + const d = data[ev.detail.entityId]; + if (!d) + return; + this.do_popup(d); + window.setTimeout(() => { + fireEvent("hass-more-info", { entityID: "." }, ha_element()); + }, 50); + } + do_popup(cfg) { + 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(cfg.title, cfg.card, cfg.large, cfg.style, cfg.auto_close || cfg.hide_header); + }; + if (cfg.auto_close) { + this.screensaver_set(open, closePopUp, cfg.time); + } + else { + open(); + } + } + do_close_popup() { + this.screensaver_stop(); + closePopUp(); + } + do_more_info(entity_id, large) { + if (!entity_id) + return; + moreInfo(entity_id, large); + } + do_toast(message, duration) { + if (!message) + return; + fireEvent("hass-notification", { + message, + duration: parseInt(duration), + }, ha_element()); + } +}; + +const BrowserModBrowserMixin = (C) => class extends C { + constructor() { + super(); + document.addEventListener("visibilitychange", () => this.sensor_update()); + window.addEventListener("location-changed", () => this.sensor_update()); + window.setInterval(() => this.sensor_update(), 10000); + } + sensor_update() { + const update = async () => { + var _a, _b, _c, _d, _e, _f; + const battery = (_b = (_a = navigator).getBattery) === null || _b === void 0 ? void 0 : _b.call(_a); + this.sendUpdate({ + browser: { + path: window.location.pathname, + visibility: document.visibilityState, + userAgent: navigator.userAgent, + currentUser: this._hass && this._hass.user && this._hass.user.name, + fullyKiosk: this.isFully, + width: window.innerWidth, + height: window.innerHeight, + battery_level: (_d = (_c = window.fully) === null || _c === void 0 ? void 0 : _c.getBatteryLevel()) !== null && _d !== void 0 ? _d : (battery === null || battery === void 0 ? void 0 : battery.level) * 100, + charging: (_f = (_e = window.fully) === null || _e === void 0 ? void 0 : _e.isPlugged()) !== null && _f !== void 0 ? _f : battery === null || battery === void 0 ? void 0 : battery.charging, + darkMode: this._hass && this._hass.themes && this._hass.themes.darkMode, + userData: this._hass && this._hass.user, + config: this.config, + }, + }); + }; + update(); + } + do_navigate(path) { + if (!path) + return; + history.pushState(null, "", path); + fireEvent("location-changed", {}, ha_element()); + } +}; + +var name = "browser_mod"; +var version = "1.5.3"; +var description = ""; +var scripts = { + build: "rollup -c", + watch: "rollup -c --watch", + "update-card-tools": "npm uninstall card-tools && npm install thomasloven/lovelace-card-tools" +}; +var keywords = [ +]; +var author = "Thomas Lovén"; +var license = "MIT"; +var devDependencies = { + "@babel/core": "^7.17.9", + "@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", + typescript: "^4.6.3" +}; +var dependencies = { + "card-tools": "github:thomasloven/lovelace-card-tools" +}; +var pjson = { + name: name, + "private": true, + version: version, + description: description, + scripts: scripts, + keywords: keywords, + author: author, + license: license, + devDependencies: devDependencies, + dependencies: dependencies +}; + +const ext = (baseClass, mixins) => mixins.reduceRight((base, mixin) => mixin(base), baseClass); +class BrowserMod extends ext(BrowserModConnection, [ + BrowserModBrowserMixin, + BrowserModPopupsMixin, + BrowserModScreensaverMixin, + BrowserModCameraMixin, + FullyKioskMixin, + BrowserModMediaPlayerMixin, +]) { + constructor() { + super(); + this.entity_id = deviceID.replace("-", "_"); + this.cast = document.querySelector("hc-main") !== null; + this.connect(); + document.body.addEventListener("ll-custom", (ev) => { + if (ev.detail.browser_mod) { + this.msg_callback(ev.detail.browser_mod); + } + }); + console.info(`%cBROWSER_MOD ${pjson.version} IS INSTALLED + %cDeviceID: ${deviceID}`, "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.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 (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]); + } + 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 = Object.assign(Object.assign({}, this.config), msg); + } + this.player_update(); + this.fully_update(); + this.screen_update(); + this.sensor_update(); + } +} +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); +}); + +export { BrowserMod }; diff --git a/js/browser-player-editor.js b/js/browser-player-editor.js deleted file mode 100644 index 05252bb..0000000 --- a/js/browser-player-editor.js +++ /dev/null @@ -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`
Nothing to configure.
`; - } - } - - 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, - }); - } -}); diff --git a/js/browser-player-editor.ts b/js/browser-player-editor.ts new file mode 100644 index 0000000..646f37b --- /dev/null +++ b/js/browser-player-editor.ts @@ -0,0 +1,25 @@ +import { LitElement, html } from "lit"; + +class BrowserPlayerEditor extends LitElement { + setConfig(config) {} + render() { + return html`
Nothing to configure.
`; + } +} + +(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, + }); + } +})(); diff --git a/js/browser-player.js b/js/browser-player.js deleted file mode 100644 index e017125..0000000 --- a/js/browser-player.js +++ /dev/null @@ -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` - -
- - - - - - ${window.browser_mod.player_state === "stopped" - ? html`
` - : html` - - - - `} - - - -
- -
${deviceID}
- - `; - } - - 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); -}); diff --git a/js/browser-player.ts b/js/browser-player.ts new file mode 100644 index 0000000..f1a7938 --- /dev/null +++ b/js/browser-player.ts @@ -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` + +
+ + + + + + ${window.browser_mod.player_state === "stopped" + ? html`
` + : html` + + + + `} + + + +
+ +
${deviceID}
+ + `; + } + + 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); +})(); diff --git a/js/browser.js b/js/browser.ts similarity index 67% rename from js/browser.js rename to js/browser.ts index a00f6d8..e6c47a3 100644 --- a/js/browser.js +++ b/js/browser.ts @@ -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 = (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()); } }; diff --git a/js/camera.js b/js/camera.ts similarity index 100% rename from js/camera.js rename to js/camera.ts diff --git a/js/connection.js b/js/connection.ts similarity index 77% rename from js/connection.js rename to js/connection.ts index 5b628cd..a918cd1 100644 --- a/js/connection.js +++ b/js/connection.ts @@ -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); } diff --git a/js/fullyKiosk.js b/js/fullyKiosk.ts similarity index 98% rename from js/fullyKiosk.js rename to js/fullyKiosk.ts index aaeae7f..58fd35d 100644 --- a/js/fullyKiosk.js +++ b/js/fullyKiosk.ts @@ -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); diff --git a/js/main.js b/js/main.ts similarity index 90% rename from js/main.js rename to js/main.ts index d1d4d8a..b511d1d 100644 --- a/js/main.js +++ b/js/main.ts @@ -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); }); diff --git a/js/mediaPlayer.js b/js/mediaPlayer.ts similarity index 98% rename from js/mediaPlayer.js rename to js/mediaPlayer.ts index bd1278b..8b0f0e2 100644 --- a/js/mediaPlayer.js +++ b/js/mediaPlayer.ts @@ -19,7 +19,7 @@ export const BrowserModMediaPlayerMixin = (C) => ); } - player_update(ev) { + player_update(ev?) { this.sendUpdate({ player: { volume: this.player.volume, diff --git a/js/popups.js b/js/popups.ts similarity index 88% rename from js/popups.js rename to js/popups.ts index d144746..1d69670 100644 --- a/js/popups.js +++ b/js/popups.ts @@ -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() ); } }; diff --git a/js/screensaver.js b/js/screensaver.ts similarity index 98% rename from js/screensaver.js rename to js/screensaver.ts index 6b2e23b..a1b0678 100644 --- a/js/screensaver.js +++ b/js/screensaver.ts @@ -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); } } diff --git a/js/types.ts b/js/types.ts new file mode 100644 index 0000000..34491ae --- /dev/null +++ b/js/types.ts @@ -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; + } +} diff --git a/package-lock.json b/package-lock.json index ab011e9..3df62a2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 8d120d0..ea085ac 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/rollup.config.js b/rollup.config.js index 99a8588..a029db0 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -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/**", }), diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..ea2f28b --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "target": "es2017", + "moduleResolution": "node", + "resolveJsonModule": true, + "allowSyntheticDefaultImports": true, + "experimentalDecorators": true + } +}