Home Assistant Cast

demo/src/configs/arsaboo/lovelace.ts

@@ -23,6 +23,9 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
               entity: "switch.wemoporch",
             },
             "light.lifx5",
+            {
+              type: "custom:cast-demo-row",
+            },
           ],
         },
         {

demo/src/custom-cards/cast-demo-row.ts

@@ -0,0 +1,108 @@
+import {
+  html,
+  LitElement,
+  TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
+} from "lit-element";
+
+import "../../../src/components/ha-icon";
+import {
+  EntityRow,
+  CastConfig,
+} from "../../../src/panels/lovelace/entity-rows/types";
+import { HomeAssistant } from "../../../src/types";
+import { CastManager } from "../../../src/cast/cast_manager";
+import { castSendShowDemo } from "../../../src/cast/receiver_messages";
+
+@customElement("cast-demo-row")
+class CastDemoRow extends LitElement implements EntityRow {
+  public hass!: HomeAssistant;
+
+  @property() private _castManager?: CastManager | null;
+
+  public setConfig(_config: CastConfig): void {
+    // No config possible.
+  }
+
+  protected render(): TemplateResult | void {
+    if (
+      !this._castManager ||
+      this._castManager.castState === "NO_DEVICES_AVAILABLE"
+    ) {
+      return html``;
+    }
+    return html`
+      <ha-icon icon="hademo:television"></ha-icon>
+      <div class="flex">
+        <div class="name">Show Chromecast interface</div>
+        <google-cast-launcher></google-cast-launcher>
+      </div>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    import("../../../src/cast/cast_manager").then(({ getCastManager }) =>
+      getCastManager().then((mgr) => {
+        this._castManager = mgr;
+        mgr.addEventListener("state-changed", () => {
+          this.requestUpdate();
+        });
+        mgr.castContext.addEventListener(
+          cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
+          (ev) => {
+            if (ev.sessionState === "SESSION_STARTED") {
+              castSendShowDemo(mgr);
+            }
+          }
+        );
+      })
+    );
+  }
+
+  protected updated(changedProps) {
+    super.updated(changedProps);
+    this.style.display = this._castManager ? "" : "none";
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: flex;
+        align-items: center;
+      }
+      ha-icon {
+        padding: 8px;
+        color: var(--paper-item-icon-color);
+      }
+      .flex {
+        flex: 1;
+        overflow: hidden;
+        margin-left: 16px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      google-cast-launcher {
+        cursor: pointer;
+        display: inline-block;
+        height: 24px;
+        width: 24px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "cast-demo-row": CastDemoRow;
+  }
+}

demo/src/stubs/lovelace.ts

@@ -1,4 +1,5 @@
 import "../custom-cards/ha-demo-card";
+import "../custom-cards/cast-demo-row";
 // Not duplicate, one is for typing.
 // tslint:disable-next-line
 import { HADemoCard } from "../custom-cards/ha-demo-card";