@eluvio/elv-player-js 2.0.4 → 2.0.6

package/lib/ui/Components.jsx

@@ -324,6 +324,8 @@ export const CopyButton = ({label, value, className=""}) => {
 };
 
 const ContentDetail = ({label, value, copyable}) => {
+  if(!value) { return null; }
+
   return (
     <div className={CommonStyles["verification-menu__detail"]}>
       <label className={CommonStyles["verification-menu__detail-label"]}>{label}:</label>
@@ -344,9 +346,13 @@ export const ContentVerificationMenu = ({player, Hide, className=""}) => {
   const menuRef = createRef();
   const [audit, setAudit] = useState();
   const [showDetails, setShowDetails] = useState(false);
+  const [_, setLoaded] = useState(false);
 
   useEffect(() => {
-    const UpdateSettings = () => setAudit(player.controls.ContentVerificationDetails());
+    player.__LoadVerificationDetails()
+      .then(() => setLoaded(true));
+
+    const UpdateSettings = () => setAudit(player.controls.GetContentVerificationDetails());
 
     UpdateSettings();
 
@@ -374,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
@@ -385,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
@@ -399,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
@@ -423,27 +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 />
-          {
-            !audit.details.tenantName ? null :
-              <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="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 && 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

@@ -199,8 +199,8 @@ const PlayerUI = ({target, parameters, InitCallback, ErrorCallback, Unmount, Res
       tabIndex={0}
       style={{
         backgroundColor: parameters.playerOptions.backgroundColor || "transparent",
-        "--portal-width": `${dimensions.width}px`,
-        "--portal-height": `${dimensions.height}px`
+        "--portal-width": `${shouldRotate ? dimensions.height : dimensions.width}px`,
+        "--portal-height": `${shouldRotate ? dimensions.width : dimensions.height}px`
       }}
       className={[PlayerStyles["player-container"], shouldRotate ? PlayerStyles["player-container--rotated"] : "", `__eluvio-player--size-${size}`, `__eluvio-player--orientation-${orientation}`].join(" ")}
     >

package/lib/ui/TVControls.jsx

@@ -229,7 +229,7 @@ const ContentVerificationControls = ({player, setMenuActive}) => {
   return (
     <MenuButton
       label="Content Verification Menu"
-      icon={Icons.ContentShieldIcon}
+      icon={Icons.ContentBadgeIcon}
       player={player}
       setMenuActive={setMenuActive}
       MenuComponent={ContentVerificationMenu}

package/lib/ui/WebControls.jsx

@@ -11,9 +11,9 @@ import EluvioPlayerParameters from "../player/PlayerParameters.js";
 import EluvioLogo from "../static/images/Logo.png";
 import {CollectionMenu, ContentVerificationMenu, SeekBar, SettingsMenu, VolumeControls} from "./Components.jsx";
 
-export const IconButton = ({icon, ...props}) => {
+export const IconButton = ({icon, className="", ...props}) => {
   return (
-    <button {...props} className={`${ControlStyles["icon-button"]} ${props.className || ""}`} dangerouslySetInnerHTML={{__html: icon}} />
+    <button {...props} className={`${ControlStyles["icon-button"]} ${className}`} dangerouslySetInnerHTML={{__html: icon}} />
   );
 };
 
@@ -176,7 +176,7 @@ const ContentVerificationControls = ({player, setMenuActive}) => {
       </div>
       <MenuButton
         label="Content Verification Menu"
-        icon={Icons.ContentShieldIcon}
+        icon={Icons.ContentBadgeIcon}
         player={player}
         setMenuActive={setMenuActive}
         MenuComponent={ContentVerificationMenu}
@@ -279,6 +279,7 @@ const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setR
                       aria-label="Rotate Video"
                       icon={Icons.RotateIcon}
                       onClick={() => player.controls.SetAllowRotation(!player.controls.AllowRotation())}
+                      className={ControlStyles["right-control-button"]}
                     />
                 }
                 {
@@ -295,6 +296,7 @@ const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setR
                   aria-label={videoState.fullscreen ? "Exit Fullscreen" : "Fullscreen"}
                   icon={videoState.fullscreen ? Icons.ExitFullscreenIcon : Icons.FullscreenIcon}
                   onClick={() => player.controls.ToggleFullscreen()}
+                  className={ControlStyles["right-control-button"]}
                 />
               </div>
             </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eluvio/elv-player-js",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "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",