{"version":3,"sources":["../ui/src/components/modules/splus/videoPlayer.tsx","../ui/src/components/modules/splus/videoArea.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\r\nimport VideoArea from \"./videoArea\";\r\nimport { handleVideoElementSizeInfo } from \"redux-share/actions\";\r\nimport { useAppSelector } from \"redux-share/hooks\";\r\nimport { conditions, videoTag } from \"helpers\";\r\nimport { ConditionName } from \"interfaces\";\r\nimport useFullScreen from \"helpers/hooks/useFullScreen\";\r\nimport Popovers from \"../../player-components/popover/popovers\";\r\nimport { shallowEqual } from 'react-redux'\r\n\r\nconst VideoPlayer = () => {\r\n\r\n    const { firstPlay, showMiniPlayer, isFullScreen } = useAppSelector(({ controller: { firstPlay, showMiniPlayer, isFullScreen } }) => ({ firstPlay, showMiniPlayer, isFullScreen }), shallowEqual);\r\n    const { params } = useAppSelector(({ videoData: { params } }) => ({ params }), shallowEqual);\r\n\r\n    const [showScreen, setShowScreen] = useState<boolean>(false);\r\n\r\n    useEffect(() => {\r\n        const videoPlayerModule:any = document.getElementById(\"video-player-module\");\r\n        if (conditions(ConditionName.isDarkMode)) videoPlayerModule.classList.add(\"pl-bg-dark-1\");\r\n    }, [videoTag()])\r\n\r\n    useEffect(() => {\r\n        let timeout: any;\r\n        const handleResize = () => {\r\n            if(!conditions(ConditionName.showMiniPlayer)) {\r\n                timeout = setTimeout(() => {\r\n                    handleVideoElementSizeInfo();\r\n                    setShowScreen(true);\r\n                }, conditions(ConditionName.isTouchScreen) ? 0 : 500)\r\n            }\r\n        }\r\n        handleResize();\r\n        window.addEventListener(\"resize\", handleResize);\r\n\r\n        return () => {\r\n            window.removeEventListener(\"resize\", handleResize);\r\n            clearTimeout(timeout);\r\n        }\r\n    }, [firstPlay, showMiniPlayer, isFullScreen])\r\n\r\n\r\n    useFullScreen();\r\n\r\n    return (\r\n        <>\r\n            <div\r\n                className={`dvh pl-transition-opacity pl-duration-500 ${showScreen ? \"pl-opacity-100\" : \"pl-opacity-0\"} ${conditions(ConditionName.backgroundColorInLightMode) ? \"pl-bg-white\" : \"pl-bg-dark-1\"} dark:pl-bg-dark-1 ${!!params.width ? params.width : \"pl-w-screen\"} ${!conditions(ConditionName.heightScreen) && params.height} pl-flex pl-items-start`}>\r\n                <div \r\n                    id=\"parent-player\"\r\n                    className={`pl-w-full pl-h-full`}\r\n                >\r\n                    <VideoArea />\r\n                </div>\r\n            </div>\r\n            <Popovers />\r\n        </>\r\n    )\r\n}\r\n\r\nexport default VideoPlayer;","import { checkParentTarget, conditions } from \"helpers\";\r\nimport useActiveInActive from \"helpers/hooks/useActiveInActive\";\r\nimport { ConditionName, zIndex } from \"interfaces\";\r\nimport { useEffect, useState } from \"react\"\r\nimport { handleFullScreen, handlePlayPause, handleVideoElementSizeInfo } from \"redux-share/actions\";\r\nimport { useAppDispatch, useAppSelector } from \"redux-share/hooks\";\r\nimport PlayerCore from \"../../player-core/playerCore\";\r\nimport { setShowMiniPlayer } from \"redux-share/slices/controllerSlice\";\r\nimport { shallowEqual } from 'react-redux';\r\nimport Image from 'next/image';\r\nimport dynamic from \"next/dynamic\";\r\n\r\nconst Header = dynamic(() => import(\"../../mainComponent/header/header\"));\r\nconst Main = dynamic(() => import(\"../../mainComponent/main/main\"));\r\nconst Footer = dynamic(() => import(\"../../mainComponent/footer/footer\"));\r\nconst Gif = dynamic(() => import(\"../../player-components/gif/gif\"));\r\nconst BackwardForward = dynamic(() => import(\"../../player-components/backwardForward/backwardForward\"));\r\nconst TouchVolumeBrightness = dynamic(() => import(\"../../player-components/touchVolumeBrightness/touchVolumeBrightness\"));\r\nconst CloseIcon = dynamic(() => import(\"../../icon-components/closeIcon\"));\r\n\r\nconst VideoArea = () => {\r\n\r\n    const [isRightDoubleTouched, setIsRightDoubleTouched] = useState<boolean>(false);\r\n    const [isLeftDoubleTouched, setIsLeftDoubleTouched] = useState<boolean>(false);\r\n\r\n    const dispatch = useAppDispatch();\r\n    const { gif, details } = useAppSelector(({ videoData: { gif, details, params, videoElementSizeInfo } }) => ({ gif, details, params, videoElementSizeInfo }), shallowEqual);\r\n    const { showMiniPlayer } = useAppSelector(({ controller: { showMiniPlayer, isFullScreen } }) => ({ showMiniPlayer, isFullScreen }), shallowEqual);\r\n\r\n    const handleDoubleClick = (event: any) => {\r\n        if (!conditions(ConditionName.isTouchScreen) && !checkParentTarget(event, \"emojiButtonLeft\") && !checkParentTarget(event, \"emojiButtonRight\") && !checkParentTarget(event, \"menuIconLeft\") && !checkParentTarget(event, \"menuIconRight\")) handleFullScreen();\r\n    }\r\n\r\n    // --- Managing the active and inActive of elements in desktop and mobile devices --- //\r\n    useActiveInActive(isRightDoubleTouched, isLeftDoubleTouched);\r\n\r\n    useEffect(() => {\r\n        const timeout = setTimeout(() => handleVideoElementSizeInfo(), 100)\r\n\r\n        return () => clearTimeout(timeout);\r\n    }, [showMiniPlayer])\r\n\r\n    return (\r\n        <>\r\n            {conditions(ConditionName.showMiniPlayer) && <div id=\"black-video-area\" className=\"pl-relative pl-w-full pl-aspect-video pl-bg-black\" />}\r\n            <div\r\n                id=\"video-area\"\r\n                style={{ zIndex: conditions(ConditionName.showMiniPlayer) ? zIndex.videoPlayerInPictureInPicture : 'unset' }}\r\n                onClick={(event) => conditions(ConditionName.playByClickPoster) && handlePlayPause(event)}\r\n                onDoubleClick={handleDoubleClick}\r\n                className={`!pl-bg-contain !pl-bg-center !pl-bg-no-repeat pl-h-full pl-bg-black pl-max-h-screen pl-aspect-video pl-flex pl-items-center pl-w-full pl-relative ${conditions(ConditionName.isFullScreen) && '!pl-w-screen !pl-h-[100dvh]'}`}\r\n            >\r\n                {conditions(ConditionName.showBanner) && <div className='pl-absolute pl-w-full pl-h-full pl-flex pl-justify-center'>\r\n                    <Image src={details.banner} layout='fill'  alt=\"sdfdf\" objectFit=\"contain\"/>\r\n                </div>}\r\n                {conditions(ConditionName.showMiniPlayer) && <CloseIcon className=\"pl-w-4 pl-h-4 pl-stroke-black pl-bg-white pl-absolute pl-top-[-7px] pl-right-[-5px] pl-z-10 pl-cursor-pointer pl-rounded-full\" onClick={() => dispatch(setShowMiniPlayer(undefined))}/>}\r\n                {(conditions(ConditionName.showTouchVolumeBrightness) && !conditions(ConditionName.isMiniPlayer)) && <TouchVolumeBrightness />}\r\n                {conditions(ConditionName.showBackwardForward) && (\r\n                    <div className={`pl-absolute pl-top-0 pl-right-0 pl-w-full pl-h-full pl-overflow-hidden pl-flex pl-items-center`}\r\n                        style={{ zIndex: (isLeftDoubleTouched || isRightDoubleTouched) ? zIndex.backwardForwardActive : zIndex.backwardForwardInActive }}>\r\n                        <BackwardForward type=\"touchForward\" isRightDoubleTouched={isRightDoubleTouched}\r\n                            setIsRightDoubleTouched={setIsRightDoubleTouched} />\r\n                        <BackwardForward type=\"touchBackward\" isLeftDoubleTouched={isLeftDoubleTouched}\r\n                            setIsLeftDoubleTouched={setIsLeftDoubleTouched} />\r\n                    </div>\r\n                )}\r\n                <PlayerCore />\r\n                {!conditions(ConditionName.isRaw) && (\r\n                    <div id=\"playerElements\" className={`pl-absolute pl-top-0 pl-right-0 pl-w-full pl-h-full ${!conditions(ConditionName.isTouchScreenPortrait) && \"pl-overflow-hidden\"}`}>\r\n                        <div className={`pl-flex pl-flex-col pl-justify-between pl-w-full pl-h-full`}>\r\n                            {conditions(ConditionName.showHeader) && <Header />}\r\n                            {conditions(ConditionName.showMain) && <Main />}\r\n                            {conditions(ConditionName.showFooter) && <Footer />}\r\n                            {conditions(ConditionName.showGif) && <Gif gif={gif!} />}\r\n                        </div>\r\n                    </div>\r\n                )}\r\n            </div>\r\n        </>\r\n    )\r\n}\r\n\r\nexport default VideoArea;"],"mappings":"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","names":["init_esm_shims","useEffect","useState","init_esm_shims","useEffect","useState","shallowEqual","Image","dynamic","Fragment","jsx","jsxs","Header","Main","Footer","Gif","BackwardForward","TouchVolumeBrightness","CloseIcon","VideoArea","isRightDoubleTouched","setIsRightDoubleTouched","useState","isLeftDoubleTouched","setIsLeftDoubleTouched","dispatch","useAppDispatch","gif","details","useAppSelector","params","videoElementSizeInfo","showMiniPlayer","isFullScreen","handleDoubleClick","event","conditions","checkParentTarget","handleFullScreen","useActiveInActive_default","useEffect","timeout","handleVideoElementSizeInfo","handlePlayPause","setShowMiniPlayer","playerCore_default","videoArea_default","shallowEqual","Fragment","jsx","jsxs","VideoPlayer","firstPlay","showMiniPlayer","isFullScreen","useAppSelector","params","showScreen","setShowScreen","useState","useEffect","videoPlayerModule","conditions","videoTag","timeout","handleResize","handleVideoElementSizeInfo","useFullScreen_default","videoArea_default","popovers_default","videoPlayer_default"]}