dappros/ethora

{"version":3,"file":"static/js/593.9d706f5f.chunk.js","mappings":"sPASMA,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,EAAAA,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":""}