@eluvio/elv-player-js 2.0.7 → 2.0.9

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.7",
+  "version": "2.0.9",
   "description": "![Eluvio Logo](lib/static/images/Logo.png \"Eluvio Logo\")",
   "main": "lib/index.js",
   "license": "MIT",
@@ -36,10 +36,10 @@
     "package-lock.json"
   ],
   "dependencies": {
-    "@eluvio/elv-client-js": "^4.0.88",
+    "@eluvio/elv-client-js": "^4.0.89",
     "dashjs": "~4.7.0",
     "focus-visible": "^5.2.0",
-    "hls.js": "~1.4.12",
+    "hls.js": "~1.5.12",
     "mux-embed": "^4.30.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -56,6 +56,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "jsdoc": "^4.0.0",
+    "sass": "^1.77.6",
     "stylelint": "^16.2.0",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-order": "^6.0.4",