{"version":3,"sources":["../ui/src/components/player-components/touchVolumeBrightness/touchVolumeBrightness.tsx"],"sourcesContent":["import Image from \"next/image\";\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport { useAppDispatch, useAppSelector } from \"redux-share/hooks\";\r\nimport { ConditionName } from \"interfaces\";\r\nimport { checkParentTarget, conditions, videoTag } from \"helpers\";\r\nimport { brightnessLog, sendFluentLog, volumeLog } from 'logs';\r\nimport { createSettings } from \"redux-share/actions/user.actions\";\r\nimport { setActiveElements } from \"redux-share/slices/controllerSlice\";\r\nimport { setUserSettings } from \"redux-share/slices/userSlice\";\r\nimport IMAGES from \"../../../../../images/importImages\";\r\nimport store from \"redux-share/store\";\r\nimport { shallowEqual } from 'react-redux';\r\nimport dynamic from \"next/dynamic\";\r\n\r\nconst Mute = dynamic(() => import(\"../../icon-components/mute\"));\r\nconst UnMute = dynamic(() => import(\"../../icon-components/unMute\"));\r\n\r\nconst TouchVolumeBrightness = () => {\r\n\r\n    const [type, setType] = useState<string>(\"\");\r\n    \r\n    const dispatch = useAppDispatch()\r\n    const { settings } = useAppSelector(({ user: { settings } }) => ({ settings }), shallowEqual);\r\n\r\n    const primaryBrightnessValueRef = useRef<number>(settings.brightness);\r\n    const primaryVolumeValueRef = useRef<number>(settings.volume);\r\n    const typeRef = useRef<string>(type);\r\n    \r\n    useEffect(() => {\r\n        typeRef.current = type;\r\n    }, [type])\r\n\r\n\r\n    useEffect(() => {\r\n\r\n        let startPositionY = 0;\r\n\r\n        const handleTouchStartScreen = (event:any) => {\r\n            if (conditions(ConditionName.hidePopovers) && !checkParentTarget(event, \"time-progress-area\")) startPositionY = event.touches[0].clientY\r\n        }\r\n\r\n        const handleTouchMoveScreen = (event: any) => {\r\n            if (conditions(ConditionName.hidePopovers) && !checkParentTarget(event, \"time-progress-area\")) {\r\n                event.stopPropagation();\r\n                if (event.touches[0].clientX > window.innerWidth / 2) handleTouchMove(event, \"volume\", startPositionY, window.innerHeight);\r\n                else if (event.touches[0].clientX < window.innerWidth / 2) handleTouchMove(event, \"brightness\", startPositionY, window.innerHeight);\r\n            }\r\n        }\r\n\r\n        const handleTouchEndScreen = () => {\r\n            const { settings } = store.getState().user;\r\n            if (typeRef.current === \"brightness\" && primaryBrightnessValueRef.current !== settings.brightness) {\r\n                sendFluentLog(brightnessLog(primaryBrightnessValueRef.current, settings.brightness));\r\n                primaryBrightnessValueRef.current = settings.brightness;\r\n                createSettings({ ...settings, brightness: settings.brightness });\r\n            } else if (typeRef.current === \"volume\" && primaryVolumeValueRef.current !== settings.volume) {\r\n                sendFluentLog(volumeLog(primaryVolumeValueRef.current, settings.volume));\r\n                primaryVolumeValueRef.current = settings.volume;\r\n                createSettings({ ...settings, volume: settings.volume });\r\n            }\r\n            setTimeout(() => setType(\"\"), 500);\r\n        }\r\n        \r\n        document.addEventListener(\"touchstart\", (event:any) => handleTouchStartScreen(event))\r\n        document.addEventListener(\"touchmove\",(event:any) => handleTouchMoveScreen(event))\r\n        document.addEventListener(\"touchend\", () => handleTouchEndScreen());\r\n\r\n        return () => {\r\n            document.removeEventListener(\"touchstart\", (event: any) => handleTouchStartScreen(event))\r\n            document.removeEventListener(\"touchmove\", (event: any) => handleTouchMoveScreen(event))\r\n            document.removeEventListener(\"touchend\", () => handleTouchEndScreen());\r\n        }\r\n    },[])\r\n\r\n    useEffect(() => {\r\n        if(settings.volume === 0 && !type) primaryVolumeValueRef.current = 0;\r\n    },[settings.volume])\r\n\r\n    const handleTouchMove = (event:any, type:string, startPositionY:number, area: number) => {\r\n        const { settings } = store.getState().user;\r\n        try {\r\n            dispatch(setActiveElements(false))\r\n            event.stopPropagation();\r\n            setType(type);\r\n            const { height } = document.getElementsByClassName(\"pl-bar\")[0].getBoundingClientRect();\r\n            if (type === \"volume\") {\r\n                const value = settings.volume + (((startPositionY - event.touches[0].clientY) / 40) * height) / area;\r\n                let volumeCount:number;\r\n                if (value > 100) volumeCount = 100;\r\n                else if (value < 0) volumeCount = 0\r\n                else volumeCount = Math.ceil(Math.abs(value));\r\n                dispatch(setUserSettings({...settings, volume: volumeCount}))\r\n                videoTag().volume = volumeCount / 100;\r\n            } else if (type === \"brightness\") {\r\n                const value = settings.brightness + (((startPositionY - event.touches[0].clientY) / 40) * height) / area;\r\n                if (value > 100) dispatch(setUserSettings({...settings, brightness: 100}));\r\n                else if (value < 0) dispatch(setUserSettings({ ...settings, brightness: 0 }))\r\n                else dispatch(setUserSettings({ ...settings, brightness: Math.ceil(Math.abs(value)) }));\r\n            }\r\n        } catch (error) {\r\n            return false\r\n        }\r\n    }\r\n\r\n    return (\r\n        <div id=\"volume-brightness\">\r\n            <div className={`pl-fixed pl-w-screen pl-h-screen pl-top-0 pl-right-0 pl-bg-black`} style={{ opacity: settings.brightness < 10 ? 0.9 : 1 - settings.brightness / 100 }}></div>\r\n            <div className=\"pl-absolute pl-top-0 pl-right-0 pl-w-full pl-h-full pl-flex pl-justify-between pl-items-center\">\r\n                <div className=\"pl-flex pl-items-center pl-flex-1 pl-h-full pl-pr-6\">\r\n                    <div id={\"volume-progressbar\"} className={`pl-bar pl-relative pl-w-6 pl-h-[200px] ${type === \"volume\" && \"pl-bg-gray-300\"} pl-rounded-[50px] pl-overflow-hidden pl-max-h-[80vh] pl-flex pl-items-end pl-justify-end`}>\r\n                        {type === \"volume\" && (\r\n                            <>\r\n                                <div className='pl-absolute pl-w-full pl-bg-secondary-600 pl-rounded-b-[50px]' style={{ height: `${settings.volume}%` }}/>\r\n                                <div className=\"pl-mb-[7px] pl-ml-0.5 pl-flex pl-gap-1 pl-items-center\">\r\n                                    <div className=\"pl-relative pl-flex pl-items-center\">\r\n                                        {settings.volume > 0 && <div className='pl-absolute pl-right-[2px] pl-w-2 pl-h-2 pl-rounded-full pl-flex pl-items-center pl-justify-center pl-border-2 pl-border-transparent pl-border-r-2 pl-border-r-z-yellow-light'/>}\r\n                                        {settings.volume > 33 && <div className='pl-absolute pl-right-[-1px] pl-w-3 pl-h-3 pl-rounded-full pl-flex pl-items-center pl-justify-center pl-border-2 pl-border-transparent pl-border-r-2 pl-border-r-z-yellow-light'/>}\r\n                                        {settings.volume > 66 && <div className='pl-absolute pl-right-[-4px] pl-w-4 pl-h-4 pl-rounded-full pl-flex pl-items-center pl-justify-center pl-border-2 pl-border-transparent pl-border-r-2 pl-border-r-z-yellow-light'/>}\r\n                                    </div>\r\n                                    {settings.volume === 0 ? <Mute className=\"pl-z-[1] pl-w-[13px] pl-h-[13px] pl-fill-dark-7\" /> : <UnMute className=\"pl-z-[1] pl-w-[13px] pl-h-[13px] pl-fill-dark-7\" />}\r\n                                </div>\r\n                            </>\r\n                        )}\r\n                    </div>\r\n                </div>\r\n                {type && (\r\n                    <div className=\"pl-bg-secondary-700/[0.8] pl-rounded-full pl-w-[54px] pl-h-[54px] pl-flex pl-items-center pl-justify-center pl-text-[32px] pl-font-normal pl-text-white\">\r\n                        {type === \"volume\" ? settings.volume : settings.brightness}\r\n                    </div>\r\n                )}\r\n                <div className=\"pl-flex pl-items-center pl-justify-end pl-flex-1 pl-h-full pl-pl-6\">\r\n                    <div id={\"brightness-progressbar\"} className={`pl-bar pl-relative pl-w-6 pl-h-[200px] ${type === \"brightness\" && \"pl-bg-gray-300\"} pl-rounded-[50px] pl-overflow-hidden pl-max-h-[80vh] pl-flex pl-items-end pl-justify-end`}>\r\n                        {type === \"brightness\" && (\r\n                            <>\r\n                                <div className='pl-absolute pl-w-full pl-bg-primary-600 pl-rounded-b-[50px]' style={{ height: `${settings.brightness}%` }}/>\r\n                                <div className=\"pl-mb-[7px] pl-ml-0.5 pl-flex pl-gap-1 pl-items-center\" style={{ opacity: settings.brightness / 100 }}>\r\n                                    <Image src={IMAGES.sun} className=\"pl-flex-1\" width={20} height={20} />\r\n                                </div>\r\n                            </>\r\n                        )}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default TouchVolumeBrightness;"],"mappings":"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","names":["init_esm_shims","Image","useEffect","useRef","useState","shallowEqual","dynamic","Fragment","jsx","jsxs","Mute","UnMute","TouchVolumeBrightness","type","setType","useState","dispatch","useAppDispatch","settings","useAppSelector","primaryBrightnessValueRef","useRef","primaryVolumeValueRef","typeRef","useEffect","startPositionY","handleTouchStartScreen","event","conditions","checkParentTarget","handleTouchMoveScreen","handleTouchMove","handleTouchEndScreen","store_default","sendFluentLog","brightnessLog","createSettings","volumeLog","area","setActiveElements","height","value","volumeCount","setUserSettings","videoTag","Image","importImages_default","touchVolumeBrightness_default"]}