{"version":3,"sources":["../ui/src/components/player-components/chat/addChatComment.tsx"],"sourcesContent":["import { useState, useEffect, useRef } from \"react\";\r\nimport Image from \"next/image\";\r\nimport { useAppDispatch, useAppSelector } from \"../../../../../redux/hooks\";\r\nimport { submitCommentInChat } from \"../../../../../redux/actions/chat.actions\";\r\nimport { ConditionName } from \"../../../../../interfaces\";\r\nimport { conditions } from \"../../../../../helpers\";\r\nimport IMAGES from \"../../../../../images/importImages\";\r\nimport { setChatEmojisPopover } from \"../../../../../redux/slices/popoversSlice\";\r\nimport { getLoginZarebinUrl } from \"../../../../../services\";\r\nimport { shallowEqual } from 'react-redux'\r\nimport dynamic from \"next/dynamic\";\r\n\r\nconst EmojiPicker = dynamic(() => import(\"../emojiPicker/emojiPicker\"));\r\n\r\nconst defaultTexts = [\r\n    {\r\n        text: \"سلام\",\r\n        sticker: \"👋\",\r\n    },\r\n    {\r\n        text: \"خیلی عالی\",\r\n        sticker: \"👍\",\r\n    },\r\n    {\r\n        text: \"آفرین\",\r\n        sticker: \"👏\"\r\n    },\r\n    {\r\n        text: \"خدا قوت\",\r\n        sticker: \"🙏\",\r\n    },\r\n]\r\n\r\nconst AddChatComment = () => {\r\n\r\n    const [inputValue, setInputValue] = useState<string>(\"\");\r\n    const [selectedEmoji, setSelectedEmoji] = useState<string>(\"\");\r\n    const [chatSlideArrow, setchatSlideArrow] = useState<boolean>(false);\r\n    const [chatSlideScrollLeft, setchatSlideScrollLeft] = useState<number>(0);\r\n\r\n    const inputValueRef = useRef<string>(inputValue);\r\n    const selectedEmojiRef = useRef<string>(selectedEmoji);\r\n    const chatContainerRef = useRef<any>();\r\n\r\n    useEffect(() => {\r\n        inputValueRef.current = inputValue;\r\n    }, [inputValue])\r\n\r\n    useEffect(() => {\r\n        selectedEmojiRef.current = selectedEmoji;\r\n    }, [selectedEmoji])\r\n\r\n    const dispatch = useAppDispatch();\r\n    const { chatEmojisPopover } = useAppSelector(({ popovers: { chatEmojisPopover } }) => ({ chatEmojisPopover }), shallowEqual);\r\n    const { socket } = useAppSelector(({ chats: { socket, chatEnabled } }) => ({ socket, chatEnabled }), shallowEqual);\r\n    useAppSelector(({ videoData: { isComplexDesktop, isComplexPortrait } }) => ({ isComplexDesktop, isComplexPortrait }), shallowEqual);\r\n    useAppSelector(({ user: { isLogin } }) => ({ isLogin }), shallowEqual);\r\n\r\n    useEffect(() => {\r\n        if (selectedEmoji) {\r\n            setInputValue(`${inputValue}${selectedEmoji}`);\r\n            setSelectedEmoji(\"\");\r\n        }\r\n    }, [selectedEmoji])\r\n\r\n    useEffect(() => {\r\n        const handleSendCommentInputKeyPress = (event: any) => {\r\n            if (event.key === \"Enter\" && event.target.id === \"send-chat-input\" && (!!inputValueRef.current || !!selectedEmoji)) submitCommentInChat(inputValueRef.current,setInputValue);\r\n        }\r\n        document.addEventListener(\"keypress\", handleSendCommentInputKeyPress);\r\n        return () => document.removeEventListener(\"keypress\", handleSendCommentInputKeyPress);\r\n    }, [])\r\n\r\n    const handleNextChat = (e: any) => {\r\n        e.preventDefault();\r\n        e.stopPropagation();\r\n        chatContainerRef.current.scrollLeft -= chatContainerRef.current.clientWidth;\r\n    }\r\n\r\n    const handlePrevChat = (e: any) => {\r\n        e.preventDefault();\r\n        e.stopPropagation();\r\n        chatContainerRef.current.scrollLeft += chatContainerRef.current.clientWidth;\r\n    }\r\n\r\n    useEffect(() => {\r\n        if (chatContainerRef.current) {\r\n            const clientWidth = chatContainerRef.current.clientWidth;\r\n            const scrollWidth = chatContainerRef.current.scrollWidth;\r\n            setchatSlideArrow(scrollWidth > clientWidth);\r\n            setchatSlideScrollLeft(chatContainerRef.current.scrollLeft);\r\n            chatContainerRef.current.addEventListener('scroll', (e: any) => setchatSlideScrollLeft(e.target.scrollLeft));\r\n        }\r\n        return () => chatContainerRef.current && chatContainerRef.current.removeEventListener('scroll', () => true);\r\n\r\n    }, [chatContainerRef.current, socket]);\r\n\r\n    return (\r\n        <div className={`${conditions(ConditionName.isComplexPortrait) ? \"pl-absolute pl-bottom-0\" : \"pl-relative\"} pl-flex-none pl-w-full pl-flex pl-flex-col pl-justify-end`}>\r\n            <div className={`pl-bg-secondary-200 dark:pl-bg-dark-3 pl-border-t ${conditions(ConditionName.isComplexPortrait) ? \"pl-border-z-secondary\" : \" pl-border-z-secondary-100\"} dark:pl-border-z-secondary-600 pl-px-4 pl-py-3 pl-flex pl-items-center pl-gap-4 pl-relative pl-z-10`}>\r\n                {conditions(ConditionName.isLogin) ? (\r\n                    <>\r\n                        {conditions(ConditionName.chatEnabled) ? (\r\n                            <div className=\"pl-relative pl-flex pl-flex-col pl-w-full pl-gap-2\">\r\n                                <div className=\"pl-flex pl-items-center pl-gap-2 pl-overflow-auto no-scrollbar\" ref={chatContainerRef}>\r\n                                    {\r\n                                        chatSlideArrow && !conditions(ConditionName.isTouchScreen) && (\r\n                                            <>\r\n                                                {\r\n                                                    chatSlideScrollLeft < 0 && (\r\n                                                        <div className={`pl-flex pl-items-center pl-justify-center pl-cursor-pointer pl-transition hover:pl-scale-[1.2] pl-drop-shadow-lg pl-absolute pl-right-0 pl-rounded-full`} onClick={handlePrevChat}>\r\n                                                            <Image src={IMAGES.chevronCircleRight} width={18} height={18} alt=\"chevronCircleRight-icon\" />\r\n                                                        </div>\r\n                                                    )\r\n                                                }\r\n                                                {\r\n                                                    Math.abs(Math.floor(Math.abs(chatSlideScrollLeft)) + chatContainerRef.current.clientWidth) !== chatContainerRef.current.scrollWidth - 1 && (\r\n                                                        <div className={`pl-flex pl-items-center pl-justify-center pl-cursor-pointer pl-transition hover:pl-scale-[1.2] -pl-rotate-180 pl-drop-shadow-lg pl-absolute pl-left-0 pl-rounded-full`} onClick={handleNextChat}>\r\n                                                            <Image src={IMAGES.chevronCircleRight} width={18} height={18} alt=\"chevronCircleRight-icon\" />\r\n                                                        </div>\r\n                                                    )\r\n                                                }\r\n                                            </>\r\n                                        )\r\n                                    }\r\n                                    {defaultTexts.map((item:{text:string, sticker:string}, index) => (\r\n                                        <div key={index} className=\"pl-flex pl-items-center pl-gap-2 pl-bg-gray-highLight dark:pl-bg-z-gray-500 pl-rounded-[16px] pl-px-4 pl-py-1 pl-cursor-pointer\" onClick={() => submitCommentInChat(`${item.text} ${item.sticker}`, setInputValue)}>\r\n                                            <p className=\"pl-text-[12px] pl-font-normal pl-text-gray-800 dark:pl-text-white pl-whitespace-nowrap\">{item.text}</p>\r\n                                            <span>{item.sticker}</span>\r\n                                        </div>\r\n                                    ))}\r\n                                </div>\r\n                                <div className=\"pl-flex pl-items-center pl-gap-1\">\r\n                                    <div className=\"pl-flex pl-flex-1 pl-items-center pl-gap-1 pl-bg-gray-highLight dark:pl-bg-dark-1 pl-py-2 pl-px-3 pl-rounded-[20px]\">\r\n                                        <Image alt=\"emoji-list-icon\" src={conditions(ConditionName.isDarkMode) ? (chatEmojisPopover ? IMAGES.emojiHappyWhite : IMAGES.keyboardWhite) : (chatEmojisPopover ? IMAGES.emojiHappyBlack : IMAGES.keyboardBlack)} onClick={() => dispatch(setChatEmojisPopover(!chatEmojisPopover))} className=\"pl-cursor-pointer\" width={24} height={24} />\r\n                                        <input\r\n                                            id=\"send-chat-input\"\r\n                                            className={`pl-text-gray-600 pl-pt-[2px] dark:pl-text-secondary pl-font-normal placeholder:pl-text-gray-600 placeholder:dark:pl-text-secondary pl-w-full pl-bg-transparent pl-outline-none pl-border-none ${conditions(ConditionName.isTouchScreen) ? \"pl-text-[12px]\" : \"pl-text-[14px]\"}`}\r\n                                            placeholder=\"دیدگاه خود را وارد کنید\"\r\n                                            onChange={(event: any) => setInputValue(event.target.value)}\r\n                                            maxLength={200}\r\n                                            value={inputValue}\r\n                                        />\r\n                                        <div className=\"pl-text-[11px] pl-font-normal\">\r\n                                            <span>{inputValue.length}</span>\r\n                                            <span>/</span>\r\n                                            <span>200</span>\r\n                                        </div>\r\n                                    </div>\r\n                                    <Image alt=\"send-comment\" src={IMAGES.sendCommentTouchScreen} onClick={() => submitCommentInChat(inputValue, setInputValue)} className=\"pl-cursor-pointer\" width={40} height={40} />\r\n                                </div>\r\n                            </div>\r\n                        ) : <p className=\"pl-flex pl-flex-1 pl-items-center pl-gap-1 pl-bg-gray-highLight dark:pl-bg-dark-1 pl-py-2 pl-px-3 pl-rounded-[20px] pl-text-[14px] pl-font-normal pl-text-secondary/[0.7]\">در حال حاضر امکان ثبت دیدگاه وجود ندارد.</p>}\r\n                    </>\r\n                ) : <p className=\"pl-flex pl-flex-1 pl-items-center pl-gap-1 pl-bg-gray-highLight dark:pl-bg-dark-1 pl-py-2 pl-px-3 pl-rounded-[20px] pl-text-secondary pl-text-[14px] pl-font-normal\">شما برای ارسال دیدگاه خود باید {conditions(ConditionName.isZarebinSite) ? <a href={getLoginZarebinUrl()} className=\"text-primary-600 border-b cursor-pointer border-primary-600\">وارد</a> : \"وارد\"} شوید.</p>}\r\n            </div>\r\n            {chatEmojisPopover && <EmojiPicker enableUnified={false} setSelectedEmoji={setSelectedEmoji} onClickOutside={() => dispatch(setChatEmojisPopover(false))} parentClassName={`pl-bottom-[60px] ${conditions(ConditionName.isComplexDesktop) && \"pl-left-[160px]\"}`} />}\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default AddChatComment;"],"mappings":"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","names":["init_esm_shims","useState","useEffect","useRef","Image","shallowEqual","dynamic","Fragment","jsx","jsxs","EmojiPicker","defaultTexts","AddChatComment","inputValue","setInputValue","useState","selectedEmoji","setSelectedEmoji","chatSlideArrow","setchatSlideArrow","chatSlideScrollLeft","setchatSlideScrollLeft","inputValueRef","useRef","selectedEmojiRef","chatContainerRef","useEffect","dispatch","useAppDispatch","chatEmojisPopover","useAppSelector","socket","chatEnabled","isComplexDesktop","isComplexPortrait","isLogin","handleSendCommentInputKeyPress","event","submitCommentInChat","handleNextChat","handlePrevChat","clientWidth","scrollWidth","e","conditions","Image","importImages_default","item","index","setChatEmojisPopover","getLoginZarebinUrl","addChatComment_default"]}