@eluvio/elv-player-js 2.0.3 → 2.0.5

package/lib/ui/BuildIcons.cjs

@@ -32,12 +32,15 @@ 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"),
+  ContentCredentialsIcon: Path.resolve(__dirname, "../static/icons/svgs/content-credentials.svg"),
+  CopyIcon: Path.resolve(__dirname, "../static/icons/svgs/copy.svg"),
 };
 
 let iconFile = "// WARNING: Do not edit this file manually\n"
 iconFile += "// Built using `npm run build-icons`\n\n";
 Object.keys(iconSource).map(iconName => {
-  iconFile += `export const ${iconName} = "${fs.readFileSync(iconSource[iconName]).toString("utf8").replaceAll("\n", "").replaceAll("\"", "\\\"")}";\n`;
+  iconFile += `export const ${iconName} = \`${fs.readFileSync(iconSource[iconName]).toString("utf8").replaceAll("\n", "").replaceAll("\"", "\\\"")}\`;\n`;
 });
 
 fs.writeFileSync(

package/lib/ui/Components.jsx

@@ -208,7 +208,7 @@ export const SettingsMenu = ({player, Hide, className=""}) => {
   let content;
   if(activeMenu) {
     content = (
-      <div key="submenu" role="menu" className={`${CommonStyles["menu"]} ${CommonStyles["submenu"]} ${CommonStyles["settings-menu"]} ${className}`}>
+      <div key="submenu" role="menu" className={`${CommonStyles["menu"]} ${CommonStyles["submenu"]} ${className}`}>
         <button
           onClick={() => SetSubmenu(undefined)}
           aria-label="Back to settings menu"
@@ -240,7 +240,7 @@ export const SettingsMenu = ({player, Hide, className=""}) => {
     );
   } else {
     content = (
-      <div key="menu" role="menu" className={`${CommonStyles["menu"]} ${CommonStyles["settings-menu"]} ${className}`}>
+      <div key="menu" role="menu" className={`${CommonStyles["menu"]} ${className}`}>
         {
           !options.hasQualityOptions ? null :
             <button autoFocus role="menuitem" onClick={() => SetSubmenu("quality")}
@@ -282,12 +282,192 @@ export const SettingsMenu = ({player, Hide, className=""}) => {
   }
 
   return (
-    <div ref={menuRef} className={`${CommonStyles["menu-container"]}`}>
+    <div ref={menuRef}>
       { content }
     </div>
   );
 };
 
+export const Copy = async (value) => {
+  try {
+    value = (value || "").toString();
+
+    await navigator.clipboard.writeText(value);
+  } catch(error) {
+    const input = document.createElement("input");
+
+    input.value = value;
+    input.select();
+    input.setSelectionRange(0, 99999);
+    document.execCommand("copy");
+  }
+};
+
+export const CopyButton = ({label, value, className=""}) => {
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <button
+      onClick={() => {
+        if(copied) { return; }
+
+        Copy(value);
+
+        setCopied(true);
+        setTimeout(() => setCopied(false), 100);
+      }}
+      dangerouslySetInnerHTML={{__html: Icons.CopyIcon}}
+      className={[CommonStyles["copy-button"], copied ? CommonStyles["copy-button--copied"] : "", className].join(" ")}
+      title={`Copy ${label}`}
+    />
+  );
+};
+
+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>
+      <div className={CommonStyles["verification-menu__detail-value"]}>{value}</div>
+      {
+        !copyable ? null :
+          <CopyButton
+            label={label}
+            value={value}
+            className={CommonStyles["verification-menu__detail-copy"]}
+          />
+      }
+    </div>
+  );
+};
+
+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();
+
+    const disposePlayerSettingsListener = player.controls.RegisterSettingsListener(UpdateSettings);
+
+    return () => disposePlayerSettingsListener && disposePlayerSettingsListener();
+  }, []);
+
+  useEffect(() => {
+    if(!menuRef || !menuRef.current) { return; }
+
+    const RemoveMenuListener = RegisterModal({element: menuRef.current.parentElement, Hide});
+
+    return () => {
+      RemoveMenuListener && RemoveMenuListener();
+    };
+  }, [menuRef]);
+
+  if(!audit) {
+    return null;
+  }
+
+  let content;
+  if(!showDetails) {
+    content = (
+      <>
+        <div className={CommonStyles["verification-menu__group"]}>
+          <div dangerouslySetInnerHTML={{__html: Icons.ContentShieldIcon}} 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
+            </div>
+            <div className={CommonStyles["verification-menu__group-subtitle"]}>
+              Last Verified: { new Date(audit.verifiedAt).toLocaleTimeString(navigator.language || "en-us", {year: "numeric", "month": "long", day: "numeric"}) }
+            </div>
+          </div>
+        </div>
+        <div className={CommonStyles["verification-menu__group"]}>
+          <div dangerouslySetInnerHTML={{__html: Icons.ContentCredentialsIcon}} 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
+              <div className={CommonStyles["verification-menu__inline-icon"]} dangerouslySetInnerHTML={{__html: Icons.ChevronRightIcon}} />
+            </button>
+          </div>
+        </div>
+      </>
+    );
+  } else {
+    content = (
+      <>
+        <div className={CommonStyles["verification-menu__group"]}>
+          <div dangerouslySetInnerHTML={{__html: Icons.ContentShieldIcon}} 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
+            </div>
+            <div className={CommonStyles["verification-menu__group-subtitle"]}>
+              Last Verified: { new Date(audit.verifiedAt).toLocaleTimeString(navigator.language || "en-us", {year: "numeric", "month": "long", day: "numeric"}) }
+            </div>
+          </div>
+        </div>
+        <div className={CommonStyles["verification-menu__group"]}>
+          <div dangerouslySetInnerHTML={{__html: Icons.ContentCredentialsIcon}} className={CommonStyles["verification-menu__group-icon"]} />
+          <div className={CommonStyles["verification-menu__group-text"]}>
+            <button onClick={() => setShowDetails(true)} className={CommonStyles["verification-menu__group-title"]}>
+              Content Credentials
+            </button>
+            <div className={CommonStyles["verification-menu__group-subtitle"]}>
+              Issued by the
+              <a href="https://main.net955305.contentfabric.io/config" target="_blank" rel="noreferrer">
+                Content Fabric
+              </a>
+            </div>
+          </div>
+        </div>
+        <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 />
+          <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 />
+          {
+            !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>
+      </>
+    );
+  }
+
+
+  return (
+    <div ref={menuRef}>
+      <div key="menu" role="menu" className={`${CommonStyles["menu"]} ${CommonStyles["verification-menu"]} ${showDetails ? CommonStyles["verification-menu--details"] : ""} ${className}`}>
+        { content }
+      </div>
+    </div>
+  );
+};
+
 export const CollectionMenu = ({player, Hide, className=""}) => {
   const menuRef = createRef();
   const [collectionInfo, setCollectionInfo] = useState(undefined);

package/lib/ui/Observers.js

@@ -12,6 +12,7 @@ export const RegisterModal = ({element, Hide}) => {
     }
   };
 
+  /*
   const onFocusOut = () => {
     // Without timeout, document.activeElement is always body
     setTimeout(() => {
@@ -25,16 +26,26 @@ export const RegisterModal = ({element, Hide}) => {
     });
   };
 
+   */
+
+  const onClickOut = event => {
+    if(!element.contains(event.target)) {
+      Hide();
+    }
+  };
+
   // Wrap handlers in timeout so that the click that spawned the modal does not cause it to close
   let registerTimeout = setTimeout(() => {
     document.body.addEventListener("keydown", onEscape);
-    element.addEventListener("focusout", onFocusOut);
+    document.body.addEventListener("click", onClickOut, true);
+    //element.addEventListener("focusout", onFocusOut);
   }, 0);
 
   return () => {
     clearTimeout(registerTimeout);
     document.body.removeEventListener("keydown", onEscape);
-    element.removeEventListener("focusout", onFocusOut);
+    document.body.removeEventListener("click", onClickOut, true);
+    //element.removeEventListener("focusout", onFocusOut);
   };
 };
 

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

@@ -9,7 +9,7 @@ import {ImageUrl, PlayerClick, Time} from "./Common.js";
 import EluvioPlayerParameters from "../player/PlayerParameters.js";
 
 import EluvioLogo from "../static/images/Logo.png";
-import {CollectionMenu, SeekBar, SettingsMenu, SVG, VolumeControls} from "./Components.jsx";
+import {CollectionMenu, ContentVerificationMenu, SeekBar, SettingsMenu, SVG, VolumeControls} from "./Components.jsx";
 
 export const IconButton = ({icon, ...props}) => {
   return (
@@ -211,6 +211,34 @@ const InfoBox = ({player, Hide}) => {
   );
 };
 
+const ContentVerificationControls = ({player, setMenuActive}) => {
+  const [contentVerified, setContentVerified] = useState(false);
+
+  useEffect(() => {
+    const UpdateVerification = () => setContentVerified(player.controls.ContentVerified());
+
+    UpdateVerification();
+
+    player.controls.RegisterSettingsListener(UpdateVerification);
+  }, []);
+
+  if(!contentVerified) {
+    return null;
+  }
+
+  return (
+    <MenuButton
+      label="Content Verification Menu"
+      icon={Icons.ContentShieldIcon}
+      player={player}
+      setMenuActive={setMenuActive}
+      MenuComponent={ContentVerificationMenu}
+      className={ControlStyles["content-verification-menu-button"]}
+    >
+      Verified
+    </MenuButton>
+  );
+};
 
 const TVControls = ({player, playbackStarted, canPlay, recentlyInteracted, setRecentUserAction, className=""}) => {
   const [videoState, setVideoState] = useState(undefined);
@@ -307,6 +335,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} />
                 {
                   !player.controls.GetOptions().hasAnyOptions ? null :
                     <MenuButton

package/lib/ui/WebControls.jsx

@@ -9,11 +9,11 @@ import {ImageUrl, PlayerClick, Time} from "./Common.js";
 import EluvioPlayerParameters from "../player/PlayerParameters.js";
 
 import EluvioLogo from "../static/images/Logo.png";
-import {CollectionMenu, SeekBar, SettingsMenu, VolumeControls} from "./Components.jsx";
+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}} />
   );
 };
 
@@ -76,11 +76,11 @@ const CollectionControls = ({player}) => {
   );
 };
 
-const MenuButton = ({label, icon, player, setMenuActive, MenuComponent}) => {
+const MenuButton = ({label, icon, player, setMenuActive, MenuComponent, className=""}) => {
   const [show, setShow] = useState(false);
 
   return (
-    <div className={ControlStyles["menu-control-container"]}>
+    <div className={[ControlStyles["menu-control-container"], className].join(" ")}>
       <IconButton
         aria-label={show ? `Hide ${label} Menu` : label}
         aria-haspopup
@@ -154,6 +154,38 @@ const ContentInfo = ({player}) => {
   );
 };
 
+const ContentVerificationControls = ({player, setMenuActive}) => {
+  const [contentVerified, setContentVerified] = useState(false);
+
+  useEffect(() => {
+    const UpdateVerification = () => setContentVerified(player.controls.ContentVerified());
+
+    UpdateVerification();
+
+    player.controls.RegisterSettingsListener(UpdateVerification);
+  }, []);
+
+  if(!contentVerified) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className={ControlStyles["content-verified-badge"]}>
+        VERIFIED
+      </div>
+      <MenuButton
+        label="Content Verification Menu"
+        icon={Icons.ContentShieldIcon}
+        player={player}
+        setMenuActive={setMenuActive}
+        MenuComponent={ContentVerificationMenu}
+        className={ControlStyles["content-verification-menu-button"]}
+      />
+    </>
+  );
+};
+
 const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setRecentUserAction, className=""}) => {
   const [videoState, setVideoState] = useState(undefined);
   const [playerClickHandler, setPlayerClickHandler] = useState(undefined);
@@ -226,6 +258,11 @@ const WebControls = ({player, playbackStarted, canPlay, recentlyInteracted, setR
 
                 <div className={ControlStyles["spacer"]}/>
 
+                <ContentVerificationControls
+                  player={player}
+                  setMenuActive={setMenuActive}
+                />
+
                 {
                   !collectionInfo ? null :
                     <MenuButton
@@ -242,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"]}
                     />
                 }
                 {
@@ -258,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.3",
+  "version": "2.0.5",
   "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.76",
+    "@eluvio/elv-client-js": "^4.0.87",
     "dashjs": "~4.7.0",
     "focus-visible": "^5.2.0",
     "hls.js": "~1.4.12",