feat: Add basic fullscreen support for iPhone (#1857)

- Closes #1444

src/patches/ha-camera-stream.ts

@@ -12,14 +12,14 @@
 import { css, CSSResultGroup, html, nothing, PropertyValues, unsafeCSS } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { query } from 'lit/decorators/query.js';
-import { FrigateCardMediaPlayer, MediaLoadedInfo } from '../types.js';
+import liveHAComponentsStyle from '../scss/live-ha-components.scss';
+import { FrigateCardMediaPlayer, FullscreenElement, MediaLoadedInfo } from '../types.js';
 import {
   createMediaLoadedInfo,
   dispatchExistingMediaLoadedInfoAsEvent,
 } from '../utils/media-info.js';
 import './ha-hls-player';
 import './ha-web-rtc-player';
-import liveHAComponentsStyle from '../scss/live-ha-components.scss';
 
 customElements.whenDefined('ha-camera-stream').then(() => {
   // ========================================================================================
@@ -93,6 +93,10 @@ customElements.whenDefined('ha-camera-stream').then(() => {
       return this._player ? await this._player.getScreenshotURL() : null;
     }
 
+    public getFullscreenElement(): FullscreenElement | null {
+      return this._player?.getFullscreenElement() ?? null;
+    }
+
     protected _storeMediaLoadedInfoHandler(
       stream: StreamType,
       ev: CustomEvent<MediaLoadedInfo>,

src/patches/ha-hls-player.ts

@@ -15,7 +15,7 @@ import { query } from 'lit/decorators/query.js';
 import { dispatchLiveErrorEvent } from '../components-lib/live/utils/dispatch-live-error.js';
 import { renderMessage } from '../components/message.js';
 import liveHAComponentsStyle from '../scss/live-ha-components.scss';
-import { FrigateCardMediaPlayer } from '../types.js';
+import { FrigateCardMediaPlayer, FullscreenElement } from '../types.js';
 import { mayHaveAudio } from '../utils/audio.js';
 import { errorToConsole } from '../utils/basic.js';
 import {
@@ -91,6 +91,10 @@ customElements.whenDefined('ha-hls-player').then(() => {
       return this._video ? screenshotMedia(this._video) : null;
     }
 
+    public getFullscreenElement(): FullscreenElement | null {
+      return this._video;
+    }
+
     // =====================================================================================
     // Minor modifications from:
     // - https://github.com/home-assistant/frontend/blob/dev/src/components/ha-hls-player.ts

src/patches/ha-web-rtc-player.ts

@@ -16,7 +16,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { dispatchLiveErrorEvent } from '../components-lib/live/utils/dispatch-live-error.js';
 import { renderMessage } from '../components/message.js';
 import liveHAComponentsStyle from '../scss/live-ha-components.scss';
-import { FrigateCardMediaPlayer } from '../types.js';
+import { FrigateCardMediaPlayer, FullscreenElement } from '../types.js';
 import { mayHaveAudio } from '../utils/audio.js';
 import {
   dispatchMediaLoadedEvent,
@@ -90,6 +90,10 @@ customElements.whenDefined('ha-web-rtc-player').then(() => {
       return this._video ? screenshotMedia(this._video) : null;
     }
 
+    public getFullscreenElement(): FullscreenElement | null {
+      return this._video ?? null;
+    }
+
     // =====================================================================================
     // Minor modifications from:
     // - https://github.com/home-assistant/frontend/blob/dev/src/components/ha-web-rtc-player.ts