Merge branch 'dev' into michael/IR-2665-triggers

* dev:
  IR-1775-Changes-for-examples (#10387)
  Implement gizmo presets and optimize code (#10257)
  scene name validation on save as and rename (#10347)
  prevent scene name overflow (#10400)
  App core tech debt componentization (#10395)
  add dependency to hierarchy generation that updates with every sourced entity created (#10401)
  hot fix install projects query (#10398)
  Support ReactNode in ModalHeader (#10391)
  [IR-2545] studio: Assets Panel ContextMenu (#10390)
  Removed FullscreenContainer, replaced with fullscreen on document.body (#10352)
  Ir 2564 fix fog (#10394)
  fix regressions

packages/client-core/i18n/en/editor.json

@@ -66,7 +66,8 @@
     "networkError": "Network Error: {{status}}. {{text}}",
     "unknownStatus": "Unknown Status",
     "CORS": "Possibly a CORS error",
-    "urlFetchError": "Failed to fetch \"{{url}}\""
+    "urlFetchError": "Failed to fetch \"{{url}}\"",
+    "invalidSceneName": "Provide a valid scene name"
   },
   "viewport": {
     "title": "Viewport",
@@ -1383,5 +1384,15 @@
   "tabs": {
     "scene-assets": "Assets",
     "project-assets": "Project Assets"
+  },
+  "generatingThumbnails": {
+    "title": "Generating Thumbnails",
+    "amountRemaining": "{{count}} remaining"
+  },
+  "assetMetadata": {
+    "name": "Name",
+    "path": "Path",
+    "type": "Type",
+    "tags": "Tags"
   }
 }

packages/client-core/src/common/services/NotificationService.ts → packages/client-core/src/common/services/NotificationService.tsx

@@ -23,13 +23,15 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import { SnackbarProvider, VariantType } from 'notistack'
+import { SnackbarKey, SnackbarProvider, VariantType, closeSnackbar } from 'notistack'
+import React, { CSSProperties, Fragment, useEffect, useRef } from 'react'
 
 import multiLogger from '@etherealengine/common/src/logger'
 import { AudioEffectPlayer } from '@etherealengine/engine/src/audio/systems/MediaSystem'
-import { defineState, getState } from '@etherealengine/hyperflux'
+import { defineState, getState, useMutableState } from '@etherealengine/hyperflux'
 
-import { defaultAction } from '../components/NotificationActions'
+import Icon from '@etherealengine/ui/src/primitives/mui/Icon'
+import IconButton from '@etherealengine/ui/src/primitives/mui/IconButton'
 
 const logger = multiLogger.child({ component: 'client-core:Notification' })
 
@@ -45,6 +47,15 @@ export type NotificationOptions = {
   actionType?: keyof typeof NotificationActions
 }
 
+export const defaultAction = (key: SnackbarKey, content?: React.ReactNode) => {
+  return (
+    <Fragment>
+      {content}
+      <IconButton onClick={() => closeSnackbar(key)} icon={<Icon type="Close" sx={{ color: 'white' }} />} />
+    </Fragment>
+  )
+}
+
 export const NotificationActions = {
   default: defaultAction
 }
@@ -63,3 +74,22 @@ export const NotificationService = {
     })
   }
 }
+
+export const NotificationSnackbar = (props: { style?: CSSProperties }) => {
+  const notistackRef = useRef<SnackbarProvider>()
+  const notificationstate = useMutableState(NotificationState)
+
+  useEffect(() => {
+    notificationstate.snackbar.set(notistackRef.current)
+  }, [notistackRef.current])
+
+  return (
+    <SnackbarProvider
+      ref={notistackRef as any}
+      maxSnack={7}
+      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+      action={defaultAction}
+      style={props.style}
+    />
+  )
+}

packages/client-core/src/common/services/ThemeService.tsx

@@ -23,7 +23,7 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 
 import { defineState, getMutableState, syncStateWithLocalStorage, useMutableState } from '@etherealengine/hyperflux'
 
@@ -96,7 +96,7 @@ export const ThemeState = defineState({
   extension: syncStateWithLocalStorage(['theme'])
 })
 
-export const ThemeProvider = ({ children }) => {
+export const useThemeProvider = () => {
   const themeState = useMutableState(ThemeState)
 
   useEffect(() => {
@@ -120,6 +120,4 @@ export const ThemeProvider = ({ children }) => {
       }
     }
   }
-
-  return <>{children}</>
 }

packages/client-core/src/components/Fullscreen/index.tsx

@@ -23,29 +23,35 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import React from 'react'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { AudioEffectPlayer } from '@etherealengine/engine/src/audio/systems/MediaSystem'
 import Icon from '@etherealengine/ui/src/primitives/mui/Icon'
 import IconButtonWithTooltip from '@etherealengine/ui/src/primitives/mui/IconButtonWithTooltip'
 
 import { useShelfStyles } from '../Shelves/useShelfStyles'
-import { useFullscreen } from '../useFullscreen'
 import styles from './index.module.scss'
 
 export const Fullscreen = () => {
   const { t } = useTranslation()
-  const [fullScreenActive, setFullScreenActive] = useFullscreen()
+  const [fullScreenActive, setFullScreenActive] = useState(false)
   const { bottomShelfStyle } = useShelfStyles()
+
+  const setFullscreen = (input: boolean) => {
+    setFullScreenActive(input)
+    if (input) document.body.requestFullscreen()
+    else document.exitFullscreen()
+  }
+
   return (
     <div className={styles.fullScreen}>
       {fullScreenActive ? (
         <IconButtonWithTooltip
           title={t('user:menu.exitFullScreen')}
           className={`${styles.btn} ${bottomShelfStyle}`}
           background="white"
-          onClick={() => setFullScreenActive(false)}
+          onClick={() => setFullscreen(false)}
           onPointerUp={() => AudioEffectPlayer.instance.play(AudioEffectPlayer.SOUNDS.ui)}
           onPointerEnter={() => AudioEffectPlayer.instance.play(AudioEffectPlayer.SOUNDS.ui)}
           icon={<Icon type="FullscreenExit" />}
@@ -55,7 +61,7 @@ export const Fullscreen = () => {
           title={t('user:menu.enterFullScreen')}
           className={`${styles.btn} ${bottomShelfStyle}`}
           background="white"
-          onClick={() => setFullScreenActive(true)}
+          onClick={() => setFullscreen(true)}
           onPointerUp={() => AudioEffectPlayer.instance.play(AudioEffectPlayer.SOUNDS.ui)}
           onPointerEnter={() => AudioEffectPlayer.instance.play(AudioEffectPlayer.SOUNDS.ui)}
           icon={<Icon type="ZoomOutMap" />}

packages/client-core/src/common/components/NotificationActions.tsx → packages/client-core/src/components/LoadWebappInjection.tsx

@@ -23,19 +23,32 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import { SnackbarKey, useSnackbar } from 'notistack'
-import React, { Fragment } from 'react'
+import { NO_PROXY } from '@etherealengine/hyperflux'
+import { loadWebappInjection } from '@etherealengine/projects/loadWebappInjection'
+import LoadingView from '@etherealengine/ui/src/primitives/tailwind/LoadingView'
+import { useHookstate } from '@hookstate/core'
+import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 
-import Icon from '@etherealengine/ui/src/primitives/mui/Icon'
-import IconButton from '@etherealengine/ui/src/primitives/mui/IconButton'
+export const LoadWebappInjection = (props) => {
+  const { t } = useTranslation()
 
-export const defaultAction = (key: SnackbarKey, content?: React.ReactNode) => {
-  const { closeSnackbar } = useSnackbar()
+  const projectComponents = useHookstate(null as null | any[])
+
+  useEffect(() => {
+    loadWebappInjection().then((result) => {
+      projectComponents.set(result)
+    })
+  }, [])
+
+  if (!projectComponents.value) return <LoadingView title={t('common:loader.authenticating')} />
 
   return (
-    <Fragment>
-      {content}
-      <IconButton onClick={() => closeSnackbar(key)} icon={<Icon type="Close" sx={{ color: 'white' }} />} />
-    </Fragment>
+    <>
+      {projectComponents.get(NO_PROXY)!.map((Component, i) => (
+        <Component key={i} />
+      ))}
+      {props.children}
+    </>
   )
 }

packages/client-core/src/hooks/useRemoveEngineCanvas.ts

@@ -28,11 +28,11 @@ import { useEffect } from 'react'
 export const useRemoveEngineCanvas = () => {
   useEffect(() => {
     const canvas = document.getElementById('engine-renderer-canvas')!
-    canvas.parentElement?.removeChild(canvas)
+    const parent = canvas.parentElement
+    parent?.removeChild(canvas)
 
     return () => {
-      const body = document.body
-      body.appendChild(canvas)
+      parent?.appendChild(canvas)
     }
   }, [])
 

packages/client-core/src/user/services/AuthService.ts

@@ -66,7 +66,8 @@ import {
   dispatchAction,
   getMutableState,
   getState,
-  syncStateWithLocalStorage
+  syncStateWithLocalStorage,
+  useHookstate
 } from '@etherealengine/hyperflux'
 
 import { API } from '../../API'
@@ -759,3 +760,17 @@ function parseLoginDisplayCredential(credentials) {
 
   return { displayName, displayIcon }
 }
+
+export const useAuthenticated = () => {
+  const authState = useHookstate(getMutableState(AuthState))
+
+  useEffect(() => {
+    AuthService.doLoginAuto()
+  }, [])
+
+  useEffect(() => {
+    Engine.instance.userID = authState.user.id.value
+  }, [authState.user.id])
+
+  return authState.isLoggedIn.value
+}

packages/client/package.json

@@ -63,7 +63,6 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-file-drop": "3.1.6",
-    "react-full-screen": "1.1.1",
     "react-i18next": "11.16.6",
     "react-icons": "^5.0.1",
     "react-json-tree": "^0.18.0",

packages/client/src/engine.tsx

@@ -23,12 +23,11 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import React, { createRef, Suspense } from 'react'
+import React, { Suspense, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { API } from '@etherealengine/client-core/src/API'
-import { FullscreenContainer } from '@etherealengine/client-core/src/components/FullscreenContainer'
-import { LoadingCircle } from '@etherealengine/client-core/src/components/LoadingCircle'
+import { BrowserRouter, history } from '@etherealengine/client-core/src/common/services/RouterService'
 import waitForClientAuthenticated from '@etherealengine/client-core/src/util/wait-for-client-authenticated'
 import { pipeLogs } from '@etherealengine/common/src/logger'
 import { Engine } from '@etherealengine/ecs/src/Engine'
@@ -37,6 +36,7 @@ import { getMutableState } from '@etherealengine/hyperflux'
 import { EngineState } from '@etherealengine/spatial/src/EngineState'
 import { createEngine } from '@etherealengine/spatial/src/initializeEngine'
 
+import LoadingView from '@etherealengine/ui/src/primitives/tailwind/LoadingView'
 import { initializei18n } from './util'
 
 const initializeLogs = async () => {
@@ -54,14 +54,22 @@ initializeBrowser()
 API.createAPI()
 initializeLogs()
 
-export default function ({ children, tailwind = false }): JSX.Element {
-  const ref = createRef()
+export default function ({ children }): JSX.Element {
   const { t } = useTranslation()
-  return !tailwind ? (
-    <FullscreenContainer ref={ref}>
-      <Suspense fallback={<LoadingCircle message={t('common:loader.loadingClient')} />}>{children}</Suspense>
-    </FullscreenContainer>
-  ) : (
-    children
+
+  useEffect(() => {
+    const urlSearchParams = new URLSearchParams(window.location.search)
+    const redirectUrl = urlSearchParams.get('redirectUrl')
+    if (redirectUrl) {
+      history.push(redirectUrl)
+    }
+  }, [])
+
+  return (
+    <>
+      <BrowserRouter history={history}>
+        <Suspense fallback={<LoadingView title={t('common:loader.loadingClient')} />}>{children}</Suspense>
+      </BrowserRouter>
+    </>
   )
 }