{"version":3,"sources":["../ui/src/components/player-components/tags/selectedTagsVideoList.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\r\nimport PlayerCard from \"../playerCard/playerCard\";\r\nimport PlayListCard from \"../playList/playListCard\";\r\nimport { handleGetTags, handleSearchResultClick } from \"../../../../../redux/actions/tags.actions\";\r\nimport useIntersect from \"../../../../../helpers/hooks/useIntersect\";\r\nimport { conditions } from \"../../../../../helpers\";\r\nimport { ConditionName, ISelectedTagsVideoListProps } from \"../../../../../interfaces\";\r\n\r\nconst SelectedTagsVideoList = ({ listScrolled, setListScrolled, videoCount }: ISelectedTagsVideoListProps) => {\r\n\r\n    const [scrollEnd, setScrollEnd] = useState(false);\r\n    const videoCountRef = useRef<number>(videoCount);\r\n    const listScrolledRef = useRef<any[]>(listScrolled);\r\n    const playListCardInfoRef = useRef<any>({});\r\n\r\n    useEffect(() => {\r\n        videoCountRef.current = videoCount;\r\n    },[videoCount])\r\n\r\n    useEffect(() => {\r\n        listScrolledRef.current = listScrolled;\r\n    }, [listScrolled])\r\n\r\n    useEffect(() => handleGetTags(scrollEnd, setScrollEnd, listScrolled, setListScrolled), [scrollEnd]);\r\n\r\n    const handleIntersect = ([entry]: IntersectionObserverEntry[]) => {\r\n        if (entry.isIntersecting && listScrolledRef.current.length !== videoCountRef.current) setScrollEnd(true);\r\n    };\r\n\r\n    const observerRef = useIntersect(handleIntersect);\r\n\r\n    return (\r\n        <div>\r\n            <div\r\n                className={`pl-flex pl-flex-wrap ${conditions(ConditionName.isComplexPortrait) ? \"pl-gap-2 pl-mb-[300px] pl-flex-col\" : \"pl-gap-[17px]\"} pl-mx-3`}>\r\n                {listScrolled.map((item: any, index:number) => {\r\n                    return (\r\n                        <div key={item.video.id} id={`tagVideoList-${item.video.id}`}\r\n                            className={`${!conditions(ConditionName.isComplexPortrait) && \"pl-grow\"} pl-relative pl-cursor-pointer pl-overflow-hidden`}\r\n                            style={{\r\n                                width: conditions(ConditionName.isComplexPortrait) ? \"100%\" : 265,\r\n                                height: conditions(ConditionName.isComplexPortrait) ? 88 : \"initial\"\r\n                            }}>\r\n                            <PlayerCard \r\n                                id={item.video.id} \r\n                                tags={item.video.tag}\r\n                                isTagCard={!conditions(ConditionName.isComplexPortrait)}\r\n                                src={item.video.banner} \r\n                                type={item.video.type}\r\n                                imdb_rate={item.video.imdb_rate}\r\n                                isVideo={false}\r\n                                width={conditions(ConditionName.isComplexPortrait) ? 156 : \"unset\"}\r\n                                height={conditions(ConditionName.isComplexPortrait) ? 88 : 149}\r\n                                duration={item.video.duration} \r\n                                title={item.video.title}\r\n                                isComplexDesktop={conditions(ConditionName.isComplexDesktop)}\r\n                                viewers={item.video.viewers}\r\n                                date={item.video.type === \"playlist\" ? item.video.release_year : item.video.start_time}\r\n                                onClick={(event: any) => handleSearchResultClick(event,item.video,playListCardInfoRef, item.video.id,item.video.type, index)} \r\n                                commentsCount={item.video.comments_count}\r\n                                star={item.video.star}\r\n                            />\r\n                                \r\n                        </div>\r\n                    )\r\n                })}\r\n                {\r\n                    ((scrollEnd && listScrolled.length !== videoCount) || conditions(ConditionName.isComplexDesktop)) && Array.from((Array(conditions(ConditionName.isComplexPortrait) ? 20 : 10)).keys()).map((item, i) => (\r\n                        <div\r\n                            key={i}\r\n                            className={`${(scrollEnd && listScrolled.length !== videoCount) && \"pl-shadow\"} animate-pulse pl-flex pl-overflow-hidden pl-h-full ${conditions(ConditionName.isComplexPortrait) ? \"pl-flex-row pl-gap-2 pl-items-start\" : \"pl-flex-col pl-grow\"}`}\r\n                            style={{\r\n                                height: conditions(ConditionName.isComplexPortrait) ? 80 : \"initial\",\r\n                                width: conditions(ConditionName.isComplexPortrait) ? \"initial\" : 265\r\n                            }}>\r\n                            <div\r\n                                className={`${conditions(ConditionName.isComplexPortrait) ? (scrollEnd && listScrolled.length !== videoCount ? \"pl-relative pl-flex-none pl-bg-gray-100 dark:pl-bg-secondary-600 pl-w-[142px] pl-h-[80px]\" : \"pl-w-[142px] pl-h-full\") : (scrollEnd && listScrolled.length !== videoCount && \"pl-bg-gray-100 dark:pl-bg-secondary-600 pl-w-full !pl-aspect-video\")}`} />\r\n                            <div\r\n                                className={`pl-flex pl-py-1 pl-w-full pl-h-full pl-flex-col pl-gap-0.5 pl-justify-around pl-overflow-hidden`}>\r\n                                <div\r\n                                    className={`${(scrollEnd && listScrolled.length !== videoCount) ? \"pl-bg-gray-200 dark:pl-bg-z-gray-700\" : \"\"} pl-h-2.5 pl-rounded-full pl-w-48 pl-mb-4`} />\r\n                                <div\r\n                                    className=\"pl-flex pl-flex-col pl-items-end pl-gap-2\">\r\n                                    <div\r\n                                        className={`pl-h-2.5 ${(scrollEnd && listScrolled.length !== videoCount) ? \"pl-bg-gray-200 dark:pl-bg-z-gray-700\" : \"\"} pl-rounded-full pl-w-full`} />\r\n                                    <div\r\n                                        className={`pl-h-2 ${(scrollEnd && listScrolled.length !== videoCount) ? \"pl-bg-gray-200 dark:pl-bg-z-gray-700\" : \"\"} pl-rounded-full pl-w-full`} />\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    ))\r\n                }\r\n                {\r\n                    conditions(ConditionName.isComplexPortrait) &&\r\n                    <div id=\"observer\" className=\"pl-bg-transparent pl-pt-5\" ref={observerRef} />\r\n                }\r\n            </div>\r\n            {\r\n                !conditions(ConditionName.isComplexPortrait) &&\r\n                <div id=\"observer\" className=\"pl-bg-transparent pl-pt-5\" ref={observerRef} />\r\n            }\r\n            <PlayListCard playListCardInfo={playListCardInfoRef.current}/>\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default SelectedTagsVideoList;"],"mappings":"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","names":["init_esm_shims","useEffect","useRef","useState","jsx","jsxs","SelectedTagsVideoList","listScrolled","setListScrolled","videoCount","scrollEnd","setScrollEnd","useState","videoCountRef","useRef","listScrolledRef","playListCardInfoRef","useEffect","handleGetTags","observerRef","useIntersect_default","entry","conditions","item","index","playerCard_default","event","handleSearchResultClick","i","playListCard_default","selectedTagsVideoList_default"]}