@eluvio/elv-player-js 1.0.136 → 1.0.138

package/README.md

@@ -96,6 +96,7 @@ The library includes a helpful collection of configuration options in `EluvioPla
 ### Player Options
 
 ```javascript
+  // All player options and their defaults
   playerOptions: {
     controls: EluvioPlayerParameters.controls.AUTO_HIDE,
     autoplay: EluvioPlayerParameters.autoplay.OFF,
@@ -103,11 +104,13 @@ The library includes a helpful collection of configuration options in `EluvioPla
     loop: EluvioPlayerParameters.loop.OFF,
     watermark: EluvioPlayerParameters.watermark.ON,
     capLevelToPlayerSize: EluvioPlayerParameters.capLevelToPlayerSize.OFF,
+    collectVideoAnalytics: EluvioPlayerParameters.collectVideoAnalytics.ON,
     posterUrl: undefined,
     className: undefined,
     controlsClassName: undefined,
     hlsjsOptions: undefined,
     dashjsOptions: undefined,
+    maxBitrate: undefined,
     playerCallback: ({player, videoElement, hlsPlayer, dashPlayer, posterUrl}) => {},
     errorCallback: (error, player) => {},
     restartCallback: async (error) => {}
@@ -115,30 +118,35 @@ The library includes a helpful collection of configuration options in `EluvioPla
 ```
 
 ##### Values
-* `controls` - How the controls should be displayed. Default AUTOHIDE
+* `controls` - How the controls should be displayed
+  * `AUTOHIDE (default)`: Player controls will be shown. Will automatically hide when not in use
   * `ON`: Player controls will be shown
-  * `AUTOHIDE`: Player controls will be shown. Will automatically hide when not in use
   * `DEFAULT`: Default HTML video controls will be shown
   * `OFF`: No controls will be shown
   * `OFF_WITH_VOLUME_TOGGLE`: No controls will be shown except a volume on/off toggle
-* `autoplay` - Whether or not the video should autoplay. Default OFF. NOTE: Browsers may block autoplay video with audio
+* `autoplay` - Whether or not the video should autoplay. NOTE: Browsers may block autoplay video with audio
+  * `OFF (default)`: Video will not autoplay
   * `ON`: Video will autoplay
-  * `OFF`: Video will not autoplay
   * `WHEN_VISIBLE`: Video will autoplay only when the video element is visible, and will stop when the element is no longer visible
-* `muted` - Whether or not the video will be muted. Default OFF
+* `muted` - Whether or not the video will be muted.
+  * `OFF (default)`: Video will not be muted
   * `ON`: Video will be muted
-  * `OFF`: Video will not be muted
   * `WHEN_NOT_VISIBLE`: Video will be muted when the video element is not visible
   * `OFF_IF_POSSIBLE`: Video will not be muted unless playback is blocked due to audio (useful for autoplay)
-* `loop` - Whether or not the video will loop. Default OFF
+* `loop` - Whether or not the video will loop.
+  * `OFF (default)` - Video will not loop
   * `ON` - Video will loop
-  * `OFF` - Video will not loop
-* `watermark`: Whether or not the Eluvio watermark will be shown. Default ON
-  * `ON` - Watermark will be shown
+* `watermark`: Whether or not the Eluvio watermark will be shown.
+  * `ON (default)` - Watermark will be shown
   * `OFF` - Watermark will not be shown
-* `capLevelToPlayerSize`: Whether or not the playback quality should be limited by the size of the video element. Useful for reducing bandwidth usage for smaller video elements where a higher quality would not be beneficial. Default OFF
+* `capLevelToPlayerSize`: Whether or not the playback quality should be limited by the size of the video element. Useful for reducing bandwidth usage for smaller video elements where a higher quality would not be beneficial.
+  * `OFF (default)` - Playback quality will not be affected by the size of the video element (default)
   * `ON` - Playback quality will be limited by the size of the video element
-  * `OFF` - Playback quality will not be affected by the size of the video element
+* `collectVideoAnalytics` - By default, the player will collect anonymized playback analytics to help improve the performance of the Eluvio Content Fabric.
+  * `ON (default)` - Player performance analytics will be collected
+  * `DISABLE_COOKIES`- Player performance analytics will be collected, but browser cookies will not be used
+  * `OFF` - Player performance analytics will not be collected
+* `maxBitrate` - Maximum bitrate that the player will automatically use, in bits/second.
 * `posterUrl` - Specify a URL for the poster image for the player
 * `className` - HTML class to be added to the player
 * `controlsClassName` - HTML class to be added to the player controls container

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eluvio/elv-player-js",
-  "version": "1.0.136",
+  "version": "1.0.138",
   "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");