Make things work with Home Assistant Cast

src/event.js

@@ -1,3 +1,5 @@
+import {lovelace_view} from "./hass";
+
 export function fireEvent(ev, detail, entity=null) {
   ev = new Event(ev, {
     bubbles: true,
@@ -8,18 +10,7 @@ export function fireEvent(ev, detail, entity=null) {
   if(entity) {
     entity.dispatchEvent(ev);
   } else {
-    var root = document.querySelector("home-assistant");
+    var root = lovelace_view();
-    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 #view");
-    root = root && root.firstElementChild;
     if (root) root.dispatchEvent(ev);
   }
 }

src/hass.js

@@ -1,21 +1,32 @@
 export function hass() {
-  if(document.querySelector('home-assistant'))
-    return document.querySelector('home-assistant').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;
 };
 
 export function provideHass(element) {
-  if(document.querySelector('home-assistant'))
-    return document.querySelector("home-assistant").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;
 }
 
 export function lovelace() {
-  var root = document.querySelector("home-assistant");
+  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;
@@ -29,11 +40,21 @@ export function lovelace() {
     ll.current_view = root.___curView;
     return ll;
   }
+
   return null;
 }
 
 export function lovelace_view() {
-  var root = document.querySelector("home-assistant");
+  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");
+    return root;
+  }
+
+  root = document.querySelector("home-assistant");
   root = root && root.shadowRoot;
   root = root && root.querySelector("home-assistant-main");
   root = root && root.shadowRoot;

src/lit-element.js

@@ -1,4 +1,6 @@
-export const LitElement = customElements.get('home-assistant-main') ? Object.getPrototypeOf(customElements.get('home-assistant-main')) : Object.getPrototypeOf(customElements.get('hui-view'));
+export const LitElement = customElements.get('home-assistant-main')
+  ? Object.getPrototypeOf(customElements.get('home-assistant-main'))
+  : Object.getPrototypeOf(customElements.get('hui-view'));
 
 export const html = LitElement.prototype.html;
 

src/more-info.js

@@ -1,8 +1,9 @@
-import { fireEvent } from "./event.js";
+import { fireEvent } from "./event";
 
 export function moreInfo(entity, large=false) {
-  fireEvent("hass-more-info", {entityId: entity}, document.querySelector("home-assistant"));
+  const root = document.querySelector("hc-main") || document.querySelector("home-assistant");
-  const el = document.querySelector("home-assistant")._moreInfoEl;
+  fireEvent("hass-more-info", {entityId: entity}, root);
+  const el = root._moreInfoEl;
   el.large = large;
   return el;
 }

src/popup.js

@@ -1,20 +1,18 @@
-import { hass, provideHass } from "./hass.js";
+import { fireEvent } from "./event";
-import { fireEvent } from "./event.js";
+import "./card-maker"
-import { createCard } from "./lovelace-element.js";
-import { moreInfo } from "./more-info.js";
-import "./card-maker.js"
 
 export function closePopUp() {
-  const moreInfoEl = document.querySelector("home-assistant") && document.querySelector("home-assistant")._moreInfoEl;
+  const root = document.querySelector("hc-main") || document.querySelector("home-assistant");
+  const moreInfoEl = root && root._moreInfoEl;
   if(moreInfoEl)
     moreInfoEl.close();
 }
 
 export function popUp(title, card, large=false, style=null, fullscreen=false) {
-
+  const root = document.querySelector("hc-main") || document.querySelector("home-assistant");
   // Force _moreInfoEl to be loaded
-  fireEvent("hass-more-info", {entityId: null}, document.querySelector("home-assistant"));
+  fireEvent("hass-more-info", {entityId: null}, root);
-  const moreInfoEl = document.querySelector("home-assistant")._moreInfoEl;
+  const moreInfoEl = root._moreInfoEl;
   // Close and reopen to clear any previous styling
   // Necessary for popups from popups
   moreInfoEl.close();