{"version":3,"sources":["Assets/back-img.jpg","Components/Portfolio/Portfolio.js"],"names":["Portfolio","isWebpSupported","useContext","WebpContextProvider","category","useParams","useState","current","setCurrent","startIndexModal","setStartIndexModal","cat1Image1","setCurrImage","currImages","setCurrImages","setCapName","ytOpen","setYtOpen","currentYt","setCurrentYt","useEffect","projects","map","project","image","src","fallbackImg","el","document","getElementsByTagName","style","overflowY","window","scrollTo","length","portfolio","pData","find","item","name","toLowerCase","console","log","Array","isArray","capitalize","str","toString","split","charAt","toUpperCase","slice","join","cat1Image2","cat1Image3","cat2Image2","cat2Image1","cat2Image3","cat3Image1","cat3Image2","cat3Image3","className","title","type","bgImage2","container","spacing","i","xl","lg","md","sm","xs","onClick","extractYtID","youtube","logo","images","startIndex","onClose","channel","autoplay","isOpen","playsinline","videoId","url","match"],"mappings":"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","file":"static/js/9.114d6e39.chunk.js","sourcesContent":["export default __webpack_public_path__ + \"static/media/back-img.e441dca4.jpg\";","import React, { useRef, useState, useEffect, useContext } from \"react\";\nimport ModalVideo from \"react-modal-video\";\n\nimport \"./Portfolio.css\";\nimport bgImage from \"../../Assets/back-img.jpg\";\nimport bgImage2 from \"../../Assets/fute-bg.jpg\";\n// import Isotope from \"isotope-layout\";\nimport cat1Image1 from \"../../Assets/projects/cat1/cat1-fute-1.webp\";\nimport cat1Image2 from \"../../Assets/projects/cat1/cat1-fute-2.webp\";\nimport cat1Image3 from \"../../Assets/projects/cat1/cat1-fute-3.webp\";\nimport cat1Image4 from \"../../Assets/projects/cat1/cat1-fute-4.webp\";\nimport cat1Image5 from \"../../Assets/projects/cat1/cat1-fute-5.webp\";\n\nimport cat2 from \"../../Assets/projects/cat2.webp\";\nimport cat2Image1 from \"../../Assets/projects/cat1/cat1-fute-6.webp\";\nimport cat2Image2 from \"../../Assets/projects/cat1/cat1-fute-7.webp\";\nimport cat2Image3 from \"../../Assets/projects/cat1/cat1-fute-8.webp\";\nimport cat2Image4 from \"../../Assets/projects/cat1/cat1-fute-9.webp\";\nimport cat2Image5 from \"../../Assets/projects/cat1/cat1-fute-10.webp\";\n\nimport cat4 from \"../../Assets/projects/cat4.webp\";\nimport cat3Image1 from \"../../Assets/projects/cat1/cat1-fute-11.webp\";\nimport cat3Image2 from \"../../Assets/projects/cat1/cat1-fute-12.webp\";\nimport cat3Image3 from \"../../Assets/projects/cat1/cat1-fute-13.webp\";\nimport cat3Image4 from \"../../Assets/projects/cat1/cat1-fute-14.webp\";\nimport cat3Image5 from \"../../Assets/projects/cat1/cat1-fute-15.webp\";\nimport { Grid } from \"@material-ui/core\";\nimport VerticalCard from \"../VerticalCard/VerticalCard\";\nimport Banner from \"../Banner/Banner\";\nimport MetaTags from \"../MetaTags/MetaTags\";\nimport { useParams } from \"react-router-dom\";\nimport { portfolio as pData } from \"../../Static/portfolio\";\nimport Lightbox from \"react-awesome-lightbox\";\nimport \"react-awesome-lightbox/build/style.css\";\nimport { WebpContextProvider } from \"../../App\";\n\nconst Portfolio = () => {\n  // const isoRef = useRef(null);\n  const { isWebpSupported } = useContext(WebpContextProvider);\n\n  // const onClickMenu = (item) => {\n  //   setFilterKey(item);\n  // };\n\n  // const [isotope, setIsotope] = useState(null);\n  // const [filterKey, setFilterKey] = useState(\"*\");\n\n  const { category } = useParams();\n  const [current, setCurrent] = useState({});\n  const [startIndexModal, setStartIndexModal] = useState(null);\n  const [currImage, setCurrImage] = useState(cat1Image1);\n  const [currImages, setCurrImages] = useState([]);\n\n  const [capName, setCapName] = useState(\"\");\n\n  const [ytOpen, setYtOpen] = useState(false);\n  const [currentYt, setCurrentYt] = useState(\"\");\n\n  useEffect(() => {\n    if (current?.projects) {\n      setCurrImages(\n        current?.projects?.map((project) =>\n          isWebpSupported ? project.image || project.src : project.fallbackImg\n        )\n      );\n    }\n  }, [current, isWebpSupported]);\n\n  useEffect(() => {\n    let el = document.getElementsByTagName(\"body\");\n    if (startIndexModal == null) {\n      el[0].style.overflowY = \"auto\";\n    } else {\n      el[0].style.overflowY = \"hidden\";\n    }\n  }, [startIndexModal]);\n\n  useEffect(() => {\n    window.scrollTo(0, 0);\n    if (category && category.length) {\n      const portfolio =\n        pData.find(\n          (item) => item?.name?.toLowerCase() === category.toLowerCase()\n        ) ?? {};\n      console.log({ portfolio });\n      if (Array.isArray(portfolio.projects))\n        setCurrent({\n          ...portfolio,\n          category: portfolio?.projects[0]?.category,\n        });\n      setCapName(capitalize(portfolio.name ?? category));\n    }\n  }, [category]);\n\n  const capitalize = (str = \"portfolio\") => {\n    return str\n      .toString()\n      .split(\" \")\n      .map((item) => item.charAt(0).toUpperCase() + item.slice(1, item.length))\n      .join(\" \");\n  };\n\n  // useEffect(() => {\n  //   console.log({ currImage });\n  // }, [currImage]);\n\n  const images = [\n    {\n      title: \"Project 1\",\n      category: \"Interior\",\n      src: cat1Image1,\n    },\n    {\n      title: \"Project 2\",\n      category: \"Interior\",\n      src: cat1Image2,\n    },\n    {\n      title: \"Project 3\",\n      category: \"Interior\",\n      src: cat1Image3,\n    },\n    {\n      title: \"Project 1\",\n      category: \"Exterior\",\n      src: cat2Image2,\n    },\n    {\n      title: \"Project 2\",\n      category: \"Exterior\",\n      src: cat2Image1,\n    },\n    {\n      title: \"Project 3\",\n      category: \"Exterior\",\n      src: cat2Image3,\n    },\n    {\n      title: \"Project 1\",\n      category: \"Immersive-VR\",\n      src: cat3Image1,\n    },\n    {\n      title: \"Project 2\",\n      category: \"Immersive-VR\",\n      src: cat3Image2,\n    },\n    {\n      title: \"Project 3\",\n      category: \"Immersive-VR\",\n      src: cat3Image3,\n    },\n  ];\n\n  return (\n    <div className=\"container\">\n      <MetaTags title=\"Portfolio\" type=\"other\" />\n      <Banner\n        image={bgImage2}\n        title={current?.category || category || \"Portfolio\"}\n      />\n      <section className={\"portfolio\"}>\n        <Grid container spacing={0}>\n          {current?.projects?.map((project, i) => (\n            <Grid item key={i} xl={6} lg={6} md={6} sm={12} xs={12}>\n              <VerticalCard\n                onClick={() => {\n                  if (project.type === \"yt\") {\n                    setCurrentYt(extractYtID(project.youtube));\n                    setYtOpen(true);\n                    return;\n                  }\n                  setStartIndexModal(i);\n                  setCurrImage(project.image || project.src);\n                  console.log(\"Clicked\");\n                }}\n                type=\"inner\"\n                item={project}\n                logo\n              />\n            </Grid>\n          ))}\n        </Grid>\n      </section>\n      {startIndexModal !== null && (\n        <div className=\"image-modal\">\n          <Lightbox\n            images={currImages}\n            startIndex={startIndexModal}\n            onClose={() => setStartIndexModal(null)}\n          />\n        </div>\n      )}\n\n      <ModalVideo\n        channel=\"youtube\"\n        autoplay\n        isOpen={ytOpen}\n        playsinline\n        videoId={currentYt}\n        onClose={() => {\n          setYtOpen(false);\n          setCurrentYt(null);\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Portfolio;\n\nconst extractYtID = (url) => {\n  return url.match(\n    /(?:youtu\\.be\\/|youtube\\.com(?:\\/embed\\/|\\/v\\/|\\/watch\\?v=|\\/user\\/\\S+|\\/ytscreeningroom\\?v=|\\/sandalsResorts#\\w\\/\\w\\/.*\\/))([^\\/&]{10,12})/\n  )[1];\n};\n"],"sourceRoot":""}