Merge pull request #10728 from EtherealEngine/updateIntj25

Update intj25

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

@@ -54,7 +54,7 @@ import Icon from '@etherealengine/ui/src/primitives/mui/Icon'
 import IconButtonWithTooltip from '@etherealengine/ui/src/primitives/mui/IconButtonWithTooltip'
 
 import { FeatureFlags } from '@etherealengine/common/src/constants/FeatureFlags'
-import { FeatureFlagsState } from '@etherealengine/engine/src/FeatureFlagsState'
+import useFeatureFlags from '@etherealengine/engine/src/useFeatureFlags'
 import { isMobile } from '@etherealengine/spatial/src/common/functions/isMobile'
 import { VrIcon } from '../../common/components/Icons/VrIcon'
 import { RecordingUIState } from '../../systems/ui/RecordingsWidgetUI'
@@ -100,8 +100,10 @@ export const MediaIconsBox = () => {
   const xrMode = xrState.sessionMode.value
   const supportsVR = xrState.supportedSessionModes['immersive-vr'].value
 
-  const motionCaptureEnabled = FeatureFlagsState.useEnabled(FeatureFlags.Client.Menu.MotionCapture)
-  const xrEnabled = FeatureFlagsState.useEnabled(FeatureFlags.Client.Menu.XR)
+  const [motionCaptureEnabled, xrEnabled] = useFeatureFlags([
+    FeatureFlags.Client.Menu.MotionCapture,
+    FeatureFlags.Client.Menu.XR
+  ])
 
   useEffect(() => {
     navigator.mediaDevices

packages/client-core/src/networking/NetworkInstanceProvisioning.tsx

@@ -42,7 +42,7 @@ import { ChannelService, ChannelState } from '@etherealengine/client-core/src/so
 import { LocationState } from '@etherealengine/client-core/src/social/services/LocationService'
 import { FeatureFlags } from '@etherealengine/common/src/constants/FeatureFlags'
 import { InstanceID, LocationID, RoomCode } from '@etherealengine/common/src/schema.type.module'
-import { FeatureFlagsState } from '@etherealengine/engine/src/FeatureFlagsState'
+import useFeatureFlags from '@etherealengine/engine/src/useFeatureFlags'
 import { getMutableState, getState, none, useHookstate, useMutableState } from '@etherealengine/hyperflux'
 import { NetworkState } from '@etherealengine/network'
 import { FriendService } from '../social/services/FriendService'
@@ -247,7 +247,7 @@ export const SocialMenus = {
 export const FriendMenus = () => {
   const { t } = useTranslation()
 
-  const socialsEnabled = FeatureFlagsState.useEnabled(FeatureFlags.Client.Menu.Social)
+  const [socialsEnabled] = useFeatureFlags([FeatureFlags.Client.Menu.Social])
 
   useEffect(() => {
     if (!socialsEnabled) return

packages/client-core/src/user/UserUISystem.tsx

@@ -31,7 +31,7 @@ import { PresentationSystemGroup } from '@etherealengine/ecs/src/SystemGroups'
 import { getMutableState, none } from '@etherealengine/hyperflux'
 
 import { FeatureFlags } from '@etherealengine/common/src/constants/FeatureFlags'
-import { FeatureFlagsState } from '@etherealengine/engine/src/FeatureFlagsState'
+import useFeatureFlags from '@etherealengine/engine/src/useFeatureFlags'
 import { InviteService } from '../social/services/InviteService'
 import { PopupMenuState } from './components/UserMenu/PopupMenuService'
 import AvatarCreatorMenu, { SupportedSdks } from './components/UserMenu/menus/AvatarCreatorMenu'
@@ -70,9 +70,11 @@ const reactor = () => {
   const { t } = useTranslation()
   InviteService.useAPIListeners()
 
-  const emotesEnabled = FeatureFlagsState.useEnabled(FeatureFlags.Client.Menu.Emote)
-  const avaturnEnabled = FeatureFlagsState.useEnabled(FeatureFlags.Client.Menu.Avaturn)
-  const rpmEnabled = FeatureFlagsState.useEnabled(FeatureFlags.Client.Menu.ReadyPlayerMe)
+  const [emotesEnabled, avaturnEnabled, rpmEnabled] = useFeatureFlags([
+    FeatureFlags.Client.Menu.Emote,
+    FeatureFlags.Client.Menu.Avaturn,
+    FeatureFlags.Client.Menu.ReadyPlayerMe
+  ])
 
   useEffect(() => {
     const FaceRetouchingNatural = lazy(() => import('@mui/icons-material/FaceRetouchingNatural'))

packages/client-core/src/user/components/UserMenu/menus/AvatarModifyMenu.tsx

@@ -53,7 +53,7 @@ import Icon from '@etherealengine/ui/src/primitives/mui/Icon'
 import IconButton from '@etherealengine/ui/src/primitives/mui/IconButton'
 
 import { FeatureFlags } from '@etherealengine/common/src/constants/FeatureFlags'
-import { FeatureFlagsState } from '@etherealengine/engine/src/FeatureFlagsState'
+import useFeatureFlags from '@etherealengine/engine/src/useFeatureFlags'
 import { UserMenus } from '../../../UserUISystem'
 import { AvatarService } from '../../../services/AvatarService'
 import { PopupMenuServices } from '../PopupMenuService'
@@ -85,8 +85,11 @@ const AvatarModifyMenu = ({ selectedAvatar }: Props) => {
   const [isSaving, setIsSaving] = useState(false)
   const avatarRef = useRef<HTMLInputElement | null>(null)
   const thumbnailRef = useRef<HTMLInputElement | null>(null)
-  const avaturnEnabled = FeatureFlagsState.useEnabled(FeatureFlags.Client.Menu.Avaturn)
-  const rpmEnabled = FeatureFlagsState.useEnabled(FeatureFlags.Client.Menu.ReadyPlayerMe)
+
+  const [avaturnEnabled, rpmEnabled] = useFeatureFlags([
+    FeatureFlags.Client.Menu.Avaturn,
+    FeatureFlags.Client.Menu.ReadyPlayerMe
+  ])
 
   let thumbnailSrc = state.thumbnailUrl
   if (state.thumbnailFile) {

packages/client-core/src/user/components/UserMenu/menus/AvatarSelectMenu.tsx

@@ -48,7 +48,7 @@ import Icon from '@etherealengine/ui/src/primitives/mui/Icon'
 import IconButton from '@etherealengine/ui/src/primitives/mui/IconButton'
 
 import { FeatureFlags } from '@etherealengine/common/src/constants/FeatureFlags'
-import { FeatureFlagsState } from '@etherealengine/engine/src/FeatureFlagsState'
+import useFeatureFlags from '@etherealengine/engine/src/useFeatureFlags'
 import { LoadingCircle } from '../../../../components/LoadingCircle'
 import { UserMenus } from '../../../UserUISystem'
 import { AuthState } from '../../../services/AuthService'
@@ -65,7 +65,7 @@ const AvatarMenu = () => {
   const avatarLoading = useHookstate(false)
   const isUserReady = useHookstate(getMutableState(LocalAvatarState).avatarReady)
 
-  const createAvatarEnabled = FeatureFlagsState.useEnabled(FeatureFlags.Client.Menu.CreateAvatar)
+  const [createAvatarEnabled] = useFeatureFlags([FeatureFlags.Client.Menu.CreateAvatar])
 
   const page = useHookstate(0)
   const selectedAvatarId = useHookstate('' as AvatarID)

packages/common/src/constants/FeatureFlags.ts

@@ -36,9 +36,6 @@ export const FeatureFlags = {
     }
   },
   Studio: {
-    ComponentShelfCategories: {
-      ScenePreviewCameraComponent: 'ir.studio.componentShelfCategories.visual.scenePreviewCameraComponent'
-    },
     Panel: {
       VisualScript: 'ir.editor.panel.visualScript'
     },

packages/editor/src/components/Editor2Container.tsx

@@ -25,7 +25,7 @@ Ethereal Engine. All Rights Reserved.
 
 import { PopoverState } from '@etherealengine/client-core/src/common/services/PopoverState'
 import { staticResourcePath } from '@etherealengine/common/src/schema.type.module'
-import { getMutableState, NO_PROXY, useHookstate, useMutableState } from '@etherealengine/hyperflux'
+import { NO_PROXY, getMutableState, useHookstate, useMutableState } from '@etherealengine/hyperflux'
 import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 import { AssetsPanelTab } from '@etherealengine/ui/src/components/editor/panels/Assets'
 import { FilesPanelTab } from '@etherealengine/ui/src/components/editor/panels/Files'
@@ -54,7 +54,7 @@ import DragLayer from './dnd/DragLayer'
 import { useZendesk } from '@etherealengine/client-core/src/hooks/useZendesk'
 import { FeatureFlags } from '@etherealengine/common/src/constants/FeatureFlags'
 import { EntityUUID } from '@etherealengine/ecs'
-import { FeatureFlagsState } from '@etherealengine/engine'
+import useFeatureFlags from '@etherealengine/engine/src/useFeatureFlags'
 import { EngineState } from '@etherealengine/spatial/src/EngineState'
 import Button from '@etherealengine/ui/src/primitives/tailwind/Button'
 import 'rc-dock/dist/rc-dock.css'
@@ -138,7 +138,7 @@ const EditorContainer = () => {
   const { initialized, isWidgetVisible, openChat } = useZendesk()
   const { t } = useTranslation()
 
-  const visualScriptPanelEnabled = FeatureFlagsState.useEnabled(FeatureFlags.Studio.Panel.VisualScript)
+  const [visualScriptPanelEnabled] = useFeatureFlags([FeatureFlags.Studio.Panel.VisualScript])
 
   useEffect(() => {
     const scene = sceneQuery[0]

packages/editor/src/services/ComponentShelfCategoriesState.ts

@@ -23,9 +23,8 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import { FeatureFlags } from '@etherealengine/common/src/constants/FeatureFlags'
 import { Component } from '@etherealengine/ecs'
-import { FeatureFlagsState, VisualScriptComponent } from '@etherealengine/engine'
+import { VisualScriptComponent } from '@etherealengine/engine'
 import { PositionalAudioComponent } from '@etherealengine/engine/src/audio/components/PositionalAudioComponent'
 import { LoopAnimationComponent } from '@etherealengine/engine/src/avatar/components/LoopAnimationComponent'
 import { GrabbableComponent } from '@etherealengine/engine/src/interaction/components/GrabbableComponent'
@@ -126,9 +125,7 @@ export const ComponentShelfCategoriesState = defineState({
       Settings: [SceneSettingsComponent, RenderSettingsComponent, MediaSettingsComponent, CameraSettingsComponent],
       Visual: [
         EnvMapBakeComponent,
-        ...(FeatureFlagsState.enabled(FeatureFlags.Studio.ComponentShelfCategories.ScenePreviewCameraComponent)
-          ? [ScenePreviewCameraComponent]
-          : []),
+        ScenePreviewCameraComponent,
         SkyboxComponent,
         SplineTrackComponent,
         SplineComponent,

packages/engine/src/FeatureFlagsState.tsx

@@ -24,7 +24,7 @@ Ethereal Engine. All Rights Reserved.
 */
 
 import { featureFlagSettingPath } from '@etherealengine/common/src/schema.type.module'
-import { defineState, getMutableState, useHookstate } from '@etherealengine/hyperflux/functions/StateFunctions'
+import { defineState, getMutableState } from '@etherealengine/hyperflux/functions/StateFunctions'
 import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 import { useEffect } from 'react'
 
@@ -35,10 +35,6 @@ export const FeatureFlagsState = defineState({
     const state = getMutableState(FeatureFlagsState)[flagName].value
     return typeof state === 'boolean' ? state : true
   },
-  useEnabled(flagName: string) {
-    const state = useHookstate(getMutableState(FeatureFlagsState)[flagName]).value
-    return typeof state === 'boolean' ? state : true
-  },
   reactor: () => {
     const featureFlagQuery = useFind(featureFlagSettingPath, { query: { paginate: false } })
 

packages/engine/src/useFeatureFlags.tsx

@@ -0,0 +1,47 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import { featureFlagSettingPath } from '@etherealengine/common/src/schema.type.module'
+import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
+
+const useFeatureFlags = (flagNames: string[]): boolean[] => {
+  const response = useFind(featureFlagSettingPath, {
+    query: {
+      $or: flagNames.map((flagName) => ({ flagName })),
+      paginate: false
+    }
+  })
+
+  if (response.status !== 'success') {
+    return []
+  }
+
+  return flagNames.map((flagName) => {
+    const flag = response.data.find(({ flagName: name }) => name === flagName)
+    return flag ? flag.flagValue : true
+  })
+}
+
+export default useFeatureFlags