@gcorevideo/player 2.24.0 → 2.24.2

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

@@ -31,6 +31,15 @@ describe('BottomGear', () => {
       bottomGear.on(GearEvents.RENDERED, onGearRendered, null)
       core.emit(Events.CORE_READY)
       bottomGear.addItem('test', null).html('<button>test</button>')
+      const $moreOptions = $(
+        `<div>
+      <button id="more-options-back">&lt; back</button>
+      <ul class="gear-sub-menu" id="more-options"><li>Item</li><li>Item</li><li>Item</li></ul>
+    </div>`,
+      )
+      bottomGear
+        .addItem('more', $moreOptions)
+        .html('<button id="more-button">more options</button>')
     })
     it('should render', () => {
       expect(bottomGear.el.innerHTML).toMatchSnapshot()
@@ -99,6 +108,26 @@ describe('BottomGear', () => {
         )
       })
     })
+    describe('when submenu is open', () => {
+      beforeEach(async () => {
+        mediaControl.getAvailableHeight.mockReturnValue(198)
+        bottomGear.$el.find('#gear-button').click()
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        bottomGear.$el.find('#more-button').click()
+        await new Promise((resolve) => setTimeout(resolve, 0))
+      })
+      it('should show submenu', () => {
+        expect(
+          bottomGear.$el.find('#more-options').parent().css('display'),
+        ).not.toBe('none')
+      })
+      it('should align nicely within container', () => {
+        const submenu = bottomGear.$el.find('#more-options')
+        const wrapper = submenu.parent()
+        expect(wrapper.css('max-height')).toBe('174px') // available height minus vertical margins
+        expect(submenu.css('max-height')).toBe('130px') // wrapper height minus backlink height
+      })
+    })
   })
   describe('when there are no items', () => {
     beforeEach(() => {
@@ -128,9 +157,9 @@ describe('BottomGear', () => {
         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-options-wrapper').css('display'),
+        ).toBe('none')
         expect(bottomGear.$el.find('#gear-button').attr('aria-expanded')).toBe(
           'false',
         )
@@ -140,14 +169,12 @@ describe('BottomGear', () => {
     describe('when submenu is open', () => {
       beforeEach(async () => {
         // bottomGear.$el.find('#test-submenu').click()
-        bottomGear.$el.find('#test-options').show(); // as if it was clicked
+        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('#test-options').css('display')).toBe('none')
         expect(bottomGear.$el.find('#gear-options').css('display')).not.toBe(
           'none',
         )

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

@@ -5,7 +5,10 @@ exports[`BottomGear > basically > should render 1`] = `
     /assets/icons/new/gear.svg
 </button>
 <div class="gear-wrapper gcore-skin-bg-color" id="gear-options-wrapper" style="display: none;">
-    <ul class="gear-options-list" id="gear-options" role="menu"><li data-test=""><button>test</button></li></ul>
-</div>
+    <ul class="gear-options-list" id="gear-options" role="menu"><li data-test=""><button>test</button></li><li data-more=""><button id="more-button">more options</button></li></ul>
+<div class="gear-sub-menu-wrapper" style="display: none;">
+      <button id="more-options-back">&lt; back</button>
+      <ul class="gear-sub-menu" id="more-options"><li>Item</li><li>Item</li><li>Item</li></ul>
+    </div></div>
 "
 `;

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

@@ -1,10 +1,10 @@
-import {
-  Core,
-  CorePlugin,
-  Events,
-} from '@clappr/core'
+import { $, Container, Core, CorePlugin, Events } from '@clappr/core'
 
-import { generateContentId, generateSessionId } from './utils'
+// 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',
@@ -36,12 +36,14 @@ export type CmcdConfigPluginSettings = {
    */
   sessionId: string
   /**
-   * Content ID, either constant or derived from current source.
-   * If ommitted, a SHA-1 hash of current source URL will be used
+   * Content ID,
+   * If ommitted, the pathname part of the first source URL will be used
    */
-  contentId?: string | ((sourceUrl: string, mimeType?: string) => (string | Promise<string>))
+  contentId?: string
 }
 
+// const T = 'plugins.cmcd'
+
 /**
  * A `PLUGIN` that configures CMCD for playback
  * @beta
@@ -61,63 +63,73 @@ export class CmcdConfig extends CorePlugin {
     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_ACTIVE_CONTAINER_CHANGED, () =>
-      this.updateSettings(),
+    this.listenTo(this.core, Events.CORE_CONTAINERS_CREATED, () =>
+      this.updateSettings(this.core.containers[0]),
     )
   }
 
-  async getIds(): Promise<{ sid: string; cid: string }> {
+  exportIds(): { sid: string; cid: string } {
     return {
       sid: this.sid,
-      cid: await this.ensureContentId(),
+      cid: this.cid,
     }
   }
 
-  private updateSettings() {
-    switch (this.core.activeContainer.playback.name) {
+  private async updateSettings(container: Container) {
+    switch (container.playback.name) {
       case 'dash':
-        this.updateDashjsSettings()
+        $.extend(true, container.playback.options, {
+          dash: {
+            cmcd: {
+              enabled: true,
+              enabledKeys: CMCD_KEYS,
+              sid: this.sid,
+              cid: this.cid,
+            },
+          },
+        })
         break
       case 'hls':
-        this.updateHlsjsSettings()
+        $.extend(true, container.playback.options, {
+          playback: {
+            hlsjsConfig: {
+              cmcd: {
+                includeKeys: CMCD_KEYS,
+                sessionId: this.sid,
+                contentId: this.cid,
+              },
+            },
+          },
+        })
         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,
+  private updateHlsjsSettings(
+    options: CoreOptions,
+    { cid, sid }: { cid: string; sid: string },
+  ) {
+    $.extend(true, options, {
       playback: {
         hlsjsConfig: {
-          ...(options.playback?.hlsjsConfig ?? {}),
           cmcd: {
             includeKeys: CMCD_KEYS,
             sessionId: sid,
@@ -125,24 +137,12 @@ export class CmcdConfig extends CorePlugin {
           },
         },
       },
-    }
+    })
   }
 
-  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))
+  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

@@ -3,13 +3,9 @@ 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 = [
@@ -38,69 +34,78 @@ describe('CmcdConfig', () => {
   let plugin: CmcdConfig
   describe('basically', () => {
     beforeEach(() => {
-      core = createMockCore({})
+      core = createMockCore({
+        sources: [
+          {
+            source: 'https://zulu.com/123.mpd',
+            mimeType: 'application/dash+xml',
+          },
+        ],
+      })
     })
-    describe('when active container is changed', () => {
+    describe('when container is created', () => {
       describe('dash.js', () => {
         beforeEach(async () => {
-          core.activeContainer.playback.name = 'dash'
-          core.activeContainer.playback.options.src = 'https://123.mpd'
+          core.containers[0].playback.name = 'dash'
           plugin = new CmcdConfig(core)
-          core.trigger(Events.CORE_ACTIVE_CONTAINER_CHANGED)
-          await new Promise(resolve => setTimeout(resolve, 0))
+          core.trigger(Events.CORE_CONTAINERS_CREATED)
+          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,
-              })
-            })
-          }))
+          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.activePlayback.options).toEqual(expect.objectContaining({
-            dash: expect.objectContaining({
-              cmcd: expect.objectContaining({
-                sid: '123',
-              })
-            })
-          }))
+          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(generateContentId).toHaveBeenCalledWith('https://123.mpd')
-          expect(core.activePlayback.options).toEqual(expect.objectContaining({
-            dash: expect.objectContaining({
-              cmcd: expect.objectContaining({
-                cid: 'deadbeef',
-              })
-            })
-          }))
+          expect(core.containers[0].playback.options).toEqual(
+            expect.objectContaining({
+              dash: expect.objectContaining({
+                cmcd: expect.objectContaining({
+                  cid: '/123.mpd',
+                }),
+              }),
+            }),
+          )
         })
       })
       describe('hls.js', () => {
         beforeEach(async () => {
-          core.activeContainer.playback.name = 'hls'
-          core.activeContainer.playback.options.src = 'https://123.m3u8'
+          core.containers[0].playback.name = 'hls'
           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))
+          core.trigger(Events.CORE_CONTAINERS_CREATED)
         })
         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')
+          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',
+                  }),
+                }),
+              }),
+            }),
+          )
         })
       })
     })
@@ -109,54 +114,61 @@ describe('CmcdConfig', () => {
     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()
-          }),
-        }
+          contentId:
+            'e287ea99b57c09b7a185aaaf36e075f2c0b346ce90aeced72976b1732678a8c6',
+        },
+        sources: [
+          {
+            source: 'https://zulu.com/123.mpd',
+            mimeType: 'application/dash+xml',
+          },
+        ],
       })
-      core.activePlayback.name = 'dash'
-      core.activePlayback.options.src = 'https://123.mpd'
+      core.containers[0].playback.name = 'dash'
+      core.containers[0].playback.options.src = 'https://123.mpd'
       plugin = new CmcdConfig(core)
-      core.trigger(Events.CORE_ACTIVE_CONTAINER_CHANGED)
-      await new Promise(resolve => setTimeout(resolve, 0))
+      core.trigger(Events.CORE_CONTAINERS_CREATED)
+      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',
-          })
-        })
-      }))
+      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.activePlayback.name = 'dash'
-      core.activePlayback.options.src = 'https://123.mpd'
+      core.containers[0].playback.name = 'dash'
+      core.containers[0].playback.options.src = 'https://123.mpd'
       plugin = new CmcdConfig(core)
-      core.trigger(Events.CORE_ACTIVE_CONTAINER_CHANGED)
-      await new Promise(resolve => setTimeout(resolve, 0))
+      core.trigger(Events.CORE_CONTAINERS_CREATED)
+      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',
-          })
-        })
-      }))
+      expect(core.containers[0].playback.options).toEqual(
+        expect.objectContaining({
+          dash: expect.objectContaining({
+            cmcd: expect.objectContaining({
+              sid: '456',
+            }),
+          }),
+        }),
+      )
     })
   })
 })

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

@@ -1,13 +1,3 @@
 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/MediaControl.ts

@@ -531,6 +531,18 @@ export class MediaControl extends UICorePlugin {
     this.show()
   }
 
+  /**
+   *
+   * @returns  Vertical space available to render something on top of the container.
+   * @remarks
+   * This takes into account the container height and excludes the height of the controls bar
+   */
+  getAvailableHeight() {
+    return (
+      this.core.$el.height() - this.$el.find('.media-control-layer').height()
+    )
+  }
+
   /**
    * Set the initial volume, which is preserved when playback is interrupted by an advertisement
    */
@@ -645,12 +657,12 @@ export class MediaControl extends UICorePlugin {
   }
 
   private mousemoveOnSeekBar(event: MouseEvent) {
-    const offset = MediaControl.getPageX(event) -
-      (this.$seekBarContainer.offset().left ?? 0) // TODO check if the result can be negative
-    const hoverOffset =
-      offset -
-      (this.$seekBarHover.width() ?? 0) / 2
-    const pos = offset ? Math.min(1, Math.max(offset / this.$seekBarContainer.width(), 0)) : 0
+    const offset =
+      MediaControl.getPageX(event) - (this.$seekBarContainer.offset().left ?? 0) // TODO check if the result can be negative
+    const hoverOffset = offset - (this.$seekBarHover.width() ?? 0) / 2
+    const pos = offset
+      ? Math.min(1, Math.max(offset / this.$seekBarContainer.width(), 0))
+      : 0
     if (this.settings.seekEnabled) {
       // TODO test that it works when the element does not exist
       this.$seekBarHover.css({ left: hoverOffset })

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),
     },
@@ -125,6 +126,8 @@ export function createMockMediaControl(core: any) {
   // @ts-ignore
   mediaControl.container = core.activeContainer
   // @ts-ignore
+  mediaControl.getAvailableHeight = vi.fn().mockReturnValue(300)
+  // @ts-ignore
   mediaControl.toggleElement = vi.fn()
   vi.spyOn(mediaControl, 'trigger')
   core.$el.append(mediaControl.$el)