Locked down demo mvp

src/components/hud-controller.js

@@ -1,4 +1,5 @@
 import { CAMERA_MODE_FIRST_PERSON } from "../systems/camera-system";
+import { isLockedDownDemoRoom } from "../utils/hub-utils";
 const TWOPI = Math.PI * 2;
 function deltaAngle(a, b) {
   const p = Math.abs(b - a) % TWOPI;
@@ -75,10 +76,10 @@ AFRAME.registerComponent("hud-controller", {
       hud.rotation.x = 0;
       hud.rotation.z = 0;
     }
-
     hud.visible =
       (!hudOutOfView || forceHudVisible) &&
-      this.el.sceneEl.systems["hubs-systems"].cameraSystem.mode === CAMERA_MODE_FIRST_PERSON;
+      this.el.sceneEl.systems["hubs-systems"].cameraSystem.mode === CAMERA_MODE_FIRST_PERSON &&
+      !isLockedDownDemoRoom();
     hud.position.y = (this.isYLocked ? this.lockedHeadPositionY : head.position.y) + offset + (1 - t) * offset;
     hud.rotation.x = (1 - t) * THREE.MathUtils.DEG2RAD * 90;
     hud.matrixNeedsUpdate = true;

src/hub.js

@@ -2,7 +2,8 @@ import {
   getCurrentHubId,
   updateVRHudPresenceCount,
   updateSceneCopresentState,
-  createHubChannelParams
+  createHubChannelParams,
+  isLockedDownDemoRoom
 } from "./utils/hub-utils";
 import "./utils/debug-log";
 import configs from "./utils/configs";
@@ -764,7 +765,7 @@ document.addEventListener("DOMContentLoaded", async () => {
 
   // If the stored avatar doesn't have a valid src, reset to a legacy avatar.
   const avatarSrc = await getAvatarSrc(store.state.profile.avatarId);
-  if (!avatarSrc) {
+  if (!avatarSrc || isLockedDownDemoRoom(hubId)) {
     await store.resetToRandomDefaultAvatar();
   }
 

src/react-components/preferences-screen.js

@@ -22,6 +22,7 @@ import {
   setMaxResolution
 } from "../utils/screen-orientation-utils";
 import { AAModes } from "../constants";
+import { isLockedDownDemoRoom } from "../utils/hub-utils";
 
 import dropdownArrowUrl from "../assets/images/dropdown_arrow.png";
 import dropdownArrow2xUrl from "../assets/images/[email protected]";
@@ -1210,55 +1211,63 @@ class PreferencesScreen extends Component {
             prefType: PREFERENCE_LIST_ITEM_TYPE.SELECT,
             options: availableThemes
           },
-          {
-            key: "nametagVisibility",
-            prefType: PREFERENCE_LIST_ITEM_TYPE.SELECT,
-            options: [
-              {
-                value: "showAll",
-                text: intl.formatMessage({
-                  id: "preferences-screen.nametag-visibility.show-all",
-                  defaultMessage: "Always"
-                })
-              },
-              {
-                value: "showNone",
-                text: intl.formatMessage({
-                  id: "preferences-screen.nametag-visibility.show-none",
-                  defaultMessage: "Never"
-                })
-              },
-              {
-                value: "showFrozen",
-                text: intl.formatMessage({
-                  id: "preferences-screen.nametag-visibility.show-frozen",
-                  defaultMessage: "Only in Frozen state"
-                })
-              },
-              {
-                value: "showSpeaking",
-                text: intl.formatMessage({
-                  id: "preferences-screen.nametag-visibility.show-speaking",
-                  defaultMessage: "Only speaking"
-                })
-              },
-              {
-                value: "showClose",
-                text: intl.formatMessage({
-                  id: "preferences-screen.nametag-visibility.show-close",
-                  defaultMessage: "Close to me"
-                })
-              }
-            ]
-          },
-          {
-            key: "nametagVisibilityDistance",
-            prefType: PREFERENCE_LIST_ITEM_TYPE.NUMBER_WITH_RANGE,
-            min: 1,
-            max: 20,
-            step: 1,
-            digits: 2
-          },
+          ...(!isLockedDownDemoRoom()
+            ? [
+                {
+                  key: "nametagVisibility",
+                  prefType: PREFERENCE_LIST_ITEM_TYPE.SELECT,
+                  options: [
+                    {
+                      value: "showAll",
+                      text: intl.formatMessage({
+                        id: "preferences-screen.nametag-visibility.show-all",
+                        defaultMessage: "Always"
+                      })
+                    },
+                    {
+                      value: "showNone",
+                      text: intl.formatMessage({
+                        id: "preferences-screen.nametag-visibility.show-none",
+                        defaultMessage: "Never"
+                      })
+                    },
+                    {
+                      value: "showFrozen",
+                      text: intl.formatMessage({
+                        id: "preferences-screen.nametag-visibility.show-frozen",
+                        defaultMessage: "Only in Frozen state"
+                      })
+                    },
+                    {
+                      value: "showSpeaking",
+                      text: intl.formatMessage({
+                        id: "preferences-screen.nametag-visibility.show-speaking",
+                        defaultMessage: "Only speaking"
+                      })
+                    },
+                    {
+                      value: "showClose",
+                      text: intl.formatMessage({
+                        id: "preferences-screen.nametag-visibility.show-close",
+                        defaultMessage: "Close to me"
+                      })
+                    }
+                  ]
+                }
+              ]
+            : []),
+          ...(!isLockedDownDemoRoom()
+            ? [
+                {
+                  key: "nametagVisibilityDistance",
+                  prefType: PREFERENCE_LIST_ITEM_TYPE.NUMBER_WITH_RANGE,
+                  min: 1,
+                  max: 20,
+                  step: 1,
+                  digits: 2
+                }
+              ]
+            : []),
           this.state.preferredCamera,
           {
             key: "allowMultipleHubsInstances",

src/react-components/room/ChatSidebar.js

@@ -17,6 +17,7 @@ import styles from "./ChatSidebar.scss";
 import { formatMessageBody } from "../../utils/chat-message";
 import { FormattedMessage, useIntl, defineMessages, FormattedRelativeTime } from "react-intl";
 import { permissionMessage } from "./PermissionNotifications";
+import { isLockedDownDemoRoom } from "../../utils/hub-utils";
 
 export function SpawnMessageButton(props) {
   return (
@@ -279,6 +280,9 @@ const logMessages = defineMessages({
 
 // TODO: use react-intl's defineMessages to get proper extraction
 export function formatSystemMessage(entry, intl) {
+  if (isLockedDownDemoRoom()) {
+    return null;
+  }
   switch (entry.type) {
     case "join":
       return intl.formatMessage(joinedMessages[entry.presence], { name: <b>{entry.name}</b> });

src/react-components/room/ContentMenu.js

@@ -7,17 +7,21 @@ import { ReactComponent as ObjectsIcon } from "../icons/Objects.svg";
 import { ReactComponent as PeopleIcon } from "../icons/People.svg";
 import { FormattedMessage } from "react-intl";
 
-export function ContentMenuButton({ active, children, ...props }) {
+export function ContentMenuButton({ active, disabled, children, ...props }) {
   return (
-    <button className={className(styles.contentMenuButton, { [styles.active]: active })} {...props}>
+    <button
+      className={className(styles.contentMenuButton, { [styles.active]: active, [styles.disabled]: disabled })}
+      {...props}
+    >
       {children}
     </button>
   );
 }
 
 ContentMenuButton.propTypes = {
   children: PropTypes.node,
-  active: PropTypes.bool
+  active: PropTypes.bool,
+  disabled: PropTypes.bool
 };
 
 export function ECSDebugMenuButton(props) {

src/react-components/room/ContentMenu.scss

@@ -72,3 +72,12 @@
   margin: 0 8px;
   background-color: theme.$border1-color;
 }
+
+:local(.disabled) {
+  pointer-events: none;
+  background-color: theme.$transparent;
+
+  svg {
+    color: theme.$text5-color;
+  }
+}

src/react-components/ui-root.js

@@ -6,6 +6,7 @@ import { FormattedMessage } from "react-intl";
 import screenfull from "screenfull";
 
 import configs from "../utils/configs";
+import { isLockedDownDemoRoom } from "../utils/hub-utils";
 import { VR_DEVICE_AVAILABILITY } from "../utils/vr-caps-detect";
 import { canShare } from "../utils/share";
 import styles from "../assets/stylesheets/ui-root.scss";
@@ -817,7 +818,10 @@ class UIRoot extends Component {
 
   renderEntryStartPanel = () => {
     const { hasAcceptedProfile, hasChangedName } = this.props.store.state.activity;
-    const promptForNameAndAvatarBeforeEntry = this.props.hubIsBound ? !hasAcceptedProfile : !hasChangedName;
+    const isLockedDownDemo = isLockedDownDemoRoom(this.props.hub.hub_id);
+    const promptForNameAndAvatarBeforeEntry = this.props.hubIsBound
+      ? !hasAcceptedProfile && !isLockedDownDemo
+      : !hasChangedName && !isLockedDownDemo;
 
     // TODO: What does onEnteringCanceled do?
     return (
@@ -1099,7 +1103,9 @@ class UIRoot extends Component {
 
     const streaming = this.state.isStreaming;
 
-    const showObjectList = enteredOrWatching;
+    const isLockedDownDemo = isLockedDownDemoRoom(this.props.hub.hub_id);
+
+    const showObjectList = enteredOrWatching && !isLockedDownDemo;
     const showECSObjectsMenuButton = qsTruthy("ecsDebug");
 
     const streamer = getCurrentStreamer();
@@ -1150,7 +1156,7 @@ class UIRoot extends Component {
                 reason: LeaveReason.createRoom
               })
           },
-          {
+          !isLockedDownDemo && {
             id: "user-profile",
             label: <FormattedMessage id="more-menu.profile" defaultMessage="Change Name & Avatar" />,
             icon: AvatarIcon,
@@ -1391,7 +1397,8 @@ class UIRoot extends Component {
                         )}
                         <PeopleMenuButton
                           active={this.state.sidebarId === "people"}
-                          onClick={() => this.toggleSidebar("people")}
+                          disabled={isLockedDownDemo}
+                          onClick={!isLockedDownDemo ? () => this.toggleSidebar("people") : null}
                           presencecount={this.state.presenceCount}
                         />
                         {showECSObjectsMenuButton && (
@@ -1593,14 +1600,18 @@ class UIRoot extends Component {
                     )}
                     {entered && (
                       <>
-                        <AudioPopoverContainer scene={this.props.scene} />
-                        <SharePopoverContainer scene={this.props.scene} hubChannel={this.props.hubChannel} />
-                        <PlacePopoverContainer
-                          scene={this.props.scene}
-                          hubChannel={this.props.hubChannel}
-                          mediaSearchStore={this.props.mediaSearchStore}
-                          showNonHistoriedDialog={this.showNonHistoriedDialog}
-                        />
+                        {!isLockedDownDemo && (
+                          <>
+                            <AudioPopoverContainer scene={this.props.scene} />
+                            <SharePopoverContainer scene={this.props.scene} hubChannel={this.props.hubChannel} />
+                            <PlacePopoverContainer
+                              scene={this.props.scene}
+                              hubChannel={this.props.hubChannel}
+                              mediaSearchStore={this.props.mediaSearchStore}
+                              showNonHistoriedDialog={this.showNonHistoriedDialog}
+                            />
+                          </>
+                        )}
                         {this.props.hubChannel.can("spawn_emoji") && (
                           <ReactionPopoverContainer
                             scene={this.props.scene}
@@ -1609,9 +1620,11 @@ class UIRoot extends Component {
                         )}
                       </>
                     )}
-                    <ChatToolbarButtonContainer
-                      onClick={() => this.toggleSidebar("chat", { chatPrefix: "", chatAutofocus: false })}
-                    />
+                    {!isLockedDownDemo && (
+                      <ChatToolbarButtonContainer
+                        onClick={() => this.toggleSidebar("chat", { chatPrefix: "", chatAutofocus: false })}
+                      />
+                    )}
                     {entered && isMobileVR && (
                       <ToolbarButton
                         className={styleUtils.hideLg}

src/schema.toml

@@ -47,6 +47,7 @@ features.show_issue_report_dialog = { category = "features", type = "boolean", i
 features.show_cloud = { category = "features", type = "boolean", internal = "true" }
 features.show_newsletter_signup = { category = "features", type = "boolean", internal = "true" }
 features.change_hub_near_room_links = { category = "features", type = "boolean", internal = "true" }
+features.is_locked_down_demo_room = { category = "features", type = "string", internal = "true", description = "A comma separated list of hubIds to be designated as demo rooms with simplified UI." }
 
 images.logo = { category = "images", type = "file", name = "Hub Logo", description = "Appears throughout your hub including lobby and loading screens." }
 images.logo_dark = { category = "images", type = "file", name = "Hub logo for dark mode", description = "The hub logo which appears for visitors who have dark mode enabled." }

src/storage/store.js

@@ -4,6 +4,7 @@ import Cookies from "js-cookie";
 import jwtDecode from "jwt-decode";
 import { qsGet } from "../utils/qs_truthy.js";
 import detectMobile, { isAndroid, isMobileVR } from "../utils/is-mobile";
+import { isLockedDownDemoRoom } from "../utils/hub-utils";
 
 const LOCAL_STORE_KEY = "___hubs_store";
 const STORE_STATE_CACHE_KEY = Symbol();
@@ -318,7 +319,7 @@ export default class Store extends EventTarget {
     }
 
     // Regenerate name to encourage users to change it.
-    if (!this.state.activity.hasChangedName) {
+    if (!this.state.activity.hasChangedName || isLockedDownDemoRoom()) {
       this.update({ profile: { displayName: generateRandomName() } });
     }
   };
@@ -401,6 +402,19 @@ export default class Store extends EventTarget {
   }
 
   update(newState, mergeOpts) {
+    // Check if in demo room before changing avatar. This feature is meant to prevent any avatarID changes triggered from an avatar.js panel ONLY. "Change Name & Avatar" button in More Menu is disabled at a UI level.
+    // Waiting for scene to load allows for avatarID to be set from default on scene load.
+    // TODO: Will need update with switch to bitECS loader
+    if (
+      newState.profile !== undefined &&
+      newState.profile.avatarId !== undefined &&
+      isLockedDownDemoRoom() &&
+      AFRAME !== undefined &&
+      AFRAME.scenes[0].is("loaded")
+    ) {
+      return;
+    }
+
     const finalState = merge({ ...this.state, preferences: this._preferences }, newState, mergeOpts);
     const { valid, errors } = validator.validate(finalState, SCHEMA);
 

src/systems/name-tag-visibility-system.js

@@ -1,4 +1,5 @@
 import { waitForDOMContentLoaded } from "../utils/async-utils";
+import { isLockedDownDemoRoom } from "../utils/hub-utils";
 
 export class NameTagVisibilitySystem {
   constructor(sceneEl) {
@@ -8,7 +9,7 @@ export class NameTagVisibilitySystem {
     this.lastUpdateTime = Date.now();
     this.tick = this.tick.bind(this);
     this.onStateChanged = this.onStateChanged.bind(this);
-    this.nametagVisibility = this.store.state.preferences.nametagVisibility;
+    this.nametagVisibility = isLockedDownDemoRoom() ? "showNone" : this.store.state.preferences.nametagVisibility;
     this.nametagVisibilityDistance = Math.pow(this.store.state.preferences.nametagVisibilityDistance, 2);
     waitForDOMContentLoaded().then(() => {
       this.avatarRig = document.getElementById("avatar-rig").object3D;
@@ -62,6 +63,6 @@ export class NameTagVisibilitySystem {
 
   onStateChanged() {
     this.nametagVisibilityDistance = Math.pow(this.store.state.preferences.nametagVisibilityDistance, 2);
-    this.nametagVisibility = this.store.state.preferences.nametagVisibility;
+    this.nametagVisibility = isLockedDownDemoRoom() ? "showNone" : this.store.state.preferences.nametagVisibility;
   }
 }

src/systems/ui-hotkeys.js

@@ -1,5 +1,6 @@
 import { paths } from "./userinput/paths";
 import { SOURCES } from "../storage/media-search-store";
+import { isLockedDownDemoRoom } from "../utils/hub-utils";
 
 const MEDIA_SEARCH_PATHS = [
   paths.actions.mediaSearch1,
@@ -23,11 +24,11 @@ AFRAME.registerSystem("ui-hotkeys", {
       this.userinput = this.el.systems.userinput;
     }
 
-    if (this.userinput.get(paths.actions.focusChat)) {
+    if (this.userinput.get(paths.actions.focusChat) && !isLockedDownDemoRoom()) {
       window.dispatchEvent(new CustomEvent("focus_chat", { detail: { prefix: "" } }));
     }
 
-    if (this.userinput.get(paths.actions.focusChatCommand)) {
+    if (this.userinput.get(paths.actions.focusChatCommand) && !isLockedDownDemoRoom()) {
       window.dispatchEvent(new CustomEvent("focus_chat", { detail: { prefix: "/" } }));
     }