\r\n \r\n {
\r\n \r\n );\r\n};\r\n\r\nPopupContainer.propTypes = {};\r\n\r\nexport default PopupContainer;\r\n","\r\nimport React from 'react';\r\nimport { useEffect, useRef } from \"react\";\r\n\r\nexport function usePrevious(value) {\r\n const ref = useRef(null);\r\n useEffect(() => {\r\n ref.current = value;\r\n }, [value]);\r\n return ref.current;\r\n}\r\n\r\nexport function useDoubleClick(callback) {\r\n /** callback ref Pattern **/\r\n const [elem, setElem] = React.useState(null)\r\n const callbackRef = React.useCallback(node => {\r\n setElem(node)\r\n callbackRef.current = node\r\n }, [])\r\n\r\n React.useEffect(() => {\r\n inputCallbackRef.current = callback\r\n })\r\n\r\n const countRef = React.useRef(0)\r\n/** Refs for the timer **/\r\n const timerRef = React.useRef(null)\r\n/**Input callback Ref for callback passed **/\r\n const inputCallbackRef = React.useRef(null)\r\n \r\n React.useEffect(() => {\r\n function handler() {\r\n const isDoubleClick = countRef.current + 1 === 2\r\n const timerIsPresent = timerRef.current\r\n if (timerIsPresent && isDoubleClick) {\r\n \r\n clearTimeout(timerRef.current)\r\n timerRef.current = null\r\n countRef.current = 0\r\n if (inputCallbackRef.current) {\r\n inputCallbackRef.current()\r\n }\r\n }\r\n if (!timerIsPresent) {\r\n countRef.current = countRef.current + 1\r\n const timer = setTimeout(() => {\r\n clearTimeout(timerRef.current)\r\n timerRef.current = null\r\n countRef.current = 0\r\n }, 300)\r\n timerRef.current = timer\r\n }\r\n }\r\n if (elem) {\r\n elem.addEventListener('click', handler)\r\n }\r\n return () => {\r\n if (elem) {\r\n elem.removeEventListener('click', handler)\r\n }\r\n }\r\n }, [elem])\r\n\r\n return [callbackRef, elem]\r\n}","import React, { PropTypes } from 'react';\r\nimport { mainUiActions, useUiDispatch, useUiState } from '../../reducers/mainUI.reducer';\r\nimport PopupContainer from '../Popup-Container';\r\n\r\nconst ExplorugIframePopup = props => {\r\n \r\n const { iframeID = \"explorugIframe\"} = props;\r\n const mainUiState = useUiState();\r\n const mainUIDispatch = useUiDispatch();\r\n \r\n const onIframeLoad = () => {\r\n console.log(\"loaded.....explorugIframe...... iframe\");\r\n mainUIDispatch({\r\n type: mainUiActions.SET_SHOWMAINPAGELOADING,\r\n payload: false,\r\n });\r\n };\r\n\r\n const onPopupClose=(e)=>{\r\n mainUIDispatch({\r\n type: mainUiActions.SET_EXPLORUGPOPUP,\r\n payload: false\r\n })\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n 
\r\n {textOverlay && (\r\n
\r\n );\r\n});\r\n\r\nconst PageHTML = React.forwardRef((props, ref) => {\r\n return (\r\n \r\n
\r\n );\r\n});\r\n\r\nconst PageFlip = React.forwardRef((props, ref) => {\r\n const {\r\n className,\r\n onFlip,\r\n onChangeOrientation,\r\n onChangeState,\r\n onInit,\r\n images = [],\r\n width,\r\n height,\r\n minWidth,\r\n maxWidth,\r\n minHeight,\r\n maxHeight,\r\n maxShadowOpacity = 0.5,\r\n mobileScrollSupport = true,\r\n useportrait = false,\r\n showPageCorners = true,\r\n imageClassname='',\r\n imageUrlPrefix,\r\n imgAltText,\r\n changePageWithArrowKey,\r\n startPage = 0,\r\n disableFlipOnRandomClick = true,\r\n textsOverlays = [],\r\n arrowKeyPress,\r\n showCover\r\n } = props;\r\n \r\n const { width: windowWidth, height: windowHeight } = useWindowSize();\r\n\r\n useKey(\"ArrowRight\", (e) => {\r\n if(changePageWithArrowKey && e.target.nodeName!==\"INPUT\" && arrowKeyPress){\r\n arrowKeyPress(e,'next');\r\n }\r\n\r\n // if (changePageWithArrowKey && ref.current && e.target.nodeName !== \"INPUT\" && mainUiState.allowPageFlipByArrowKey)\r\n // ref.current.pageFlip().flipNext();\r\n \r\n });\r\n\r\n useKey(\"ArrowLeft\", (e) => {\r\n if (changePageWithArrowKey && ref.current && e.target.nodeName !== \"INPUT\")\r\n ref.current.pageFlip().flipPrev();\r\n });\r\n\r\n useKey(\"ArrowUp\", () => {\r\n if (ref.current) {\r\n ref.current.pageFlip().update();\r\n }\r\n });\r\n useEffect(() => {\r\n if (!ref) return;\r\n setTimeout(() => {\r\n if(ref.current)\r\n ref.current.pageFlip().update();\r\n }, 200); \r\n }, [windowWidth, windowHeight]);\r\n\r\n const handlePageStateChange = (e) => {\r\n if (onChangeState) onChangeState(e);\r\n };\r\n const onPageInit = (e) => {\r\n if (onInit) onInit(e);\r\n };\r\n return (\r\n Page Header
\r\n{props.children}
\r\nPage number: {props.number}
\r\n\r\n thumbContainerRef.current?.clientWidth,\r\n })}\r\n id=\"bd-page-preview\"\r\n ref={thumbContainerRef}\r\n >\r\n
\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nPagePreviewBar.propTypes = {};\r\n\r\nexport default PagePreviewBar;\r\n","\r\nexport const setPageDims = (windowWidth, windowHeight, catalog_eachPageSize) => {\r\n var pageWidth, pageHeight;\r\n var imageSize = { w: catalog_eachPageSize.w*2, h: catalog_eachPageSize.h };\r\n var padding = 20; //15//windowWidth % 2 ===1 ? :21;\r\n if (windowWidth > windowHeight) {\r\n pageHeight = windowHeight - padding;\r\n pageWidth = pageHeight * (imageSize.w / imageSize.h);\r\n if (pageWidth > windowWidth) {\r\n pageWidth = windowWidth - padding;\r\n pageHeight = pageWidth * (imageSize.h / imageSize.w);\r\n }\r\n } else {\r\n pageWidth = windowWidth - padding;\r\n pageHeight = pageWidth * (imageSize.h / imageSize.w);\r\n }\r\n\r\n pageWidth = pageWidth % 2 === 1 ? pageWidth - 1 : pageWidth;\r\n\r\n return { w: pageWidth, h: pageHeight };\r\n};\r\n\r\nexport const flipPage = (direction, pageRef) => {\r\n if (!direction) return;\r\n direction += \"\";\r\n if (direction.toLowerCase() === \"next\") {\r\n pageRef.current.pageFlip().flipNext();\r\n } else if (direction.toLowerCase() === \"prev\") {\r\n pageRef.current.pageFlip().flipPrev();\r\n } else if (parseFloat(direction)) {\r\n const pageNumber = parseFloat(direction);\r\n pageRef.current.pageFlip().turnToPage(pageNumber);\r\n }\r\n};\r\n","import React, { PropTypes } from \"react\";\r\nimport { useFullscreen, useToggle } from \"react-use\";\r\nimport { fullscreenbtnsrc } from \"../../constants/constants\";\r\n\r\nconst FullscreenButton = (props) => {\r\n const { containerref, className='' } = props;\r\n //const containerref = useRef(null);\r\n const [show, toggle] = useToggle(false);\r\n\r\n const isFullscreen = useFullscreen(containerref, show, {\r\n onClose: () => toggle(false),\r\n });\r\n return (\r\n <>\r\n \r\n {FlipPageConstants && FlipPageConstants.customCatalogThumbsPath !== \"\" && (\r\n <>\r\n handleNavigator(\"left\")}\r\n >\r\n handleNavigator(\"right\")}\r\n >\r\n \r\n )}\r\n\r\n flipPage(\"prev\")}\r\n >\r\n flipPage(\"next\")}\r\n >\r\n
\r\n {FlipPageConstants && FlipPageConstants.customCatalogThumbsPath !== \"\" && (\r\n \r\n {thumbs &&\r\n thumbs.map((thumb, index) => (\r\n handleMainPageThumbClick(index)}\r\n >\r\n 
\r\n
\r\n ))}\r\n \r\n {customRugsLinks &&\r\n customRugsLinks.map(\r\n (pageElement, index) =>\r\n pageElement.values &&\r\n pageElement.values.map((divElement, divIndex) => (\r\n \r\n {divElement.Knob && currentPageNumber === pageElement.page && (\r\n handleActionKnobClick(e, divElement.Link)}\r\n >\r\n \r\n 
\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n )} */}\r\n \r\n {editorState.editorMode && createNewDiv && (\r\n
\r\n \r\n );\r\n};\r\n\r\nOverlayDivEditor.propTypes = {};\r\n\r\nexport default OverlayDivEditor;\r\n\r\nconst EditableRow = (props) => {\r\n const { label, placeholder, value, onChange, labelWid = 6, inputWid = 12 } = props;\r\n return (\r\n \r\n \r\n
\r\n )}\r\n {editorState.editorMode && activeDivValues && (\r\n \r\n ChangeActiveDivValues({ Width: val })}\r\n >\r\n ChangeActiveDivValues({ Height: val })}\r\n >\r\n ChangeActiveDivValues({ Top: val })}\r\n >\r\n ChangeActiveDivValues({ Left: val })}\r\n >\r\n ChangeActiveDivValues({ Link: val })}\r\n inputWid={24}\r\n >\r\n
\r\n )}\r\n \r\n \r\n \r\n\r\n {onDelete && (\r\n \r\n )}\r\n \r\n
\r\n\r\n {onComplete && (\r\n \r\n \r\n
\r\n )}\r\n \r\n {props.children}\r\n
\r\n );\r\n};\r\n\r\nDraggableBox.propTypes = {};\r\n\r\nexport default DraggableBox;\r\n","import classNames from \"classnames\";\r\nimport { fabric } from \"fabric\";\r\n\r\nimport React, { PropTypes, useEffect, useRef, useState } from \"react\";\r\n//import FlipPageConstants from \"../../constants/constants\";\r\nimport { useUiDispatch, useUiState } from \"../../reducers/mainUI.reducer\";\r\nimport Knobs from \"../Knobs\";\r\nimport OverlayDivEditor from \"../Overlay-div-editor\";\r\nimport DraggableBox from \"../DraggableBox\";\r\nimport { mainEditorActions, useEditorDispatch, useEditorState } from \"../../reducers/overlayEditor.reducer\";\r\n\r\nconst OverlayDivArea = (props) => {\r\n const { currentPageNumber, overlayDivHover, overlayMouseOut, onLinkClick, pageState } = props;\r\n //const [pageLinks, setPageLinks]= useState(links);\r\n\r\n const [activeDivValues, setActiveDivValues] = useState(null);\r\n // const { editor, onReady } = useFabricJSEditor();\r\n\r\n const [active, setActive] = useState(false);\r\n\r\n const [showCanvas, setShowCanvas] = useState(false);\r\n const [mouseDown, setMouseDown] = useState(false);\r\n const [fabricCanvas, setFabricCanvas] = useState(null);\r\n\r\n const overlayEditorDispatch = useEditorDispatch();\r\n const overlayEditorState = useEditorState();\r\n const {links: customRugsLinks} = overlayEditorState;//FlipPageConstants.customRugsLinks;\r\n \r\n const editorState = useEditorState();\r\n\r\n const overlayDivRef = useRef(null);\r\n const [canvasSize, setCanvasSize] = useState({ w: 500, h: 500 });\r\n const FlipPageConstants = window.FlipPageConstants;\r\n\r\n useEffect(() => {\r\n setTimeout(() => {\r\n setCanvasHeight();\r\n }, 500);\r\n const links = JSON.parse(JSON.stringify(FlipPageConstants.customRugsLinks));\r\n \r\n overlayEditorDispatch({\r\n type: mainEditorActions.SET_OVERLAYDIVLINKS,\r\n payload: links,\r\n })\r\n }, []);\r\n const setCanvasHeight = () => {\r\n if (!overlayDivRef || !overlayDivRef.current) return;\r\n window.overlayDivRef = overlayDivRef;\r\n setCanvasSize({\r\n w: overlayDivRef.current.offsetWidth,\r\n h: overlayDivRef.current.offsetHeight,\r\n });\r\n };\r\n const addRectangle = (divElement) => {\r\n //if(!divElement) return;\r\n const canvas = new fabric.Canvas(\"sample-canvas\");\r\n setCanvasHeight();\r\n let rect;\r\n if (!divElement) {\r\n rect = new fabric.Rect({\r\n width: 50,\r\n height: 50,\r\n fill: \"blue\",\r\n angle: 0,\r\n top: 50,\r\n left: 50,\r\n });\r\n } else {\r\n const percentStrToPxVal = percentStrToPx(divElement);\r\n rect = new fabric.Rect({\r\n width: percentStrToPxVal.Width,\r\n height: percentStrToPxVal.Height,\r\n fill: \"blue\",\r\n angle: 0,\r\n top: percentStrToPxVal.Top,\r\n left: percentStrToPxVal.Left,\r\n });\r\n }\r\n canvas.add(rect);\r\n\r\n let newDivElement = divElement\r\n ? { ...divElement }\r\n : { Width: \"6%\", Height: \"9%\", Left: \"60%\", Top: \"65%\", Link: \"\" };\r\n\r\n function objectMovedListener(ev) {\r\n let target = ev.target;\r\n newDivElement = {\r\n ...newDivElement,\r\n Width: target.width * target.scaleX,\r\n Height: target.height * target.scaleY,\r\n Left: target.left,\r\n Top: target.top,\r\n };\r\n setActiveDivValues(newDivElement);\r\n }\r\n\r\n canvas.on(\"object:modified\", objectMovedListener);\r\n setFabricCanvas(canvas);\r\n };\r\n const percentStrToPx = (divElement) => {\r\n const totalWid = overlayDivRef.current.offsetWidth;\r\n const totalHgt = overlayDivRef.current.offsetHeight;\r\n const divElem_ = { ...divElement };\r\n\r\n const percentVal = parseFloat(divElement.Width);\r\n const px_w = (parseFloat(divElement.Width) * totalWid) / 100;\r\n const px_h = (parseFloat(divElement.Height) * totalHgt) / 100;\r\n const px_l = (parseFloat(divElement.Left) * totalWid) / 100;\r\n const px_t = (parseFloat(divElement.Top) * totalHgt) / 100;\r\n\r\n return { ...divElem_, Width: px_w, Height: px_h, Top: px_t, Left: px_l };\r\n };\r\n const pxToPercentStr = (activeDivValues) => {\r\n const totalWid = overlayDivRef.current.offsetWidth;\r\n const totalHgt = overlayDivRef.current.offsetHeight;\r\n const divElem_ = { ...activeDivValues };\r\n\r\n const percent_w = Math.round(((activeDivValues.Width * 100) / totalWid) * 1000) / 1000 + \"%\";\r\n const percent_h = Math.round(((activeDivValues.Height * 100) / totalHgt) * 1000) / 1000 + \"%\";\r\n const percent_l = Math.round(((activeDivValues.Left * 100) / totalWid) * 1000) / 1000 + \"%\";\r\n const percent_t = Math.round(((activeDivValues.Top * 100) / totalHgt) * 1000) / 1000 + \"%\";\r\n\r\n return { ...divElem_, Width: percent_w, Height: percent_h, Top: percent_t, Left: percent_l };\r\n };\r\n\r\n const createNewDiv = () => {\r\n disposeFabricCanvas();\r\n setShowCanvas(true);\r\n addRectangle();\r\n };\r\n const handleOverlayDivClick = (divElement, e, divIndex) => {\r\n const link = divElement.Link;\r\n //if (pageState !== \"fold_corner\") {\r\n if (editorState.editorMode) {\r\n setActive(divIndex);\r\n setShowCanvas(true);\r\n setActiveDivValues(percentStrToPx(divElement));\r\n addRectangle(divElement);\r\n \r\n } else if (onLinkClick) {\r\n onLinkClick(link);\r\n } else {\r\n window.open(link, \"_blank\");\r\n }\r\n e.stopPropagation();\r\n //}\r\n };\r\n const handleActionKnobClick = (e, link) => {\r\n if (onLinkClick) {\r\n onLinkClick(link);\r\n } else {\r\n window.open(link, \"_blank\");\r\n }\r\n e.stopPropagation();\r\n };\r\n\r\n const ChangeActiveDivValues = ({ Width, Height, Top, Left, Link }) => {\r\n const wid = Width ? Width : activeDivValues.Width;\r\n const hgt = Height ? Height : activeDivValues.Height;\r\n const top = Top ? Top : activeDivValues.Top;\r\n const left = Left ? Left : activeDivValues.Left;\r\n const link = Link ? Link : activeDivValues.Link;\r\n\r\n setActiveDivValues({ ...activeDivValues, Width: wid, Height: hgt, Top: top, Left: left, Link: link });\r\n };\r\n\r\n const onOverlayDivsValueConfirm = () => {\r\n const links = overlayEditorState.links; //[...FlipPageConstants.customRugsLinks];\r\n\r\n let currentPageElement = links.filter((pageElement) => pageElement.page === currentPageNumber);\r\n if (!currentPageElement || !currentPageElement.length) {\r\n currentPageElement = { page: currentPageNumber, values: [pxToPercentStr(activeDivValues)] };\r\n links.push(currentPageElement)\r\n } else {\r\n if (active || active === 0) {\r\n currentPageElement[0].values.splice(active, 1);\r\n currentPageElement[0].values.splice(active, 0, pxToPercentStr(activeDivValues));\r\n } else {\r\n currentPageElement[0].values.push(pxToPercentStr(activeDivValues));\r\n }\r\n }\r\n\r\n overlayEditorDispatch({\r\n type: mainEditorActions.SET_OVERLAYDIVLINKS,\r\n payload: links,\r\n })\r\n setActive(null);\r\n setShowCanvas(false);\r\n disposeFabricCanvas();\r\n };\r\n const onDelete =()=>{\r\n const links = overlayEditorState.links; //[...FlipPageConstants.customRugsLinks];\r\n\r\n let currentPageElement = links.filter((pageElement) => pageElement.page === currentPageNumber);\r\n if(currentPageElement.length){\r\n if (active || active === 0) {\r\n currentPageElement[0].values.splice(active, 1); \r\n }\r\n }\r\n \r\n overlayEditorDispatch({\r\n type: mainEditorActions.SET_OVERLAYDIVLINKS,\r\n payload: links,\r\n })\r\n setActive(null);\r\n setShowCanvas(false);\r\n disposeFabricCanvas();\r\n \r\n }\r\n const disposeFabricCanvas = () => {\r\n if (fabricCanvas) {\r\n try {\r\n fabricCanvas.dispose();\r\n } catch (err) {\r\n console.error(\"disposeFabricCanvas -> err\", err);\r\n }\r\n }\r\n };\r\n const onMouseMove = () => {\r\n if (!mouseDown) return;\r\n };\r\n const onComplete = () => {\r\n const links = overlayEditorState.links;\r\n console.log(\"onComplete -> links\", JSON.stringify(links));\r\n };\r\n return (\r\n <>\r\n \r\n {customRugsLinks &&\r\n customRugsLinks.map(\r\n (pageElement, index) =>\r\n pageElement.values && (\r\n \r\n {pageElement.values.map((divElement, divIndex) => (\r\n \r\n handleOverlayDivClick(divElement, e, divIndex)}\r\n onMouseEnter={(e) => overlayDivHover(e, divElement)}\r\n onMouseOut={(e) => overlayMouseOut(e, divElement)}\r\n onMouseDown={(e) => setMouseDown(true)}\r\n onMouseMove={(e) => onMouseMove(e)}\r\n onMouseUp={(e) => setMouseDown(false)}\r\n >
\r\n \r\n ))}\r\n \r\n )\r\n )}\r\n\r\n {customRugsLinks && pageState!=='flipping' && (\r\n \r\n {/*
\r\n }\r\n \r\n );\r\n};\r\n\r\nOverlayDivArea.propTypes = {};\r\n\r\nexport default OverlayDivArea;\r\n","import React, { useEffect, useRef, useState } from \"react\";\r\n\r\nimport classNames from \"classnames\";\r\n\r\n//import FlipPageConstants from \"../../constants/constants\";\r\n\r\nimport { postMessageToExplorugIframe } from \"../../utils/domutils\";\r\nimport PageFlip from \"../PageFlip\";\r\nimport { Tooltip2 } from \"@blueprintjs/popover2\";\r\nimport { assetsDomain } from \"../../api/appProvider\";\r\nimport { mainUiActions, useUiDispatch, useUiState } from \"../../reducers/mainUI.reducer\";\r\nimport PagePreviewBar from \"../Page-preview-bar\";\r\nimport { flipPage, setPageDims } from \"../../utils/utils\";\r\nimport { useWindowSize } from \"react-use\";\r\nimport FullscreenButton from \"../FullscreenButton\";\r\nimport OverlayDivArea from \"../Overlay-div-area\";\r\nimport { useEditorState } from \"../../reducers/overlayEditor.reducer\";\r\nconst Flipbook = (props) => {\r\n const {\r\n className,\r\n showCustomRugs = true,\r\n disableFlipOnRandomClick = true,\r\n pageWidth = 1920,\r\n pageHeight = 2160,\r\n showCover = false,\r\n onClose,\r\n //onLinkClick\r\n } = props;\r\n const customRugsRef = React.useRef(); // React.createRef(); use React.useRef() for functional component;\r\n window.customRugsRef = customRugsRef;\r\n const FlipPageConstants = window.FlipPageConstants;\r\n\r\n const containerref = useRef(null);\r\n const [pageState, setPageState] = useState(\"\");\r\n const [currentPageNumber, setCurrentPageNumber] = useState(1);\r\n //console.log(\"Flipbook -> currentPageNumber\", currentPageNumber);\r\n const [activeDivValues, setActiveDivValues] = useState(null);\r\n\r\n const [active, setActive] = useState(false);\r\n const mainUIDispatch = useUiDispatch();\r\n const mainUIState = useUiState();\r\n const editorState = useEditorState();\r\n\r\n const { width: windowWidth, height: windowHeight } = useWindowSize();\r\n const [pageSize, setPageSize] = useState({ w: windowWidth, h: windowHeight });\r\n\r\n const customRugsLinks = FlipPageConstants.customRugsLinks;\r\n const customCatalog_eachPageSize = FlipPageConstants.customCatalog_eachPageSize;\r\n\r\n useEffect(() => {\r\n const pageDims = setPageDims(windowWidth, windowHeight, customCatalog_eachPageSize);\r\n setPageSize(pageDims);\r\n }, []);\r\n\r\n useEffect(() => {\r\n const pageDims = setPageDims(windowWidth, windowHeight, customCatalog_eachPageSize);\r\n setPageSize(pageDims);\r\n }, [windowWidth, windowHeight]);\r\n\r\n const onPage = (e) => {\r\n //console.log(\"currentPageNumber\", currentPageNumber);\r\n\r\n if (customRugsRef && customRugsRef.current) {\r\n const pageNUM = customRugsRef.current.pageFlip().getCurrentPageIndex() / 2 + 1;\r\n setCurrentPageNumber(pageNUM);\r\n mainUIDispatch({\r\n type: mainUiActions.SET_PAGENUM,\r\n payload: pageNUM,\r\n });\r\n //console.log(\"currentPageNumber\", currentPageNumber, pageNUM, customRugsRef.current.pageFlip().getCurrentPageIndex());\r\n }\r\n };\r\n const onChangeOrientation = (e) => {\r\n //console.log(\"customrugs onChangeOrientation\", e.data);\r\n };\r\n const onChangeState = (e) => {\r\n //console.log(\"customrugs onChangeState---\", customRugsRef.current.pageFlip());\r\n setPageState(e.data);\r\n if (e.data === \"flipping\") {\r\n //setCurrentPage(pageViews.OTHER);\r\n mainUIDispatch({\r\n type: mainUiActions.SET_PAGENUM,\r\n payload: 0,\r\n });\r\n }\r\n };\r\n\r\n const onLinkClick = (url) => {\r\n try {\r\n if (url.indexOf(\"newtab:-\") !== -1) {\r\n window.open(url.replace(\"newtab:-\", \"\"), \"_blank\");\r\n } else if (url.indexOf(\"initdesign\") > 0) {\r\n postMessageToExplorugIframe(url);\r\n setTimeout(() => {\r\n mainUIDispatch({\r\n type: mainUiActions.SET_EXPLORUGPOPUP,\r\n payload: true,\r\n });\r\n }, 1000);\r\n } else throw url;\r\n } catch {\r\n window.open(url, \"_blank\");\r\n }\r\n };\r\n // const handleOverlayDivClick = (divElement, e, divIndex) => {\r\n // //console.log(\"handleOverlayDivClick -> link\", link);\r\n // const link = divElement.Link;\r\n // if (pageState !== \"fold_corner\") {\r\n // if (editorState.editorMode) {\r\n // setActive(divIndex);\r\n // setActiveDivValues(divElement);\r\n // console.log(\"handleOverlayDivClick -> divElement\", divElement);\r\n // } else if (onLinkClick) {\r\n // onLinkClick(link);\r\n // } else {\r\n // window.open(link, \"_blank\");\r\n // }\r\n // e.stopPropagation();\r\n // }\r\n // };\r\n\r\n const overlayDivHover = (e) => {\r\n if (!customRugsRef) return;\r\n const currentState = customRugsRef.current.pageFlip().getSettings().showPageCorners;\r\n if (currentState) {\r\n customRugsRef.current.pageFlip().flipController.showCorner(\"TOP\");\r\n customRugsRef.current.pageFlip().getSettings().showPageCorners = false;\r\n }\r\n };\r\n const overlayMouseOut = (e) => {\r\n if (!customRugsRef) return;\r\n const currentState = customRugsRef.current.pageFlip().getSettings().showPageCorners;\r\n if (!currentState) {\r\n customRugsRef.current.pageFlip().getSettings().showPageCorners = true;\r\n }\r\n };\r\n\r\n const handleActionKnobClick = (e, link) => {\r\n console.log(\"handleActionKnobClick\");\r\n if (onLinkClick) {\r\n onLinkClick(link);\r\n } else {\r\n window.open(link, \"_blank\");\r\n }\r\n e.stopPropagation();\r\n };\r\n\r\n const onFlipBookClick = (e) => {\r\n e.stopPropagation();\r\n if (e.target.className === \"stf__block\") {\r\n if (onClose) onClose();\r\n }\r\n };\r\n\r\n const handlePageThumbClick = (index) => {\r\n let number = Math.round(index * 2);\r\n number = number === 0 ? 1 : number;\r\n\r\n setCurrentPageNumber(number);\r\n // setPageName(number);\r\n customRugsRef.current.pageFlip().turnToPage(number);\r\n setTimeout(() => {\r\n //\r\n }, 1000);\r\n };\r\n const turnPage = (direction) => {\r\n flipPage(direction, customRugsRef);\r\n };\r\n const previewbarClassname = () => {\r\n var barClassName = \"\";\r\n console.log(\"previewbarClassname -> FlipPageConstants.previewBarPosition\", FlipPageConstants.previewBarPosition);\r\n\r\n switch (FlipPageConstants.previewBarPosition) {\r\n case 0:\r\n barClassName = \"\";\r\n break;\r\n case 1:\r\n barClassName = \"preview-bar-up\";\r\n break;\r\n case 2:\r\n barClassName = \"preview-bar-left\";\r\n break;\r\n default:\r\n barClassName = \"\";\r\n\r\n break;\r\n }\r\n return barClassName;\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n
*/}\r\n \r\n {customRugsLinks &&\r\n customRugsLinks.map(\r\n (pageElement, index) =>\r\n pageElement.values && (\r\n \r\n {pageElement.values.map((divElement, divIndex) => (\r\n \r\n handleOverlayDivClick(divElement, e, divIndex)}\r\n onMouseEnter={(e) => overlayDivHover(e, divElement)}\r\n onMouseOut={(e) => overlayMouseOut(e, divElement)}\r\n // onMouseDown={(e)=>setMouseDown(true)}\r\n >
\r\n \r\n ))}\r\n \r\n )\r\n )}\r\n\r\n {customRugsLinks && (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nVideoPlayer.propTypes = {};\r\n\r\nexport default VideoPlayer;\r\n","import classNames from \"classnames\";\r\nimport React, { PropTypes, useEffect, useState } from \"react\";\r\nimport { useWindowSize } from \"react-use\";\r\nimport { assetsDomain } from \"../../api/appProvider\";\r\n//import FlipPageConstants from \"../../constants/constants\";\r\nimport { useUiState } from \"../../reducers/mainUI.reducer\";\r\nimport { setPageDims } from \"../../utils/utils\";\r\nimport VideoPlayer from \"../Video-Player\";\r\n\r\nconst OverlayVideos = (props) => {\r\n const { className, page, imageSrc, videoSrc } = props;\r\n const mainUiState = useUiState();\r\n const { width: windowWidth, height: windowHeight } = useWindowSize();\r\n const [pageSize, setPageSize] = useState({ w: windowWidth, h: windowHeight });\r\n const FlipPageConstants = window.FlipPageConstants;\r\n\r\n const customCatalog_eachPageSize = FlipPageConstants.customCatalog_eachPageSize;\r\n\r\n useEffect(() => {\r\n const pageDims = setPageDims(windowWidth, windowHeight, customCatalog_eachPageSize);\r\n setPageSize(pageDims);\r\n }, []);\r\n\r\n useEffect(() => {\r\n const pageDims = setPageDims(windowWidth, windowHeight, customCatalog_eachPageSize);\r\n setPageSize(pageDims);\r\n }, [windowWidth, windowHeight]);\r\n\r\n return (\r\n \r\n
\r\n\r\n \r\n {\r\n if (window.innerWidth > 1300 && windowHeight > 700) {\r\n setAnimate(true);\r\n }\r\n window.history.pushState(null, \"\", \"\");\r\n setTimeout(() => {\r\n setShowCustomRugs(true);\r\n }, 1200);\r\n }}\r\n >\r\n
\r\n \r\n )}\r\n\r\n