@gcorevideo/player 2.3.0 → 2.4.0

package/lib/utils/mediaSources.js

@@ -0,0 +1,82 @@
+import DashPlayback from '../plugins/dash-playback/DashPlayback';
+import HlsPlayback from '../plugins/hls-playback/HlsPlayback';
+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;
+        }
+        else if (HlsPlayback.canPlay(s, t)) {
+            sv.hls = s;
+        }
+        else {
+            sv.master = s;
+        }
+    });
+    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;
+        }
+    }
+    function addHls() {
+        if (sources.hls && HlsPlayback.canPlay(sources.hls)) {
+            msl.push(sources.hls);
+            sources.hls = null;
+        }
+        if (sources.master?.endsWith('.m3u8') &&
+            HlsPlayback.canPlay(sources.master)) {
+            msl.push(sources.master);
+            sources.master = null;
+        }
+    }
+    function addDash() {
+        if (sources.dash && DashPlayback.canPlay(sources.dash)) {
+            msl.push(sources.dash);
+            sources.dash = null;
+        }
+    }
+}
+export function unwrapSource(s) {
+    return typeof s === 'string' ? s : s.source;
+}
+export function buildGcoreStreamSourcesList(ms, priorityTransport) {
+    const sources = {
+        dash: ms.sourceDash,
+        master: ms.source,
+        hls: ms.hlsCmafUrl,
+        mpegts: ms.hlsMpegtsUrl,
+    };
+    return buildSourcesPriorityList(sources, priorityTransport);
+}

package/package.json

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

package/src/Player.ts

@@ -13,19 +13,20 @@ import type {
   CorePlayerEvents,
   CoreOptions,
   CorePluginOptions,
+  PlayerMediaSource,
 } from './internal.types.js'
 import type {
-  BitrateInfo,
   PlaybackType,
   PlayerPlugin,
+  QualityLevelInfo,
   StreamMediaSource,
+  TransportPreference,
 } from './types.js'
 import { reportError, trace } from './trace/index.js'
 import { PlayerConfig, PlayerEvent } from './types.js'
 import DashPlayback from './plugins/dash-playback/DashPlayback.js'
 import HlsPlayback from './plugins/hls-playback/HlsPlayback.js'
-
-// import '../assets/style/main.scss' // TODO check if needed
+import { buildSourcesPriorityList, buildSourcesSet, unwrapSource } from './utils/mediaSources.js'
 
 // TODO implement transport retry/failover and fallback logic
 
@@ -35,15 +36,16 @@ const T = 'GPlayer'
 
 const DEFAULT_OPTIONS: PlayerConfig = {
   autoPlay: false,
-  mute: false,
+  debug: 'none',
   loop: false,
+  mute: false,
   multisources: [],
   playbackType: 'vod',
-  priorityTransport: 'dash',
-  debug: 'none',
   pluginSettings: {},
-  strings: {},
   poster: '',
+  priorityTransport: 'dash',
+  sources: [],
+  strings: {},
 }
 
 export type PlaybackModule = 'dash' | 'hls' | 'native'
@@ -54,7 +56,7 @@ type PluginOptions = Record<string, unknown>
  * @beta
  */
 export class Player {
-  private bitrateInfo: BitrateInfo | null = null
+  private qLevel: QualityLevelInfo | null = null
 
   private config: PlayerConfig = DEFAULT_OPTIONS
 
@@ -91,8 +93,8 @@ export class Player {
     return this.player.core.activePlayback.options.src
   }
 
-  get bitrate(): BitrateInfo | null {
-    return this.bitrateInfo
+  get bitrate(): QualityLevelInfo | null {
+    return this.qLevel
   }
 
   get hd() {
@@ -162,7 +164,7 @@ export class Player {
       clearTimeout(this.tuneInTimerId)
       this.tuneInTimerId = null
     }
-    this.bitrateInfo = null
+    this.qLevel = null
   }
 
   pause() {
@@ -236,7 +238,6 @@ export class Player {
     player.core.on(
       ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED,
       () => {
-        // this.trigger(Events.ContainerChanged)
         this.bindBitrateChangeHandler()
       },
       null,
@@ -345,16 +346,20 @@ export class Player {
   }
 
   private buildCoreOptions(rootNode: HTMLElement): CoreOptions {
-    const multisources = this.config.multisources
-    const mainSource =
-      this.config.playbackType === 'live'
-        ? multisources.find((ms) => ms.live !== false)
-        : multisources[0]
-    const mediaSources = mainSource
-      ? this.buildMediaSourcesList(mainSource)
-      : []
+    // TODO extract
+    // const multisources = this.config.multisources
+    // const mainSource =
+    //   this.config.playbackType === 'live'
+    //     ? multisources.find((ms) => ms.live !== false)
+    //     : multisources[0]
+    // const mediaSources = mainSource
+    //   ? this.buildMediaSourcesList(mainSource)
+    //   : []
     // const mainSourceUrl = mediaSources[0];
-    const poster = mainSource?.poster ?? this.config.poster
+    // const poster = mainSource?.poster ?? this.config.poster
+    const poster = this.config.poster
+
+    const source = this.selectMediaSource(); // TODO
 
     this.rootNode = rootNode
 
@@ -366,7 +371,6 @@ export class Player {
       events: this.events,
       height: rootNode.clientHeight,
       loop: this.config.loop,
-      multisources,
       mute: this.config.mute,
       playback: {
         controls: false,
@@ -382,8 +386,8 @@ export class Player {
       playbackType: this.config.playbackType,
       poster,
       width: rootNode.clientWidth,
-      // source: mainSourceUrl,
-      sources: mediaSources,
+      source: source ? unwrapSource(source) : undefined,
+      // sources: mediaSources,
       strings: this.config.strings,
     }
     return coreOptions
@@ -398,69 +402,14 @@ export class Player {
   private bindBitrateChangeHandler() {
     this.player?.core.activeContainer.on(
       ClapprEvents.CONTAINER_BITRATE,
-      (bitrate: BitrateInfo) => {
-        this.bitrateInfo = bitrate
+      (bitrate: QualityLevelInfo) => {
+        this.qLevel = bitrate
       },
     )
   }
 
-  private buildMediaSourcesList(ms: StreamMediaSource): string[] {
-    const msl: string[] = []
-    const sources: Record<'dash' | 'master' | 'hls' | 'mpegts', string | null> =
-      {
-        dash: ms.sourceDash,
-        master: ms.source,
-        hls: ms.hlsCmafUrl,
-        mpegts: ms.hlsMpegtsUrl,
-      }
-    switch (this.config.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
-      }
-    }
-
-    function addHls() {
-      if (sources.hls && HlsPlayback.canPlay(sources.hls)) {
-        msl.push(sources.hls)
-        sources.hls = null
-      }
-      if (
-        sources.master?.endsWith('.m3u8') &&
-        HlsPlayback.canPlay(sources.master)
-      ) {
-        msl.push(sources.master)
-        sources.master = null
-      }
-    }
-
-    function addDash() {
-      if (sources.dash && DashPlayback.canPlay(sources.dash)) {
-        msl.push(sources.dash)
-        sources.dash = null
-      }
-    }
+  // TODO 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), this.config.priorityTransport)[0]
   }
 }

package/src/internal.types.ts

@@ -18,7 +18,7 @@ type MediacontrolStyles = {
   buttons?: string;
 }
 
-type PlayerMediaSourceDesc = {
+export type PlayerMediaSourceDesc = {
   mimeType?: string;
   source: string;
 }
@@ -116,7 +116,7 @@ export type CoreOptions = {
   maxBufferLength?: number;
   mediacontrol?: MediacontrolStyles;
   mimeType?: string;
-  multisources: StreamMediaSource[];
+  // multisources: StreamMediaSource[];
   mute?: boolean;
   persistConfig?: boolean;
   preload?: "auto" | "metadata" | "none";

package/src/plugins/dash-playback/DashPlayback.ts

@@ -788,6 +788,7 @@ DashPlayback.canPlay = function (resource, mimeType) {
   const resourceParts = resource.split('?')[0].match(/.*\.(.*)$/) || [];
   const isDash = ((resourceParts.length > 1 && resourceParts[1].toLowerCase() === 'mpd') ||
     mimeType === 'application/dash+xml' || mimeType === 'video/mp4');
+  // TODO check
   const ctor = window.MediaSource || ('WebKitMediaSource' in window ? window.WebKitMediaSource : undefined);
   const hasSupport = typeof ctor === 'function';
   trace(`${T} canPlay`, {hasSupport, isDash, resource});

package/src/types.ts

@@ -1,107 +1,111 @@
-export type PlayerDebugTag = 'all' | 'clappr' | 'dash' | 'hls' | 'none';
-export type PlayerDebugSettings = PlayerDebugTag | boolean;
+import { PlayerMediaSource } from "./internal.types"
 
-export type PlaybackType = 'live' | 'vod';
-export type MediaTransport = 'dash' | 'hls' | 'mpegts';
-export type TransportPreference = MediaTransport | 'auto';
+export type PlayerDebugTag = 'all' | 'clappr' | 'dash' | 'hls' | 'none'
+export type PlayerDebugSettings = PlayerDebugTag | boolean
+
+export type PlaybackType = 'live' | 'vod'
+export type MediaTransport = 'dash' | 'hls' | 'mpegts'
+export type TransportPreference = MediaTransport | 'auto'
 
 export type PlayerPlugin = {
-  new(...args: any[]): unknown;
-  type: string; // 'core' | 'container' | 'playback';
+  new (...args: any[]): unknown
+  type: string // 'core' | 'container' | 'playback';
 }
 
 export type PlayerConfig = {
-  autoPlay?: boolean;
-  debug?: PlayerDebugSettings;
-  language?: string;
-  loop?: boolean;
-  multisources: StreamMediaSource[]; // TODO rename sources or better split the sources and the source description settings
-  mute?: boolean;
-  playbackType?: PlaybackType;
-  pluginSettings?: Record<string, unknown>;
-  poster?: string;
-  priorityTransport?: TransportPreference;
-  strings: TranslationSettings;
+  autoPlay?: boolean
+  debug?: PlayerDebugSettings
+  language?: string
+  loop?: boolean
+  multisources: StreamMediaSource[] // TODO rename sources or better split the sources and the source description settings
+  mute?: boolean
+  playbackType?: PlaybackType
+  pluginSettings?: Record<string, unknown>
+  poster?: string
+  priorityTransport?: TransportPreference
+  sources: PlayerMediaSource[];
+  strings: TranslationSettings
 }
 
 export type PlayerOptionsThumbnails = {
-  sprite?: string | null;
-  vtt?: string | null;
-
+  sprite?: string | null
+  vtt?: string | null
 }
 
 export type ContextMenuSettings = {
-  preventShowContextMenu?: boolean;
+  preventShowContextMenu?: boolean
 }
 
-type LangTag = string;
-type TranslationKey = string;
+type LangTag = string
+type TranslationKey = string
 
 export type BroadcastSettings = {
-  status?: 'live' | 'noActiveStreams';
+  status?: 'live' | 'noActiveStreams'
 }
 
-export type ClipsPluginOptions = Record<string, unknown>; // TODO
+export type ClipsPluginOptions = Record<string, unknown> // TODO
 
 export type PlaybackSettings = {
-  hlsjsConfig?: Record<string, unknown>;
-  playInline?: boolean;
-  preload?: 'auto' | 'metadata' | 'none';
-  triggerFatalErrorOnResourceDenied?: boolean;
+  hlsjsConfig?: Record<string, unknown>
+  playInline?: boolean
+  preload?: 'auto' | 'metadata' | 'none'
+  triggerFatalErrorOnResourceDenied?: boolean
 }
 
-export type DashSettings = Record<string, unknown>; //
+export type DashSettings = Record<string, unknown> //
 
 // TODO consult with the Broadcaster team
 // TODO turn into camel case convert at user level
 export type StreamMediaSourceDto = {
-  description: string;
-  dvr: boolean;
-  hls_cmaf_url?: string;
-  hls_mpegts_url?: string;
-  id: number;
-  live: boolean;
-  priority_transport: TransportPreference;
-  poster: string | null;
-  projection: ProjectionType | null;
-  screenshot: string | null;
+  description: string
+  dvr: boolean
+  hls_cmaf_url?: string
+  hls_mpegts_url?: string
+  id: number
+  live: boolean
+  priority_transport: TransportPreference
+  poster: string | null
+  projection: ProjectionType | null
+  screenshot: string | null
   source: string
-  source_dash: string | null;
-  sprite: string | null;
-  title: string;
-  vtt: string | null;
+  source_dash: string | null
+  sprite: string | null
+  title: string
+  vtt: string | null
 }
 
 // TODO split into sources and source attributes
 export type StreamMediaSource = {
-  description: string;
-  dvr: boolean;
-  hlsCmafUrl: string | null;
-  hlsMpegtsUrl: string | null;
-  id: number;
-  live: boolean;
-  priorityTransport: TransportPreference;
-  poster: string | null;
-  projection: ProjectionType | null;
-  screenshot: string | null;
-  source: string | null;
-  sourceDash: string | null;
-  sprite: string | null;
-  title: string;
-  vtt: string | null;
+  description: string
+  dvr: boolean
+  hlsCmafUrl: string | null
+  hlsMpegtsUrl: string | null
+  id: number
+  live: boolean
+  priorityTransport: TransportPreference
+  poster: string | null
+  projection: ProjectionType | null
+  screenshot: string | null
+  source: string | null
+  sourceDash: string | null
+  sprite: string | null
+  title: string
+  vtt: string | null
 }
 
-export type SrcProjectionType = 'regular' | '360' | 'vr180' | 'vr360tb';
-export type ProjectionType = '360' | '180' | '360_TB';
+export type SrcProjectionType = 'regular' | '360' | 'vr180' | 'vr360tb'
+export type ProjectionType = '360' | '180' | '360_TB'
 
-export type TranslationSettings = Partial<Record<LangTag, Record<TranslationKey, string>>>;
+export type TranslationSettings = Partial<
+  Record<LangTag, Record<TranslationKey, string>>
+>
 
-export type BitrateInfo = {
-  height: number;
-  width: number;
-  bitrate: number;
-  level: number;
-};
+export type QualityLevelInfo = {
+  level: number
+  width: number
+  height: number
+  bitrate: number
+}
 
 export enum PlayerEvent {
   Ready = 'ready',

package/src/typings/@clappr/core/player.d.ts

@@ -1,73 +1,73 @@
 import "@clappr/core";
 
 declare module "@clappr/core" {
-    type MediacontrolStyles = {
-        // TODO
-    }
+    // type MediacontrolStyles = {
+    //     // TODO
+    // }
 
-    type PlayerMediaSourceDesc = {
-        mimeType?: string;
-        source: string;
-    }
+    // type PlayerMediaSourceDesc = {
+    //     mimeType?: string;
+    //     source: string;
+    // }
 
-    type PlayerMediaSource = string | PlayerMediaSourceDesc;
+    // type PlayerMediaSource = string | PlayerMediaSourceDesc;
 
-    type HlsjsConfig = {
-        debug?: boolean;
-        startLevel?: number;
-    } & Record<string, unknown>;
+    // type HlsjsConfig = {
+    //     debug?: boolean;
+    //     startLevel?: number;
+    // } & Record<string, unknown>;
 
-    type ShakaConfig = Record<string, unknown>;
+    // type ShakaConfig = Record<string, unknown>;
 
-    declare type CorePlaybackConfig = {
-        // audioOnly: boolean;
-        disableContextMenu?: boolean;
-        controls?: boolean;
-        crossOrigin?: 'anonymous' | 'use-credentials';
-        // enableAutomaticABR?: boolean;
-        externalTracks?: unknown[]; // TODO
-        hlsjsConfig?: HlsjsConfig;
-        // initialBandwidthEstimate?: number;
-        // maxBufferLength?: number;
-        // maxBackBufferLength?: number;
-        // minBufferLength?: number;
-        minimumDvrSize?: number; // TODO ?
-        // maxAdaptiveBitrate?: number;
-        // maxAdaptiveVideoDimensions?: unknown; // TODO
-        playInline: boolean;
-        preload?: 'metadata' | 'auto' | 'none';
-        // preferredTextLanguage?: string;
-        // preferredAudioLanguage?: string;
-        shakaConfiguration?: ShakaConfig;
-    }
+    // declare type CorePlaybackConfig = {
+    //     // audioOnly: boolean;
+    //     disableContextMenu?: boolean;
+    //     controls?: boolean;
+    //     crossOrigin?: 'anonymous' | 'use-credentials';
+    //     // enableAutomaticABR?: boolean;
+    //     externalTracks?: unknown[]; // TODO
+    //     hlsjsConfig?: HlsjsConfig;
+    //     // initialBandwidthEstimate?: number;
+    //     // maxBufferLength?: number;
+    //     // maxBackBufferLength?: number;
+    //     // minBufferLength?: number;
+    //     minimumDvrSize?: number; // TODO ?
+    //     // maxAdaptiveBitrate?: number;
+    //     // maxAdaptiveVideoDimensions?: unknown; // TODO
+    //     playInline: boolean;
+    //     preload?: 'metadata' | 'auto' | 'none';
+    //     // preferredTextLanguage?: string;
+    //     // preferredAudioLanguage?: string;
+    //     shakaConfiguration?: ShakaConfig;
+    // }
 
-    type ErrorLevel = "FATAL" | "WARN" | "INFO";
+    // type ErrorLevel = "FATAL" | "WARN" | "INFO";
 
-    declare type EventSpec = string;
-    declare type EventHandlerSpec = string;
-    declare type PluginEventsConfig = Record<EventSpec, EventHandlerSpec>;
+    // declare type EventSpec = string;
+    // declare type EventHandlerSpec = string;
+    // declare type PluginEventsConfig = Record<EventSpec, EventHandlerSpec>;
 
-    declare type PlaybackError = {
-        code?: number | string;
-        description: string;
-        raw?: MediaError;
-        level?: ErrorLevel;
-    }
+    // declare type PlaybackError = {
+    //     code?: number | string;
+    //     description: string;
+    //     raw?: MediaError;
+    //     level?: ErrorLevel;
+    // }
 
-    declare type CorePlayerEvents = {
-        // TODO event arguments types
-        onReady?: () => void;
-        onResize?: (data: { width: number; height: number }) => void;
-        onPlay?: (metadata: unknown) => void;
-        onPause?: (metadata: unknown) => void;
-        onStop?: (metadata: unknown) => void;
-        onEnded?: () => void;
-        onSeek?: (currentTime: number) => void;
-        onError?: (err: PlaybackError) => void;
-        onTimeUpdate?: (timeProgress: { current: number; total: number }) => void;
-        onVolumeUpdate?: (value: number) => void;
-        onSubtitleAvailable?: () => void;
-    }
+    // declare type CorePlayerEvents = {
+    //     // TODO event arguments types
+    //     onReady?: () => void;
+    //     onResize?: (data: { width: number; height: number }) => void;
+    //     onPlay?: (metadata: unknown) => void;
+    //     onPause?: (metadata: unknown) => void;
+    //     onStop?: (metadata: unknown) => void;
+    //     onEnded?: () => void;
+    //     onSeek?: (currentTime: number) => void;
+    //     onError?: (err: PlaybackError) => void;
+    //     onTimeUpdate?: (timeProgress: { current: number; total: number }) => void;
+    //     onVolumeUpdate?: (value: number) => void;
+    //     onSubtitleAvailable?: () => void;
+    // }
 
     declare type ClapprVersionSpec = {
         min: string;