@gcorevideo/player 2.23.2 → 2.24.0

package/lib/plugins/thumbnails/Thumbnails.js

@@ -174,11 +174,9 @@ export class Thumbnails extends UICorePlugin {
         mediaControl.$el.first().after(this.$el);
     }
     onMouseMoveSeekbar(_, pos) {
-        if (Math.abs(pos - this.hoverPosition) >= 0.01) {
-            this.hoverPosition = pos;
-            this.showing = true;
-            this.update();
-        }
+        this.hoverPosition = pos;
+        this.showing = true;
+        this.update();
     }
     onMouseLeave() {
         this.showing = false;
@@ -290,7 +288,6 @@ export class Thumbnails extends UICorePlugin {
         // determine which thumbnail applies to the current time
         const thumbIndex = this.getThumbIndexForTime(hoverTime);
         const thumb = this.thumbs[thumbIndex];
-        // update thumbnail
         const $spotlight = this.$el.find('#thumbnails-spotlight');
         this.buildThumbImage(thumb, this.spotlightHeight, $spotlight.find('.thumbnail-container')).appendTo($spotlight);
         const elWidth = this.$el.width();

package/lib/testUtils.d.ts

@@ -28,7 +28,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 +36,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>;
@@ -75,6 +78,7 @@ export declare function createMockContainer(options?: Record<string, unknown>, p
     getDuration: import("vitest").Mock<(...args: any[]) => any>;
     getPlugin: import("vitest").Mock<(...args: any[]) => any>;
     getPlaybackType: import("vitest").Mock<(...args: any[]) => any>;
+    getStartTimeOffset: import("vitest").Mock<(...args: any[]) => any>;
     isDvrInUse: import("vitest").Mock<(...args: any[]) => any>;
     isDvrEnabled: import("vitest").Mock<(...args: any[]) => any>;
     isHighDefinitionInUse: 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;;;;;;;;;;;;;;;;;;;;;;;EA4BrC;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,GAAG,gBAe/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;;;;;;;;;;;;;;;;EAqB9C;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

@@ -34,7 +34,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 +44,7 @@ export function createMockPlayback(name = 'mock') {
         dvrInUse: false,
         isAudioOnly: false,
         levels: [],
+        options: { ...options },
         consent: vi.fn(),
         play: vi.fn(),
         pause: vi.fn(),
@@ -70,7 +71,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, {
@@ -87,6 +88,7 @@ export function createMockContainer(options = {}, playback = createMockPlayback(
         getDuration: vi.fn().mockReturnValue(0),
         getPlugin: vi.fn(),
         getPlaybackType: vi.fn(),
+        getStartTimeOffset: vi.fn().mockReturnValue(0),
         isDvrInUse: vi.fn().mockReturnValue(false),
         isDvrEnabled: vi.fn().mockReturnValue(false),
         isHighDefinitionInUse: vi.fn().mockReturnValue(false),
@@ -107,6 +109,8 @@ export function createMockMediaControl(core) {
     // @ts-ignore
     mediaControl.mount = vi.fn();
     // @ts-ignore
+    mediaControl.container = core.activeContainer;
+    // @ts-ignore
     mediaControl.toggleElement = vi.fn();
     vi.spyOn(mediaControl, 'trigger');
     core.$el.append(mediaControl.$el);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.23.2",
+  "version": "2.24.0",
   "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/bottom-gear/BottomGear.ts

@@ -1,4 +1,4 @@
-import { UICorePlugin, template, Events as ClapprEvents, $ } from '@clappr/core'
+import { UICorePlugin, template, Events as ClapprEvents, $, Container } from '@clappr/core'
 import { trace } from '@gcorevideo/utils'
 import assert from 'assert'
 
@@ -150,11 +150,6 @@ export class BottomGear extends UICorePlugin {
    */
   override bindEvents() {
     this.listenToOnce(this.core, ClapprEvents.CORE_READY, this.onCoreReady)
-    this.listenTo(
-      this.core,
-      ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED,
-      this.onActiveContainerChanged,
-    )
   }
 
   /**
@@ -208,18 +203,16 @@ export class BottomGear extends UICorePlugin {
     return $item
   }
 
-  private onActiveContainerChanged() {
-    trace(`${T} onActiveContainerChanged`)
-    this.bindContainerEvents()
-  }
-
-  private bindContainerEvents() {
+  private bindContainerEvents(container: Container) {
     trace(`${T} bindContainerEvents`)
     this.listenTo(
-      this.core.activeContainer,
+      container,
       ClapprEvents.CONTAINER_HIGHDEFINITIONUPDATE,
       this.highDefinitionUpdate,
     )
+    this.listenTo(container, ClapprEvents.CONTAINER_CLICK, () => {
+      this.collapse()
+    })
   }
 
   private highDefinitionUpdate(isHd: boolean) {
@@ -259,6 +252,10 @@ export class BottomGear extends UICorePlugin {
    * Should be called by the UI plugin that added a gear item with a submenu when the latter is closed (e.g., when a "back" button is clicked).
    */
   refresh() {
+    this.collapseSubmenus()
+  }
+
+  private collapseSubmenus() {
     this.$el.find('.gear-sub-menu-wrapper').hide()
     this.$el.find('#gear-options').show()
   }
@@ -278,10 +275,12 @@ export class BottomGear extends UICorePlugin {
   }
 
   private collapse() {
-    trace(`${T} hide`)
+    trace(`${T} collapse`)
     this.collapsed = true;
     this.$el.find('#gear-options-wrapper').hide()
     this.$el.find('#gear-button').attr('aria-expanded', 'false')
+    // TODO hide submenus
+    this.collapseSubmenus()
   }
 
   private onCoreReady() {
@@ -294,6 +293,9 @@ export class BottomGear extends UICorePlugin {
       this.onMediaControlRendered,
     )
     this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_HIDE, this.collapse)
+    this.listenTo(mediaControl, ClapprEvents.MEDIACONTROL_CONTAINERCHANGED, () => {
+      this.bindContainerEvents(mediaControl.container)
+    })
     this.listenTo(
       mediaControl,
       ExtendedEvents.MEDIACONTROL_MENU_COLLAPSE,
@@ -303,6 +305,7 @@ export class BottomGear extends UICorePlugin {
         }
       },
     )
+    this.bindContainerEvents(mediaControl.container)
   }
 
   private onMediaControlRendered() {

package/src/plugins/bottom-gear/__tests__/BottomGear.test.ts

@@ -2,7 +2,7 @@ import { MockedFunction, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { BottomGear, GearEvents } from '../BottomGear'
 import { createMockCore, createMockMediaControl } from '../../../testUtils'
-import { Events } from '@clappr/core'
+import { $, Events } from '@clappr/core'
 import { ExtendedEvents } from '../../media-control/MediaControl'
 
 // import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
@@ -17,19 +17,18 @@ describe('BottomGear', () => {
   let onGearRendered: MockedFunction<() => void>
   beforeEach(() => {
     core = createMockCore()
-      mediaControl = createMockMediaControl(core)
-      core.getPlugin = vi
-        .fn()
-        .mockImplementation((name) =>
-          name === 'media_control' ? mediaControl : null,
-        )
+    mediaControl = createMockMediaControl(core)
+    core.getPlugin = vi
+      .fn()
+      .mockImplementation((name) =>
+        name === 'media_control' ? mediaControl : null,
+      )
   })
   describe('basically', () => {
     beforeEach(() => {
       bottomGear = new BottomGear(core)
       onGearRendered = vi.fn()
       bottomGear.on(GearEvents.RENDERED, onGearRendered, null)
-      bottomGear.render()
       core.emit(Events.CORE_READY)
       bottomGear.addItem('test', null).html('<button>test</button>')
     })
@@ -92,9 +91,9 @@ describe('BottomGear', () => {
         bottomGear.$el.find('#gear-button').click()
       })
       it('should collapse the gear menu', () => {
-        expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
-          'none',
-        )
+        expect(
+          bottomGear.$el.find('#gear-options-wrapper').css('display'),
+        ).toBe('none')
         expect(bottomGear.$el.find('#gear-button').attr('aria-expanded')).toBe(
           'false',
         )
@@ -104,9 +103,6 @@ describe('BottomGear', () => {
   describe('when there are no items', () => {
     beforeEach(() => {
       bottomGear = new BottomGear(core)
-      onGearRendered = vi.fn()
-      bottomGear.on(GearEvents.RENDERED, onGearRendered, null)
-      bottomGear.render()
       core.emit(Events.CORE_READY)
     })
     it('should render hidden', () => {
@@ -117,4 +113,45 @@ describe('BottomGear', () => {
       expect(bottomGear.$el.css('display')).not.toBe('none')
     })
   })
+  describe('when container is clicked', () => {
+    beforeEach(async () => {
+      bottomGear = new BottomGear(core)
+      core.emit(Events.CORE_READY)
+      bottomGear
+        .addItem('test', $('<ul id="test-options"><li>Item</li></ul>'))
+        .html('<button id="test-button">test</button>')
+      bottomGear.$el.find('#gear-button').click()
+    })
+    describe('basically', () => {
+      beforeEach(async () => {
+        mediaControl.container.trigger(Events.CONTAINER_CLICK)
+        await new Promise((resolve) => setTimeout(resolve, 0))
+      })
+      it('should collapse the gear menu', () => {
+        expect(bottomGear.$el.find('#gear-options-wrapper').css('display')).toBe(
+          'none',
+        )
+        expect(bottomGear.$el.find('#gear-button').attr('aria-expanded')).toBe(
+          'false',
+        )
+        expect(bottomGear.$el.find('#test-options').css('display')).toBe('none')
+      })
+    })
+    describe('when submenu is open', () => {
+      beforeEach(async () => {
+        // bottomGear.$el.find('#test-submenu').click()
+        bottomGear.$el.find('#test-options').show(); // as if it was clicked
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        mediaControl.container.trigger(Events.CONTAINER_CLICK)
+      })
+      it('should collapse it as well', () => {
+        expect(bottomGear.$el.find('#test-options').css('display')).toBe(
+          'none',
+        )
+        expect(bottomGear.$el.find('#gear-options').css('display')).not.toBe(
+          'none',
+        )
+      })
+    })
+  })
 })

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

@@ -0,0 +1,148 @@
+import {
+  Core,
+  CorePlugin,
+  Events,
+} from '@clappr/core'
+
+import { generateContentId, generateSessionId } from './utils'
+
+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, either constant or derived from current source.
+   * If ommitted, a SHA-1 hash of current source URL will be used
+   */
+  contentId?: string | ((sourceUrl: string, mimeType?: string) => (string | Promise<string>))
+}
+
+/**
+ * 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'
+  }
+
+  constructor(core: Core) {
+    super(core)
+    this.sid = this.options.cmcd?.sessionId ?? generateSessionId()
+  }
+
+  /**
+   * @inheritdocs
+   */
+  override bindEvents() {
+    this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, () =>
+      this.updateSettings(),
+    )
+  }
+
+  async getIds(): Promise<{ sid: string; cid: string }> {
+    return {
+      sid: this.sid,
+      cid: await this.ensureContentId(),
+    }
+  }
+
+  private updateSettings() {
+    switch (this.core.activeContainer.playback.name) {
+      case 'dash':
+        this.updateDashjsSettings()
+        break
+      case 'hls':
+        this.updateHlsjsSettings()
+        break
+    }
+  }
+
+  private async updateDashjsSettings() {
+    const {cid, sid} = await this.getIds()
+    const options = this.core.activePlayback.options
+    this.core.activePlayback.options = {
+      ...options,
+      dash: {
+        ...(options.dash ?? {}),
+        cmcd: {
+          enabled: true,
+          enabledKeys: CMCD_KEYS,
+          sid,
+          cid,
+        },
+      },
+    }
+  }
+
+  private async updateHlsjsSettings() {
+    const { cid, sid } = await this.getIds()
+    const options = this.core.activePlayback.options
+    this.core.activePlayback.options = {
+      ...options,
+      playback: {
+        hlsjsConfig: {
+          ...(options.playback?.hlsjsConfig ?? {}),
+          cmcd: {
+            includeKeys: CMCD_KEYS,
+            sessionId: sid,
+            contentId: cid,
+          },
+        },
+      },
+    }
+  }
+
+  private async ensureContentId(): Promise<string> {
+    if (!this.cid) {
+      this.cid = await this.evalContentId()
+    }
+    return this.cid
+  }
+
+  private async evalContentId(): Promise<string> {
+    if (!this.core.activeContainer.options.cmcd?.contentId) {
+      return generateContentId(this.core.activePlayback.options.src)
+    }
+    const contentId = this.core.activeContainer.options.cmcd.contentId
+    if (typeof contentId === 'string') {
+      return contentId
+    }
+    return Promise.resolve(contentId(this.core.activePlayback.options.src))
+  }
+}

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

@@ -0,0 +1,162 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { CmcdConfig } from '../CmcdConfig'
+import { createMockCore } from '../../../testUtils'
+import { Events } from '@clappr/core'
+import { generateContentId } from '../utils'
+
+import { createHash } from 'node:crypto'
+
+vi.mock('../utils', () => ({
+  generateSessionId: vi.fn().mockReturnValue('123'),
+  generateContentId: vi.fn().mockResolvedValue('deadbeef'),
+}))
+
+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({})
+    })
+    describe('when active container is changed', () => {
+      describe('dash.js', () => {
+        beforeEach(async () => {
+          core.activeContainer.playback.name = 'dash'
+          core.activeContainer.playback.options.src = 'https://123.mpd'
+          plugin = new CmcdConfig(core)
+          core.trigger(Events.CORE_ACTIVE_CONTAINER_CHANGED)
+          await new Promise(resolve => setTimeout(resolve, 0))
+        })
+        it('should update DASH.js CMCD settings', () => {
+          expect(core.activePlayback.options).toEqual(expect.objectContaining({
+            dash: expect.objectContaining({
+              cmcd: expect.objectContaining({
+                enabled: true,
+                enabledKeys: CMCD_KEYS,
+              })
+            })
+          }))
+        })
+        it('should generate unique session ID', () => {
+          expect(core.activePlayback.options).toEqual(expect.objectContaining({
+            dash: expect.objectContaining({
+              cmcd: expect.objectContaining({
+                sid: '123',
+              })
+            })
+          }))
+        })
+        it('should compute content ID from source URL', () => {
+          expect(generateContentId).toHaveBeenCalledWith('https://123.mpd')
+          expect(core.activePlayback.options).toEqual(expect.objectContaining({
+            dash: expect.objectContaining({
+              cmcd: expect.objectContaining({
+                cid: 'deadbeef',
+              })
+            })
+          }))
+        })
+      })
+      describe('hls.js', () => {
+        beforeEach(async () => {
+          core.activeContainer.playback.name = 'hls'
+          core.activeContainer.playback.options.src = 'https://123.m3u8'
+          plugin = new CmcdConfig(core)
+          await new Promise(resolve => setTimeout(resolve, 0))
+          core.trigger(Events.CORE_ACTIVE_CONTAINER_CHANGED)
+          await new Promise(resolve => setTimeout(resolve, 0))
+        })
+        it('should update HLS.js CMCD settings', () => {
+          expect(core.activePlayback.options).toEqual(expect.objectContaining({
+            playback: expect.objectContaining({
+              hlsjsConfig: expect.objectContaining({
+                cmcd: expect.objectContaining({
+                  includeKeys: CMCD_KEYS,
+                  contentId: 'deadbeef',
+                  sessionId: '123',
+                })
+              })
+            })
+          }))
+          expect(generateContentId).toHaveBeenCalledWith('https://123.m3u8')
+        })
+      })
+    })
+  })
+  describe('custom content ID', () => {
+    beforeEach(async () => {
+      core = createMockCore({
+        cmcd: {
+          contentId: (src: string) => new Promise(resolve => {
+            const h = createHash('sha256')
+            h.on('readable', () => {
+              const data = h.read()
+              if (data) {
+                resolve(data.toString('hex'))
+              }
+            })
+            h.update(Buffer.from('1$' + src))
+            h.end()
+          }),
+        }
+      })
+      core.activePlayback.name = 'dash'
+      core.activePlayback.options.src = 'https://123.mpd'
+      plugin = new CmcdConfig(core)
+      core.trigger(Events.CORE_ACTIVE_CONTAINER_CHANGED)
+      await new Promise(resolve => setTimeout(resolve, 0))
+    })
+    it('should use custom content ID', () => {
+      expect(core.activePlayback.options).toEqual(expect.objectContaining({
+        dash: expect.objectContaining({
+          cmcd: expect.objectContaining({
+            cid: 'e287ea99b57c09b7a185aaaf36e075f2c0b346ce90aeced72976b1732678a8c6',
+          })
+        })
+      }))
+    })
+  })
+  describe('custom session ID', () => {
+    beforeEach(async () => {
+      core = createMockCore({
+        cmcd: { sessionId: '456' },
+      })
+      core.activePlayback.name = 'dash'
+      core.activePlayback.options.src = 'https://123.mpd'
+      plugin = new CmcdConfig(core)
+      core.trigger(Events.CORE_ACTIVE_CONTAINER_CHANGED)
+      await new Promise(resolve => setTimeout(resolve, 0))
+    })
+    it('should use custom session ID', () => {
+      expect(core.activePlayback.options).toEqual(expect.objectContaining({
+        dash: expect.objectContaining({
+          cmcd: expect.objectContaining({
+            sid: '456',
+          })
+        })
+      }))
+    })
+  })
+})

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

@@ -0,0 +1,13 @@
+export function generateSessionId(): string {
+  return window.crypto.randomUUID()
+}
+
+export function generateContentId(sourceUrl: string): Promise<string> {
+  return window.crypto.subtle.digest('SHA-1', new TextEncoder().encode(sourceUrl))
+    .then(buffer => {
+      const hex = Array.from(new Uint8Array(buffer))
+        .map(b => b.toString(16).padStart(2, '0'))
+        .join('')
+      return hex
+    })
+}

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