From de56bfa174c8ec966f7a41646ad680eb7d257fb7 Mon Sep 17 00:00:00 2001 From: Rahul Gupta Date: Thu, 3 Oct 2024 16:05:34 -0700 Subject: [PATCH 1/2] lock gltf --- src/editor/components/Main.js | 2 +- .../PaymentModal/PaymentModal.component.jsx | 4 +- .../ScreenshotModal.component.jsx | 67 ++++++++++++++++++- src/editor/components/scenegraph/Toolbar.js | 60 ----------------- 4 files changed, 69 insertions(+), 64 deletions(-) diff --git a/src/editor/components/Main.js b/src/editor/components/Main.js index 758ff0a4..087024c9 100644 --- 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/modals/PaymentModal/PaymentModal.component.jsx b/src/editor/components/modals/PaymentModal/PaymentModal.component.jsx index 92caf637..ca5cdc31 100644 --- 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 index e1b118c4..6f7fec95 100644 --- 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,7 @@ function ScreenshotModal({ isOpen, onClose }) { { value: 'GLB glTF', label: 'GLB glTF', - onClick: Toolbar.exportSceneToGLTF + onClick: () => exportSceneToGLTF(currentUser?.isPro) }, { value: '.3dstreet.json', diff --git a/src/editor/components/scenegraph/Toolbar.js b/src/editor/components/scenegraph/Toolbar.js index d7457c38..045f3f57 100644 --- 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(); From 8123c951ffa0f37b35b12d5bb5f80bd19cb46804 Mon Sep 17 00:00:00 2001 From: Kieran Farr Date: Wed, 9 Oct 2024 10:15:41 -0700 Subject: [PATCH 2/2] add pro icon to gltf option --- .../components/components/Dropdown/Dropdown.component.jsx | 7 +++++-- .../components/components/Dropdown/Dropdown.module.scss | 7 +++++++ .../modals/ScreenshotModal/ScreenshotModal.component.jsx | 1 + 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/editor/components/components/Dropdown/Dropdown.component.jsx b/src/editor/components/components/Dropdown/Dropdown.component.jsx index 3e8acc59..6e803a77 100644 --- 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) => ( ))} diff --git a/src/editor/components/components/Dropdown/Dropdown.module.scss b/src/editor/components/components/Dropdown/Dropdown.module.scss index 384c41ed..8d29432f 100644 --- 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/ScreenshotModal/ScreenshotModal.component.jsx b/src/editor/components/modals/ScreenshotModal/ScreenshotModal.component.jsx index 6f7fec95..76c4af55 100644 --- a/src/editor/components/modals/ScreenshotModal/ScreenshotModal.component.jsx +++ b/src/editor/components/modals/ScreenshotModal/ScreenshotModal.component.jsx @@ -218,6 +218,7 @@ function ScreenshotModal({ isOpen, onClose }) { { value: 'GLB glTF', label: 'GLB glTF', + proIcon: true, onClick: () => exportSceneToGLTF(currentUser?.isPro) }, {