@eluvio/elv-player-js 1.0.117 → 1.0.119

package/src/PlayerControls.js

@@ -120,8 +120,73 @@ const Time = (time, total) => {
   return string;
 };
 
+export const InitializeTicketPrompt = (target, callback) => {
+  const ticketModal = CreateElement({
+    parent: target,
+    type: "div",
+    classes: ["eluvio-player__ticket-modal"]
+  });
+
+  ticketModal.addEventListener("dblclick", event => event.stopPropagation());
+
+  const form = CreateElement({
+    parent: ticketModal,
+    type: "form",
+    classes: ["eluvio-player__ticket-modal__form"]
+  });
+
+  const errorMessage = CreateElement({
+    parent: form,
+    type: "div",
+    classes: ["eluvio-player__ticket-modal__form__error-text", "eluvio-player__ticket-modal__form__text"]
+  });
+
+  const text = CreateElement({
+    parent: form,
+    type: "div",
+    classes: ["eluvio-player__ticket-modal__form__text"]
+  });
+
+  text.innerHTML = "Enter your code";
+
+  const input = CreateElement({
+    parent: form,
+    type: "input",
+    classes: ["eluvio-player__ticket-modal__form__input"]
+  });
+
+  const submit = CreateElement({
+    parent: form,
+    type: "button",
+    classes: ["eluvio-player__ticket-modal__form__submit"]
+  });
+
+  input.focus();
+
+  submit.innerHTML = "Submit";
+
+  submit.addEventListener("click", async event => {
+    try {
+      submit.setAttribute("disabled", true);
+      event.preventDefault();
+      errorMessage.innerHTML = "";
+
+      await callback(input.value);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("ELUVIO PLAYER: Invalid Code");
+      // eslint-disable-next-line no-console
+      console.error(error);
+
+      errorMessage.innerHTML = "Invalid Code";
+      submit.removeAttribute("disabled");
+    }
+  });
+};
+
 class PlayerControls {
   constructor({target, video, playerOptions, posterUrl, className}) {
+    console.log(new Error("init player controls"))
     this.target = target;
     this.video = video;
     this.playerOptions = playerOptions;
@@ -1046,74 +1111,6 @@ class PlayerControls {
     });
   }
 
-  InitializeTicketPrompt(callback) {
-    if(this.bigPlayButton) {
-      this.bigPlayButton.parentNode.removeChild(this.bigPlayButton);
-    }
-
-    const ticketModal = CreateElement({
-      parent: this.target,
-      type: "div",
-      classes: ["eluvio-player__ticket-modal"]
-    });
-
-    ticketModal.addEventListener("dblclick", event => event.stopPropagation());
-
-    const form = CreateElement({
-      parent: ticketModal,
-      type: "form",
-      classes: ["eluvio-player__ticket-modal__form"]
-    });
-
-    const errorMessage = CreateElement({
-      parent: form,
-      type: "div",
-      classes: ["eluvio-player__ticket-modal__form__error-text", "eluvio-player__ticket-modal__form__text"]
-    });
-
-    const text = CreateElement({
-      parent: form,
-      type: "div",
-      classes: ["eluvio-player__ticket-modal__form__text"]
-    });
-
-    text.innerHTML = "Enter your code";
-
-    const input = CreateElement({
-      parent: form,
-      type: "input",
-      classes: ["eluvio-player__ticket-modal__form__input"]
-    });
-
-    const submit = CreateElement({
-      parent: form,
-      type: "button",
-      classes: ["eluvio-player__ticket-modal__form__submit"]
-    });
-
-    input.focus();
-
-    submit.innerHTML = "Submit";
-
-    submit.addEventListener("click", async event => {
-      try {
-        submit.setAttribute("disabled", true);
-        event.preventDefault();
-        errorMessage.innerHTML = "";
-
-        await callback(input.value);
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error("ELUVIO PLAYER: Invalid Code");
-        // eslint-disable-next-line no-console
-        console.error(error);
-
-        errorMessage.innerHTML = "Invalid Code";
-        submit.removeAttribute("disabled");
-      }
-    });
-  }
-
   HandleResize({width, height}) {
     const ratio = width / height;
     const targetRatio = 16 / 9;

package/src/index.js

@@ -9,7 +9,7 @@ import URI from "urijs";
 import ResizeObserver from "resize-observer-polyfill";
 
 import {InitializeFairPlayStream} from "./FairPlay";
-import PlayerControls, {CreateElement, PlayPause} from "./PlayerControls";
+import PlayerControls, {CreateElement, InitializeTicketPrompt, PlayPause} from "./PlayerControls";
 
 export const EluvioPlayerParameters = {
   networks: {
@@ -208,6 +208,7 @@ export class EluvioPlayer {
       await this.clientPromise;
     }
 
+    // Always initialize new client if ticket is used
     if(!this.clientOptions.client) {
       this.clientPromise = new Promise(async resolve => {
         const {ElvClient} = await import("@eluvio/elv-client-js");
@@ -221,33 +222,35 @@ export class EluvioPlayer {
             this.clientOptions.client.utils.B64(JSON.stringify({qspace_id: await this.clientOptions.client.ContentSpaceId()}))
         });
 
-        resolve();
+        resolve(this.clientOptions.client);
       });
 
       await this.clientPromise;
     }
 
-    if(!this.clientOptions.ticketInitialized && this.clientOptions.ticketCode) {
-      if(!this.clientOptions.tenantId) { throw Error("ELUVIO PLAYER: Tenant ID must be provided if ticket code is specified."); }
-
-      let code = this.clientOptions.ticketCode;
-      let subject = this.clientOptions.ticketSubject;
-      if(code.includes(":")) {
-        subject = code.split(":")[0];
-        code = code.split(":")[1];
-      }
+    return this.clientOptions.client;
+  }
 
-      await this.clientOptions.client.RedeemCode({
-        tenantId: this.clientOptions.tenantId,
-        ntpId: this.clientOptions.ntpId,
-        code,
-        email: subject
-      });
+  async RedeemCode(code) {
+    if(!this.clientOptions.tenantId) { throw Error("ELUVIO PLAYER: Tenant ID must be provided if ticket code is specified."); }
 
-      this.ticketInitialized = true;
+    code = code || this.clientOptions.ticketCode;
+    let subject = this.clientOptions.ticketSubject;
+    if(code.includes(":")) {
+      subject = code.split(":")[0];
+      code = code.split(":")[1];
     }
 
-    return this.clientOptions.client;
+    await (await this.Client()).RedeemCode({
+      tenantId: this.clientOptions.tenantId,
+      ntpId: this.clientOptions.ntpId,
+      code,
+      email: subject
+    });
+
+    this.ticketInitialized = true;
+    this.clientOptions.ticketCode = code;
+    this.originalParameters.clientOptions.ticketCode = code;
   }
 
   async PosterUrl() {
@@ -472,10 +475,43 @@ export class EluvioPlayer {
       this.clientOptions = parameters.clientOptions;
       this.sourceOptions = parameters.sourceOptions;
       this.playerOptions = parameters.playerOptions;
+
+      // If ticket redemption required, ensure new client is used unless specified
+      if(
+        this.clientOptions.promptTicket &&
+        !this.ticketInitialized &&
+        !this.clientOptions.allowClientTicketRedemption
+      ) {
+        this.clientOptions.client = undefined;
+      }
     }
 
     this.errors = 0;
 
+
+    this.target.classList.add("eluvio-player");
+
+    // Start client loading
+    this.Client();
+
+    if(this.clientOptions.promptTicket && !this.ticketInitialized) {
+      if(!this.clientOptions.tenantId) {
+        throw Error("ELUVIO PLAYER: Tenant ID must be provided if ticket code is needed.");
+      }
+
+      if(this.clientOptions.ticketCode) {
+        await this.RedeemCode(this.clientOptions.ticketCode);
+      } else {
+        InitializeTicketPrompt(this.target, async code => {
+          await this.RedeemCode(code);
+
+          this.Initialize(target, parameters);
+        });
+
+        return;
+      }
+    }
+
     try {
       const playoutOptionsPromise = this.PlayoutOptions();
 
@@ -569,35 +605,6 @@ export class EluvioPlayer {
       });
       this.resizeObserver.observe(this.target);
 
-      if(this.clientOptions.promptTicket && !this.clientOptions.ticketCode) {
-        if(!this.clientOptions.tenantId) { throw Error("ELUVIO PLAYER: Tenant ID must be provided if ticket code is needed."); }
-
-        this.controls.InitializeTicketPrompt(async (code) => {
-          code = (code || "").trim();
-          let subject = this.clientOptions.ticketSubject;
-          if(code.includes(":")) {
-            subject = code.split(":")[0];
-            code = code.split(":")[1];
-          }
-
-          await this.clientOptions.client.RedeemCode({
-            tenantId: this.clientOptions.tenantId,
-            ntpId: this.clientOptions.ntpId,
-            code,
-            email: subject
-          });
-
-          this.ticketInitialized = true;
-          this.clientOptions.ticketCode = code;
-          this.originalParameters.clientOptions.client = this.clientOptions.client;
-          this.originalParameters.clientOptions.ticketCode = code;
-
-          this.Initialize(this.target);
-        });
-
-        return;
-      }
-
       let { protocol, drm, playoutUrl, drms, multiviewOptions } = await playoutOptionsPromise;
 
       this.PosterUrl().then(posterUrl => this.controls.SetPosterUrl(posterUrl));

package/src/static/stylesheets/player.scss

@@ -8,7 +8,7 @@ $background-color: $black;
 $controls-color: rgba(0, 0, 0, 0.8);
 $menu-color: rgba(0, 0, 0, 0.8);
 $menu-active-color: rgba(255, 255, 255, 0.1);
-$button-color: rgba($white, 0.8);
+$button-color: rgba($white, 1);
 $progress-color: #0885fb;
 $slider-color: rgba($gray, 0.5);
 $hotspot-color: rgba($gray, 0.3);
@@ -201,7 +201,7 @@ $button-height: 35px;
 
   &__video {
     background: $background-color;
-    height: auto;
+    height: 100%;
     margin: auto;
     object-fit: contain;
     object-position: center;
@@ -528,7 +528,7 @@ $button-height: 35px;
 
   &__ticket-modal {
     align-items: center;
-    background: $controls-color;
+    background: $background-color;
     display: flex;
     height: 100%;
     justify-content: center;
@@ -554,7 +554,7 @@ $button-height: 35px;
 
       &__text {
         color: $button-color;
-        font-size: 20px;
+        font-size: 16px;
         font-weight: 300;
         letter-spacing: 0.05em;
       }
@@ -569,14 +569,14 @@ $button-height: 35px;
       }
 
       &__input {
-        background: $button-color;
+        background: $white;
         border: 0;
         border-radius: 3px;
         font-size: 18px;
         font-weight: bold;
         letter-spacing: 0.16em;
         margin: 5px 0 15px;
-        min-height: 40px;
+        min-height: 36px;
         padding: 0 10px;
         text-align: center;
         width: 100%;
@@ -585,7 +585,7 @@ $button-height: 35px;
       &__submit {
         border-radius: 3px;
         color: $button-color;
-        font-size: 16px;
+        font-size: 14px;
         font-weight: 500;
         height: 40px;
         letter-spacing: 0.1em;