Various tweaks, fixes and updated documentation.

js/plugin/browser-player.ts

@@ -8,8 +8,6 @@ import "./types";
 class BrowserPlayer extends LitElement {
   @property() hass;
 
-  player;
-
   static getConfigElement() {
     return document.createElement("browser-player-editor");
   }
@@ -21,7 +19,6 @@ class BrowserPlayer extends LitElement {
     while (!window.browser_mod) {
       await new Promise((resolve) => setTimeout(resolve, 1000));
     }
-    this.player = window.browser_mod.player;
 
     for (const event of [
       "play",
@@ -31,14 +28,19 @@ class BrowserPlayer extends LitElement {
       "canplay",
       "loadeddata",
     ])
-      this.player.addEventListener(event, () => this.requestUpdate());
+      window.browser_mod._audio_player.addEventListener(event, () =>
+        this.requestUpdate()
+      );
+    window.browser_mod._video_player.addEventListener(event, () =>
+      this.requestUpdate()
+    );
   }
   handleMute(ev) {
-    this.player.muted = !this.player.muted;
+    window.browser_mod.player.muted = !window.browser_mod.player.muted;
   }
   handleVolumeChange(ev) {
     const volume_level = parseFloat(ev.target.value);
-    this.player.volume = volume_level;
+    window.browser_mod.player.volume = volume_level;
   }
   handleMoreInfo(ev) {
     this.dispatchEvent(
@@ -53,9 +55,16 @@ class BrowserPlayer extends LitElement {
     );
   }
   handlePlayPause(ev) {
-    if (!this.player.src || this.player.paused || this.player.ended)
-      this.player.play();
-    else this.player.pause();
+    if (
+      !window.browser_mod.player.src ||
+      window.browser_mod.player.paused ||
+      window.browser_mod.player.ended
+    ) {
+      window.browser_mod.player.play();
+      window.browser_mod._show_video_player();
+    } else {
+      window.browser_mod.player.pause();
+    }
   }
 
   render() {
@@ -68,15 +77,17 @@ class BrowserPlayer extends LitElement {
         <div class="card-content">
           <ha-icon-button @click=${this.handleMute}>
             <ha-icon
-              .icon=${this.player.muted ? "mdi:volume-off" : "mdi:volume-high"}
+              .icon=${window.browser_mod.player.muted
+                ? "mdi:volume-off"
+                : "mdi:volume-high"}
             ></ha-icon>
           </ha-icon-button>
           <ha-slider
             min="0"
             max="1"
             step="0.01"
-            ?disabled=${this.player.muted}
-            value=${this.player.volume}
+            ?disabled=${window.browser_mod.player.muted}
+            value=${window.browser_mod.player.volume}
             @change=${this.handleVolumeChange}
           ></ha-slider>
 
@@ -85,9 +96,9 @@ class BrowserPlayer extends LitElement {
             : html`
                 <ha-icon-button @click=${this.handlePlayPause} highlight>
                   <ha-icon
-                    .icon=${!this.player.src ||
-                    this.player.ended ||
-                    this.player.paused
+                    .icon=${!window.browser_mod.player.src ||
+                    window.browser_mod.player.ended ||
+                    window.browser_mod.player.paused
                       ? "mdi:play"
                       : "mdi:pause"}
                   ></ha-icon>

js/plugin/main.ts

@@ -67,7 +67,7 @@ import { BrowserIDMixin } from "./browserID";
   - Tweaks
     - Quickbar tweaks (ctrl+enter)?
     x Card-mod preload
-  x Video player?
+  x Video player
   x Media_seek
   - Screensavers
   x IMPORTANT: FIX DEFAULT HIDING OF ENTITIES

js/plugin/popup-card-editor.ts

@@ -256,14 +256,15 @@ class PopupCardEditor extends LitElement {
   }
   await window.browser_mod.connectionPromise;
 
-  if (!customElements.get("popup-card-editor"))
+  if (!customElements.get("popup-card-editor")) {
     customElements.define("popup-card-editor", PopupCardEditor);
-  (window as any).customCards = (window as any).customCards || [];
-  (window as any).customCards.push({
-    type: "popup-card",
-    name: "Popup card",
-    preview: false,
-    description:
-      "Replace the more-info dialog for a given entity in the view that includes this card. (Browser Mod)",
-  });
+    (window as any).customCards = (window as any).customCards || [];
+    (window as any).customCards.push({
+      type: "popup-card",
+      name: "Popup card",
+      preview: false,
+      description:
+        "Replace the more-info dialog for a given entity in the view that includes this card. (Browser Mod)",
+    });
+  }
 })();

js/plugin/popup-card.ts

@@ -43,6 +43,9 @@ class PopupCard extends LitElement {
 
     if (this.parentElement.localName === "hui-card-preview") {
       this.editMode = true;
+      this.removeAttribute("hidden");
+    } else {
+      this.setAttribute("hidden", "");
     }
   }
 

js/plugin/popups.ts

@@ -241,7 +241,7 @@ class BrowserModPopup extends LitElement {
         color: var(--primary-text-color);
         background-color: var(
           --popup-header-background-color,
-          var(--popup-background-color, --sidebar-background-color)
+          var(--popup-background-color, var(--sidebar-background-color))
         );
       }
       ha-icon-button > * {