@gcorevideo/player 2.10.0 → 2.12.2

package/src/internal.types.ts

@@ -5,6 +5,7 @@ import type {
 } from "@clappr/core";
 
 import { PlaybackType, PlayerDebugTag, PlayerMediaSource } from "./types";
+import { PlaybackError } from "./playback.types";
 
 type ExternalTrack = {
   kind?: "subtitles" | "captions";
@@ -56,18 +57,6 @@ export interface CorePlaybackConfig {
   shakaConfiguration?: ShakaConfig;
 }
 
-type ErrorLevel = "FATAL" | "WARN" | "INFO";
-
-/**
- * @internal
- */
-export type PlaybackError = {
-  code?: number | string;
-  description: string;
-  raw?: MediaError;
-  level?: ErrorLevel;
-}
-
 /**
  * @internal
  */

package/src/playback/index.ts

@@ -0,0 +1,17 @@
+import { Loader } from '@clappr/core'
+
+import DashPlayback from '../plugins/dash-playback/DashPlayback.js'
+import HlsPlayback from '../plugins/hls-playback/HlsPlayback.js'
+
+export function registerPlaybacks() {
+  Loader.registerPlayback(DashPlayback)
+  Loader.registerPlayback(HlsPlayback)
+}
+
+export function canPlayDash(source: string, mimeType?: string) {
+  return DashPlayback.canPlay(source, mimeType)
+}
+
+export function canPlayHls(source: string, mimeType?: string) {
+  return HlsPlayback.canPlay(source, mimeType)
+}

package/src/playback.types.ts

@@ -1,39 +1,60 @@
-
 /**
+ * Playback time in seconds since the beginning of the stream (or a segment for the live streams)
  * For the plugin development
  * @internal
  */
-export type TimeValue = number;
+export type TimeValue = number
 
 /**
  * For the plugin development
  * @internal
  */
 export type TimePosition = {
-  current: TimeValue;
-  total: TimeValue;
+  current: TimeValue
+  total: TimeValue
 }
 
 /**
  * For the plugin development
  * @internal
  */
-export type TimeProgress = TimePosition & { start: number; };
+export type TimeProgress = TimePosition & { start: number }
 
 /**
  * For the plugin development
  * @internal
  */
 export type TimeUpdate = TimePosition & {
-  firstFragDateTime: number;
-};
+  firstFragDateTime: number
+}
 
 /**
  * @beta
  */
 export type QualityLevel = {
-  level: number // index
+  level: number // 0-based index
   width: number
   height: number
   bitrate: number
 }
+
+/**
+ * @beta
+ */
+export enum PlaybackErrorCode {
+  Generic = 0,
+  MediaSourceUnavailable = 1,
+  QualityLevelUnavailable = 2,
+}
+
+export type ErrorLevel = 'FATAL' | 'WARN' | 'INFO'
+
+/**
+ * @beta
+ */
+export interface PlaybackError {
+  code: PlaybackErrorCode
+  description: string
+  level: ErrorLevel
+  message: string
+}

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

@@ -2,18 +2,19 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import { Events, HTML5Video, Log, Playback, Utils } from '@clappr/core'
+import { Events, HTML5Video, Log, Playback, PlayerError, Utils } from '@clappr/core'
+import { trace } from '@gcorevideo/utils'
 import assert from 'assert'
 import DASHJS, {
   ErrorEvent as DashErrorEvent,
+  MediaPlayerErrorEvent,
   PlaybackErrorEvent as DashPlaybackErrorEvent,
   type BitrateInfo as DashBitrateInfo,
   MetricEvent as DashMetricEvent,
   IManifestInfo,
 } from 'dashjs'
-import { trace } from '@gcorevideo/utils'
 
-import { QualityLevel, TimePosition, TimeValue } from '../../playback.types.js'
+import { PlaybackError, PlaybackErrorCode, QualityLevel, TimePosition, TimeUpdate, TimeValue } from '../../playback.types.js'
 
 const AUTO = -1
 
@@ -88,9 +89,6 @@ export default class DashPlayback extends HTML5Video {
 
   manifestInfo: IManifestInfo | null = null
 
-  // #EXT-X-TARGETDURATION
-  _segmentTargetDuration: TimeValue | null = null
-
   _timeUpdateTimer: ReturnType<typeof setInterval> | null = null
 
   get name() {
@@ -118,6 +116,12 @@ export default class DashPlayback extends HTML5Video {
 
     this.trigger(Events.PLAYBACK_LEVEL_SWITCH_START)
 
+    assert.ok(
+      this._dash,
+      'An instance of dashjs MediaPlayer is required to switch levels',
+    )
+    const dash = this._dash
+
     // TODO use $.extend
     const settings = this.options.dash ? structuredClone(this.options.dash) : {}
     settings.streaming = settings.streaming || {}
@@ -126,11 +130,6 @@ export default class DashPlayback extends HTML5Video {
       settings.streaming.abr.autoSwitchBitrate || {}
     settings.streaming.abr.autoSwitchBitrate.video = id === -1
 
-    assert.ok(
-      this._dash,
-      'An instance of dashjs MediaPlayer is required to switch levels',
-    )
-    const dash = this._dash
     dash.updateSettings(settings)
     if (id !== -1) {
       this._dash.setQualityFor('video', id)
@@ -334,9 +333,6 @@ export default class DashPlayback extends HTML5Video {
   }
 
   getCurrentTime(): TimeValue {
-    // e.g. can be < 0 if user pauses near the start
-    // eventually they will then be kicked to the end by hlsjs if they run out of buffer
-    // before the official start time
     return this._dash ? this._dash.time() : 0
   }
 
@@ -410,107 +406,39 @@ export default class DashPlayback extends HTML5Video {
 
   private _onDASHJSSError = (event: DashErrorEvent) => {
     trace(`${T} _onDASHJSSError`, { event })
-    // TODO
-    // only report/handle errors if they are fatal
     this._stopTimeUpdateTimer()
-    if (event.error === 'capability' && event.event === 'mediasource') {
-      // No support for MSE
-      const formattedError = this.createError(event.error)
-
-      this.trigger(Events.PLAYBACK_ERROR, formattedError)
-      Log.error(
-        'The media cannot be played because it requires a feature ' +
-          'that your browser does not support.',
-      )
-    } else if (
-      event.error === 'manifestError' &&
-      // Manifest type not supported
-      (event.event.id === 'createParser' ||
-        // Codec(s) not supported
-        event.event.id === 'codec' ||
-        // No streams available to stream
-        event.event.id === 'nostreams' ||
-        // Error creating Stream object
-        event.event.id === 'nostreamscomposed' ||
-        // syntax error parsing the manifest
-        event.event.id === 'parse' ||
-        // a stream has multiplexed audio+video
-        event.event.id === 'multiplexedrep')
-    ) {
-      // These errors have useful error messages, so we forward it on
-      const formattedError = this.createError(event.error)
 
-      this.trigger(Events.PLAYBACK_ERROR, formattedError)
-      if (event.error) {
-        Log.error(event.event.message)
-      }
-    } else if (event.error === 'mediasource') {
-      // This error happens when dash.js fails to allocate a SourceBuffer
-      // OR the underlying video element throws a `MediaError`.
-      // If it's a buffer allocation fail, the message states which buffer
-      // (audio/video/text) failed allocation.
-      // If it's a `MediaError`, dash.js inspects the error object for
-      // additional information to append to the error type.
-      const formattedError = this.createError(event.error)
-
-      this.trigger(Events.PLAYBACK_ERROR, formattedError)
-      Log.error(event.event)
-    } else if (
-      event.error === 'capability' &&
-      event.event === 'encryptedmedia'
-    ) {
-      // Browser doesn't support EME
-
-      const formattedError = this.createError(event.error)
-
-      this.trigger(Events.PLAYBACK_ERROR, formattedError)
-      Log.error(
-        'The media cannot be played because it requires encryption ' +
-          'that your browser does not support.',
-      )
-    } else if (event.error === 'key_session') {
-      // This block handles pretty much all errors thrown by the
-      // encryption subsystem
-      const formattedError = this.createError(event.error)
-
-      this.trigger(Events.PLAYBACK_ERROR, formattedError)
-      Log.error(event.event)
-    } else if (event.error === 'download') {
-      const formattedError = this.createError(event.error)
-
-      this.trigger(Events.PLAYBACK_ERROR, formattedError)
-      Log.error(
-        'The media playback was aborted because too many consecutive ' +
-          'download errors occurred.',
-      )
-      // } else if (event.error === 'mssError') {
-      //   const formattedError = this.createError(event.error);
-
-      //   this.trigger(Events.PLAYBACK_ERROR, formattedError);
-      //   if (event.error) {
-      //     Log.error(event.error.message);
-      //   }
-    } else {
-      // ignore the error
-      if (typeof event.error === 'object') {
-        const formattedError = this.createError(event.error)
-
-        this.trigger(Events.PLAYBACK_ERROR, formattedError)
-        Log.error(event.error.message)
-      } else {
-        Log.error(event.error)
-      }
-      return
+    const e = (event as MediaPlayerErrorEvent).error
+    switch (e.code) {
+      case DASHJS.MediaPlayer.errors.MANIFEST_LOADER_PARSING_FAILURE_ERROR_CODE:
+      case DASHJS.MediaPlayer.errors.MANIFEST_LOADER_LOADING_FAILURE_ERROR_CODE:
+      case DASHJS.MediaPlayer.errors.DOWNLOAD_ERROR_ID_MANIFEST_CODE:
+      case DASHJS.MediaPlayer.errors.DOWNLOAD_ERROR_ID_CONTENT_CODE:
+        this.triggerError({
+          code: PlaybackErrorCode.MediaSourceUnavailable,
+          message: e.message,
+          description: e.message,
+          level: PlayerError.Levels.FATAL,
+        })
+        break;
+      // TODO more cases
+      default:
+        this.triggerError({
+          code: PlaybackErrorCode.Generic,
+          message: e.message,
+          description: e.message,
+          level: PlayerError.Levels.FATAL,
+        })
     }
+  }
 
+  private triggerError(error: PlaybackError) {
+    trace(`${T} triggerError`, { error })
+    this.trigger(Events.PLAYBACK_ERROR, error)
     // only reset the dash player in 10ms async, so that the rest of the
     // calling function finishes
     setTimeout(() => {
-      assert.ok(
-        this._dash,
-        'An instance of dashjs MediaPlayer is required to reset',
-      )
-      this._dash.reset()
+      this.stop()
     }, 10)
   }
 
@@ -518,7 +446,7 @@ export default class DashPlayback extends HTML5Video {
     if (this.startChangeQuality) {
       return
     }
-    const update = {
+    const update: TimeUpdate = {
       current: this.getCurrentTime(),
       total: this.getDuration(),
       firstFragDateTime: this.getProgramDateTime(),
@@ -650,6 +578,9 @@ export default class DashPlayback extends HTML5Video {
   }
 
   private onLevelSwitch(currentLevel: QualityLevel) {
+    // TODO check the two below
+    this.trigger(Events.PLAYBACK_LEVEL_SWITCH, currentLevel)
+    this.trigger(Events.PLAYBACK_LEVEL_SWITCH_END)
     const isHD = (currentLevel.height >= 720 || (currentLevel.bitrate / 1000) >= 2000);
     this.trigger(Events.PLAYBACK_HIGHDEFINITIONUPDATE, isHD);
     this.trigger(Events.PLAYBACK_BITRATE, currentLevel)
@@ -670,21 +601,14 @@ DashPlayback.canPlay = function (resource, mimeType) {
     (resourceParts.length > 1 && resourceParts[1].toLowerCase() === 'mpd') ||
     mimeType === 'application/dash+xml' ||
     mimeType === 'video/mp4'
+  if (!isDash) {
+    return false
+  }
   const ms = window.MediaSource
   const mms =
     'ManagedMediaSource' in window ? window.ManagedMediaSource : undefined
   const wms =
     'WebKitMediaSource' in window ? window.WebKitMediaSource : undefined
   const ctor = ms || mms || wms
-
-  const hasSupport = typeof ctor === 'function'
-  trace(`${T} canPlay`, {
-    hasSupport,
-    isDash,
-    resource,
-    ms: typeof ms === 'function',
-    mms: typeof mms === 'function',
-    wms: typeof wms === 'function',
-  })
-  return !!(hasSupport && isDash)
+  return typeof ctor === 'function'
 }