Add intro video

package.json

@@ -28,6 +28,7 @@
   "dependencies": {
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@mux/mux-player-react": "^2.9.1",
     "@react-google-maps/api": "^2.19.3",
     "@stripe/stripe-js": "^3.4.1",
     "aframe-atlas-uvs-component": "^3.0.0",

src/editor/components/Main.js

@@ -18,6 +18,7 @@ import { ScenesModal } from './modals/ScenesModal';
 import { PaymentModal } from './modals/PaymentModal';
 import { SceneEditTitle } from './components/SceneEditTitle';
 import { AddLayerPanel } from './components/AddLayerPanel';
+import { IntroModal } from './modals/IntroModal';
 import posthog from 'posthog-js';
 
 THREE.ImageUtils.crossOrigin = '';
@@ -36,6 +37,7 @@ export default class Main extends Component {
       isProfileModalOpened: false,
       isAddLayerPanelOpen: false,
       isGeoModalOpened: false,
+      isIntroModalOpened: false,
       isScenesModalOpened: !isStreetLoaded,
       isPaymentModalOpened: isPaymentModalOpened,
       sceneEl: AFRAME.scenes[0],
@@ -83,6 +85,10 @@ export default class Main extends Component {
   handleStreetMixURL() {
     const isStreetMix = window.location.hash.includes('streetmix');
     if (isStreetMix) {
+      const shownIntro = localStorage.getItem('shownIntro');
+      if (!shownIntro) {
+        this.setState({ isIntroModalOpened: true });
+      }
       STREET.notify.warningMessage(
         'Hit save if you want to save changes to the scene. Otherwise changes will be lost'
       );
@@ -96,7 +102,7 @@ export default class Main extends Component {
     htmlEditorButton && htmlEditorButton.remove();
 
     this.handleStreetMixURL();
-    window.addEventListener('hashchange', this.handleStreetMixURL);
+    window.addEventListener('hashchange', () => this.handleStreetMixURL());
     Events.on(
       'opentexturesmodal',
       function (selectedTexture, textureOnClose) {
@@ -177,6 +183,11 @@ export default class Main extends Component {
     this.setState({ isGeoModalOpened: false });
   };
 
+  onCloseIntroModal = () => {
+    this.setState({ isIntroModalOpened: false });
+    localStorage.setItem('shownIntro', true);
+  };
+
   onClosePaymentModal = () => {
     window.location.hash = '#';
     this.setState({ isPaymentModalOpened: false });
@@ -280,6 +291,10 @@ export default class Main extends Component {
           isOpen={this.state.isProfileModalOpened}
           onClose={this.onCloseProfileModal}
         />
+        <IntroModal
+          isOpen={this.state.isIntroModalOpened}
+          onClose={this.onCloseIntroModal}
+        />
         <LoadScript
           googleMapsApiKey={firebaseConfig.apiKey}
           libraries={['places']}

src/editor/components/modals/IntroModal/IntroModal.component.jsx

@@ -0,0 +1,18 @@
+import Modal from '../Modal.jsx';
+import MuxPlayer from '@mux/mux-player-react';
+
+const IntroModal = ({ isOpen, onClose }) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="Welcome to 3DStreet">
+      <MuxPlayer
+        streamType="on-demand"
+        playbackId="TSxTjFBKoeTnspoQo02BFBPZXel6Pqtoo"
+        primaryColor="#FFFFFF"
+        secondaryColor="#000000"
+        accentColor="#653CB0"
+      />
+    </Modal>
+  );
+};
+
+export { IntroModal };

src/editor/components/modals/IntroModal/index.js

@@ -0,0 +1 @@
+export { IntroModal } from './IntroModal.component.jsx';