Merge pull request #890 from 3DStreet/lock-gltf

lock gltf
3DStreet · Oct 9, 2024 · e7dd5d4 · e7dd5d4
2 parents cb29d33 + 8123c95
commit e7dd5d4
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 66 deletions.
diff --git a/src/editor/components/Main.js b/src/editor/components/Main.js
@@ -24,7 +24,7 @@ import posthog from 'posthog-js';
 THREE.ImageUtils.crossOrigin = '';
 
 const isStreetLoaded = window.location.hash.length;
-const isPaymentModalOpened = window.location.hash.includes('/modal/payment');
+const isPaymentModalOpened = window.location.hash.includes('payment');
 
 // Define the libraries array as a constant outside of the component
 const GOOGLE_MAPS_LIBRARIES = ['places'];

diff --git a/src/editor/components/components/Dropdown/Dropdown.component.jsx b/src/editor/components/components/Dropdown/Dropdown.component.jsx
@@ -88,7 +88,7 @@ const Dropdown = ({
                     return 0;
                   }
                 })
-                .map(({ value, label, disabled, onClick }, index) => (
+                .map(({ value, label, disabled, onClick, proIcon }, index) => (
                   <button
                     type={'button'}
                     tabIndex={0}
@@ -104,7 +104,10 @@ const Dropdown = ({
                     key={value.concat(index.toString())}
                     disabled={disabled}
                   >
-                    <span className={styles.optionItemLabel}>{label}</span>
+                    <span className={styles.optionItemLabel}>
+                      {label}
+                      {proIcon && <div className={styles.badge}>Pro</div>}
+                    </span>
                   </button>
                 ))}
           </div>

diff --git a/src/editor/components/components/Dropdown/Dropdown.module.scss b/src/editor/components/components/Dropdown/Dropdown.module.scss
@@ -26,6 +26,13 @@
     width: 100%;
     transition: all 0.3s;
 
+    .badge {
+      background-color: #774dee;
+      padding: 0px 8px;
+      border-radius: 8px;
+      margin-left: 8px;
+      font-size: 0.775rem;
+    }
     .selector {
       display: flex;
       align-items: center;

diff --git a/src/editor/components/modals/PaymentModal/PaymentModal.component.jsx b/src/editor/components/modals/PaymentModal/PaymentModal.component.jsx
@@ -39,8 +39,8 @@ const PaymentModal = ({ isOpen, onClose }) => {
       )({
         line_items: [{ price: process.env.STRIPE_PRICE_ID, quantity: 1 }],
         mode: 'subscription',
-        success_url: `${location.origin}/#/modal/payment/success`,
-        cancel_url: `${location.origin}/#/modal/payment`,
+        success_url: `${window.location.href.split('?')[0]}?payment=success`,
+        cancel_url: `${window.location.href.split('?')[0]}?payment=cancel`,
         metadata: { userId: currentUser.uid },
         allow_promotion_codes: true,
         subscription_data: {

diff --git a/src/editor/components/modals/ScreenshotModal/ScreenshotModal.component.jsx b/src/editor/components/modals/ScreenshotModal/ScreenshotModal.component.jsx
@@ -18,6 +18,9 @@ import { Button, Dropdown, Input } from '../../components';
 import Toolbar from '../../scenegraph/Toolbar';
 import Modal from '../Modal.jsx';
 import posthog from 'posthog-js';
+import { saveBlob } from '../../../lib/utils';
+import Events from '../../../lib/Events';
+
 // import { loginHandler } from '../SignInModal';
 
 export const uploadThumbnailImage = async (uploadedFirstTime) => {
@@ -120,6 +123,68 @@ const saveScreenshot = async (value) => {
   screenshotEl.setAttribute('screentock', 'takeScreenshot', true);
 };
 
+const filterHelpers = (scene, visible) => {
+  scene.traverse((o) => {
+    if (o.userData.source === 'INSPECTOR') {
+      o.visible = visible;
+    }
+  });
+};
+
+/**
+ * Slugify the string removing non-word chars and spaces
+ * @param  {string} text String to slugify
+ * @return {string}      Slugified string
+ */
+const slugify = (text) => {
+  return text
+    .toString()
+    .toLowerCase()
+    .replace(/\s+/g, '-') // Replace spaces with -
+    .replace(/[^\w-]+/g, '-') // Replace all non-word chars with -
+    .replace(/--+/g, '-') // Replace multiple - with single -
+    .replace(/^-+/, '') // Trim - from start of text
+    .replace(/-+$/, ''); // Trim - from end of text
+};
+
+const getSceneName = (scene) => {
+  return scene.id || slugify(window.location.host + window.location.pathname);
+};
+
+const exportSceneToGLTF = (isPro) => {
+  if (isPro) {
+    try {
+      const sceneName = getSceneName(AFRAME.scenes[0]);
+      const scene = AFRAME.scenes[0].object3D;
+      posthog.capture('export_scene_to_gltf_clicked', {
+        scene_id: STREET.utils.getCurrentSceneId()
+      });
+
+      filterHelpers(scene, false);
+      AFRAME.INSPECTOR.exporters.gltf.parse(
+        scene,
+        function (buffer) {
+          filterHelpers(scene, true);
+          const blob = new Blob([buffer], { type: 'application/octet-stream' });
+          saveBlob(blob, sceneName + '.glb');
+        },
+        function (error) {
+          console.error(error);
+        },
+        { binary: true }
+      );
+      STREET.notify.successMessage('3DStreet scene exported as glTF file.');
+    } catch (error) {
+      STREET.notify.errorMessage(
+        `Error while trying to save glTF file. Error: ${error}`
+      );
+      console.error(error);
+    }
+  } else {
+    Events.emit('openpaymentmodal');
+  }
+};
+
 function ScreenshotModal({ isOpen, onClose }) {
   const storedScreenshot = localStorage.getItem('screenshot');
   const parsedScreenshot = JSON.parse(storedScreenshot);
@@ -153,7 +218,8 @@ function ScreenshotModal({ isOpen, onClose }) {
     {
       value: 'GLB glTF',
       label: 'GLB glTF',
-      onClick: Toolbar.exportSceneToGLTF
+      proIcon: true,
+      onClick: () => exportSceneToGLTF(currentUser?.isPro)
     },
     {
       value: '.3dstreet.json',

diff --git a/src/editor/components/scenegraph/Toolbar.js b/src/editor/components/scenegraph/Toolbar.js
@@ -13,7 +13,6 @@ import {
   Edit24Icon
 } from '../../icons';
 import Events from '../../lib/Events';
-import { saveBlob } from '../../lib/utils';
 import { Button, ProfileButton } from '../components';
 import { uploadThumbnailImage } from '../modals/ScreenshotModal/ScreenshotModal.component.jsx';
 import { sendMetric } from '../../services/ga.js';
@@ -22,34 +21,6 @@ import { UndoRedo } from '../components/UndoRedo';
 import debounce from 'lodash-es/debounce';
 // const LOCALSTORAGE_MOCAP_UI = "aframeinspectormocapuienabled";
 
-function filterHelpers(scene, visible) {
-  scene.traverse((o) => {
-    if (o.userData.source === 'INSPECTOR') {
-      o.visible = visible;
-    }
-  });
-}
-
-function getSceneName(scene) {
-  return scene.id || slugify(window.location.host + window.location.pathname);
-}
-
-/**
- * Slugify the string removing non-word chars and spaces
- * @param  {string} text String to slugify
- * @return {string}      Slugified string
- */
-function slugify(text) {
-  return text
-    .toString()
-    .toLowerCase()
-    .replace(/\s+/g, '-') // Replace spaces with -
-    .replace(/[^\w-]+/g, '-') // Replace all non-word chars with -
-    .replace(/--+/g, '-') // Replace multiple - with single -
-    .replace(/^-+/, '') // Trim - from start of text
-    .replace(/-+$/, ''); // Trim - from end of text
-}
-
 /**
  * Tools and actions.
  */
@@ -352,37 +323,6 @@ export default class Toolbar extends Component {
   //   AFRAME.INSPECTOR.close();
   // }
 
-  static exportSceneToGLTF() {
-    try {
-      sendMetric('SceneGraph', 'exportGLTF');
-      const sceneName = getSceneName(AFRAME.scenes[0]);
-      const scene = AFRAME.scenes[0].object3D;
-      posthog.capture('export_scene_to_gltf_clicked', {
-        scene_id: STREET.utils.getCurrentSceneId()
-      });
-
-      filterHelpers(scene, false);
-      AFRAME.INSPECTOR.exporters.gltf.parse(
-        scene,
-        function (buffer) {
-          filterHelpers(scene, true);
-          const blob = new Blob([buffer], { type: 'application/octet-stream' });
-          saveBlob(blob, sceneName + '.glb');
-        },
-        function (error) {
-          console.error(error);
-        },
-        { binary: true }
-      );
-      STREET.notify.successMessage('3DStreet scene exported as glTF file.');
-    } catch (error) {
-      STREET.notify.errorMessage(
-        `Error while trying to save glTF file. Error: ${error}`
-      );
-      console.error(error);
-    }
-  }
-
   toggleScenePlaying = () => {
     if (this.state.isPlaying) {
       AFRAME.scenes[0].pause();