Initial version of status bar.

src/components/live/go2rtc/video-rtc.js

@@ -10,6 +10,7 @@ import {
   dispatchMediaPlayEvent,
   dispatchMediaVolumeChangeEvent,
 } from '../../../utils/media-info';
+import { getTechnologyForVideoRTC } from '../../../components-lib/live/utils/get-technology-for-video-rtc.js';
 
 /**
  * Video player for go2rtc streaming application.
@@ -325,6 +326,7 @@ export class VideoRTC extends HTMLElement {
           supportsPause: true,
           hasAudio: mayHaveAudio(this.video),
         },
+        technology: getTechnologyForVideoRTC(this),
       });
     };
     this.video.onvolumechange = () => dispatchMediaVolumeChangeEvent(this);
@@ -641,6 +643,7 @@ export class VideoRTC extends HTMLElement {
         receivedFirstFrame = true;
         dispatchMediaLoadedEvent(this, this.video, {
           player: this.containingPlayer,
+          technology: ['mjpeg'],
         });
       }
     };
@@ -668,6 +671,7 @@ export class VideoRTC extends HTMLElement {
 
         dispatchMediaLoadedEvent(this, video2, {
           player: this.containingPlayer,
+          technology: ['mp4'],
         });
       }
 

src/components/live/live-jsmpeg.ts

@@ -141,6 +141,7 @@ export class FrigateCardLiveJSMPEG extends LitElement implements FrigateCardMedi
         capabilities: {
           supportsPause: true,
         },
+        technology: ['jsmpeg'],
       });
     }
   }

src/components/live/live-webrtc-card.ts

@@ -1,8 +1,9 @@
-import { Task } from '@lit-labs/task';
 import { HomeAssistant } from '@dermotduffy/custom-card-helpers';
+import { Task } from '@lit-labs/task';
 import { CSSResultGroup, html, LitElement, TemplateResult, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { CameraEndpoints } from '../../camera-manager/types.js';
+import { getTechnologyForVideoRTC } from '../../components-lib/live/utils/get-technology-for-video-rtc.js';
 import { CameraConfig, CardWideConfig } from '../../config/types.js';
 import { localize } from '../../localize/localize.js';
 import liveWebRTCCardStyle from '../../scss/live-webrtc-card.scss';
@@ -22,6 +23,7 @@ import {
 import { screenshotMedia } from '../../utils/screenshot.js';
 import { renderTask } from '../../utils/task.js';
 import { dispatchErrorMessageEvent, renderProgressIndicator } from '../message.js';
+import { VideoRTC } from './go2rtc/video-rtc.js';
 
 // Create a wrapper for AlexxIT's WebRTC card
 //  - https://github.com/AlexxIT/WebRTC
@@ -104,15 +106,16 @@ export class FrigateCardLiveWebRTCCard
     this.requestUpdate();
   }
 
+  protected _getVideoRTC(): VideoRTC | null {
+    return (this.renderRoot?.querySelector('#webrtc') ?? null) as VideoRTC | null;
+  }
+
   /**
    * Get the underlying video player.
    * @returns The player or `null` if not found.
    */
   protected _getPlayer(): HTMLVideoElement | null {
-    const root = this.renderRoot?.querySelector('#webrtc') as
-      | (HTMLElement & { video?: HTMLVideoElement })
-      | null;
-    return root?.video ?? null;
+    return this._getVideoRTC()?.video ?? null;
   }
 
   protected async _getWebRTCCardElement(): Promise<
@@ -192,6 +195,7 @@ export class FrigateCardLiveWebRTCCard
     // Extract the video component after it has been rendered and generate the
     // media load event.
     this.updateComplete.then(() => {
+      const videoRTC = this._getVideoRTC();
       const video = this._getPlayer();
       if (video) {
         setControlsOnVideo(video, this.controls);
@@ -205,6 +209,7 @@ export class FrigateCardLiveWebRTCCard
               supportsPause: true,
               hasAudio: mayHaveAudio(video),
             },
+            ...(videoRTC && { technology: getTechnologyForVideoRTC(videoRTC) }),
           });
         };
         video.onplay = () => dispatchMediaPlayEvent(this);

src/components/live/live.ts

@@ -62,11 +62,6 @@ import '../next-prev-control.js';
 import '../ptz.js';
 import { FrigateCardPTZ } from '../ptz.js';
 import '../surround.js';
-import '../title-control.js';
-import {
-  FrigateCardTitleControl,
-  getDefaultTitleConfigForView,
-} from '../title-control.js';
 
 const FRIGATE_CARD_LIVE_PROVIDER = 'frigate-card-live-provider';
 
@@ -294,7 +289,6 @@ export class FrigateCardLiveCarousel extends LitElement {
 
   // Index between camera name and slide number.
   protected _cameraToSlide: Record<string, number> = {};
-  protected _refTitleControl: Ref<FrigateCardTitleControl> = createRef();
   protected _refPTZControl: Ref<FrigateCardPTZ> = createRef();
 
   @state()
@@ -540,18 +534,10 @@ export class FrigateCardLiveCarousel extends LitElement {
       ? this.cameraManager.getCameraMetadata(this._getSubstreamCameraID(prevID, view))
       : null;
     const cameraID = this.viewFilterCameraID ?? view.camera;
-    const cameraMetadataCurrent = this.cameraManager.getCameraMetadata(
-      this._getSubstreamCameraID(cameraID, view),
-    );
     const cameraMetadataNext = nextID
       ? this.cameraManager.getCameraMetadata(this._getSubstreamCameraID(nextID, view))
       : null;
 
-    const titleConfig = getDefaultTitleConfigForView(
-      view,
-      this.overriddenLiveConfig?.controls.title,
-    );
-
     // Notes on the below:
     // - guard() is used to avoid reseting the carousel unless the
     //   options/plugins actually change.
@@ -574,9 +560,6 @@ export class FrigateCardLiveCarousel extends LitElement {
         transitionEffect=${this._getTransitionEffect()}
         @frigate-card:carousel:select=${this._setViewHandler.bind(this)}
         @frigate-card:media:loaded=${() => {
-          if (this._refTitleControl.value) {
-            this._refTitleControl.value.show();
-          }
           this._mediaHasLoaded = true;
         }}
         @frigate-card:media:unloaded=${() => {
@@ -620,18 +603,6 @@ export class FrigateCardLiveCarousel extends LitElement {
         .forceVisibility=${this._mediaHasLoaded && view.context?.ptzControls?.enabled}
       >
       </frigate-card-ptz>
-      ${cameraMetadataCurrent && titleConfig
-        ? html`<frigate-card-title-control
-            ${ref(this._refTitleControl)}
-            .config=${titleConfig}
-            .text="${cameraMetadataCurrent
-              ? `${localize('common.live')}: ${cameraMetadataCurrent.title}`
-              : ''}"
-            .logo="${cameraMetadataCurrent.engineLogo}"
-            .fitInto=${this as HTMLElement}
-          >
-          </frigate-card-title-control> `
-        : ``}
     `;
   }