{"version":3,"sources":["../ui/src/components/player-components/autoPlay/autoPlay.tsx"],"sourcesContent":["import { changeVideoUrl, conditions, secondsToHMS, unitization } from \"helpers\";\r\nimport { ConditionName } from \"interfaces\";\r\nimport Image from \"next/image\";\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport { useAppDispatch, useAppSelector } from \"redux-share\";\r\nimport { setIsAutoPlay } from \"redux-share/slices/controllerSlice\";\r\nimport { setAutoPlayPopover, setRecommendListPopover } from \"redux-share/slices/popoversSlice\";\r\nimport CloseIcon from \"../../icon-components/closeIcon\";\r\nimport IMAGES from \"../../../../../images/importImages\";\r\nimport { shallowEqual } from 'react-redux';\r\nimport dynamic from \"next/dynamic\";\r\n\r\nconst Popover = dynamic(() => import(\"../popover/popover\"));\r\n\r\nconst AutoPlay = () => {\r\n\r\n    const [autoPlayCounter, setAutoPlayCounter] = useState<number>(10);\r\n    const [showSingleNextPlayList, setShowSingleNextPlayList] = useState<boolean>(conditions(ConditionName.isAutoPlay));\r\n    const [mouseOverId, setMouseOverId] = useState<number | undefined>(undefined);\r\n    const [videoCounts, setVideoCounts] = useState<number>(12);\r\n    const [gridStyle, setGridStyle] = useState<string>(`pl-grid-cols-4`);\r\n\r\n    const dispatch = useAppDispatch();\r\n    const { recommendationList } = useAppSelector(({ videoData: { recommendationList, isComplexPortrait } }) => ({ recommendationList, isComplexPortrait }), shallowEqual);\r\n    const { recommendListPopover } = useAppSelector(({ popovers: { recommendListPopover } }) => ({ recommendListPopover }), shallowEqual);\r\n    const { isAutoPlay, isEnded } = useAppSelector(({ controller: { isAutoPlay, isEnded } }) => ({ isAutoPlay, isEnded }), shallowEqual);\r\n\r\n    const autoPlayCounterRef = useRef<number>(autoPlayCounter);\r\n    const intervalRef = useRef<any>(null);\r\n    const recommendationListFiltered = recommendationList.filter((item:any) => item.type !== \"playlist\")\r\n\r\n    useEffect(() => {\r\n        setShowSingleNextPlayList(conditions(ConditionName.isAutoPlay));\r\n    }, [isAutoPlay])\r\n\r\n    useEffect(() => {\r\n        if (conditions(ConditionName.isTouchScreenLandscape)) setShowSingleNextPlayList(!conditions(ConditionName.showRecommendListPopover))\r\n    }, [recommendListPopover])\r\n\r\n    useEffect(() => {\r\n        autoPlayCounterRef.current = autoPlayCounter;\r\n    }, [autoPlayCounter])\r\n\r\n    useEffect(() => {\r\n        if (conditions(ConditionName.isAutoPlay)) {\r\n            intervalRef.current = setInterval(() => {\r\n                if (autoPlayCounterRef.current === 0) {\r\n                    clearInterval(intervalRef.current);\r\n                    window.location.href = changeVideoUrl();\r\n                    \r\n                } else setAutoPlayCounter(autoPlayCounterRef.current - 1);\r\n            }, 1000);\r\n        } else {\r\n            clearInterval(intervalRef.current);\r\n            setAutoPlayCounter(10);\r\n        }\r\n\r\n    }, [isEnded, isAutoPlay])\r\n\r\n    useEffect(() => {\r\n\r\n        const handleResize = () => {\r\n            if (window.innerWidth < 1000) {\r\n                setVideoCounts(2);\r\n                setGridStyle(`pl-grid-cols-2`);\r\n            }\r\n            else if (window.innerWidth < 1400) {\r\n                setVideoCounts(6);\r\n                setGridStyle(`pl-grid-cols-3`);\r\n            }\r\n            else if (window.innerWidth >= 1400) {\r\n                setVideoCounts(12);\r\n                setGridStyle(`pl-grid-cols-4`);\r\n            }\r\n        }\r\n\r\n        handleResize();\r\n        window.addEventListener(\"resize\", handleResize);\r\n\r\n        () => window.removeEventListener(\"resize\", handleResize);\r\n\r\n    }, [])\r\n\r\n    const handleClosePopover = (type: string) => {\r\n        if (type === \"single-popover\") {\r\n            dispatch(setIsAutoPlay(false));\r\n            if (conditions(ConditionName.isTouchScreen)) {\r\n                setShowSingleNextPlayList(false);\r\n                dispatch(setRecommendListPopover(true))\r\n            } else {\r\n                localStorage.setItem(\"isAutoPlay\", \"false\");\r\n                setShowSingleNextPlayList(false);\r\n            }\r\n        } else {\r\n            dispatch(setAutoPlayPopover(false));\r\n            dispatch(setRecommendListPopover(false));\r\n        }\r\n    }\r\n\r\n    let popoverContent = <div></div>\r\n\r\n    if (showSingleNextPlayList) {\r\n        popoverContent = (\r\n            <div className={`pl-w-full pl-h-full pl-absolute pl-top-0 pl-right-0 pl-flex pl-justify-center pl-items-center animate__animated animate__zoomIn pl-bg-black ${conditions(ConditionName.isTouchScreen) ? \"pl-absolute\" : \"pl-relative\"}`}>\r\n                <div className=\"pl-w-[90%] xl:pl-w-[50%] pl-flex pl-flex-col pl-justify-start pl-items-start\">\r\n                    <div className=\"pl-flex pl-justify-between pl-w-full\">\r\n                        <p className=\"pl-text-[14px] pl-font-medium pl-mb-2 pl-text-gray-400\">بعدی در <span className=\"pl-text-white\">{autoPlayCounter}</span></p>\r\n                        <CloseIcon className=\"pl-w-6 pl-h-6 pl-stroke-white pl-cursor-pointer\" onClick={() => handleClosePopover(\"single-popover\")} />\r\n                    </div>\r\n                    <div className=\"pl-w-full xl:pl-w-full pl-flex pl-flex-row xl:pl-flex-col pl-gap-3\" onClick={() => window.location.href = changeVideoUrl()}>\r\n                        <div className=\"pl-w-[50%] xl:pl-w-full pl-max-w-[1000px] pl-h-full pl-relative\">\r\n                            <Image src={recommendationListFiltered[0].banner ? recommendationListFiltered[0].banner : IMAGES.sampleBanner} layout=\"responsive\" width={200} height={112.5} className=\"pl-rounded-[10px] pl-cursor-pointer\" />\r\n                        </div>\r\n                        <p className=\"pl-cursor-pointer pl-text-[15px] pl-text-white pl-font-bold\">{recommendationListFiltered[0].title}</p>\r\n                    </div>\r\n                    <div className=\"pl-w-full pl-flex pl-items-center pl-gap-4 pl-mt-3\">\r\n                        <button className=\"pl-w-full pl-text-white pl-bg-main-light pl-rounded-[8px] pl-py-2 pl-cursor-pointer\" onClick={() => window.location.href = changeVideoUrl()}>پخش</button>\r\n                        <button className=\"pl-w-full pl-text-white pl-border-[1.5px] pl-rounded-[8px] pl-py-2 pl-cursor-pointer\" onClick={() => handleClosePopover(\"single-popover\")}>انصراف</button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        )\r\n    } else if (conditions(ConditionName.showRecommendListPopover) && conditions(ConditionName.isTouchScreenLandscape)) {\r\n        popoverContent = (\r\n            <div className=\"pl-w-screen pl-h-screen pl-flex pl-flex-col pl-justify-between pl-p-4\">\r\n                <CloseIcon className=\"pl-w-6 pl-h-6 pl-stroke-white\" onClick={() => handleClosePopover(\"multi-popover\")} />\r\n                <div className=\"pl-flex pl-items-center pl-gap-2 pl-overflow-auto no-scrollbar\">\r\n                    {recommendationListFiltered.slice(0, 12).map((item: any) => (\r\n                        <div key={item.id} className=\"pl-flex-none animate__animated animate__backInUp\" onClick={() => window.location.href = changeVideoUrl(item.type, item.id)}>\r\n                            <Image src={item.banner ? item.banner : IMAGES.sampleBanner} width={184} height={103} className=\"pl-rounded-[4px]\" />\r\n                            <p className=\"pl-text-[12px] pl-text-white pl-font-bold pl-truncate pl-w-[184px]\">{item.title}</p>\r\n                        </div>\r\n                    ))}\r\n                </div>\r\n            </div>\r\n        )\r\n    } else if (!conditions(ConditionName.isTouchScreen)) {\r\n        popoverContent = (\r\n            <div className={`pl-w-auto pl-h-full pl-grid ${gridStyle} pl-content-center pl-gap-2 pl-mx-[18px]`}>\r\n                {recommendationListFiltered.slice(0, videoCounts).map((item: any) => (\r\n                    <div key={item.id} className=\"pl-relative pl-w-full pl-h-full pl-rounded-[4px] pl-cursor-pointer animate__animated animate__zoomIn\" onMouseEnter={() => setMouseOverId(item.id)} onMouseLeave={() => setMouseOverId(undefined)} onClick={() => window.location.href = changeVideoUrl(item.type, item.id)}>\r\n                        <Image src={item.banner ? item.banner : IMAGES.sampleBanner} layout=\"responsive\" width={200} height={112.5} className=\"pl-rounded-[4px]\" />\r\n                        {mouseOverId === item.id && (\r\n                            <div className=\"pl-w-full pl-h-full pl-flex pl-flex-col pl-justify-between pl-absolute pl-top-0 pl-left-0 pl-pt-[13px] pl-px-[16px] pl-pb-[8px] pl-font-bold\" style={{ background: `linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(4, 4, 18, 0) 100%` }}>\r\n                                <div className=\"pl-text-white\">\r\n                                    <p className=\"pl-text-[12px] pl-font-bold pl-two-line\">{item.title}</p>\r\n                                    <div className=\"pl-flex pl-gap-[7px] pl-text-[9px]\">\r\n                                        <p>\r\n                                            <span>{unitization(item.viewers).value}</span>\r\n                                            <span>{unitization(item.viewers).unit}</span>\r\n                                        </p>\r\n                                        <p>بازدید</p>\r\n                                    </div>\r\n                                </div>\r\n                                <p className=\"pl-self-end pl-rounded-[4px] pl-px-[7.5px] pl-w-max pl-text-left pl-bg-black/[0.7] pl-text-[12px] pl-text-white pl-font-normal\">{secondsToHMS(item.duration)}</p>\r\n                            </div>\r\n                        )}\r\n                    </div>\r\n                ))}\r\n            </div>\r\n        )\r\n    } else dispatch(setAutoPlayPopover(false));\r\n\r\n    return (\r\n        <>\r\n            {conditions(ConditionName.isTouchScreen) ? (\r\n                <Popover status={true} onClose={() => {}} type=\"popover\" classNames={`pl-w-full pl-absolute pl-top-0 pl-right-0 !pl-bg-black/[0.8]`} styles={{ height: conditions(ConditionName.isComplexPortrait) ? window.innerWidth * 9 / 16 : \"100%\" }}>\r\n                    {popoverContent}\r\n                </Popover>\r\n            ) : (\r\n                <>{popoverContent}</>\r\n            )}\r\n        </>\r\n    )\r\n}\r\n\r\nexport default AutoPlay;"],"mappings":"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","names":["init_esm_shims","Image","useEffect","useRef","useState","shallowEqual","dynamic","Fragment","jsx","jsxs","Popover","AutoPlay","autoPlayCounter","setAutoPlayCounter","useState","showSingleNextPlayList","setShowSingleNextPlayList","conditions","mouseOverId","setMouseOverId","videoCounts","setVideoCounts","gridStyle","setGridStyle","dispatch","useAppDispatch","recommendationList","useAppSelector","isComplexPortrait","recommendListPopover","isAutoPlay","isEnded","autoPlayCounterRef","useRef","intervalRef","recommendationListFiltered","item","useEffect","changeVideoUrl","handleResize","handleClosePopover","type","setIsAutoPlay","setRecommendListPopover","setAutoPlayPopover","popoverContent","closeIcon_default","Image","importImages_default","unitization","secondsToHMS","autoPlay_default"]}