BitECS object menu refresh button

src/bit-components.js

@@ -172,8 +172,10 @@ export const MediaLoader = defineComponent({
 });
 MediaLoader.src[$isStringType] = true;
 MediaLoader.fileId[$isStringType] = true;
+export const MediaLoaderOffset = defineComponent();
 export const MediaLoaded = defineComponent();
 export const LoadedByMediaLoader = defineComponent();
+export const MediaRefresh = defineComponent();
 export const MediaContentBounds = defineComponent({
   bounds: [Types.f32, 3]
 });

src/bit-systems/media-loading.ts

@@ -21,12 +21,14 @@ import {
   MediaLink,
   MediaLoaded,
   MediaLoader,
+  MediaRefresh,
   MediaLoading,
   MediaVideoLoaderData,
   MirroredMedia,
   Networked,
   ObjectMenuTarget,
-  Rigidbody
+  Rigidbody,
+  MediaLoaderOffset
 } from "../bit-components";
 import { inflatePhysicsShape, Shape } from "../inflators/physics-shape";
 import { ErrorObject } from "../prefabs/error-object";
@@ -308,6 +310,7 @@ function* loadAndAnimateMedia(world: HubsWorld, mediaLoaderEid: EntityID, clearR
   const mediaTransformObj = new Group();
   mediaTransformObj.name = "Media Loader Offset";
   addObject3DComponent(world, mediaTransformEid, mediaTransformObj);
+  addComponent(world, MediaLoaderOffset, mediaTransformEid);
   add(world, mediaTransformEid, mediaLoaderEid);
   add(world, mediaEid, mediaTransformEid);
 
@@ -317,6 +320,13 @@ function* loadAndAnimateMedia(world: HubsWorld, mediaLoaderEid: EntityID, clearR
   removeComponent(world, MediaLink, mediaLoaderEid);
 }
 
+function* refreshMedia(world: HubsWorld, eid: EntityID, clearRollbacks: ClearFunction) {
+  removeComponent(world, MediaRefresh, eid);
+  const offsetEid = findChildWithComponent(world, MediaLoaderOffset, eid)!;
+  removeEntity(world, offsetEid);
+  addComponent(world, MediaLoading, eid);
+}
+
 const loadingCubes = new Map();
 const jobs = new JobRunner();
 const mediaLoadingQuery = defineQuery([MediaLoading]);
@@ -325,6 +335,8 @@ const mediaLoadingExitQuery = exitQuery(mediaLoadingQuery);
 const mediaLoadedQuery = defineQuery([MediaLoaded]);
 const mediaLoadedEnterQuery = enterQuery(mediaLoadedQuery);
 const mediaLoadedExitQuery = exitQuery(mediaLoadedQuery);
+const mediaRefreshQuery = defineQuery([MediaRefresh]);
+const mediaRefreshEnterQuery = enterQuery(mediaRefreshQuery);
 export function mediaLoadingSystem(world: HubsWorld) {
   mediaLoadingEnterQuery(world).forEach(function (eid) {
     const mediaLoaderEids = findAncestorsWithComponent(world, MediaLoader, eid);
@@ -384,5 +396,11 @@ export function mediaLoadingSystem(world: HubsWorld) {
   mediaLoadedEnterQuery(world).forEach(() => APP.scene?.emit("listed_media_changed"));
   mediaLoadedExitQuery(world).forEach(() => APP.scene?.emit("listed_media_changed"));
 
+  mediaRefreshEnterQuery(world).forEach(eid => {
+    if (!jobs.has(eid)) {
+      jobs.add(eid, clearRollbacks => refreshMedia(world, eid, clearRollbacks));
+    }
+  });
+
   jobs.tick();
 }

src/bit-systems/object-menu.ts

@@ -23,7 +23,8 @@ import {
   MediaMirrored,
   Inspected,
   Inspectable,
-  Deletable
+  Deletable,
+  MediaRefresh
 } from "../bit-components";
 import {
   anyEntityWith,
@@ -204,7 +205,7 @@ function handleClicks(world: HubsWorld, menu: EntityID, hubChannel: HubChannel)
   } else if (clicked(world, ObjectMenu.openLinkButtonRef[menu])) {
     openLink(world, ObjectMenu.targetRef[menu]);
   } else if (clicked(world, ObjectMenu.refreshButtonRef[menu])) {
-    console.log("Clicked refresh");
+    addComponent(world, MediaRefresh, ObjectMenu.targetRef[menu]);
   } else if (clicked(world, ObjectMenu.cloneButtonRef[menu])) {
     cloneObject(world, ObjectMenu.targetRef[menu]);
   } else if (clicked(world, ObjectMenu.mirrorButtonRef[menu])) {
@@ -283,6 +284,7 @@ function updateVisibility(world: HubsWorld, menu: EntityID, frozen: boolean) {
   const isMirrored = hasComponent(world, MediaMirrored, target);
   const isInspectable = hasComponent(world, Inspectable, target);
   const isInspected = hasComponent(world, Inspected, target);
+  const isRefreshing = hasComponent(world, MediaRefresh, target);
 
   // Parent visibility doesn't block raycasting, so we must set each button to be invisible
   // TODO: Ensure that children of invisible entities aren't raycastable
@@ -299,6 +301,7 @@ function updateVisibility(world: HubsWorld, menu: EntityID, frozen: boolean) {
     !isVideoImagePdf && !isEntityPinned && !hasComponent(world, ObjectDropped, target);
   world.eid2obj.get(ObjectMenu.mirrorButtonRef[menu])!.visible = isVideoImagePdf && !isMirrored;
   world.eid2obj.get(ObjectMenu.inspectButtonRef[menu])!.visible = isVideoImagePdf && isInspectable && !isInspected;
+  world.eid2obj.get(ObjectMenu.refreshButtonRef[menu])!.visible = visible && canIPin && canISpawnMove && !isRefreshing;
 
   // This is a hacky way of giving a chance to the object-menu-transform system to center the menu based on the
   // visible buttons without accounting for the background plane.
@@ -310,7 +313,6 @@ function updateVisibility(world: HubsWorld, menu: EntityID, frozen: boolean) {
   world.eid2obj.get(ObjectMenu.cameraFocusButtonRef[menu])!.visible = false;
   world.eid2obj.get(ObjectMenu.cameraTrackButtonRef[menu])!.visible = false;
   world.eid2obj.get(ObjectMenu.deserializeDrawingButtonRef[menu])!.visible = false;
-  world.eid2obj.get(ObjectMenu.refreshButtonRef[menu])!.visible = false;
 }
 
 const hoveredQuery = defineQuery([HoveredRemoteRight]);

src/prefabs/object-menu.tsx

@@ -244,7 +244,7 @@ const position = {
   inspect:            [    0, -0.425, uiZ] as ArrayVec3,
   deserializeDrawing: [ -0.3, -0.625, uiZ] as ArrayVec3,
   openLink:           [ 0.25, -0.275, uiZ] as ArrayVec3,
-  refresh:            [  0.3, -0.625, uiZ] as ArrayVec3,
+  refresh:            [ 0.25, -0.425, uiZ] as ArrayVec3,
   clone:              [-0.25, -0.275, uiZ] as ArrayVec3,
   rotate:             [ -0.2, -0.125, uiZ] as ArrayVec3,
   mirror:             [    0, -0.125, uiZ] as ArrayVec3,