diff --git a/package-lock.json b/package-lock.json index f81de731e..16ec62b19 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,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", @@ -4608,6 +4609,59 @@ "react": ">=16" } }, + "node_modules/@mux/mux-player": { + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/@mux/mux-player/-/mux-player-2.9.1.tgz", + "integrity": "sha512-TAyoUSPTV0IXWGMOknL6O+IeGSEJ8aS154DzyzqZgdd3zDJHM8JpkyNHgtowatMHT2lB6h+qMtWfp4u3ijpo2A==", + "dependencies": { + "@mux/mux-video": "0.20.2", + "@mux/playback-core": "0.25.2", + "media-chrome": "~3.2.5" + } + }, + "node_modules/@mux/mux-player-react": { + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/@mux/mux-player-react/-/mux-player-react-2.9.1.tgz", + "integrity": "sha512-1BpMs1J7P+d+/QCf9/mkTk/NPYR6sOskR4Ih0uFZjDAqNUN7/C9Q0FEJ6hF3sFXwAXo50RhnfCzsC5uYx3QHbA==", + "dependencies": { + "@mux/mux-player": "2.9.1", + "@mux/playback-core": "0.25.2", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18 || ^19", + "react": "^17.0.2 || ^18 || ^19", + "react-dom": "^17.0.2 || ^18 || ^19" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@mux/mux-video": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/@mux/mux-video/-/mux-video-0.20.2.tgz", + "integrity": "sha512-CqkK9EZZWdQE4U62JKlmWDskirT+D9C4suh2tSqKb2CA/0S4ybbbrVWcCKF7xfadUacfKO1yPsOKbe46F6phVQ==", + "dependencies": { + "@mux/playback-core": "0.25.2", + "castable-video": "~1.0.9", + "custom-media-element": "~1.3.1", + "media-tracks": "~0.3.2" + } + }, + "node_modules/@mux/playback-core": { + "version": "0.25.2", + "resolved": "https://registry.npmjs.org/@mux/playback-core/-/playback-core-0.25.2.tgz", + "integrity": "sha512-vrBbCgLHwmPpVxF0QGj+sXHUVXSxgDJJhVm8pxPXEkbw0vjPNHTXgAd/Ty6JA0vZ0ZjoQuAa17AxJ+c02JYeWQ==", + "dependencies": { + "hls.js": "~1.5.11", + "mux-embed": "~5.2.0" + } + }, "node_modules/@ndelangen/get-tarball": { "version": "3.0.9", "resolved": "https://registry.npmjs.org/@ndelangen/get-tarball/-/get-tarball-3.0.9.tgz", @@ -11605,6 +11659,14 @@ "node": ">=4" } }, + "node_modules/castable-video": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/castable-video/-/castable-video-1.0.10.tgz", + "integrity": "sha512-tJgUv+8/zE191y8EKojvB0eKIyKA9obIttd6Wpdm6x2qBmuwZ7wDgzVCSmf5cN2v9jBiuu0s7O5poz8a8cFX/w==", + "dependencies": { + "custom-media-element": "~1.3.2" + } + }, "node_modules/chai": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/chai/-/chai-4.4.1.tgz", @@ -13023,6 +13085,11 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, + "node_modules/custom-media-element": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/custom-media-element/-/custom-media-element-1.3.2.tgz", + "integrity": "sha512-nDyMobZgoAVqz7mA8rsn7i1/6bjH6N9ab2Ge7LyyNxrvxAq7zQJPg8i3u2VH7wEB+Y1T1+C3/h1G774/D+ZLag==" + }, "node_modules/data-urls": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz", @@ -17011,6 +17078,11 @@ "node": "*" } }, + "node_modules/hls.js": { + "version": "1.5.15", + "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.5.15.tgz", + "integrity": "sha512-6cD7xN6bycBHaXz2WyPIaHn/iXFizE5au2yvY5q9aC4wfihxAr16C9fUy4nxh2a3wOw0fEgLRa9dN6wsYjlpNg==" + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -21777,6 +21849,16 @@ "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", "dev": true }, + "node_modules/media-chrome": { + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/media-chrome/-/media-chrome-3.2.5.tgz", + "integrity": "sha512-tTsgS7x77Bn4p/wca/Si/7A+Q3z9DzKq0SOkroQvrNMXBVyQasMayDcsKg5Ur5NGsymZfttnJi7tXvVr/tPj8g==" + }, + "node_modules/media-tracks": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/media-tracks/-/media-tracks-0.3.3.tgz", + "integrity": "sha512-9P2FuUHnZZ3iji+2RQk7Zkh5AmZTnOG5fODACnjhCVveX1McY3jmCRHofIEI+yTBqplz7LXy48c7fQ3Uigp88w==" + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -22377,6 +22459,11 @@ "multicast-dns": "cli.js" } }, + "node_modules/mux-embed": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/mux-embed/-/mux-embed-5.2.1.tgz", + "integrity": "sha512-NukHw91xeEVDBeXVDBpi2BvXNix7gSuvdtyvOph5yR/ROn1hHbTlcYWoKQyCyJX9frsF00UROEul+S8wPzU3aQ==" + }, "node_modules/mz": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", diff --git a/package.json b/package.json index dac29f6cc..fe3fbad20 100644 --- a/package.json +++ b/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", diff --git a/src/editor/components/Main.js b/src/editor/components/Main.js index 4acb08ad3..49b3dc00d 100644 --- a/src/editor/components/Main.js +++ b/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} /> + { + return ( + + + + ); +}; + +export { IntroModal }; diff --git a/src/editor/components/modals/IntroModal/index.js b/src/editor/components/modals/IntroModal/index.js new file mode 100644 index 000000000..f672383f0 --- /dev/null +++ b/src/editor/components/modals/IntroModal/index.js @@ -0,0 +1 @@ +export { IntroModal } from './IntroModal.component.jsx'; diff --git a/webpack.prod.config.js b/webpack.prod.config.js index da786a613..4a88d7677 100644 --- a/webpack.prod.config.js +++ b/webpack.prod.config.js @@ -7,8 +7,8 @@ const DEPLOY_ENV = process.env.DEPLOY_ENV ?? 'production'; module.exports = { performance: { - maxAssetSize: 1777722, // 1.7 MiB - maxEntrypointSize: 1777722, // 1.7 MiB + maxAssetSize: 2777777, // 2.4 MiB + maxEntrypointSize: 2777777, // 2.4 MiB hints: 'error' }, mode: 'production',