{"version":3,"sources":["config/Configs.js","components/ProductList/index.js","components/ARButton/index.js","pages/Product.js","App.js","serviceWorker.js","index.js"],"names":["ProductList","type","imageURL","threekit","config","assetId","name","brand","usdz","productIds","i","push","wxyz","Products","ReactGA","initialize","set","dimension1","pageview","id","grid","xs","sm","md","lg","xl","xxl","dataSource","renderItem","item","to","Item","cover","style","maxHeight","width","isMobile","marginLeft","marginRight","src","Meta","title","description","React","Component","standalone","window","navigator","userAgent","toLowerCase","safari","test","ios","Product","productId","this","props","match","params","product","border","onBack","history","back","className","height","background","console","log","threekitPlayer","authToken","el","document","getElementById","showConfigurator","initialConfiguration","showAR","then","api","a","player","getConfigurator","configurator","Header","Layout","Content","Footer","App","padding","path","component","textAlign","Boolean","location","hostname","ReactDOM","render","serviceWorker","ready","registration","unregister"],"mappings":"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","file":"static/js/main.8f7cb40f.chunk.js","sourcesContent":["const ProductList = {\n  \"1\": {\n    type: \"3D\",\n    imageURL:\n      \"https://solutions-engineering.s3.amazonaws.com/quickdemo/art/art-thumbnail.png\",\n    threekit: \"e0f40f6c-d917-4cf6-b7cb-e176d038bd88\",\n    config: {\n      \"Frame Finish\": { assetId: \"d535f519-b8e1-4f45-bbe1-359b2eacb3d3\" },\n    },\n\n    name: \"Custom Wall Art\",\n    brand: \"Upload art and see the frame on your wall\",\n  },\n  \"2\": {\n    type: \"3D\",\n    imageURL:\n      \"https://solutions-engineering.s3.amazonaws.com/quickdemo/art/tiger-thumb.png\",\n      usdz: \"https://solutions-engineering.s3.amazonaws.com/quickdemo/art/LeTigreTest2.usdz\",\n    threekit: \"0f30301b-0318-433e-a53a-fdc8daba6199\",\n    config: {},\n    name: \"Wall Art\",\n    brand: \"See art on your wall with AR\",\n  },\n};\nexport { ProductList };\n","import React from \"react\";\nimport \"./Product.css\";\nimport \"antd/dist/antd.css\";\nimport { Icon, Card, List, Layout } from \"antd\";\nimport { isBrowser, isMobile } from \"react-device-detect\";\nimport { Link } from \"react-router-dom\";\nimport { ProductList } from \"../../config/Configs.js\";\nimport ReactGA from \"react-ga\";\n\nconst productIds = [];\nfor (var i in ProductList) {\n  productIds.push(i);\n}\n\nclass Products extends React.Component {\n  render() {\n    // ReactGA.initialize('UA-63905846-8');\n    // ReactGA.pageview(\"Landing Page\");\n    ReactGA.initialize(\"UA-63905846-9\");\n    ReactGA.set({ dimension1: \"Art Demo\" });\n    ReactGA.pageview(\"Art AR Experience\");\n    return (\n      <div id=\"product-content\">\n        <List\n          grid={{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 5 }}\n          dataSource={productIds}\n          renderItem={(item) => (\n            <Link to={\"/demo/\" + item}>\n              <List.Item>\n                <Card\n                  cover={\n                    <img\n                      style={{\n                        maxHeight: 175,\n                        width: isMobile ? \"auto\" : \"auto\",\n                        marginLeft: \"auto\",\n                        marginRight: \"auto\",\n                      }}\n                      src={ProductList[item].imageURL}\n                    ></img>\n                  }\n                >\n                  <Card.Meta\n                    title={ProductList[item].name}\n                    description={ProductList[item].brand}\n                  />\n                </Card>\n              </List.Item>\n            </Link>\n          )}\n        ></List>\n      </div>\n    );\n  }\n}\n\nexport default Products;\n","import React from \"react\";\nimport \"antd/dist/antd.css\";\nimport {\n  MobileView,\n  BrowserView,\n  AndroidView,\n  IOSView,\n  isIOS,\n  isAndroid,\n  getUA,\n} from \"react-device-detect\";\nimport { Button } from \"antd\";\nimport \"@google/model-viewer\";\nimport ReactGA from \"react-ga\";\n\nvar wxyz,\n  standalone = window.navigator.standalone,\n  userAgent = window.navigator.userAgent.toLowerCase(),\n  safari = /safari/.test(userAgent),\n  ios = /iphone|ipod|ipad/.test(userAgent);\n\nclass ARButton extends React.Component {\n  state = {};\n\n  componentDidMount() {\n    this.setState({ UA: getUA });\n    if (ios) {\n      if (!standalone && safari) {\n        wxyz = \"safari\";\n        console.log(wxyz);\n        this.setState({ browser: \"safari\" });\n      } else if (!standalone && !safari) {\n        wxyz = \"iOS webview\";\n        console.log(wxyz);\n\n        this.setState({ browser: \"app\" });\n      }\n    } else {\n      if (userAgent.includes(\"wv\")) {\n        wxyz = \"Android webview\";\n        console.log(wxyz);\n\n        this.setState({ browser: \"Android webview\" });\n      } else {\n        wxyz = \"Chrome\";\n        this.setState({ browser: \"Chrome\" });\n      }\n    }\n  }\n\n  render() {\n    let arlink = isIOS ? this.props.usdz : isAndroid ? this.props.glb : null;\n    let glbLink = this.props.glb;\n\n    //const model = document.createElement('model-viewer');\n    //model.src = 'https://threekit.s3.amazonaws.com/glb/BeoSound+2+Silver.glb';\n    //console.log(model);\n    //document.body.appendChild(model);\n    return (\n      <div>\n        <MobileView>\n          <IOSView>\n            {/* <Button onClick={this.clickIos}>View in AR</Button> */}\n\n            {getUA.includes(\"[LinkedInApp]\") ? (\n              <Button disabled={true}>\n                To view in AR open in mobile browser\n              </Button>\n            ) : (\n              <Button onClick={this.clickIos}>View in your space</Button>\n            )}\n\n            {/* {this.state.browser == \"app\" ? (\n            \n            \n            ) : (\n              \n            )} */}\n            <div style={{ display: \"none\" }}>\n              <a href={arlink} rel=\"ar\" id=\"ar-ios-link\">\n                <img\n                  style={{ display: \"none\" }}\n                  src=\"https://venturebeat.com/wp-content/uploads/2019/11/threekit-logo.png?fit=400%2C200&strip=all\"\n                  alt=\"hidden iOs ar link\"\n                />\n              </a>\n            </div>\n          </IOSView>\n          \n        </MobileView>\n\n\n      </div>\n    );\n  }\n\n  clickIos = () => {\n    ReactGA.initialize(\"UA-63905846-9\");\n    ReactGA.set({ dimension1: \"Art Demo\" });\n    ReactGA.pageview(this.props.productName + \" Art Demo\");\n    let alink = document.getElementById(\"ar-ios-link\").click();\n  };\n}\n\nexport default ARButton;\n","import React from \"react\";\n// import './Product.css';\nimport \"antd/dist/antd.css\";\nimport { PageHeader } from \"antd\";\nimport { ProductList } from \"../config/Configs.js\";\nimport {\n  isAndroid,\n} from \"react-device-detect\";\nimport ARButton from \"../components/ARButton\"\nclass Product extends React.Component {\n  render() {\n    const productId = this.props.match.params.productId;\n    const product = ProductList[productId];\n    return (\n      <div>\n        <PageHeader\n          style={{\n            border: \"1px solid rgb(235, 237, 240)\",\n          }}\n          onBack={() => window.history.back()}\n          title={product.name}\n        />\n\n        {product.type == \"3D\" ? (\n          <div className=\"tk-container\">\n            <div\n              id=\"player\"\n              style={{\n                height: 400,\n                width: \"96%\",\n                marginLeft: \"auto\",\n                marginRight: \"auto\",\n                background: \"#F0F2F5\",\n              }}\n            ></div>\n            <br/>\n            {/* <ARButton usdz={product.usdz}/>  */}\n          </div>\n        ) : (\n          <p>This is a 2D product</p>\n        )}\n      </div>\n    );\n  }\n\n  componentDidMount() {\n    const productId = this.props.match.params.productId;\n    const product = ProductList[productId];\n    console.log(\"Component mounted\");\n\n    // Put player here\n    window\n      .threekitPlayer({\n        authToken: \"afa7025e-53a9-483c-a876-b05effa9ca73\",\n        el: document.getElementById(\"player\"),\n        // stageId: '27b9cd7e-2bb2-4a18-b788-160743eb4b33',\n        assetId: `${product.threekit}`,\n        showConfigurator: true,\n        initialConfiguration: product.config,\n        showAR: true,\n      })\n      .then(async (api) => {\n        window.player = api;\n        window.configurator = await api.getConfigurator();\n      });\n  }\n}\n\nexport default Product;\n","import React from 'react';\nimport {Layout, Menu} from 'antd';\nimport Products from './components/ProductList'\nimport './App.css';\nimport { BrowserRouter as Router, Route, Switch } from \"react-router-dom\";\nimport Product from './pages/Product';\nimport ReactGA from 'react-ga';\n\nconst { Header, Content, Footer } = Layout;\nfunction App(props) {\n  return (\n    <div className=\"App\">\n      <Layout className=\"layout\">\n          <Header id=\"header\">         \n          </Header>\n          <Content style={{ padding: '1em'}}>\n          <Router>\n            <Switch>\n              <Route path=\"/demo/:productId\" component={Product}></Route>\n              <Route path=\"/\" component={Products}></Route>\n            </Switch>\n          </Router>\n          </Content>\n          <Footer style={{ textAlign: 'center' }}>Threekit ©2020</Footer>\n      </Layout>\n    </div>\n  );\n}\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n  window.location.hostname === 'localhost' ||\n    // [::1] is the IPv6 localhost address.\n    window.location.hostname === '[::1]' ||\n    // 127.0.0.1/8 is considered localhost for IPv4.\n    window.location.hostname.match(\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n    )\n);\n\nexport function register(config) {\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n    // The URL constructor is available in all browsers that support SW.\n    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n    if (publicUrl.origin !== window.location.origin) {\n      // Our service worker won't work if PUBLIC_URL is on a different origin\n      // from what our page is served on. This might happen if a CDN is used to\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n      return;\n    }\n\n    window.addEventListener('load', () => {\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n      if (isLocalhost) {\n        // This is running on localhost. Let's check if a service worker still exists or not.\n        checkValidServiceWorker(swUrl, config);\n\n        // Add some additional logging to localhost, pointing developers to the\n        // service worker/PWA documentation.\n        navigator.serviceWorker.ready.then(() => {\n          console.log(\n            'This web app is being served cache-first by a service ' +\n              'worker. To learn more, visit https://bit.ly/CRA-PWA'\n          );\n        });\n      } else {\n        // Is not localhost. Just register service worker\n        registerValidSW(swUrl, config);\n      }\n    });\n  }\n}\n\nfunction registerValidSW(swUrl, config) {\n  navigator.serviceWorker\n    .register(swUrl)\n    .then(registration => {\n      registration.onupdatefound = () => {\n        const installingWorker = registration.installing;\n        if (installingWorker == null) {\n          return;\n        }\n        installingWorker.onstatechange = () => {\n          if (installingWorker.state === 'installed') {\n            if (navigator.serviceWorker.controller) {\n              // At this point, the updated precached content has been fetched,\n              // but the previous service worker will still serve the older\n              // content until all client tabs are closed.\n              console.log(\n                'New content is available and will be used when all ' +\n                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n              );\n\n              // Execute callback\n              if (config && config.onUpdate) {\n                config.onUpdate(registration);\n              }\n            } else {\n              // At this point, everything has been precached.\n              // It's the perfect time to display a\n              // \"Content is cached for offline use.\" message.\n              console.log('Content is cached for offline use.');\n\n              // Execute callback\n              if (config && config.onSuccess) {\n                config.onSuccess(registration);\n              }\n            }\n          }\n        };\n      };\n    })\n    .catch(error => {\n      console.error('Error during service worker registration:', error);\n    });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n  // Check if the service worker can be found. If it can't reload the page.\n  fetch(swUrl)\n    .then(response => {\n      // Ensure service worker exists, and that we really are getting a JS file.\n      const contentType = response.headers.get('content-type');\n      if (\n        response.status === 404 ||\n        (contentType != null && contentType.indexOf('javascript') === -1)\n      ) {\n        // No service worker found. Probably a different app. Reload the page.\n        navigator.serviceWorker.ready.then(registration => {\n          registration.unregister().then(() => {\n            window.location.reload();\n          });\n        });\n      } else {\n        // Service worker found. Proceed as normal.\n        registerValidSW(swUrl, config);\n      }\n    })\n    .catch(() => {\n      console.log(\n        'No internet connection found. App is running in offline mode.'\n      );\n    });\n}\n\nexport function unregister() {\n  if ('serviceWorker' in navigator) {\n    navigator.serviceWorker.ready.then(registration => {\n      registration.unregister();\n    });\n  }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(<App />, document.getElementById('root'));\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n"],"sourceRoot":""}