@eluvio/elv-player-js 1.0.136 → 1.0.137

package/dist/style.css

@@ -0,0 +1 @@
+@keyframes fade-out{0%{opacity:1}to{opacity:0}}.eluvio-player{align-items:center;display:flex;height:100%;justify-content:center;max-height:100%;max-width:100%;object-fit:contain;position:relative;width:100%}.eluvio-player--error{background-color:#000}.eluvio-player--error .eluvio-player__big-play-button{display:none}.eluvio-player__error-message{align-items:center;display:flex;height:100%;justify-content:center;letter-spacing:.05em;padding:20px;position:absolute;-webkit-user-select:none;user-select:none;width:100%;z-index:1}.eluvio-player__error-message__text{color:#a32;font-size:20px;font-weight:300;max-width:600px;text-align:center}.eluvio-player--seek-left:after,.eluvio-player--seek-right:after{animation:fade-out .5s ease;content:"";height:100%;opacity:0;pointer-events:none;position:absolute;transition:background-color 1s ease;width:100%;z-index:100}.eluvio-player--seek-left:after{background:linear-gradient(90deg,rgba(100,100,100,.15),transparent 15%)}.eluvio-player--seek-right:after{background:linear-gradient(90deg,transparent 85%,rgba(100,100,100,.15))}.eluvio-player.eluvio-player-restarted .eluvio-player__big-play-button{display:none}.eluvio-player *{box-sizing:border-box;font-family:Helvetica Neue,Helvetica,sans-serif;overscroll-behavior-y:contain}.eluvio-player input[type=range],.eluvio-player button{background:transparent;border:0;cursor:pointer;justify-content:center}.eluvio-player input[type=range]:hover,.eluvio-player button:hover{opacity:1}.eluvio-player input[type=range]:disabled,.eluvio-player button:disabled{opacity:.5}.eluvio-player input[type=range]:focus,.eluvio-player button:focus{outline:0}.eluvio-player input[type=range].focus-visible,.eluvio-player button.focus-visible{box-shadow:0 0 2px #e1e1ffb3;outline:0}.eluvio-player input[type=range]{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border-radius:3px;height:3px;margin:0;padding:15px 0;z-index:100}.eluvio-player input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:15px;opacity:0;width:15px}.eluvio-player input[type=range]::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:15px;opacity:0;width:15px}.eluvio-player input[type=range]::-webkit-slider-runnable-track{-webkit-tap-highlight-color:transparent;background:transparent;height:3px}.eluvio-player input[type=range]::-moz-range-track{-webkit-tap-highlight-color:transparent;background:transparent;height:3px}.eluvio-player progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-radius:3px;height:3px}.eluvio-player ::-webkit-progress-value{background-color:#3784eb}.eluvio-player ::-webkit-progress-bar{background-color:transparent}.eluvio-player ::-moz-progress-bar{background-color:#3784eb}.eluvio-player__poster-image{cursor:pointer;height:100%;left:0;object-fit:contain;object-position:center;position:absolute;top:0;width:100%}.eluvio-player__video{background:#000;height:100%;margin:auto;object-fit:contain;object-position:center;width:100%;z-index:1}.eluvio-player__watermark{height:15px;pointer-events:none;position:absolute;right:15px;top:15px;width:auto;z-index:10}.eluvio-player__account-watermark{color:#fff;font-size:8px;opacity:.5;pointer-events:none;position:absolute;right:15px;top:15px;z-index:10}.eluvio-player__hidden-audio-controls{bottom:10px;height:max-content;left:10px;opacity:1;position:absolute;transition:opacity .25s linear;width:max-content;z-index:10}.eluvio-player__hidden-audio-controls button{background:#000c;border-radius:100%;padding:6px}.eluvio-player__title-container{background:linear-gradient(rgba(0,0,0,.5) 75%,transparent);color:#fff;display:grid;gap:5px;padding:10px 10px 20px;position:absolute;top:0;-webkit-user-select:none;user-select:none;width:100%;z-index:2}.eluvio-player__title{font-size:20px;padding-right:100px}.eluvio-player__description{font-size:12px;padding-right:100px}.eluvio-player__controls{align-items:center;background:#000c;bottom:0;display:flex;height:max-content;padding:5px;position:absolute;transition:opacity .25s linear;width:100%;z-index:10}.eluvio-player__controls__button{-webkit-tap-highlight-color:transparent;color:#fff;height:35px;max-height:35px;max-width:35px;min-height:35px;min-width:35px;overflow:visible;padding:6px;transition:opacity .25s linear,color .1s ease;width:35px}.eluvio-player__controls__button:not(:last-child){margin-right:2px}.eluvio-player__controls__button:disabled{opacity:.5}.eluvio-player__controls__button-volume{padding-right:0}.eluvio-player__controls__button--active{color:#3784eb}.eluvio-player__controls__button svg{height:100%;max-height:100%;max-width:100%;overflow:visible;width:100%}.eluvio-player__controls__button-multiview-spinning svg{animation:spin 1s ease-in-out infinite}.eluvio-player__controls__volume-container{flex:1 1 auto;max-width:75px;min-width:0}.eluvio-player__controls__volume{background-color:#71717180!important}.eluvio-player__controls__volume::-webkit-progress-value{background-color:#fff}.eluvio-player__controls__volume::-moz-progress-bar{background-color:#fff}.eluvio-player__controls__slider-container{align-items:center;display:flex;flex:1 1 auto;height:100%;justify-content:center;min-width:0;position:relative}.eluvio-player__controls__slider-container__input,.eluvio-player__controls__slider-container__progress{flex:1 1 auto;left:0;margin:0 5px;min-width:0;position:absolute;width:calc(100% - 10px)}.eluvio-player__controls__slider-container__input{width:100%;z-index:0}.eluvio-player__controls__slider-container__progress{pointer-events:none;z-index:2}.eluvio-player__controls__progress-buffer{background-color:#71717180!important;z-index:1}.eluvio-player__controls__progress-buffer::-webkit-progress-value{background-color:#71717180}.eluvio-player__controls__progress-buffer::-moz-progress-bar{background-color:#71717180}.eluvio-player__controls__time{color:#fff;font-size:11px;text-align:center;width:55px}.eluvio-player__controls__right-buttons{align-items:center;display:flex;flex-wrap:nowrap;height:100%}.eluvio-player__controls.eluvio-player__controls-no-progress .eluvio-player__controls__time,.eluvio-player__controls.eluvio-player__controls-no-progress .eluvio-player__controls__progress-slider{visibility:hidden}.eluvio-player__controls__tooltip{background:#000c;border-radius:3px;bottom:45px;color:#fff;font-size:14px;font-weight:300;max-height:calc(100% - 54px);max-width:225px;min-height:20px;opacity:1;padding:10px 5px;pointer-events:none;position:absolute;right:10px;text-align:center;transition:opacity .1s linear;-webkit-user-select:none;user-select:none;z-index:100}.eluvio-player__controls__tooltip *{line-height:1.2em}.eluvio-player__controls__tooltip:empty{display:none;opacity:0}.eluvio-player__controls__tooltip svg{height:20px;margin-bottom:5px;width:auto}.eluvio-player__controls__settings-menu{background:#000c;border-radius:3px 0 0;bottom:45px;color:#fff;max-height:min(90%,100% - (25px + 35px + 5px + 5px));min-height:20px;overflow-y:auto;position:absolute;right:0;width:250px;z-index:100}.eluvio-player__controls__settings-menu-hidden{display:none}.eluvio-player__controls__settings-menu button{border:1px solid transparent}.eluvio-player__controls__settings-menu__close{align-items:center;display:none;height:20px;justify-content:center;padding:0;position:absolute;right:20px;top:20px;width:20px}.eluvio-player__controls__settings-menu__close *{color:#fff}.eluvio-player__controls__settings-menu__title{font-size:16px;margin-bottom:5px;padding:9px 20px;-webkit-user-select:none;user-select:none}.eluvio-player__controls__settings-menu__option{border:1px solid transparent;color:#ffffffb3;cursor:pointer;display:block;font-size:14px;height:max-content;line-height:1.4;max-width:100%;overflow-x:hidden;padding:9px 20px;text-align:left;text-overflow:ellipsis;transition:background-color .05s linear;width:100%}.eluvio-player__controls__settings-menu__option-back{align-items:center;display:flex;position:relative;width:100%}.eluvio-player__controls__settings-menu__option-back__icon{align-items:center;display:flex;height:100%;left:20px;margin-right:5px;position:absolute;width:15px}.eluvio-player__controls__settings-menu__option-back__icon svg{height:100%;width:100%}.eluvio-player__controls__settings-menu__option-back__text{padding-inline:25px;width:100%}.eluvio-player__controls__settings-menu__option-selected{color:#fff;font-weight:500}.eluvio-player__controls__settings-menu__option:hover{background:#ffffff1a;color:#fff}.eluvio-player__controls__settings-menu__option.focus-visible{border:1px solid rgba(225,225,255,.7)}.eluvio-player__big-play-button{max-height:100px;max-width:100px;min-height:100px;min-width:100px;position:absolute;z-index:10}.eluvio-player__big-play-button svg{height:100%;opacity:.7;overflow:visible;padding:2px;transition:opacity .1s linear;width:100%;z-index:11}.eluvio-player__big-play-button:hover svg{opacity:1}.eluvio-player:fullscreen{margin:0;padding:0}.eluvio-player__hls-options-form-container{align-items:center;background-color:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:100}.eluvio-player__hls-options-form{background-color:#000c;border-radius:5px;color:#fff;display:flex;flex-direction:column;height:400px;max-height:100%;max-width:100%;padding:30px 30px 20px;width:500px}.eluvio-player__hls-options-form__title{font-size:16px;margin-top:0}.eluvio-player__hls-options-form__input{background-color:#000c;border:1px solid #252525;color:#fff;flex:1 1 100%;font-size:14px;padding:.5rem;width:100%}.eluvio-player__hls-options-form__input:focus{outline:none}.eluvio-player__hls-options-form__input.focus-visible{outline:1px solid rgba(225,225,255,.7)}.eluvio-player__hls-options-form__input--invalid{border:1px solid #a32}.eluvio-player__hls-options-form__api-info{align-items:center;display:flex;font-size:10px;justify-content:space-between;padding:3px}.eluvio-player__hls-options-form__version{opacity:.5}.eluvio-player__hls-options-form__api-link{color:#fff}.eluvio-player__hls-options-form__actions{align-items:center;display:flex;justify-content:flex-end;margin-top:10px}.eluvio-player__hls-options-form button.eluvio-player__hls-options-form__action{align-items:center;background-color:#ddd;border-radius:3px;color:#000;cursor:pointer;display:flex;height:30px;justify-content:center;width:100px}.eluvio-player__hls-options-form button.eluvio-player__hls-options-form__action.focus-visible{border:1px solid rgba(225,225,255,.7);box-shadow:2px 2px 5px #e1e1ffb3}.eluvio-player__hls-options-form button.eluvio-player__hls-options-form__action:disabled{opacity:.5}.eluvio-player__hls-options-form button.eluvio-player__hls-options-form__action:not(:last-child){margin-right:10px}.eluvio-player__hls-options-form button.eluvio-player__hls-options-form__submit{background-color:#3784eb;color:#fff}.eluvio-player__ticket-modal{align-items:center;background:#000;display:flex;height:100%;justify-content:center;position:absolute;width:100%}.eluvio-player__ticket-modal__form{align-items:center;background:#121212;border:2px solid #252525;border-radius:3px;display:flex;flex-direction:column;justify-content:center;padding:20px 30px;width:300px}.eluvio-player__ticket-modal__form__text,.eluvio-player__ticket-modal__form__error-text,.eluvio-player__ticket-modal__form__input{margin-bottom:10px}.eluvio-player__ticket-modal__form__text{color:#fff;font-size:16px;font-weight:300;letter-spacing:.05em}.eluvio-player__ticket-modal__form__error-text{color:#a32;font-size:16px}.eluvio-player__ticket-modal__form__error-text:empty{display:none}.eluvio-player__ticket-modal__form__input{background:#fff;border:0;border-radius:3px;font-size:18px;font-weight:700;letter-spacing:.16em;margin:5px 0 15px;min-height:36px;padding:0 10px;text-align:center;width:100%}.eluvio-player__ticket-modal__form__submit{border-radius:3px;color:#fff;font-size:14px;font-weight:500;height:40px;letter-spacing:.1em;text-transform:uppercase;width:100%}.eluvio-player__ticket-modal__form__submit:disabled{color:#71717180}.eluvio-player__ticket-modal__form button.eluvio-player__ticket-modal__form__submit{background:#252525;margin:0}.eluvio-player__hotspot-overlay{bottom:0;left:0;position:absolute;right:0;top:0;z-index:5}.eluvio-player__hotspot-overlay__target{align-items:center;cursor:pointer;display:flex;justify-content:center;position:absolute;transition:background-color .3s}.eluvio-player__hotspot-overlay__target__title{color:#fff;display:none;font-size:24px;font-weight:300;letter-spacing:.08em;transition:letter-spacing 5s}.eluvio-player__hotspot-overlay__target:hover{background-color:#7171714d}.eluvio-player__hotspot-overlay__target:hover .eluvio-player__hotspot-overlay__target__title{display:block;text-shadow:1px 1px #717171}.eluvio-player__hotspot-overlay__target-switching{animation:hotspot-select 1s ease-out}.eluvio-player__hotspot-overlay-visible .eluvio-player__hotspot-overlay__target{background-color:#7171714d}.eluvio-player__hotspot-overlay-visible .eluvio-player__hotspot-overlay__target__title{display:block;text-shadow:1px 1px #717171}.eluvio-player.eluvio-player-xl .eluvio-player__title{font-size:28px}.eluvio-player.eluvio-player-xl .eluvio-player__description{font-size:16px}.eluvio-player.eluvio-player-xl .eluvio-player__controls{padding:7.5px}.eluvio-player.eluvio-player-xl .eluvio-player__controls__tooltip{bottom:65px}.eluvio-player.eluvio-player-xl .eluvio-player__controls__settings-menu{bottom:50px}.eluvio-player.eluvio-player-m .eluvio-player__error-message__text,.eluvio-player.eluvio-player-s .eluvio-player__error-message__text{font-size:18px}.eluvio-player.eluvio-player-m .eluvio-player__watermark,.eluvio-player.eluvio-player-s .eluvio-player__watermark{height:10px;top:10px}.eluvio-player.eluvio-player-m .eluvio-player__controls,.eluvio-player.eluvio-player-s .eluvio-player__controls{padding:2.5px}.eluvio-player.eluvio-player-m .eluvio-player__controls__button:not(.eluvio-player__big-play-button),.eluvio-player.eluvio-player-s .eluvio-player__controls__button:not(.eluvio-player__big-play-button){height:31.5px;max-height:31.5px;max-width:31.5px;min-height:31.5px;min-width:31.5px}.eluvio-player.eluvio-player-m .eluvio-player__controls__settings-menu,.eluvio-player.eluvio-player-s .eluvio-player__controls__settings-menu{bottom:36.5px;max-height:min(90%,100% - (25px + 31.5px + 5px));right:0}.eluvio-player.eluvio-player-m .eluvio-player__controls__volume-container,.eluvio-player.eluvio-player-s .eluvio-player__controls__volume-container{display:none}.eluvio-player.eluvio-player-m .eluvio-player__big-play-button,.eluvio-player.eluvio-player-s .eluvio-player__big-play-button{max-height:55px;max-width:55px;min-height:55px;min-width:55px}.eluvio-player.eluvio-player-m .eluvio-player__ticket-modal__form,.eluvio-player.eluvio-player-s .eluvio-player__ticket-modal__form{max-height:70%;max-width:70%}.eluvio-player.eluvio-player-m .eluvio-player__hotspot-overlay .eluvio-player__hotspot-overlay__target .eluvio-player__hotspot-overlay__target__title,.eluvio-player.eluvio-player-s .eluvio-player__hotspot-overlay .eluvio-player__hotspot-overlay__target .eluvio-player__hotspot-overlay__target__title{font-size:16px}.eluvio-player.eluvio-player-s .eluvio-player__error-message__text{font-size:14px}.eluvio-player.eluvio-player-s .eluvio-player__controls__time{display:none}.eluvio-player.eluvio-player-s .eluvio-player__controls__tooltip{font-size:10px;max-width:180px}.eluvio-player.eluvio-player-s .eluvio-player__controls__tooltip svg{height:15px;width:15px}.eluvio-player.eluvio-player-s .eluvio-player__controls__settings-menu{align-items:center;height:100%;max-height:100%;padding:80px 0 100px;right:0;top:0;width:100%}.eluvio-player.eluvio-player-s .eluvio-player__controls__settings-menu__title,.eluvio-player.eluvio-player-s .eluvio-player__controls__settings-menu__option{font-size:20px;margin-bottom:5px;text-align:center}.eluvio-player.eluvio-player-s .eluvio-player__controls__settings-menu__title-back,.eluvio-player.eluvio-player-s .eluvio-player__controls__settings-menu__option-back{margin-bottom:20px}.eluvio-player.eluvio-player-s .eluvio-player__controls__settings-menu__close{display:flex;z-index:100}.eluvio-player.eluvio-player-s.eluvio-player-landscape .eluvio-player__controls__settings-menu{padding:20px 0 50px}.eluvio-player.eluvio-player-s.eluvio-player-landscape .eluvio-player__controls__settings-menu__title,.eluvio-player.eluvio-player-s.eluvio-player-landscape .eluvio-player__controls__settings-menu__option{font-size:14px;margin-bottom:5px;text-align:center}.eluvio-player.eluvio-player-s.eluvio-player-landscape .eluvio-player__controls__settings-menu__title-back,.eluvio-player.eluvio-player-s.eluvio-player-landscape .eluvio-player__controls__settings-menu__option-back{margin-bottom:20px}.eluvio-player.eluvio-player-s.eluvio-player-landscape .eluvio-player__controls__settings-menu__close{display:flex}.eluvio-player.eluvio-player-s .eluvio-player__hls-options-form{padding:10px}.eluvio-player.eluvio-player-s .eluvio-player__hls-options-form__title{font-size:12px;margin-bottom:5px}.eluvio-player.eluvio-player-s .eluvio-player__hls-options-form__input{font-size:12px}.eluvio-player.eluvio-player-s .eluvio-player__hls-options-form__action{font-size:12px;height:20px;width:60px}.eluvio-player.eluvio-player-s .eluvio-player__hotspot-overlay .eluvio-player__hotspot-overlay__target .eluvio-player__hotspot-overlay__target__title{font-size:14px}.-elv-fade-in,.-elv-fade-out{transition:opacity .25s linear}.-elv-fade-out{opacity:0!important;pointer-events:none!important}.-elv-fade-in{opacity:1}.-elv-no-cursor,.-elv-no-cursor *{cursor:none!important}@keyframes hotspot-select{0%{background-color:#fff3;opacity:1}50%{background-color:#ffffffb3;opacity:.7}to{background-color:#fff0;opacity:0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eluvio/elv-player-js",
-  "version": "1.0.136",
+  "version": "1.0.137",
   "description": "![Eluvio Logo](src/static/images/Logo.png \"Eluvio Logo\")",
   "main": "src/index.js",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "bump-version": "npm --git-tag-version --no-commit-hooks version patch",
     "serve": "TEST_PAGE=true webpack-dev-server --hot --port 8089 --host=0.0.0.0",
     "serve-example": "EXAMPLE_PAGE=true webpack-dev-server --hot --port 8089 --host=0.0.0.0",
-    "build": "node ./node_modules/webpack-cli/bin/cli.js --mode=production --devtool false",
+    "build": "BUILD_LIBRARY=true node ./node_modules/webpack-cli/bin/cli.js --mode=production --devtool false",
     "build-test": "TEST_PAGE=true node ./node_modules/webpack-cli/bin/cli.js --mode=production --devtool false",
     "build-example": "EXAMPLE_PAGE=true node ./node_modules/webpack-cli/bin/cli.js --mode=production --devtool false",
     "build-analyze": "ANALYZE_BUNDLE=true node ./node_modules/webpack-cli/bin/cli.js --mode=production --devtool false",
@@ -36,11 +36,12 @@
     "webpack.config.js"
   ],
   "dependencies": {
-    "@eluvio/elv-client-js": "^4.0.62",
+    "@eluvio/elv-client-js": "^4.0.76",
     "dashjs": "~4.7.0",
     "focus-visible": "^5.2.0",
     "hls.js": "~1.4.12",
     "lodash": "^4.17.21",
+    "mux-embed": "^4.30.0",
     "resize-observer-polyfill": "^1.5.1",
     "url-join": "^4.0.1"
   },

package/src/Analytics.js

@@ -0,0 +1,114 @@
+import Mux from "mux-embed";
+const {version} = require("../package.json");
+
+export const InitializeMuxMonitoring = async ({
+  appName="elv-player-js",
+  elvPlayer,
+  playoutUrl,
+  authorizationToken,
+  disableCookies
+}) => {
+  playoutUrl = new URL(playoutUrl);
+
+  const client = await elvPlayer.Client();
+  const muxKey = (await client.NetworkInfo()).name === "main" ?
+    "aq4mdjn7qo5sbkf89pkvfv93j" :
+    "2i5480sms8vdgj0sv9bv6lpk5";
+
+  const versionHash = playoutUrl.pathname.split("/").find(token => token.startsWith("hq__"));
+  const objectId = client.utils.DecodeVersionHash(versionHash).objectId;
+  const offering = playoutUrl.toString().match(/\/rep\/playout\/([^/]+)/)[1] || "default";
+  const sessionId = playoutUrl.searchParams.get("sid");
+
+  let name = versionHash;
+  try {
+    const metadata = (await client.ContentObjectMetadata({
+      versionHash,
+      metadataSubtree: "/public",
+      select: [
+        "name",
+        "asset_metadata/display_title",
+        "asset_metadata/title"
+      ],
+      authorizationToken
+    })) || {};
+
+    name =
+      (metadata.asset_metadata || {}).display_title ||
+      (metadata.asset_metadata || {}).title ||
+      metadata.name || versionHash;
+    // eslint-disable-next-line no-empty
+  } catch (error) {}
+
+  let tenantId = undefined;
+  try {
+    tenantId = await client.ContentObjectTenantId({versionHash});
+    // eslint-disable-next-line no-empty
+  } catch (error) {}
+
+  let address = await client.CurrentAccountAddress();
+  if(authorizationToken || client.staticToken) {
+    try {
+      const {payload} = client.utils.DecodeSignedToken(authorizationToken);
+      address = payload.adr || address;
+      // eslint-disable-next-line no-empty
+    } catch (error) {}
+  }
+
+  let addressDigest = address;
+  if(typeof crypto !== "undefined") {
+    try {
+      const encoder = new TextEncoder();
+      addressDigest = Buffer.from(
+        await crypto.subtle.digest("SHA-256", encoder.encode(address))
+      ).toString("hex");
+      // eslint-disable-next-line no-empty
+    } catch (error) {}
+  }
+
+  const options = {
+    debug: false,
+    disableCookies,
+    data: {
+      env_key: muxKey,
+      video_id: objectId,
+      video_variant_id: versionHash,
+      video_variant_name: offering,
+      video_title: name,
+      video_cdn: playoutUrl.hostname,
+      viewer_user_id: addressDigest,
+      sub_property_id: tenantId,
+      player_name: appName,
+      player_version: version,
+      player_init_time: elvPlayer.initTime
+    }
+  };
+
+  if(sessionId) {
+    options.data.view_session_id = sessionId;
+  }
+
+  if(elvPlayer.player) {
+    if(elvPlayer.HLS) {
+      options.hlsjs = elvPlayer.player;
+      options.Hls = elvPlayer.HLS;
+    } else if(elvPlayer.Dash) {
+      options.dashjs = elvPlayer.player;
+    }
+  }
+  try {
+    Mux.monitor(elvPlayer.video, options);
+
+    // eslint-disable-next-line no-console
+    console.info("elv-player-js: Mux monitoring initialized");
+    // eslint-disable-next-line no-console
+    console.info(JSON.stringify({...options, hlsjs: {}}));
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn("elv-player-js: Failed to initialize mux monitoring:");
+    // eslint-disable-next-line no-console
+    console.warn(JSON.stringify(options, null, 2));
+    // eslint-disable-next-line no-console
+    console.warn(error);
+  }
+};

package/src/PlayerControls.js

@@ -10,7 +10,10 @@ import {
   VolumeLowIcon,
   VolumeHighIcon,
   MultiViewIcon,
-  LeftArrowIcon
+  LeftArrowIcon,
+  PreviousTrackIcon,
+  NextTrackIcon,
+  CollectionIcon
 } from "./static/icons/Icons";
 // Icons are generated from .svg files to an importable JS file. To add a new icon, modify and run src/BuildIcons.js
 
@@ -123,7 +126,23 @@ const Time = (time, total) => {
   return string;
 };
 
-export const InitializeTicketPrompt = (target, callback) => {
+export const InitializeTicketPrompt = async (target, initialCode, callback) => {
+  // If initial code is provided, attempt to automatically redeem it before rendering the form
+  let initialError = "";
+  if(initialCode) {
+    try {
+      await callback(initialCode);
+      return;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("ELUVIO PLAYER: Invalid Code");
+      // eslint-disable-next-line no-console
+      console.error(error);
+
+      initialError = "Invalid Code";
+    }
+  }
+
   const ticketModal = CreateElement({
     parent: target,
     type: "div",
@@ -144,6 +163,8 @@ export const InitializeTicketPrompt = (target, callback) => {
     classes: ["eluvio-player__ticket-modal__form__error-text", "eluvio-player__ticket-modal__form__text"]
   });
 
+  errorMessage.innerHTML = initialError;
+
   const text = CreateElement({
     parent: form,
     type: "div",
@@ -158,6 +179,8 @@ export const InitializeTicketPrompt = (target, callback) => {
     classes: ["eluvio-player__ticket-modal__form__input"]
   });
 
+  input.value = initialCode;
+
   const submit = CreateElement({
     parent: form,
     type: "button",
@@ -188,7 +211,8 @@ export const InitializeTicketPrompt = (target, callback) => {
 };
 
 class PlayerControls {
-  constructor({target, video, playerOptions, posterUrl, className}) {
+  constructor({player, target, video, playerOptions, posterUrl, className}) {
+    this.player = player;
     this.target = target;
     this.video = video;
     this.playerOptions = playerOptions;
@@ -200,6 +224,8 @@ class PlayerControls {
       this.SetPosterUrl(posterUrl);
     }
 
+    this.HandleClickOutsideMenu = this.HandleClickOutsideMenu.bind(this);
+
     this.InitializeControls(className);
   }
 
@@ -267,7 +293,7 @@ class PlayerControls {
     }
   }
 
-  AutohideControls(controls) {
+  AutohideControls({controls, titleOnly=false}) {
     this.video.addEventListener("play", () => {
       this.played = true;
     });
@@ -289,14 +315,14 @@ class PlayerControls {
     const PlayerMove = () => {
       this.FadeIn({
         key: "controls",
-        elements: [controls, this.settingsMenu, this.toolTip],
+        elements: titleOnly ? [this.titleContainer] : [controls, this.settingsMenu, this.toolTip, this.titleContainer],
         callback: () => {
           this.target.classList.remove("-elv-no-cursor");
         }
       });
       this.FadeOut({
         key: "controls",
-        elements: [controls, this.settingsMenu, this.toolTip],
+        elements: titleOnly ? [this.titleContainer] : [controls, this.settingsMenu, this.toolTip, this.titleContainer],
         delay: 3000,
         unless: () => ControlsShouldShow(),
         callback: () => {
@@ -350,7 +376,40 @@ class PlayerControls {
     this.accountWatermark.innerText = address;
   }
 
+  InitializeContentTitle({title, description}) {
+    if(!title && !description) { return; }
+
+    this.titleContainer = CreateElement({
+      parent: this.target,
+      type: "div",
+      classes: ["eluvio-player__title-container"],
+      prepend: true
+    });
+
+    if(title) {
+      const titleElement = CreateElement({
+        parent: this.titleContainer,
+        type: "div",
+        classes: ["eluvio-player__title"]
+      });
+
+      titleElement.innerHTML = title;
+    }
+
+    if(description) {
+      const descriptionElement = CreateElement({
+        parent: this.titleContainer,
+        type: "div",
+        classes: ["eluvio-player__description"]
+      });
+
+      descriptionElement.innerHTML = description;
+    }
+  }
+
   InitializeControls(className="") {
+    const collectionInfo = this.player.collectionInfo;
+
     this.target.setAttribute("tabindex", "0");
 
     if(this.playerOptions.watermark) {
@@ -434,7 +493,7 @@ class PlayerControls {
           volumeButton.innerHTML = this.video.muted || this.video.volume === 0 ? MutedIcon : (this.video.volume < 0.5 ? VolumeLowIcon : VolumeHighIcon);
         });
 
-        this.AutohideControls(controls);
+        this.AutohideControls({controls, titleOnly: false});
       };
 
       const HasAudio = () => (this.video.mozHasAudio || Boolean(this.video.webkitAudioDecodedByteCount) || Boolean(this.video.audioTracks && this.video.audioTracks.length));
@@ -559,6 +618,21 @@ class PlayerControls {
       volumeBar.value = volumeSlider.value;
     });
 
+    // Collection previous track
+    if(collectionInfo && collectionInfo.isPlaylist) {
+      const collectionPreviousButton = CreateImageButton({
+        parent: controls,
+        svg: PreviousTrackIcon,
+        classes: ["eluvio-player__controls__previous-track"],
+        label: "Previous Track",
+        options: {
+          disabled: collectionInfo.mediaIndex === 0
+        }
+      });
+
+      collectionPreviousButton.addEventListener("click", () => this.player.CollectionPlayPrevious());
+    }
+
     const progressTime = CreateElement({
       parent: controls,
       type: "div",
@@ -644,6 +718,36 @@ class PlayerControls {
 
     totalTime.innerHTML = "00:00";
 
+    // Collection previous track
+    if(collectionInfo && collectionInfo.isPlaylist) {
+      const collectionNextButton = CreateImageButton({
+        parent: controls,
+        svg: NextTrackIcon,
+        classes: ["eluvio-player__controls__next-track"],
+        label: "Next Track",
+        options: {
+          disabled: collectionInfo.mediaIndex >= collectionInfo.mediaLength - 1
+        }
+      });
+
+      collectionNextButton.addEventListener("click", () => this.player.CollectionPlayNext());
+    }
+
+    if(collectionInfo) {
+      this.collectionButton = CreateImageButton({
+        parent: controls,
+        svg: CollectionIcon,
+        classes: ["eluvio-player__controls__collection"],
+        label: "Collection Info"
+      });
+
+      this.collectionButton.addEventListener("click", () => {
+        this.settingsMenu.dataset.mode === "collection" ?
+          this.HideSettingsMenu() :
+          this.ShowCollectionMenu();
+      });
+    }
+
     // Right buttons container
     this.rightButtonsContainer = CreateElement({
       parent: controls,
@@ -651,6 +755,20 @@ class PlayerControls {
       classes: ["eluvio-player__controls__right-buttons"]
     });
 
+    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.startsWith("settings") ?
+        this.HideSettingsMenu() :
+        this.ShowSettingsMenu();
+    });
+
     // Fullscreen
     const fullscreenButton = CreateImageButton({
       parent: this.rightButtonsContainer,
@@ -805,9 +923,7 @@ class PlayerControls {
       }
     });
 
-    if(this.playerOptions.controls === EluvioPlayerParameters.controls.AUTO_HIDE) {
-      this.AutohideControls(controls);
-    }
+    this.AutohideControls({controls, titleOnly: this.playerOptions.controls !== EluvioPlayerParameters.controls.AUTO_HIDE});
   }
 
   ShowHLSOptionsForm({hlsOptions={}, SetPlayerProfile, hlsVersion}) {
@@ -935,7 +1051,14 @@ class PlayerControls {
     this.hlsOptionsFormContainer && this.hlsOptionsFormContainer.remove();
   }
 
+  HandleClickOutsideMenu(event) {
+    if(!this.settingsMenu.contains(event.target)) {
+      this.HideSettingsMenu();
+    }
+  }
+
   InitializeMenu(mode) {
+    this.HideSettingsMenu();
     this.settingsMenu.innerHTML = "";
     this.settingsMenu.classList.remove("eluvio-player__controls__settings-menu-hidden");
     this.settingsMenu.setAttribute("data-mode", mode);
@@ -949,6 +1072,16 @@ class PlayerControls {
     });
 
     closeButton.addEventListener("click", () => this.HideSettingsMenu());
+
+    setTimeout(() => {
+      document.addEventListener("click", this.HandleClickOutsideMenu);
+    }, 100);
+
+    if(mode === "collection") {
+      this.collectionButton.classList.add("eluvio-player__controls__button--active");
+    } else if(mode.includes("setting")) {
+      this.settingsButton.classList.add("eluvio-player__controls__button--active");
+    }
   }
 
   AddSetting({Retrieve, Set}) {
@@ -1044,37 +1177,73 @@ class PlayerControls {
   }
 
   HideSettingsMenu() {
+    document.removeEventListener("click", this.HandleClickOutsideMenu);
+
     const mode = this.settingsMenu.dataset.mode;
     if(mode === "settings") {
       this.settingsButton.focus();
     } else if(mode === "multiview") {
       this.multiviewButton.focus();
+    } else if(mode === "collection") {
+      this.collectionButton.focus();
     }
 
     this.settingsMenu.innerHTML = "";
     this.settingsMenu.classList.add("eluvio-player__controls__settings-menu-hidden");
     this.settingsMenu.setAttribute("data-mode", "hidden");
+
+    this.settingsButton.classList.remove("eluvio-player__controls__button--active");
+    this.collectionButton && this.collectionButton.classList.remove("eluvio-player__controls__button--active");
+    this.multiviewButton && this.multiviewButton.classList.remove("eluvio-player__controls__button--active");
   }
 
+  // Settings were updated - if the menu is already open, force it to refresh
   UpdateSettings() {
-    if(!this.settingsButton) {
-      this.settingsButton = CreateImageButton({
-        parent: this.rightButtonsContainer,
-        svg: SettingsIcon,
-        classes: ["eluvio-player__controls__button-settings"],
-        prepend: true,
-        label: "Settings"
-      });
+    if(this.settingsMenu.dataset.mode === "settings") {
+      this.ShowSettingsMenu();
+    }
+  }
 
-      this.settingsButton.addEventListener("click", () => {
-        this.settingsMenu.dataset.mode === "hidden" ?
-          this.ShowSettingsMenu() :
+  ShowCollectionMenu() {
+    if(
+      !this.player.collectionInfo ||
+      !this.player.collectionInfo.content ||
+      this.player.collectionInfo.content.length <= 1
+    ) {
+      return;
+    }
+
+    this.InitializeMenu("collection");
+
+    const collectionTitle = CreateElement({
+      parent: this.settingsMenu,
+      type: "div",
+      classes: ["eluvio-player__controls__settings-menu__title"]
+    });
+
+    collectionTitle.innerHTML = this.player.collectionInfo.title;
+
+    this.player.collectionInfo.content
+      .forEach((option, index) => {
+        const active = this.player.collectionInfo.mediaIndex === index;
+        const optionButton = CreateElement({
+          parent: this.settingsMenu,
+          type: "button",
+          classes: ["eluvio-player__controls__settings-menu__option", active ? "eluvio-player__controls__settings-menu__option-selected" : ""]
+        });
+
+        optionButton.innerHTML = option.title || option.mediaHash;
+
+        optionButton.addEventListener("click", () => {
+          this.player.CollectionPlay({mediaIndex: index});
           this.HideSettingsMenu();
+        });
       });
-    }
 
-    if(this.settingsMenu.dataset.mode === "settings") {
-      this.ShowSettingsMenu();
+    // Focus on first element in list when menu opened
+    const firstItem = this.settingsMenu.querySelector("button");
+    if(firstItem) {
+      firstItem.focus();
     }
   }
 
@@ -1174,6 +1343,8 @@ class PlayerControls {
       return;
     }
 
+    this.multiviewButton.classList.add("eluvio-player__controls__button--active");
+
     this.settingsMenu.setAttribute("data-mode", "multiview");
     this.settingsMenu.classList.remove("eluvio-player__controls__settings-menu-hidden");