@eluvio/elv-player-js 2.0.30 → 2.0.31

package/lib/player/Controls.js

@@ -1053,6 +1053,26 @@ class PlayerControls {
   Destroy() {
     this.player.Destroy();
   }
+
+  GetDebugInfo() {
+    const sourceOptions = JSON.parse(JSON.stringify(this.player.sourceOptions));
+    delete sourceOptions.playoutOptions;
+
+    let error = this.player.__error && JSON.parse(JSON.stringify(this.player.__error));
+    if(error && Object.keys(error).length === 0) {
+      error = this.player.__error.toString();
+    }
+
+    return {
+      appUrl: window.location.href,
+      userAddress: this.player.userAddress,
+      userAgent: navigator.userAgent,
+      userLanguage: navigator.language,
+      playoutUrl: this.player.playoutUrl,
+      sourceOptions,
+      error
+    };
+  }
 }
 
 export default PlayerControls;

package/lib/player/Player.js

@@ -48,7 +48,6 @@ export class EluvioPlayer {
     this.loading = true;
     this.target = target;
     this.video = video;
-    this.SetErrorMessage = SetErrorMessage;
     this.controls = new PlayerControls({player: this});
     this.__settingsListeners = [];
     this.__listenerDisposers = [];
@@ -68,6 +67,12 @@ export class EluvioPlayer {
       EluvioPlayerParameters.controls.ON,
       EluvioPlayerParameters.controls.AUTO_HIDE
     ].includes(parameters.playerOptions.controls);
+    this.__error = undefined;
+
+    this.SetErrorMessage = (message, error) => {
+      SetErrorMessage(message);
+      this.__error = error;
+    };
 
     try {
       // If custom HLS parameters are specified, set profile to custom
@@ -124,6 +129,8 @@ export class EluvioPlayer {
       this.__tokenResolved = true;
     }
 
+    this.userAddress = this.clientOptions.client.CurrentAccountAddress();
+
     return this.clientOptions.client;
   }
 
@@ -326,8 +333,6 @@ export class EluvioPlayer {
 
     this.__Reset();
 
-
-
     this.initialized = false;
     this.loading = true;
     this.initTime = Date.now();
@@ -401,6 +406,10 @@ export class EluvioPlayer {
           this.video.textTracks && this.video.textTracks.addEventListener("change", () => this.__SettingsUpdate());
           this.video.audioTracks && this.video.audioTracks.addEventListener("change", () => this.__SettingsUpdate());
 
+          if(this.playerOptions.startTime) {
+            this.controls.Seek({time: this.playerOptions.startTime});
+          }
+
           if(this.playerOptions.autoplay === EluvioPlayerParameters.autoplay.ON) {
             this.controls.Play();
           }
@@ -515,7 +524,7 @@ export class EluvioPlayer {
 
           if(permissionErrorMessage) {
             error.permission_message = permissionErrorMessage;
-            this.SetErrorMessage(permissionErrorMessage);
+            this.SetErrorMessage(permissionErrorMessage, error);
 
             if(typeof error === "object") {
               error.permission_message = permissionErrorMessage;
@@ -523,11 +532,11 @@ export class EluvioPlayer {
               this.Log(permissionErrorMessage, true);
             }
           } else {
-            this.SetErrorMessage(error.displayMessage || "Insufficient permissions");
+            this.SetErrorMessage(error.displayMessage || "Insufficient permissions", error);
           }
         // eslint-disable-next-line no-empty
         } catch (error) {
-          this.SetErrorMessage(error.displayMessage || "Insufficient permissions");
+          this.SetErrorMessage(error.displayMessage || "Insufficient permissions", error);
         }
       } else if(error.status >= 500) {
         this.__HardReload(error, 10000);
@@ -721,7 +730,7 @@ export class EluvioPlayer {
 
         if(error.response && error.response.code === 403) {
           // Not allowed to access
-          this.SetErrorMessage("Insufficient permissions");
+          this.SetErrorMessage("Insufficient permissions", error);
         } else if(this.errors < 5) {
           if(error.fatal) {
             if(error.data && error.data.type === this.HLS.ErrorTypes.MEDIA_ERROR) {
@@ -1119,6 +1128,7 @@ export class EluvioPlayer {
     this.airplayAvailable = false;
     this.chromecastAvailable = chromecastAvailable && this.playerOptions.allowCasting;
     this.casting = false;
+    this.__error = undefined;
   }
 
   async __HardReload(error, delay=6000) {
@@ -1128,7 +1138,7 @@ export class EluvioPlayer {
     this.reloads += 1;
 
     if(this.reloads > 10) {
-      this.SetErrorMessage((error && error.displayMessage) || "Unable to play content");
+      this.SetErrorMessage((error && error.displayMessage) || "Unable to play content", error);
       return;
     }
 
@@ -1147,7 +1157,10 @@ export class EluvioPlayer {
         }
       }
 
-      this.SetErrorMessage((error && error.displayMessage) || "Something went wrong, reloading player...");
+      this.SetErrorMessage(
+        (error && error.displayMessage) || "Something went wrong, reloading player...",
+        error
+      );
       await new Promise(resolve => setTimeout(resolve, delay));
 
       if(this.__destroyed) { return; }

package/lib/player/PlayerParameters.js

@@ -139,11 +139,6 @@ export const DefaultParameters = {
       liveDVR: PlayerParameters.liveDVR.OFF,
       headers: []
     },
-    mediaCollectionOptions: {
-      mediaCatalogObjectId: undefined,
-      mediaCatalogVersionHash: undefined,
-      collectionId: undefined
-    },
     playoutOptions: undefined,
     playoutParameters: {
       objectId: undefined,
@@ -180,6 +175,7 @@ export const DefaultParameters = {
     showLoader: PlayerParameters.showLoader.ON,
     permanentPoster: PlayerParameters.permanentPoster.OFF,
     allowCasting: PlayerParameters.allowCasting.ON,
+    startTime: undefined,
     hlsjsOptions: undefined,
     dashjsOptions: undefined,
     debugLogging: false,

package/lib/static/icons/Icons.js

@@ -34,3 +34,4 @@ export const ContentCredentialsIcon = "<svg width=\"26\" height=\"26\" viewBox=\
 export const CopyIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-copy\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path></svg>";
 export const AirplayIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-airplay\"><path d=\"M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1\"></path><polygon points=\"12 15 17 21 7 21 12 15\"></polygon></svg>";
 export const ChromecastIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-cast\"><path d=\"M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6\"></path><line x1=\"2\" y1=\"20\" x2=\"2.01\" y2=\"20\"></line></svg>";
+export const InfoIcon = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-info\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"></line></svg>";

package/lib/static/icons/svgs/info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>

package/lib/static/stylesheets/player.module.scss

@@ -9,14 +9,15 @@
   --layer-error: 4;
   --layer-controls: 5;
 
-  --color-highlight: #3784eb;
-  --color-error: #FFF;
-
+  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   height: 100%;
   inset: 0;
   position: absolute;
   width: 100%;
 
+  --color-highlight: #3784eb;
+  --color-error: #FFF;
+
   &--rotated {
     height: 100vw;
     margin-top: -100vw;
@@ -88,8 +89,8 @@
   align-items: center;
   color: var(--color-error);
   display: flex;
-  font-size: 24px;
-  font-weight: 300;
+  flex-direction: column;
+  gap: 30px;
   height: 100%;
   justify-content: center;
   left: 0;
@@ -98,6 +99,35 @@
   top: 0;
   width: 100%;
   z-index: var(--layer-error);
+
+  &__message {
+    font-size: 24px;
+    font-weight: 300;
+  }
+
+  &__copy-debug-button {
+    align-items: center;
+    background-color: var(--color-error);
+    border: 1px solid var(--color-error);
+    border-radius: 5px;
+    color: #000;
+    display: flex;
+    gap: 10px;
+    height: 45px;
+    opacity: 0.9;
+    padding: 10px 20px;
+    transition: opacity 0.15s ease;
+
+    &:hover {
+      opacity: 1;
+      transition: opacity 0.35s ease;
+    }
+  }
+
+  &__icon {
+    height: 18px;
+    width: 18px;
+  }
 }
 
 :global(.__eluvio-player--size-md),

package/lib/ui/BuildIcons.cjs

@@ -36,7 +36,8 @@ const iconSource = {
   ContentCredentialsIcon: Path.resolve(__dirname, "../static/icons/svgs/content-credentials.svg"),
   CopyIcon: Path.resolve(__dirname, "../static/icons/svgs/copy.svg"),
   AirplayIcon: Path.resolve(__dirname, "../static/icons/svgs/airplay.svg"),
-  ChromecastIcon: Path.resolve(__dirname, "../static/icons/svgs/cast.svg")
+  ChromecastIcon: Path.resolve(__dirname, "../static/icons/svgs/cast.svg"),
+  InfoIcon: Path.resolve(__dirname, "../static/icons/svgs/info.svg")
 };
 
 let iconFile = "// WARNING: Do not edit this file manually\n";

package/lib/ui/Components.jsx

@@ -17,6 +17,20 @@ export const Spinner = ({light, className=""}) => (
 
 export const SVG = ({icon, className=""}) => <div className={`${CommonStyles["svg"]} ${className}`} dangerouslySetInnerHTML={{__html: icon}} />;
 
+export const Copy = async (value) => {
+  try {
+    value = (value || "").toString();
+
+    await navigator.clipboard.writeText(value);
+  } catch(error) {
+    const input = document.createElement("input");
+
+    input.value = value;
+    input.select();
+    input.setSelectionRange(0, 99999);
+    document.execCommand("copy");
+  }
+};
 
 const icons = {
   [ACTIONS.PLAY]: Icons.PlayIcon,
@@ -209,6 +223,15 @@ export const SettingsMenu = ({player, Hide, className=""}) => {
     rate: {
       label: "Playback Rate",
       Update: index => player.controls.SetPlaybackRate({index})
+    },
+    advanced: {
+      label: "Advanced",
+      Update: option => {
+        if(option === "copy_debug_info") {
+          Copy(JSON.stringify(player.controls.GetDebugInfo(), null, 2));
+          Hide();
+        }
+      }
     }
   };
 
@@ -225,23 +248,36 @@ export const SettingsMenu = ({player, Hide, className=""}) => {
           <div>{ settings[activeMenu].label }</div>
         </button>
         {
-          options[activeMenu].options.map(option =>
+          activeMenu === "advanced" ?
             <button
-              key={`option-${option.index}`}
-              role="menuitemradio"
-              aria-checked={option.active}
-              autoFocus={option.active}
-              aria-label={`${settings[activeMenu].label}: ${option.label || ""}`}
+              role="button"
+              autoFocus
+              aria-label="Copy Debug Info"
               onClick={() => {
-                settings[activeMenu].Update(option.index);
+                settings[activeMenu].Update("copy_debug_info");
                 SetSubmenu(undefined);
               }}
-              className={`${CommonStyles["menu-option"]} ${option.active ? CommonStyles["menu-option-active"] : ""}`}
+              className={CommonStyles["menu-option"]}
             >
-              { option.label || "" }
-              { option.active ? <SVG icon={Icons.CheckmarkIcon} className={CommonStyles["menu-option-icon"]} /> : null }
-            </button>
-          )
+              Copy Debug Info
+            </button> :
+            options[activeMenu].options.map(option =>
+              <button
+                key={`option-${option.index}`}
+                role="menuitemradio"
+                aria-checked={option.active}
+                autoFocus={option.active}
+                aria-label={`${settings[activeMenu].label}: ${option.label || ""}`}
+                onClick={() => {
+                  settings[activeMenu].Update(option.index);
+                  SetSubmenu(undefined);
+                }}
+                className={`${CommonStyles["menu-option"]} ${option.active ? CommonStyles["menu-option-active"] : ""}`}
+              >
+                {option.label || ""}
+                {option.active ? <SVG icon={Icons.CheckmarkIcon} className={CommonStyles["menu-option-icon"]}/> : null}
+              </button>
+            )
         }
       </div>
     );
@@ -250,47 +286,79 @@ export const SettingsMenu = ({player, Hide, className=""}) => {
       <div key="menu" role="menu" className={`${CommonStyles["menu"]} ${className}`}>
         {
           !options.hasQualityOptions ? null :
-            <button autoFocus role="menuitem" onClick={() => SetSubmenu("quality")}
-                    className={CommonStyles["menu-option"]}>
+            <button
+              autoFocus role="menuitem"
+              onClick={() => SetSubmenu("quality")}
+              className={CommonStyles["menu-option"]}
+            >
               {`${settings.quality.label}: ${(options.quality.active && options.quality.active.activeLabel) || ""}`}
               <SVG icon={Icons.ChevronRightIcon} className={CommonStyles["menu-option-icon"]}/>
             </button>
         }
         {
           !options.hasAudioOptions ? null :
-            <button autoFocus={!options.hasQualityOptions} role="menuitem" onClick={() => SetSubmenu("audio")} className={CommonStyles["menu-option"]}>
+            <button
+              autoFocus={!options.hasQualityOptions}
+              role="menuitem"
+              onClick={() => SetSubmenu("audio")}
+              className={CommonStyles["menu-option"]}
+            >
               {`${settings.audio.label}: ${(options.audio.active && options.audio.active.label) || ""}`}
               <SVG icon={Icons.ChevronRightIcon} className={CommonStyles["menu-option-icon"]}/>
             </button>
         }
         {
           !options.hasTextOptions ? null :
-            <button autoFocus={!options.hasQualityOptions && !options.hasAudioOptions} role="menuitem" onClick={() => SetSubmenu("text")} className={CommonStyles["menu-option"]}>
+            <button
+              autoFocus={!options.hasQualityOptions && !options.hasAudioOptions}
+              role="menuitem"
+              onClick={() => SetSubmenu("text")}
+              className={CommonStyles["menu-option"]}
+            >
               {`${settings.text.label}: ${(options.text.active && options.text.active.label) || ""}`}
               <SVG icon={Icons.ChevronRightIcon} className={CommonStyles["menu-option-icon"]}/>
             </button>
         }
         {
           !options.hasProfileOptons ? null :
-            <button autoFocus={!options.hasQualityOptions && !options.hasAudioOptions && !options.hasTextOptions} role="menuitem" onClick={() => SetSubmenu("profile")} className={CommonStyles["menu-option"]}>
+            <button
+              autoFocus={!options.hasQualityOptions && !options.hasAudioOptions && !options.hasTextOptions}
+              role="menuitem"
+              onClick={() => SetSubmenu("profile")}
+              className={CommonStyles["menu-option"]}
+            >
               {`${settings.profile.label}: ${(options.profile.active && options.profile.active.label) || ""}`}
               <SVG icon={Icons.ChevronRightIcon} className={CommonStyles["menu-option-icon"]}/>
             </button>
         }
         {
           !options.hasRateOptions ? null :
-            <button autoFocus={!options.hasQualityOptions && !options.hasAudioOptions && !options.hasTextOptions && !options.hasProfileOptons} role="menuitem" onClick={() => SetSubmenu("rate")} className={CommonStyles["menu-option"]}>
+            <button
+              autoFocus={!options.hasQualityOptions && !options.hasAudioOptions && !options.hasTextOptions && !options.hasProfileOptons}
+              role="menuitem"
+              onClick={() => SetSubmenu("rate")}
+              className={CommonStyles["menu-option"]}
+            >
               {`${settings.rate.label}: ${(options.rate.active && options.rate.active.label) || ""}`}
               <SVG icon={Icons.ChevronRightIcon} className={CommonStyles["menu-option-icon"]}/>
             </button>
         }
+        <button
+          autoFocus={!options.hasRateOptions && !options.hasQualityOptions && !options.hasAudioOptions && !options.hasTextOptions && !options.hasProfileOptons}
+          role="button"
+          onClick={() => SetSubmenu("advanced")}
+          className={CommonStyles["menu-option"]}
+        >
+          { settings.advanced.label }
+          <SVG icon={Icons.ChevronRightIcon} className={CommonStyles["menu-option-icon"]}/>
+        </button>
       </div>
     );
   }
 
   return (
     <div ref={menuRef}>
-      { content }
+      {content}
     </div>
   );
 };
@@ -302,7 +370,7 @@ export const DVRToggle = ({player}) => {
     const disposer = player.controls.RegisterSettingsListener(() => {
       if(!player.controls) { return; }
 
-      setDVREnabled(player.controls.IsDVREnabled())
+      setDVREnabled(player.controls.IsDVREnabled());
     });
 
     return () => disposer && disposer();
@@ -327,21 +395,6 @@ export const DVRToggle = ({player}) => {
   );
 };
 
-export const Copy = async (value) => {
-  try {
-    value = (value || "").toString();
-
-    await navigator.clipboard.writeText(value);
-  } catch(error) {
-    const input = document.createElement("input");
-
-    input.value = value;
-    input.select();
-    input.setSelectionRange(0, 99999);
-    document.execCommand("copy");
-  }
-};
-
 export const CopyButton = ({label, value, className=""}) => {
   const [copied, setCopied] = useState(false);
 

package/lib/ui/PlayerUI.jsx

@@ -15,11 +15,12 @@ import {
 } from "./Observers.js";
 import WebControls from "./WebControls.jsx";
 import TicketForm from "./TicketForm.jsx";
-import {Spinner, UserActionIndicator} from "./Components.jsx";
+import {Copy, Spinner, SVG, UserActionIndicator} from "./Components.jsx";
 import TVControls from "./TVControls.jsx";
 import PlayerProfileForm from "./PlayerProfileForm.jsx";
 import {ImageUrl, MergeDefaultParameters} from "./Common.js";
 import {ChromecastIcon} from "../static/icons/Icons.js";
+import * as Icons from "../static/icons/Icons";
 
 const Poster = ({player}) => {
   const [imageUrl, setImageUrl] = useState(undefined);
@@ -249,7 +250,18 @@ const PlayerUI = ({target, parameters, InitCallback, ErrorCallback, Unmount, Res
       }
       {
         !errorMessage ? null :
-          <div className={PlayerStyles["error-message"]}>{ errorMessage }</div>
+          <div className={PlayerStyles["error-message"]}>
+            <div className={PlayerStyles["error-message__message"]}>
+              { errorMessage }
+            </div>
+            <button
+              className={PlayerStyles["error-message__copy-debug-button"]}
+              onClick={() => Copy(JSON.stringify(player.controls.GetDebugInfo(), null, 2))}
+            >
+              <SVG icon={Icons.InfoIcon} className={PlayerStyles["error-message__icon"]}/>
+              Copy Troubleshooting Info
+            </button>
+          </div>
       }
       {
         !player ? null :

package/package.json

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