Better handle of bitECS/addons state

Author: keianhzo

src/react-components/room/RoomSettingsSidebar.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { useForm } from "react-hook-form";
 import styles from "./RoomSettingsSidebar.scss";
@@ -61,6 +61,20 @@ export function RoomSettingsSidebar({
     [setValue]
   );
 
+  const [bitECSLoaderEnabled, setBitECSLoaderEnabled] = useState(shouldUseNewLoader());
+  const handleBitECSChange = useCallback(
+    evt => {
+      setValue("user_data.hubs_use_bitecs_based_client", evt.target.checked);
+      setBitECSLoaderEnabled(evt.target.checked);
+      if (!evt.target.checked) {
+        [...addons.entries()].map(([id, _]) => {
+          setValue(`user_data.addons.${id}`, evt.target.checked);
+        });
+      }
+    },
+    [setValue, setBitECSLoaderEnabled]
+  );
+
   return (
     <Sidebar
       title={<FormattedMessage id="room-settings-sidebar.title" defaultMessage="Room Settings" />}
@@ -216,17 +230,18 @@ export function RoomSettingsSidebar({
                 defaultMessage="Enable bitECS based Client"
               />
             }
+            defaultChecked={shouldUseNewLoader()}
+            onChange={handleBitECSChange}
             description={
               <FormattedMessage
                 id="room-settings-sidebar.bitecs-client-activation-description"
                 defaultMessage="Enable or disable the new Client, which is implemented with bitECS for simplicity and extensibility."
               />
             }
-            {...register("user_data.hubs_use_bitecs_based_client")}
           />
         </InputField>
         <InputField label={<FormattedMessage id="room-settings-sidebar.add-ons" defaultMessage="Add-ons" />} fullWidth>
-          {!shouldUseNewLoader() && (
+          {!bitECSLoaderEnabled && (
             <label className={styles.label}>
               <FormattedMessage
                 id="room-settings-sidebar.addons-disabled"
@@ -239,7 +254,7 @@ export function RoomSettingsSidebar({
               key={addon.name}
               id={id}
               label={addon.name}
-              disabled={!shouldUseNewLoader()}
+              disabled={!bitECSLoaderEnabled}
               defaultChecked={isAddonEnabled(APP, id)}
               onChange={handleAddonChange}
               description={addon.description}

src/utils/bit-utils.ts

@@ -5,6 +5,7 @@ import { HubsWorld } from "../app";
 import { findAncestor, findAncestors, traverseSome } from "./three-utils";
 import { EntityID } from "./networking-types";
 import qsTruthy from "./qs_truthy";
+import configs from "./configs";
 
 export type ElOrEid = EntityID | AElement;
 
@@ -91,5 +92,12 @@ export function findChildrenWithComponent(world: HubsWorld, component: Component
 
 const forceNewLoader = qsTruthy("newLoader");
 export function shouldUseNewLoader() {
-  return forceNewLoader || APP.hub?.user_data?.hubs_use_bitecs_based_client;
+  let shouldUseNewLoader = forceNewLoader;
+  if (configs.feature("bitecs_loader") !== undefined) {
+    shouldUseNewLoader ||= configs.feature("bitecs_loader");
+  }
+  if (APP.hub?.user_data?.hubs_use_bitecs_based_client !== undefined) {
+    shouldUseNewLoader &&= APP.hub?.user_data?.hubs_use_bitecs_based_client;
+  }
+  return shouldUseNewLoader;
 }