@eluvio/elv-player-js 2.0.8 → 2.0.9

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.9",
   "description": "![Eluvio Logo](lib/static/images/Logo.png \"Eluvio Logo\")",
   "main": "lib/index.js",
   "license": "MIT",