client-web/build/static/js/593.e5e5b9c4.chunk.js.map
{"version":3,"file":"static/js/593.e5e5b9c4.chunk.js","mappings":"uPASMA,EAAiB,SAAH,GAQb,IAPLC,EAAG,EAAHA,IACAC,EAAQ,EAARA,SACAC,EAAO,EAAPA,QAMA,OACE,UAAC,IAAG,CACFC,GAAI,CACFC,gBAAgB,OAAD,OAASJ,EAAG,KAC3BK,MAAO,IACPC,OAAQ,IACRC,aAAc,OACdC,QAAS,OACTC,eAAgB,SAChBC,WAAY,SACZC,SAAU,YACV,UAEDV,IACC,SAAC,IAAe,CACdE,GAAI,CACFQ,SAAU,WACVC,IAAK,MACLC,KAAM,MACNC,UAAW,wBACXC,OAAQ,OAEVC,SAAU,WAGd,gBACEd,QAASA,EACTe,MAAO,CACLC,QAASjB,EAAW,GAAM,EAC1BK,OAAQ,OACRD,MAAO,OACPc,gBAAiB,QACjBC,OAAQ,eAKlB,EAkDA,UA9CsD,SAAH,IAAY,UAC7D,IAAQC,GAAYC,EAAAA,EAAAA,MAAZD,QACR,GAA0CE,EAAAA,EAAAA,UAAS,GAAE,eAA9CC,EAAa,KAAEC,EAAgB,KAC/BC,GAAgBC,EAAAA,EAAAA,KAAhBD,aACDE,GAAcC,EAAAA,EAAAA,IAAc,SAACC,GAAK,OACtCA,EAAMC,cAAcC,MAAK,SAACC,GAAI,OAAKA,EAAKC,MAAQb,CAAO,GAAC,IAe1D,OACE,SAAC,IAAS,CACRc,SAAS,KACThC,GAAI,CACFG,OAAQ,qBACRD,MAAO,OACPG,QAAS,OACTC,eAAgB,SAChB2B,QAAS,UACT,UAEF,SAAC,IAAG,CAACjC,GAAI,CAAEK,QAAS,OAAQ6B,IAAK,OAAQC,SAAU,QAAS,SACzDC,EAAAA,GAAAA,KAAgC,SAACN,EAAMO,GACtC,OACE,SAACzC,EAAc,CACbG,QAAS,kBA5BK,SAACuC,GACzBhB,EAAiBgB,GACjB,IAAMC,EAAaH,EAAAA,GAA4BE,GACzCE,EAActB,EAAQuB,MAAM,KAAK,GACvCC,EAAAA,GAAAA,aACEF,EACAf,EAAYkB,eACZJ,EAAWK,MACX,cAEFrB,EAAa,UAAW,wCAC1B,CAiB2BsB,CAAkBR,EAAE,EACnCvC,SAAUuB,IAAkBgB,EAE5BxC,IAAKiC,EAAKc,OADLd,EAAKc,MAIhB,OAIR,C,4BCtGIE,EAAyBC,EAAQ,OAKrCC,EAAQ,OAAU,EAElB,IAAIC,EAAiBH,EAAuBC,EAAQ,QAEhDG,EAAcH,EAAQ,OAEtBI,GAAW,EAAIF,EAAeG,UAAuB,EAAIF,EAAYG,KAAK,OAAQ,CACpFC,EAAG,yHACD,eAEJN,EAAQ,EAAUG,C","sources":["pages/ChatRoomDetails/ChangeBackground.tsx","../node_modules/@mui/icons-material/CheckCircle.js"],"sourcesContent":["import React, { useState } from \"react\";\nimport { useParams } from \"react-router\";\nimport { Box, Container } from \"@mui/material\";\nimport { defaultChatBackgroundThemes } from \"../../config/config\";\nimport { useStoreState } from \"../../store\";\nimport { useSnackbar } from \"../../context/SnackbarContext\";\nimport CheckCircleIcon from \"@mui/icons-material/CheckCircle\";\nimport xmpp from \"../../xmpp\";\n\nconst BackgroundCard = ({\n url,\n selected,\n onClick,\n}: {\n url: string;\n selected: boolean;\n onClick: () => void;\n}) => {\n return (\n <Box\n sx={{\n backgroundImage: `url(${url})`,\n width: 200,\n height: 400,\n borderRadius: \"10px\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n position: \"relative\",\n }}\n >\n {selected && (\n <CheckCircleIcon\n sx={{\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n transform: \"translate(-50%, -50%)\",\n zIndex: 10111,\n }}\n fontSize={\"large\"}\n />\n )}\n <div\n onClick={onClick}\n style={{\n opacity: selected ? 0.4 : 0,\n height: \"100%\",\n width: \"100%\",\n backgroundColor: \"white\",\n cursor: \"pointer\",\n }}\n />\n </Box>\n );\n};\n\nexport interface IChangeBackground {}\n\nconst ChangeBackground: React.FC<IChangeBackground> = ({}) => {\n const { roomJID } = useParams<{ roomJID: string }>();\n const [selectedIndex, setSelectedIndex] = useState(0);\n const {showSnackbar} = useSnackbar()\n const currentRoom = useStoreState((state) =>\n state.userChatRooms.find((item) => item.jid === roomJID)\n );\n const onBackgroundClick = (index: number) => {\n setSelectedIndex(index);\n const background = defaultChatBackgroundThemes[index];\n const roomAddress = roomJID.split(\"@\")[0];\n xmpp.setRoomImage(\n roomAddress,\n currentRoom.room_thumbnail,\n background.value,\n \"background\"\n );\n showSnackbar('success', 'Success! The chat background was set.')\n };\n\n return (\n <Container\n maxWidth=\"xl\"\n sx={{\n height: \"calc(100vh - 68px)\",\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"center\",\n padding: '10px 0'\n }}\n >\n <Box sx={{ display: \"flex\", gap: \"10px\", flexWrap: \"wrap\" }}>\n {defaultChatBackgroundThemes.map((item, i) => {\n return (\n <BackgroundCard\n onClick={() => onBackgroundClick(i)}\n selected={selectedIndex === i}\n key={item.value}\n url={item.value}\n />\n );\n })}\n </Box>\n </Container>\n );\n};\nexport default ChangeBackground;\n","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _createSvgIcon = _interopRequireDefault(require(\"./utils/createSvgIcon\"));\n\nvar _jsxRuntime = require(\"react/jsx-runtime\");\n\nvar _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)(\"path\", {\n d: \"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\"\n}), 'CheckCircle');\n\nexports.default = _default;"],"names":["BackgroundCard","url","selected","onClick","sx","backgroundImage","width","height","borderRadius","display","justifyContent","alignItems","position","top","left","transform","zIndex","fontSize","style","opacity","backgroundColor","cursor","roomJID","useParams","useState","selectedIndex","setSelectedIndex","showSnackbar","useSnackbar","currentRoom","useStoreState","state","userChatRooms","find","item","jid","maxWidth","padding","gap","flexWrap","defaultChatBackgroundThemes","i","index","background","roomAddress","split","xmpp","room_thumbnail","value","onBackgroundClick","_interopRequireDefault","require","exports","_createSvgIcon","_jsxRuntime","_default","default","jsx","d"],"sourceRoot":""}