Prevent cast timeout after 10 mins, show current shown Lovelace view (#10586)

cast/src/html/media.html.template

@@ -11,6 +11,7 @@
         --progress-color: #03a9f4;
         --splash-image: url('https://home-assistant.io/images/cast/splash.png');
         --splash-size: cover;
+        --background-color: #41bdf5;
       }
     </style>
     <script>

cast/src/media/entrypoint.ts

@@ -1,7 +1,4 @@
-import { CastReceiverContext } from "chromecast-caf-receiver/cast.framework";
+const castContext = cast.framework.CastReceiverContext.getInstance();
-
-const castContext =
-  cast.framework.CastContext.getInstance() as unknown as CastReceiverContext;
 
 const playerManager = castContext.getPlayerManager();
 

cast/src/receiver/entrypoint.ts

@@ -8,6 +8,9 @@ import { ReceivedMessage } from "./types";
 
 const lovelaceController = new HcMain();
 document.body.append(lovelaceController);
+lovelaceController.addEventListener("cast-view-changed", (ev) => {
+  playDummyMedia(ev.detail.title);
+});
 
 const mediaPlayer = document.createElement("cast-media-player");
 mediaPlayer.style.display = "none";
@@ -28,21 +31,29 @@ const setTouchControlsVisibility = (visible: boolean) => {
   }
 };
 
-const playDummyMedia = () => {
+let timeOut: number | undefined;
-  const playerManager = castContext.getPlayerManager();
+
+const playDummyMedia = (viewTitle?: string) => {
   const loadRequestData = new cast.framework.messages.LoadRequestData();
   loadRequestData.autoplay = true;
   loadRequestData.media = new cast.framework.messages.MediaInformation();
   loadRequestData.media.contentId =
-    "https://www.home-assistant.io/images/blog/2018-09-thinking-big/social.png";
+    "https://cast.home-assistant.io/images/google-nest-hub.png";
   loadRequestData.media.contentType = "image/jpeg";
   loadRequestData.media.streamType = cast.framework.messages.StreamType.NONE;
   const metadata = new cast.framework.messages.GenericMediaMetadata();
-  metadata.title = "Home Assistant Lovelace";
+  metadata.title = viewTitle;
   loadRequestData.media.metadata = metadata;
 
   loadRequestData.requestId = 0;
   playerManager.load(loadRequestData);
+  if (timeOut) {
+    clearTimeout(timeOut);
+    timeOut = undefined;
+  }
+  if (castContext.getDeviceCapabilities().touch_input_supported) {
+    timeOut = window.setTimeout(() => playDummyMedia(viewTitle), 540000); // repeat every 9 minutes to keep it active (gets deactivated after 10 minutes)
+  }
 };
 
 const showLovelaceController = () => {
@@ -50,7 +61,6 @@ const showLovelaceController = () => {
   lovelaceController.style.display = "initial";
   document.body.setAttribute("style", "overflow-y: auto !important");
   setTouchControlsVisibility(false);
-  playDummyMedia();
 };
 
 const showMediaPlayer = () => {
@@ -69,6 +79,7 @@ const showMediaPlayer = () => {
       --progress-color: #03a9f4;
       --splash-image: url('https://home-assistant.io/images/cast/splash.png');
       --splash-size: cover;
+      --background-color: #41bdf5;
     }
     `;
     document.head.appendChild(style);
@@ -81,22 +92,6 @@ options.customNamespaces = {
   [CAST_NS]: cast.framework.system.MessageType.JSON,
 };
 
-// The docs say we need to set options.touchScreenOptimizeApp = true
-// https://developers.google.com/cast/docs/caf_receiver/customize_ui#accessing_ui_controls
-// This doesn't work.
-// @ts-ignore
-options.touchScreenOptimizedApp = true;
-
-// The class reference say we can set a uiConfig in options to set it
-// https://developers.google.com/cast/docs/reference/caf_receiver/cast.framework.CastReceiverOptions#uiConfig
-// This doesn't work either.
-// @ts-ignore
-options.uiConfig = new cast.framework.ui.UiConfig();
-// @ts-ignore
-options.uiConfig.touchScreenOptimizedApp = true;
-
-castContext.setInactivityTimeout(86400); // 1 day
-
 castContext.addCustomMessageListener(
   CAST_NS,
   // @ts-ignore
@@ -123,7 +118,7 @@ playerManager.setMessageInterceptor(
   (loadRequestData) => {
     if (
       loadRequestData.media.contentId ===
-      "https://www.home-assistant.io/images/blog/2018-09-thinking-big/social.png"
+      "https://cast.home-assistant.io/images/google-nest-hub.png"
     ) {
       return loadRequestData;
     }

cast/src/receiver/layout/hc-lovelace.ts

@@ -1,5 +1,6 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
 import "../../../../src/panels/lovelace/views/hui-view";
@@ -54,6 +55,21 @@ class HcLovelace extends LitElement {
       const index = this._viewIndex;
 
       if (index !== undefined) {
+        const dashboardTitle = this.lovelaceConfig.title || this.urlPath;
+
+        const viewTitle =
+          this.lovelaceConfig.views[index].title ||
+          this.lovelaceConfig.views[index].path;
+
+        fireEvent(this, "cast-view-changed", {
+          title:
+            dashboardTitle || viewTitle
+              ? `${dashboardTitle || ""}${
+                  dashboardTitle && viewTitle ? ": " : ""
+                }${viewTitle || ""}`
+              : undefined,
+        });
+
         const configBackground =
           this.lovelaceConfig.views[index].background ||
           this.lovelaceConfig.background;
@@ -101,8 +117,15 @@ class HcLovelace extends LitElement {
   }
 }
 
+export interface CastViewChanged {
+  title: string | undefined;
+}
+
 declare global {
   interface HTMLElementTagNameMap {
     "hc-lovelace": HcLovelace;
   }
+  interface HASSDomEvents {
+    "cast-view-changed": CastViewChanged;
+  }
 }