{"version":3,"sources":["../ui/src/components/player-components/popover/popover.tsx"],"sourcesContent":["import {TouchEvent, forwardRef, useEffect, useState} from \"react\";\r\nimport {createPortal} from \"react-dom\";\r\nimport { useAppSelector } from \"redux-share/hooks\";\r\nimport { ConditionName, IPopoverProps, zIndex } from \"interfaces\";\r\nimport { conditions } from \"helpers\";\r\nimport { shallowEqual } from 'react-redux';\r\nimport dynamic from \"next/dynamic\";\r\n\r\nconst CloseIcon = dynamic(() => import(\"../../icon-components/closeIcon\"));\r\n\r\nconst Popover = forwardRef(({ children, status, onClose, type, classNames, parentClassNames, styles, isBlurBackground, isFullHeight = false, isFullScreen, isHeader, headerTitle = \"\", customHeader, isHasCatchUpLineOnTop = false, animation, scrollbar = false, isFocusOnInput = false, showCloseIcon = true}: IPopoverProps, ref: any) => {\r\n\r\n    const [showPopover, setShowPopover] = useState<boolean>(status!);\r\n\r\n    const [maxHeight, setMaxHeight] = useState<number>(0);\r\n    const [maxHeightOnTouchMove, setMaxHeightOnTouchMove] = useState<number>(0);\r\n    const [zIndexOnCatchUp, setZIndexOnCatchUp] = useState<number>(0);\r\n\r\n    const { videoElementSizeInfo } = useAppSelector(({ videoData: { videoElementSizeInfo, isComplexPortrait } }) => ({ videoElementSizeInfo, isComplexPortrait }), shallowEqual);\r\n\r\n    useEffect(() => {\r\n        let timeout: any = undefined\r\n\r\n        if (status) {\r\n            setShowPopover(true);\r\n        } else {\r\n            timeout = setTimeout(() => {\r\n                onClose(false);\r\n                setMaxHeightOnTouchMove(0);\r\n                setShowPopover(false);\r\n            }, 500);\r\n        }\r\n\r\n        return () => clearTimeout(timeout);\r\n    }, [status])\r\n\r\n    useEffect(() => {\r\n        if (conditions(ConditionName.isComplexPortrait) && status) setMaxHeight(window.innerHeight- videoElementSizeInfo.bottom)\r\n    }, [status])\r\n\r\n    const handleTouchMove = (event: any) => {\r\n        if(event.touches[0].clientY >= videoElementSizeInfo.top) setMaxHeightOnTouchMove(window.innerHeight - event.touches[0].clientY);\r\n        else setMaxHeightOnTouchMove(window.innerHeight - videoElementSizeInfo.top);\r\n        setZIndexOnCatchUp(zIndex.maxPopover);\r\n    }\r\n\r\n    const handleTouchEnd = () => {\r\n        if (maxHeightOnTouchMove !== 0) {\r\n            if (maxHeightOnTouchMove > maxHeight) {\r\n                if (maxHeightOnTouchMove - maxHeight > ((window.innerHeight - videoElementSizeInfo.top - maxHeight) / 2)) {\r\n                    setMaxHeightOnTouchMove(window.innerHeight - videoElementSizeInfo.top);\r\n                    setZIndexOnCatchUp(zIndex.maxPopover)\r\n                } else {\r\n                    setMaxHeightOnTouchMove(0);\r\n                    setTimeout(() => setZIndexOnCatchUp(0), 500);\r\n                }\r\n            } else {\r\n                if (maxHeightOnTouchMove > maxHeight / 2) setMaxHeightOnTouchMove(maxHeight);\r\n                else {\r\n                    setMaxHeightOnTouchMove(0);\r\n                    setMaxHeight(0)\r\n                    onClose()\r\n                }\r\n                setZIndexOnCatchUp(0);\r\n            }\r\n        }\r\n    }\r\n\r\n\r\n    const content = (\r\n        <>\r\n            {isBlurBackground && <div\r\n                className={`pl-w-screen pl-h-screen pl-fixed pl-top-0 pl-right-0 pl-bg-black/[0.7] animate__animated animate__faster ${status ? \"animate__fadeIn\" : \"animate__fadeOut\"}`}\r\n                style={{zIndex: zIndex.popoverBlurBackground}}/>}\r\n            <div\r\n                className={`${type === \"modal\" && \"pl-fixed pl-top-0 pl-left-0 pl-flex pl-w-full pl-h-full pl-justify-center pl-items-end sm:pl-items-center\"} ${parentClassNames}`}\r\n                style={{zIndex: isFullHeight && !isFocusOnInput ? zIndexOnCatchUp : zIndex.popoverContent}}>\r\n                <div\r\n                    className={\r\n                        `pl-flex pl-flex-col pl-rounded-[8px] animate__animated animate__faster pl-bg-white/[0.9] dark:pl-bg-black/[0.7]\r\n                        ${isFullHeight && \"pl-h-full\"}\r\n                        ${animation ? animation : ((window.innerWidth > 768 && type === \"modal\") ? (status ? \"animate__fadeIn\" : \"animate__fadeOut\") : (status ? \"animate__fadeInUp\" : \"animate__fadeOutDown\"))}\r\n                        ${conditions(ConditionName.isComplexPortrait) ? `!pl-fixed !pl-right-0 !pl-left-0 !pl-bottom-0 !pl-w-full !pl-mb-0 pl-rounded-[12px] !pl-rounded-b-none !pl-bg-white dark:!pl-bg-dark-3` : \"before:pl-hidden\"} \r\n                        ${conditions(ConditionName.isFullMobilePortrait) && `!pl-fixed !pl-mx-auto !pl-mb-[0px] !pl-right-0 !pl-left-0 ${type === \"modal\" ? \"!pl-w-screen\" : \"!pl-w-[95vw] !pl-bottom-[85px]\"}`}\r\n                        ${type !== \"modal\" && \"pl-absolute pl-bottom-full pl-overflow-auto no-scrollbar\"}\r\n                        ${classNames}\r\n                        `\r\n                    }\r\n                    style={{\r\n                        maxHeight: isFullScreen ? \"unset\" : maxHeightOnTouchMove ? maxHeightOnTouchMove : (maxHeight ? maxHeight : conditions(ConditionName.isComplexPortrait) ? 0 : \"\"),\r\n                        zIndex: zIndex.popoverContent, \r\n                        ...styles\r\n                    }}\r\n                    ref={ref}\r\n                >\r\n                    <>\r\n                        {isHeader && (\r\n                            <div \r\n                                onTouchMove={isHasCatchUpLineOnTop ? handleTouchMove : () => {}} \r\n                                onTouchEndCapture={isHasCatchUpLineOnTop ? handleTouchEnd : () => {}}\r\n                            >\r\n                                {isHasCatchUpLineOnTop && <div\r\n                                    className=\"pl-absolute pl-top-[5px] pl-right-[50%] pl-mr-[-25px] pl-text-center pl-w-[60px] pl-h-[3px] pl-rounded-[20px] pl-bg-secondary\"/>}\r\n                                {isHeader && (\r\n                                    <div className=\"pl-mb-4\"\r\n                                        style={{ boxShadow: conditions(ConditionName.isDarkMode) ? \"0px 8px 20px 0px rgba(178, 191, 205, 0.16)\" : \"0px 8px 20px 0px rgba(178, 191, 205, 0.16)\"}}>\r\n                                        {customHeader ? customHeader : (\r\n                                            <div\r\n                                                className=\"pl-flex pl-items-center pl-justify-between pl-py-[19px] pl-px-4\">\r\n                                                <p className=\"pl-text-[18px] pl-text-black dark:pl-text-white pl-font-bold\">{headerTitle}</p>\r\n                                                {showCloseIcon && (\r\n                                                    <CloseIcon\r\n                                                        className={`pl-cursor-pointer ${conditions(ConditionName.isDarkMode) ? \"pl-stroke-dark-5\" : \"pl-stroke-secondary-400\"}`}\r\n                                                        onClick={onClose}\r\n                                                    />\r\n                                                )}\r\n                                            </div>\r\n                                        )}\r\n                                    </div>\r\n                                )}\r\n                            </div>\r\n                        )}\r\n                        <div className={`pl-overflow-y-auto pl-h-full pl-w-full ${!scrollbar && \"no-scrollbar\"}`}\r\n                             onTouchMove={(event: TouchEvent<HTMLDivElement>) => event.stopPropagation()}>{children}</div>\r\n                    </>\r\n                </div>\r\n            </div>\r\n        </>\r\n    )\r\n\r\n    return <>{showPopover && <>{type === \"modal\" ? createPortal(<>{content}</>, document.getElementById(\"dialog-react-root-videoPlayer\")!) :\r\n        <div>{content}</div>}</>}</>\r\n\r\n})\r\n\r\nPopover.displayName = \"popover\";\r\n\r\nexport default Popover;"],"mappings":"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","names":["init_esm_shims","forwardRef","useEffect","useState","createPortal","shallowEqual","dynamic","Fragment","jsx","jsxs","CloseIcon","Popover","forwardRef","children","status","onClose","type","classNames","parentClassNames","styles","isBlurBackground","isFullHeight","isFullScreen","isHeader","headerTitle","customHeader","isHasCatchUpLineOnTop","animation","scrollbar","isFocusOnInput","showCloseIcon","ref","showPopover","setShowPopover","useState","maxHeight","setMaxHeight","maxHeightOnTouchMove","setMaxHeightOnTouchMove","zIndexOnCatchUp","setZIndexOnCatchUp","videoElementSizeInfo","useAppSelector","isComplexPortrait","useEffect","timeout","conditions","handleTouchMove","event","handleTouchEnd","content","createPortal","popover_default"]}