@gcorevideo/player 2.23.3 → 2.24.0

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

package/src/testUtils.ts

@@ -41,7 +41,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 +51,7 @@ export function createMockPlayback(name = 'mock') {
     dvrInUse: false,
     isAudioOnly: false,
     levels: [],
+    options: { ...options },
     consent: vi.fn(),
     play: vi.fn(),
     pause: vi.fn(),
@@ -80,7 +81,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()