@eluvio/elv-player-js 2.0.5 → 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
    *
@@ -839,11 +855,10 @@ class PlayerControls {
    *
    * @returns {Object} - Details about the content audit
    */
-  ContentVerificationDetails() {
+  GetContentVerificationDetails() {
     return this.player.contentAudit || false;
   }
 
-
   GetOptions() {
     let options = {
       quality: this.GetQualityLevels(),

package/lib/player/Player.js

@@ -752,9 +752,10 @@ export class EluvioPlayer {
 
     const client = await this.__Client();
 
-    const audit = await client.AuditContentObject({
-      versionHash: this.contentHash
-    });
+    const audit =
+      this.isLive ?
+        await client.AuditStream({versionHash: this.contentHash}) :
+        await client.AuditContentObject({versionHash: this.contentHash});
 
     if(!audit.verified) {
       return;
@@ -764,7 +765,7 @@ export class EluvioPlayer {
 
     const objectId = client.utils.DecodeVersionHash(this.contentHash).objectId;
     audit.details = {
-      _full: false,
+      _state: "initial",
       versionHash: this.contentHash,
       objectId,
       address: client.utils.HashToAddress(objectId),
@@ -778,14 +779,23 @@ export class EluvioPlayer {
   }
 
   async __LoadVerificationDetails() {
-    if(!this.contentHash || !this.contentAudit || this.contentAudit.details._full) { return; }
+    if(
+      !this.contentHash ||
+      !this.contentAudit ||
+      this.contentAudit.details._state !== "initial" ||
+      this.contentAudit.loading
+    ) {
+      return;
+    }
+
+    this.contentAudit.loading = true;
 
     const client = await this.__Client();
 
     const objectId = client.utils.DecodeVersionHash(this.contentHash).objectId;
     const tenantId = await client.ContentObjectTenantId({objectId});
 
-    let tenantName, lastCommittedAt, versionCount, latestTransactionHash, latestTransactionHashUrl;
+    let tenantName, lastCommittedAt, versionCount;
     try {
       lastCommittedAt = await client.CallContractMethod({
         contractAddress: client.utils.HashToAddress(objectId),
@@ -806,7 +816,7 @@ export class EluvioPlayer {
       }
 
       // eslint-disable-next-line no-empty
-    } catch(error) {}
+    } catch (error) {}
 
     try {
       tenantName = await client.ContentObjectMetadata({
@@ -815,39 +825,46 @@ export class EluvioPlayer {
         metadataSubtree: "/public/name"
       });
       // eslint-disable-next-line no-empty
-    } catch(error) {}
-
-    try {
-      if(client.NetworkInfo().name === "main") {
-        const explorerUrl = new URL("https://explorer.contentfabric.io/api");
-        explorerUrl.searchParams.set("module", "account");
-        explorerUrl.searchParams.set("action", "txlist");
-        explorerUrl.searchParams.set("offset", "1");
-        explorerUrl.searchParams.set("address", client.utils.HashToAddress(objectId));
-
-        latestTransactionHash = (await ((await fetch(explorerUrl)).json())).result[0].hash;
-        latestTransactionHashUrl = `https://explorer.contentfabric.io/tx/${latestTransactionHash}`;
-      }
-      // eslint-disable-next-line no-empty
-    } catch(error){}
+    } catch (error) {}
 
     this.contentAudit.details = {
-      _full: true,
+      _state: "minus-tx",
       versionHash: this.contentHash,
       objectId,
       address: client.utils.HashToAddress(objectId),
+      explorerUrl: client.NetworkInfo().name !== "main" ? undefined :
+        `https://explorer.contentfabric.io/address/${client.utils.HashToAddress(objectId)}`,
       tenantId,
       tenantAddress: client.utils.HashToAddress(tenantId),
       tenantName,
       ownerAddress: await client.ContentObjectOwner({objectId}),
       lastCommittedAt,
       versionCount,
-      latestTransactionHash,
-      latestTransactionHashUrl,
+      latestVersionHash: await client.LatestVersionHash({objectId}),
       signatureMethod: "ECDSA secp256k1"
     };
 
     this.__SettingsUpdate();
+
+    try {
+      if(client.NetworkInfo().name === "main") {
+        const explorerUrl = new URL("https://explorer.contentfabric.io/api");
+        explorerUrl.searchParams.set("module", "account");
+        explorerUrl.searchParams.set("action", "txlist");
+        explorerUrl.searchParams.set("offset", "1");
+        explorerUrl.searchParams.set("address", client.utils.HashToAddress(objectId));
+
+        this.contentAudit.details.latestTransactionHash = (await ((await fetch(explorerUrl)).json())).result[0].hash;
+        this.contentAudit.details.latestTransactionHashUrl = `https://explorer.contentfabric.io/tx/${this.contentAudit.details.latestTransactionHash}`;
+      }
+      // eslint-disable-next-line no-empty
+    } catch (error) {
+    } finally {
+      this.contentAudit.details._state = "full";
+      delete this.contentAudit.loading;
+
+      this.__SettingsUpdate();
+    }
   }
 
   // Indicate to controls that the settings have updated

package/lib/static/icons/Icons.js

@@ -29,6 +29,6 @@ export const CheckmarkIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"
 export const CaptionsIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon icon-tabler icon-tabler-badge-cc\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" stroke=\"black\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">  <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>  <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" stroke=\"currentColor\"></rect>  <path d=\"M10 10.5a1.5 1.5 0 0 0 -3 0v3a1.5 1.5 0 0 0 3 0\" stroke=\"currentColor\"></path>  <path d=\"M17 10.5a1.5 1.5 0 0 0 -3 0v3a1.5 1.5 0 0 0 3 0\" stroke=\"currentColor\"></path></svg>`;
 export const CaptionsOffIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon icon-tabler icon-tabler-badge-cc\" width=\"48\" height=\"48\" viewBox=\"0 0 24 24\" stroke=\"black\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">  <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"></path>  <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" stroke=\"currentColor\"></rect>  <path d=\"M10 10.5a1.5 1.5 0 0 0 -3 0v3a1.5 1.5 0 0 0 3 0\" stroke=\"currentColor\"></path>  <path d=\"M17 10.5a1.5 1.5 0 0 0 -3 0v3a1.5 1.5 0 0 0 3 0\" stroke=\"currentColor\"></path>  <path d=\"M3 3l18 18\" stroke=\"currentColor\"></path></svg>`;
 export const RotateIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-rotate-cw\"><polyline points=\"23 4 23 10 17 10\"></polyline><path d=\"M20.49 15a9 9 0 1 1-2.12-9.36L23 10\"></path></svg>`;
-export const ContentShieldIcon = `<svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15 27.5C15 27.5 25 22.5 25 15V6.25L15 2.5L5 6.25V15C5 22.5 15 27.5 15 27.5Z\" stroke=\"currentColor\" stroke-width=\"2.14286\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M19.715 11.3574L13.8221 17.8396L11.1436 14.8931\" stroke=\"currentColor\" stroke-width=\"2.14286\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>`;
+export const ContentBadgeIcon = `<svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15 27.5C15 27.5 25 22.5 25 15V6.25L15 2.5L5 6.25V15C5 22.5 15 27.5 15 27.5Z\" stroke=\"currentColor\" stroke-width=\"2.14286\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M19.715 11.3574L13.8221 17.8396L11.1436 14.8931\" stroke=\"currentColor\" stroke-width=\"2.14286\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>`;
 export const ContentCredentialsIcon = `<svg width=\"26\" height=\"26\" viewBox=\"0 0 26 26\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M23.7508 12.9997V23.7508H13.0003C7.05943 23.7508 2.24919 18.9406 2.24919 12.9997C2.24919 7.05888 7.05943 2.24864 13.0003 2.24864C18.9411 2.24864 23.7508 7.05888 23.7508 12.9997ZM0 12.9997C0 5.82396 5.82396 0 12.9997 0C20.1755 0 26 5.82396 26 12.9997V25.9995H13.0003C5.82396 25.9995 0 20.1755 0 12.9997ZM5.174 13.5197C5.174 16.1976 6.98078 18.4599 9.85371 18.4599C12.2198 18.4599 13.8185 16.9 14.2084 14.8589H11.8686C11.5698 15.7951 10.8155 16.367 9.85371 16.367C8.39758 16.367 7.44886 15.2227 7.44886 13.5202C7.44886 11.8178 8.39813 10.6735 9.85371 10.6735C10.7899 10.6735 11.5305 11.2066 11.8429 12.0903H14.1959C13.7797 10.1011 12.1941 8.58055 9.85371 8.58055C6.96822 8.58001 5.174 10.8418 5.174 13.5197ZM17.3419 8.83999H15.132V18.2131H17.4331V13.3253C17.4331 12.4022 17.6931 11.8041 18.1349 11.4273C18.5249 11.0761 19.0318 10.8942 19.8642 10.8942H20.4491V8.72256H19.8773C18.668 8.72256 17.8624 9.16442 17.3424 9.8406V8.82633V8.83999H17.3419Z\" fill=\"currentColor\"/></svg>`;
 export const CopyIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-copy\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path></svg>`;

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

@@ -450,6 +450,14 @@
     }
   }
 
+  &__loader {
+    align-items: center;
+    border-width: 3px;
+    display: flex;
+    height: 18px;
+    width: 18px;
+  }
+
   &__details {
     background: var(--color-menu-background-secondary);
     display: grid;

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/BuildIcons.cjs

@@ -32,7 +32,7 @@ const iconSource = {
   CaptionsIcon: Path.resolve(__dirname, "../static/icons/svgs/captions.svg"),
   CaptionsOffIcon: Path.resolve(__dirname, "../static/icons/svgs/captions-off.svg"),
   RotateIcon: Path.resolve(__dirname, "../static/icons/svgs/rotate-cw.svg"),
-  ContentShieldIcon: Path.resolve(__dirname, "../static/icons/svgs/shield.svg"),
+  ContentBadgeIcon: Path.resolve(__dirname, "../static/icons/svgs/content-badge.svg"),
   ContentCredentialsIcon: Path.resolve(__dirname, "../static/icons/svgs/content-credentials.svg"),
   CopyIcon: Path.resolve(__dirname, "../static/icons/svgs/copy.svg"),
 };

package/lib/ui/Components.jsx

@@ -352,7 +352,7 @@ export const ContentVerificationMenu = ({player, Hide, className=""}) => {
     player.__LoadVerificationDetails()
       .then(() => setLoaded(true));
 
-    const UpdateSettings = () => setAudit(player.controls.ContentVerificationDetails());
+    const UpdateSettings = () => setAudit(player.controls.GetContentVerificationDetails());
 
     UpdateSettings();
 
@@ -380,7 +380,7 @@ export const ContentVerificationMenu = ({player, Hide, className=""}) => {
     content = (
       <>
         <div className={CommonStyles["verification-menu__group"]}>
-          <div dangerouslySetInnerHTML={{__html: Icons.ContentShieldIcon}} className={CommonStyles["verification-menu__group-icon"]} />
+          <div dangerouslySetInnerHTML={{__html: Icons.ContentBadgeIcon}} style={{width: 35, height: 35}} 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}} className={CommonStyles["verification-menu__group-icon"]} />
+          <div dangerouslySetInnerHTML={{__html: Icons.ContentCredentialsIcon}} style={{height: 30, maxWidth: 30}} className={CommonStyles["verification-menu__group-icon"]} />
           <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.ContentShieldIcon}} className={CommonStyles["verification-menu__group-icon"]} />
+          <div dangerouslySetInnerHTML={{__html: Icons.ContentBadgeIcon}} style={{width: 50, height: 50}} 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
@@ -429,36 +429,46 @@ export const ContentVerificationMenu = ({player, Hide, className=""}) => {
             </div>
           </div>
         </div>
-        <div className={CommonStyles["verification-menu__details"]}>
+        <div className={CommonStyles["verification-menu__details"]} key={`details-${audit.details._state}`}>
           <ContentDetail label="Content Fabric Object ID" value={audit.details.objectId} copyable />
           <ContentDetail label="Organization Address" value={audit.details.tenantAddress} copyable />
-          <ContentDetail label="Organization Name" value={audit.details.tenantName} />
+          <ContentDetail label="Organization Name" value={audit.details.tenantName && audit.details.tenantName.toString()} />
           <ContentDetail label="Owner Address" value={audit.details.ownerAddress} copyable />
-          <ContentDetail label="Content Object Contract Address" value={audit.details.address} copyable />
+          <ContentDetail
+            label="Content Object Contract Address"
+            value={
+            audit.details.explorerUrl ?
+              <a href={audit.details.explorerUrl} target="_blank" rel="noreferrer">
+                {audit.details.address}
+              </a> :
+              audit.details.address
+            }
+            copyable
+          />
+          <ContentDetail label="Versions" value={audit.details.versionCount} />
           <ContentDetail label="Content Version Hash" value={audit.details.versionHash} copyable />
           {
             !audit.details.lastCommittedAt ? null :
-              <ContentDetail label="Last Commit" value={new Date(audit.details.lastCommittedAt).toLocaleTimeString(navigator.language || "en-us", {year: "numeric", "month": "long", day: "numeric"})} />
+              <ContentDetail label="Latest Commit" value={new Date(audit.details.lastCommittedAt).toLocaleTimeString(navigator.language || "en-us", {year: "numeric", "month": "long", day: "numeric"})} />
           }
-          <ContentDetail label="Versions" value={audit.details.versionCount} />
-          {
-            !audit.details.latestTransactionHash ? null :
-              <ContentDetail
-                label="Latest Transaction"
-                value={
+          <ContentDetail label="Latest Version Hash" value={audit.details.latestVersionHash} copyable />
+          <ContentDetail
+            label="Latest Transaction"
+            value={
+              audit.details._state !== "full" ?
+                <Spinner className={CommonStyles["verification-menu__loader"]} /> :
+                audit.details.latestTransactionHashUrl ?
                   <a href={audit.details.latestTransactionHashUrl} target="_blank" rel="noreferrer">
-                    { audit.details.latestTransactionHash }
-                  </a>
-                }
-              />
-          }
+                    { audit.details.latestTransactionHash && audit.details.latestTransactionHash.toString() }
+                  </a> : undefined
+            }
+          />
           <ContentDetail label="Signature Algorithm" value={audit.details.signatureMethod} />
         </div>
       </>
     );
   }
 
-
   return (
     <div ref={menuRef}>
       <div key="menu" role="menu" className={`${CommonStyles["menu"]} ${CommonStyles["verification-menu"]} ${showDetails ? CommonStyles["verification-menu--details"] : ""} ${className}`}>

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(() => {
@@ -229,9 +229,8 @@ const ContentVerificationControls = ({player, setMenuActive}) => {
   return (
     <MenuButton
       label="Content Verification Menu"
-      icon={Icons.ContentShieldIcon}
+      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(() => {
@@ -176,9 +176,8 @@ const ContentVerificationControls = ({player, setMenuActive}) => {
       </div>
       <MenuButton
         label="Content Verification Menu"
-        icon={Icons.ContentShieldIcon}
+        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.5",
+  "version": "2.0.7",
   "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.87",
+    "@eluvio/elv-client-js": "^4.0.88",
     "dashjs": "~4.7.0",
     "focus-visible": "^5.2.0",
     "hls.js": "~1.4.12",