@gcorevideo/player 2.1.13 → 2.3.0

package/lib/Player.js

@@ -5,7 +5,6 @@ import { reportError, trace } from './trace/index.js';
 import { 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
 const T = 'GPlayer';
 const DEFAULT_OPTIONS = {
     autoPlay: false,
@@ -28,6 +27,7 @@ export class Player {
     emitter = new EventLite();
     player = null;
     ready = false;
+    rootNode = null;
     tuneInTimerId = null;
     tunedIn = false;
     get activePlayback() {
@@ -43,6 +43,12 @@ export class Player {
                 return 'native';
         }
     }
+    get activeSource() {
+        if (!this.player?.core.activePlayback) {
+            return null;
+        }
+        return this.player.core.activePlayback.options.src;
+    }
     get bitrate() {
         return this.bitrateInfo;
     }
@@ -165,6 +171,7 @@ export class Player {
             this.bindBitrateChangeHandler();
         }
         player.core.on(ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED, () => {
+            // this.trigger(Events.ContainerChanged)
             this.bindBitrateChangeHandler();
         }, null);
         if (Browser.isiOS && player.core.activePlayback) {
@@ -178,7 +185,19 @@ export class Player {
             });
         }
         player.core.on(ClapprEvents.CORE_SCREEN_ORIENTATION_CHANGED, ({ orientation }) => {
-            trace(`${T} CORE_SCREEN_ORIENTATION_CHANGED`, { orientation });
+            trace(`${T} CORE_SCREEN_ORIENTATION_CHANGED`, {
+                orientation,
+                rootNode: {
+                    width: this.rootNode?.clientWidth,
+                    height: this.rootNode?.clientHeight,
+                },
+            });
+            if (Browser.isiOS && this.rootNode) {
+                player.core.resize({
+                    width: this.rootNode.clientWidth,
+                    height: this.rootNode.clientHeight,
+                });
+            }
         }, null);
         player.core.on(ClapprEvents.CORE_RESIZE, ({ width, height }) => {
             trace(`${T} CORE_RESIZE`, {
@@ -216,7 +235,7 @@ export class Player {
             setTimeout(() => this.tuneIn(), 0);
         },
         onResize: (newSize) => {
-            trace(`${T} CORE_RESIZE`, {
+            trace(`${T} onResize`, {
                 newSize,
             });
         },
@@ -253,7 +272,7 @@ export class Player {
             }
         },
     };
-    buildCoreOptions(playerElement) {
+    buildCoreOptions(rootNode) {
         const multisources = this.config.multisources;
         const mainSource = this.config.playbackType === 'live'
             ? multisources.find((ms) => ms.live !== false)
@@ -263,13 +282,14 @@ export class Player {
             : [];
         // const mainSourceUrl = mediaSources[0];
         const poster = mainSource?.poster ?? this.config.poster;
+        this.rootNode = rootNode;
         const coreOptions = {
             ...this.config.pluginSettings,
             allowUserInteraction: true,
             autoPlay: false,
             debug: this.config.debug || 'none',
             events: this.events,
-            height: playerElement.clientHeight,
+            height: rootNode.clientHeight,
             loop: this.config.loop,
             multisources,
             mute: this.config.mute,
@@ -283,10 +303,10 @@ export class Player {
                     debug: this.config.debug === 'all' || this.config.debug === 'hls',
                 },
             },
-            parent: playerElement,
+            parent: rootNode,
             playbackType: this.config.playbackType,
             poster,
-            width: playerElement.clientWidth,
+            width: rootNode.clientWidth,
             // source: mainSourceUrl,
             sources: mediaSources,
             strings: this.config.strings,
@@ -294,6 +314,7 @@ export class Player {
         return coreOptions;
     }
     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);
     }

package/lib/version.d.ts

@@ -1,5 +1,7 @@
 export declare function version(): {
     gplayer: string;
     clappr: string;
+    dashjs: string;
+    hlsjs: string;
 };
 //# sourceMappingURL=version.d.ts.map

package/lib/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAGA,wBAAgB,OAAO;;;EAKtB"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAGA,wBAAgB,OAAO;;;;;EAOtB"}

package/lib/version.js

@@ -4,5 +4,7 @@ export function version() {
     return {
         gplayer: pkg.version,
         clappr: lock.packages['node_modules/@clappr/core'].version,
+        dashjs: lock.packages['node_modules/dashjs'].version,
+        hlsjs: lock.packages['node_modules/hls.js'].version,
     };
 }

package/package.json

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

package/src/Player.ts

@@ -25,7 +25,7 @@ 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 '../assets/style/main.scss' // TODO check if needed
 
 // TODO implement transport retry/failover and fallback logic
 
@@ -64,6 +64,8 @@ export class Player {
 
   private ready = false
 
+  private rootNode: HTMLElement | null = null
+
   private tuneInTimerId: ReturnType<typeof setTimeout> | null = null
 
   private tunedIn = false
@@ -82,6 +84,13 @@ export class Player {
     }
   }
 
+  get activeSource(): string | null {
+    if (!this.player?.core.activePlayback) {
+      return null
+    }
+    return this.player.core.activePlayback.options.src
+  }
+
   get bitrate(): BitrateInfo | null {
     return this.bitrateInfo
   }
@@ -227,6 +236,7 @@ export class Player {
     player.core.on(
       ClapprEvents.CORE_ACTIVE_CONTAINER_CHANGED,
       () => {
+        // this.trigger(Events.ContainerChanged)
         this.bindBitrateChangeHandler()
       },
       null,
@@ -243,7 +253,19 @@ export class Player {
     player.core.on(
       ClapprEvents.CORE_SCREEN_ORIENTATION_CHANGED,
       ({ orientation }: { orientation: 'landscape' | 'portrait' }) => {
-        trace(`${T} CORE_SCREEN_ORIENTATION_CHANGED`, { orientation })
+        trace(`${T} CORE_SCREEN_ORIENTATION_CHANGED`, {
+          orientation,
+          rootNode: {
+            width: this.rootNode?.clientWidth,
+            height: this.rootNode?.clientHeight,
+          },
+        })
+        if (Browser.isiOS && this.rootNode) {
+          player.core.resize({
+            width: this.rootNode.clientWidth,
+            height: this.rootNode.clientHeight,
+          })
+        }
       },
       null,
     )
@@ -288,7 +310,7 @@ export class Player {
       setTimeout(() => this.tuneIn(), 0)
     },
     onResize: (newSize: { width: number; height: number }) => {
-      trace(`${T} CORE_RESIZE`, {
+      trace(`${T} onResize`, {
         newSize,
       })
     },
@@ -322,7 +344,7 @@ export class Player {
     },
   }
 
-  private buildCoreOptions(playerElement: HTMLElement): CoreOptions {
+  private buildCoreOptions(rootNode: HTMLElement): CoreOptions {
     const multisources = this.config.multisources
     const mainSource =
       this.config.playbackType === 'live'
@@ -334,13 +356,15 @@ export class Player {
     // const mainSourceUrl = mediaSources[0];
     const poster = mainSource?.poster ?? this.config.poster
 
+    this.rootNode = rootNode
+
     const coreOptions: CoreOptions & PluginOptions = {
       ...this.config.pluginSettings,
       allowUserInteraction: true,
       autoPlay: false,
       debug: this.config.debug || 'none',
       events: this.events,
-      height: playerElement.clientHeight,
+      height: rootNode.clientHeight,
       loop: this.config.loop,
       multisources,
       mute: this.config.mute,
@@ -354,10 +378,10 @@ export class Player {
           debug: this.config.debug === 'all' || this.config.debug === 'hls',
         },
       },
-      parent: playerElement,
+      parent: rootNode,
       playbackType: this.config.playbackType,
       poster,
-      width: playerElement.clientWidth,
+      width: rootNode.clientWidth,
       // source: mainSourceUrl,
       sources: mediaSources,
       strings: this.config.strings,
@@ -366,6 +390,7 @@ export class Player {
   }
 
   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)
   }

package/src/version.ts

@@ -5,5 +5,7 @@ export function version() {
   return {
     gplayer: pkg.version,
     clappr: lock.packages['node_modules/@clappr/core'].version,
+    dashjs: lock.packages['node_modules/dashjs'].version,
+    hlsjs: lock.packages['node_modules/hls.js'].version,
   }
 }