@gcorevideo/player 2.23.3 → 2.24.1

package/lib/plugins/big-mute-button/BigMuteButton.js

@@ -34,7 +34,7 @@ export class BigMuteButton extends UICorePlugin {
      */
     get events() {
         return {
-            'click .big-mute-icon': 'handleBigMuteBtnClick',
+            'click .big-mute-icon': 'clicked',
             'click .big-mute-icon-wrapper': 'destroyBigMuteBtn',
         };
     }
@@ -48,6 +48,7 @@ export class BigMuteButton extends UICorePlugin {
         trace(`${T} bindEvents`, {
             mediacontrol: !!this.core.mediaControl,
         });
+        // TOOD use core.getPlugin('media_control')
         this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.mediaControlRendered);
     }
     onCoreReady() {
@@ -141,7 +142,7 @@ export class BigMuteButton extends UICorePlugin {
         }
         this.destroy();
     }
-    handleBigMuteBtnClick(e) {
+    clicked(e) {
         const localVolume = Utils.Config.restore('volume');
         const volume = !isNaN(localVolume) ? localVolume : 100;
         // TODO use container.setVolume() instead

package/lib/plugins/cmcd-config/CmcdConfig.d.ts

@@ -0,0 +1,45 @@
+import { Core, CorePlugin } from '@clappr/core';
+/**
+ * @beta
+ */
+export type CmcdConfigPluginSettings = {
+    /**
+     * Session ID. If ommitted, a random UUID will be generated
+     */
+    sessionId: string;
+    /**
+     * Content ID,
+     * If ommitted, the pathname part of the first source URL will be used
+     */
+    contentId?: string;
+};
+/**
+ * A `PLUGIN` that configures CMCD for playback
+ * @beta
+ * @remarks
+ * Configuration options
+ *   `cmcd`: {@link CmcdConfigPluginSettings}
+ */
+export declare class CmcdConfig extends CorePlugin {
+    private sid;
+    private cid;
+    /**
+     * @inheritdocs
+     */
+    get name(): string;
+    get version(): string;
+    get supportedVersion(): string;
+    constructor(core: Core);
+    /**
+     * @inheritdocs
+     */
+    bindEvents(): void;
+    exportIds(): {
+        sid: string;
+        cid: string;
+    };
+    private updateSettings;
+    private updateHlsjsSettings;
+    private generateContentId;
+}
+//# sourceMappingURL=CmcdConfig.d.ts.map

package/lib/plugins/cmcd-config/CmcdConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CmcdConfig.d.ts","sourceRoot":"","sources":["../../../src/plugins/cmcd-config/CmcdConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,IAAI,EAAE,UAAU,EAAU,MAAM,cAAc,CAAA;AA6BrE;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,SAAS,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAID;;;;;;GAMG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACxC,OAAO,CAAC,GAAG,CAAQ;IAEnB,OAAO,CAAC,GAAG,CAAK;IAEhB;;OAEG;IACH,IAAI,IAAI,WAEP;IAED,IAAI,OAAO,WAEV;IAED,IAAI,gBAAgB,WAEnB;gBAEW,IAAI,EAAE,IAAI;IAMtB;;OAEG;IACM,UAAU;IAMnB,SAAS,IAAI;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE;YAO3B,cAAc;IA8B5B,OAAO,CAAC,mBAAmB;IAiB3B,OAAO,CAAC,iBAAiB;CAK1B"}

package/lib/plugins/cmcd-config/CmcdConfig.js

@@ -0,0 +1,110 @@
+import { $, CorePlugin, Events } from '@clappr/core';
+// import { trace } from '@gcorevideo/utils'
+import { generateSessionId } from './utils';
+import { CLAPPR_VERSION } from '../../build.js';
+const CMCD_KEYS = [
+    'br',
+    'd',
+    'ot',
+    'tb',
+    'bl',
+    'dl',
+    'mtp',
+    'nor',
+    'nrr',
+    'su',
+    'bs',
+    'rtp',
+    'cid',
+    'pr',
+    'sf',
+    'sid',
+    'st',
+    'v',
+];
+// const T = 'plugins.cmcd'
+/**
+ * A `PLUGIN` that configures CMCD for playback
+ * @beta
+ * @remarks
+ * Configuration options
+ *   `cmcd`: {@link CmcdConfigPluginSettings}
+ */
+export class CmcdConfig extends CorePlugin {
+    sid;
+    cid = '';
+    /**
+     * @inheritdocs
+     */
+    get name() {
+        return 'cmcd';
+    }
+    get version() {
+        return '0.1.0';
+    }
+    get supportedVersion() {
+        return CLAPPR_VERSION;
+    }
+    constructor(core) {
+        super(core);
+        this.sid = this.options.cmcd?.sessionId ?? generateSessionId();
+        this.cid = this.options.cmcd?.contentId ?? this.generateContentId();
+    }
+    /**
+     * @inheritdocs
+     */
+    bindEvents() {
+        this.listenTo(this.core, Events.CORE_CONTAINERS_CREATED, () => this.updateSettings(this.core.containers[0]));
+    }
+    exportIds() {
+        return {
+            sid: this.sid,
+            cid: this.cid,
+        };
+    }
+    async updateSettings(container) {
+        switch (container.playback.name) {
+            case 'dash':
+                $.extend(true, container.playback.options, {
+                    dash: {
+                        cmcd: {
+                            enabled: true,
+                            enabledKeys: CMCD_KEYS,
+                            sid: this.sid,
+                            cid: this.cid,
+                        },
+                    },
+                });
+                break;
+            case 'hls':
+                $.extend(true, container.playback.options, {
+                    playback: {
+                        hlsjsConfig: {
+                            cmcd: {
+                                includeKeys: CMCD_KEYS,
+                                sessionId: this.sid,
+                                contentId: this.cid,
+                            },
+                        },
+                    },
+                });
+                break;
+        }
+    }
+    updateHlsjsSettings(options, { cid, sid }) {
+        $.extend(true, options, {
+            playback: {
+                hlsjsConfig: {
+                    cmcd: {
+                        includeKeys: CMCD_KEYS,
+                        sessionId: sid,
+                        contentId: cid,
+                    },
+                },
+            },
+        });
+    }
+    generateContentId() {
+        return new URL(this.core.options.source ?? this.core.options.sources[0].source).pathname.slice(0, 64);
+    }
+}

package/lib/plugins/cmcd-config/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function generateSessionId(): string;
+//# sourceMappingURL=utils.d.ts.map

package/lib/plugins/cmcd-config/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/plugins/cmcd-config/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,iBAAiB,IAAI,MAAM,CAE1C"}

package/lib/plugins/cmcd-config/utils.js

@@ -0,0 +1,3 @@
+export function generateSessionId() {
+    return window.crypto.randomUUID();
+}

package/lib/testUtils.d.ts

@@ -5,6 +5,7 @@ export declare function createMockCore(options?: Record<string, unknown>, contai
     $el: any;
     activePlayback: any;
     activeContainer: any;
+    containers: any[];
     i18n: {
         t: import("vitest").Mock<(...args: any[]) => any>;
     };
@@ -28,7 +29,7 @@ export declare function createSpinnerPlugin(): Events<string | symbol, any> & {
     show: import("vitest").Mock<(...args: any[]) => any>;
     hide: import("vitest").Mock<(...args: any[]) => any>;
 };
-export declare function createMockPlayback(name?: string): Events<string | symbol, any> & {
+export declare function createMockPlayback(name?: string, options?: Record<string, unknown>): Events<string | symbol, any> & {
     name: string;
     currentLevel: number;
     el: HTMLVideoElement;
@@ -36,6 +37,9 @@ export declare function createMockPlayback(name?: string): Events<string | symbo
     dvrInUse: boolean;
     isAudioOnly: boolean;
     levels: never[];
+    options: {
+        [x: string]: unknown;
+    };
     consent: import("vitest").Mock<(...args: any[]) => any>;
     play: import("vitest").Mock<(...args: any[]) => any>;
     pause: import("vitest").Mock<(...args: any[]) => any>;

package/lib/testUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,MAAM,MAAM,eAAe,CAAA;AAGlC,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;EAqB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmC/C;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAA0B;;;;;;;;;;;;;;;;;;;;;;;;EA6BrC;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAiB/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../src/testUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,YAAY,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,MAAM,MAAM,eAAe,CAAA;AAGlC,wBAAgB,cAAc,CAC5B,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,SAAS,GAAE,GAAkC;;;;;;;;;;;;;;;;;EAsB9C;AAED,wBAAgB,gBAAgB;;;EAK/B;AAED,wBAAgB,mBAAmB;;;;;;EAKlC;AAED,wBAAgB,kBAAkB,CAAC,IAAI,SAAS,EAAE,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCtF;AAED,wBAAgB,mBAAmB,CACjC,OAAO,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,EACrC,QAAQ,GAAE,GAAgD;;;;;;;;;;;;;;;;;;;;;;;;EA6B3D;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAiB/C;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,GAAG,OAe7C"}

package/lib/testUtils.js

@@ -9,6 +9,7 @@ export function createMockCore(options = {}, container = createMockContainer(opt
         $el: $(el),
         activePlayback: container.playback,
         activeContainer: container,
+        containers: [container],
         i18n: {
             t: vi.fn().mockImplementation((key) => key),
         },
@@ -34,7 +35,7 @@ export function createSpinnerPlugin() {
         hide: vi.fn(),
     });
 }
-export function createMockPlayback(name = 'mock') {
+export function createMockPlayback(name = 'mock', options = {}) {
     const emitter = new Events();
     return Object.assign(emitter, {
         name,
@@ -44,6 +45,7 @@ export function createMockPlayback(name = 'mock') {
         dvrInUse: false,
         isAudioOnly: false,
         levels: [],
+        options: { ...options },
         consent: vi.fn(),
         play: vi.fn(),
         pause: vi.fn(),
@@ -70,7 +72,7 @@ export function createMockPlayback(name = 'mock') {
         trigger: emitter.emit,
     });
 }
-export function createMockContainer(options = {}, playback = createMockPlayback()) {
+export function createMockContainer(options = {}, playback = createMockPlayback('html5_video', options)) {
     const el = playback.el;
     const emitter = new Events();
     return Object.assign(emitter, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.23.3",
+  "version": "2.24.1",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",

package/src/index.plugins.ts

@@ -5,6 +5,7 @@ export { AudioTracks as AudioSelector } from "./plugins/audio-selector/AudioTrac
 export * from "./plugins/big-mute-button/BigMuteButton.js";
 export * from "./plugins/bottom-gear/BottomGear.js";
 export * from "./plugins/clappr-stats/ClapprStats.js";
+export * from "./plugins/cmcd-config/CmcdConfig.js";
 export * from "./plugins/clappr-nerd-stats/NerdStats.js";
 export { NerdStats as ClapprNerdStats } from "./plugins/clappr-nerd-stats/NerdStats.js";
 export * from "./plugins/click-to-pause/ClickToPause.js";

package/src/plugins/big-mute-button/BigMuteButton.ts

@@ -47,7 +47,7 @@ export class BigMuteButton extends UICorePlugin {
    */
   override get events() {
     return {
-      'click .big-mute-icon': 'handleBigMuteBtnClick',
+      'click .big-mute-icon': 'clicked',
       'click .big-mute-icon-wrapper': 'destroyBigMuteBtn',
     }
   }
@@ -62,6 +62,7 @@ export class BigMuteButton extends UICorePlugin {
     trace(`${T} bindEvents`, {
       mediacontrol: !!this.core.mediaControl,
     })
+    // TOOD use core.getPlugin('media_control')
     this.listenTo(
       this.core.mediaControl,
       Events.MEDIACONTROL_RENDERED,
@@ -199,7 +200,7 @@ export class BigMuteButton extends UICorePlugin {
     this.destroy()
   }
 
-  private handleBigMuteBtnClick(e: MouseEvent) {
+  private clicked(e: MouseEvent) {
     const localVolume = Utils.Config.restore('volume')
     const volume = !isNaN(localVolume) ? localVolume : 100
 

package/src/plugins/cmcd-config/CmcdConfig.ts

@@ -0,0 +1,148 @@
+import { $, Container, Core, CorePlugin, Events } from '@clappr/core'
+
+// import { trace } from '@gcorevideo/utils'
+
+import { generateSessionId } from './utils'
+import { CLAPPR_VERSION } from '../../build.js'
+import { CoreOptions } from 'src/internal.types'
+
+const CMCD_KEYS = [
+  'br',
+  'd',
+  'ot',
+  'tb',
+  'bl',
+  'dl',
+  'mtp',
+  'nor',
+  'nrr',
+  'su',
+  'bs',
+  'rtp',
+  'cid',
+  'pr',
+  'sf',
+  'sid',
+  'st',
+  'v',
+]
+
+/**
+ * @beta
+ */
+export type CmcdConfigPluginSettings = {
+  /**
+   * Session ID. If ommitted, a random UUID will be generated
+   */
+  sessionId: string
+  /**
+   * Content ID,
+   * If ommitted, the pathname part of the first source URL will be used
+   */
+  contentId?: string
+}
+
+// const T = 'plugins.cmcd'
+
+/**
+ * A `PLUGIN` that configures CMCD for playback
+ * @beta
+ * @remarks
+ * Configuration options
+ *   `cmcd`: {@link CmcdConfigPluginSettings}
+ */
+export class CmcdConfig extends CorePlugin {
+  private sid: string
+
+  private cid = ''
+
+  /**
+   * @inheritdocs
+   */
+  get name() {
+    return 'cmcd'
+  }
+
+  get version() {
+    return '0.1.0'
+  }
+
+  get supportedVersion() {
+    return CLAPPR_VERSION
+  }
+
+  constructor(core: Core) {
+    super(core)
+    this.sid = this.options.cmcd?.sessionId ?? generateSessionId()
+    this.cid = this.options.cmcd?.contentId ?? this.generateContentId()
+  }
+
+  /**
+   * @inheritdocs
+   */
+  override bindEvents() {
+    this.listenTo(this.core, Events.CORE_CONTAINERS_CREATED, () =>
+      this.updateSettings(this.core.containers[0]),
+    )
+  }
+
+  exportIds(): { sid: string; cid: string } {
+    return {
+      sid: this.sid,
+      cid: this.cid,
+    }
+  }
+
+  private async updateSettings(container: Container) {
+    switch (container.playback.name) {
+      case 'dash':
+        $.extend(true, container.playback.options, {
+          dash: {
+            cmcd: {
+              enabled: true,
+              enabledKeys: CMCD_KEYS,
+              sid: this.sid,
+              cid: this.cid,
+            },
+          },
+        })
+        break
+      case 'hls':
+        $.extend(true, container.playback.options, {
+          playback: {
+            hlsjsConfig: {
+              cmcd: {
+                includeKeys: CMCD_KEYS,
+                sessionId: this.sid,
+                contentId: this.cid,
+              },
+            },
+          },
+        })
+        break
+    }
+  }
+
+  private updateHlsjsSettings(
+    options: CoreOptions,
+    { cid, sid }: { cid: string; sid: string },
+  ) {
+    $.extend(true, options, {
+      playback: {
+        hlsjsConfig: {
+          cmcd: {
+            includeKeys: CMCD_KEYS,
+            sessionId: sid,
+            contentId: cid,
+          },
+        },
+      },
+    })
+  }
+
+  private generateContentId() {
+    return new URL(
+      this.core.options.source ?? this.core.options.sources[0].source,
+    ).pathname.slice(0, 64)
+  }
+}

package/src/plugins/cmcd-config/__tests__/CmcdConfig.test.ts

@@ -0,0 +1,174 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { CmcdConfig } from '../CmcdConfig'
+import { createMockCore } from '../../../testUtils'
+import { Events } from '@clappr/core'
+
+vi.mock('../utils', () => ({
+  generateSessionId: vi.fn().mockReturnValue('123'),
+}))
+
+const CMCD_KEYS = [
+  'br',
+  'd',
+  'ot',
+  'tb',
+  'bl',
+  'dl',
+  'mtp',
+  'nor',
+  'nrr',
+  'su',
+  'bs',
+  'rtp',
+  'cid',
+  'pr',
+  'sf',
+  'sid',
+  'st',
+  'v',
+]
+
+describe('CmcdConfig', () => {
+  let core: any
+  let plugin: CmcdConfig
+  describe('basically', () => {
+    beforeEach(() => {
+      core = createMockCore({
+        sources: [
+          {
+            source: 'https://zulu.com/123.mpd',
+            mimeType: 'application/dash+xml',
+          },
+        ],
+      })
+    })
+    describe('when container is created', () => {
+      describe('dash.js', () => {
+        beforeEach(async () => {
+          core.containers[0].playback.name = 'dash'
+          plugin = new CmcdConfig(core)
+          core.trigger(Events.CORE_CONTAINERS_CREATED)
+          await new Promise((resolve) => setTimeout(resolve, 0))
+        })
+        it('should update DASH.js CMCD settings', () => {
+          expect(core.containers[0].playback.options).toEqual(
+            expect.objectContaining({
+              dash: expect.objectContaining({
+                cmcd: expect.objectContaining({
+                  enabled: true,
+                  enabledKeys: CMCD_KEYS,
+                }),
+              }),
+            }),
+          )
+        })
+        it('should generate unique session ID', () => {
+          expect(core.containers[0].playback.options).toEqual(
+            expect.objectContaining({
+              dash: expect.objectContaining({
+                cmcd: expect.objectContaining({
+                  sid: '123',
+                }),
+              }),
+            }),
+          )
+        })
+        it('should compute content ID from source URL', () => {
+          expect(core.containers[0].playback.options).toEqual(
+            expect.objectContaining({
+              dash: expect.objectContaining({
+                cmcd: expect.objectContaining({
+                  cid: '/123.mpd',
+                }),
+              }),
+            }),
+          )
+        })
+      })
+      describe('hls.js', () => {
+        beforeEach(async () => {
+          core.containers[0].playback.name = 'hls'
+          plugin = new CmcdConfig(core)
+          core.trigger(Events.CORE_CONTAINERS_CREATED)
+        })
+        it('should update HLS.js CMCD settings', () => {
+          expect(core.containers[0].playback.options).toEqual(
+            expect.objectContaining({
+              playback: expect.objectContaining({
+                hlsjsConfig: expect.objectContaining({
+                  cmcd: expect.objectContaining({
+                    includeKeys: CMCD_KEYS,
+                    contentId: '/123.mpd',
+                    sessionId: '123',
+                  }),
+                }),
+              }),
+            }),
+          )
+        })
+      })
+    })
+  })
+  describe('custom content ID', () => {
+    beforeEach(async () => {
+      core = createMockCore({
+        cmcd: {
+          contentId:
+            'e287ea99b57c09b7a185aaaf36e075f2c0b346ce90aeced72976b1732678a8c6',
+        },
+        sources: [
+          {
+            source: 'https://zulu.com/123.mpd',
+            mimeType: 'application/dash+xml',
+          },
+        ],
+      })
+      core.containers[0].playback.name = 'dash'
+      core.containers[0].playback.options.src = 'https://123.mpd'
+      plugin = new CmcdConfig(core)
+      core.trigger(Events.CORE_CONTAINERS_CREATED)
+      await new Promise((resolve) => setTimeout(resolve, 0))
+    })
+    it('should use custom content ID', () => {
+      expect(core.containers[0].playback.options).toEqual(
+        expect.objectContaining({
+          dash: expect.objectContaining({
+            cmcd: expect.objectContaining({
+              cid: 'e287ea99b57c09b7a185aaaf36e075f2c0b346ce90aeced72976b1732678a8c6',
+            }),
+          }),
+        }),
+      )
+    })
+  })
+  describe('custom session ID', () => {
+    beforeEach(async () => {
+      core = createMockCore({
+        cmcd: { sessionId: '456' },
+        sources: [
+          {
+            source: 'https://zulu.com/123.mpd',
+            mimeType: 'application/dash+xml',
+          },
+        ],
+      })
+      core.containers[0].playback.name = 'dash'
+      core.containers[0].playback.options.src = 'https://123.mpd'
+      plugin = new CmcdConfig(core)
+      core.trigger(Events.CORE_CONTAINERS_CREATED)
+      await new Promise((resolve) => setTimeout(resolve, 0))
+    })
+    it('should use custom session ID', () => {
+      expect(core.containers[0].playback.options).toEqual(
+        expect.objectContaining({
+          dash: expect.objectContaining({
+            cmcd: expect.objectContaining({
+              sid: '456',
+            }),
+          }),
+        }),
+      )
+    })
+  })
+})

package/src/plugins/cmcd-config/utils.ts

@@ -0,0 +1,3 @@
+export function generateSessionId(): string {
+  return window.crypto.randomUUID()
+}

package/src/plugins/media-control/__tests__/MediaControl.test.ts

@@ -5,7 +5,6 @@ import {
   MediaControlSettings,
 } from '../MediaControl'
 import { createMockCore } from '../../../testUtils'
-import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
 import { $, Events, Playback } from '@clappr/core'
 
 vi.mock('../../utils/fullscreen', () => ({
@@ -13,8 +12,10 @@ vi.mock('../../utils/fullscreen', () => ({
   isFullscreen: vi.fn().mockReturnValue(false),
 }))
 
-Logger.enable('*')
-setTracer(new LogTracer('MediaControl.test'))
+// import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
+
+// Logger.enable('*')
+// setTracer(new LogTracer('MediaControl.test'))
 
 describe('MediaControl', () => {
   let core: any

package/src/testUtils.ts

@@ -13,6 +13,7 @@ export function createMockCore(
     $el: $(el),
     activePlayback: container.playback,
     activeContainer: container,
+    containers: [container],
     i18n: {
       t: vi.fn().mockImplementation((key: string) => key),
     },
@@ -41,7 +42,7 @@ export function createSpinnerPlugin() {
   })
 }
 
-export function createMockPlayback(name = 'mock') {
+export function createMockPlayback(name = 'mock', options: Record<string, unknown> = {}) {
   const emitter = new Events()
   return Object.assign(emitter, {
     name,
@@ -51,6 +52,7 @@ export function createMockPlayback(name = 'mock') {
     dvrInUse: false,
     isAudioOnly: false,
     levels: [],
+    options: { ...options },
     consent: vi.fn(),
     play: vi.fn(),
     pause: vi.fn(),
@@ -80,7 +82,7 @@ export function createMockPlayback(name = 'mock') {
 
 export function createMockContainer(
   options: Record<string, unknown> = {},
-  playback: any = createMockPlayback(),
+  playback: any = createMockPlayback('html5_video', options),
 ) {
   const el = playback.el
   const emitter = new Events()