@capillarytech/cap-ui-utils 1.4.6-alpha3.0 → 1.4.6-alpha3.1

package/package.json

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

package/utils/withDemoVideosAndLinkHOC/ResizablePIP.js

@@ -17,6 +17,7 @@ const ResizablePIP = ({
   maxConstraints = [1404, 900],
   closePIPContainer = () => {},
   handleOpenInNew = () => {},
+  PIPPosition = 'topLeft',
 }) => {
   const [pipWidth, setPipWidth] = useState(width);
   const [pipHeight, setPipHeight] = useState(height);
@@ -109,6 +110,7 @@ ResizablePIP.propTypes = {
   handleOpenInNew: PropTypes.func,
   setShowMaximised: PropTypes.func,
   showMaximised: PropTypes.bool,
+  PIPPosition: PropTypes.string,
 };
 export default ResizablePIP;
 

package/utils/withDemoVideosAndLinkHOC/index.js

@@ -48,9 +48,10 @@ const WithDemoVideosAndLinks = (props) => {
   const { children, targetElements, locale = 'en'} = props;
   const [showPIP, setShowPIP] = useState(false);
   const [PIPContentLink, setPIPContentLink] = useState('');
+  const [PIPPosition, setPIPPosition] = useState('topLeft');
   const [showMaximised, setShowMaximised] = useState(false);
   const cssSelectors = [];
-  if (Object.keys(targetElements)?.length) {
+  if (Object.keys(targetElements || {})?.length) {
     Object.keys(targetElements).map(targetElement => {
       cssSelectors.push({
         cssSelector: targetElement,
@@ -63,7 +64,7 @@ const WithDemoVideosAndLinks = (props) => {
   cssSelectors.forEach(selector => {
     const {
       support_link: { target_url: linkTargetUrl = {} } = {},
-      support_video: { target_url: videoTargetUrl = {} } = {},
+      support_video: { target_url: videoTargetUrl = {}, PIPPosition : videoPIPPosition = 'topLeft' } = {},
       locale,
       cssSelector,
     } = selector || {};
@@ -71,6 +72,7 @@ const WithDemoVideosAndLinks = (props) => {
     const handleOnClickVideoLink = () => {
       setPIPContentLink(videoTargetUrl?.[locale]?.href);
       setShowPIP(true);
+      setPIPPosition(videoPIPPosition);
     };
     const handleOpenSupportLink = () =>
       window.open(linkTargetUrl?.[locale]?.href, '_blank');
@@ -147,6 +149,7 @@ const WithDemoVideosAndLinks = (props) => {
           handleOpenInNew={handleOpenInNew}
           handleShowMaximised={handleShowMaximised}
           showMaximised={showMaximised}
+          PIPPosition={PIPPosition}
         >
           <iframe
             width="100%"