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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capillarytech/cap-ui-utils",
-  "version": "1.4.6-alpha4.0",
+  "version": "1.4.6-alpha5.0",
   "description": "Utility functions shared accross all the modules",
   "main": "index.js",
   "scripts": {

package/utils/withDemoVideosAndLinkHOC/ResizablePIP.js

@@ -12,27 +12,52 @@ const ResizablePIP = ({
   width = 400,
   height = 260,
   showMaximised = false,
-  setShowMaximised,
+  handleShowMaximised,
   minConstraints = [400, 260],
   maxConstraints = [1404, 900],
   closePIPContainer = () => {},
   handleOpenInNew = () => {},
-  PIPPosition = 'topLeft',
+  PIPPosition = '',
 }) => {
   const [pipWidth, setPipWidth] = useState(width);
   const [pipHeight, setPipHeight] = useState(height);
   const handleMaximiseView = () => {
-    setPipWidth(1404);
-    setPipHeight(730);
-    setShowMaximised(!showMaximised);
+    if (!showMaximised) {
+      setPipWidth(1404);
+      setPipHeight(730);
+    } 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;
+  }
   return (
     <div
-      style={{
-        position: "absolute",
-        left: 8,
-        top: -56,
-      }}
+      style={positionStyle}
     >
       <Draggable>
         <div
@@ -52,24 +77,20 @@ const ResizablePIP = ({
         >
           <CapRow>
             <CapRow>
-              <CapColumn span={1} offset={18}>
+              <CapColumn span={showMaximised ? 2 : 5} offset={showMaximised ? 22 : 19}>
                 <CapIcon
                   onClick={handleMaximiseView}
-                  style={{ marginTop: "8px" }}
+                  style={{ marginTop: 8 }}
                   type="help"
                 />
-              </CapColumn>
-              <CapColumn span={1} offset={1}>
                 <CapIcon
                   onClick={handleOpenInNew}
-                  style={{ marginTop: "8px" }}
+                  style={{ marginTop: 8, marginLeft: 4 }}
                   type="open-in-new"
                 />
-              </CapColumn>
-              <CapColumn span={1} offset={1}>
                 <CapIcon
                   onClick={closePIPContainer}
-                  style={{ marginTop: "8px" }}
+                  style={{ marginTop: 8, marginLeft: 4 }}
                   type="close"
                 />
               </CapColumn>
@@ -108,7 +129,7 @@ ResizablePIP.propTypes = {
   maxConstraints: PropTypes.array,
   closePIPContainer: PropTypes.func,
   handleOpenInNew: PropTypes.func,
-  setShowMaximised: PropTypes.func,
+  handleShowMaximised: PropTypes.func,
   showMaximised: PropTypes.bool,
   PIPPosition: PropTypes.string,
 };

package/utils/withDemoVideosAndLinkHOC/index.js

@@ -48,7 +48,7 @@ const WithDemoVideosAndLinks = (props) => {
   const { children, targetElements, locale = 'en'} = props;
   const [showPIP, setShowPIP] = useState(false);
   const [PIPContentLink, setPIPContentLink] = useState('');
-  const [PIPPosition, setPIPPosition] = useState('topLeft');
+  const [PIPPosition, setPIPPosition] = useState('');
   const [showMaximised, setShowMaximised] = useState(false);
   const cssSelectors = [];
   if (Object.keys(targetElements || {})?.length) {
@@ -71,8 +71,8 @@ const WithDemoVideosAndLinks = (props) => {
     let matchedNodes = document.querySelectorAll(selector.cssSelector);
     const handleOnClickVideoLink = () => {
       setPIPContentLink(videoTargetUrl?.[locale]?.href);
-      setShowPIP(true);
       setPIPPosition(videoPIPPosition);
+      setShowPIP(true);
     };
     const handleOpenSupportLink = () =>
       window.open(linkTargetUrl?.[locale]?.href, '_blank');
@@ -136,10 +136,13 @@ const WithDemoVideosAndLinks = (props) => {
   const handleOpenInNew = () => {
     window.open(PIPContentLink, '_blank');
   };
-  const handleShowMaximised = () => {
-    setShowMaximised(!showMaximised);
+  const handleShowMaximised = value => {
+    setShowMaximised(value);
   };
-  const handleClosePIPContainer = () => setShowPIP(false);
+  const handleClosePIPContainer = () => {
+    setShowPIP(false);
+    setPIPPosition('');
+  }
 
   return (
     <div>