@gcorevideo/player 2.10.0 → 2.12.2

package/lib/utils/mediaSources.js

@@ -1,73 +1,76 @@
-import DashPlayback from '../plugins/dash-playback/DashPlayback';
-import HlsPlayback from '../plugins/hls-playback/HlsPlayback';
+import { canPlayDash, canPlayHls } from '../playback/index.js';
+/**
+ *
+ * @param sources
+ * @deprecated
+ * @returns
+ */
 export function buildSourcesSet(sources) {
     const sv = {
         dash: null,
-        master: null,
         hls: null,
         mpegts: null,
     };
     sources.forEach((ps) => {
-        const [s, t] = typeof ps === 'string' ? [ps, ''] : [ps.source, ps.mimeType];
-        if (DashPlayback.canPlay(s, t)) {
-            sv.dash = s;
+        const ws = wrapSource(ps);
+        if (canPlayDash(ws.source, ws.mimeType)) {
+            sv.dash = ws;
         }
-        else if (HlsPlayback.canPlay(s, t)) {
-            sv.hls = s;
+        else if (canPlayHls(ws.source, ws.mimeType)) {
+            sv.hls = ws;
         }
         else {
-            sv.master = s;
+            sv.mpegts = ws;
         }
     });
     return sv;
 }
-export function buildSourcesPriorityList(sources, priorityTransport = 'auto') {
-    const msl = [];
-    switch (priorityTransport) {
-        case 'dash':
-            addDash();
-            break;
-        case 'hls':
-            addHls();
-            break;
-        case 'mpegts':
-            addMpegts();
-            break;
-        case 'auto':
-            addDash();
-            addHls();
-            break;
-    }
-    Object.values(sources).forEach((s) => {
-        if (s) {
-            msl.push(s);
-        }
-    });
-    return msl;
-    function addMpegts() {
-        if (sources.mpegts) {
-            msl.push(sources.mpegts);
-            sources.mpegts = null;
+export function buildMediaSourcesList(sources, priorityTransport = 'auto') {
+    const [preferred, rest] = sources.reduce(priorityTransport === 'dash' || priorityTransport === 'auto'
+        ? (acc, item) => {
+            if (canPlayDash(item.source, item.mimeType)) {
+                acc[0].push(item);
+            }
+            else if (canPlayHls(item.source, item.mimeType)) {
+                acc[1].push(item);
+            }
+            return acc;
         }
+        : (acc, item) => {
+            if (canPlayHls(item.source, item.mimeType)) {
+                acc[0].push(item);
+            }
+            else if (canPlayDash(item.source, item.mimeType)) {
+                acc[1].push(item);
+            }
+            return acc;
+        }, [[], []]);
+    return preferred.concat(rest);
+}
+export function unwrapSource(s) {
+    return typeof s === 'string' ? s : s.source;
+}
+export function wrapSource(s) {
+    return typeof s === 'string' ? { source: s, mimeType: guessMimeType(s) } : s;
+}
+function guessMimeType(s) {
+    if (s.endsWith('.mpd')) {
+        return 'application/dash+xml';
     }
-    function addHls() {
-        if (sources.hls && HlsPlayback.canPlay(sources.hls, undefined)) {
-            msl.push(sources.hls);
-            sources.hls = null;
-        }
-        if (sources.master?.endsWith('.m3u8') &&
-            HlsPlayback.canPlay(sources.master, undefined)) {
-            msl.push(sources.master);
-            sources.master = null;
-        }
+    if (s.endsWith('.m3u8')) {
+        return 'application/vnd.apple.mpegurl';
     }
-    function addDash() {
-        if (sources.dash && DashPlayback.canPlay(sources.dash, undefined)) {
-            msl.push(sources.dash);
-            sources.dash = null;
-        }
+    throw new Error('Unrecognized media source type');
+}
+export function isDashSource(source, mimeType) {
+    if (mimeType) {
+        return mimeType === 'application/dash+xml';
     }
+    return source.endsWith('.mpd');
 }
-export function unwrapSource(s) {
-    return typeof s === 'string' ? s : s.source;
+export function isHlsSource(source, mimeType) {
+    if (mimeType) {
+        return ['application/vnd.apple.mpegurl', 'application/x-mpegURL'].includes(mimeType);
+    }
+    return source.endsWith('.m3u8');
 }

package/lib/utils/testUtils.d.ts

@@ -0,0 +1,3 @@
+export declare function isDashSource(source: string, mimeType?: string): boolean;
+export declare function isHlsSource(source: string, mimeType?: string): boolean;
+//# sourceMappingURL=testUtils.d.ts.map

package/lib/utils/testUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../../src/utils/testUtils.ts"],"names":[],"mappings":"AAAA,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,WAK7D;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,WAO5D"}

package/lib/utils/testUtils.js

@@ -0,0 +1,12 @@
+export function isDashSource(source, mimeType) {
+    if (mimeType) {
+        return mimeType === 'application/dash+xml';
+    }
+    return source.endsWith('.mpd');
+}
+export function isHlsSource(source, mimeType) {
+    if (mimeType) {
+        return ['application/vnd.apple.mpegurl', 'application/x-mpegURL'].includes(mimeType);
+    }
+    return source.endsWith('.m3u8');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcorevideo/player",
-  "version": "2.10.0",
+  "version": "2.12.2",
   "description": "Gcore JavaScript video player",
   "main": "dist/index.js",
   "type": "module",
@@ -17,8 +17,7 @@
     "format": "prettier --write src/",
     "lint": "oxlint -c ../../.oxlintrc.json --tsconfig=./tsconfig.json --fix --ignore-path=../../.gitignore src",
     "ship": "npm run build && npm run build:bundle && npm publish --access public",
-    "test": "vitest --environment=jsdom run",
-    "test:watch": "vitest --environment=jsdom watch"
+    "test": "NODE_OPTIONS='--trace-deprecation' vitest"
   },
   "repository": {
     "type": "git",
@@ -36,12 +35,15 @@
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
+    "@sinonjs/fake-timers": "^14.0.0",
     "@types/node": "^22.10.1",
+    "@types/sinonjs__fake-timers": "^8.1.5",
     "assert": "^2.1.0",
     "nodemon": "^3.1.9",
     "rollup": "^4.27.4",
     "rollup-plugin-polyfill-node": "^0.13.0",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.2",
+    "vitest": "^3.0.4"
   },
   "dependencies": {
     "@clappr/core": "^0.11.3",

package/src/Player.ts

@@ -15,17 +15,14 @@ import type {
   CoreOptions,
   CorePluginOptions,
 } from './internal.types.js'
-import type { PlayerMediaSource, PlayerPlugin } from './types.js'
+import type { PlayerMediaSourceDesc, PlayerPlugin } from './types.js'
 import { PlayerConfig, PlayerEvent } from './types.js'
-import DashPlayback from './plugins/dash-playback/DashPlayback.js'
-import HlsPlayback from './plugins/hls-playback/HlsPlayback.js'
 import {
-  buildSourcesPriorityList,
-  buildSourcesSet,
+  buildMediaSourcesList,
   unwrapSource,
+  wrapSource,
 } from './utils/mediaSources.js'
-
-// TODO implement transport retry/failover and fallback logic
+import { registerPlaybacks } from './playback/index.js'
 
 /**
  * @beta
@@ -48,7 +45,7 @@ const DEFAULT_OPTIONS: PlayerConfig = {
 /**
  * @beta
  */
-export type PlaybackModule = 'dash' | 'hls' | 'native'
+export type PlaybackModule = 'dash' | 'hls' | 'html5_video'
 
 type PluginOptions = Record<string, unknown>
 
@@ -120,10 +117,6 @@ export class Player {
       Log.setLevel(0)
     }
 
-    trace(`${T} init`, {
-      // TODO selected options
-    })
-
     this.configurePlaybacks()
     const coreOpts = this.buildCoreOptions(playerElement)
     const { core, container } = Loader.registeredPlugins
@@ -282,15 +275,12 @@ export class Player {
     }
     this.tunedIn = true
     const player = this.player
-    if (Browser.isiOS && player.core.activePlayback) {
-      player.core.activePlayback.$el.on('webkitendfullscreen', () => {
-        try {
-          player.core.handleFullscreenChange()
-        } catch (e) {
-          reportError(e)
-        }
-      })
-    }
+    this.bindContainerEventListeners(player)
+    player.core.on(
+      ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED,
+      () => this.bindContainerEventListeners(player),
+      null,
+    )
     player.core.on(
       ClapprEvents.CORE_SCREEN_ORIENTATION_CHANGED,
       ({ orientation }: { orientation: 'landscape' | 'portrait' }) => {
@@ -359,6 +349,7 @@ export class Player {
         clearTimeout(this.tuneInTimerId)
         this.tuneInTimerId = null
       }
+      // TODO ensure that CORE_ACTIVE_CONTAINER_CHANGED does not get caught before onReady
       setTimeout(() => this.tuneIn(), 0)
     },
     onResize: (newSize: { width: number; height: number }) => {
@@ -397,7 +388,11 @@ export class Player {
   }
 
   private buildCoreOptions(rootNode: HTMLElement): CoreOptions {
-    const source = this.selectMediaSource()
+    const sources = this.buildMediaSourcesList()
+    const source = sources[0]
+    trace(`${T} buildCoreOptions`, {
+      source
+    })
 
     this.rootNode = rootNode
 
@@ -405,7 +400,7 @@ export class Player {
       ...this.config, // plugin settings
       allowUserInteraction: true,
       autoPlay: false,
-      dash: this.config.dash,
+      dash: this.config.dash, // TODO move this to the playback section
       debug: this.config.debug || 'none',
       events: this.events,
       height: rootNode.clientHeight,
@@ -425,22 +420,36 @@ export class Player {
       playbackType: this.config.playbackType,
       width: rootNode.clientWidth,
       source: source ? unwrapSource(source) : undefined,
+      sources, // prevent Clappr from loading all sources simultaneously
       strings: this.config.strings,
     }
     return coreOptions
   }
 
   private configurePlaybacks() {
-    // TODO check if there are DASH and HLS sources and don't register the respective playbacks if not
-    Loader.registerPlayback(DashPlayback)
-    Loader.registerPlayback(HlsPlayback)
+    registerPlaybacks()
   }
 
-  // Select a single source to play according to the priority transport and the modules support
-  private selectMediaSource(): PlayerMediaSource | undefined {
-    return buildSourcesPriorityList(
-      buildSourcesSet(this.config.sources),
+  private buildMediaSourcesList(): PlayerMediaSourceDesc[] {
+    return buildMediaSourcesList(
+      // TODO ensure unsupported sources are filtered out
+      this.config.sources.map((s) => wrapSource(s)),
       this.config.priorityTransport,
-    )[0]
+    )
+  }
+
+  private bindContainerEventListeners(player: PlayerClappr) {
+    trace(`${T} bindContainerEventListeners`, {
+      activePlayback: player.core.activePlayback?.name,
+    })
+    if (Browser.isiOS && player.core.activePlayback) {
+      player.core.activePlayback.$el.on('webkitendfullscreen', () => {
+        try {
+          player.core.handleFullscreenChange()
+        } catch (e) {
+          reportError(e)
+        }
+      })
+    }
   }
 }

package/src/__tests__/Player.test.ts

@@ -0,0 +1,357 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  MockedObject,
+  vi,
+} from 'vitest'
+import FakeTimers from '@sinonjs/fake-timers'
+import { LogTracer, Logger, setTracer } from '@gcorevideo/utils'
+import { Loader, Player as PlayerClappr } from '@clappr/core'
+import EventLite from 'event-lite'
+
+import { Player } from '../Player'
+import { TransportPreference } from '../types'
+import { canPlayDash, canPlayHls } from '../playback'
+import { PlaybackErrorCode } from '../playback.types'
+import { isDashSource, isHlsSource } from '../utils/testUtils'
+
+function createMockClapprPlayer(): MockedObject<typeof PlayerClappr> {
+  return {
+    core: Object.assign(new EventLite(), {
+      activeContainer: null,
+      activePlayback: null,
+      load: vi.fn(),
+      resize: vi.fn(),
+      trigger(event: string, ...args: any[]) {
+        this.emit(event, ...args)
+      },
+    }),
+    attachTo: vi.fn(),
+  } as any
+}
+vi.mock('@clappr/core', async () => {
+  const imported = await import('@clappr/core')
+  return {
+    $: {
+      extend: vi.fn().mockImplementation((v, ...objs) => {
+        if (v !== true) {
+          objs.unshift(v)
+        }
+        return objs.reduce((acc, obj) => ({ ...acc, ...obj }), {})
+      }),
+    },
+    Browser: {
+      isiOS: false,
+    },
+    Events: imported.Events,
+    Loader: {
+      registerPlugin: vi.fn(),
+      registeredPlaybacks: [],
+      registeredPlugins: { core: [], container: [] },
+      unregisterPlugin: vi.fn(),
+    },
+    Player: vi.fn().mockImplementation(createMockClapprPlayer),
+    Utils: {
+      now: vi.fn().mockReturnValue(150),
+    },
+  }
+})
+
+vi.mock('../playback/index.ts', () => ({
+  registerPlaybacks: vi.fn(),
+  canPlayDash: vi.fn(),
+  canPlayHls: vi.fn(),
+}))
+
+beforeEach(() => {
+  vi.mocked(PlayerClappr).mockClear()
+  setTracer(new LogTracer('Player.test.js'))
+  vi.mocked(canPlayDash)
+    .mockReset()
+    .mockImplementation((source, mimeType) => isDashSource(source, mimeType))
+  vi.mocked(canPlayHls)
+    .mockReset()
+    .mockImplementation((source, mimeType) => isHlsSource(source, mimeType))
+})
+
+describe('Player', () => {
+  beforeEach(() => {
+    vi.mocked(Loader).registeredPlaybacks = [
+      new MockDashPlayback({} as any, {} as any),
+      new MockHlsPlayback({} as any, {} as any),
+      new MockHTML5VideoPlayback({} as any, {} as any),
+    ]
+  })
+  describe('selecting media source', () => {
+    describe.each([
+      [undefined, true, true, 'http://0eab.cdn.globo.com/1932-1447.mpd'],
+      ['dash', true, true, 'http://0eab.cdn.globo.com/1932-1447.mpd'],
+      ['dash', false, true, 'http://0eab.cdn.globo.com/1932-1447.m3u8'],
+      ['dash', false, false, undefined],
+      ['hls', true, true, 'http://0eab.cdn.globo.com/1932-1447.m3u8'],
+      ['hls', true, false, 'http://0eab.cdn.globo.com/1932-1447.mpd'],
+      ['hls', false, false, undefined],
+      ['auto', true, true, 'http://0eab.cdn.globo.com/1932-1447.mpd'],
+      ['auto', true, false, 'http://0eab.cdn.globo.com/1932-1447.mpd'],
+      ['auto', false, true, 'http://0eab.cdn.globo.com/1932-1447.m3u8'],
+      ['auto', false, false, undefined],
+    ])(
+      ' according to the preference (%s) and capabilities (dash=%s, hls=%s)',
+      (priority, dash, hls, source: string | undefined) => {
+        beforeEach(() => {
+          if (dash === false) {
+            vi.mocked(canPlayDash).mockReturnValue(false)
+          }
+          if (hls === false) {
+            vi.mocked(canPlayHls).mockReturnValue(false)
+          }
+          const player = new Player({
+            priorityTransport: priority as TransportPreference | undefined,
+            sources: [
+              { source: 'http://0eab.cdn.globo.com/1932-1447.mpd' },
+              {
+                source: 'http://0eab.cdn.globo.com/1932-1447.m3u8',
+                mimeType: 'application/vnd.apple.mpegurl',
+              },
+              {
+                source: 'http://0eab.cdn.globo.com/1932-1447_mpegts.m3u8',
+                mimeType: 'application/mpegts',
+              },
+            ],
+          })
+          const node = document.createElement('div')
+          player.attachTo(node)
+        })
+        afterEach(() => {
+          vi.mocked(canPlayDash).mockImplementation((source, mimeType) =>
+            isDashSource(source, mimeType),
+          )
+          vi.mocked(canPlayHls).mockImplementation((source, mimeType) =>
+            isHlsSource(source, mimeType),
+          )
+        })
+        it('should select the first supported available source', () => {
+          expect(PlayerClappr).toHaveBeenCalledWith(
+            expect.objectContaining({
+              source,
+            }),
+          )
+        })
+      },
+    )
+  })
+  describe('on media source failure', () => {
+    let player: Player
+    let clappr: any
+    let clock: ReturnType<typeof FakeTimers.install>
+    beforeEach(async () => {
+      Logger.enable('*')
+      clock = FakeTimers.install()
+      vi.mocked(Loader).registeredPlaybacks = [
+        MockDashPlayback,
+        MockHlsPlayback,
+        MockHTML5VideoPlayback,
+      ]
+      clappr = createMockClapprPlayer() as any
+      const playback = new MockDashPlayback({} as any, {} as any)
+      clappr.core.activePlayback = playback
+      vi.mocked(PlayerClappr).mockReturnValue(clappr as any)
+      player = new Player({
+        sources: [
+          {
+            source: 'http://0eab.cdn.globo.com/1932-1447.mpd',
+            mimeType: 'application/dash+xml',
+          },
+          {
+            source: 'http://0eab.cdn.globo.com/1932-1447.m3u8',
+            mimeType: 'application/vnd.apple.mpegurl',
+          },
+          // TODO configure as a separate fallback source
+          // {
+          //   source: 'http://0eab.cdn.globo.com/1932-1447_mpegts.m3u8',
+          //   mimeType: 'application/mpegts',
+          // },
+        ],
+      })
+      const node = document.createElement('div')
+      player.attachTo(node)
+      await clock.tickAsync(4000)
+      playback.trigger('playback:error', {
+        code: PlaybackErrorCode.MediaSourceUnavailable, // TODO rename to MediaSourceUnavailable
+        message: 'Failed to download http://0eab.cdn.globo.com/1932-1447.mpd',
+      })
+    })
+    afterEach(() => {
+      clock.uninstall()
+      Logger.enable('')
+    })
+    it('should try the next sources with a short delay', async () => {
+      await clock.tickAsync(400) // 250 initial + random jitter up to 150
+      expect(clappr.core.load).toHaveBeenCalledWith(
+        'http://0eab.cdn.globo.com/1932-1447.m3u8',
+        'application/vnd.apple.mpegurl',
+      )
+
+      // const playback = new MockHlsPlayback({} as any, {} as any)
+      // clappr.core.activePlayback = playback
+      // clappr.core.trigger('core:active:container:changed', {})
+      // await clock.tickAsync(300)
+      // clappr.core.load.mockClear()
+      // playback.trigger('playback:error', {
+      //   code: PlaybackErrorCode.MediaSourceUnavailable,
+      //   message: 'Failed to download http://0eab.cdn.globo.com/1932-1447.m3u8',
+      // })
+      // await clock.tickAsync(400)
+      // expect(clappr.core.load).toHaveBeenCalledWith(
+      //   'http://0eab.cdn.globo.com/1932-1447_mpegts.m3u8',
+      //   'application/mpegts',
+      // )
+    })
+    describe('when rolled over to the first source', () => {
+      beforeEach(async () => {
+        await clock.tickAsync(400) // initial retry has passed
+        clappr.core.load.mockClear()
+        const playback = new MockHlsPlayback({} as any, {} as any)
+        clappr.core.activePlayback = playback
+        clappr.core.trigger('core:active:container:changed', {})
+        await clock.tickAsync(300)
+        playback.trigger('playback:error', {
+          code: PlaybackErrorCode.MediaSourceUnavailable,
+          message:
+            'Failed to download http://0eab.cdn.globo.com/1932-1447.m3u8',
+        })
+        await clock.tickAsync(400)
+        clappr.core.load.mockClear()
+      })
+      afterEach(() => {
+        // Logger.enable('')
+      })
+      it('should start increasing the delay exponentially per source', async () => {
+        expect(clappr.core.load).not.toHaveBeenCalled()
+        await clock.tickAsync(250)
+        expect(clappr.core.load).toHaveBeenCalledWith(
+          'http://0eab.cdn.globo.com/1932-1447.mpd',
+          'application/dash+xml',
+        )
+        // )
+        // // TODO
+        // clappr.core.load.mockClear()
+        // const p2 = new MockDashPlayback({} as any, {} as any)
+        // clappr.core.activePlayback = p2
+        // clappr.core.trigger('core:active:container:changed', {})
+        // await clock.tickAsync(300)
+        // p2.trigger('playback:error', {
+        //   code: PlaybackErrorCode.MediaSourceUnavailable,
+        //   message: 'Failed to download http://0eab.cdn.globo.com/1932-1447.mpd',
+        // })
+        // await clock.tickAsync(400)
+        // expect(clappr.core.load).not.toHaveBeenCalledWith(
+        //   'http://0eab.cdn.globo.com/1932-1447.m3u8',
+        //   'application/vnd.apple.mpegurl',
+        // )
+        // await clock.tickAsync(250)
+        // expect(clappr.core.load).toHaveBeenCalledWith(
+        //   'http://0eab.cdn.globo.com/1932-1447.m3u8',
+        //   'application/vnd.apple.mpegurl',
+        // )
+      })
+    })
+  })
+})
+
+class MockPlayback extends EventLite {
+  constructor(
+    protected options: any,
+    readonly i18n: any,
+    protected playerError?: any,
+  ) {
+    super()
+  }
+
+  get name() {
+    return 'mock'
+  }
+
+  consent() {}
+
+  play() {}
+
+  pause() {}
+
+  stop() {}
+
+  destroy() {}
+
+  seek() {}
+
+  seekPercentage() {}
+
+  getDuration() {
+    return 100
+  }
+
+  enterPiP() {}
+
+  exitPiP() {}
+
+  getPlaybackType() {
+    return 'live'
+  }
+
+  getStartTimeOffset() {
+    return 0
+  }
+
+  getCurrentTime() {
+    return 0
+  }
+
+  isHighDefinitionInUse() {
+    return false
+  }
+
+  mute() {}
+
+  unmute() {}
+
+  volume() {}
+
+  configure() {}
+
+  attemptAutoPlay() {
+    return true
+  }
+
+  canAutoPlay() {
+    return true
+  }
+
+  onResize() {
+    return true
+  }
+
+  trigger(event: string, ...args: any[]) {
+    this.emit(event, ...args)
+  }
+}
+
+class MockDashPlayback extends MockPlayback {
+  get name() {
+    return 'dash'
+  }
+}
+
+class MockHlsPlayback extends MockPlayback {
+  get name() {
+    return 'hls'
+  }
+}
+
+class MockHTML5VideoPlayback extends MockPlayback {
+  get name() {
+    return 'html5_video'
+  }
+}

package/src/index.ts

@@ -8,8 +8,8 @@
  * @packageDocumentation
  */
 
-export { setTracer } from "@gcorevideo/utils";
-export * from "./Player.js"
-export * from "./playback.types.js";
-export * from "./types.js";
-export * from "./version.js";
+export { setTracer } from '@gcorevideo/utils'
+export * from './Player.js'
+export * from './playback.types.js'
+export * from './types.js'
+export * from './version.js'