Split js parts

2022-04-29 19:34:21 +00:00
parent edd03225d2
commit 69e9642b4b
14 changed files with 42 additions and 8 deletions
--- a/js/plugin/browser-player.ts
+++ b/js/plugin/browser-player.ts
@@ -0,0 +1,140 @@
+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 { hass_loaded } from "card-tools/src/hass";
+
+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`
+      <ha-card>
+        <div class="card-content">
+          <ha-icon-button @click=${this.handleMute}>
+            <ha-icon
+              .icon=${player.muted ? "mdi:volume-off" : "mdi:volume-high"}
+            ></ha-icon>
+          </ha-icon-button>
+          <ha-slider
+            min="0"
+            max="1"
+            step="0.01"
+            ?disabled=${player.muted}
+            value=${player.volume}
+            @change=${this.handleVolumeChange}
+          ></ha-slider>
+
+          ${window.browser_mod.player_state === "stopped"
+            ? html`<div class="placeholder"></div>`
+            : html`
+                <ha-icon-button @click=${this.handlePlayPause} highlight>
+                  <ha-icon
+                    .icon=${player.paused ? "mdi:play" : "mdi:pause"}
+                  ></ha-icon>
+                </ha-icon-button>
+              `}
+          <ha-icon-button @click=${this.handleMoreInfo}>
+            <ha-icon .icon=${"mdi:cog"}></ha-icon>
+          </ha-icon-button>
+        </div>
+
+        <div class="device-id" @click=${this.setDeviceID}>${deviceID}</div>
+      </ha-card>
+    `;
+  }
+
+  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 () => {
+  await hass_loaded();
+
+  if (!customElements.get("browser-player"))
+    customElements.define("browser-player", BrowserPlayer);
+})();