Merge pull request Hubs-Foundation#6393 from mozilla/bitecs-media-lin…

…k-hold-bug

Look for the holdable media root when grabbing an object

src/systems/hold-system.js

@@ -13,13 +13,14 @@ import {
   HeldHandLeft,
   AEntity,
   Networked,
-  MediaContentBounds
+  MediaLoader,
+  Deletable
 } from "../bit-components";
 import { canMove } from "../utils/permissions-utils";
 import { canMove as canMoveEntity } from "../utils/bit-permissions-utils";
 import { isPinned } from "../bit-systems/networking";
 import { takeOwnership } from "../utils/take-ownership";
-import { findAncestorWithComponent } from "../utils/bit-utils";
+import { findAncestorWithComponents } from "../utils/bit-utils";
 
 const GRAB_REMOTE_RIGHT = paths.actions.cursor.right.grab;
 const DROP_REMOTE_RIGHT = paths.actions.cursor.right.drop;
@@ -78,7 +79,7 @@ function grab(world, userinput, queryHovered, held, grabPath) {
   const hovered = queryHovered(world)[0];
 
   // Special path for Dropped/Pasted Media with new loader enabled. Check the comment above.
-  const mediaRoot = findAncestorWithComponent(world, MediaContentBounds, hovered);
+  const mediaRoot = findAncestorWithComponents(world, [Deletable, MediaLoader, Holdable], hovered);
   const target = mediaRoot ? mediaRoot : hovered;
   const isEntityPinned = isPinned(target) || isAEntityPinned(world, target);
 

src/utils/load-image.tsx

@@ -60,5 +60,13 @@ export function* loadImage(world: HubsWorld, eid: EntityID, url: string, content
 
   ObjectMenuTarget.flags[eid] |= ObjectMenuTargetFlags.Flat;
 
-  return renderAsEntity(world, <entity name="Image" image={imageDef} objectMenuTarget={{ isFlat: true }} />);
+  return renderAsEntity(
+    world,
+    <entity
+      name="Image"
+      image={imageDef}
+      objectMenuTarget={{ isFlat: true }}
+      grabbable={{ cursor: true, hand: false }}
+    />
+  );
 }