Complete carousel refactor.

Reduces one layer of DOM nesting for simplication, uses the latest Embla version, unittests for everything.
2023-09-04 16:25:32 -07:00
parent 48ece1e154
commit e830db1a77
56 changed files with 3561 additions and 1950 deletions
@@ -0,0 +1,304 @@
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { FrigateCardMediaPlayer } from '../../../../../src/types';
+import {
+  AutoMediaActions,
+  AutoMediaActionsOptionsType,
+  AutoMediaActionsType,
+} from '../../../../../src/utils/embla/plugins/auto-media-actions/auto-media-actions';
+import { dispatchExistingMediaLoadedInfoAsEvent } from '../../../../../src/utils/media-info';
+import {
+  IntersectionObserverMock,
+  createMediaLoadedInfo,
+  createParent,
+} from '../../../../test-utils';
+import {
+  callEmblaHandler,
+  callIntersectionHandler,
+  callVisibilityHandler,
+  createEmblaApiInstance,
+  createTestEmblaOptionHandler,
+  createTestSlideNodes,
+} from '../../test-utils';
+
+const getPlayer = (
+  element: HTMLElement,
+  selector: string,
+): (HTMLElement & FrigateCardMediaPlayer) | null => {
+  return element.querySelector(selector);
+};
+
+const createPlayerSlideNodes = (n = 10): HTMLElement[] => {
+  const slides = createTestSlideNodes({ n: n });
+  for (const slide of slides) {
+    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();
+
+    slide.appendChild(player);
+  }
+  return slides;
+};
+
+const createPlugin = (options?: AutoMediaActionsOptionsType): AutoMediaActionsType => {
+  return AutoMediaActions({
+    playerSelector: 'video',
+    autoPlayCondition: 'all',
+    autoUnmuteCondition: 'all',
+    autoPauseCondition: 'all',
+    autoMuteCondition: 'all',
+    ...options,
+  });
+};
+
+// @vitest-environment jsdom
+describe('AutoMediaActions', () => {
+  beforeAll(() => {
+    vi.stubGlobal('IntersectionObserver', IntersectionObserverMock);
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should construct', () => {
+    const plugin = AutoMediaActions();
+    expect(plugin.name).toBe('autoMediaActions');
+  });
+
+  it('should init without any conditions', () => {
+    const plugin = AutoMediaActions();
+
+    const parent = createParent();
+    const addEventListener = vi.fn();
+    parent.addEventListener = addEventListener;
+    const emblaApi = createEmblaApiInstance({ containerNode: parent });
+
+    plugin.init(emblaApi, createTestEmblaOptionHandler());
+
+    expect(emblaApi.on).toBeCalledWith('destroy', expect.anything());
+    expect(emblaApi.on).not.toBeCalledWith('select', expect.anything());
+    expect(addEventListener).not.toBeCalled();
+  });
+
+  it('should destroy', () => {
+    const plugin = createPlugin();
+    const parent = createParent();
+    const removeEventListener = vi.fn();
+    parent.removeEventListener = removeEventListener;
+    const emblaApi = createEmblaApiInstance({ containerNode: parent });
+
+    plugin.init(emblaApi, createTestEmblaOptionHandler());
+
+    plugin.destroy();
+
+    expect(emblaApi.off).toBeCalledWith('destroy', expect.anything());
+    expect(emblaApi.off).toBeCalledWith('select', expect.anything());
+    expect(removeEventListener).toBeCalled();
+  });
+
+  it('should destroy without any conditions', () => {
+    const plugin = AutoMediaActions();
+    const parent = createParent();
+    const removeEventListener = vi.fn();
+    parent.removeEventListener = removeEventListener;
+    const emblaApi = createEmblaApiInstance({ containerNode: parent });
+
+    plugin.init(emblaApi, createTestEmblaOptionHandler());
+
+    plugin.destroy();
+
+    expect(emblaApi.off).toBeCalledWith('destroy', expect.anything());
+    expect(emblaApi.off).not.toBeCalledWith('select', expect.anything());
+    expect(removeEventListener).not.toBeCalled();
+  });
+
+  it('should mute and pause on destroy', () => {
+    const plugin = createPlugin();
+    const children = createPlayerSlideNodes();
+    const parent = createParent({ children: children });
+    const emblaApi = createEmblaApiInstance({
+      slideNodes: children,
+      containerNode: parent,
+      selectedScrollSnap: 5,
+    });
+
+    plugin.init(emblaApi, createTestEmblaOptionHandler());
+    callEmblaHandler(emblaApi, 'destroy');
+
+    expect(getPlayer(children[5], 'video')?.pause).toBeCalled();
+    expect(getPlayer(children[5], 'video')?.mute).toBeCalled();
+  });
+
+  it('should play and unmute on media load', () => {
+    const plugin = createPlugin();
+    const children = createPlayerSlideNodes();
+    const parent = createParent({ children: children });
+    const emblaApi = createEmblaApiInstance({
+      slideNodes: children,
+      containerNode: parent,
+      selectedScrollSnap: 5,
+    });
+
+    plugin.init(emblaApi, createTestEmblaOptionHandler());
+    dispatchExistingMediaLoadedInfoAsEvent(parent, createMediaLoadedInfo());
+
+    expect(getPlayer(children[5], 'video')?.play).toBeCalled();
+    expect(getPlayer(children[5], 'video')?.unmute).toBeCalled();
+  });
+
+  it('should not play or unmute on media load when player selecter not provided', () => {
+    const plugin = createPlugin({ playerSelector: undefined });
+    const children = createPlayerSlideNodes();
+    const parent = createParent({ children: children });
+    const emblaApi = createEmblaApiInstance({
+      slideNodes: children,
+      containerNode: parent,
+      selectedScrollSnap: 5,
+    });
+
+    plugin.init(emblaApi, createTestEmblaOptionHandler());
+    dispatchExistingMediaLoadedInfoAsEvent(parent, createMediaLoadedInfo());
+
+    expect(getPlayer(children[5], 'video')?.play).not.toBeCalled();
+    expect(getPlayer(children[5], 'video')?.unmute).not.toBeCalled();
+  });
+
+  it('should pause and mute previous on select', () => {
+    const plugin = createPlugin();
+    const children = createPlayerSlideNodes();
+    const emblaApi = createEmblaApiInstance({
+      slideNodes: children,
+      previousScrollSnap: 4,
+    });
+
+    plugin.init(emblaApi, createTestEmblaOptionHandler());
+    callEmblaHandler(emblaApi, 'select');
+
+    expect(getPlayer(children[4], 'video')?.pause).toBeCalled();
+    expect(getPlayer(children[4], 'video')?.mute).toBeCalled();
+  });
+
+  it('should play and unmute on visibility change to visible', () => {
+    vi.spyOn(global.document, 'addEventListener');
+
+    const plugin = createPlugin();
+    const children = createPlayerSlideNodes();
+    const emblaApi = createEmblaApiInstance({
+      slideNodes: children,
+      selectedScrollSnap: 5,
+    });
+
+    plugin.init(emblaApi, createTestEmblaOptionHandler());
+
+    Object.defineProperty(document, 'visibilityState', {
+      value: 'visible',
+      writable: true,
+    });
+    callVisibilityHandler();
+
+    expect(getPlayer(children[5], 'video')?.play).toBeCalled();
+    expect(getPlayer(children[5], 'video')?.unmute).toBeCalled();
+  });
+
+  it('should pause and unmute on visibility change to hidden', () => {
+    vi.spyOn(global.document, 'addEventListener');
+
+    const plugin = createPlugin();
+    const children = createPlayerSlideNodes();
+    const emblaApi = createEmblaApiInstance({
+      slideNodes: children,
+    });
+
+    plugin.init(emblaApi, createTestEmblaOptionHandler());
+
+    Object.defineProperty(document, 'visibilityState', {
+      value: 'hidden',
+      writable: true,
+    });
+    callVisibilityHandler();
+
+    for (const child of children) {
+      expect(getPlayer(child, 'video')?.pause).toBeCalled();
+      expect(getPlayer(child, 'video')?.mute).toBeCalled();
+    }
+  });
+
+  describe('should take no action on visibility change without callbacks', () => {
+    it.each([['visible' as const], ['hidden' as const]])(
+      '%s',
+      (visibilityState: 'visible' | 'hidden') => {
+        vi.spyOn(global.document, 'addEventListener');
+
+        const plugin = AutoMediaActions();
+        const children = createPlayerSlideNodes();
+        const emblaApi = createEmblaApiInstance({
+          slideNodes: children,
+        });
+
+        plugin.init(emblaApi, createTestEmblaOptionHandler());
+
+        Object.defineProperty(document, 'visibilityState', {
+          value: visibilityState,
+          writable: true,
+        });
+        callVisibilityHandler();
+
+        for (const child of children) {
+          expect(getPlayer(child, 'video')?.play).not.toBeCalled();
+          expect(getPlayer(child, 'video')?.pause).not.toBeCalled();
+          expect(getPlayer(child, 'video')?.mute).not.toBeCalled();
+          expect(getPlayer(child, 'video')?.unmute).not.toBeCalled();
+        }
+      },
+    );
+  });
+
+  it('should play and unmute on intersection', () => {
+    const plugin = createPlugin();
+    const children = createPlayerSlideNodes();
+    const emblaApi = createEmblaApiInstance({
+      slideNodes: children,
+      selectedScrollSnap: 5,
+    });
+
+    plugin.init(emblaApi, createTestEmblaOptionHandler());
+
+    // Intersection observer always calls handler on creation (and we ignore
+    // these first calls).
+    callIntersectionHandler(true);
+    callIntersectionHandler(true);
+
+    expect(getPlayer(children[5], 'video')?.play).toBeCalled();
+    expect(getPlayer(children[5], 'video')?.unmute).toBeCalled();
+  });
+
+  it('should pause and mute on intersection', () => {
+    vi.spyOn(global.document, 'addEventListener');
+
+    const plugin = createPlugin();
+    const children = createPlayerSlideNodes();
+    const emblaApi = createEmblaApiInstance({
+      slideNodes: children,
+    });
+
+    plugin.init(emblaApi, createTestEmblaOptionHandler());
+
+    // Intersection observer always calls handler on creation (and we ignore
+    // these first calls).
+    callIntersectionHandler(true);
+    callIntersectionHandler(false);
+
+    for (const child of children) {
+      expect(getPlayer(child, 'video')?.pause).toBeCalled();
+      expect(getPlayer(child, 'video')?.mute).toBeCalled();
+    }
+  });
+});