@gcorevideo/player 2.3.1 → 2.4.0

package/src/Player.ts

@@ -13,19 +13,20 @@ import type {
   CorePlayerEvents,
   CoreOptions,
   CorePluginOptions,
+  PlayerMediaSource,
 } from './internal.types.js'
 import type {
   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'
@@ -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
@@ -404,63 +408,8 @@ export class Player {
     )
   }
 
-  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,3 +1,5 @@
+import { PlayerMediaSource } from "./internal.types"
+
 export type PlayerDebugTag = 'all' | 'clappr' | 'dash' | 'hls' | 'none'
 export type PlayerDebugSettings = PlayerDebugTag | boolean
 
@@ -21,6 +23,7 @@ export type PlayerConfig = {
   pluginSettings?: Record<string, unknown>
   poster?: string
   priorityTransport?: TransportPreference
+  sources: PlayerMediaSource[];
   strings: TranslationSettings
 }
 
@@ -104,8 +107,6 @@ export type QualityLevelInfo = {
   bitrate: number
 }
 
-export type BitrateInfo = QualityLevelInfo
-
 export enum PlayerEvent {
   Ready = 'ready',
   Play = 'play',

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;

package/src/utils/mediaSources.ts

@@ -0,0 +1,104 @@
+import { PlayerMediaSource } from '../internal.types'
+import DashPlayback from '../plugins/dash-playback/DashPlayback'
+import HlsPlayback from '../plugins/hls-playback/HlsPlayback'
+import { StreamMediaSource, TransportPreference } from '../types'
+
+export type SourceVariants = {
+  dash: string | null
+  master: string | null
+  hls: string | null
+  mpegts: string | null
+}
+
+export function buildSourcesSet(sources: PlayerMediaSource[]): SourceVariants {
+  const sv: SourceVariants = {
+    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: SourceVariants,
+  priorityTransport: TransportPreference = 'auto',
+): PlayerMediaSource[] {
+  const msl: string[] = []
+  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: PlayerMediaSource): string {
+  return typeof s === 'string' ? s : s.source
+}
+
+export function buildGcoreStreamSourcesList(
+  ms: StreamMediaSource,
+  priorityTransport: TransportPreference,
+): PlayerMediaSource[] {
+  const sources: Record<'dash' | 'master' | 'hls' | 'mpegts', string | null> = {
+    dash: ms.sourceDash,
+    master: ms.source,
+    hls: ms.hlsCmafUrl,
+    mpegts: ms.hlsMpegtsUrl,
+  }
+  return buildSourcesPriorityList(sources, priorityTransport)
+}