BitECS object list support

src/bit-components.js

@@ -161,6 +161,12 @@ export const LoadedByMediaLoader = defineComponent();
 export const MediaContentBounds = defineComponent({
   bounds: [Types.f32, 3]
 });
+export const MediaInfo = defineComponent({
+  accessibleUrl: Types.ui32,
+  contentType: Types.ui32
+});
+MediaInfo.accessibleUrl[$isStringType] = true;
+MediaInfo.contentType[$isStringType] = true;
 
 export const SceneRoot = defineComponent();
 export const NavMesh = defineComponent();

src/bit-systems/media-loading.ts

@@ -5,6 +5,7 @@ import {
   GLTFModel,
   LoadedByMediaLoader,
   MediaContentBounds,
+  MediaInfo,
   MediaLoaded,
   MediaLoader,
   Networked,
@@ -207,6 +208,9 @@ function* loadMedia(world: HubsWorld, eid: EntityID) {
     }
     media = yield* loader(world, eid, urlData);
     addComponent(world, MediaLoaded, media);
+    addComponent(world, MediaInfo, media);
+    MediaInfo.accessibleUrl[media] = APP.getSid(urlData.accessibleUrl);
+    MediaInfo.contentType[media] = APP.getSid(urlData.contentType);
   } catch (e) {
     console.error(e);
     media = renderAsEntity(world, ErrorObject());
@@ -252,6 +256,9 @@ const jobs = new JobRunner();
 const mediaLoaderQuery = defineQuery([MediaLoader]);
 const mediaLoaderEnterQuery = enterQuery(mediaLoaderQuery);
 const mediaLoaderExitQuery = exitQuery(mediaLoaderQuery);
+const mediaLoadedQuery = defineQuery([MediaLoaded]);
+const mediaLoadedEnterQuery = enterQuery(mediaLoadedQuery);
+const mediaLoadedExitQuery = exitQuery(mediaLoadedQuery);
 export function mediaLoadingSystem(world: HubsWorld) {
   mediaLoaderEnterQuery(world).forEach(function (eid) {
     jobs.add(eid, clearRollbacks => loadAndAnimateMedia(world, eid, clearRollbacks));
@@ -261,5 +268,8 @@ export function mediaLoadingSystem(world: HubsWorld) {
     jobs.stop(eid);
   });
 
+  mediaLoadedEnterQuery(world).forEach(() => APP.scene?.emit("listed_media_changed"));
+  mediaLoadedExitQuery(world).forEach(() => APP.scene?.emit("listed_media_changed"));
+
   jobs.tick();
 }

src/components/media-loader.js

@@ -111,7 +111,7 @@ AFRAME.registerComponent("media-loader", {
         setMatrixWorld(mesh, originalMeshMatrix);
       } else {
         // Move the mesh such that the center of its bounding box is in the same position as the parent matrix position
-        const box = getBox(this.el, mesh);
+        const box = getBox(this.el.object3D, mesh);
         const scaleCoefficient = fitToBox ? getScaleCoefficient(0.5, box) : 1;
         const { min, max } = box;
         center.addVectors(min, max).multiplyScalar(0.5 * scaleCoefficient);
@@ -283,7 +283,7 @@ AFRAME.registerComponent("media-loader", {
       }
 
       // TODO this does duplicate work in some cases, but finish() is the only consistent place to do it
-      const contentBounds = getBox(this.el, this.el.getObject3D("mesh")).getSize(new THREE.Vector3());
+      const contentBounds = getBox(this.el.object3D, this.el.getObject3D("mesh")).getSize(new THREE.Vector3());
       addComponent(APP.world, MediaContentBounds, el.eid);
       MediaContentBounds.bounds[el.eid].set(contentBounds.toArray());
 

src/components/super-spawner.js

@@ -111,7 +111,7 @@ AFRAME.registerComponent("super-spawner", {
         ? 1
         : 0.5;
 
-    const scaleCoefficient = getScaleCoefficient(boxSize, getBox(spawnedEntity, spawnedEntity.object3D));
+    const scaleCoefficient = getScaleCoefficient(boxSize, getBox(spawnedEntity.object3D, spawnedEntity.object3D));
     this.spawnedMediaScale.divideScalar(scaleCoefficient);
   },
 

src/prefabs/media.tsx

@@ -28,6 +28,7 @@ export function MediaPrefab(params: MediaLoaderParams): EntityDef {
         collisionMask: COLLISION_LAYERS.HANDS
       }}
       scale={[1, 1, 1]}
+      inspectable
     />
   );
 }

src/react-components/room/hooks/useObjectList.js

@@ -1,11 +1,11 @@
 import React, { useState, useEffect, useContext, createContext, useCallback, Children, cloneElement } from "react";
 import PropTypes from "prop-types";
-import { mediaSort, getMediaType } from "../../../utils/media-sorting.js";
+import { mediaSort, mediaSortAframe, getMediaType, getMediaTypeAframe } from "../../../utils/media-sorting.js";
+import { shouldUseNewLoader } from "../../../utils/bit-utils";
+import { defineQuery } from "bitecs";
+import { MediaInfo } from "../../../bit-components.js";
 
-function getDisplayString(el) {
-  // Having a listed-media component does not guarantee the existence of a media-loader component,
-  // so don't crash if there isn't one.
-  const url = (el.components["media-loader"] && el.components["media-loader"].data.src) || "";
+function getDisplayString(url) {
   const split = url.split("/");
   const resourceName = split[split.length - 1].split("?")[0];
   let httpIndex = -1;
@@ -46,12 +46,14 @@ function handleInspect(scene, object, callback) {
 
   callback(object);
 
-  if (object.el.object3D !== cameraSystem.inspectable) {
+  const object3D = shouldUseNewLoader() ? APP.world.eid2obj.get(object.eid) : object.el.object3D;
+
+  if (object3D !== cameraSystem.inspectable) {
     if (cameraSystem.inspectable) {
       cameraSystem.uninspect(false);
     }
 
-    cameraSystem.inspect(object.el, 1.5, false);
+    cameraSystem.inspect(object3D, 1.5, false);
   }
 }
 
@@ -63,10 +65,12 @@ function handleDeselect(scene, object, callback) {
   cameraSystem.uninspect(false);
 
   if (object) {
-    cameraSystem.inspect(object.el, 1.5, false);
+    const object3D = shouldUseNewLoader() ? APP.world.eid2obj.get(object.eid) : object.el.object3D;
+    cameraSystem.inspect(object3D, 1.5, false);
   }
 }
 
+const queryListedMedia = defineQuery([MediaInfo]);
 export function ObjectListProvider({ scene, children }) {
   const [objects, setObjects] = useState([]);
   const [focusedObject, setFocusedObject] = useState(null); // The object currently shown in the viewport
@@ -76,14 +80,28 @@ export function ObjectListProvider({ scene, children }) {
 
   useEffect(() => {
     function updateMediaEntities() {
-      const objects = scene.systems["listed-media"].els.sort(mediaSort).map(el => ({
-        id: el.object3D.id,
-        name: getDisplayString(el),
-        type: getMediaType(el),
-        el
-      }));
-
-      setObjects(objects);
+      if (shouldUseNewLoader()) {
+        const objects = queryListedMedia(APP.world)
+          .sort(mediaSort)
+          .map(eid => ({
+            id: APP.world.eid2obj.get(eid)?.id,
+            name: getDisplayString(APP.getString(MediaInfo.accessibleUrl[eid])),
+            type: getMediaType(eid),
+            eid: eid
+          }));
+        setObjects(objects);
+      } else {
+        const objects = scene.systems["listed-media"].els.sort(mediaSortAframe).map(el => ({
+          id: el.object3D.id,
+          // Having a listed-media component does not guarantee the existence of a media-loader component,
+          // so don't crash if there isn't one.
+          name: getDisplayString((el.components["media-loader"] && el.components["media-loader"].data.src) || ""),
+          type: getMediaTypeAframe(el),
+          eid: el.eid,
+          el
+        }));
+        setObjects(objects);
+      }
     }
 
     let timeout;
@@ -108,23 +126,45 @@ export function ObjectListProvider({ scene, children }) {
     function onInspectTargetChanged() {
       const cameraSystem = scene.systems["hubs-systems"].cameraSystem;
 
-      const inspectedEl = cameraSystem.inspectable && cameraSystem.inspectable.el;
-
-      if (inspectedEl) {
-        const object = objects.find(o => o.el === inspectedEl);
-
-        if (object) {
-          setSelectedObject(object);
+      if (shouldUseNewLoader()) {
+        const inspectedEid = cameraSystem.inspectable && cameraSystem.inspectable.eid;
+
+        if (inspectedEid) {
+          const object = objects.find(o => o.eid === inspectedEid);
+
+          if (object) {
+            setSelectedObject(object);
+          } else {
+            setSelectedObject({
+              id: inspectedEl.object3D.id,
+              name: getDisplayString(inspectedEl),
+              type: getMediaType(inspectedEl),
+              eid: inspectedEid
+            });
+          }
         } else {
-          setSelectedObject({
-            id: inspectedEl.object3D.id,
-            name: getDisplayString(inspectedEl),
-            type: getMediaType(inspectedEl),
-            el: inspectedEl
-          });
+          setSelectedObject(null);
         }
       } else {
-        setSelectedObject(null);
+        const inspectedEl = cameraSystem.inspectable && cameraSystem.inspectable.el;
+
+        if (inspectedEl) {
+          const object = objects.find(o => o.el === inspectedEl);
+
+          if (object) {
+            setSelectedObject(object);
+          } else {
+            setSelectedObject({
+              id: inspectedEl.object3D.id,
+              name: getDisplayString(inspectedEl),
+              type: getMediaType(inspectedEl),
+              eid: inspectedEl.eid,
+              el: inspectedEl
+            });
+          }
+        } else {
+          setSelectedObject(null);
+        }
       }
     }
 

src/react-components/room/object-hooks.js

@@ -1,24 +1,36 @@
 import { useEffect, useState, useCallback, useMemo } from "react";
 import { removeNetworkedObject } from "../../utils/removeNetworkedObject";
+import { shouldUseNewLoader } from "../../utils/bit-utils";
 import { rotateInPlaceAroundWorldUp, affixToWorldUp } from "../../utils/three-utils";
 import { getPromotionTokenForFile } from "../../utils/media-utils";
 import { hasComponent } from "bitecs";
-import { Static } from "../../bit-components";
 import { isPinned as getPinnedState } from "../../bit-systems/networking";
+import { MediaInfo, Static } from "../../bit-components";
+import { deleteTheDeletableAncestor } from "../../bit-systems/delete-entity-system";
 
 export function isMe(object) {
-  return object.el.id === "avatar-rig";
+  return object.id === "avatar-rig";
 }
 
 export function isPlayer(object) {
-  return !!object.el.components["networked-avatar"];
+  if (shouldUseNewLoader()) {
+    // TODO Add when networked avatar is migrated
+    return false;
+  } else {
+    return !!object.el.components["networked-avatar"];
+  }
 }
 
 export function getObjectUrl(object) {
-  const mediaLoader = object.el.components["media-loader"];
-
-  const url =
-    mediaLoader && ((mediaLoader.data.mediaOptions && mediaLoader.data.mediaOptions.href) || mediaLoader.data.src);
+  let url;
+  if (shouldUseNewLoader()) {
+    const urlSid = MediaInfo.accessibleUrl[object.eid];
+    url = APP.getString(urlSid);
+  } else {
+    const mediaLoader = object.el.components["media-loader"];
+    url =
+      mediaLoader && ((mediaLoader.data.mediaOptions && mediaLoader.data.mediaOptions.href) || mediaLoader.data.src);
+  }
 
   if (url && !url.startsWith("hubs://")) {
     return url;
@@ -28,7 +40,7 @@ export function getObjectUrl(object) {
 }
 
 export function usePinObject(hubChannel, scene, object) {
-  const [isPinned, setIsPinned] = useState(getPinnedState(object.el.eid));
+  const [isPinned, setIsPinned] = useState(getPinnedState(object.eid));
 
   const pinObject = useCallback(() => {
     const el = object.el;
@@ -51,6 +63,11 @@ export function usePinObject(hubChannel, scene, object) {
   }, [isPinned, pinObject, unpinObject]);
 
   useEffect(() => {
+    // TODO Add when pinning is migrated
+    if (shouldUseNewLoader()) {
+      return;
+    }
+
     const el = object.el;
 
     function onPinStateChanged() {
@@ -65,6 +82,11 @@ export function usePinObject(hubChannel, scene, object) {
     };
   }, [object]);
 
+  if (shouldUseNewLoader()) {
+    // TODO Add when pinning is migrated
+    return false;
+  }
+
   const el = object.el;
 
   let userOwnsFile = false;
@@ -114,16 +136,20 @@ export function useGoToSelectedObject(scene, object) {
 
 export function useRemoveObject(hubChannel, scene, object) {
   const removeObject = useCallback(() => {
-    removeNetworkedObject(scene, object.el);
+    if (shouldUseNewLoader()) {
+      deleteTheDeletableAncestor(APP.world, object.eid);
+    } else {
+      removeNetworkedObject(scene, object.el);
+    }
   }, [scene, object]);
 
-  const el = object.el;
+  const eid = object.eid;
 
   const canRemoveObject = !!(
     scene.is("entered") &&
     !isPlayer(object) &&
-    !getPinnedState(el.eid) &&
-    !hasComponent(APP.world, Static, el.eid) &&
+    !getPinnedState(eid) &&
+    !hasComponent(APP.world, Static, eid) &&
     hubChannel.can("spawn_and_move_media")
   );