Fix zoom in Firefox and Safari.

tests/utils/media.test.ts

@@ -0,0 +1,110 @@
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
+import { mock } from 'vitest-mock-extended';
+import { FrigateCardMediaPlayer } from '../../src/types.js';
+import {
+  FrigateCardHTMLVideoElement,
+  hideMediaControlsTemporarily,
+  playMediaMutingIfNecessary,
+  setControlsOnVideo,
+} from '../../src/utils/media.js';
+
+// @vitest-environment jsdom
+describe('setControlsOnVideo', () => {
+  it('should set controls', () => {
+    const video = document.createElement('video');
+
+    setControlsOnVideo(video, false);
+    expect(video.controls).toBeFalsy();
+  });
+
+  it('should stop timer', () => {
+    const video: FrigateCardHTMLVideoElement = document.createElement('video');
+    hideMediaControlsTemporarily(video);
+
+    expect(video._controlsHideTimer).toBeTruthy();
+    expect(video._controlsHideTimer?.isRunning()).toBeTruthy();
+
+    setControlsOnVideo(video, false);
+    expect(video.controls).toBeFalsy();
+    expect(video._controlsHideTimer).toBeFalsy();
+  });
+});
+
+describe('hideMediaControlsTemporarily', () => {
+  beforeAll(() => {
+    vi.useFakeTimers();
+  });
+
+  afterAll(() => {
+    vi.useRealTimers();
+  });
+
+  it('should set controls', () => {
+    const video: FrigateCardHTMLVideoElement = document.createElement('video');
+    video.controls = true;
+    hideMediaControlsTemporarily(video);
+
+    expect(video.controls).toBeFalsy();
+    vi.runOnlyPendingTimers();
+
+    expect(video.controls).toBeTruthy();
+    expect(video._controlsHideTimer).toBeFalsy();
+  });
+});
+
+class NotAllowedError extends Error {
+  name = 'NotAllowedError';
+}
+
+describe('playMediaMutingIfNecessary', () => {
+  it('should play', async () => {
+    const player = mock<FrigateCardMediaPlayer>();
+    const video = mock<HTMLVideoElement>();
+    video.play.mockResolvedValue();
+    await playMediaMutingIfNecessary(player, video);
+    expect(video.play).toBeCalled();
+  });
+
+  it('should mute if not allowed to play and unmuted', async () => {
+    const player = mock<FrigateCardMediaPlayer>();
+    player.isMuted.mockReturnValue(false);
+    player.mute.mockResolvedValue();
+
+    const video = mock<HTMLVideoElement>();
+    video.play.mockRejectedValueOnce(new NotAllowedError()).mockResolvedValueOnce();
+
+    await playMediaMutingIfNecessary(player, video);
+
+    expect(video.play).toBeCalledTimes(2);
+    expect(player.isMuted).toBeCalled();
+    expect(player.mute).toBeCalled();
+  });
+
+  it('should not mute if not allowed to play and already unmuted', async () => {
+    const player = mock<FrigateCardMediaPlayer>();
+    player.isMuted.mockReturnValue(true);
+
+    const video = mock<HTMLVideoElement>();
+    video.play.mockRejectedValueOnce(new NotAllowedError());
+
+    await playMediaMutingIfNecessary(player, video);
+
+    expect(video.play).toBeCalledTimes(1);
+    expect(player.isMuted).toBeCalled();
+    expect(player.mute).not.toBeCalled();
+  });
+
+  it('should ignore exception if subsequent play call throws', async () => {
+    const player = mock<FrigateCardMediaPlayer>();
+    player.isMuted.mockReturnValue(false);
+
+    const video = mock<HTMLVideoElement>();
+    video.play.mockRejectedValue(new NotAllowedError());
+
+    await playMediaMutingIfNecessary(player, video);
+
+    expect(video.play).toBeCalledTimes(2);
+    expect(player.isMuted).toBeCalled();
+    expect(player.mute).toBeCalled();
+  });
+});

tests/utils/zoom.test.ts

@@ -124,6 +124,48 @@ describe('Zoom', () => {
     expect(panzoom.handleUp).toBeCalledWith(ev_5);
   });
 
+  it('should ignore click after pointerdown', () => {
+    const outer = document.createElement('div');
+    const inner = document.createElement('div');
+    outer.appendChild(inner);
+    const clickHandler = vi.fn();
+    outer.addEventListener('click', clickHandler);
+
+    const panzoom = createMockPanZoom();
+    vi.mocked(Panzoom).mockReturnValueOnce(panzoom);
+
+    createAndRegisterZoom(inner);
+
+    // Simulate being zoomed in.
+    panzoom.getScale = vi.fn().mockReturnValue(1.2);
+
+    // A click on its own will be fine.
+    const click_1 = new MouseEvent('click', { bubbles: true });
+    inner.dispatchEvent(click_1);
+    expect(clickHandler).toBeCalledTimes(1);
+
+    // A click after a pointerdown will be ignored.
+    const pointerdown_1 = new PointerEvent('pointerdown');
+    inner.dispatchEvent(pointerdown_1);
+
+    const click_2 = new MouseEvent('click', { bubbles: true });
+    inner.dispatchEvent(click_2);
+
+    // Click will have been ignored.
+    expect(clickHandler).toBeCalledTimes(1);
+
+    // Simulate being zoomed out.
+    panzoom.getScale = vi.fn().mockReturnValue(1.0);
+    const pointerdown_2 = new PointerEvent('pointerdown');
+    inner.dispatchEvent(pointerdown_2);
+
+    const click_3 = new MouseEvent('click', { bubbles: true });
+    inner.dispatchEvent(click_3);
+
+    // Click will have been processed.
+    expect(clickHandler).toBeCalledTimes(2);
+  });
+
   it('deactivate should remove event handlers', () => {
     const element = document.createElement('div');