Merge branch 'dev' into optimize-spline-helper

packages/client-core/src/admin/common/Project/ProjectFields.tsx

@@ -233,8 +233,8 @@ const ProjectFields = ({
       ProjectUpdateService.setSourceProjectName(project.name, '')
       return
     }
-    const valueRegex = new RegExp(`^${value}`, 'g')
-    let matchingCommit = commitData.find((data) => valueRegex.test(data.commitSHA))
+
+    let matchingCommit = commitData.find((data) => data.commitSHA.startsWith(value))
     if (!matchingCommit) {
       const commitResponse = (await ProjectService.checkUnfetchedCommit({
         url: projectUpdateStatus.value.sourceURL,
@@ -251,7 +251,7 @@ const ProjectFields = ({
             resolve(null)
           }, 100)
         })
-        matchingCommit = commitData.find((data) => valueRegex.test(data.commitSHA))
+        matchingCommit = commitData.find((data) => data.commitSHA.startsWith(value))
       }
     }
     ProjectUpdateService.setSourceProjectName(project.name, matchingCommit?.projectName || '')

packages/client-core/src/admin/components/locations/AddEditLocationModal.tsx

@@ -49,7 +49,13 @@ const locationTypeOptions = [
   { label: 'Showroom', value: 'showroom' }
 ]
 
-export default function AddEditLocationModal({ location }: { location?: LocationType }) {
+export default function AddEditLocationModal({
+  location,
+  sceneID
+}: {
+  location?: LocationType
+  sceneID?: string | null
+}) {
   const { t } = useTranslation()
 
   const locationMutation = useMutation(locationPath)
@@ -59,7 +65,8 @@ export default function AddEditLocationModal({ location }: { location?: Location
 
   const name = useHookstate(location?.name || '')
   const maxUsers = useHookstate(location?.maxUsersPerInstance || 20)
-  const scene = useHookstate(location?.sceneId || '')
+
+  const scene = useHookstate((location ? location.sceneId : sceneID) ?? '')
   const videoEnabled = useHookstate<boolean>(location?.locationSetting.videoEnabled || true)
   const audioEnabled = useHookstate<boolean>(location?.locationSetting.audioEnabled || true)
   const screenSharingEnabled = useHookstate<boolean>(location?.locationSetting.screenSharingEnabled || true)

packages/client-core/src/admin/components/project/AddEditProjectModal.tsx

@@ -169,8 +169,8 @@ export default function AddEditProjectModal({
       ProjectUpdateService.setSourceProjectName(project.name, '')
       return
     }
-    const valueRegex = new RegExp(`^${commitValue}`, 'g')
-    let matchingCommit = commitData.find((data) => valueRegex.test(data.commitSHA))
+
+    let matchingCommit = commitData.find((data) => data.commitSHA.startsWith(commitValue))
     if (!matchingCommit) {
       const commitResponse = (await ProjectService.checkUnfetchedCommit({
         url: projectUpdateStatus.value.sourceURL,
@@ -187,7 +187,7 @@ export default function AddEditProjectModal({
             resolve(null)
           }, 100)
         })
-        matchingCommit = commitData.find((data) => valueRegex.test(data.commitSHA))
+        matchingCommit = commitData.find((data) => data.commitSHA.startsWith(commitValue))
       }
     }
     ProjectUpdateService.setSourceProjectName(project.name, matchingCommit?.projectName || '')

packages/client-core/src/admin/components/settings/tabs/client.tsx

@@ -27,8 +27,8 @@ import React, { forwardRef, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { HiMinus, HiPlusSmall } from 'react-icons/hi2'
 
-import { ClientSettingType } from '@etherealengine/common/src/schema.type.module'
-import { getMutableState, NO_PROXY, none, useHookstate, useMutableState } from '@etherealengine/hyperflux'
+import { clientSettingPath, ClientSettingType } from '@etherealengine/common/src/schema.type.module'
+import { NO_PROXY, State, useHookstate } from '@etherealengine/hyperflux'
 import Accordion from '@etherealengine/ui/src/primitives/tailwind/Accordion'
 import Button from '@etherealengine/ui/src/primitives/tailwind/Button'
 import Input from '@etherealengine/ui/src/primitives/tailwind/Input'
@@ -37,8 +37,8 @@ import Select from '@etherealengine/ui/src/primitives/tailwind/Select'
 import Text from '@etherealengine/ui/src/primitives/tailwind/Text'
 import Toggle from '@etherealengine/ui/src/primitives/tailwind/Toggle'
 
-import { AuthState } from '../../../../user/services/AuthService'
-import { AdminClientSettingsState, ClientSettingService } from '../../../services/Setting/ClientSettingService'
+import { Engine } from '@etherealengine/ecs'
+import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 
 const ClientTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRefObject<HTMLDivElement>) => {
   const { t } = useTranslation()
@@ -47,51 +47,25 @@ const ClientTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRef
     loading: false,
     errorMessage: ''
   })
-  const user = useHookstate(getMutableState(AuthState).user)
 
-  const clientSettingState = useMutableState(AdminClientSettingsState)
-  const [clientSetting] = clientSettingState?.client?.get({ noproxy: true }) || []
-  const id = clientSetting?.id
+  const clientSettingQuery = useFind(clientSettingPath)
+  const clientSettings = clientSettingQuery.data[0] ?? null
+  const id = clientSettings?.id
 
-  const settings = useHookstate(clientSetting)
+  const settingsState = useHookstate(null as null | ClientSettingType)
 
   useEffect(() => {
-    if (user?.id?.value != null && clientSettingState?.updateNeeded?.value === true) {
-      ClientSettingService.fetchClientSettings()
+    if (clientSettingQuery) {
+      state.set({ loading: clientSettingQuery.status === 'pending', errorMessage: clientSettingQuery.error })
     }
-  }, [user?.id?.value, clientSettingState?.updateNeeded?.value])
+  }, [clientSettingQuery])
 
   useEffect(() => {
-    if (clientSetting) {
-      settings.merge({
-        logo: clientSetting?.logo,
-        title: clientSetting?.title,
-        shortTitle: clientSetting?.shortTitle,
-        startPath: clientSetting?.startPath || '/',
-        appTitle: clientSetting?.appTitle,
-        appSubtitle: clientSetting?.appSubtitle,
-        appDescription: clientSetting?.appDescription,
-        appBackground: clientSetting?.appBackground,
-        appSocialLinks: JSON.parse(JSON.stringify(clientSetting?.appSocialLinks)) || [],
-        appleTouchIcon: clientSetting?.appleTouchIcon,
-        icon192px: clientSetting?.icon192px,
-        icon512px: clientSetting?.icon512px,
-        siteManifest: clientSetting?.siteManifest,
-        safariPinnedTab: clientSetting?.safariPinnedTab,
-        favicon: clientSetting?.favicon,
-        webmanifestLink: clientSetting?.webmanifestLink,
-        swScriptLink: clientSetting?.swScriptLink,
-        favicon16px: clientSetting?.favicon16px,
-        favicon32px: clientSetting?.favicon32px,
-        siteDescription: clientSetting?.siteDescription,
-        key8thWall: clientSetting?.key8thWall,
-        privacyPolicy: clientSetting?.privacyPolicy,
-        homepageLinkButtonEnabled: clientSetting?.homepageLinkButtonEnabled,
-        homepageLinkButtonRedirect: clientSetting?.homepageLinkButtonRedirect,
-        homepageLinkButtonText: clientSetting?.homepageLinkButtonText
-      })
+    if (clientSettings) {
+      settingsState.set(clientSettings)
+      state.set({ loading: false, errorMessage: '' })
     }
-  }, [clientSettingState?.updateNeeded?.value])
+  }, [clientSettings])
 
   const codecMenu = [
     {
@@ -130,24 +104,32 @@ const ClientTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRef
   const handleSubmit = (event) => {
     state.loading.set(true)
     event.preventDefault()
-    console.log(settings.get(NO_PROXY))
-    settings.merge({
-      createdAt: none,
-      updatedAt: none
-    })
-    ClientSettingService.patchClientSetting(settings.value as ClientSettingType, id)
+    const newSettings = {
+      ...settingsState.get(NO_PROXY),
+      createdAt: undefined!,
+      updatedAt: undefined!
+    } as any as ClientSettingType
+    Engine.instance.api
+      .service(clientSettingPath)
+      .patch(id, newSettings)
       .then(() => {
         state.set({ loading: false, errorMessage: '' })
+        clientSettingQuery.refetch()
       })
       .catch((e) => {
         state.set({ loading: false, errorMessage: e.message })
       })
   }
 
   const handleCancel = () => {
-    settings.set(clientSetting)
+    settingsState.set(clientSettings)
   }
 
+  if (!settingsState.value)
+    return <LoadingView fullScreen className="block h-12 w-12" title={t('common:loader.loading')} />
+
+  const settings = settingsState as State<ClientSettingType>
+
   return (
     <Accordion
       title={t('admin:components.setting.client.header')}
@@ -292,14 +274,14 @@ const ClientTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRef
         <Input
           className="col-span-1"
           label={t('admin:components.setting.url')}
-          value={clientSetting?.url || ''}
+          value={clientSettings?.url || ''}
           disabled
         />
 
         <Input
           className="col-span-1"
           label={t('admin:components.setting.releaseName')}
-          value={clientSetting?.releaseName || ''}
+          value={clientSettings?.releaseName || ''}
           disabled
         />
 

packages/client-core/src/common/services/AppThemeState.ts

@@ -27,7 +27,6 @@ import { defaultThemeSettings, getCurrentTheme } from '@etherealengine/common/sr
 import { ClientThemeOptionsType } from '@etherealengine/common/src/schema.type.module'
 import { defineState, getMutableState, getState, useMutableState } from '@etherealengine/hyperflux'
 
-import { AdminClientSettingsState } from '../../admin/services/Setting/ClientSettingService'
 import { AuthState } from '../../user/services/AuthService'
 
 /** @deprected this is the thene for mui pages, it will be replaced with ThemeService / ThemeState */
@@ -70,9 +69,5 @@ export const getAppTheme = () => {
 
   const authState = getState(AuthState)
   const theme = getCurrentTheme(authState.user?.userSetting?.themeModes)
-  const clientSettingState = getState(AdminClientSettingsState)
-  const themeSettings = clientSettingState?.client?.[0]?.themeSettings
-  if (themeSettings) return themeSettings[theme]
-
   return defaultThemeSettings[theme]
 }

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

@@ -70,7 +70,13 @@ export const RouterState = defineState({
 export type CustomRoute = {
   route: string
   component: ReturnType<typeof lazy>
-  props: any
+  componentProps?: {
+    [x: string]: any
+  }
+  props?: {
+    [x: string]: any
+    exact?: boolean
+  }
 }
 
 /**
@@ -110,5 +116,5 @@ export const useCustomRoutes = () => {
     })
   }, [])
 
-  return customRoutes.get(NO_PROXY)
+  return customRoutes.get(NO_PROXY) as CustomRoute[]
 }

packages/client-core/src/components/LoadWebappInjection.tsx

@@ -23,16 +23,26 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
+import config from '@etherealengine/common/src/config'
+import { clientSettingPath } from '@etherealengine/common/src/schema.type.module'
 import { NO_PROXY } from '@etherealengine/hyperflux'
 import { loadWebappInjection } from '@etherealengine/projects/loadWebappInjection'
+import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 import LoadingView from '@etherealengine/ui/src/primitives/tailwind/LoadingView'
 import { useHookstate } from '@hookstate/core'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
-export const LoadWebappInjection = (props) => {
+export const LoadWebappInjection = (props: { children: React.ReactNode }) => {
   const { t } = useTranslation()
 
+  const clientSettingQuery = useFind(clientSettingPath)
+  const clientSettings = clientSettingQuery.data[0] ?? null
+  useEffect(() => {
+    config.client.key8thWall = clientSettings?.key8thWall
+    config.client.mediaSettings = clientSettings?.mediaSettings
+  }, [clientSettings])
+
   const projectComponents = useHookstate(null as null | any[])
 
   useEffect(() => {

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

@@ -42,7 +42,7 @@ import {
   toggleWebcamPaused
 } from '@etherealengine/client-core/src/transports/SocketWebRTCClientFunctions'
 import { AuthState } from '@etherealengine/client-core/src/user/services/AuthService'
-import { UserName, userPath } from '@etherealengine/common/src/schema.type.module'
+import { UserName, clientSettingPath, userPath } from '@etherealengine/common/src/schema.type.module'
 import { useExecute } from '@etherealengine/ecs'
 import { Engine } from '@etherealengine/ecs/src/Engine'
 import { AudioState } from '@etherealengine/engine/src/audio/AudioState'
@@ -59,7 +59,7 @@ import {
   useMutableState
 } from '@etherealengine/hyperflux'
 import { NetworkState, VideoConstants } from '@etherealengine/network'
-import { useGet } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
+import { useFind, useGet } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 import { isMobile } from '@etherealengine/spatial/src/common/functions/isMobile'
 import { drawPoseToCanvas } from '@etherealengine/ui/src/pages/Capture'
 import Icon from '@etherealengine/ui/src/primitives/mui/Icon'
@@ -68,7 +68,6 @@ import Slider from '@etherealengine/ui/src/primitives/mui/Slider'
 import Tooltip from '@etherealengine/ui/src/primitives/mui/Tooltip'
 import Canvas from '@etherealengine/ui/src/primitives/tailwind/Canvas'
 
-import { AdminClientSettingsState } from '../../admin/services/Setting/ClientSettingService'
 import { MediaStreamState } from '../../transports/MediaStreams'
 import { PeerMediaChannelState, PeerMediaStreamInterface } from '../../transports/PeerMediaChannelState'
 import { ConsumerExtension, SocketWebRTCClientNetwork } from '../../transports/SocketWebRTCClientFunctions'
@@ -491,6 +490,9 @@ export const UserMediaWindow = ({ peerID, type }: Props): JSX.Element => {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const canvasCtxRef = useRef<CanvasRenderingContext2D>()
 
+  const clientSettingQuery = useFind(clientSettingPath)
+  const clientSetting = clientSettingQuery.data[0]
+
   useDrawMocapLandmarks(videoElement, canvasCtxRef, canvasRef, peerID)
 
   useEffect(() => {
@@ -517,8 +519,7 @@ export const UserMediaWindow = ({ peerID, type }: Props): JSX.Element => {
     const encodings = videoStream.rtpParameters.encodings
 
     const immersiveMedia = getMutableState(MediaSettingsState).immersiveMedia
-    const clientSettingState = getMutableState(AdminClientSettingsState)
-    const { maxResolution } = clientSettingState.client[0].mediaSettings.video.value
+    const { maxResolution } = clientSetting.mediaSettings.video
     const resolution = VideoConstants.VIDEO_CONSTRAINTS[maxResolution] || VideoConstants.VIDEO_CONSTRAINTS.hd
     if (isPiP || immersiveMedia.value) {
       let maxLayer