Fixes for iOS and FKB

custom_components/browser_mod/light.py

@@ -48,6 +48,10 @@ class BrowserModLight(LightEntity, BrowserModEntity):
             return SUPPORT_BRIGHTNESS
         return 0
 
+    @property
+    def brightness(self):
+        return self.data.get('brightness', None)
+
     def turn_on(self, **kwargs):
         self.connection.send("no-blackout", **kwargs)
 

js/browser-player.js

@@ -1,4 +1,4 @@
-import { deviceID } from "card-tools/src/deviceId"
+import { deviceID, setDeviceID } from "card-tools/src/deviceId"
 import { moreInfo } from "card-tools/src/more-info"
 import "./browser-player-editor.js"
 
@@ -28,22 +28,31 @@ class BrowserPlayer extends LitElement {
 
   setConfig(config) {
     this._config = config;
+    for (const event of ["play", "pause", "ended", "volumechange", "canplay", "loadeddata"])
+      window.browser_mod.player.addEventListener(event, () => this.requestUpdate());
   }
   handleMute(ev) {
-    window.browser_mod.mute({});
+    window.browser_mod.player_mute();
   }
   handleVolumeChange(ev) {
     const vol = parseFloat(ev.target.value);
-    window.browser_mod.set_volume({volume_level: vol});
+    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.play({});
+      window.browser_mod.player_play();
     else
-      window.browser_mod.pause({});
+      window.browser_mod.player_pause();
+  }
+  setDeviceID() {
+    const newID = prompt("Set deviceID", deviceID);
+    if (newID !== deviceID) {
+      setDeviceID(newID);
+      this.requestUpdate();
+    }
   }
 
   render() {
@@ -74,22 +83,22 @@ class BrowserPlayer extends LitElement {
       ${window.browser_mod.player_state === "stopped"
         ? html`<div class="placeholder"></div>`
         : html`
-          <paper-icon-button
+          <ha-icon-button
             .icon=${player.paused
               ? "mdi:play"
               : "mdi:pause"
             }
             @click=${this.handlePlayPause}
             highlight
-          ></paper-icon-button>
+          ></ha-icon-button>
           `}
-      <paper-icon-button
+      <ha-icon-button
-        .icon=${"mdi:settings"}
+        .icon=${"mdi:cog"}
         @click=${this.handleMoreInfo}
-      ></paper-icon-button>
+      ></ha-icon-button>
       </div>
 
-      <div class="device-id">
+      <div class="device-id" @click=${this.setDeviceID}>
       ${deviceID}
       </div>
 

js/browser.js

@@ -11,6 +11,8 @@ export const BrowserModBrowserMixin = (C) => class extends C {
     }
 
     sensor_update() {
+        window.queueMicrotask( async () => {
+            const battery = navigator.getBattery ? await navigator.getBattery() : undefined;
             this.sendUpdate({browser: {
                 path: window.location.pathname,
                 visibility: document.visibilityState,
@@ -19,7 +21,10 @@ export const BrowserModBrowserMixin = (C) => class extends C {
                 fullyKiosk: this.isFully,
                 width: window.innerWidth,
                 height: window.innerHeight,
+                battery: this.isFully ? window.fully.getBatteryLevel() : battery ? battery.level*100 : undefined,
+                charging: this.isFully ? window.fully.isPlugged() : battery ? battery.charging : undefined,
             }});
+        });
     }
 
     do_navigate(path) {

js/fullyKiosk.js

@@ -15,14 +15,14 @@ export const FullyKioskMixin = (C) => class extends C {
             fully.bind(event, "window.browser_mod.fully_update();");
         }
 
-        fully.bind("onMotion", "window.browser_mod.fullyMotionTriggered();");
+        window.fully.bind("onMotion", "window.browser_mod.fullyMotionTriggered();");
     }
 
     fully_update() {
         if(!this.isFully) return
         this.sendUpdate({fully: {
-            battery: fully.getBatteryLevel(),
+            battery: window.fully.getBatteryLevel(),
-            charging: fully.isPlugged(),
+            charging: window.fully.isPlugged(),
             motion: this._fullyMotion,
         }})
     }

js/main.js

@@ -12,15 +12,18 @@ import { BrowserModScreensaverMixin } from "./screensaver";
 import { BrowserModPopupsMixin } from "./popups";
 import { BrowserModBrowserMixin } from "./browser";
 
-class BrowserMod extends
+
-  BrowserModBrowserMixin(
+const ext = (baseClass, mixins) =>
-  BrowserModPopupsMixin(
+  mixins.reduceRight((base, mixin) => mixin(base), baseClass);
-  BrowserModScreensaverMixin(
+
-  BrowserModCameraMixin(
+class BrowserMod extends ext(BrowserModConnection, [
-  FullyKioskMixin(
+  BrowserModBrowserMixin,
-  BrowserModMediaPlayerMixin(
+  BrowserModPopupsMixin,
-  BrowserModConnection
+  BrowserModScreensaverMixin,
-)))))) {
+  BrowserModCameraMixin,
+  FullyKioskMixin,
+  BrowserModMediaPlayerMixin,
+  ]) {
 
 
   constructor() {

js/popups.js

@@ -16,7 +16,7 @@ export const BrowserModPopupsMixin = (C) => class extends C {
     }
 
     _popup_card(ev) {
-        if(!lovelace) return;
+        if(!lovelace()) return;
         if(!ev.detail || !ev.detail.entityId) return;
         const data = {
             ...lovelace().config.popup_cards,

js/screensaver.js

@@ -28,6 +28,11 @@ export const BrowserModScreensaverMixin = (C) => class extends C {
             display: none;
         `;
         document.body.appendChild(this._blackout_panel);
+
+        if(this.isFully) {
+            window.fully.bind("screenOn", "window.browser_mod.screen_update();");
+            window.fully.bind("screenOff", "window.browser_mod.screen_update();");
+        }
     }
 
     screensaver_set(fn, clearfn, time) {
@@ -110,7 +115,7 @@ export const BrowserModScreensaverMixin = (C) => class extends C {
     screen_update() {
         this.sendUpdate({screen: {
             blackout: this.isFully
-                ? window.fully.getScreenOn()
+                ? !window.fully.getScreenOn()
                 : Boolean(this._blackout_panel.style.display === "block"),
             brightness: this.isFully ? window.fully.getScreenBrightness() : undefined,
         }})

test/configuration.yaml

@@ -9,6 +9,7 @@ browser_mod:
     testdevice:
       alias: test
 
+
 lovelace:
   mode: yaml
   resources: