fix: Panel height should be 100% when casted (#1750)

src/card-controller/card-element-manager.ts

@@ -1,6 +1,7 @@
 import { LitElement, ReactiveControllerHost } from 'lit';
 import { ActionEventTarget } from '../action-handler-directive';
 import { setOrRemoveAttribute } from '../utils/basic';
+import { isBeingCasted } from '../utils/casting';
 import { isCardInPanel } from '../utils/ha';
 import { ActionExecutionRequestEventTarget } from './actions/utils/execution-request';
 import { InitializationAspect } from './initialization-manager';
@@ -83,7 +84,7 @@ export class CardElementManager {
 
     // Whether or not the card is in panel mode on the dashboard.
     setOrRemoveAttribute(this._element, isCardInPanel(this._element), 'panel');
-    setOrRemoveAttribute(this._element, true, 'tabindex', '0');
+    setOrRemoveAttribute(this._element, isBeingCasted(), 'casted');
 
     this._api.getFullscreenManager().connect();
 
@@ -137,6 +138,7 @@ export class CardElementManager {
   public elementDisconnected(): void {
     setOrRemoveAttribute(this._element, false, 'panel');
     setOrRemoveAttribute(this._element, false, 'tabindex');
+    setOrRemoveAttribute(this._element, false, 'casted');
 
     // When the dashboard 'tab' is changed, the media is effectively unloaded.
     this._api.getMediaLoadedInfoManager().clear();

src/components-lib/menu-button-controller.ts

@@ -15,13 +15,14 @@ import { localize } from '../localize/localize.js';
 import { MediaLoadedInfo } from '../types';
 import {
   createCameraAction,
-  createPTZMultiAction,
   createDisplayModeAction,
+  createGeneralAction,
   createMediaPlayerAction,
   createPTZControlsAction,
-  createGeneralAction,
+  createPTZMultiAction,
 } from '../utils/action';
 import { isTruthy } from '../utils/basic';
+import { isBeingCasted } from '../utils/casting';
 import { getEntityIcon, getEntityTitle } from '../utils/ha';
 import { getPTZTarget } from '../utils/ptz';
 import { getStreamCameraID, hasSubstream } from '../utils/substream';
@@ -340,11 +341,7 @@ export class MenuButtonController {
     const mediaCapabilities = selectedMedia
       ? cameraManager?.getMediaCapabilities(selectedMedia)
       : null;
-    if (
-      view?.isViewerView() &&
-      mediaCapabilities?.canDownload &&
-      !this._isBeingCasted()
-    ) {
+    if (view?.isViewerView() && mediaCapabilities?.canDownload && !isBeingCasted()) {
       return {
         icon: 'mdi:download',
         ...config.menu.buttons.download,
@@ -429,7 +426,7 @@ export class MenuButtonController {
     config: FrigateCardConfig,
     inFullscreenMode?: boolean,
   ): MenuItem | null {
-    return !this._isBeingCasted()
+    return !isBeingCasted()
       ? {
           icon: inFullscreenMode ? 'mdi:fullscreen-exit' : 'mdi:fullscreen',
           ...config.menu.buttons.fullscreen,
@@ -712,12 +709,4 @@ export class MenuButtonController {
     }
     return {};
   }
-
-  /**
-   * Determine if the card is currently being casted.
-   * @returns
-   */
-  protected _isBeingCasted(): boolean {
-    return !!navigator.userAgent.match(/CrKey\//);
-  }
 }

src/scss/card.scss

@@ -39,10 +39,16 @@ frigate-card-loading {
 :host([dark]) {
   filter: brightness(75%);
 }
-:host([panel]) {
-  // Card always extends to the full height in panel mode
+:host([panel]:not([casted])) {
+  // Card always extends to the full height in panel mode minus the header.
   height: calc(100vh - var(--header-height));
 }
+:host([panel][casted]) {
+  // Card always extends to the full height in panel mode when casting (there is
+  // no header).
+  // See: https://github.com/dermotduffy/frigate-hass-card/issues/1746
+  height: 100%;
+}
 
 div.main {
   position: relative;

src/utils/casting.ts

@@ -0,0 +1,7 @@
+/**
+ * Determine if the card is currently being casted.
+ * @returns
+ */
+export const isBeingCasted = (): boolean => {
+  return !!navigator.userAgent.match(/CrKey\//);
+};