@eluvio/elv-player-js 1.0.85 → 1.0.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eluvio/elv-player-js",
-  "version": "1.0.85",
+  "version": "1.0.87",
   "description": "![Eluvio Logo](src/static/images/Logo.png \"Eluvio Logo\")",
   "main": "src/index.js",
   "license": "MIT",

package/src/PlayerControls.js

@@ -8,6 +8,7 @@ import MutedIcon from "./static/icons/media/no volume icon.svg";
 import VolumeLowIcon from "./static/icons/media/low volume icon.svg";
 import VolumeHighIcon from "./static/icons/media/Volume icon.svg";
 import MultiViewIcon from "./static/icons/multiview.svg";
+import LeftArrow from "./static/icons/arrow-left.svg";
 
 import Logo from "./static/images/ELUV.IO white 20 px V2.png";
 
@@ -122,7 +123,6 @@ class PlayerControls {
       };
     }
 
-    this.settingsMenuContent = "none";
     this.timeouts = {};
     this.played = false;
     this.controlsHover = false;
@@ -487,7 +487,11 @@ class PlayerControls {
       classes: ["eluvio-player__controls__slider-container__input", "eluvio-player__controls__progress-slider"]
     });
 
-    progressSlider.addEventListener("input", () => this.video.currentTime = this.video.duration * parseFloat(progressSlider.value));
+    progressSlider.addEventListener("input", () => {
+      if(!this.video.duration) { return; }
+
+      this.video.currentTime = this.video.duration * parseFloat(progressSlider.value || 0);
+    });
 
     // Progress Bar
     const progressBar = CreateElement({
@@ -561,6 +565,7 @@ class PlayerControls {
       type: "div",
       classes: ["eluvio-player__controls__settings-menu", "eluvio-player__controls__settings-menu-hidden"]
     });
+    this.settingsMenu.setAttribute("data-mode", "hidden");
 
     this.target.addEventListener("keydown", event => event && (event.key || "").toLowerCase() === "escape" && this.HideSettingsMenu());
 
@@ -658,93 +663,83 @@ class PlayerControls {
     }
   }
 
-  HideSettingsMenu() {
-    if(this.settingsMenuContent === "settings") {
-      this.settingsButton.focus();
-    } else if(this.settingsMenuContent === "multiview") {
-      this.multiviewButton.focus();
-    }
-
-    this.settingsMenu.innerHTML = "";
-    this.settingsMenu.classList.add("eluvio-player__controls__settings-menu-hidden");
-    this.settingsMenuContent = "none";
-  }
+  AddSetting({Retrieve, Set}) {
+    if(!Retrieve) { return; }
 
-  ToggleSettings() {
-    this.settingsMenu.innerHTML = "";
+    const { label, options } = Retrieve();
 
-    if(this.settingsMenuContent === "settings") {
-      this.HideSettingsMenu();
-      return;
-    }
+    const currentOption = options.find(option => option.active);
 
-    this.settingsMenuContent = "settings";
-    this.settingsMenu.classList.remove("eluvio-player__controls__settings-menu-hidden");
+    const optionSelectionButton = CreateElement({
+      parent: this.settingsMenu,
+      type: Set ? "button" : "div",
+      classes: ["eluvio-player__controls__settings-menu__option"]
+    });
 
-    // Resolution settings
-    if(this.GetLevels) {
-      const levels = this.GetLevels();
+    optionSelectionButton.innerHTML = currentOption && currentOption.activeLabel || label;
 
-      const currentLevel = levels.find(level => level.active);
+    if(Set) {
+      optionSelectionButton.addEventListener("click", () => {
+        this.settingsMenu.innerHTML = "";
+        this.settingsMenu.setAttribute("data-mode", "settings-submenu");
 
-      if(currentLevel) {
-        const resolutionButton = CreateElement({
+        const backButton = CreateElement({
           parent: this.settingsMenu,
-          type: this.SetLevel ? "button" : "div",
-          classes: ["eluvio-player__controls__settings-menu__option"]
+          type: "button",
+          classes: ["eluvio-player__controls__settings-menu__option", "eluvio-player__controls__settings-menu__option-back"],
         });
 
-        if(currentLevel.audioTrack) {
-          resolutionButton.innerHTML = `Quality: ${currentLevel.bitrate / 1000}kbps`;
-        } else {
-          resolutionButton.innerHTML = `Resolution: ${currentLevel.resolution}`;
-        }
+        CreateElement({
+          parent: backButton,
+          type: "svg"
+        }).innerHTML = LeftArrow;
 
-        if(this.SetLevel) {
-          resolutionButton.addEventListener("click", () => {
-            this.settingsMenu.innerHTML = "";
+        CreateElement({
+          parent: backButton,
+        }).innerHTML = label;
 
-            const autoLevel = CreateElement({
+        backButton.addEventListener("click", () => this.ShowSettingsMenu());
+
+        options
+          .forEach(option => {
+            const optionButton = CreateElement({
               parent: this.settingsMenu,
               type: "button",
-              classes: ["eluvio-player__controls__settings-menu__option"]
+              classes: ["eluvio-player__controls__settings-menu__option", option.active ? "eluvio-player__controls__settings-menu__option-selected" : ""]
             });
 
-            autoLevel.innerHTML = "Auto";
-            autoLevel.addEventListener("click", () => {
-              this.SetLevel(-1);
+            optionButton.innerHTML = option.label;
+
+            optionButton.addEventListener("click", () => {
+              Set(option.index);
               this.HideSettingsMenu();
             });
-
-            levels
-              .sort((a, b) => a.bitrate < b.bitrate ? 1 : -1)
-              .forEach(level => {
-                const levelOption = CreateElement({
-                  parent: this.settingsMenu,
-                  type: "button",
-                  classes: ["eluvio-player__controls__settings-menu__option", level.active ? "eluvio-player__controls__settings-menu__option-selected" : ""]
-                });
-
-                if(level.audioTrack) {
-                  levelOption.innerHTML = `${level.bitrate / 1000}kbps`;
-                } else {
-                  levelOption.innerHTML = `${level.resolution} (${(level.bitrate / 1000 / 1000).toFixed(1)}Mbps)`;
-                }
-
-                levelOption.addEventListener("click", () => {
-                  this.SetLevel(level.index);
-                  this.HideSettingsMenu();
-                });
-              });
-
-            // Focus on first element in list when menu opened
-            const firstItem = this.settingsMenu.querySelector("button");
-            if(firstItem) {
-              firstItem.focus();
-            }
           });
+
+        // Focus on first element in list when menu opened
+        const firstItem = this.settingsMenu.querySelector("button");
+        if(firstItem) {
+          firstItem.focus();
         }
-      }
+      });
+    }
+  }
+
+  ShowSettingsMenu() {
+    this.settingsMenu.innerHTML = "";
+    this.settingsMenu.classList.remove("eluvio-player__controls__settings-menu-hidden");
+    this.settingsMenu.setAttribute("data-mode", "settings");
+
+    if(this.GetLevels) {
+      this.AddSetting({Retrieve: this.GetLevels, Set: this.SetLevel});
+    }
+
+    if(this.GetAudioTracks) {
+      this.AddSetting({Retrieve: this.GetAudioTracks, Set: this.SetAudioTrack});
+    }
+
+    if(this.GetTextTracks) {
+      this.AddSetting({Retrieve: this.GetTextTracks, Set: this.SetTextTrack});
     }
 
     // Focus on first element in list when menu opened
@@ -754,30 +749,75 @@ class PlayerControls {
     }
   }
 
-  InitializeSettingsButton() {
-    if(this.settingsButton) { return; }
+  HideSettingsMenu() {
+    const mode = this.settingsMenu.dataset.mode;
+    if(mode === "settings") {
+      this.settingsButton.focus();
+    } else if(mode === "multiview") {
+      this.multiviewButton.focus();
+    }
 
-    this.settingsButton = CreateImageButton({
-      parent: this.rightButtonsContainer,
-      svg: SettingsIcon,
-      classes: ["eluvio-player__controls__button-settings"],
-      prepend: true,
-      label: "Settings"
-    });
+    this.settingsMenu.innerHTML = "";
+    this.settingsMenu.classList.add("eluvio-player__controls__settings-menu-hidden");
+    this.settingsMenu.setAttribute("data-mode", "hidden");
+  }
+
+  UpdateSettings() {
+    if(!this.settingsButton) {
+      this.settingsButton = CreateImageButton({
+        parent: this.rightButtonsContainer,
+        svg: SettingsIcon,
+        classes: ["eluvio-player__controls__button-settings"],
+        prepend: true,
+        label: "Settings"
+      });
+
+      this.settingsButton.addEventListener("click", () => {
+        this.settingsMenu.dataset.mode === "hidden" ?
+          this.ShowSettingsMenu() :
+          this.HideSettingsMenu();
+      });
+    }
 
-    this.settingsButton.addEventListener("click", () => this.ToggleSettings());
+    if(this.settingsMenu.dataset.mode === "settings") {
+      this.ShowSettingsMenu();
+    }
   }
 
-  SetQualityControls({GetLevels, SetLevel}) {
+  SetAudioTrackControls({GetAudioTracks, SetAudioTrack}) {
     if([EluvioPlayerParameters.controls.OFF, EluvioPlayerParameters.controls.OFF_WITH_VOLUME_TOGGLE, EluvioPlayerParameters.controls.DEFAULT].includes(this.playerOptions.controls)) {
       // Controls disabled
       return;
     }
 
-    this.InitializeSettingsButton();
+    this.GetAudioTracks = GetAudioTracks;
+    this.SetAudioTrack = SetAudioTrack;
+
+    this.UpdateSettings();
+  }
+
+  SetTextTrackControls({GetTextTracks, SetTextTrack}) {
+    if([EluvioPlayerParameters.controls.OFF, EluvioPlayerParameters.controls.OFF_WITH_VOLUME_TOGGLE, EluvioPlayerParameters.controls.DEFAULT].includes(this.playerOptions.controls)) {
+      // Controls disabled
+      return;
+    }
+
+    this.GetTextTracks = GetTextTracks;
+    this.SetTextTrack = SetTextTrack;
+
+    this.UpdateSettings();
+  }
+
+  SetQualityControls({GetLevels, SetLevel}) {
+    if([EluvioPlayerParameters.controls.OFF, EluvioPlayerParameters.controls.OFF_WITH_VOLUME_TOGGLE, EluvioPlayerParameters.controls.DEFAULT].includes(this.playerOptions.controls)) {
+      // Controls disabled
+      return;
+    }
 
     this.GetLevels = GetLevels;
     this.SetLevel = SetLevel;
+
+    this.UpdateSettings();
   }
 
   InitializeMultiViewControls({AvailableViews, SwitchView}) {
@@ -823,12 +863,12 @@ class PlayerControls {
   async ToggleMultiviewControls({AvailableViews, SwitchView}={}) {
     this.settingsMenu.innerHTML = "";
 
-    if(this.settingsMenuContent === "multiview") {
+    if(this.settingsMenu.dataset.mode === "multiview") {
       this.HideSettingsMenu();
       return;
     }
 
-    this.settingsMenuContent = "multiview";
+    this.settingsMenu.setAttribute("data-mode", "multiview");
     this.settingsMenu.classList.remove("eluvio-player__controls__settings-menu-hidden");
 
     const views = await AvailableViews();

package/src/index.js

@@ -118,7 +118,7 @@ const DefaultParameters = {
     hlsjsOptions: undefined,
     dashjsOptions: undefined,
     // eslint-disable-next-line no-unused-vars
-    playerCallback: ({videoElement, hlsPlayer, dashPlayer, posterUrl}) => {},
+    playerCallback: ({player, videoElement, hlsPlayer, dashPlayer, posterUrl}) => {},
     errorCallback: (error) => {
       // eslint-disable-next-line no-console
       console.error("ELUVIO PLAYER: Error");
@@ -138,6 +138,8 @@ export class EluvioPlayer {
     this.DetectRemoval = this.DetectRemoval.bind(this);
 
     this.Initialize(target, parameters);
+
+    window.EluvioPlayer = this;
   }
 
   Log(message, error=false) {
@@ -269,6 +271,7 @@ export class EluvioPlayer {
         const imageMetadata = await client.ContentObjectMetadata({
           versionHash: targetHash,
           metadataSubtree: "public",
+          authorizationToken: this.sourceOptions.playoutParameters.authorizationToken,
           select: [
             "display_image",
             "asset_metadata/nft/image"
@@ -319,8 +322,6 @@ export class EluvioPlayer {
           offeringURI,
           options
         });
-
-        window.playoutOptions = this.sourceOptions.playoutOptions;
       }
     } else {
       if(!this.sourceOptions.playoutOptions) {
@@ -328,8 +329,6 @@ export class EluvioPlayer {
           ...this.sourceOptions.playoutParameters,
           options
         });
-
-        window.playoutOptions = this.sourceOptions.playoutOptions;
       }
     }
 
@@ -584,186 +583,359 @@ export class EluvioPlayer {
         this.sourceOptions.playoutParameters.authorizationToken ||
         playoutUrl.query(true).authorization;
 
-      //const HLSPlayer = (await import("hls.js")).default;
-      const HLSPlayer = (await import("hls-fix")).default;
-
-      let hlsPlayer, dashPlayer;
-      if(drm === "fairplay") {
-        InitializeFairPlayStream({playoutOptions: this.sourceOptions.playoutOptions, video: this.video});
+      if(protocol === "hls") {
+        await this.InitializeHLS({playoutUrl, authorizationToken, drm, drms, multiviewOptions, controlsPromise});
+      } else {
+        await this.InitializeDash({playoutUrl, authorizationToken, drm, drms, multiviewOptions, controlsPromise});
+      }
 
-        if(multiviewOptions.enabled) { controlsPromise.then(() => this.controls.InitializeMultiViewControls(multiviewOptions)); }
-      } else if(!HLSPlayer.isSupported() || drm === "sample-aes") {
-        this.video.src = playoutUrl.toString();
+      if(this.playerOptions.playerCallback) {
+        this.playerOptions.playerCallback({
+          player: this,
+          videoElement: this.video,
+          hlsPlayer: this.hlsPlayer,
+          dashPlayer: this.dashPlayer,
+          posterUrl: this.posterUrl
+        });
+      }
 
-        if(multiviewOptions.enabled) { controlsPromise.then(() => this.controls.InitializeMultiViewControls(multiviewOptions)); }
-      } else if(protocol === "hls") {
-        playoutUrl.removeQuery("authorization");
+      if(this.playerOptions.autoplay === EluvioPlayerParameters.autoplay.ON) {
+        this.video.play();
 
-        // Inject
-        hlsPlayer = new HLSPlayer({
-          maxBufferLength: 30,
-          maxBufferSize: 300,
-          enableWorker: true,
-          capLevelToPlayerSize: this.playerOptions.capLevelToPlayerSize,
-          xhrSetup: xhr => {
-            xhr.setRequestHeader("Authorization", `Bearer ${authorizationToken}`);
+        setTimeout(() => {
+          if(this.playerOptions.muted === EluvioPlayerParameters.muted.OFF_IF_POSSIBLE && this.video.paused && !this.video.muted) {
+            this.video.muted = true;
+            this.video.play();
+          }
+        }, 250);
+      }
 
-            if((this.playerOptions.hlsjsOptions || {}).xhrSetup) {
-              this.playerOptions.hlsjsOptions.xhrSetup(xhr);
-            }
+      this.RegisterVisibilityCallback();
 
-            return xhr;
-          },
-          ...(this.playerOptions.hlsjsOptions || {})
-        });
-        hlsPlayer.loadSource(playoutUrl.toString());
-        hlsPlayer.attachMedia(this.video);
+      if(this.__destroyed) {
+        // If Destroy was called during the initialization process, ensure that the player is properly destroyed
+        this.Destroy();
+      }
+    } catch (error) {
+      this.playerOptions.errorCallback(error);
 
-        if(multiviewOptions.enabled) {
-          const Switch = multiviewOptions.SwitchView;
+      if(error.status === 500) {
+        this.HardReload(error, 10000);
+      }
+    }
+  }
 
-          multiviewOptions.SwitchView = async (view) => {
-            await Switch(view);
-            hlsPlayer.nextLevel = hlsPlayer.currentLevel;
-          };
+  async InitializeHLS({playoutUrl, authorizationToken, drm, multiviewOptions, controlsPromise}) {
+    const HLSPlayer = (await import("hls-fix")).default;
 
-          controlsPromise.then(() => this.controls.InitializeMultiViewControls(multiviewOptions));
-        }
+    if(drm === "fairplay") {
+      InitializeFairPlayStream({playoutOptions: this.sourceOptions.playoutOptions, video: this.video});
 
-        if(this.controls) {
-          window.hls = hlsPlayer;
-          this.controls.SetQualityControls({
-            GetLevels: () => hlsPlayer.levels.map((level, index) => ({
-              index,
-              active: index === hlsPlayer.currentLevel,
-              resolution: level.attrs.RESOLUTION,
-              bitrate: level.bitrate,
-              audioTrack: !level.videoCodec
-            })),
-            SetLevel: levelIndex => hlsPlayer.nextLevel = levelIndex
-          });
-        }
+      if(multiviewOptions.enabled) { controlsPromise.then(() => this.controls.InitializeMultiViewControls(multiviewOptions)); }
+      this.UpdateTextTracks();
+    } else if(!HLSPlayer.isSupported() || drm === "sample-aes") {
+      this.video.src = playoutUrl.toString();
 
-        hlsPlayer.on(HLSPlayer.Events.FRAG_LOADED, () => {
-          this.errors = 0;
-          clearTimeout(this.bufferFullRestartTimeout);
-        });
+      if(multiviewOptions.enabled) { controlsPromise.then(() => this.controls.InitializeMultiViewControls(multiviewOptions)); }
+    } else {
+      playoutUrl.removeQuery("authorization");
+
+      // Inject
+      const hlsPlayer = new HLSPlayer({
+        maxBufferLength: 30,
+        maxBufferSize: 300,
+        enableWorker: true,
+        capLevelToPlayerSize: this.playerOptions.capLevelToPlayerSize,
+        xhrSetup: xhr => {
+          xhr.setRequestHeader("Authorization", `Bearer ${authorizationToken}`);
+
+          if((this.playerOptions.hlsjsOptions || {}).xhrSetup) {
+            this.playerOptions.hlsjsOptions.xhrSetup(xhr);
+          }
 
-        hlsPlayer.on(HLSPlayer.Events.ERROR, async (event, error) => {
-          this.errors += 1;
+          return xhr;
+        },
+        ...(this.playerOptions.hlsjsOptions || {})
+      });
+      hlsPlayer.loadSource(playoutUrl.toString());
+      hlsPlayer.attachMedia(this.video);
 
-          this.Log(`Encountered ${error.details}`);
-          this.Log(error);
+      if(multiviewOptions.enabled) {
+        const Switch = multiviewOptions.SwitchView;
 
-          if(error.details === "bufferFullError") {
-            this.bufferFullRestartTimeout = setTimeout(() => {
-              this.Log("Buffer full error - Restarting player", true);
-              this.HardReload(error, 5000);
-            }, 3000);
-          }
+        multiviewOptions.SwitchView = async (view) => {
+          await Switch(view);
+          hlsPlayer.nextLevel = hlsPlayer.currentLevel;
+        };
 
-          if(error.details === "bufferStalledError") {
-            const stallTime = this.video.currentTime;
+        controlsPromise.then(() => this.controls.InitializeMultiViewControls(multiviewOptions));
+      }
 
-            setTimeout(() => {
-              if(!this.video.paused && this.video.currentTime === stallTime) {
-                this.Log("Buffer stalled error, no progress in 5 seconds - Restarting player", true);
+      if(this.controls) {
+        const UpdateQualityOptions = () => {
+          try {
+            this.controls.SetQualityControls({
+              GetLevels: () => {
+                let levels = hlsPlayer.levels
+                  .map((level, index) => ({
+                    index,
+                    active: hlsPlayer.currentLevel === index,
+                    resolution: level.attrs.RESOLUTION,
+                    bitrate: level.bitrate,
+                    audioTrack: !level.videoCodec,
+                    label:
+                      level.audioTrack ?
+                        `${level.bitrate / 1000}kbps` :
+                        `${level.attrs.RESOLUTION} (${(level.bitrate / 1000 / 1000).toFixed(1)}Mbps)`,
+                    activeLabel:
+                      level.audioTrack ?
+                        `Quality: ${level.bitrate / 1000}kbps` :
+                        `Quality: ${level.attrs.RESOLUTION}`
+                  }))
+                  .sort((a, b) => a.bitrate < b.bitrate ? 1 : -1);
+
+                levels.unshift({index: -1, label: "Auto"});
+
+                return {label: "Quality", options: levels};
+              },
+              SetLevel: levelIndex => {
+                hlsPlayer.nextLevel = levelIndex;
+                hlsPlayer.streamController.immediateLevelSwitch();
               }
-            }, 5000);
+            });
+          } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error("ELUVIO PLAYER:", error);
           }
-
-          if(error.fatal || this.errors === 3) {
-            if(error.response.code === 403) {
-              // Not allowed to access
-              this.Destroy();
-            } else {
-              this.HardReload(error);
+        };
+
+        hlsPlayer.on(HLSPlayer.Events.SUBTITLE_TRACKS_UPDATED, () => this.UpdateTextTracks());
+        hlsPlayer.on(HLSPlayer.Events.LEVEL_LOADED, () => UpdateQualityOptions());
+        hlsPlayer.on(HLSPlayer.Events.LEVEL_SWITCHED, () => UpdateQualityOptions());
+        hlsPlayer.on(HLSPlayer.Events.SUBTITLE_TRACK_SWITCH, () => this.UpdateTextTracks());
+        hlsPlayer.on(HLSPlayer.Events.AUDIO_TRACKS_UPDATED, () => {
+          this.controls.SetAudioTrackControls({
+            GetAudioTracks: () => {
+              const tracks = hlsPlayer.audioTracks.map(track => ({
+                index: track.id,
+                label: track.name,
+                active: track.id === hlsPlayer.audioTrack,
+                activeLabel: `Audio: ${track.name}`
+              }));
+
+              return {label: "Audio Track", options: tracks};
+            },
+            SetAudioTrack: index => {
+              hlsPlayer.audioTrack = index;
+              hlsPlayer.streamController.immediateLevelSwitch();
             }
-          }
+          });
         });
+      }
 
-        this.player = hlsPlayer;
-      } else {
-        const DashPlayer = (await import("dashjs")).default;
-        dashPlayer = DashPlayer.MediaPlayer().create();
-
-        if(this.playerOptions.capLevelToPlayerSize) {
-          dashPlayer.updateSettings({
-            "streaming": {
-              "abr": {
-                "limitBitrateByPortal": true
-              }
+      hlsPlayer.on(HLSPlayer.Events.FRAG_LOADED, () => {
+        this.errors = 0;
+        clearTimeout(this.bufferFullRestartTimeout);
+      });
+
+      hlsPlayer.on(HLSPlayer.Events.ERROR, async (event, error) => {
+        this.errors += 1;
+
+        this.Log(`Encountered ${error.details}`);
+        this.Log(error);
+
+        if(error.details === "bufferFullError") {
+          this.bufferFullRestartTimeout = setTimeout(() => {
+            this.Log("Buffer full error - Restarting player", true);
+            this.HardReload(error, 5000);
+          }, 3000);
+        }
+
+        if(error.details === "bufferStalledError") {
+          const stallTime = this.video.currentTime;
+
+          setTimeout(() => {
+            if(!this.video.paused && this.video.currentTime === stallTime) {
+              this.Log("Buffer stalled error, no progress in 5 seconds - Restarting player", true);
             }
-          });
+          }, 5000);
         }
 
-        playoutUrl.removeQuery("authorization");
-        dashPlayer.extend("RequestModifier", function () {
-          return {
-            modifyRequestHeader: xhr => {
-              xhr.setRequestHeader("Authorization", `Bearer ${authorizationToken}`);
+        if(error.fatal || this.errors === 3) {
+          if(error.response.code === 403) {
+            // Not allowed to access
+            this.Destroy();
+          } else {
+            this.HardReload(error);
+          }
+        }
+      });
 
-              return xhr;
-            },
-            modifyRequestURL: url => url
-          };
-        });
+      this.hlsPlayer = hlsPlayer;
+      this.player = hlsPlayer;
+    }
+  }
 
-        // Widevine
-        if(drm === EluvioPlayerParameters.drms.WIDEVINE) {
-          const widevineUrl = drms.widevine.licenseServers[0];
+  async InitializeDash({playoutUrl, authorizationToken, drm, drms, multiviewOptions, controlsPromise}) {
+    const DashPlayer = (await import("dashjs")).default;
+    const dashPlayer = DashPlayer.MediaPlayer().create();
 
-          dashPlayer.setProtectionData({
-            "com.widevine.alpha": {
-              "serverURL": widevineUrl
-            }
-          });
+    if(this.playerOptions.capLevelToPlayerSize) {
+      dashPlayer.updateSettings({
+        "streaming": {
+          "fastSwitchEnabled": true,
+          "abr": {
+            "limitBitrateByPortal": true
+          }
         }
+      });
+    }
 
-        dashPlayer.initialize(
-          this.video,
-          playoutUrl.toString(),
-          this.playerOptions.autoplay === EluvioPlayerParameters.autoplay.ON
-        );
+    playoutUrl.removeQuery("authorization");
+    dashPlayer.extend("RequestModifier", function () {
+      return {
+        modifyRequestHeader: xhr => {
+          xhr.setRequestHeader("Authorization", `Bearer ${authorizationToken}`);
 
-        if(multiviewOptions.enabled) { controlsPromise.then(() => this.controls.InitializeMultiViewControls(multiviewOptions)); }
+          return xhr;
+        },
+        modifyRequestURL: url => url
+      };
+    });
 
-        this.player = dashPlayer;
-      }
+    // Widevine
+    if(drm === EluvioPlayerParameters.drms.WIDEVINE) {
+      const widevineUrl = drms.widevine.licenseServers[0];
 
-      if(this.playerOptions.playerCallback) {
-        this.playerOptions.playerCallback({
-          videoElement: this.video,
-          hlsPlayer,
-          dashPlayer,
-          posterUrl: this.posterUrl
+      dashPlayer.setProtectionData({
+        "com.widevine.alpha": {
+          "serverURL": widevineUrl
+        }
+      });
+    }
+
+    dashPlayer.initialize(
+      this.video,
+      playoutUrl.toString(),
+      this.playerOptions.autoplay === EluvioPlayerParameters.autoplay.ON
+    );
+
+    if(multiviewOptions.enabled) { controlsPromise.then(() => this.controls.InitializeMultiViewControls(multiviewOptions)); }
+
+    const UpdateQualityOptions = () => {
+      try {
+        this.controls.SetQualityControls({
+          GetLevels: () => {
+            let levels = dashPlayer.getBitrateInfoListFor("video")
+              .map((level) => ({
+                index: level.qualityIndex,
+                active: level.qualityIndex === this.player.getQualityFor("video"),
+                resolution: `${level.width}x${level.height}`,
+                bitrate: level.bitrate,
+                label: `${level.width}x${level.height} (${(level.bitrate / 1000 / 1000).toFixed(1)}Mbps)`,
+                activeLabel: `Quality: ${level.width}x${level.height}`,
+              }))
+              .sort((a, b) => a.bitrate < b.bitrate ? 1 : -1);
+
+            levels.unshift({index: -1, label: "Auto"});
+
+            return { label: "Quality", options: levels };
+          },
+          SetLevel: levelIndex => {
+            dashPlayer.setQualityFor("video", levelIndex);
+            dashPlayer.updateSettings({
+              streaming: {
+                trackSwitchMode: "alwaysReplace",
+                fastSwitchEnabled: true,
+                abr: {
+                  autoSwitchBitrate: {
+                    video: levelIndex === -1
+                  }
+                }
+              }
+            });
+          }
         });
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error("ELUVIO PLAYER:", error);
       }
+    };
 
-      if(this.playerOptions.autoplay === EluvioPlayerParameters.autoplay.ON) {
-        this.video.play();
+    const UpdateAudioTracks = () => {
+      this.controls.SetAudioTrackControls({
+        GetAudioTracks: () => {
+          const tracks = this.player.getTracksFor("audio").map(track => ({
+            index: track.index,
+            label: track.labels && track.labels.length > 0 ? track.labels[0].text : track.lang,
+            active: track.index === dashPlayer.getCurrentTrackFor("audio").index,
+            activeLabel: `Audio: ${track.labels && track.labels.length > 0 ? track.labels[0].text : track.lang}`
+          }));
+
+          return { label: "Audio Track", options: tracks };
+        },
+        SetAudioTrack: index => {
+          const track = dashPlayer.getTracksFor("audio").find(track => track.index === index);
+          dashPlayer.setCurrentTrack(track);
+        }
+      });
+    };
 
-        setTimeout(() => {
-          if(this.playerOptions.muted === EluvioPlayerParameters.muted.OFF_IF_POSSIBLE && this.video.paused && !this.video.muted) {
-            this.video.muted = true;
-            this.video.play();
-          }
-        }, 250);
-      }
+    dashPlayer.on(DashPlayer.MediaPlayer.events.QUALITY_CHANGE_RENDERED, () => UpdateQualityOptions());
+    dashPlayer.on(DashPlayer.MediaPlayer.events.TRACK_CHANGE_RENDERED, () => {
+      UpdateAudioTracks();
+      this.UpdateTextTracks({dashPlayer});
+    });
+    dashPlayer.on(DashPlayer.MediaPlayer.events.MANIFEST_LOADED, () => {
+      UpdateQualityOptions();
+      UpdateAudioTracks();
+      this.UpdateTextTracks({dashPlayer});
+    });
+
+    this.player = dashPlayer;
+    this.dashPlayer = dashPlayer;
+  }
 
-      this.RegisterVisibilityCallback();
+  UpdateTextTracks({dashPlayer}={}) {
+    this.controls.SetTextTrackControls({
+      GetTextTracks: () => {
+        const activeTrackIndex = Array.from(this.video.textTracks).findIndex(track => track.mode === "showing");
+
+        let tracks;
+        if(dashPlayer) {
+          tracks = dashPlayer.getTracksFor("text").map((track, index) => ({
+            index: index,
+            label: track.labels && track.labels.length > 0 ? track.labels[0].text : track.lang,
+            active: index === activeTrackIndex,
+            activeLabel: `Subtitles: ${track.labels && track.labels.length > 0 ? track.labels[0].text : track.lang}`
+          }));
+        } else {
+          tracks = Array.from(this.video.textTracks).map((track, index) => ({
+            index: index,
+            label: track.label || track.language,
+            active: track.mode === "showing",
+            activeLabel: `Subtitles: ${track.label || track.language}`
+          }));
+        }
 
-      if(this.__destroyed) {
-        // If Destroy was called during the initialization process, ensure that the player is properly destroyed
-        this.Destroy();
-      }
-    } catch (error) {
-      this.playerOptions.errorCallback(error);
+        tracks.unshift({
+          index: -1,
+          label: "Disabled",
+          active: activeTrackIndex < 0,
+          activeLabel: "Subtitles: Disabled"
+        });
 
-      if(error.status === 500) {
-        this.HardReload(error, 10000);
+        return { label: "Subtitles", options: tracks };
+      },
+      SetTextTrack: index => {
+        const tracks = Array.from(this.video.textTracks);
+        tracks.map(track => track.mode = "disabled");
+
+        if(index >= 0) {
+          tracks[index].mode = "showing";
+        }
       }
-    }
+    });
   }
 }
 

package/src/static/icons/arrow-left.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M1.5 8L24 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8.5 1L1.5 8L8.5 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/static/stylesheets/player.scss

@@ -6,6 +6,8 @@ $black: #000;
 
 $background-color: $black;
 $controls-color: rgba(0, 0, 0, 0.4);
+$menu-color: rgba(0, 0, 0, 0.8);
+$menu-active-color: rgba(255, 255, 255, 0.1);
 $button-color: rgba($white, 0.8);
 $progress-color: #0885fb;
 $slider-color: rgba($gray, 0.5);
@@ -343,7 +345,7 @@ $button-height: 35px;
     }
 
     &__settings-menu {
-      background: $controls-color;
+      background: $menu-color;
       border-radius: 3px;
       bottom: 45px;
       color: $button-color;
@@ -352,7 +354,7 @@ $button-height: 35px;
       overflow-y: auto;
       position: absolute;
       right: 10px;
-      width: 200px;
+      width: 250px;
       z-index: 100;
 
       &-hidden {
@@ -369,16 +371,34 @@ $button-height: 35px;
         cursor: pointer;
         display: block;
         font-size: 14px;
-        height: 100%;
+        height: max-content;
+        line-height: 1.4;
         padding: 9px 20px;
+        text-align: left;
         width: 100%;
 
+        &-back {
+          display: flex;
+          font-weight: 500;
+          width: 100%;
+
+          svg {
+            height: 15px;
+            margin-right: 5px;
+            width: 15px;
+          }
+
+          div {
+            width: 100%;
+          }
+        }
+
         &-selected {
           color: $button-color;
         }
 
         &:hover {
-          background: $controls-color;
+          background: $menu-active-color;
           color: $button-color;
         }
 
@@ -592,11 +612,13 @@ $button-height: 35px;
     }
 
     .eluvio-player__controls__button {
-      height: CALC(#{$button-height} * 0.9);
-      max-height: CALC(#{$button-height} * 0.9);
-      max-width: CALC(#{$button-height} * 0.9);
-      min-height: CALC(#{$button-height} * 0.9);
-      min-width: CALC(#{$button-height} * 0.9);
+      &:not(.eluvio-player__big-play-button) {
+        height: CALC(#{$button-height} * 0.9);
+        max-height: CALC(#{$button-height} * 0.9);
+        max-width: CALC(#{$button-height} * 0.9);
+        min-height: CALC(#{$button-height} * 0.9);
+        min-width: CALC(#{$button-height} * 0.9);
+      }
     }
 
     .eluvio-player__controls__volume-container {
@@ -604,10 +626,10 @@ $button-height: 35px;
     }
 
     .eluvio-player__big-play-button {
-      max-height: 75px;
-      max-width: 75px;
-      min-height: 75px;
-      min-width: 75px;
+      max-height: 55px;
+      max-width: 55px;
+      min-height: 55px;
+      min-width: 55px;
     }
 
     .eluvio-player__ticket-modal {
@@ -645,6 +667,14 @@ $button-height: 35px;
       }
     }
 
+    .eluvio-player__controls__settings-menu {
+      height: 100%;
+      padding: 20px 0;
+      right: 0;
+      top: 0;
+      width: 100%;
+    }
+
     .eluvio-player__hotspot-overlay {
       .eluvio-player__hotspot-overlay__target {
         .eluvio-player__hotspot-overlay__target__title {