{"version":3,"sources":["../ui/src/components/player-components/backwardForward/backwardForward.tsx"],"sourcesContent":["import Image from \"next/image\";\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport { useDoubleTap } from \"use-double-tap\";\r\nimport { useAppDispatch, useAppSelector } from \"../../../../../redux/hooks\";\r\nimport { setActiveElements } from \"../../../../../redux/slices/controllerSlice\";\r\nimport { conditions, handleRippleCircle, videoTag } from \"../../../../../helpers\";\r\nimport { handleBackwardForward } from \"../../../../../redux/actions/controller.actions\";\r\nimport { ConditionName, IBackwardForwardProps } from \"../../../../../interfaces\";\r\nimport IMAGES from \"../../../../../images/importImages\";\r\nimport { shallowEqual } from 'react-redux'\r\n\r\nconst hideTime = 1000;\r\n\r\nconst BackwardForward = ({ type, isRightDoubleTouched, isLeftDoubleTouched, setIsRightDoubleTouched, setIsLeftDoubleTouched }: IBackwardForwardProps) => {\r\n\r\n    const [backwardForwardCount, setBackwardForwardCount] = useState<number>(15);\r\n    const [hide, setHide] = useState<boolean>(false);\r\n    const backwardForwardCountRef = useRef<number>(backwardForwardCount);\r\n\r\n    const dispatch = useAppDispatch();\r\n    const { duration } = useAppSelector(({ controller: { duration, showMiniPlayer } }) => ({ duration, showMiniPlayer }), shallowEqual);\r\n    const { videoElementSizeInfo } = useAppSelector(({ videoData: { videoElementSizeInfo, params } }) => ({ videoElementSizeInfo, params }), shallowEqual);\r\n\r\n    const timeoutRef = useRef<any>(null);\r\n\r\n    useEffect(() => {\r\n        backwardForwardCountRef.current = backwardForwardCount\r\n    }, [backwardForwardCount])\r\n\r\n    let doubleTouch:any = undefined;\r\n\r\n    doubleTouch = useDoubleTap((event) => {\r\n        if ([\"touchBackward\", \"touchForward\"].includes(type)) {\r\n            event.stopPropagation();\r\n            if (type === \"touchBackward\" && setIsLeftDoubleTouched) setIsLeftDoubleTouched(true);\r\n            else if (type === \"touchForward\" && setIsRightDoubleTouched) setIsRightDoubleTouched(true);\r\n            clearTimeout(timeoutRef.current)\r\n            timeoutRef.current = setTimeout(() => setHide(true),hideTime);\r\n        }\r\n    },200);\r\n\r\n    useEffect(() => {\r\n        if(hide) {\r\n            setHide(false);\r\n            dispatch(setActiveElements(false));\r\n            if (isRightDoubleTouched && setIsRightDoubleTouched) {\r\n                setIsRightDoubleTouched(false);\r\n                if (videoTag().duration - videoTag().currentTime <= backwardForwardCountRef.current) handleBackwardForward(type, videoTag().duration);\r\n                else handleBackwardForward(type, backwardForwardCountRef.current);\r\n                setBackwardForwardCount(15);\r\n            } else if (isLeftDoubleTouched && setIsLeftDoubleTouched) {\r\n                setIsLeftDoubleTouched(false);\r\n                if (videoTag().currentTime <= backwardForwardCountRef.current) handleBackwardForward(type, 0);\r\n                else handleBackwardForward(type, backwardForwardCountRef.current);\r\n                setBackwardForwardCount(15);\r\n            }\r\n        }\r\n    }, [hide])\r\n\r\n    const handleTouchStart = (event: any) => {\r\n        setBackwardForwardCount((prev) => prev + 15);\r\n        if (conditions(ConditionName.isTouchScreenLandscape)) handleRippleCircle(event, type);\r\n        clearTimeout(timeoutRef.current);\r\n        timeoutRef.current = setTimeout(() => setHide(true),hideTime);\r\n    }\r\n\r\n    let component;\r\n\r\n    if ([\"backward\", \"forward\"].includes(type)) {\r\n        component = <div\r\n            className={`${!conditions(ConditionName.isTouchScreen) && \"hover:pl-scale-125\"} pl-transition-transform pl-ease-in-out pl-cursor-pointer ${type === \"backward\" && (videoTag().currentTime >= 15 ? \"pl-opacity-100\" : \"pl-opacity-30 pl-cursor-default hover:pl-scale-100\")} ${type === \"forward\" && (duration - videoTag().currentTime >= 15 ? \"pl-opacity-100\" : \"pl-opacity-30 pl-cursor-default hover:pl-scale-100\")}}`}\r\n            onContextMenu={(event) => event.preventDefault()}\r\n        >\r\n            <Image\r\n                alt={type === \"backward\" ? \"backward-icon\" : \"forward-icon\"}\r\n                src={type === \"backward\" ? IMAGES.backward15 : IMAGES.forward15}\r\n                width={conditions(ConditionName.isMiniPlayer) ? 30 : conditions(ConditionName.isTouchScreen) ? 32 : 48}\r\n                height={conditions(ConditionName.isMiniPlayer) ? 30 : conditions(ConditionName.isTouchScreen) ? 32 : 48}\r\n                onClick={() => handleBackwardForward(type, backwardForwardCount)}\r\n                onDoubleClick={(event:any) => event.stopPropagation()}\r\n            />\r\n        </div>\r\n    } else if ([\"touchBackward\", \"touchForward\"].includes(type)) {\r\n        component = <div id={type} className={`pl-relative pl-flex pl-flex-col pl-justify-center pl-items-center pl-gap-2 pl-overflow-hidden ${type === \"touchBackward\" ? \"pl-rounded-r-full\" : \"pl-rounded-l-full\"}`} style={{ width: videoElementSizeInfo.width, height: videoElementSizeInfo.width }} {...doubleTouch}>\r\n            {(isRightDoubleTouched || isLeftDoubleTouched) && (\r\n                <div className={`pl-w-full pl-h-full pl-flex pl-flex-col pl-justify-center pl-items-center pl-gap-2 pl-p-5 pl-bg-secondary-100/[0.3]`} onTouchStart={handleTouchStart}>\r\n                    <div className={`${type === \"touchBackward\" ? \"pl-arrow-left\" : \"pl-arrow-right pl-gap-2\"} pl-flex pl-justify-center pl-items-center`}>\r\n                        <Image\r\n                            alt=\"arrow-left-icon\"\r\n                            src={IMAGES.arrowLeft}\r\n                            className={`${type === \"touchForward\" && \"pl-rotate-180\"}`}\r\n                            width={24}\r\n                            height={24}\r\n                        />\r\n                        <Image\r\n                            alt=\"arrow-left-icon\"\r\n                            src={IMAGES.arrowLeft}\r\n                            className={`${type === \"touchForward\" && \"pl-rotate-180\"}`}\r\n                            width={24}\r\n                            height={24}\r\n                        />\r\n                        <Image\r\n                            alt=\"arrow-left-icon\"\r\n                            src={IMAGES.arrowLeft}\r\n                            className={`${type === \"touchForward\" && \"pl-rotate-180\"}`}\r\n                            width={24}\r\n                            height={24}\r\n                        />\r\n                    </div>\r\n                    <p className=\"pl-text-center pl-text-[14px] pl-font-normal pl-text-white\">{backwardForwardCount} ثانیه</p>\r\n                </div>\r\n            )}\r\n        </div>\r\n    }\r\n\r\n    return <>{component}</>\r\n}\r\n\r\nexport default BackwardForward;"],"mappings":"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","names":["init_esm_shims","Image","useEffect","useRef","useState","useDoubleTap","shallowEqual","Fragment","jsx","jsxs","hideTime","BackwardForward","type","isRightDoubleTouched","isLeftDoubleTouched","setIsRightDoubleTouched","setIsLeftDoubleTouched","backwardForwardCount","setBackwardForwardCount","useState","hide","setHide","backwardForwardCountRef","useRef","dispatch","useAppDispatch","duration","useAppSelector","showMiniPlayer","videoElementSizeInfo","params","timeoutRef","useEffect","doubleTouch","useDoubleTap","event","setActiveElements","videoTag","handleBackwardForward","handleTouchStart","prev","conditions","handleRippleCircle","component","Image","importImages_default","backwardForward_default"]}