@capillarytech/cap-ui-utils 1.4.6-alpha5.0 → 1.4.6-alpha6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capillarytech/cap-ui-utils",
-  "version": "1.4.6-alpha5.0",
+  "version": "1.4.6-alpha6.0",
   "description": "Utility functions shared accross all the modules",
   "main": "index.js",
   "scripts": {
@@ -8,7 +8,7 @@
   },
   "author": "Rajshekar",
   "dependencies": {
-    "@capillarytech/cap-ui-library": "4.0.1",
+    "@capillarytech/cap-ui-library": "4.1.15",
     "prop-types": "^15.8.1",
     "react": "^16.13.0",
     "react-ga": "^2.7.0",

package/utils/withDemoVideosAndLinkHOC/ResizablePIP.js

@@ -3,6 +3,8 @@ import { ResizableBox } from "react-resizable";
 import PropTypes from "prop-types";
 import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
 import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
+import CapLink from "@capillarytech/cap-ui-library/CapLink";
+import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
 import CapRow from "@capillarytech/cap-ui-library/CapRow";
 import Draggable from "react-draggable";
 import "react-resizable/css/styles.css";
@@ -10,114 +12,125 @@ import "react-resizable/css/styles.css";
 const ResizablePIP = ({
   children,
   width = 400,
-  height = 260,
+  height = 310,
   showMaximised = false,
   handleShowMaximised,
-  minConstraints = [400, 260],
-  maxConstraints = [1404, 900],
+  minConstraints = [400, 310],
+  maxConstraints = [1104, 722],
   closePIPContainer = () => {},
-  handleOpenInNew = () => {},
-  PIPPosition = '',
+  footerContent = {},
 }) => {
   const [pipWidth, setPipWidth] = useState(width);
   const [pipHeight, setPipHeight] = useState(height);
+  const [isHovering, setIsHovering] = useState(false);
+  const handleMouseEnter = () => setIsHovering(true);
+  const handleMouseLeave = () => setIsHovering(false);
   const handleMaximiseView = () => {
     if (!showMaximised) {
-      setPipWidth(1404);
-      setPipHeight(730);
+      setPipWidth(1104);
+      setPipHeight(722);
     } else {
       setPipWidth(width);
       setPipHeight(height);
     }
     handleShowMaximised(!showMaximised);
   };
-  const positionStyle = {
-    position: 'relative',
-  }
-  switch (PIPPosition) {
-    case 'topLeft':
-      positionStyle.left = 8;
-      positionStyle.top = 8;
-      break;
-    case 'topRight':
-      positionStyle.right = '-70vw';
-      positionStyle.top = 8;
-      break;
-    case 'bottomLeft':
-      positionStyle.left = 8;
-      positionStyle.bottom = '-33vw';
-      break;
-    case 'bottomRight':
-      positionStyle.right = '-70vw';
-      positionStyle.bottom = '-33vw';
-      break;
-  
-    default:
-      break;
-  }
+
+  const handleOpenDoc = () => window.open(footerContent.supportDoc, "_blank");
+  console.log("NIKHIL hover: ", isHovering);
+  const draggableStyle = {
+    position: "relative",
+    left: 24,
+    // bottom: "-88vh",
+    margin: 2,
+    border: '1px solid black',
+  };
   return (
-    <div
-      style={positionStyle}
+    <Draggable
+      style={draggableStyle}
     >
-      <Draggable>
-        <div
-          style={{
-            backgroundColor: "#242d36",
-            zIndex: "100000",
-            position: "fixed",
-            fontSize: "14px",
-            fontWeight: "200",
-            lineHeight: "1.5",
-            color: "rgb(248, 248, 249)",
-            boxSizing: "content-box",
-            boxShadow:
-              "1px 3px 3px 0 rgb(0 0 0 / 20%), 1px 3px 15px 2px rgb(0 0 0 / 20%)",
-            borderRadius: "0.28571429rem",
+      <div
+        style={{
+          zIndex: "100000",
+          position: "fixed",
+          fontSize: "14px",
+          fontWeight: "200",
+          lineHeight: "1.5",
+          boxSizing: "content-box",
+          boxShadow:
+            "1px 3px 3px 0 rgb(0 0 0 / 20%), 1px 3px 15px 2px rgb(0 0 0 / 20%)",
+          borderRadius: 4,
+          backgroundColor: "#fff",
+        }}
+      >
+        <ResizableBox
+          onMouseDown={(e) => {
+            e.stopPropagation();
           }}
+          width={pipWidth}
+          height={pipHeight}
+          minConstraints={minConstraints}
+          maxConstraints={maxConstraints}
         >
-          <CapRow>
-            <CapRow>
-              <CapColumn span={showMaximised ? 2 : 5} offset={showMaximised ? 22 : 19}>
-                <CapIcon
-                  onClick={handleMaximiseView}
-                  style={{ marginTop: 8 }}
-                  type="help"
-                />
-                <CapIcon
-                  onClick={handleOpenInNew}
-                  style={{ marginTop: 8, marginLeft: 4 }}
-                  type="open-in-new"
-                />
-                <CapIcon
-                  onClick={closePIPContainer}
-                  style={{ marginTop: 8, marginLeft: 4 }}
-                  type="close"
-                />
-              </CapColumn>
-            </CapRow>
-            <CapRow>
-              <ResizableBox
-                onMouseDown={(e) => {
-                  e.stopPropagation();
-                }}
-                style={{
-                  background: "#202429",
-                  margin: "8px",
-                  borderRadius: "4px",
-                  overflow: "auto",
-                }}
-                width={pipWidth}
-                height={pipHeight}
-                minConstraints={minConstraints}
-                maxConstraints={maxConstraints}
-              >
-                {children}
-              </ResizableBox>
-            </CapRow>
+          <div
+            style={{
+              height: "calc(100% - 56px)",
+              opacity: isHovering ? 0.3 : 1,
+              color: "#000",
+              backgroundColor: "rgba(0, 0, 0, 0.3)",
+              transition: "opacity 0.2s ease-in-out",
+            }}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            {children}
+            {isHovering && (
+              <>
+                <div
+                  style={{
+                    float: "right",
+                    position: "fixed",
+                    top: 224,
+                    right: 16,
+                  }}
+                >
+                  <CapIcon
+                    onClick={handleMaximiseView}
+                    size="m"
+                    type="open-in-new"
+                    style={{opacity: '1 !important'}}
+                  />
+                </div>
+              </>
+            )}
+          </div>
+          <CapRow style={{ height: 56 }}>
+            <CapColumn span={17}>
+              <CapHeading style={{ margin: 18 }} type="h3">
+                {footerContent.videoTitle}
+              </CapHeading>
+            </CapColumn>
+            <CapLink
+              style={{
+                float: "right",
+                margin: "18px 18px 18px 0",
+              }}
+              onClick={handleOpenDoc}
+              title={
+                <CapHeading type="h5">
+                  View docs
+                  <CapIcon
+                    onClick={handleOpenDoc}
+                    size="s"
+                    type="open-in-new"
+                  />
+                </CapHeading>
+              }
+            />
           </CapRow>
-        </div>
-      </Draggable>
-    </div>
+        </ResizableBox>
+      </div>
+    </Draggable>
   );
 };
 
@@ -128,22 +141,8 @@ ResizablePIP.propTypes = {
   minConstraints: PropTypes.array,
   maxConstraints: PropTypes.array,
   closePIPContainer: PropTypes.func,
-  handleOpenInNew: PropTypes.func,
   handleShowMaximised: PropTypes.func,
   showMaximised: PropTypes.bool,
-  PIPPosition: PropTypes.string,
+  footerContent: PropTypes.object,
 };
 export default ResizablePIP;
-
-/** put this is draggable div
- * .pipWindow:hover {
-    cursor: grab;
-  }
-  .pipWindow:active {
-    cursor: grabbing;
-    outline: -webkit-focus-ring-color auto 1px;
-    outline-color: -webkit-focus-ring-color;
-    outline-style: auto;
-    outline-width: 1px;
-  }
- */

package/utils/withDemoVideosAndLinkHOC/index.js

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
-import ResizablePIP from './ResizablePIP';
+import React, { useState } from "react";
 import PropTypes from "prop-types";
+import ResizablePIP from "./ResizablePIP";
 
 /** Sample targetElementsData
  target_elements: {
@@ -45,14 +45,14 @@ import PropTypes from "prop-types";
           },
  */
 const WithDemoVideosAndLinks = (props) => {
-  const { children, targetElements, locale = 'en'} = props;
+  const { children, targetElements, locale = "en" } = props;
   const [showPIP, setShowPIP] = useState(false);
-  const [PIPContentLink, setPIPContentLink] = useState('');
-  const [PIPPosition, setPIPPosition] = useState('');
+  const [PIPContentLink, setPIPContentLink] = useState("");
+  const [PIPFooterContent, setPIPFooterContent] = useState({});
   const [showMaximised, setShowMaximised] = useState(false);
   const cssSelectors = [];
   if (Object.keys(targetElements || {})?.length) {
-    Object.keys(targetElements).map(targetElement => {
+    Object.keys(targetElements).map((targetElement) => {
       cssSelectors.push({
         cssSelector: targetElement,
         locale,
@@ -61,32 +61,35 @@ const WithDemoVideosAndLinks = (props) => {
     });
   }
 
-  cssSelectors.forEach(selector => {
+  cssSelectors.forEach((selector) => {
     const {
       support_link: { target_url: linkTargetUrl = {} } = {},
-      support_video: { target_url: videoTargetUrl = {}, PIPPosition : videoPIPPosition = 'topLeft' } = {},
+      support_video: { target_url: videoTargetUrl = {} } = {},
       locale,
       cssSelector,
     } = selector || {};
     let matchedNodes = document.querySelectorAll(selector.cssSelector);
     const handleOnClickVideoLink = () => {
       setPIPContentLink(videoTargetUrl?.[locale]?.href);
-      setPIPPosition(videoPIPPosition);
+      setPIPFooterContent({
+        videoTitle: videoTargetUrl?.[locale]?.videoTitle,
+        supportDoc: videoTargetUrl?.[locale]?.supportDoc,
+      });
       setShowPIP(true);
     };
     const handleOpenSupportLink = () =>
-      window.open(linkTargetUrl?.[locale]?.href, '_blank');
+      window.open(linkTargetUrl?.[locale]?.href, "_blank");
 
     if (selector?.support_video?.target_url?.default?.href) {
-      matchedNodes.forEach(node => {
+      matchedNodes.forEach((node) => {
         if (!document.getElementById(`demo-video-${cssSelector}`)) {
-          let videoAnchor = document.createElement('a');
+          let videoAnchor = document.createElement("a");
           videoAnchor.textContent = videoTargetUrl?.[locale].label;
           videoAnchor.id = `demo-video-${cssSelector}`;
-          videoAnchor.style.marginLeft = '2px';
+          videoAnchor.style.marginLeft = "2px";
           videoAnchor.onclick = handleOnClickVideoLink;
 
-          const videoIconElement = document.createElement('i');
+          const videoIconElement = document.createElement("i");
           videoIconElement.innerHTML = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
             <path
               d="M14.756 11.032a1.194 1.194 0 0 1 0 1.921l-2.937 2.17a1.194 1.194 0 0 1-1.904-.96v-4.34a1.194 1.194 0 0 1 1.904-.96l2.937 2.17zM12 19a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm0 2a9 9 0 1 1 0-18 9 9 0 0 1 0 18z"
@@ -94,26 +97,26 @@ const WithDemoVideosAndLinks = (props) => {
             ></path>
           </svg>`;
           videoIconElement.onclick = handleOnClickVideoLink;
-          videoIconElement.style.marginLeft = '2px';
-          videoIconElement.style.cursor = 'pointer';
-          videoIconElement.style.color = '#2466eb';
-          videoIconElement.style.fontSize = '18px';
+          videoIconElement.style.marginLeft = "2px";
+          videoIconElement.style.cursor = "pointer";
+          videoIconElement.style.color = "#2466eb";
+          videoIconElement.style.fontSize = "18px";
           node.appendChild(videoIconElement);
           node.appendChild(videoAnchor);
         }
       });
     } else if (selector?.support_link?.target_url?.default?.href) {
-      matchedNodes.forEach(node => {
+      matchedNodes.forEach((node) => {
         if (!document.getElementById(`support-link-${cssSelector}`)) {
-          let linkAnchor = document.createElement('a');
+          let linkAnchor = document.createElement("a");
           linkAnchor.href = linkTargetUrl?.[locale]?.href;
           linkAnchor.textContent = linkTargetUrl?.[locale].label;
-          linkAnchor.target = '_blank';
+          linkAnchor.target = "_blank";
           linkAnchor.id = `support-link-${cssSelector}`;
-          linkAnchor.style.marginLeft = '2px';
+          linkAnchor.style.marginLeft = "2px";
           linkAnchor.onclick = handleOpenSupportLink;
 
-          const helpIconElement = document.createElement('i');
+          const helpIconElement = document.createElement("i");
           helpIconElement.innerHTML = `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
           <path
             id="help_svg__a"
@@ -121,10 +124,10 @@ const WithDemoVideosAndLinks = (props) => {
           ></path>
         </svg>`;
           helpIconElement.onclick = handleOpenSupportLink;
-          helpIconElement.style.marginLeft = '2px';
-          helpIconElement.style.cursor = 'pointer';
-          helpIconElement.style.fontSize = '16px';
-          helpIconElement.style.color = '#2466eb';
+          helpIconElement.style.marginLeft = "2px";
+          helpIconElement.style.cursor = "pointer";
+          helpIconElement.style.fontSize = "16px";
+          helpIconElement.style.color = "#2466eb";
 
           node.appendChild(helpIconElement);
           node.appendChild(linkAnchor);
@@ -134,16 +137,12 @@ const WithDemoVideosAndLinks = (props) => {
   });
 
   const handleOpenInNew = () => {
-    window.open(PIPContentLink, '_blank');
+    window.open(PIPContentLink, "_blank");
   };
-  const handleShowMaximised = value => {
+  const handleShowMaximised = (value) => {
     setShowMaximised(value);
   };
-  const handleClosePIPContainer = () => {
-    setShowPIP(false);
-    setPIPPosition('');
-  }
-
+  const handleClosePIPContainer = () => setShowPIP(false);
   return (
     <div>
       {showPIP && (
@@ -152,15 +151,16 @@ const WithDemoVideosAndLinks = (props) => {
           handleOpenInNew={handleOpenInNew}
           handleShowMaximised={handleShowMaximised}
           showMaximised={showMaximised}
-          PIPPosition={PIPPosition}
+          footerContent={PIPFooterContent}
         >
           <iframe
             width="100%"
             height="100%"
-            src={PIPContentLink}
+            src={`${PIPContentLink}?controls=0`}
             title="YouTube video player"
             frameBorder="0"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            style={{ borderRadius: 4 }}
           />
         </ResizablePIP>
       )}