@eluvio/elv-player-js 2.0.8 → 2.0.10

package/dist/{index-3xP7b7vd.mjs → index-DRFm2mW0.mjs}

@@ -1,4 +1,4 @@
-import { c as cI, e as CI, r as vA, a as eI, b as fA, i as dA, s as xA, g as wI } from "./index-CQ7iPH2P.mjs";
+import { c as cI, e as CI, r as vA, a as eI, b as fA, i as dA, s as xA, g as wI } from "./index-DH690yy1.mjs";
 class EA {
   constructor(I) {
     this.wasm = I;

package/lib/player/Player.js

@@ -319,9 +319,11 @@ export class EluvioPlayer {
       });
 
       const CheckIsLive = () => {
-        if(this.canPlay && !isFinite(this.video.duration)) {
+        if(!this.canPlay) { return; }
+
+        if(!isFinite(this.video.duration)) {
           this.isLive = true;
-        } else if(this.video.duration && this.videoDuration > 0 && Math.abs(this.video.duration - this.videoDuration) > 1) {
+        } else if(this.video.duration && this.videoDuration > 0 && this.video.duration - this.videoDuration > 1) {
           this.isLive = true;
         }
       };
@@ -728,6 +730,13 @@ export class EluvioPlayer {
     ]
       .map(event => dashPlayer.on(event, () => this.__SettingsUpdate()));
 
+    // Subtitle track change
+    dashPlayer.on(this.Dash.MediaPlayer.events.METRIC_CHANGED, event => {
+      if(!event || event.mediaType !== "text") { return; }
+
+      this.__SettingsUpdate();
+    });
+
     this.player = dashPlayer;
     this.dashPlayer = dashPlayer;
   }
@@ -765,10 +774,13 @@ export class EluvioPlayer {
 
     const client = await this.__Client();
 
+    const authorizationToken = this.sourceOptions &&
+      this.sourceOptions.playoutParameters &&
+      this.sourceOptions.playoutParameters.authorizationToken;
     const audit =
       this.isLive ?
-        await client.AuditStream({versionHash: this.contentHash}) :
-        await client.AuditContentObject({versionHash: this.contentHash});
+        await client.AuditStream({versionHash: this.contentHash, authorizationToken}) :
+        await client.AuditContentObject({versionHash: this.contentHash, authorizationToken});
 
     if(!audit.verified) {
       return;

package/lib/static/stylesheets/common.module.scss

@@ -74,7 +74,7 @@
 .seek-container {
   --progress-height: 3px;
   --progress-height-expanded: 10px;
-  --progress-height-expanded-mobile: 15px;
+  --progress-height-expanded-mobile: 8px;
   --color-seek-background: rgba(255, 255, 255, 10%);
   --color-seek-buffer: rgba(255, 255, 255, 10%);
   --color-seek-active: rgba(255, 255, 255, 50%);
@@ -407,7 +407,7 @@
 
 .verification-menu {
   color: var(--color-menu-text);
-  padding: 10px 0 0;
+  padding: 10px 0 5px;
 
   &__group {
     display: flex;
@@ -416,8 +416,13 @@
   }
 
   &__group-icon {
-    height: 30px;
-    width: 30px;
+    height: 35px;
+    width: 35px;
+
+    &--cc {
+      height: 30px;
+      width: 30px;
+    }
 
     svg {
       height: 100%;
@@ -521,6 +526,11 @@
     .verification-menu__group-icon {
       height: 45px;
       width: 45px;
+
+      &--cc {
+        height: 38px;
+        width: 38px;
+      }
     }
 
     .verification-menu__group-title {
@@ -536,25 +546,87 @@
 
 /* Player size/orientation adjustments */
 
+:global(.__eluvio-player--size-md),
+:global(.__eluvio-player--size-sm) {
+  .menu-option {
+    font-size: 14px;
+    min-height: unset;
+    padding: 3px 10px;
+  }
+
+  .verification-menu {
+    &__group-icon {
+      height: 23px;
+      width: 23px;
+
+      &--cc {
+        height: 20px;
+        width: 20px;
+      }
+    }
+
+    &__group {
+      align-items: center;
+    }
+
+    &__details,
+    &__group {
+      padding-inline: 15px;
+    }
+
+    &__group-title {
+      font-size: 12px;
+    }
+
+    &__group-subtitle {
+      font-size: 10px;
+    }
+
+    &__detail {
+      align-items: flex-start;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    &__detail-label,
+    &__detail-value {
+      font-size: 10px;
+    }
+
+    &__detail-copy {
+      height: 15px;
+    }
+  }
+}
+
 :global(.__eluvio-player--size-sm) {
   .volume-slider {
     display: none;
   }
 
   .menu {
-    bottom: 75px;
-    max-width: calc(var(--portal-width) - 30px);
-    min-width: calc(var(--portal-width) - 30px);
+    bottom: 50px;
+    gap: 3px;
+    max-height: calc(var(--portal-height) - 80px);
+    max-width: min(600px, calc(var(--portal-width) - 30px));
+    min-height: unset;
+    min-width: min(600px, calc(var(--portal-width) - 30px));
     right: 10px;
   }
 
   .menu-option {
-    font-size: 14px;
-    min-height: 36px;
-    padding: 5px 10px;
+    font-size: 12px;
+    min-height: 25px;
+    padding: 2px 10px;
+  }
+
+  .menu-option-icon {
+    height: 20px;
   }
 
   .seek-container {
+    height: calc(var(--progress-height-expanded) + 5px);
+
     &:hover,
     &:active,
     &:focus,
@@ -580,36 +652,6 @@
       }
     }
   }
-
-  .verification-menu {
-    &__details,
-    &__group {
-      padding-inline: 15px;
-    }
-
-    &__group-title {
-      font-size: 14px;
-    }
-
-    &__group-subtitle {
-      font-size: 12px;
-    }
-
-    &__detail {
-      align-items: flex-start;
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    &__detail-label,
-    &__detail-value {
-      font-size: 12px;
-    }
-
-    &__detail-copy {
-      height: 15px;
-    }
-  }
 }
 
 .copy-button {

package/lib/static/stylesheets/controls-web.module.scss

@@ -65,10 +65,10 @@
   align-items: center;
   color: var(--color-button);
   display: flex;
-  height: 100%;
-  padding: 5px;
+  height: 30px;
+  padding: 4px;
   transition: color 0.15s ease;
-  width: auto;
+  width: 30px;
 
   svg {
     height: 100%;
@@ -167,6 +167,7 @@
 
 .center-play-button {
   height: 100px;
+  margin-bottom: 30px;
   transition: opacity 0.5s ease;
   width: 100px;
   z-index: var(--layer-center-button);
@@ -226,11 +227,6 @@
   .play-pause-button {
     padding: 0;
   }
-
-  .right-control-button {
-    height: 35px;
-    margin-bottom: 1px;
-  }
 }
 
 .time {
@@ -338,18 +334,12 @@
 
   .icon-button {
     border: 1px solid transparent;
-    border-radius: 100%;
+    padding: 0;
     transition: background-color 0.25s ease, color 0.25s ease;
 
     &-active,
     &:focus-visible {
-      background-color: rgba(255, 255, 255, 85%);
-      color: #000;
-      filter: drop-shadow(0 0 5px #FFF);
-    }
-
-    &:focus-visible {
-      border: 1px solid var(--color-highlight);
+      filter: drop-shadow(0 0 3px rgba(255, 255, 255, 50%));
     }
   }
 }
@@ -393,14 +383,22 @@
     --content-image-size: 65px;
   }
 
+  .icon-button {
+    height: 25px;
+    min-width: 25px;
+    width: 25px;
+  }
+
   .controls {
     gap: 8px;
-    height: 45px;
+    height: max-content;
+    padding: 0 5px 5px;
   }
 
   .center-play-button {
-    height: 65px;
-    width: 65px;
+    height: 50px;
+    margin-bottom: 15px;
+    width: 50px;
   }
 
   /* Position menus relative to whole player */
@@ -433,6 +431,7 @@
 
   .time {
     font-size: 10px;
+    min-width: max-content;
   }
 
   .collection-button-text {

package/lib/static/stylesheets/player.module.scss

@@ -89,4 +89,10 @@
   .error-message {
     font-size: 16px;
   }
+
+  .spinner {
+    border-width: 3px;
+    height: 30px;
+    width: 30px;
+  }
 }

package/lib/ui/Components.jsx

@@ -380,7 +380,7 @@ export const ContentVerificationMenu = ({player, Hide, className=""}) => {
     content = (
       <>
         <div className={CommonStyles["verification-menu__group"]}>
-          <div dangerouslySetInnerHTML={{__html: Icons.ContentBadgeIcon}} style={{width: 35, height: 35}} className={CommonStyles["verification-menu__group-icon"]} />
+          <div dangerouslySetInnerHTML={{__html: Icons.ContentBadgeIcon}} className={CommonStyles["verification-menu__group-icon"]} />
           <div className={CommonStyles["verification-menu__group-text"]}>
             <div className={CommonStyles["verification-menu__group-title"]}>
               This content has been verified as authentic
@@ -391,7 +391,7 @@ export const ContentVerificationMenu = ({player, Hide, className=""}) => {
           </div>
         </div>
         <div className={CommonStyles["verification-menu__group"]}>
-          <div dangerouslySetInnerHTML={{__html: Icons.ContentCredentialsIcon}} style={{height: 30, maxWidth: 30}} className={CommonStyles["verification-menu__group-icon"]} />
+          <div dangerouslySetInnerHTML={{__html: Icons.ContentCredentialsIcon}} className={[CommonStyles["verification-menu__group-icon"], CommonStyles["verification-menu__group-icon--cc"]].join(" ")} />
           <div className={CommonStyles["verification-menu__group-text"]}>
             <button onClick={() => setShowDetails(true)} className={CommonStyles["verification-menu__group-title"]}>
               View Content Credentials
@@ -405,7 +405,7 @@ export const ContentVerificationMenu = ({player, Hide, className=""}) => {
     content = (
       <>
         <div className={CommonStyles["verification-menu__group"]}>
-          <div dangerouslySetInnerHTML={{__html: Icons.ContentBadgeIcon}} style={{width: 50, height: 50}} className={CommonStyles["verification-menu__group-icon"]} />
+          <div dangerouslySetInnerHTML={{__html: Icons.ContentBadgeIcon}} className={CommonStyles["verification-menu__group-icon"]} />
           <div className={CommonStyles["verification-menu__group-text"]}>
             <div className={CommonStyles["verification-menu__group-title"]}>
               This content has been verified as authentic
@@ -416,7 +416,7 @@ export const ContentVerificationMenu = ({player, Hide, className=""}) => {
           </div>
         </div>
         <div className={CommonStyles["verification-menu__group"]}>
-          <div dangerouslySetInnerHTML={{__html: Icons.ContentCredentialsIcon}} className={CommonStyles["verification-menu__group-icon"]} />
+          <div dangerouslySetInnerHTML={{__html: Icons.ContentCredentialsIcon}} className={[CommonStyles["verification-menu__group-icon"], CommonStyles["verification-menu__group-icon--cc"]].join(" ")} />
           <div className={CommonStyles["verification-menu__group-text"]}>
             <button onClick={() => setShowDetails(true)} className={CommonStyles["verification-menu__group-title"]}>
               Content Credentials

package/lib/ui/Observers.js

@@ -126,19 +126,20 @@ export const ObserveVideoTime = ({video, rate=10, setCurrentTime}) => {
 
 export const ObserveResize = ({target, setSize, setOrientation, setDimensions}) => {
   let dimensionsUpdateTimeout;
-  const observer = new ResizeObserver(entries => {
+
+  const ResizeUpdate = () => {
     clearTimeout(dimensionsUpdateTimeout);
 
-    const dimensions = entries[0].contentRect;
+    const dimensions = target.getBoundingClientRect();
 
     let size = "sm";
     let orientation = "landscape";
     // Use actual player size instead of media queries
-    if(dimensions.width > 1400) {
+    if(dimensions.width > 1400 && dimensions.height > 600) {
       size = "xl";
-    } else if(dimensions.width > 1000) {
+    } else if(dimensions.width > 1000 && dimensions.height > 400) {
       size = "lg";
-    } else if(dimensions.width > 650) {
+    } else if(dimensions.width > 650 && dimensions.height > 300) {
       size = "md";
     }
 
@@ -152,8 +153,11 @@ export const ObserveResize = ({target, setSize, setOrientation, setDimensions})
     dimensionsUpdateTimeout = setTimeout(() => {
       setDimensions({width: dimensions.width, height: dimensions.height});
     }, 500);
-  });
+  };
+
+  ResizeUpdate();
 
+  const observer = new ResizeObserver(ResizeUpdate);
   observer.observe(target);
 
   return () => observer.disconnect();

package/lib/ui/WebControls.jsx

@@ -162,7 +162,9 @@ const ContentVerificationControls = ({player}) => {
 
     UpdateVerification();
 
-    player.controls.RegisterSettingsListener(UpdateVerification);
+    const disposeSettingsListener = player.controls.RegisterSettingsListener(UpdateVerification);
+
+    return () => disposeSettingsListener && disposeSettingsListener();
   }, []);
 
   if(!contentVerified) {
@@ -188,13 +190,20 @@ const ContentVerificationControls = ({player}) => {
 const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setRecentUserAction, className=""}) => {
   const [videoState, setVideoState] = useState(undefined);
   const [playerClickHandler, setPlayerClickHandler] = useState(undefined);
+  const [menuVisible, setMenuVisible] = useState(player.controls.IsMenuVisible());
 
   useEffect(() => {
     setPlayerClickHandler(PlayerClick({player, setRecentUserAction}));
 
+    const UpdateMenuVisibility = () => setMenuVisible(player.controls.IsMenuVisible());
+    const disposeSettingsListener = player.controls.RegisterSettingsListener(UpdateMenuVisibility);
+
     const disposeVideoObserver = ObserveVideo({target: player.target, video: player.video, setVideoState});
 
-    return () => disposeVideoObserver && disposeVideoObserver();
+    return () => {
+      disposeSettingsListener && disposeSettingsListener();
+      disposeVideoObserver && disposeVideoObserver();
+    }
   }, []);
 
   if(!videoState) { return null; }
@@ -202,7 +211,7 @@ const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setR
   const collectionInfo = player.controls.GetCollectionInfo();
 
   // Title autohide is not dependent on controls settings
-  const showUI = recentlyInteracted || !playbackStarted || player.controls.IsMenuVisible();
+  const showUI = recentlyInteracted || !playbackStarted || menuVisible;
   const hideControls = !showUI && player.playerOptions.controls === EluvioPlayerParameters.controls.AUTO_HIDE;
 
   player.__SetControlsVisibility(!hideControls);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eluvio/elv-player-js",
-  "version": "2.0.8",
+  "version": "2.0.10",
   "description": "![Eluvio Logo](lib/static/images/Logo.png \"Eluvio Logo\")",
   "main": "lib/index.js",
   "license": "MIT",
@@ -36,7 +36,7 @@
     "package-lock.json"
   ],
   "dependencies": {
-    "@eluvio/elv-client-js": "^4.0.89",
+    "@eluvio/elv-client-js": "^4.0.92",
     "dashjs": "~4.7.0",
     "focus-visible": "^5.2.0",
     "hls.js": "~1.5.12",