@eluvio/elv-player-js 1.0.112 → 1.0.114

package/package.json

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

package/src/index.js

@@ -640,6 +640,41 @@ export class EluvioPlayer {
         this.Destroy();
       }
     } catch (error) {
+      // If playout failed due to a permission issue, check the content to see if there is a message to display
+      if(error && [401, 403].includes(error.status) || [401, 403].includes(error.code)) {
+        try {
+          const client = await this.Client();
+
+          const targetHash =
+            this.sourceOptions.playoutParameters.linkPath ?
+              await client.LinkTarget({...this.sourceOptions.playoutParameters}) :
+              this.sourceOptions.playoutParameters.versionHash ||
+              await client.LatestVersionHash({objectId: this.sourceOptions.playoutParameters.objectId});
+
+          const permissionErrorMessage = await client.ContentObjectMetadata({
+            versionHash: targetHash,
+            metadataSubtree: "public/asset_metadata/permission_message",
+            authorizationToken: this.sourceOptions.playoutParameters.authorizationToken
+          });
+
+          if(permissionErrorMessage) {
+            const errorMessage = CreateElement({
+              parent: this.target,
+              classes: ["eluvio-player__error-message"]
+            });
+
+            CreateElement({
+              parent: errorMessage,
+              classes: ["eluvio-player__error-message__text"]
+            }).innerHTML = permissionErrorMessage;
+
+            this.target.classList.add("eluvio-player--error");
+          }
+        // eslint-disable-next-line no-empty
+        } catch(error) {}
+      }
+
+
       if(this.playerOptions.errorCallback) {
         this.playerOptions.errorCallback(error, this);
       }

package/src/static/stylesheets/player.scss

@@ -41,6 +41,31 @@ $button-height: 35px;
   position: relative;
   width: 100%;
 
+  &--error {
+    .eluvio-player__controls,
+    .eluvio-player__big-play-button {
+      display: none;
+    }
+  }
+
+  &__error-message {
+    position: absolute;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+  }
+
+  &__error-message__text {
+    color: $error-color;
+    font-size: 24px;
+    text-align: center;
+    max-width: 600px;
+  }
+
   // Seek indicator
   &--seek-left,
   &--seek-right {
@@ -78,7 +103,6 @@ $button-height: 35px;
   * {
     box-sizing: border-box;
     font-family: "Helvetica Neue", Helvetica, sans-serif;
-    line-height: 1;
     overscroll-behavior-y: contain; // sass-lint:disable-line no-misspelled-properties
   }
 
@@ -385,7 +409,7 @@ $button-height: 35px;
     &__settings-menu {
       background: $menu-color;
       border-radius: 3px 0 0;
-      bottom: CALC(5px + #{$button-height} + #{$controls-padding} + #{$controls-padding});
+      bottom: CALC(#{$button-height} + #{$controls-padding} + #{$controls-padding});
       color: $button-color;
       max-height: MIN(90%, 100% - CALC(25px + #{$button-height} + #{$controls-padding} + #{$controls-padding}));
       min-height: 20px;
@@ -642,10 +666,19 @@ $button-height: 35px;
         bottom: 65px;
       }
     }
+
+    .eluvio-player__controls__settings-menu {
+      bottom: CALC(5px + #{$button-height} + #{$controls-padding} + #{$controls-padding});
+    }
   }
 
   &.eluvio-player-m,
   &.eluvio-player-s {
+    .eluvio-player__error-message__text {
+      font-size: 18px;
+    }
+
+
     .eluvio-player__watermark {
       height: 10px;
       top: 10px;
@@ -699,6 +732,10 @@ $button-height: 35px;
   }
 
   &.eluvio-player-s {
+    .eluvio-player__error-message__text {
+      font-size: 14px;
+    }
+
     .eluvio-player__controls__time {
       display: none;
     }