@gcorevideo/player 2.28.36 → 2.29.0

package/lib/utils/mediaSources.d.ts

@@ -1,7 +1,11 @@
 import type { PlayerMediaSource, PlayerMediaSourceDesc, TransportPreference } from '../types';
+export declare const MIME_TYPES_HLS: string[];
+export declare const MIME_TYPE_HLS: string;
+export declare const MIME_TYPE_DASH = "application/dash+xml";
 export declare function buildMediaSourcesList(sources: PlayerMediaSourceDesc[], priorityTransport?: TransportPreference): PlayerMediaSourceDesc[];
 export declare function unwrapSource(s: PlayerMediaSource): string;
 export declare function wrapSource(s: PlayerMediaSource): PlayerMediaSourceDesc;
+export declare function guessMimeType(s: string): string | undefined;
 export declare function isDashSource(source: string, mimeType?: string): boolean;
 export declare function isHlsSource(source: string, mimeType?: string): boolean;
 //# sourceMappingURL=mediaSources.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"mediaSources.d.ts","sourceRoot":"","sources":["../../src/utils/mediaSources.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,iBAAiB,EACjB,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,UAAU,CAAA;AAIjB,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,qBAAqB,EAAE,EAChC,iBAAiB,GAAE,mBAA4B,GAC9C,qBAAqB,EAAE,CAqCzB;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAEzD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,iBAAiB,GAAG,qBAAqB,CAEtE;AAYD,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"}
+{"version":3,"file":"mediaSources.d.ts","sourceRoot":"","sources":["../../src/utils/mediaSources.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,iBAAiB,EACjB,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,UAAU,CAAA;AAGjB,eAAO,MAAM,cAAc,UAA6D,CAAA;AACxF,eAAO,MAAM,aAAa,QAAoB,CAAA;AAC9C,eAAO,MAAM,cAAc,yBAAyB,CAAA;AAGpD,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,qBAAqB,EAAE,EAChC,iBAAiB,GAAE,mBAA4B,GAC9C,qBAAqB,EAAE,CAqCzB;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAEzD;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,iBAAiB,GAAG,qBAAqB,CAEtE;AAGD,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAO3D;AAED,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/mediaSources.js

@@ -1,5 +1,8 @@
 import { Loader } from '@clappr/core';
 import { trace } from '@gcorevideo/utils';
+export const MIME_TYPES_HLS = ['application/x-mpegurl', 'application/vnd.apple.mpegurl'];
+export const MIME_TYPE_HLS = MIME_TYPES_HLS[0];
+export const MIME_TYPE_DASH = 'application/dash+xml';
 // TODO rewrite using the Playback classes and canPlay static methods
 export function buildMediaSourcesList(sources, priorityTransport = 'dash') {
     const playbacks = Loader.registeredPlaybacks;
@@ -40,24 +43,23 @@ export function unwrapSource(s) {
 export function wrapSource(s) {
     return typeof s === 'string' ? { source: s, mimeType: guessMimeType(s) } : s;
 }
-function guessMimeType(s) {
+export function guessMimeType(s) {
     if (s.endsWith('.mpd')) {
-        return 'application/dash+xml';
+        return MIME_TYPE_DASH;
     }
     if (s.endsWith('.m3u8')) {
-        // return 'application/vnd.apple.mpegurl'
-        return 'application/x-mpegurl';
+        return MIME_TYPE_HLS;
     }
 }
 export function isDashSource(source, mimeType) {
     if (mimeType) {
-        return mimeType === 'application/dash+xml'; // TODO consider video/mp4
+        return mimeType === MIME_TYPE_DASH; // TODO consider video/mp4
     }
     return source.endsWith('.mpd');
 }
 export function isHlsSource(source, mimeType) {
     if (mimeType) {
-        return ['application/vnd.apple.mpegurl', 'application/x-mpegurl'].includes(mimeType.toLowerCase());
+        return MIME_TYPES_HLS.includes(mimeType.toLowerCase());
     }
     return source.endsWith('.m3u8');
 }

package/package.json

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

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

@@ -30,11 +30,10 @@ import {
   QualityLevel,
   TimePosition,
   TimeValue,
-  VTTCueInfo,
 } from '../../playback.types.js'
 import { isDashSource } from '../../utils/mediaSources.js'
 import { BasePlayback } from '../BasePlayback.js'
-import { PlaybackEvents } from '../types.js'
+import { PlaybackEvents, VTTCueInfo } from '../types.js'
 import { AudioTrack } from '@clappr/core/types/base/playback/playback.js'
 
 const AUTO = -1

package/src/playback/hls-playback/HlsPlayback.ts

@@ -26,7 +26,6 @@ import {
   PlayerComponentType,
   QualityLevel,
   TimePosition,
-  VTTCueInfo,
 } from '../../playback.types.js'
 import { PlaybackType } from '../../types.js'
 import { isHlsSource } from '../../utils/mediaSources.js'
@@ -35,6 +34,7 @@ import { BasePlayback } from '../BasePlayback.js'
 
 import { CLAPPR_VERSION } from '../../build.js'
 import { AudioTrack } from '@clappr/core/types/base/playback/playback.js'
+import { VTTCueInfo } from '../types.js'
 
 const { now } = Utils
 

package/src/playback/types.ts

@@ -6,3 +6,13 @@ export enum PlaybackEvents {
    */
   PLAYBACK_RATE_CHANGED = 'playback:rate-changed',
 }
+
+/**
+ * @internal
+ */
+export type VTTCueInfo = {
+  id: string
+  start: number
+  end: number
+  text: string
+}

package/src/playback.types.ts

@@ -145,9 +145,3 @@ export interface PlaybackError {
   }
 }
 
-export type VTTCueInfo = {
-  id: string
-  start: number
-  end: number
-  text: string
-}

package/src/plugins/multi-camera/MultiCamera.ts

@@ -7,6 +7,7 @@ import {
   UICorePlugin,
 } from '@clappr/core'
 import { reportError, trace } from '@gcorevideo/utils'
+import { guessMimeType, MIME_TYPE_DASH } from '../../utils/mediaSources.js'
 
 import { CLAPPR_VERSION } from '../../build.js'
 
@@ -14,18 +15,28 @@ import pluginHtml from '../../../assets/multi-camera/multicamera.ejs'
 import '../../../assets/multi-camera/style.scss'
 
 import streamsIcon from '../../../assets/icons/old/streams.svg'
-import streamsMomentoIcon from '../../../assets/icons/old/language.svg'
-import streamsWhiteNightsIcon from '../../../assets/icons/old/wn.svg'
-import { ZeptoResult } from '../../types.js'
+import { PlayerMediaSource, TransportPreference, ZeptoResult } from '../../types.js'
 
-type MultisourcesMode = 'one_first' | 'only_live' | 'show_all'
+/**
+ * @beta
+ */
+export type MultisourcesMode = 'one_first' | 'only_live' | 'show_all'
 
-type MediaSourceInfo = {
-  live: boolean
-  source: string
-  id: number
+/**
+ * Extended media source description
+ * @beta
+ */
+export type MulticCameraSourceInfo = {
+  description: string
   dvr: boolean
+  hls_mpegts_url: string | null
+  id: number
+  live: boolean
   projection: string | null
+  screenshot: string | null
+  source: string
+  source_dash: string | null
+  title: string
 }
 
 const VERSION = '0.0.1'
@@ -37,13 +48,13 @@ const T = 'plugins.multicamera'
  * @beta
  */
 export class MultiCamera extends UICorePlugin {
-  private currentCamera: MediaSourceInfo | null = null
+  private currentCamera: MulticCameraSourceInfo | null = null
 
   private currentTime: number = 0
 
   private playing = false
 
-  private multicamera: MediaSourceInfo[] = []
+  private multicamera: MulticCameraSourceInfo[] = []
 
   private noActiveStreams = false
 
@@ -89,9 +100,11 @@ export class MultiCamera extends UICorePlugin {
     this.playing = this.options.multicameraPlay
     // Don't mutate the options, TODO check if some plugin observes the options.multicamera
     this.multicamera = this.options.multisources.map(
-      (item: MediaSourceInfo) => ({ ...item }),
+      (item: MulticCameraSourceInfo) => ({ ...item }),
     )
     this.noActiveStreams = this.multicamera.every((item) => !item.live)
+    // TODO filter out non-live
+    this.core.options.sources = expandMediaSource(this.multicamera[0])
   }
 
   override bindEvents() {
@@ -113,19 +126,15 @@ export class MultiCamera extends UICorePlugin {
     )
   }
 
-  unBindEvents() {
-    // @ts-ignore
-    this.stopListening(this.core, Events.CORE_READY)
-    // @ts-ignore
+  private unBindEvents() {
+    this.stopListening(this.core, Events.CORE_READY, this.bindPlaybackEvents)
     this.stopListening(
       this.core.mediaControl,
       Events.MEDIACONTROL_CONTAINERCHANGED,
+      this.reload,
     )
-    // @ts-ignore
-    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED)
-    // @ts-ignore
-    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE)
-    // @ts-ignore
+    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render)
+    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE, this.hideSelectLevelMenu)
     this.stopListening(
       this.core.activePlayback,
       Events.PLAYBACK_PLAY,
@@ -150,11 +159,7 @@ export class MultiCamera extends UICorePlugin {
   }
 
   private shouldRender() {
-    if (!this.core.activeContainer || this.noActiveStreams) {
-      return false
-    }
-
-    if (!this.core.activePlayback) {
+    if (this.noActiveStreams) {
       return false
     }
 
@@ -162,90 +167,61 @@ export class MultiCamera extends UICorePlugin {
   }
 
   override render() {
-    if (this.shouldRender()) {
-      let numActiveSources = 0
-      // const currentSource = this.core.options.source
-      const currentSource = this.core.activePlayback?.sourceMedia
-
-      for (const item of this.multicamera) {
-        if (item.live) {
-          numActiveSources++
-        }
-        if (!this.currentCamera && item.source === currentSource) {
-          this.currentCamera = item
-        }
+    if (!this.core.activeContainer || !this.core.activePlayback) {
+      return this
+    }
+    if (!this.shouldRender()) {
+      return this
+    }
+
+    let numActiveSources = 0
+    const currentSource = this.core.activePlayback?.sourceMedia
+
+    for (const item of this.multicamera) {
+      if (item.live) {
+        numActiveSources++
+      }
+      if (!this.currentCamera && item.source === currentSource) {
+        this.currentCamera = item
       }
+    }
 
-      // const mediaControl = this.core.getPlugin('media_control')
-      if (
-        this.currentTime &&
-        // TODO check the last active playback type instead
-        // !mediaControl.$el.hasClass('live') &&
-        this.core.getPlaybackType() !== Playback.LIVE
-      ) {
-        if (this.currentTime < this.core.activePlayback.getDuration()) {
-          this.core.activePlayback.seek(this.currentTime)
-        }
-
-        this.currentTime = 0
-
-        // if (mediaControl.$el.hasClass('dvr')) {
-        //   this.core.activeContainer.dvrInUse = true;
-        // }
+    if (
+      this.currentTime &&
+      this.core.getPlaybackType() !== Playback.LIVE
+    ) {
+      if (this.currentTime < this.core.activePlayback.getDuration()) {
+        this.core.activePlayback.seek(this.currentTime)
       }
 
-      // TODO current source
-      this.$el.html(
-        this.template({
-          streams: this.multicamera,
-          multisources_mode: this.options.multisourcesMode,
-        }),
-      )
+      this.currentTime = 0
+    }
 
-      if (
-        (numActiveSources <= 1 &&
-          this.options.multisourcesMode !== 'show_all') ||
-        this.options.multisourcesMode === 'one_first'
-      ) {
-        this.$el.hide()
-      } else {
-        this.$el.show()
-      }
+    this.$el.html(
+      this.template({
+        streams: this.multicamera,
+        multisources_mode: this.options.multisourcesMode,
+      }),
+    )
 
-      if (
-        this.core.mediaControl.$multiCameraSelector &&
-        this.core.mediaControl.$multiCameraSelector.length > 0
-      ) {
-        this.core.mediaControl.$multiCameraSelector.append(this.el)
-      } else {
-        this.core.mediaControl.$('.media-control-right-panel').append(this.el)
-      }
-      if (
-        Object.prototype.hasOwnProperty.call(
-          this.core.mediaControl,
-          '$multiCameraSelector',
-        ) &&
-        this.core.mediaControl.$multiCameraSelector.find(
-          'span.multicamera-icon',
-        ).length > 0
-      ) {
-        if (~window.location.href.indexOf('whitenights.gcdn.co')) {
-          this.core.mediaControl.$multiCameraSelector
-            .find('span.multicamera-icon')
-            .append(streamsWhiteNightsIcon)
-        } else if (~window.location.href.indexOf('momentosolutions.gcdn.co')) {
-          this.core.mediaControl.$multiCameraSelector
-            .find('span.multicamera-icon')
-            .append(streamsMomentoIcon)
-        } else {
-          this.core.mediaControl.$multiCameraSelector
-            .find('span.multicamera-icon')
-            .append(streamsIcon)
-        }
-      }
-      this.highlightCurrentLevel()
+    if (
+      (numActiveSources < 2 &&
+        this.options.multisourcesMode !== 'show_all') ||
+      this.options.multisourcesMode === 'one_first'
+    ) {
+      this.$el.hide()
+    } else {
+      this.$el.show()
     }
 
+    const mediaControl = this.core.getPlugin('media_control')
+
+    mediaControl.slot('multicamera', this.$el)
+    this.$el
+      .find('span.multicamera-icon')
+      .html(streamsIcon)
+    this.highlightCurrentLevel()
+
     return this
   }
 
@@ -260,36 +236,6 @@ export class MultiCamera extends UICorePlugin {
     return false
   }
 
-  activeById(id: number, active: boolean) {
-    this.setLiveStatus(id, active)
-
-    if (!this.currentCamera && !this.noActiveStreams) {
-      return
-    }
-    if (this.noActiveStreams && !active) {
-      return
-    }
-
-    if (this.currentCamera) {
-      if (this.options.multisourcesMode === 'only_live') {
-        this.behaviorLive(id, active)
-      }
-      if (this.options.multisourcesMode === 'one_first') {
-        this.behaviorOne(id, active)
-      }
-      if (this.options.multisourcesMode === 'show_all') {
-        this.behaviorAll(id, active)
-      }
-    } else {
-      if (this.noActiveStreams && active) {
-        this.changeById(id)
-        this.noActiveStreams = false
-      }
-    }
-
-    this.render()
-  }
-
   private setLiveStatus(id: number, active: boolean) {
     try {
       const index = this.findIndexById(id)
@@ -355,7 +301,6 @@ export class MultiCamera extends UICorePlugin {
     this.currentCamera = null
     this.noActiveStreams = true
     this.core.trigger('core:multicamera:no_active_translation')
-    // this.changeById(this.multicamera[nextIndex].id);
   }
 
   private showError() {
@@ -379,7 +324,7 @@ export class MultiCamera extends UICorePlugin {
 
   private hideError() {
     try {
-      this.core.mediaControl.enableControlButton()
+      this.core.getPlugin('media_control')?.enableControlButton()
     } catch (error) {
       reportError(error)
     }
@@ -390,14 +335,9 @@ export class MultiCamera extends UICorePlugin {
     queueMicrotask(() => {
       const playbackOptions = this.core.options.playback || {}
 
-      // TODO figure out what this does
+      // TODO figure out if it's needed
       playbackOptions.recycleVideo = Browser.isMobile
-      this.currentCamera = this.findElementById(id) ?? null
-      trace(`${T} changeById`, {
-        id,
-        currentCamera: this.currentCamera,
-        multicamera: this.multicamera,
-      })
+      this.currentCamera = this.findElementById(id)
 
       if (!this.currentCamera) {
         return
@@ -423,29 +363,17 @@ export class MultiCamera extends UICorePlugin {
       this.core.configure({
         playback: playbackOptions,
         source: this.currentCamera.source, // TODO ensure that the preferred transport is used
-        video360: {
-          // TODO
-          projection: this.currentCamera.projection,
-        },
         fullscreenDisable,
         autoPlay: this.playing,
         disableCanAutoPlay: true,
       })
-      this.core.activeContainer.mediaControlDisabled = false
+      this.core.activeContainer?.enableMediaControl()
     })
     this.toggleContextMenu()
   }
 
-  private getCamerasList() {
-    return this.multicamera
-  }
-
-  private getCurrentCamera() {
-    return this.currentCamera
-  }
-
-  private findElementById(id: number): MediaSourceInfo | undefined {
-    return this.multicamera.find((element) => element.id === id)
+  private findElementById(id: number): MulticCameraSourceInfo | null {
+    return this.multicamera.find((element) => element.id === id) ?? null
   }
 
   private findIndexById(id: number): number {
@@ -457,24 +385,16 @@ export class MultiCamera extends UICorePlugin {
   }
 
   private hideSelectLevelMenu() {
-    ; (this.$('.multicamera ul') as ZeptoResult).hide()
+    ; (this.$('ul') as ZeptoResult).hide()
   }
 
   private toggleContextMenu() {
-    ; (this.$('.multicamera ul') as ZeptoResult).toggle()
+    ; (this.$('ul') as ZeptoResult).toggle()
   }
 
-  // private buttonElement(): ZeptoResult {
-  //   return this.$('.multicamera button');
-  // }
-
-  // private buttonElementText(): ZeptoResult {
-  //   return this.$('.multicamera button .quality-text');
-  // }
-
   private levelElement(id?: number): ZeptoResult {
     return this.$(
-      '.multicamera ul li > div' +
+      'ul .multicamera-item' +
       (id !== undefined
         ? '[data-multicamera-selector-select="' + id + '"]'
         : ''),
@@ -488,3 +408,20 @@ export class MultiCamera extends UICorePlugin {
       this.levelElement(this.currentCamera.id).addClass('multicamera-active')
   }
 }
+
+function expandMediaSource(source: MulticCameraSourceInfo): PlayerMediaSource[] {
+  const result: PlayerMediaSource[] = [{
+    source: source.source,
+    mimeType: guessMimeType(source.source),
+  }]
+  if (source.source_dash) {
+    result.push({
+      source: source.source_dash,
+      mimeType: MIME_TYPE_DASH,
+    })
+  }
+  if (source.hls_mpegts_url) {
+    result.push(source.hls_mpegts_url)
+  }
+  return result
+}

package/src/plugins/source-controller/SourceController.ts

@@ -30,45 +30,6 @@ function noSync(cb: () => void) {
  * `PLUGIN` that is managing the automatic failover between media sources.
  * @public
  * @remarks
- * Have a look at the {@link https://miro.com/app/board/uXjVLiN15tY=/?share_link_id=390327585787 | source failover diagram} for the details
- * on how sources ordering and selection works. Below is a simplified diagram:
- *
- * ```markdown
- * sources_list:
- *       - a.mpd  |    +--------------------+
- *       - b.m3u8 |--->|         init       |
- *       - ...    |    |--------------------|
- *                     | current_source = 0 |
- *                     +--------------------+
- *                            |
- *                            |  source = a.mpd
- *                            |  playback = dash.js
- *                            v
- *                      +------------------+
- *                  +-->|   load source    |
- *                  |   +---------|--------+
- *                  |             v
- *                  |   +------------------+
- *                  |   |       play       |
- *                  |   +---------|--------+
- *                  |             |
- *                  |             v
- *                  |   +-----------------------+
- *                  |   |  on playback_error    |
- *                  |   |-----------------------|
- *                  |   | current_source =      |
- *                  |   |  (current_source + 1) |
- *                  |   |  % len sources_list   |
- *                  |   |                       |
- *                  |   | delay 1..3s           |
- *                  |   +---------------|-------+
- *                  |                   |
- *                  |   source=b.m3u8   |
- *                  |   playback=hls.js |
- *                  +-------------------+
- *
- * ```
- *
  * @example
  * ```ts
  * import { SourceController } from '@gcorevideo/player'

package/src/plugins/subtitles/ClosedCaptions.ts

@@ -15,7 +15,7 @@ import { isFullscreen } from '../utils/fullscreen.js'
 import type { ZeptoResult } from '../../types.js'
 import { ExtendedEvents } from '../media-control/MediaControl.js'
 import { mediaControlClickaway } from '../../utils/clickaway.js'
-import { VTTCueInfo } from '../../playback.types.js'
+import { VTTCueInfo } from '../../playback/types.js'
 
 const VERSION: string = '2.19.14'
 

package/src/utils/mediaSources.ts

@@ -7,6 +7,10 @@ import type {
 } from '../types'
 import { trace } from '@gcorevideo/utils'
 
+export const MIME_TYPES_HLS = ['application/x-mpegurl', 'application/vnd.apple.mpegurl']
+export const MIME_TYPE_HLS = MIME_TYPES_HLS[0]
+export const MIME_TYPE_DASH = 'application/dash+xml'
+
 // TODO rewrite using the Playback classes and canPlay static methods
 export function buildMediaSourcesList(
   sources: PlayerMediaSourceDesc[],
@@ -58,26 +62,26 @@ export function wrapSource(s: PlayerMediaSource): PlayerMediaSourceDesc {
   return typeof s === 'string' ? { source: s, mimeType: guessMimeType(s) } : s
 }
 
-function guessMimeType(s: string): string | undefined {
+
+export function guessMimeType(s: string): string | undefined {
   if (s.endsWith('.mpd')) {
-    return 'application/dash+xml'
+    return MIME_TYPE_DASH
   }
   if (s.endsWith('.m3u8')) {
-    // return 'application/vnd.apple.mpegurl'
-    return 'application/x-mpegurl'
+    return MIME_TYPE_HLS
   }
 }
 
 export function isDashSource(source: string, mimeType?: string) {
   if (mimeType) {
-    return mimeType === 'application/dash+xml' // TODO consider video/mp4
+    return mimeType === MIME_TYPE_DASH // TODO consider video/mp4
   }
   return source.endsWith('.mpd')
 }
 
 export function isHlsSource(source: string, mimeType?: string) {
   if (mimeType) {
-    return ['application/vnd.apple.mpegurl', 'application/x-mpegurl'].includes(
+    return MIME_TYPES_HLS.includes(
       mimeType.toLowerCase(),
     )
   }