{"version":3,"sources":["../ui/src/components/player-components/InstagramEmoji/explode/ExplodeEmoji.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\r\nimport { useAppSelector } from \"redux-share/hooks\";\r\nimport { IExplodeEmojiProps } from \"interfaces\";\r\nimport { shallowEqual } from 'react-redux';\r\nimport dynamic from \"next/dynamic\";\r\n\r\nconst AnimatedEmoji = dynamic(() => import(\"./animatedEmoji/AnimatedEmoji\"));\r\n\r\nconst ExplodeEmoji = ({ codes, direction }: IExplodeEmojiProps) => {\r\n\r\n    const [emojiBucket, setEmojiBucket] = useState<{ code: string, id: number }[]>([]);\r\n    const [shuffledEmojiBucket, setShuffledEmojiBucket] = useState<{ code: string, id: number }[]>([]);\r\n    const [timeoutIds, setTimeoutIds] = useState<any[]>([]);\r\n    const { config } = useAppSelector(({ videoData: { config } }) => ({ config }), shallowEqual);\r\n\r\n    const RetrievalAndShuffle = () => {\r\n        let ShuffleEmoji = (codes.map((a) => ({\r\n            sort: Math.random(),\r\n            value: a\r\n        })).sort((a, b) => a.sort - b.sort).map((a) => a.value)).map((item, i) => ({ code: item, id: i }))\r\n        setShuffledEmojiBucket(ShuffleEmoji);\r\n    }\r\n\r\n    useEffect(() => {\r\n        setShuffledEmojiBucket([]);\r\n        setEmojiBucket([]);\r\n        RetrievalAndShuffle();\r\n    }, [codes]);\r\n\r\n    useEffect(() => {\r\n        let timeoutId: any;\r\n        if (shuffledEmojiBucket.length > 0) {\r\n            for (let i = 0; i < shuffledEmojiBucket.length; i++) {\r\n                timeoutId = setTimeout(() => {\r\n                    setEmojiBucket((prev) => [...prev, shuffledEmojiBucket[i]]);\r\n                }, (config.get_interval / shuffledEmojiBucket.length) * 500 * i);\r\n                setTimeoutIds((prev) => [...prev, timeoutId]);\r\n            }\r\n        }\r\n        return () => {\r\n            if (timeoutIds.length > 0) {\r\n                timeoutIds.forEach((id) => clearTimeout(id));\r\n                setTimeoutIds([]);\r\n            }\r\n        }\r\n    }, [shuffledEmojiBucket]);\r\n    return (\r\n        <div>\r\n            {\r\n                emojiBucket.length > 0 ? emojiBucket.map((item, index) => {\r\n                    return (\r\n                        <div key={index}>\r\n                            <AnimatedEmoji direction={direction} emojiCode={item.code} />\r\n                        </div>\r\n                    )\r\n                }) :\r\n                    <></>\r\n            }\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default ExplodeEmoji;"],"mappings":"kFAAAA,IAAA,OAAS,aAAAC,EAAW,YAAAC,MAAgB,QAGpC,OAAS,gBAAAC,MAAoB,cAC7B,OAAOC,MAAa,eAgDQ,OAIR,YAAAC,EAJQ,OAAAC,MAAA,oBA9C5B,IAAMC,EAAgBH,EAAQ,IAAM,OAAO,8BAA+B,CAAC,EAErEI,EAAe,CAAC,CAAE,MAAAC,EAAO,UAAAC,CAAU,IAA0B,CAE/D,GAAM,CAACC,EAAaC,CAAc,EAAIC,EAAyC,CAAC,CAAC,EAC3E,CAACC,EAAqBC,CAAsB,EAAIF,EAAyC,CAAC,CAAC,EAC3F,CAACG,EAAYC,CAAa,EAAIJ,EAAgB,CAAC,CAAC,EAChD,CAAE,OAAAK,CAAO,EAAIC,EAAe,CAAC,CAAE,UAAW,CAAE,OAAAD,CAAO,CAAE,KAAO,CAAE,OAAAA,CAAO,GAAIf,CAAY,EAErFiB,EAAsB,IAAM,CAC9B,IAAIC,EAAgBZ,EAAM,IAAKa,IAAO,CAClC,KAAM,KAAK,OAAO,EAClB,MAAOA,CACX,EAAE,EAAE,KAAK,CAACA,EAAGC,IAAMD,EAAE,KAAOC,EAAE,IAAI,EAAE,IAAKD,GAAMA,EAAE,KAAK,EAAG,IAAI,CAACE,EAAMC,KAAO,CAAE,KAAMD,EAAM,GAAIC,CAAE,EAAE,EACjGV,EAAuBM,CAAY,CACvC,EAEA,OAAAK,EAAU,IAAM,CACZX,EAAuB,CAAC,CAAC,EACzBH,EAAe,CAAC,CAAC,EACjBQ,EAAoB,CACxB,EAAG,CAACX,CAAK,CAAC,EAEViB,EAAU,IAAM,CACZ,IAAIC,EACJ,GAAIb,EAAoB,OAAS,EAC7B,QAASW,EAAI,EAAGA,EAAIX,EAAoB,OAAQW,IAC5CE,EAAY,WAAW,IAAM,CACzBf,EAAgBgB,GAAS,CAAC,GAAGA,EAAMd,EAAoBW,CAAC,CAAC,CAAC,CAC9D,EAAIP,EAAO,aAAeJ,EAAoB,OAAU,IAAMW,CAAC,EAC/DR,EAAeW,GAAS,CAAC,GAAGA,EAAMD,CAAS,CAAC,EAGpD,MAAO,IAAM,CACLX,EAAW,OAAS,IACpBA,EAAW,QAASa,GAAO,aAAaA,CAAE,CAAC,EAC3CZ,EAAc,CAAC,CAAC,EAExB,CACJ,EAAG,CAACH,CAAmB,CAAC,EAEpBR,EAAC,OAEO,SAAAK,EAAY,OAAS,EAAIA,EAAY,IAAI,CAACa,EAAMM,IAExCxB,EAAC,OACG,SAAAA,EAACC,EAAA,CAAc,UAAWG,EAAW,UAAWc,EAAK,KAAM,GADrDM,CAEV,CAEP,EACGxB,EAAAD,EAAA,EAAE,EAEd,CAER,EAEO0B,EAAQvB","names":["init_esm_shims","useEffect","useState","shallowEqual","dynamic","Fragment","jsx","AnimatedEmoji","ExplodeEmoji","codes","direction","emojiBucket","setEmojiBucket","useState","shuffledEmojiBucket","setShuffledEmojiBucket","timeoutIds","setTimeoutIds","config","useAppSelector","RetrievalAndShuffle","ShuffleEmoji","a","b","item","i","useEffect","timeoutId","prev","id","index","ExplodeEmoji_default"]}