fix: Increase reliability of media auto actions (e.g. play) (#1934)

Refactors media player handling entirely to make the code more
consistent and less boilerplate. Add testing for media player actions.

- Closes #1921
- Closes #1916

tests/components-lib/media-actions-controller.test.ts

@@ -1,10 +1,11 @@
 import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { mock } from 'vitest-mock-extended';
 import { MicrophoneState } from '../../src/card-controller/types';
 import {
   MediaActionsController,
   MediaActionsControllerOptions,
 } from '../../src/components-lib/media-actions-controller';
-import { AdvancedCameraCardMediaPlayer } from '../../src/types';
+import { MediaPlayerController, MediaPlayerElement } from '../../src/types';
 import {
   IntersectionObserverMock,
   MutationObserverMock,
@@ -18,30 +19,22 @@ import { callVisibilityHandler, createTestSlideNodes } from '../utils/embla/test
 const getPlayer = (
   element: HTMLElement,
   selector: string,
-): (HTMLElement & AdvancedCameraCardMediaPlayer) | null => {
+): MediaPlayerElement | null => {
   return element.querySelector(selector);
 };
 
-const createPlayer = (): HTMLElement & AdvancedCameraCardMediaPlayer => {
+const createPlayerElement = (controller?: MediaPlayerController): MediaPlayerElement => {
   const player = document.createElement('video');
-
-  player['play'] = vi.fn();
-  player['pause'] = vi.fn();
-  player['mute'] = vi.fn();
-  player['unmute'] = vi.fn();
-  player['isMuted'] = vi.fn().mockReturnValue(true);
-  player['seek'] = vi.fn();
-  player['getScreenshotURL'] = vi.fn();
-  player['setControls'] = vi.fn();
-  player['isPaused'] = vi.fn();
-
-  return player as unknown as HTMLElement & AdvancedCameraCardMediaPlayer;
+  player['getMediaPlayerController'] = vi
+    .fn()
+    .mockResolvedValue(controller ?? mock<MediaPlayerController>());
+  return player as unknown as MediaPlayerElement;
 };
 
 const createPlayerSlideNodes = (n = 10): HTMLElement[] => {
   const divs = createTestSlideNodes({ n: n });
   for (const div of divs) {
-    div.appendChild(createPlayer());
+    div.appendChild(createPlayerElement());
   }
   return divs;
 };
@@ -61,11 +54,11 @@ describe('MediaActionsController', () => {
     vi.clearAllMocks();
   });
 
-  describe('should initialize', () => {
+  describe('should set root', () => {
     it('should have root', async () => {
       const controller = new MediaActionsController();
 
-      controller.initialize(createParent());
+      controller.setRoot(createParent());
 
       expect(controller.hasRoot()).toBeTruthy();
     });
@@ -76,13 +69,23 @@ describe('MediaActionsController', () => {
       const children = createPlayerSlideNodes();
       const parent = createParent({ children: children });
 
-      controller.initialize(parent);
+      controller.setRoot(parent);
       await controller.setTarget(0, true);
 
-      expect(getPlayer(children[0], 'video')?.play).not.toBeCalled();
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.play,
+      ).not.toBeCalled();
     });
 
-    it('should re-initialize after mutation', async () => {
+    it('should do nothing on resetting same root', () => {
+      const controller = new MediaActionsController();
+      const parent = createParent({ children: createPlayerSlideNodes() });
+
+      expect(controller.setRoot(parent)).toBeTruthy();
+      expect(controller.setRoot(parent)).toBeFalsy();
+    });
+
+    it('should re-setRoot after mutation', async () => {
       const controller = new MediaActionsController();
       controller.setOptions({
         playerSelector: 'video',
@@ -90,9 +93,11 @@ describe('MediaActionsController', () => {
       });
 
       const parent = createParent({ children: createPlayerSlideNodes(1) });
-      controller.initialize(parent);
+      controller.setRoot(parent);
 
-      const newPlayer = createPlayer();
+      const mediaPlayerController = mock<MediaPlayerController>();
+
+      const newPlayer = createPlayerElement(mediaPlayerController);
       const newChild = document.createElement('div');
       newChild.appendChild(newPlayer);
       parent.append(newChild);
@@ -101,7 +106,7 @@ describe('MediaActionsController', () => {
 
       await controller.setTarget(1, true);
 
-      expect(newPlayer.play).toBeCalled();
+      expect(mediaPlayerController.play).toBeCalled();
     });
   });
 
@@ -115,13 +120,15 @@ describe('MediaActionsController', () => {
 
       const children = createPlayerSlideNodes();
       const parent = createParent({ children: children });
-      controller.initialize(parent);
+      controller.setRoot(parent);
 
       controller.destroy();
 
       await controller.setTarget(0, true);
 
-      expect(getPlayer(children[0], 'video')?.play).not.toBeCalled();
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.play,
+      ).not.toBeCalled();
     });
   });
 
@@ -146,11 +153,13 @@ describe('MediaActionsController', () => {
         });
 
         const children = createPlayerSlideNodes();
-        controller.initialize(createParent({ children: children }));
+        controller.setRoot(createParent({ children: children }));
 
         await controller.setTarget(0, true);
 
-        expect(getPlayer(children[0], 'video')?.[func]).toBeCalledTimes(called ? 1 : 0);
+        expect(
+          (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.[func],
+        ).toBeCalledTimes(called ? 1 : 0);
       },
     );
 
@@ -162,13 +171,19 @@ describe('MediaActionsController', () => {
       });
 
       const children = createPlayerSlideNodes();
-      controller.initialize(createParent({ children: children }));
+      controller.setRoot(createParent({ children: children }));
 
       await controller.setTarget(0, true);
-      expect(getPlayer(children[0], 'video')?.play).toBeCalledTimes(1);
+
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.play,
+      ).toBeCalledTimes(1);
 
       await controller.setTarget(0, true);
-      expect(getPlayer(children[0], 'video')?.play).toBeCalledTimes(1);
+
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.play,
+      ).toBeCalledTimes(1);
     });
 
     it('should unselect before selecting a new target', async () => {
@@ -180,13 +195,17 @@ describe('MediaActionsController', () => {
       });
 
       const children = createPlayerSlideNodes();
-      controller.initialize(createParent({ children: children }));
+      controller.setRoot(createParent({ children: children }));
 
       await controller.setTarget(0, true);
       await controller.setTarget(1, true);
 
-      expect(getPlayer(children[0], 'video')?.pause).toBeCalled();
-      expect(getPlayer(children[0], 'video')?.mute).toBeCalled();
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.pause,
+      ).toBeCalled();
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.mute,
+      ).toBeCalled();
     });
 
     it('should select after target was previously visible', async () => {
@@ -198,17 +217,25 @@ describe('MediaActionsController', () => {
       });
 
       const children = createPlayerSlideNodes();
-      controller.initialize(createParent({ children: children }));
+      controller.setRoot(createParent({ children: children }));
 
       await controller.setTarget(0, false);
 
-      expect(getPlayer(children[0], 'video')?.play).not.toBeCalled();
-      expect(getPlayer(children[0], 'video')?.unmute).not.toBeCalled();
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.play,
+      ).not.toBeCalled();
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.unmute,
+      ).not.toBeCalled();
 
       await controller.setTarget(0, true);
 
-      expect(getPlayer(children[0], 'video')?.play).toBeCalled();
-      expect(getPlayer(children[0], 'video')?.unmute).toBeCalled();
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.play,
+      ).toBeCalled();
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.unmute,
+      ).toBeCalled();
     });
   });
 
@@ -221,12 +248,16 @@ describe('MediaActionsController', () => {
     });
 
     const children = createPlayerSlideNodes();
-    controller.initialize(createParent({ children: children }));
+    controller.setRoot(createParent({ children: children }));
 
     await controller.setTarget(0, true);
 
-    expect(getPlayer(children[0], 'video')?.play).toBeCalledTimes(1);
-    expect(getPlayer(children[0], 'video')?.unmute).toBeCalledTimes(1);
+    expect(
+      (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.play,
+    ).toBeCalledTimes(1);
+    expect(
+      (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.unmute,
+    ).toBeCalledTimes(1);
 
     controller.unsetTarget();
 
@@ -236,8 +267,12 @@ describe('MediaActionsController', () => {
     await flushPromises();
 
     // Play/Mute will not have been called again.
-    expect(getPlayer(children[0], 'video')?.play).toBeCalledTimes(1);
-    expect(getPlayer(children[0], 'video')?.unmute).toBeCalledTimes(1);
+    expect(
+      (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.play,
+    ).toBeCalledTimes(1);
+    expect(
+      (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.unmute,
+    ).toBeCalledTimes(1);
   });
 
   describe('should respond to media loaded', () => {
@@ -249,10 +284,13 @@ describe('MediaActionsController', () => {
       });
 
       const children = createPlayerSlideNodes();
-      controller.initialize(createParent({ children: children }));
+      controller.setRoot(createParent({ children: children }));
 
       await controller.setTarget(0, true);
-      expect(getPlayer(children[0], 'video')?.play).toBeCalledTimes(1);
+
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.play,
+      ).toBeCalledTimes(1);
 
       getPlayer(children[0], 'video')?.dispatchEvent(
         new Event('advanced-camera-card:media:loaded'),
@@ -260,7 +298,9 @@ describe('MediaActionsController', () => {
 
       await flushPromises();
 
-      expect(getPlayer(children[0], 'video')?.play).toBeCalledTimes(2);
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.play,
+      ).toBeCalledTimes(2);
     });
 
     it('should unmute after media load', async () => {
@@ -271,10 +311,12 @@ describe('MediaActionsController', () => {
       });
 
       const children = createPlayerSlideNodes();
-      controller.initialize(createParent({ children: children }));
+      controller.setRoot(createParent({ children: children }));
 
       await controller.setTarget(0, true);
-      expect(getPlayer(children[0], 'video')?.unmute).toBeCalledTimes(1);
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.unmute,
+      ).toBeCalledTimes(1);
 
       getPlayer(children[0], 'video')?.dispatchEvent(
         new Event('advanced-camera-card:media:loaded'),
@@ -282,7 +324,9 @@ describe('MediaActionsController', () => {
 
       await flushPromises();
 
-      expect(getPlayer(children[0], 'video')?.unmute).toBeCalledTimes(2);
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.unmute,
+      ).toBeCalledTimes(2);
     });
 
     it('should take no action on unrelated media load', async () => {
@@ -294,7 +338,7 @@ describe('MediaActionsController', () => {
       });
 
       const children = createPlayerSlideNodes();
-      controller.initialize(createParent({ children: children }));
+      controller.setRoot(createParent({ children: children }));
 
       await controller.setTarget(0, true);
 
@@ -304,8 +348,12 @@ describe('MediaActionsController', () => {
 
       await flushPromises();
 
-      expect(getPlayer(children[9], 'video')?.play).not.toBeCalled();
-      expect(getPlayer(children[9], 'video')?.unmute).not.toBeCalled();
+      expect(
+        (await getPlayer(children[9], 'video')?.getMediaPlayerController())?.play,
+      ).not.toBeCalled();
+      expect(
+        (await getPlayer(children[9], 'video')?.getMediaPlayerController())?.unmute,
+      ).not.toBeCalled();
     });
 
     it('should play and unmute on unselected but targeted media load', async () => {
@@ -317,12 +365,16 @@ describe('MediaActionsController', () => {
       });
 
       const children = createPlayerSlideNodes();
-      controller.initialize(createParent({ children: children }));
+      controller.setRoot(createParent({ children: children }));
 
       await controller.setTarget(0, false);
 
-      expect(getPlayer(children[0], 'video')?.play).toBeCalledTimes(1);
-      expect(getPlayer(children[0], 'video')?.unmute).toBeCalledTimes(1);
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.play,
+      ).toBeCalledTimes(1);
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.unmute,
+      ).toBeCalledTimes(1);
 
       getPlayer(children[0], 'video')?.dispatchEvent(
         new Event('advanced-camera-card:media:loaded'),
@@ -330,8 +382,12 @@ describe('MediaActionsController', () => {
 
       await flushPromises();
 
-      expect(getPlayer(children[0], 'video')?.play).toBeCalledTimes(2);
-      expect(getPlayer(children[0], 'video')?.unmute).toBeCalledTimes(2);
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.play,
+      ).toBeCalledTimes(2);
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.unmute,
+      ).toBeCalledTimes(2);
     });
   });
 
@@ -356,12 +412,14 @@ describe('MediaActionsController', () => {
         });
 
         const children = createPlayerSlideNodes();
-        controller.initialize(createParent({ children: children }));
+        controller.setRoot(createParent({ children: children }));
 
         await controller.setTarget(0, true);
         await controller.setTarget(0, false);
 
-        expect(getPlayer(children[0], 'video')?.[func]).toBeCalledTimes(called ? 1 : 0);
+        expect(
+          (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.[func],
+        ).toBeCalledTimes(called ? 1 : 0);
       },
     );
   });
@@ -389,11 +447,13 @@ describe('MediaActionsController', () => {
         });
 
         const children = createPlayerSlideNodes();
-        controller.initialize(createParent({ children: children }));
+        controller.setRoot(createParent({ children: children }));
         await controller.setTarget(0, true);
 
         // Not configured to take action on selection.
-        expect(getPlayer(children[0], 'video')?.[func]).not.toBeCalled();
+        expect(
+          (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.[func],
+        ).not.toBeCalled();
 
         Object.defineProperty(document, 'visibilityState', {
           value: 'visible',
@@ -402,7 +462,9 @@ describe('MediaActionsController', () => {
         await callVisibilityHandler();
 
         // Not configured to take action on selection.
-        expect(getPlayer(children[0], 'video')?.[func]).toBeCalledTimes(called ? 1 : 0);
+        expect(
+          (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.[func],
+        ).toBeCalledTimes(called ? 1 : 0);
       },
     );
   });
@@ -432,11 +494,13 @@ describe('MediaActionsController', () => {
         });
 
         const children = createPlayerSlideNodes();
-        controller.initialize(createParent({ children: children }));
+        controller.setRoot(createParent({ children: children }));
         await controller.setTarget(0, true);
 
         // Not configured to take action on selection.
-        expect(getPlayer(children[0], 'video')?.[func]).not.toBeCalled();
+        expect(
+          (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.[func],
+        ).not.toBeCalled();
 
         Object.defineProperty(document, 'visibilityState', {
           value: 'hidden',
@@ -445,7 +509,9 @@ describe('MediaActionsController', () => {
         await callVisibilityHandler();
 
         // Not configured to take action on selection.
-        expect(getPlayer(children[0], 'video')?.[func]).toBeCalledTimes(called ? 1 : 0);
+        expect(
+          (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.[func],
+        ).toBeCalledTimes(called ? 1 : 0);
       },
     );
   });
@@ -471,11 +537,13 @@ describe('MediaActionsController', () => {
         });
 
         const children = createPlayerSlideNodes();
-        controller.initialize(createParent({ children: children }));
+        controller.setRoot(createParent({ children: children }));
         await controller.setTarget(0, true);
 
         // Not configured to take action on selection.
-        expect(getPlayer(children[0], 'video')?.[func]).not.toBeCalled();
+        expect(
+          (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.[func],
+        ).not.toBeCalled();
 
         // There's always a first call to an intersection observer handler. In
         // this case the MediaActionsController ignores it.
@@ -484,7 +552,9 @@ describe('MediaActionsController', () => {
         await callIntersectionHandler(true);
 
         // Not configured to take action on selection.
-        expect(getPlayer(children[0], 'video')?.[func]).toBeCalledTimes(called ? 1 : 0);
+        expect(
+          (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.[func],
+        ).toBeCalledTimes(called ? 1 : 0);
       },
     );
   });
@@ -510,11 +580,13 @@ describe('MediaActionsController', () => {
         });
 
         const children = createPlayerSlideNodes();
-        controller.initialize(createParent({ children: children }));
+        controller.setRoot(createParent({ children: children }));
         await controller.setTarget(0, true);
 
         // Not configured to take action on selection.
-        expect(getPlayer(children[0], 'video')?.[func]).not.toBeCalled();
+        expect(
+          (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.[func],
+        ).not.toBeCalled();
 
         // There's always a first call to an intersection observer handler. In
         // this case the MediaActionsController ignores it.
@@ -523,7 +595,9 @@ describe('MediaActionsController', () => {
         await callIntersectionHandler(true);
 
         // Not configured to take action on selection.
-        expect(getPlayer(children[0], 'video')?.[func]).toBeCalledTimes(called ? 1 : 0);
+        expect(
+          (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.[func],
+        ).toBeCalledTimes(called ? 1 : 0);
       },
     );
   });
@@ -558,7 +632,7 @@ describe('MediaActionsController', () => {
       });
 
       const children = createPlayerSlideNodes();
-      controller.initialize(createParent({ children: children }));
+      controller.setRoot(createParent({ children: children }));
 
       await controller.setTarget(0, true);
 
@@ -568,7 +642,9 @@ describe('MediaActionsController', () => {
         microphoneState: createMicrophoneState({ muted: false }),
       });
 
-      expect(getPlayer(children[0], 'video')?.unmute).toBeCalled();
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.unmute,
+      ).toBeCalled();
     });
 
     it('should mute after delay after microphone muted', async () => {
@@ -581,7 +657,7 @@ describe('MediaActionsController', () => {
       });
 
       const children = createPlayerSlideNodes();
-      controller.initialize(createParent({ children: children }));
+      controller.setRoot(createParent({ children: children }));
 
       await controller.setTarget(0, true);
 
@@ -593,7 +669,9 @@ describe('MediaActionsController', () => {
 
       vi.runOnlyPendingTimers();
 
-      expect(getPlayer(children[0], 'video')?.mute).toBeCalled();
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.mute,
+      ).toBeCalled();
     });
 
     it('should not mute after delay after microphone muted', async () => {
@@ -606,7 +684,7 @@ describe('MediaActionsController', () => {
       });
 
       const children = createPlayerSlideNodes();
-      controller.initialize(createParent({ children: children }));
+      controller.setRoot(createParent({ children: children }));
 
       await controller.setTarget(0, true);
 
@@ -618,7 +696,9 @@ describe('MediaActionsController', () => {
 
       vi.runOnlyPendingTimers();
 
-      expect(getPlayer(children[0], 'video')?.mute).not.toBeCalled();
+      expect(
+        (await getPlayer(children[0], 'video')?.getMediaPlayerController())?.mute,
+      ).not.toBeCalled();
     });
   });
 });

tests/components-lib/media-player/image.test.ts

@@ -0,0 +1,117 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { mock } from 'vitest-mock-extended';
+import { ImageMediaPlayerController } from '../../../src/components-lib/media-player/image';
+import { createLitElement } from '../../test-utils';
+import { screenshotImage } from '../../../src/utils/screenshot';
+
+vi.mock('../../../src/utils/screenshot.js');
+
+// @vitest-environment jsdom
+describe('ImageMediaPlayerController', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should ignore play', async () => {
+    const image = mock<HTMLImageElement>();
+    const controller = new ImageMediaPlayerController(createLitElement(), () => image);
+
+    await controller.play();
+
+    // Currently no observable side effects.
+  });
+
+  it('should ignore pause', async () => {
+    const image = mock<HTMLImageElement>();
+    const controller = new ImageMediaPlayerController(createLitElement(), () => image);
+
+    await controller.pause();
+
+    // Currently no observable side effects.
+  });
+
+  it('should ignore mute', async () => {
+    const image = mock<HTMLImageElement>();
+    const controller = new ImageMediaPlayerController(createLitElement(), () => image);
+
+    await controller.mute();
+
+    // Currently no observable side effects.
+  });
+
+  it('should ignore unmute', async () => {
+    const image = mock<HTMLImageElement>();
+    const controller = new ImageMediaPlayerController(createLitElement(), () => image);
+
+    await controller.unmute();
+
+    // Currently no observable side effects.
+  });
+
+  it('should always report muted', () => {
+    const image = mock<HTMLImageElement>();
+    const controller = new ImageMediaPlayerController(createLitElement(), () => image);
+
+    expect(controller.isMuted()).toBeTruthy();
+  });
+
+  it('should ignore seek', async () => {
+    const image = mock<HTMLImageElement>();
+    const controller = new ImageMediaPlayerController(createLitElement(), () => image);
+
+    await controller.seek(10);
+
+    // Currently no observable side effects.
+  });
+
+  it('should ignore set controls', async () => {
+    const image = mock<HTMLImageElement>();
+    const controller = new ImageMediaPlayerController(createLitElement(), () => image);
+
+    await controller.setControls(true);
+
+    // Currently no observable side effects.
+  });
+
+  it('should always report unpaused', () => {
+    const image = mock<HTMLImageElement>();
+    const controller = new ImageMediaPlayerController(createLitElement(), () => image);
+
+    expect(controller.isPaused()).toBeFalsy();
+  });
+
+  describe('should get screenshot URL', async () => {
+    it('should return screenshot URL with image', async () => {
+      const url = 'data:image/png;base64,';
+      vi.mocked(screenshotImage).mockReturnValue(url);
+
+      const image = mock<HTMLImageElement>();
+
+      const controller = new ImageMediaPlayerController(createLitElement(), () => image);
+
+      expect(await controller.getScreenshotURL()).toBe(url);
+    });
+
+    it('should return null without image', async () => {
+      const controller = new ImageMediaPlayerController(createLitElement(), () => null);
+
+      expect(await controller.getScreenshotURL()).toBeNull();
+    });
+  });
+
+  describe('should get fullscreen element', async () => {
+    it('should return fullscreen element with image', async () => {
+      const image = mock<HTMLImageElement>();
+
+      const controller = new ImageMediaPlayerController(createLitElement(), () => image);
+
+      expect(await controller.getFullscreenElement()).toBe(image);
+    });
+
+    it('should return null without image', async () => {
+      const controller = new ImageMediaPlayerController(createLitElement(), () => null);
+
+      expect(controller.getFullscreenElement()).toBeNull();
+    });
+  });
+});

tests/components-lib/media-player/jsmpeg.test.ts

@@ -0,0 +1,252 @@
+import JSMpeg from '@cycjimmy/jsmpeg-player';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { mock } from 'vitest-mock-extended';
+import { JSMPEGMediaPlayerController } from '../../../src/components-lib/media-player/jsmpeg';
+import { createLitElement } from '../../test-utils';
+
+// @vitest-environment jsdom
+describe('JSMPEGMediaPlayerController', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should play', async () => {
+    const videoElement = mock<JSMpeg.VideoElement>();
+
+    const controller = new JSMPEGMediaPlayerController(
+      createLitElement(),
+      () => videoElement,
+      () => mock<HTMLCanvasElement>(),
+    );
+
+    await controller.play();
+
+    expect(videoElement.play).toBeCalled();
+  });
+
+  it('should pause', async () => {
+    const videoElement = mock<JSMpeg.VideoElement>();
+
+    const controller = new JSMPEGMediaPlayerController(
+      createLitElement(),
+      () => videoElement,
+      () => mock<HTMLCanvasElement>(),
+    );
+
+    await controller.pause();
+
+    expect(videoElement.stop).toBeCalled();
+  });
+
+  describe('should mute', async () => {
+    it('should mute with player', async () => {
+      const videoElement = mock<JSMpeg.VideoElement>();
+      videoElement.player = mock<JSMpeg.Player>();
+      videoElement.player.volume = 1;
+
+      const controller = new JSMPEGMediaPlayerController(
+        createLitElement(),
+        () => videoElement,
+        () => mock<HTMLCanvasElement>(),
+      );
+
+      await controller.mute();
+
+      expect(videoElement.player.volume).toBe(0);
+    });
+
+    it('should ignore calls without player', async () => {
+      const controller = new JSMPEGMediaPlayerController(
+        createLitElement(),
+        () => null,
+        () => mock<HTMLCanvasElement>(),
+      );
+
+      await controller.mute();
+
+      // Currently no observable side effects.
+    });
+  });
+
+  describe('should unmute', async () => {
+    it('should mute with player', async () => {
+      const videoElement = mock<JSMpeg.VideoElement>();
+      videoElement.player = mock<JSMpeg.Player>();
+      videoElement.player.volume = 0;
+
+      const controller = new JSMPEGMediaPlayerController(
+        createLitElement(),
+        () => videoElement,
+        () => mock<HTMLCanvasElement>(),
+      );
+
+      await controller.unmute();
+
+      expect(videoElement.player.volume).toBe(1);
+    });
+
+    it('should ignore calls without player', async () => {
+      const controller = new JSMPEGMediaPlayerController(
+        createLitElement(),
+        () => null,
+        () => mock<HTMLCanvasElement>(),
+      );
+
+      await controller.unmute();
+
+      // Currently no observable side effects.
+    });
+  });
+
+  describe('should return muted state', () => {
+    it('should return true when muted', () => {
+      const videoElement = mock<JSMpeg.VideoElement>();
+      videoElement.player = mock<JSMpeg.Player>();
+      videoElement.player.volume = 0;
+
+      const controller = new JSMPEGMediaPlayerController(
+        createLitElement(),
+        () => videoElement,
+        () => mock<HTMLCanvasElement>(),
+      );
+
+      expect(controller.isMuted()).toBeTruthy();
+    });
+
+    it('should return false when not muted', () => {
+      const videoElement = mock<JSMpeg.VideoElement>();
+      videoElement.player = mock<JSMpeg.Player>();
+      videoElement.player.volume = 1;
+
+      const controller = new JSMPEGMediaPlayerController(
+        createLitElement(),
+        () => videoElement,
+        () => mock<HTMLCanvasElement>(),
+      );
+
+      expect(controller.isMuted()).toBeFalsy();
+    });
+
+    it('should return true when no player', () => {
+      const controller = new JSMPEGMediaPlayerController(
+        createLitElement(),
+        () => null,
+        () => mock<HTMLCanvasElement>(),
+      );
+
+      expect(controller.isMuted()).toBeTruthy();
+    });
+  });
+
+  it('should ignore seek', async () => {
+    const controller = new JSMPEGMediaPlayerController(
+      createLitElement(),
+      () => mock<JSMpeg.VideoElement>(),
+      () => mock<HTMLCanvasElement>(),
+    );
+
+    await controller.seek(10);
+
+    // Currently no observable side effects.
+  });
+
+  it('should ignore set controls', async () => {
+    const controller = new JSMPEGMediaPlayerController(
+      createLitElement(),
+      () => mock<JSMpeg.VideoElement>(),
+      () => mock<HTMLCanvasElement>(),
+    );
+    await controller.setControls(true);
+
+    // Currently no observable side effects.
+  });
+
+  describe('should return paused state', () => {
+    it('should return true when paused', async () => {
+      const videoElement = mock<JSMpeg.VideoElement>();
+      videoElement.player = mock<JSMpeg.Player>();
+      videoElement.player.paused = true;
+
+      const controller = new JSMPEGMediaPlayerController(
+        createLitElement(),
+        () => videoElement,
+        () => mock<HTMLCanvasElement>(),
+      );
+
+      expect(controller.isPaused()).toBeTruthy();
+    });
+
+    it('should return false when not paused', async () => {
+      const videoElement = mock<JSMpeg.VideoElement>();
+      videoElement.player = mock<JSMpeg.Player>();
+      videoElement.player.paused = false;
+
+      const controller = new JSMPEGMediaPlayerController(
+        createLitElement(),
+        () => videoElement,
+        () => mock<HTMLCanvasElement>(),
+      );
+
+      expect(controller.isPaused()).toBeFalsy();
+    });
+
+    it('should return true when no video', () => {
+      const controller = new JSMPEGMediaPlayerController(
+        createLitElement(),
+        () => null,
+        () => mock<HTMLCanvasElement>(),
+      );
+
+      expect(controller.isPaused()).toBeTruthy();
+    });
+  });
+
+  describe('should get screenshot URL', async () => {
+    it('should return screenshot URL with canvas', async () => {
+      const url = 'data:image/png;base64,';
+      const canvas = mock<HTMLCanvasElement>();
+      canvas.toDataURL.mockReturnValue(url);
+
+      const controller = new JSMPEGMediaPlayerController(
+        createLitElement(),
+        () => mock<JSMpeg.VideoElement>(),
+        () => canvas,
+      );
+
+      expect(await controller.getScreenshotURL()).toBe(url);
+    });
+
+    it('should return null without canvas', async () => {
+      const controller = new JSMPEGMediaPlayerController(
+        createLitElement(),
+        () => mock<JSMpeg.VideoElement>(),
+        () => null,
+      );
+
+      expect(await controller.getScreenshotURL()).toBeNull();
+    });
+  });
+
+  describe('should get fullscreen element', async () => {
+    it('should return fullscreen element with canvas', async () => {
+      const canvas = mock<HTMLCanvasElement>();
+      const controller = new JSMPEGMediaPlayerController(
+        createLitElement(),
+        () => mock<JSMpeg.VideoElement>(),
+        () => canvas,
+      );
+
+      expect(await controller.getFullscreenElement()).toBe(canvas);
+    });
+
+    it('should return null without cancas', async () => {
+      const controller = new JSMPEGMediaPlayerController(
+        createLitElement(),
+        () => mock<JSMpeg.VideoElement>(),
+        () => null,
+      );
+
+      expect(controller.getFullscreenElement()).toBeNull();
+    });
+  });
+});

tests/components-lib/media-player/updating-image.test.ts

@@ -0,0 +1,192 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { mock } from 'vitest-mock-extended';
+import { CachedValueController } from '../../../src/components-lib/cached-value-controller';
+import { ImageMediaPlayerController } from '../../../src/components-lib/media-player/image';
+import { UpdatingImageMediaPlayerController } from '../../../src/components-lib/media-player/updating-image';
+import { createLitElement } from '../../test-utils';
+
+// @vitest-environment jsdom
+describe('UpdatingImageMediaPlayerController', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should play', async () => {
+    const cachedValueController = mock<CachedValueController<string>>();
+    const controller = new UpdatingImageMediaPlayerController(
+      createLitElement(),
+      () => mock<HTMLImageElement>(),
+      () => cachedValueController,
+    );
+
+    await controller.play();
+
+    expect(cachedValueController.startTimer).toHaveBeenCalled();
+  });
+
+  it('should pause', async () => {
+    const cachedValueController = mock<CachedValueController<string>>();
+    const controller = new UpdatingImageMediaPlayerController(
+      createLitElement(),
+      () => mock<HTMLImageElement>(),
+      () => cachedValueController,
+    );
+
+    await controller.pause();
+
+    expect(cachedValueController.stopTimer).toHaveBeenCalled();
+  });
+
+  it('should ignore mute', async () => {
+    const controller = new UpdatingImageMediaPlayerController(
+      createLitElement(),
+      () => mock<HTMLImageElement>(),
+      () => mock<CachedValueController<string>>(),
+    );
+
+    await controller.mute();
+
+    // Currently no observable side effects.
+  });
+
+  it('should ignore unmute', async () => {
+    const controller = new UpdatingImageMediaPlayerController(
+      createLitElement(),
+      () => mock<HTMLImageElement>(),
+      () => mock<CachedValueController<string>>(),
+    );
+
+    await controller.unmute();
+
+    // Currently no observable side effects.
+  });
+
+  it('should always report muted', () => {
+    const controller = new UpdatingImageMediaPlayerController(
+      createLitElement(),
+      () => mock<HTMLImageElement>(),
+      () => mock<CachedValueController<string>>(),
+    );
+
+    expect(controller.isMuted()).toBeTruthy();
+  });
+
+  it('should ignore seek', async () => {
+    const controller = new UpdatingImageMediaPlayerController(
+      createLitElement(),
+      () => mock<HTMLImageElement>(),
+      () => mock<CachedValueController<string>>(),
+    );
+
+    await controller.seek(10);
+
+    // Currently no observable side effects.
+  });
+
+  it('should ignore set controls', async () => {
+    const controller = new UpdatingImageMediaPlayerController(
+      createLitElement(),
+      () => mock<HTMLImageElement>(),
+      () => mock<CachedValueController<string>>(),
+    );
+
+    await controller.setControls(true);
+
+    // Currently no observable side effects.
+  });
+
+  it('should always report unpaused', () => {
+    const image = mock<HTMLImageElement>();
+    const controller = new ImageMediaPlayerController(createLitElement(), () => image);
+
+    expect(controller.isPaused()).toBeFalsy();
+  });
+
+  describe('should get paused state', () => {
+    it('should return true when the cached value controller does not have a timer', () => {
+      const cachedValueController = mock<CachedValueController<string>>();
+      cachedValueController.hasTimer.mockReturnValue(false);
+
+      const controller = new UpdatingImageMediaPlayerController(
+        createLitElement(),
+        () => mock<HTMLImageElement>(),
+        () => cachedValueController,
+      );
+
+      expect(controller.isPaused()).toBeTruthy();
+    });
+
+    it('should return false when the cached value controller has a timer', () => {
+      const cachedValueController = mock<CachedValueController<string>>();
+      cachedValueController.hasTimer.mockReturnValue(true);
+
+      const controller = new UpdatingImageMediaPlayerController(
+        createLitElement(),
+        () => mock<HTMLImageElement>(),
+        () => cachedValueController,
+      );
+
+      expect(controller.isPaused()).toBeFalsy();
+    });
+
+    it('should return true without cached value controller', () => {
+      const controller = new UpdatingImageMediaPlayerController(
+        createLitElement(),
+        () => mock<HTMLImageElement>(),
+        () => null,
+      );
+
+      expect(controller.isPaused()).toBeTruthy();
+    });
+  });
+
+  describe('should get screenshot URL', () => {
+    it('should return screenshot URL with cached value controller', async () => {
+      const url = 'data:image/png;base64,';
+      const cachedValueController = mock<CachedValueController<string>>();
+      Object.defineProperty(cachedValueController, 'value', { value: url });
+
+      const controller = new UpdatingImageMediaPlayerController(
+        createLitElement(),
+        () => mock<HTMLImageElement>(),
+        () => cachedValueController,
+      );
+
+      expect(await controller.getScreenshotURL()).toBe(url);
+    });
+
+    it('should return null without cached value controller', async () => {
+      const controller = new UpdatingImageMediaPlayerController(
+        createLitElement(),
+        () => mock<HTMLImageElement>(),
+        () => null,
+      );
+
+      expect(await controller.getScreenshotURL()).toBeNull();
+    });
+  });
+
+  describe('should get fullscreen element', async () => {
+    it('should return fullscreen element with image', async () => {
+      const image = mock<HTMLImageElement>();
+
+      const controller = new UpdatingImageMediaPlayerController(
+        createLitElement(),
+        () => image,
+        () => mock<CachedValueController<string>>(),
+      );
+
+      expect(await controller.getFullscreenElement()).toBe(image);
+    });
+
+    it('should return null without image', async () => {
+      const controller = new UpdatingImageMediaPlayerController(
+        createLitElement(),
+        () => null,
+        () => mock<CachedValueController<string>>(),
+      );
+
+      expect(controller.getFullscreenElement()).toBeNull();
+    });
+  });
+});

tests/components-lib/media-player/video.test.ts

@@ -0,0 +1,273 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { mock } from 'vitest-mock-extended';
+import { VideoMediaPlayerController } from '../../../src/components-lib/media-player/video';
+import {
+  hideMediaControlsTemporarily,
+  setControlsOnVideo,
+} from '../../../src/utils/controls';
+import { screenshotVideo } from '../../../src/utils/screenshot';
+import { createLitElement } from '../../test-utils';
+
+vi.mock('../../../src/utils/controls.js');
+vi.mock('../../../src/utils/screenshot.js');
+
+class NotAllowedError extends Error {
+  name = 'NotAllowedError';
+}
+
+// @vitest-environment jsdom
+describe('VideoMediaPlayerController', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('should play', () => {
+    it('should play when no error', async () => {
+      const video = mock<HTMLVideoElement>();
+      video.play.mockResolvedValue();
+
+      const controller = new VideoMediaPlayerController(createLitElement(), () => video);
+
+      await controller.play();
+
+      expect(video.play).toBeCalled();
+    });
+
+    it('should mute if not allowed to play and unmuted', async () => {
+      const video = mock<HTMLVideoElement>();
+      video.play.mockRejectedValueOnce(new NotAllowedError()).mockResolvedValueOnce();
+      video.muted = false;
+
+      const controller = new VideoMediaPlayerController(createLitElement(), () => video);
+
+      await controller.play();
+
+      expect(video.play).toBeCalledTimes(2);
+      expect(video.muted).toBeTruthy();
+    });
+
+    it('should not mute if not allowed to play and already unmuted', async () => {
+      const video = mock<HTMLVideoElement>();
+      video.play.mockRejectedValueOnce(new NotAllowedError());
+      video.muted = true;
+
+      const controller = new VideoMediaPlayerController(createLitElement(), () => video);
+
+      await controller.play();
+
+      expect(video.play).toBeCalledTimes(1);
+      expect(video.muted).toBeTruthy();
+    });
+
+    it('should ignore exception if subsequent play call throws', async () => {
+      const video = mock<HTMLVideoElement>();
+      video.play.mockRejectedValue(new NotAllowedError());
+      video.muted = false;
+
+      const controller = new VideoMediaPlayerController(createLitElement(), () => video);
+
+      await controller.play();
+
+      expect(video.play).toBeCalledTimes(2);
+      expect(video.muted).toBeTruthy();
+    });
+
+    it('should ignore calls without a video', async () => {
+      const controller = new VideoMediaPlayerController(createLitElement(), () => null);
+
+      await controller.play();
+
+      // Currently no observable side effects.
+    });
+  });
+
+  it('should pause', async () => {
+    const video = mock<HTMLVideoElement>();
+    const controller = new VideoMediaPlayerController(createLitElement(), () => video);
+
+    await controller.pause();
+
+    expect(video.pause).toBeCalled();
+  });
+
+  describe('should mute', async () => {
+    it('should mute with video', async () => {
+      const video = mock<HTMLVideoElement>();
+      video.muted = false;
+      const controller = new VideoMediaPlayerController(createLitElement(), () => video);
+
+      await controller.mute();
+
+      expect(video.muted).toBeTruthy();
+    });
+
+    it('should ignore calls without a video', async () => {
+      const controller = new VideoMediaPlayerController(createLitElement(), () => null);
+
+      await controller.mute();
+
+      // Currently no observable side effects.
+    });
+  });
+
+  describe('should unmute', async () => {
+    it('should unmute with video', async () => {
+      const video = mock<HTMLVideoElement>();
+      video.muted = true;
+      const controller = new VideoMediaPlayerController(createLitElement(), () => video);
+
+      await controller.unmute();
+
+      expect(video.muted).toBeFalsy();
+    });
+
+    it('should ignore calls without a video', async () => {
+      const controller = new VideoMediaPlayerController(createLitElement(), () => null);
+
+      await controller.unmute();
+
+      // Currently no observable side effects.
+    });
+  });
+
+  describe('should return muted state', () => {
+    it('should return true when muted', () => {
+      const video = mock<HTMLVideoElement>();
+      video.muted = true;
+      const controller = new VideoMediaPlayerController(createLitElement(), () => video);
+
+      expect(controller.isMuted()).toBeTruthy();
+    });
+
+    it('should return false when not muted', () => {
+      const video = mock<HTMLVideoElement>();
+      video.muted = false;
+      const controller = new VideoMediaPlayerController(createLitElement(), () => video);
+
+      expect(controller.isMuted()).toBeFalsy();
+    });
+
+    it('should return true when no video', () => {
+      const controller = new VideoMediaPlayerController(createLitElement(), () => null);
+
+      expect(controller.isMuted()).toBeTruthy();
+    });
+  });
+
+  describe('should seek', () => {
+    it('should seek', async () => {
+      const video = mock<HTMLVideoElement>();
+      const controller = new VideoMediaPlayerController(createLitElement(), () => video);
+
+      await controller.seek(10);
+
+      expect(hideMediaControlsTemporarily).toBeCalled();
+      expect(video.currentTime).toBe(10);
+    });
+
+    it('should ignore calls without a video', async () => {
+      const controller = new VideoMediaPlayerController(createLitElement(), () => null);
+
+      await controller.seek(10);
+
+      // Currently no observable side effects.
+    });
+  });
+
+  describe('should set controls', () => {
+    it('should set controls', async () => {
+      const video = mock<HTMLVideoElement>();
+      const controller = new VideoMediaPlayerController(createLitElement(), () => video);
+
+      await controller.setControls(true);
+
+      expect(setControlsOnVideo).toBeCalledWith(video, true);
+    });
+
+    it('should set controls to default', async () => {
+      const video = mock<HTMLVideoElement>();
+      const controller = new VideoMediaPlayerController(
+        createLitElement(),
+        () => video,
+        () => true,
+      );
+
+      await controller.setControls();
+
+      expect(setControlsOnVideo).toBeCalledWith(video, true);
+    });
+
+    it('should ignore calls without a default or value', async () => {
+      const controller = new VideoMediaPlayerController(createLitElement(), () => null);
+
+      await controller.setControls(true);
+
+      expect(setControlsOnVideo).not.toBeCalled();
+    });
+  });
+
+  describe('should return paused state', () => {
+    it('should return true when paused', async () => {
+      const video = mock<HTMLVideoElement>();
+      Object.defineProperty(video, 'paused', { value: true });
+
+      const controller = new VideoMediaPlayerController(createLitElement(), () => video);
+
+      await controller.pause();
+
+      expect(controller.isPaused()).toBeTruthy();
+    });
+
+    it('should return false when not paused', async () => {
+      const video = mock<HTMLVideoElement>();
+      Object.defineProperty(video, 'paused', { value: false });
+
+      const controller = new VideoMediaPlayerController(createLitElement(), () => video);
+
+      await controller.pause();
+
+      expect(controller.isPaused()).toBeFalsy();
+    });
+
+    it('should return true when no video', () => {
+      const controller = new VideoMediaPlayerController(createLitElement(), () => null);
+
+      expect(controller.isPaused()).toBeTruthy();
+    });
+  });
+
+  describe('should get screenshot URL', async () => {
+    it('should return screenshot URL with video', async () => {
+      const url = 'data:image/png;base64,';
+      vi.mocked(screenshotVideo).mockReturnValue(url);
+
+      const video = mock<HTMLVideoElement>();
+
+      const controller = new VideoMediaPlayerController(createLitElement(), () => video);
+
+      expect(await controller.getScreenshotURL()).toBe(url);
+    });
+
+    it('should return null without video', async () => {
+      const controller = new VideoMediaPlayerController(createLitElement(), () => null);
+
+      expect(await controller.getScreenshotURL()).toBeNull();
+    });
+  });
+
+  describe('should get fullscreen element', async () => {
+    it('should return fullscreen element with video', async () => {
+      const video = mock<HTMLVideoElement>();
+
+      const controller = new VideoMediaPlayerController(createLitElement(), () => video);
+
+      expect(await controller.getFullscreenElement()).toBe(video);
+    });
+
+    it('should return null without video', async () => {
+      const controller = new VideoMediaPlayerController(createLitElement(), () => null);
+
+      expect(controller.getFullscreenElement()).toBeNull();
+    });
+  });
+});

tests/components-lib/menu-button-controller.test.ts

@@ -19,7 +19,7 @@ import {
   MenuItem,
   ViewDisplayMode,
 } from '../../src/config/types';
-import { AdvancedCameraCardMediaPlayer } from '../../src/types';
+import { MediaPlayerController } from '../../src/types';
 import { createGeneralAction, createViewAction } from '../../src/utils/action';
 import { ViewMedia } from '../../src/view/media';
 import { MediaQueriesResults } from '../../src/view/media-queries-results';
@@ -1349,13 +1349,13 @@ describe('MenuButtonController', () => {
   });
 
   it('should have pause button', () => {
-    const player = mock<AdvancedCameraCardMediaPlayer>();
+    const mediaPlayerController = mock<MediaPlayerController>();
     const buttons = calculateButtons(controller, {
       currentMediaLoadedInfo: createMediaLoadedInfo({
         capabilities: {
           supportsPause: true,
         },
-        player: player,
+        mediaPlayerController,
       }),
     });
 
@@ -1370,14 +1370,14 @@ describe('MenuButtonController', () => {
   });
 
   it('should have play button', () => {
-    const player = mock<AdvancedCameraCardMediaPlayer>();
-    player.isPaused.mockReturnValue(true);
+    const mediaPlayerController = mock<MediaPlayerController>();
+    mediaPlayerController.isPaused.mockReturnValue(true);
     const buttons = calculateButtons(controller, {
       currentMediaLoadedInfo: createMediaLoadedInfo({
         capabilities: {
           supportsPause: true,
         },
-        player: player,
+        mediaPlayerController,
       }),
     });
 
@@ -1392,13 +1392,13 @@ describe('MenuButtonController', () => {
   });
 
   it('should have mute button', () => {
-    const player = mock<AdvancedCameraCardMediaPlayer>();
+    const mediaPlayerController = mock<MediaPlayerController>();
     const buttons = calculateButtons(controller, {
       currentMediaLoadedInfo: createMediaLoadedInfo({
         capabilities: {
           hasAudio: true,
         },
-        player: player,
+        mediaPlayerController,
       }),
     });
 
@@ -1413,14 +1413,14 @@ describe('MenuButtonController', () => {
   });
 
   it('should have unmute button', () => {
-    const player = mock<AdvancedCameraCardMediaPlayer>();
-    player.isMuted.mockReturnValue(true);
+    const mediaPlayerController = mock<MediaPlayerController>();
+    mediaPlayerController.isMuted.mockReturnValue(true);
     const buttons = calculateButtons(controller, {
       currentMediaLoadedInfo: createMediaLoadedInfo({
         capabilities: {
           hasAudio: true,
         },
-        player: player,
+        mediaPlayerController,
       }),
     });
 
@@ -1437,7 +1437,7 @@ describe('MenuButtonController', () => {
   it('should have screenshot button', () => {
     const buttons = calculateButtons(controller, {
       currentMediaLoadedInfo: createMediaLoadedInfo({
-        player: mock<AdvancedCameraCardMediaPlayer>(),
+        mediaPlayerController: mock<MediaPlayerController>(),
       }),
     });