{"version":3,"sources":["Assets/projects/ar-vr-360/arvr-8.webp","Assets/projects/ar-vr-360/arvr-8.jpg","Static/portfolioProjectWise.js","Components/FilterPortfolio/FilterPortfolio.js"],"names":["portfolioData","title","category","image","phoenix","fallbackImg","fallbackPhoenix","link","etv","fallbackEtv","laxmiInfobahn","fallbackLaxmiInfobahn","hilton","fallbackhilton","runwalcentral","fallbackrunwalcentral","lntraintree","fallbacklntraintree","oberoiReality","fallbackoberoiReality","runwalnirvana","fallbackrunwalnirvana","gmInfinite","fallbackgmInfinite","columbia","fallbackcolumbia","arvr1","arvr1fallback","external","arvr2","arvr2fallback","dostiScaleModel","miscScaleModel","filterMenu","name","dataFilter","extractYtID","withRouter","history","isoRef","useRef","useState","isotope","setIsotope","filterKey","setFilterKey","totalImages","length","count","setModalImages","startIndexModal","setStartIndexModal","allImages","setAllImages","ytOpen","setYtOpen","currentYt","setCurrentYt","useParams","useEffect","window","scrollTo","reloadItems","Isotope","current","itemSelector","layoutMode","masonry","columnWidth","map","toLowerCase","arrange","filter","projects","pData","forEach","item","project","push","MetaTags","type","Banner","bgImage2","className","onClick","onClickMenu","ref","i","VerticalCard","useRequire","fitHeight","logo","onLoad","youtube","console","log","images","img","src","fallback","startIndex","onClose","channel","autoplay","isOpen","playsinline","videoId","url","match"],"mappings":"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","file":"static/js/14.bea3daa1.chunk.js","sourcesContent":["export default __webpack_public_path__ + \"static/media/arvr-8.93f6f2a5.webp\";","export default __webpack_public_path__ + \"static/media/arvr-8.66857609.jpg\";","// WEBP\n/* Commercial */\nimport phoenix from \"../Assets/projects/commercial/phoenix/2.webp\";\nimport lntitpark from \"../Assets/projects/commercial/lntitpark/00.webp\";\nimport etv from \"../Assets/projects/commercial/ETV/0.webp\";\nimport laxmiInfobahn from \"../Assets/projects/commercial/laxmiInfobahn/3.webp\";\nimport infosysCampus from \"../Assets/projects/commercial/infosysCampus/1.webp\";\nimport hilton from \"../Assets/projects/commercial/hilton/1.webp\";\n\n/* Residential */\nimport dosti from \"../Assets/projects/residential/dosti/4.webp\";\nimport lntraintree from \"../Assets/projects/residential/lntraintree/1.webp\";\nimport runwalcentral from \"../Assets/projects/residential/runwalcentral/1.webp\";\nimport oberoiReality from \"../Assets/projects/residential/oberoiReality/1.webp\";\nimport runwalnirvana from \"../Assets/projects/residential/runwalnirvana/1.webp\";\nimport gmInfinite from \"../Assets/projects/residential/gmInfinite/1.webp\";\nimport theGreenTerrace from \"../Assets/projects/residential/theGreenTerrace/1.webp\";\nimport columbia from \"../Assets/projects/residential/columbia/1.webp\";\n\n/* 360 */\nimport arvr1 from \"../Assets/projects/ar-vr-360/arvr-1.webp\";\nimport arvr2 from \"../Assets/projects/ar-vr-360/arvr-2.webp\";\nimport arvr3 from \"../Assets/projects/ar-vr-360/arvr-3.webp\";\nimport arvr4 from \"../Assets/projects/ar-vr-360/arvr-4.webp\";\nimport arvr5 from \"../Assets/projects/ar-vr-360/arvr-5.webp\";\nimport arvr8 from \"../Assets/projects/ar-vr-360/arvr-8.webp\";\n\n// JPG\n/* Commercial */\nimport fallbackPhoenix from \"../Assets/projects/commercial/phoenix/2.jpg\";\nimport fallbackLntitpark from \"../Assets/projects/commercial/lntitpark/00.jpg\";\nimport fallbackEtv from \"../Assets/projects/commercial/ETV/0.jpg\";\nimport fallbackLaxmiInfobahn from \"../Assets/projects/commercial/laxmiInfobahn/3.jpg\";\nimport fallbackinfosysCampus from \"../Assets/projects/commercial/infosysCampus/1.jpg\";\nimport fallbackhilton from \"../Assets/projects/commercial/hilton/1.jpg\";\n\n/* Residential */\nimport fallbackdosti from \"../Assets/projects/residential/dosti/4.jpg\";\nimport fallbacklntraintree from \"../Assets/projects/residential/lntraintree/1.jpg\";\nimport fallbackrunwalcentral from \"../Assets/projects/residential/runwalcentral/1.jpg\";\nimport fallbackoberoiReality from \"../Assets/projects/residential/oberoiReality/1.jpg\";\nimport fallbackrunwalnirvana from \"../Assets/projects/residential/runwalnirvana/1.jpg\";\nimport fallbackgmInfinite from \"../Assets/projects/residential/gmInfinite/1.jpg\";\nimport fallbacktheGreenTerrace from \"../Assets/projects/residential/theGreenTerrace/1.jpg\";\nimport fallbackcolumbia from \"../Assets/projects/residential/columbia/1.jpg\";\n\n/* 360 */\nimport arvr1fallback from \"../Assets/projects/ar-vr-360/arvr-1.jpg\";\nimport arvr2fallback from \"../Assets/projects/ar-vr-360/arvr-2.jpg\";\nimport arvr3fallback from \"../Assets/projects/ar-vr-360/arvr-3.jpg\";\nimport arvr4fallback from \"../Assets/projects/ar-vr-360/arvr-4.jpg\";\nimport arvr5fallback from \"../Assets/projects/ar-vr-360/arvr-5.jpg\";\nimport arvr8fallback from \"../Assets/projects/ar-vr-360/arvr-8.jpg\";\n\n/* Scale Model */\nimport dostiScaleModel from \"../Assets/projects/scale-model/dosti/4.jpeg\";\nimport scmodel1 from \"../Assets/projects/scale-model/model1/Picture17.png\";\nimport scmodel2 from \"../Assets/projects/scale-model/model2/Picture5.jpg\";\nimport miscScaleModel from \"../Assets/projects/scale-model/misc/4.jpg\";\n\nexport const portfolioData = [\n  {\n    title: \"Phoenix\",\n    category: \"Commercial\",\n    image: phoenix,\n    fallbackImg: fallbackPhoenix,\n    link: \"phoenix\",\n  },\n  // {\n  //   title: \"L&T IT Park (Bangalore)\",\n  //   category: \"Commercial\",\n  //   image: lntitpark,\n  //   fallbackImg: fallbackLntitpark,\n  //   link: \"lnt-it-park\",\n  // },\n  // {\n  //   title: \"Infosys Campus\",\n  //   category: \"Commercial\",\n  //   image: infosysCampus,\n  //   fallbackImg: fallbackinfosysCampus,\n  //   link: \"infosys-campus\",\n  // },\n  {\n    title: \"ETV\",\n    category: \"Commercial\",\n    image: etv,\n    fallbackImg: fallbackEtv,\n    link: \"etv\",\n  },\n  {\n    title: \"Laxmi Infobahn (Hyderabad)\",\n    category: \"Commercial\",\n    image: laxmiInfobahn,\n    fallbackImg: fallbackLaxmiInfobahn,\n    link: \"laxmi-infobahn\",\n  },\n  {\n    title: \"Hilton Hotel\",\n    category: \"Commercial\",\n    image: hilton,\n    fallbackImg: fallbackhilton,\n    link: \"hilton-hotel\",\n  },\n  {\n    title: \"Runwal Central Park (Pune)\",\n    category: \"Residential\",\n    image: runwalcentral,\n    fallbackImg: fallbackrunwalcentral,\n    link: \"runwal-central\",\n  },\n  {\n    title: \"L&T Raintree Boulevard\",\n    category: \"Residential\",\n    image: lntraintree,\n    fallbackImg: fallbacklntraintree,\n    link: \"lnt-raintree\",\n  },\n  {\n    title: \"Oberoi Reality\",\n    category: \"Residential\",\n    image: oberoiReality,\n    fallbackImg: fallbackoberoiReality,\n    link: \"oberoi-reality\",\n  },\n  {\n    title: \"Runwal Nirvana (Mumbai)\",\n    category: \"Residential\",\n    image: runwalnirvana,\n    fallbackImg: fallbackrunwalnirvana,\n    link: \"runwal-nirvana\",\n  },\n  {\n    title: \"GM Infinite\",\n    category: \"Residential\",\n    image: gmInfinite,\n    fallbackImg: fallbackgmInfinite,\n    link: \"gm-infinite\",\n  },\n  // {\n  //   title: \"The Green Terrace\",\n  //   category: \"Residential\",\n  //   image: theGreenTerrace,\n  //   fallbackImg: fallbacktheGreenTerrace,\n  //   link: \"the-green-terrace\",\n  // },\n  {\n    title: \"Columbia Aaltius\",\n    category: \"Residential\",\n    image: columbia,\n    fallbackImg: fallbackcolumbia,\n    link: \"columbia-aaltius\",\n  },\n  // {\n  //   title: \"Dosti - Kandivali\",\n  //   category: \"Residential\",\n  //   image: dosti,\n  //   fallbackImg: fallbackdosti,\n  //   link: \"dosti\",\n  // },\n  // {\n  //   title: \"Phoenix India\",\n  //   category: \"vr360\",\n  //   image: arvr4,\n  //   fallbackImg: arvr4fallback,\n  //   external: true,\n  //   link: \"http://futeservices.com/Phoenix%20India.html\",\n  // },\n  // {\n  //   title: \"Phoenix\",\n  //   category: \"vr360\",\n  //   image: arvr8,\n  //   fallbackImg: arvr8fallback,\n  //   external: true,\n  //   link: \"http://futeservices.com/phoenixindiapanotour/Phoenix%20India%20Pano.html\",\n  // },\n  {\n    title: \"Enchanta\",\n    category: \"vr360\",\n    image: arvr1,\n    fallbackImg: arvr1fallback,\n    external: true,\n    link: \"http://www.futeservices.com/enchanta/\",\n  },\n  {\n    title: \"Palatia\",\n    category: \"vr360\",\n    image: arvr2,\n    fallbackImg: arvr2fallback,\n    external: true,\n    link: \"http://futeservices.com/palatia/\",\n  },\n  // {\n  //   title: \"Pegasus\",\n  //   category: \"vr360\",\n  //   image: arvr3,\n  //   fallbackImg: arvr3fallback,\n  //   external: true,\n  //   link: \"http://futeservices.com/pegasus%20Final/\",\n  // },\n  // {\n  //   title: \"Flut\",\n  //   category: \"vr360\",\n  //   image: arvr5,\n  //   fallbackImg: arvr5fallback,\n  //   external: true,\n  //   link: \"http://www.futeservices.com/flut/\",\n  // },\n  {\n    title: \"Dosti\",\n    category: \"scale-model\",\n    image: dostiScaleModel,\n    fallbackImg: dostiScaleModel,\n    link: \"dosti-scale-model\",\n  },\n  // {\n  //   title: \"Scale Model\",\n  //   category: \"scale-model\",\n  //   image: scmodel1,\n  //   fallbackImg: scmodel1,\n  //   link: \"scale-model-1\",\n  // },\n  // {\n  //   title: \"Scale Model\",\n  //   category: \"scale-model\",\n  //   image: scmodel2,\n  //   fallbackImg: scmodel2,\n  //   link: \"scale-model-2\",\n  // },\n  {\n    title: \"Other Scale Models\",\n    category: \"scale-model\",\n    image: miscScaleModel,\n    fallbackImg: miscScaleModel,\n    link: \"scale-model-misc\",\n  },\n];\n","import React, { useState, useRef, useEffect } from \"react\";\nimport { Link, withRouter, useParams } from \"react-router-dom\";\nimport Isotope from \"isotope-layout\";\nimport \"./FilterPortfolio.css\";\nimport Banner from \"../Banner/Banner\";\nimport MetaTags from \"../MetaTags/MetaTags\";\nimport bgImage2 from \"../../Assets/fute-bg.jpg\";\nimport Lightbox from \"react-awesome-lightbox\";\nimport \"react-awesome-lightbox/build/style.css\";\nimport { portfolioData } from \"../../Static/portfolioProjectWise\";\nimport { portfolio as pData, allProjects } from \"../../Static/portfolio\";\nimport VerticalCard from \"../VerticalCard/VerticalCard\";\nimport ModalVideo from \"react-modal-video\";\n// import $ from \"jquery\";\n\nconst filterMenu = [\n  // {\n  //   name: \"All\",\n  //   link: \"*\",\n  //   dataFilter: \"*\",\n  // },\n  {\n    name: \"Residential\",\n    link: \"residential\",\n    dataFilter: \"residential\",\n  },\n  {\n    name: \"Commercial\",\n    link: \"commercial\",\n    dataFilter: \"commercial\",\n  },\n  {\n    name: \"Walkthrough\",\n    link: \"walkthrough\",\n    dataFilter: \"walkthrough\",\n    // external: true,\n  },\n  {\n    name: \"Interior\",\n    link: \"interior\",\n    dataFilter: \"interior\",\n    // external: true,\n  },\n  {\n    name: \"360 & VR\",\n    link: \"vr360\",\n    dataFilter: \"vr360\",\n  },\n  {\n    name: \"Scale Model\",\n    link: \"scale-model\",\n    dataFilter: \"scale-model\",\n    // external: true,\n  },\n  {\n    name: \"3D/2D Floor Plan\",\n    link: \"floorplan\",\n    // external: true,\n    dataFilter: \"floorplan\",\n  },\n  {\n    name: \"Drone & Chroma Shoot\",\n    link: \"drone-shoot\",\n    dataFilter: \"drone-shoot\",\n    // external: true,\n  },\n];\n\nconst FilterPortfolio = ({ history }) => {\n  const isoRef = useRef(null);\n\n  const [isotope, setIsotope] = useState(null);\n  const [filterKey, setFilterKey] = useState(\"residential\");\n  const totalImages = portfolioData.length;\n  const [count, setCount] = useState(0);\n  const [modalOpen, setModalOpen] = useState(false);\n  const [modalImages, setModalImages] = useState([]);\n  const [startIndexModal, setStartIndexModal] = useState(null);\n\n  const [allImages, setAllImages] = useState([]);\n\n  const [ytOpen, setYtOpen] = useState(false);\n  const [currentYt, setCurrentYt] = useState(\"\");\n\n  const [current, setCurrent] = useState({});\n\n  const { category } = useParams();\n\n  const onClickMenu = (item) => {\n    setFilterKey(item);\n  };\n\n  useEffect(() => {\n    window.scrollTo(0, 0);\n  }, []);\n\n  useEffect(() => {\n    // if (count === totalImages) {\n    //   if (loading) setLoading(false);\n    if (isotope) {\n      isotope.reloadItems();\n    } else {\n      setIsotope(\n        new Isotope(isoRef.current, {\n          itemSelector: \".grid-item\",\n          // percentPosition: true,\n          layoutMode: \"masonry\",\n          masonry: {\n            columnWidth: \".grid-sizer\",\n          },\n        })\n      );\n    }\n    // }\n  }, [isotope, count, totalImages, category]);\n\n  useEffect(() => {\n    setModalImages(portfolioData.map((image) => image.image));\n    // console.log({ pData });\n  }, []);\n\n  useEffect(() => {\n    if (category?.length) {\n      if (isotope) setFilterKey(category.toLowerCase());\n    }\n  }, [category, isotope]);\n\n  useEffect(() => {\n    if (isotope) {\n      filterKey === \"*\"\n        ? isotope.arrange({ filter: \"*\" })\n        : isotope.arrange({ filter: `.${filterKey}` });\n    }\n  }, [isotope, filterKey]);\n\n  useEffect(() => {\n    let projects = [];\n\n    pData.forEach((item) => {\n      item.projects.forEach((project) => {\n        projects.push(project);\n      });\n    });\n\n    // console.log({ projects });\n\n    // let newData = [];\n    // projects.forEach((newItem) => {\n    //   var img = new Image();\n    //   img.src = newItem.image;\n    //   img.onload = () => {\n    //     newData.push({ ...newItem, height: img.naturalHeight });\n    //   };\n    // });\n\n    // localStorage.setItem(\"fute\", JSON.stringify(newData));\n    // console.log({ newData });\n\n    setAllImages(projects);\n  }, []);\n\n  return (\n    <>\n      <MetaTags title=\"Portfolio\" type=\"other\" />\n      <Banner image={bgImage2} title=\"Portfolio\" />\n      <div className=\"portfolio-menu\">\n        <ul>\n          {filterMenu.map((item) => (\n            <li\n              onClick={() => {\n                if (item?.external) {\n                  history.push(\"/portfolio/\" + item.link);\n                  return;\n                }\n                onClickMenu(item.link);\n              }}\n              className={filterKey === item.dataFilter ? \"is-selected\" : \"\"}\n              data-filter={`.${item.dataFilter}`}\n              key={item.dataFilter}\n            >\n              {item.name}\n            </li>\n          ))}\n        </ul>\n      </div>\n\n      <div ref={isoRef} className=\"grid gallery\">\n        <div className=\"grid-sizer\"></div>\n        {allImages?.map((image, i) => {\n          return (\n            <div\n              key={`${image.category + i}`}\n              className={`grid-item ${image.category?.toLowerCase()}`}\n            >\n              {image?.external ? (\n                <VerticalCard\n                  // onLoad={() => {\n                  //   setCount((curr) => curr + 1);\n                  // }}\n                  type=\"inner\"\n                  item={image}\n                  useRequire\n                  // height=\"auto\"\n                  fitHeight={image.category.toLowerCase() === \"floorplan\"}\n                  logo={image.category.toLowerCase() !== \"floorplan\"}\n                />\n              ) : (\n                <VerticalCard\n                  onLoad={() => {\n                    if (isotope) {\n                      // _debounce(() => isotope.reloadItems(), 500);\n                      // isotope.reloadItems();\n                    }\n                  }}\n                  onClick={() => {\n                    if (image.type === \"yt\") {\n                      setCurrentYt(extractYtID(image.youtube));\n                      setYtOpen(true);\n                      return;\n                    }\n                    setStartIndexModal(i);\n                    // setCurrent(image);\n                    console.log(\"Clicked\");\n                  }}\n                  useRequire\n                  type=\"inner\"\n                  item={image}\n                  // height=\"auto\"\n                  fitHeight={image.category.toLowerCase() === \"floorplan\"}\n                  logo={image.category.toLowerCase() !== \"floorplan\"}\n                />\n              )}\n            </div>\n          );\n        })}\n      </div>\n      {startIndexModal !== null && (\n        <div className=\"image-modal\">\n          <Lightbox\n            images={allImages.map((img) =>\n              img.image ? img.image : img.src || img.fallback\n            )}\n            startIndex={startIndexModal}\n            onClose={() => setStartIndexModal(null)}\n          />\n        </div>\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    </>\n  );\n};\n\nexport default withRouter(FilterPortfolio);\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":""}