@eluvio/elv-player-js 2.0.13 → 2.0.15

package/lib/player/Player.js

@@ -118,6 +118,10 @@ export class EluvioPlayer {
     options.ignore_trimming = playoutParameters.ignoreTrimming;
     options.resolve = playoutParameters.resolve;
 
+    if(this.dvrEnabled) {
+      options.dvr = 1;
+    }
+
     if(playoutParameters.offering || playoutParameters.directLink || (playoutParameters.offerings || []).length > 0) {
       let availableOfferings = (await client.AvailableOfferings({
         objectId: playoutParameters.objectId,
@@ -289,6 +293,7 @@ export class EluvioPlayer {
     }
 
     this.isLive = parameters.sourceOptions.contentInfo.type === EluvioPlayerParameters.type.LIVE;
+    this.dvrEnabled = parameters.sourceOptions.contentInfo.liveDVR === EluvioPlayerParameters.liveDVR.ON;
 
     this.errors = 0;
 
@@ -538,6 +543,11 @@ export class EluvioPlayer {
         ...customProfileSettings
       };
 
+      if(this.dvrEnabled) {
+        delete this.hlsOptions.liveMaxLatencyDuration;
+        delete this.hlsOptions.liveMaxLatencyDurationCount;
+      }
+
       const hlsPlayer = new this.HLS(this.hlsOptions);
 
       // Limit playback to maximum bitrate, if specified
@@ -602,7 +612,13 @@ export class EluvioPlayer {
         const playing = !this.video.paused;
         const currentTime = this.video.currentTime;
 
-        this.hlsPlayer.destroy();
+        try {
+          this.hlsPlayer.destroy();
+        } catch(error) {
+          this.Log("Failed to destroy HLS player", true);
+          this.Log(error, true);
+        }
+
         await this.__InitializeHLS({
           playoutUrl,
           authorizationToken,
@@ -934,10 +950,15 @@ export class EluvioPlayer {
       this.video.pause();
     }
 
-    if(this.hlsPlayer) {
-      this.hlsPlayer.destroy();
-    } else if(this.dashPlayer) {
-      this.dashPlayer.destroy();
+    try {
+      if(this.hlsPlayer) {
+        this.hlsPlayer.destroy();
+      } else if(this.dashPlayer) {
+        this.dashPlayer.destroy();
+      }
+    } catch(error) {
+      this.Log("Failed to destroy abr player", true);
+      this.Log(error, true);
     }
 
     this.__listenerDisposers.forEach(Disposer => {
@@ -945,7 +966,7 @@ export class EluvioPlayer {
         Disposer();
       } catch (error) {
         this.Log("Failed to dispose of video event listener", true);
-        this.Log(error);
+        this.Log(error, true);
       }
     });
 
@@ -968,6 +989,8 @@ export class EluvioPlayer {
     this.player = undefined;
     this.initTimeLogged = false;
     this.canPlay = false;
+    this.isLive = false;
+    this.dvrEnabled = false;
   }
 
   async __HardReload(error, delay=6000) {

package/lib/player/PlayerParameters.js

@@ -88,6 +88,10 @@ export const PlayerParameters = {
   verifyContent: {
     OFF: false,
     ON: true
+  },
+  liveDVR: {
+    OFF: false,
+    ON: true
   }
 };
 
@@ -124,6 +128,7 @@ export const DefaultParameters = {
       image: undefined,
       posterImage: undefined,
       type: PlayerParameters.type.VOD,
+      liveDVR: PlayerParameters.liveDVR.OFF,
       headers: []
     },
     mediaCollectionOptions: {

package/lib/static/stylesheets/controls-web.module.scss

@@ -65,9 +65,9 @@
   align-items: center;
   color: var(--color-button);
   display: flex;
+  height: 30px;
   padding: 4px;
   transition: color 0.15s ease;
-  height: 30px;
   width: 30px;
 
   svg {
@@ -167,8 +167,8 @@
 
 .center-play-button {
   height: 100px;
-  transition: opacity 0.5s ease;
   margin-bottom: 30px;
+  transition: opacity 0.5s ease;
   width: 100px;
   z-index: var(--layer-center-button);
 
@@ -233,6 +233,7 @@
   align-items: center;
   display: flex;
   font-size: 14px;
+  gap: 10px;
   min-width: 100px;
   user-select: none;
   white-space: nowrap;
@@ -334,12 +335,12 @@
 
   .icon-button {
     border: 1px solid transparent;
-    transition: background-color 0.25s ease, color 0.25s ease;
     padding: 0;
+    transition: background-color 0.25s ease, color 0.25s ease;
 
     &-active,
     &:focus-visible {
-      filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
+      filter: drop-shadow(0 0 3px rgba(255, 255, 255, 50%));
     }
   }
 }
@@ -385,8 +386,8 @@
 
   .icon-button {
     height: 25px;
-    width: 25px;
     min-width: 25px;
+    width: 25px;
   }
 
   .controls {
@@ -397,8 +398,8 @@
 
   .center-play-button {
     height: 50px;
-    width: 50px;
     margin-bottom: 15px;
+    width: 50px;
   }
 
   /* Position menus relative to whole player */

package/lib/ui/Components.jsx

@@ -77,7 +77,7 @@ export const SeekBar = ({player, videoState, setRecentUserAction, className=""})
     };
   }, []);
 
-  if(player.isLive) {
+  if(player.isLive && !player.dvrEnabled) {
     return null;
   }
 

package/lib/ui/PlayerProfileForm.jsx

@@ -25,7 +25,7 @@ const PlayerProfileForm = ({player, Close}) => {
 
     try {
       setSubmitting(true);
-      await player.controls.SetPlayerProfile({profile: "custom", customHLSOptions: JSON.parse(playerOptions)});
+      await player.controls.SetPlayerProfile({profile: "custom", customOptions: JSON.parse(playerOptions)});
 
       Close();
     } catch(error) {

package/lib/ui/TVControls.jsx

@@ -26,7 +26,7 @@ const TimeIndicator = ({player, videoState}) => {
     return () => disposeVideoTimeObserver && disposeVideoTimeObserver();
   }, []);
 
-  if(player.isLive) {
+  if(player.isLive && !player.dvrEnabled) {
     return null;
   }
 
@@ -306,9 +306,13 @@ const TVControls = ({player, playbackStarted, canPlay, recentlyInteracted, setRe
               <div className={ControlStyles["spacer"]}/>
               {
                 !player.isLive ? null :
-                  <div className={ControlStyles["live-indicator"]}>
-                    Live
-                  </div>
+                  player.dvrEnabled ?
+                    <button onClick={() => player.controls.Seek({time: player.controls.GetDuration() - 2})} className={ControlStyles["live-indicator"]}>
+                      Live
+                    </button> :
+                    <div className={ControlStyles["live-indicator"]}>
+                      Live
+                    </div>
               }
               {
                 !collectionInfo ? null :

package/lib/ui/WebControls.jsx

@@ -26,7 +26,7 @@ const TimeIndicator = ({player, videoState}) => {
     return () => disposeVideoTimeObserver && disposeVideoTimeObserver();
   }, []);
 
-  if(player.isLive) {
+  if(player.isLive && !player.dvrEnabled) {
     return (
       <div className={ControlStyles["live-indicator"]}>
         Live
@@ -36,6 +36,12 @@ const TimeIndicator = ({player, videoState}) => {
 
   return (
     <div className={ControlStyles["time"]}>
+      {
+        !player.isLive ? null :
+          <button onClick={() => player.controls.Seek({time: player.controls.GetDuration() - 2})} className={ControlStyles["live-indicator"]}>
+            Live
+          </button>
+      }
       { Time(currentTime, videoState.duration) } / { Time(videoState.duration, videoState.duration) }
     </div>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eluvio/elv-player-js",
-  "version": "2.0.13",
+  "version": "2.0.15",
   "description": "![Eluvio Logo](lib/static/images/Logo.png \"Eluvio Logo\")",
   "main": "dist/elv-player-js.es.js",
   "license": "MIT",