@eluvio/elv-player-js 2.0.6 → 2.0.7

package/lib/player/Controls.js

@@ -27,6 +27,12 @@ class PlayerControls {
     this.player = player;
     this.visible = true;
     this.allowRotation = true;
+    this._activeMenus = 0;
+  }
+
+  __ToggleMenu(active) {
+    this._activeMenus = active ? this._activeMenus + 1 : Math.max(0, this._activeMenus - 1);
+    this.player.__SettingsUpdate();
   }
 
   /**
@@ -39,6 +45,16 @@ class PlayerControls {
     return this.visible;
   }
 
+  /**
+   * Check if the player currently has a menu visible
+   *
+   * @methodGroup Controls
+   * @returns {boolean} - Whether or not a menu is currently visible
+   */
+  IsMenuVisible() {
+    return this._activeMenus > 0;
+  }
+
   /**
    * Check if the player has finished loading
    *
@@ -843,7 +859,6 @@ class PlayerControls {
     return this.player.contentAudit || false;
   }
 
-
   GetOptions() {
     let options = {
       quality: this.GetQualityLevels(),

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

@@ -39,6 +39,8 @@
 }
 
 .autohide {
+  cursor: none;
+
   &:not(:has(:focus-visible)) {
     .bottom-controls-container--autohide {
       opacity: 0;

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

@@ -49,6 +49,8 @@
 }
 
 .autohide {
+  cursor: none;
+
   &:not(:has(:focus-visible)) {
     .info-container,
     .bottom-controls-container--autohide {
@@ -370,7 +372,7 @@
 
   .info-container {
     gap: 20px;
-    padding-top: 20px;
+    padding-top: 15px;
   }
 
   .info-title {
@@ -414,6 +416,7 @@
 
   .info-container {
     padding-right: 80px;
+    padding-top: 10px;
   }
 
   .info-headers {

package/lib/ui/PlayerUI.jsx

@@ -45,6 +45,7 @@ const Poster = ({player}) => {
   );
 };
 
+let clearInteractionTimeout;
 const PlayerUI = ({target, parameters, InitCallback, ErrorCallback, Unmount, Reset}) => {
   const [player, setPlayer] = useState(undefined);
   const [client, setClient] = useState(undefined);
@@ -176,6 +177,15 @@ const PlayerUI = ({target, parameters, InitCallback, ErrorCallback, Unmount, Res
     };
   }, [playerSet]);
 
+  useEffect(() => {
+    if(!recentUserAction) { return; }
+    clearTimeout(clearInteractionTimeout);
+
+    setTimeout(() => {
+      setRecentUserAction(undefined);
+    }, 1000);
+  }, [recentUserAction]);
+
   if(parameters.clientOptions.promptTicket && !client) {
     return (
       <TicketForm

package/lib/ui/TVControls.jsx

@@ -92,7 +92,7 @@ const CenterButtons = ({player, videoState}) => {
   );
 };
 
-const MenuButton = ({label, icon, children, player, setMenuActive, MenuComponent}) => {
+const MenuButton = ({label, icon, children, player, MenuComponent}) => {
   const [show, setShow] = useState(false);
 
   return (
@@ -104,14 +104,14 @@ const MenuButton = ({label, icon, children, player, setMenuActive, MenuComponent
             aria-haspopup
             icon={icon}
             onClick={() => {
-              setMenuActive(!show);
+              player.controls.__ToggleMenu(!show);
               setShow(!show);
             }}
             className={`${ControlStyles["icon-button--circle-focus"]} ${show ? ControlStyles["icon-button-active"] : ""}`}
           /> :
           <button
             onClick={() => {
-              setMenuActive(!show);
+              player.controls.__ToggleMenu(!show);
               setShow(!show);
             }}
             className={`${ControlStyles["text-button"]} ${show ? ControlStyles["text-button--active"] : ""}`}
@@ -124,8 +124,8 @@ const MenuButton = ({label, icon, children, player, setMenuActive, MenuComponent
           <MenuComponent
             player={player}
             Hide={() => {
+              player.controls.__ToggleMenu(false);
               setShow(false);
-              setMenuActive(false);
             }}
             className={ControlStyles["menu"]}
           />
@@ -211,7 +211,7 @@ const InfoBox = ({player, Hide}) => {
   );
 };
 
-const ContentVerificationControls = ({player, setMenuActive}) => {
+const ContentVerificationControls = ({player}) => {
   const [contentVerified, setContentVerified] = useState(false);
 
   useEffect(() => {
@@ -231,7 +231,6 @@ const ContentVerificationControls = ({player, setMenuActive}) => {
       label="Content Verification Menu"
       icon={Icons.ContentBadgeIcon}
       player={player}
-      setMenuActive={setMenuActive}
       MenuComponent={ContentVerificationMenu}
       className={ControlStyles["content-verification-menu-button"]}
     >
@@ -243,7 +242,6 @@ const ContentVerificationControls = ({player, setMenuActive}) => {
 const TVControls = ({player, playbackStarted, canPlay, recentlyInteracted, setRecentUserAction, className=""}) => {
   const [videoState, setVideoState] = useState(undefined);
   const [playerClickHandler, setPlayerClickHandler] = useState(undefined);
-  const [menuActive, setMenuActive] = useState(false);
   const [showInfo, setShowInfo] = useState(false);
 
   useEffect(() => {
@@ -263,7 +261,7 @@ const TVControls = ({player, playbackStarted, canPlay, recentlyInteracted, setRe
   const collectionInfo = player.controls.GetCollectionInfo();
 
   // Title autohide is not dependent on controls settings
-  const showUI = recentlyInteracted || !playbackStarted || menuActive;
+  const showUI = recentlyInteracted || !playbackStarted || player.controls.IsMenuVisible();
   const hideControls = !showUI && player.playerOptions.controls === EluvioPlayerParameters.controls.AUTO_HIDE;
 
   player.__SetControlsVisibility(!hideControls);
@@ -277,7 +275,7 @@ const TVControls = ({player, playbackStarted, canPlay, recentlyInteracted, setRe
         ControlStyles["container"],
         showUI ? "" : ControlStyles["autohide"],
         player.playerOptions.controls !== EluvioPlayerParameters.controls.DEFAULT ? "" : ControlStyles["container--default-controls"],
-        menuActive ? "menu-active" : ""
+        player.controls.IsMenuVisible() ? "menu-active" : ""
       ].join(" ")}
     >
       <IconButton
@@ -318,7 +316,6 @@ const TVControls = ({player, playbackStarted, canPlay, recentlyInteracted, setRe
                     label="Collection Menu"
                     icon={Icons.CollectionIcon}
                     player={player}
-                    setMenuActive={setMenuActive}
                     MenuComponent={CollectionMenu}
                   />
               }
@@ -335,7 +332,7 @@ const TVControls = ({player, playbackStarted, canPlay, recentlyInteracted, setRe
               </div>
               <CenterButtons player={player} videoState={videoState}/>
               <div className={ControlStyles["bottom-right-controls"]}>
-                <ContentVerificationControls player={player} setMenuActive={setMenuActive} />
+                <ContentVerificationControls player={player} />
                 {
                   !player.controls.GetOptions().hasAnyOptions ? null :
                     <MenuButton
@@ -343,7 +340,6 @@ const TVControls = ({player, playbackStarted, canPlay, recentlyInteracted, setRe
                       label="Settings"
                       player={player}
                       MenuComponent={SettingsMenu}
-                      setMenuActive={setMenuActive}
                     >
                       Settings
                     </MenuButton>

package/lib/ui/WebControls.jsx

@@ -76,7 +76,7 @@ const CollectionControls = ({player}) => {
   );
 };
 
-const MenuButton = ({label, icon, player, setMenuActive, MenuComponent, className=""}) => {
+const MenuButton = ({label, icon, player, MenuComponent, className=""}) => {
   const [show, setShow] = useState(false);
 
   return (
@@ -86,7 +86,7 @@ const MenuButton = ({label, icon, player, setMenuActive, MenuComponent, classNam
         aria-haspopup
         icon={icon}
         onClick={() => {
-          setMenuActive(!show);
+          player.controls.__ToggleMenu(!show);
           setShow(!show);
         }}
         className={show ? ControlStyles["icon-button-active"] : ""}
@@ -97,7 +97,7 @@ const MenuButton = ({label, icon, player, setMenuActive, MenuComponent, classNam
             player={player}
             Hide={() => {
               setShow(false);
-              setMenuActive(false);
+              player.controls.__ToggleMenu(false);
             }}
           />
       }
@@ -154,7 +154,7 @@ const ContentInfo = ({player}) => {
   );
 };
 
-const ContentVerificationControls = ({player, setMenuActive}) => {
+const ContentVerificationControls = ({player}) => {
   const [contentVerified, setContentVerified] = useState(false);
 
   useEffect(() => {
@@ -178,7 +178,6 @@ const ContentVerificationControls = ({player, setMenuActive}) => {
         label="Content Verification Menu"
         icon={Icons.ContentBadgeIcon}
         player={player}
-        setMenuActive={setMenuActive}
         MenuComponent={ContentVerificationMenu}
         className={ControlStyles["content-verification-menu-button"]}
       />
@@ -189,7 +188,6 @@ const ContentVerificationControls = ({player, setMenuActive}) => {
 const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setRecentUserAction, className=""}) => {
   const [videoState, setVideoState] = useState(undefined);
   const [playerClickHandler, setPlayerClickHandler] = useState(undefined);
-  const [activeMenus, setActiveMenus] = useState(0);
 
   useEffect(() => {
     setPlayerClickHandler(PlayerClick({player, setRecentUserAction}));
@@ -202,11 +200,9 @@ const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setR
   if(!videoState) { return null; }
 
   const collectionInfo = player.controls.GetCollectionInfo();
-  const menuActive = activeMenus > 0;
-  const setMenuActive = active => setActiveMenus(active ? activeMenus + 1 : Math.max(0, activeMenus - 1));
 
   // Title autohide is not dependent on controls settings
-  const showUI = recentlyInteracted || !playbackStarted || menuActive;
+  const showUI = recentlyInteracted || !playbackStarted || player.controls.IsMenuVisible();
   const hideControls = !showUI && player.playerOptions.controls === EluvioPlayerParameters.controls.AUTO_HIDE;
 
   player.__SetControlsVisibility(!hideControls);
@@ -219,7 +215,7 @@ const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setR
         ControlStyles["container"],
         showUI ? "" : ControlStyles["autohide"],
         player.playerOptions.controls !== EluvioPlayerParameters.controls.DEFAULT ? "" : ControlStyles["container--default-controls"],
-        menuActive ? "menu-active" : ""
+        player.controls.IsMenuVisible() ? "menu-active" : ""
       ].join(" ")}
     >
       <ContentInfo key={`content-info-${collectionInfo && collectionInfo.mediaIndex}`} player={player} />
@@ -258,10 +254,7 @@ const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setR
 
                 <div className={ControlStyles["spacer"]}/>
 
-                <ContentVerificationControls
-                  player={player}
-                  setMenuActive={setMenuActive}
-                />
+                <ContentVerificationControls player={player} />
 
                 {
                   !collectionInfo ? null :
@@ -269,7 +262,6 @@ const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setR
                       label="Collection Menu"
                       icon={Icons.CollectionIcon}
                       player={player}
-                      setMenuActive={setMenuActive}
                       MenuComponent={CollectionMenu}
                     />
                 }
@@ -288,7 +280,6 @@ const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setR
                       label="Settings Menu"
                       icon={Icons.SettingsIcon}
                       player={player}
-                      setMenuActive={setMenuActive}
                       MenuComponent={SettingsMenu}
                     />
                 }

package/package.json

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