import { LitElement, html, css } from "lit"; import { property } from "lit/decorators.js"; import "./browser-player-editor.ts"; import "./types"; class BrowserPlayer extends LitElement { @property() hass; player; 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)); } this.player = window.browser_mod.player; for (const event of [ "play", "pause", "ended", "volumechange", "canplay", "loadeddata", ]) this.player.addEventListener(event, () => this.requestUpdate()); } handleMute(ev) { this.player.muted = !this.player.muted; } handleVolumeChange(ev) { const volume_level = parseFloat(ev.target.value); this.player.volume = volume_level; } handleMoreInfo(ev) { this.dispatchEvent( new CustomEvent("hass-more-info", { bubbles: true, composed: true, cancelable: false, detail: { entityId: window.browser_mod.browserEntities?.player, }, }) ); } handlePlayPause(ev) { if (!this.player.src || this.player.paused || this.player.ended) this.player.play(); else this.player.pause(); } render() { if (!window.browser_mod) { window.setTimeout(() => this.requestUpdate(), 100); return html``; } return html`
${window.browser_mod.player_state === "stopped" ? html`
` : html` `}
${window.browser_mod.browserID}
`; } 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; } .browser-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 (!window.browser_mod) { await new Promise((resolve) => setTimeout(resolve, 1000)); } await window.browser_mod.connectionPromise; if (!customElements.get("browser-player")) customElements.define("browser-player", BrowserPlayer); })();