@eluvio/elv-player-js 2.0.4 → 2.0.5

package/lib/player/Player.js

@@ -756,12 +756,36 @@ export class EluvioPlayer {
       versionHash: this.contentHash
     });
 
+    if(!audit.verified) {
+      return;
+    }
+
     audit.verifiedAt = Date.now();
 
+    const objectId = client.utils.DecodeVersionHash(this.contentHash).objectId;
+    audit.details = {
+      _full: false,
+      versionHash: this.contentHash,
+      objectId,
+      address: client.utils.HashToAddress(objectId),
+      signatureMethod: "ECDSA secp256k1"
+    };
+
+    this.contentAudit = audit;
+    this.contentVerified = audit.verified;
+
+    this.__SettingsUpdate();
+  }
+
+  async __LoadVerificationDetails() {
+    if(!this.contentHash || !this.contentAudit || this.contentAudit.details._full) { return; }
+
+    const client = await this.__Client();
+
     const objectId = client.utils.DecodeVersionHash(this.contentHash).objectId;
     const tenantId = await client.ContentObjectTenantId({objectId});
 
-    let tenantName, lastCommittedAt;
+    let tenantName, lastCommittedAt, versionCount, latestTransactionHash, latestTransactionHashUrl;
     try {
       lastCommittedAt = await client.CallContractMethod({
         contractAddress: client.utils.HashToAddress(objectId),
@@ -771,7 +795,17 @@ export class EluvioPlayer {
       if(lastCommittedAt) {
         lastCommittedAt = new Date(parseInt(lastCommittedAt._hex, 16) * 1000);
       }
-    // eslint-disable-next-line no-empty
+
+      versionCount = await client.CallContractMethod({
+        contractAddress: client.utils.HashToAddress(objectId),
+        methodName: "countVersionHashes"
+      });
+
+      if(versionCount) {
+        versionCount = parseInt(versionCount._hex, 16);
+      }
+
+      // eslint-disable-next-line no-empty
     } catch(error) {}
 
     try {
@@ -780,10 +814,25 @@ export class EluvioPlayer {
         objectId: tenantId.replace("iten", "iq__"),
         metadataSubtree: "/public/name"
       });
-    // eslint-disable-next-line no-empty
+      // eslint-disable-next-line no-empty
     } catch(error) {}
 
-    audit.details = {
+    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){}
+
+    this.contentAudit.details = {
+      _full: true,
       versionHash: this.contentHash,
       objectId,
       address: client.utils.HashToAddress(objectId),
@@ -792,12 +841,12 @@ export class EluvioPlayer {
       tenantName,
       ownerAddress: await client.ContentObjectOwner({objectId}),
       lastCommittedAt,
+      versionCount,
+      latestTransactionHash,
+      latestTransactionHashUrl,
       signatureMethod: "ECDSA secp256k1"
     };
 
-    this.contentAudit = audit;
-    this.contentVerified = audit.verified;
-
     this.__SettingsUpdate();
   }
 

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

@@ -466,6 +466,10 @@
     overflow: hidden;
     position: relative;
     width: 100%;
+
+    a {
+      text-decoration: underline;
+    }
   }
 
   &__detail-label {
@@ -483,7 +487,7 @@
 
   &__detail-copy {
     color: var(--color-menu-text-secondary);
-    height: 25px;
+    height: 18px;
     position: absolute;
     right: 0;
 
@@ -595,7 +599,7 @@
     }
 
     &__detail-copy {
-      height: 20px;
+      height: 15px;
     }
   }
 }

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

@@ -224,6 +224,11 @@
   .play-pause-button {
     padding: 0;
   }
+
+  .right-control-button {
+    height: 35px;
+    margin-bottom: 1px;
+  }
 }
 
 .time {

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,8 +346,12 @@ export const ContentVerificationMenu = ({player, Hide, className=""}) => {
   const menuRef = createRef();
   const [audit, setAudit] = useState();
   const [showDetails, setShowDetails] = useState(false);
+  const [_, setLoaded] = useState(false);
 
   useEffect(() => {
+    player.__LoadVerificationDetails()
+      .then(() => setLoaded(true));
+
     const UpdateSettings = () => setAudit(player.controls.ContentVerificationDetails());
 
     UpdateSettings();
@@ -426,10 +432,7 @@ export const ContentVerificationMenu = ({player, Hide, className=""}) => {
         <div className={CommonStyles["verification-menu__details"]}>
           <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} />
           <ContentDetail label="Owner Address" value={audit.details.ownerAddress} copyable />
           <ContentDetail label="Content Object Contract Address" value={audit.details.address} copyable />
           <ContentDetail label="Content Version Hash" value={audit.details.versionHash} copyable />
@@ -437,6 +440,18 @@ export const ContentVerificationMenu = ({player, Hide, className=""}) => {
             !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="Versions" value={audit.details.versionCount} />
+          {
+            !audit.details.latestTransactionHash ? null :
+              <ContentDetail
+                label="Latest Transaction"
+                value={
+                  <a href={audit.details.latestTransactionHashUrl} target="_blank" rel="noreferrer">
+                    { audit.details.latestTransactionHash }
+                  </a>
+                }
+              />
+          }
           <ContentDetail label="Signature Algorithm" value={audit.details.signatureMethod} />
         </div>
       </>

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