{"version":3,"sources":["../ui/src/components/player-components/chat/chat.tsx"],"sourcesContent":["import { memo, useEffect, useState } from 'react'\r\nimport { useAppDispatch, useAppSelector } from '../../../../../redux/hooks'\r\nimport { conditions } from '../../../../../helpers'\r\nimport { ConditionName, IChatMessage } from '../../../../../interfaces'\r\nimport { fetchChatMessage, handleConnectSocket } from '../../../../../redux/actions/chat.actions'\r\nimport { setChatPopover } from '../../../../../redux/slices/popoversSlice'\r\nimport { setMessages, setShowChat, setMessageCount } from '../../../../../redux/slices/chatSlice'\r\nimport store from 'redux-share/store'\r\nimport useIntersect from 'helpers/hooks/useIntersect'\r\nimport { shallowEqual } from 'react-redux';\r\nimport dynamic from \"next/dynamic\";\r\n\r\nconst ChatIcon = dynamic(() => import(\"../../icon-components/chatIcon\"));\r\nconst Popover = dynamic(() => import(\"../popover/popover\"));\r\nconst ChatCard = dynamic(() => import(\"./chatCard\"));\r\nconst AddChatComment = dynamic(() => import(\"./addChatComment\"));\r\n\r\nconst Chat = () => {\r\n\r\n  const dispatch = useAppDispatch()\r\n  const { chatPopover } = useAppSelector(({ popovers: { chatPopover } }) => ({ chatPopover }), shallowEqual);\r\nconst { messages, showChat, socket } = useAppSelector(({ chats: { messages, showChat, socket } }) => ({ messages, showChat, socket }), shallowEqual);\r\n  useAppSelector(({ videoData: { isComplexDesktop, isComplexPortrait } }) => ({ isComplexDesktop, isComplexPortrait }), shallowEqual);\r\n\r\n  const [scrollEnd, setScrollEnd] = useState<boolean>(false)\r\n  const handleIntersect = ([entry]: IntersectionObserverEntry[]) => {\r\n    const { messages, messageCount } = store.getState().chats\r\n    if (entry.isIntersecting && (messages === undefined || messages.length !== messageCount)) setScrollEnd(true)\r\n  }\r\n\r\n  useEffect(() => {\r\n    if (conditions(ConditionName.showChatPopover) || conditions(ConditionName.isComplexDesktop)) handleConnectSocket(setScrollEnd)\r\n    return () => socket && socket.disconnect()\r\n  }, [chatPopover])\r\n\r\n  useEffect(() => {\r\n    if (scrollEnd && (messages && messages.length)) fetchChatMessage(messages.length, setScrollEnd)\r\n  }, [scrollEnd])\r\n\r\n  const observerRef = useIntersect(handleIntersect)\r\n\r\n  const chatSkeleton = (skeletonNumber: number) => {\r\n    return (\r\n      <>\r\n        {Array.from(Array(skeletonNumber).keys()).map((item)=> {\r\n          return (\r\n            <div key={item} role=\"status\" className=\"pl-mb-1 pl-p-4 pl-bg-gray-200  pl-animate-pulse dark:pl-bg-gray-700 dark:pl-opacity-60 pl-space-y-8 md:pl-space-y-0 md:pl-space-x-8 rtl:pl-space-x-reverse md:pl-flex md:pl-items-center\">\r\n              <div className=\"pl-w-[90%]\">\r\n                  <div className='pl-flex pl-items-center pl-gap-3 pl-mb-3'>\r\n                    <div className=\"pl-h-12 pl-w-12 pl-bg-gray-100 pl-rounded-full dark:pl-bg-gray-500\"></div>\r\n                    <div className='pl-flex pl-flex-col pl-gap-3 pl-w-1/2'>\r\n                      <div className=\"pl-h-1.5 pl-bg-gray-100 pl-rounded-full dark:pl-bg-gray-500\"></div>\r\n                      <div className=\"pl-h-1.5 pl-bg-gray-100 pl-rounded-full dark:pl-bg-gray-500 !pl-w-2/3\"></div>\r\n                    </div>\r\n                  </div>\r\n                  <div className=\"pl-h-1.5 pl-bg-gray-100 pl-rounded-full dark:pl-bg-gray-500 pl-w-[250px] pl-mb-2\"></div>\r\n                  <div className=\"pl-h-1.5 pl-bg-gray-100 pl-rounded-full dark:pl-bg-gray-500 pl-w-[270px] pl-mb-2\"></div>\r\n                  <div className=\"pl-h-1.5 pl-bg-gray-100 pl-rounded-full dark:pl-bg-gray-500 pl-w-[210px]\"></div>\r\n              </div>\r\n              <span className=\"pl-sr-only\">Loading...</span>\r\n            </div>\r\n          )})}\r\n      </>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <>\r\n      {conditions(ConditionName.isComplexPortrait) ? (\r\n        <>\r\n          <div\r\n            className='pl-flex pl-items-center pl-gap-[14px] pl-rounded-[20px] pl-text-secondary-700 dark:pl-text-secondary-50 pl-bg-gray-100 dark:pl-bg-dark-3 pl-px-4 pl-py-[7px] pl-cursor-pointer'\r\n            onClick={() => dispatch(setChatPopover(true))}>\r\n              <ChatIcon className='pl-w-5 pl-h-5 pl-fill-z-gray-500 dark:pl-fill-dark-5' />\r\n              <span className='pl-whitespace-nowrap'>گفت‌وگوی زنده</span>\r\n          </div>\r\n          <Popover\r\n            type='modal'\r\n            status={conditions(ConditionName.showChatPopover)}\r\n            onClose={() => {\r\n              dispatch(setChatPopover(false));\r\n              dispatch(setShowChat(false));\r\n              dispatch(setMessages(undefined))\r\n              dispatch(setMessageCount(0))\r\n            }}\r\n            isFullHeight={true}\r\n            isHasCatchUpLineOnTop={true}\r\n            isHeader={true}\r\n            headerTitle='گفت‌وگوی زنده'\r\n          >\r\n            <>\r\n              <div className='pl-flex pl-flex-col pl-gap-4 pl-px-4 pl-pt-4 pl-mb-[120px]'>\r\n                {messages && messages.map((message: IChatMessage) => <ChatCard key={message.id} message={message} />)}\r\n                {(messages === undefined || scrollEnd) && chatSkeleton(4)}\r\n                <div id='observer' className='pl-bg-transparent pl-pt-5' ref={observerRef} />\r\n              </div>\r\n              <AddChatComment />\r\n            </>\r\n          </Popover>\r\n        </>\r\n      ) : (\r\n        <>\r\n          {showChat ? (\r\n            <div\r\n              className='pl-border pl-border-z-gray-400 pl-rounded-[6px] pl-flex pl-flex-col pl-ml-4 pl-flex-1 pl-h-1'>\r\n              <p\r\n                className='pl-px-4 pl-text-[14px] pl-font-bold pl-pt-4 pl-border-b pl-border-b-z-gray-400 pl-pb-4'>گفتگو\r\n                زنده</p>\r\n              <div className='pl-flex pl-flex-col pl-gap-4 pl-p-4 pl-flex-1 pl-h-full pl-overflow-auto'>\r\n                {messages && messages.map((message: IChatMessage) => <ChatCard key={message.id} message={message} />)}\r\n                {(messages === undefined || scrollEnd) && chatSkeleton(4)}\r\n                <div id='observer' className='pl-bg-transparent pl-pt-5' ref={observerRef} />\r\n              </div>\r\n              <AddChatComment />\r\n              <button\r\n                className='pl-bg-secondary-200 dark:pl-bg-dark-3 pl-border-t pl-border-t-z-gray-400 pl-py-[11px] pl-text-[14px] pl-font-bold'\r\n                onClick={() => dispatch(setShowChat(false))}>مخفی کردن گفتگوی زنده\r\n              </button>\r\n            </div>\r\n          ) : (\r\n            <button\r\n              className='pl-bg-secondary-200 dark:pl-bg-z-gray-500 pl-text-gray-800 dark:pl-text-white pl-text-[14px] pl-font-bold pl-rounded-[20px] pl-py-3 pl-ml-4 pl-mb-4'\r\n              onClick={() => dispatch(setShowChat(true))}>نمایش گفتگوی زنده</button>\r\n          )\r\n          }\r\n        </>\r\n      )}\r\n    </>\r\n  )\r\n}\r\n\r\nexport default memo(Chat)"],"mappings":"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","names":["init_esm_shims","memo","useEffect","useState","shallowEqual","dynamic","Fragment","jsx","jsxs","ChatIcon","Popover","ChatCard","AddChatComment","Chat","dispatch","useAppDispatch","chatPopover","useAppSelector","messages","showChat","socket","isComplexDesktop","isComplexPortrait","scrollEnd","setScrollEnd","useState","handleIntersect","entry","messageCount","store_default","useEffect","conditions","handleConnectSocket","fetchChatMessage","observerRef","useIntersect_default","chatSkeleton","skeletonNumber","item","setChatPopover","setShowChat","setMessages","setMessageCount","message","chat_default","memo"]}