@eluvio/elv-player-js 1.0.122 → 1.0.124

package/src/index.js

@@ -11,6 +11,8 @@ import ResizeObserver from "resize-observer-polyfill";
 import {InitializeFairPlayStream} from "./FairPlay";
 import PlayerControls, {CreateElement, InitializeTicketPrompt, PlayPause} from "./PlayerControls";
 
+import {Utils} from "@eluvio/elv-client-js";
+
 export const EluvioPlayerParameters = {
   networks: {
     MAIN: "https://main.net955305.contentfabric.io/config",
@@ -18,6 +20,10 @@ export const EluvioPlayerParameters = {
     TEST: "https://test.net955203.contentfabric.io/config",
     TESTV4: "https://test.net955205.contentfabric.io/config"
   },
+  playerProfile: {
+    DEFAULT: "default",
+    LOW_LATENCY: "low_latency"
+  },
   drms: {
     FAIRPLAY: "fairplay",
     SAMPLE_AES: "sample-aes",
@@ -115,6 +121,7 @@ const DefaultParameters = {
     posterUrl: undefined,
     className: undefined,
     controlsClassName: undefined,
+    playerProfile: EluvioPlayerParameters.playerProfile.DEFAULT,
     hlsjsOptions: undefined,
     dashjsOptions: undefined,
     // eslint-disable-next-line no-unused-vars
@@ -131,6 +138,17 @@ const DefaultParameters = {
   }
 };
 
+const PlayerProfiles = {
+  default: {
+    label: "Default",
+    hlsSettings: {},
+  },
+  low_latency: {
+    label: "Low Latency",
+    hlsSettings: Utils.LiveHLSJSSettings({lowLatency: true})
+  }
+};
+
 export class EluvioPlayer {
   constructor(target, parameters) {
     this.warnings = false;
@@ -415,7 +433,7 @@ export class EluvioPlayer {
 
      */
     try {
-      if(this.playerOptions.restartCallback) {
+      if(error && this.playerOptions.restartCallback) {
         try {
           const abort = await this.playerOptions.restartCallback(error);
 
@@ -433,7 +451,7 @@ export class EluvioPlayer {
 
       if(this.__destroyed) { return; }
 
-      this.Log("Retrying stream");
+      this.Log("Reloading stream");
 
       // Recall config to get new nodes
       const client = await this.Client();
@@ -567,6 +585,15 @@ export class EluvioPlayer {
         });
       }
 
+      // Detect live video
+      this.video.addEventListener("durationchange", () => {
+        if(this.videoDuration > 0 && this.video.duration !== this.videoDuration) {
+          this.isLive = true;
+        }
+
+        this.videoDuration = this.video.duration;
+      });
+
       // Detect removal of video to ensure player is properly destroyed
       this.mutationObserver = new MutationObserver(() => {
         if(this.mutationTimeout) { return; }
@@ -769,15 +796,11 @@ export class EluvioPlayer {
       }
     } else {
       // HLS JS
-
       playoutUrl.removeQuery("authorization");
 
-      // Inject
+      const profileSettings = (PlayerProfiles[this.playerOptions.playerProfile] || {}).hlsSettings || {};
+
       const hlsPlayer = new HLSPlayer({
-        maxBufferLength: 30,
-        maxBufferSize: 300,
-        enableWorker: true,
-        capLevelToPlayerSize: this.playerOptions.capLevelToPlayerSize,
         xhrSetup: xhr => {
           xhr.setRequestHeader("Authorization", `Bearer ${authorizationToken}`);
 
@@ -787,6 +810,8 @@ export class EluvioPlayer {
 
           return xhr;
         },
+        capLevelToPlayerSize: this.playerOptions.capLevelToPlayerSize,
+        ...profileSettings,
         ...(this.playerOptions.hlsjsOptions || {})
       });
       hlsPlayer.loadSource(playoutUrl.toString());
@@ -863,6 +888,38 @@ export class EluvioPlayer {
             }
           });
         });
+
+        this.controls.SetPlayerProfileControls({
+          GetProfile: () => ({
+            label: "Player Profile",
+            options: Object.keys(PlayerProfiles).map(key => ({
+              index: key,
+              label: PlayerProfiles[key].label,
+              active: this.playerOptions.playerProfile === key,
+              activeLabel: `Player Profile: ${PlayerProfiles[key].label}`
+            }))
+          }),
+          SetProfile: async key => {
+            this.playerOptions.playerProfile = key;
+
+            const playing = !this.video.paused;
+            const currentTime = this.video.currentTime;
+
+            this.hlsPlayer.destroy();
+            await this.InitializeHLS({
+              playoutUrl,
+              authorizationToken,
+              drm,
+              multiviewOptions
+            });
+
+            PlayPause(this.video, playing);
+
+            if(!this.isLive) {
+              this.video.currentTime = currentTime;
+            }
+          }
+        });
       }
 
       hlsPlayer.on(HLSPlayer.Events.FRAG_LOADED, () => {

package/src/static/stylesheets/player.scss

@@ -8,6 +8,7 @@ $background-color: $black;
 $controls-color: rgba(0, 0, 0, 0.8);
 $menu-color: rgba(0, 0, 0, 0.8);
 $menu-active-color: rgba(255, 255, 255, 0.1);
+$button-inactive-color: rgba($white, 0.7);
 $button-color: rgba($white, 1);
 $progress-color: #0885fb;
 $slider-color: rgba($gray, 0.5);
@@ -456,7 +457,7 @@ $button-height: 35px;
 
       &__option {
         border: 1px solid transparent;
-        color: $button-color;
+        color: $button-inactive-color;
         cursor: pointer;
         display: block;
         font-size: 14px;
@@ -493,6 +494,7 @@ $button-height: 35px;
 
         &-selected {
           color: $white;
+          font-weight: 500;
         }
 
         &:hover {