Fix zoom in Firefox and Safari.

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

@@ -2,6 +2,7 @@ import { mayHaveAudio } from '../../../utils/audio';
 import {
   hideMediaControlsTemporarily,
   MEDIA_LOAD_CONTROLS_HIDE_SECONDS,
+  setControlsOnVideo,
 } from '../../../utils/media';
 import {
   dispatchMediaLoadedEvent,
@@ -271,7 +272,7 @@ export class VideoRTC extends HTMLElement {
    */
   oninit() {
     this.video = document.createElement('video');
-    this.video.controls = this.controls;
+    setControlsOnVideo(this.video, this.controls);
     this.video.playsInline = true;
     this.video.preload = 'auto';
 
@@ -633,7 +634,7 @@ export class VideoRTC extends HTMLElement {
     let receivedFirstFrame = false;
 
     this.ondata = (data) => {
-      this.video.controls = false;
+      setControlsOnVideo(this.video, false);
       this.video.poster = 'data:image/jpeg;base64,' + VideoRTC.btoa(data);
 
       if (!receivedFirstFrame) {
@@ -672,7 +673,7 @@ export class VideoRTC extends HTMLElement {
 
       context.drawImage(video2, 0, 0, canvas.width, canvas.height);
 
-      this.video.controls = false;
+      setControlsOnVideo(this.video, false);
       this.video.poster = canvas.toDataURL('image/jpeg');
     });
 

src/components/live/live-go2rtc.ts

@@ -17,6 +17,7 @@ import {
   MicrophoneConfig,
 } from '../../types.js';
 import { getEndpointAddressOrDispatchError } from '../../utils/endpoint';
+import { setControlsOnVideo } from '../../utils/media.js';
 import '../image.js';
 import { dispatchErrorMessageEvent } from '../message';
 import { VideoRTC } from './go2rtc/video-rtc';
@@ -84,7 +85,7 @@ export class FrigateCardGo2RTC extends LitElement implements FrigateCardMediaPla
 
   public async setControls(controls?: boolean): Promise<void> {
     if (this._player?.video) {
-      this._player.video.controls = controls ?? this.controls;
+      setControlsOnVideo(this._player.video, controls ?? this.controls);
     }
   }
 

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

@@ -21,6 +21,7 @@ import { renderTask } from '../../utils/task.js';
 import {
   hideMediaControlsTemporarily,
   MEDIA_LOAD_CONTROLS_HIDE_SECONDS,
+  setControlsOnVideo,
 } from '../../utils/media.js';
 import { CameraEndpoints } from '../../camera-manager/types.js';
 import { mayHaveAudio } from '../../utils/audio.js';
@@ -85,7 +86,7 @@ export class FrigateCardLiveWebRTCCard
   public async setControls(controls?: boolean): Promise<void> {
     const player = this._getPlayer();
     if (player) {
-      player.controls = controls ?? this.controls;
+      setControlsOnVideo(player, controls ?? this.controls);
     }
   }
 
@@ -191,6 +192,7 @@ export class FrigateCardLiveWebRTCCard
     this.updateComplete.then(() => {
       const video = this._getPlayer();
       if (video) {
+        setControlsOnVideo(video, this.controls);
         video.onloadeddata = () => {
           if (this.controls) {
             hideMediaControlsTemporarily(video, MEDIA_LOAD_CONTROLS_HIDE_SECONDS);
@@ -206,7 +208,6 @@ export class FrigateCardLiveWebRTCCard
         video.onplay = () => dispatchMediaPlayEvent(this);
         video.onpause = () => dispatchMediaPauseEvent(this);
         video.onvolumechange = () => dispatchMediaVolumeChangeEvent(this);
-        video.controls = this.controls;
       }
     });
   }

src/components/viewer.ts

@@ -47,6 +47,7 @@ import {
   hideMediaControlsTemporarily,
   MEDIA_LOAD_CONTROLS_HIDE_SECONDS,
   playMediaMutingIfNecessary,
+  setControlsOnVideo,
 } from '../utils/media.js';
 import { ViewMediaClassifier } from '../view/media-classifier';
 import { MediaQueriesClassifier } from '../view/media-queries-classifier';
@@ -612,7 +613,10 @@ export class FrigateCardViewerProvider
     if (this._refFrigateCardMediaPlayer.value) {
       return this._refFrigateCardMediaPlayer.value.setControls(controls);
     } else if (this._refVideoProvider.value) {
-      this._refVideoProvider.value.controls = controls ?? this.viewerConfig?.controls.builtin ?? true;
+      setControlsOnVideo(
+        this._refVideoProvider.value,
+        controls ?? this.viewerConfig?.controls.builtin ?? true,
+      );
     }
   }