From 3cbd8f5243a1815b90de8517688bd1de95ca1188 Mon Sep 17 00:00:00 2001
From: Manuel Martin <manmartin@mozilla.com>
Date: Wed, 24 Jan 2024 14:23:38 +0100
Subject: [PATCH 1/3] BitECS snap object menu support

---
 src/assets/snap.png                           | Bin 0 -> 2769 bytes
 src/bit-components.js                         |   3 +
 .../object-menu-transform-system.ts           |   6 +-
 src/bit-systems/pdf-menu-system.ts            |  12 ++--
 src/bit-systems/snap-media-system.ts          |  64 ++++++++++++++++++
 src/bit-systems/video-menu-system.ts          |   6 +-
 src/hub.js                                    |   3 +-
 src/inflators/pdf.ts                          |   1 +
 src/prefabs/pdf-menu.tsx                      |  40 +++++++++--
 src/prefabs/video-menu.tsx                    |  40 +++++++++--
 src/systems/hubs-systems.ts                   |   2 +
 src/utils/jsx-entity.ts                       |   2 +
 src/utils/load-pdf.tsx                        |   2 +-
 13 files changed, 155 insertions(+), 26 deletions(-)
 create mode 100644 src/assets/snap.png
 create mode 100644 src/bit-systems/snap-media-system.ts

diff --git a/src/assets/snap.png b/src/assets/snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..71e48a87350c19fa310e8d29930599e37760761a
GIT binary patch
literal 2769
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
XGSA4eP7bo)00000NkvXXu0mjf-epRC

literal 0
HcmV?d00001

diff --git a/src/bit-components.js b/src/bit-components.js
index ad46cb8d7a..b2e11f3e57 100644
--- a/src/bit-components.js
+++ b/src/bit-components.js
@@ -278,6 +278,7 @@ export const VideoMenu = defineComponent({
   headRef: Types.eid,
   playIndicatorRef: Types.eid,
   pauseIndicatorRef: Types.eid,
+  snapRef: Types.eid,
   clearTargetTimer: Types.f64
 });
 export const AudioEmitter = defineComponent({
@@ -352,12 +353,14 @@ export const PDFMenu = defineComponent({
   prevButtonRef: Types.eid,
   nextButtonRef: Types.eid,
   pageLabelRef: Types.eid,
+  snapRef: Types.eid,
   targetRef: Types.eid,
   clearTargetTimer: Types.f64
 });
 export const ObjectMenuTarget = defineComponent({
   flags: Types.ui8
 });
+export const MediaSnapped = defineComponent();
 export const NetworkDebug = defineComponent();
 export const NetworkDebugRef = defineComponent({
   ref: Types.eid
diff --git a/src/bit-systems/object-menu-transform-system.ts b/src/bit-systems/object-menu-transform-system.ts
index 907e1ba2a1..cfc20eadd7 100644
--- a/src/bit-systems/object-menu-transform-system.ts
+++ b/src/bit-systems/object-menu-transform-system.ts
@@ -17,6 +17,7 @@ const tmpMat42 = new Matrix4();
 const aabb = new Box3();
 const sphere = new Sphere();
 const yVector = new Vector3(0, 1, 0);
+const UNIT_V3 = new Vector3(1, 1, 1);
 
 // Calculate the AABB without accounting for the root object rotation
 function getAABB(obj: Object3D, box: Box3, onlyVisible: boolean = false) {
@@ -83,8 +84,9 @@ function transformMenu(world: HubsWorld, menu: EntityID) {
     // For now we are defaulting to the current AFrame behavior.
   } else {
     targetObj.updateMatrices(true, true);
-    tmpMat4.copy(targetObj.matrixWorld);
-    tmpMat4.decompose(tmpVec1, tmpQuat1, tmpVec2);
+    targetObj.matrixWorld.decompose(tmpVec1, tmpQuat1, tmpVec2);
+    tmpMat42.compose(tmpVec1, tmpQuat1, UNIT_V3);
+    tmpMat4.copy(tmpMat42);
 
     const isFacing = isFacingCamera(targetObj);
     if (!isFacing) {
diff --git a/src/bit-systems/pdf-menu-system.ts b/src/bit-systems/pdf-menu-system.ts
index 4dcf7852fa..2197b93586 100644
--- a/src/bit-systems/pdf-menu-system.ts
+++ b/src/bit-systems/pdf-menu-system.ts
@@ -10,6 +10,7 @@ import {
   MediaLoader,
   MediaPDF,
   MediaPDFUpdated,
+  MediaSnapped,
   NetworkedPDF,
   ObjectMenuTransform,
   PDFMenu
@@ -25,6 +26,7 @@ function setCursorRaycastable(world: HubsWorld, menu: EntityID, enable: boolean)
   change(world, CursorRaycastable, menu);
   change(world, CursorRaycastable, PDFMenu.prevButtonRef[menu]);
   change(world, CursorRaycastable, PDFMenu.nextButtonRef[menu]);
+  change(world, CursorRaycastable, PDFMenu.snapRef[menu]);
 }
 
 function clicked(world: HubsWorld, eid: EntityID) {
@@ -83,6 +85,9 @@ function handleClicks(world: HubsWorld, menu: EntityID) {
   } else if (clicked(world, PDFMenu.prevButtonRef[menu])) {
     const pdf = PDFMenu.targetRef[menu];
     setPage(world, pdf, MediaPDF.pageNumber[pdf] - 1);
+  } else if (clicked(world, PDFMenu.snapRef[menu])) {
+    const pdf = PDFMenu.targetRef[menu];
+    addComponent(world, MediaSnapped, pdf);
   }
 }
 
@@ -107,13 +112,6 @@ function flushToObject3Ds(world: HubsWorld, menu: EntityID, frozen: boolean) {
     ObjectMenuTransform.flags[menu] &= ~ObjectMenuTransformFlags.Enabled;
   }
 
-  [PDFMenu.prevButtonRef[menu], PDFMenu.nextButtonRef[menu]].forEach(buttonRef => {
-    const buttonObj = world.eid2obj.get(buttonRef)!;
-    // 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
-    buttonObj.visible = visible;
-  });
-
   if (target) {
     const numPages = PDFResourcesMap.get(target)!.pdf.numPages;
     (world.eid2obj.get(PDFMenu.pageLabelRef[menu]) as Text).text = `${MediaPDF.pageNumber[target]} / ${numPages}`;
diff --git a/src/bit-systems/snap-media-system.ts b/src/bit-systems/snap-media-system.ts
new file mode 100644
index 0000000000..64b4dfce07
--- /dev/null
+++ b/src/bit-systems/snap-media-system.ts
@@ -0,0 +1,64 @@
+import { defineQuery, enterQuery, entityExists, exitQuery, hasComponent, removeComponent } from "bitecs";
+import { HubsWorld } from "../app";
+import { MediaPDF, MediaSnapped, MediaVideo, MediaVideoData } from "../bit-components";
+import { SOUND_CAMERA_TOOL_TOOK_SNAPSHOT } from "../systems/sound-effects-system";
+import { JobRunner } from "../utils/coroutine-utils";
+import { EntityID } from "../utils/networking-types";
+import { PDFResourcesMap } from "./pdf-system";
+import { spawnFromFileList } from "../load-media-on-paste-or-drop";
+
+const TYPE_IMG_PNG = { type: "image/png" };
+
+export function* snapMedia(world: HubsWorld, eid: EntityID) {
+  let canvas: HTMLCanvasElement | undefined;
+  if (hasComponent(world, MediaPDF, eid)) {
+    const res = PDFResourcesMap.get(eid);
+    canvas = res?.canvas;
+  } else if (hasComponent(world, MediaVideo, eid)) {
+    const video = MediaVideoData.get(eid)!;
+    if (video) {
+      canvas = document.createElement("canvas");
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      canvas.getContext("2d")!.drawImage(video, 0, 0, canvas.width, canvas.height);
+    }
+  }
+
+  if (canvas) {
+    const blob = new Promise((resolve, reject) => {
+      if (canvas) {
+        canvas.toBlob(resolve);
+      } else {
+        reject();
+      }
+    });
+    if (blob) {
+      const file = new File([yield blob], "snap.png", TYPE_IMG_PNG);
+      spawnFromFileList([file] as any);
+    } else {
+      console.error("Snapped image creation error");
+    }
+  }
+
+  if (entityExists(world, eid)) {
+    removeComponent(world, MediaSnapped, eid);
+  }
+}
+
+const jobs = new JobRunner();
+const snappedMediaQuery = defineQuery([MediaSnapped]);
+const snappedEnterQuery = enterQuery(snappedMediaQuery);
+const snappedExitQuery = exitQuery(snappedMediaQuery);
+export function snapMediaSystem(world: HubsWorld, sfxSystem: any) {
+  snappedExitQuery(world).forEach(eid => {
+    jobs.stop(eid);
+  });
+  snappedEnterQuery(world).forEach(eid => {
+    sfxSystem.playSoundOneShot(SOUND_CAMERA_TOOL_TOOK_SNAPSHOT);
+
+    if (!jobs.has(eid)) {
+      jobs.add(eid, () => snapMedia(world, eid));
+    }
+  });
+  jobs.tick();
+}
diff --git a/src/bit-systems/video-menu-system.ts b/src/bit-systems/video-menu-system.ts
index 4588cb4f82..12e8d2dbab 100644
--- a/src/bit-systems/video-menu-system.ts
+++ b/src/bit-systems/video-menu-system.ts
@@ -12,6 +12,7 @@ import {
   HoveredRemoteRight,
   Interacted,
   MediaLoader,
+  MediaSnapped,
   MediaVideo,
   MediaVideoData,
   MediaVideoUpdated,
@@ -38,6 +39,7 @@ function setCursorRaycastable(world: HubsWorld, menu: number, enable: boolean) {
   change(world, CursorRaycastable, VideoMenu.trackRef[menu]);
   change(world, CursorRaycastable, VideoMenu.playIndicatorRef[menu]);
   change(world, CursorRaycastable, VideoMenu.pauseIndicatorRef[menu]);
+  change(world, CursorRaycastable, VideoMenu.snapRef[menu]);
 }
 
 const intersectInThePlaneOf = (() => {
@@ -113,7 +115,6 @@ function flushToObject3Ds(world: HubsWorld, menu: EntityID, frozen: boolean) {
   } else {
     obj.removeFromParent();
     setCursorRaycastable(world, menu, false);
-
     ObjectMenuTransform.flags[menu] &= ~ObjectMenuTransformFlags.Enabled;
   }
 }
@@ -142,6 +143,9 @@ function handleClicks(world: HubsWorld, menu: EntityID) {
       addComponent(world, EntityStateDirty, videoEid);
     }
     addComponent(world, MediaVideoUpdated, videoEid);
+  } else if (clicked(world, VideoMenu.snapRef[menu])) {
+    const video = VideoMenu.videoRef[menu];
+    addComponent(world, MediaSnapped, video);
   }
 }
 
diff --git a/src/hub.js b/src/hub.js
index 8665309af7..fb609a6b7e 100644
--- a/src/hub.js
+++ b/src/hub.js
@@ -192,6 +192,7 @@ import { renderAsEntity } from "./utils/jsx-entity";
 import { VideoMenuPrefab, loadVideoMenuButtonIcons } from "./prefabs/video-menu";
 import { loadObjectMenuButtonIcons, ObjectMenuPrefab } from "./prefabs/object-menu";
 import { loadMirrorMenuButtonIcons, MirrorMenuPrefab } from "./prefabs/mirror-menu";
+import { loadPDFMenuButtonIcons } from "./prefabs/pdf-menu";
 import { LinkHoverMenuPrefab } from "./prefabs/link-hover-menu";
 import { PDFMenuPrefab } from "./prefabs/pdf-menu";
 import { loadWaypointPreviewModel, WaypointPreview } from "./prefabs/waypoint-preview";
@@ -206,7 +207,7 @@ function addToScene(entityDef, visible) {
     obj.visible = !!visible;
   });
 }
-preload(addToScene(PDFMenuPrefab(), false));
+preload(loadPDFMenuButtonIcons().then(() => addToScene(PDFMenuPrefab(), false)));
 preload(loadObjectMenuButtonIcons().then(() => addToScene(ObjectMenuPrefab(), false)));
 preload(loadMirrorMenuButtonIcons().then(() => addToScene(MirrorMenuPrefab(), false)));
 preload(addToScene(LinkHoverMenuPrefab(), false));
diff --git a/src/inflators/pdf.ts b/src/inflators/pdf.ts
index bb5d3d219d..f4af9e0763 100644
--- a/src/inflators/pdf.ts
+++ b/src/inflators/pdf.ts
@@ -11,6 +11,7 @@ import { createPlaneBufferGeometry } from "../utils/three-utils";
 export interface PDFResources {
   pdf: PDFDocumentProxy;
   material: MeshBasicMaterial;
+  canvas: HTMLCanvasElement;
   canvasContext: CanvasRenderingContext2D;
 }
 
diff --git a/src/prefabs/pdf-menu.tsx b/src/prefabs/pdf-menu.tsx
index 43e722691e..ee24504a2d 100644
--- a/src/prefabs/pdf-menu.tsx
+++ b/src/prefabs/pdf-menu.tsx
@@ -3,10 +3,17 @@ import { Color } from "three";
 import { ArrayVec3, Attrs, createElementEntity, createRef } from "../utils/jsx-entity";
 import { Button3D, BUTTON_TYPES } from "./button3D";
 import { Label } from "./camera-tool";
+import { loadTexture, loadTextureFromCache } from "../utils/load-texture";
+import snapIconSrc from "../assets/spawn_message.png";
 
 const BUTTON_HEIGHT = 0.2;
-const BUTTON_SCALE: ArrayVec3 = [0.4, 0.4, 0.4];
-const BUTTON_WIDTH = 0.3;
+const BUTTON_SCALE: ArrayVec3 = [0.6, 0.6, 0.6];
+const BIG_BUTTON_SCALE: ArrayVec3 = [0.8, 0.8, 0.8];
+const BUTTON_WIDTH = 0.2;
+
+export async function loadPDFMenuButtonIcons() {
+  return Promise.all([loadTexture(snapIconSrc, 1, "image/png")]);
+}
 
 interface PDFPageButtonProps extends Attrs {
   text: string;
@@ -16,7 +23,7 @@ function PDFPageButton(props: PDFPageButtonProps) {
   return (
     <Button3D
       name={props.name}
-      scale={BUTTON_SCALE}
+      scale={BIG_BUTTON_SCALE}
       width={BUTTON_WIDTH}
       height={BUTTON_HEIGHT}
       type={BUTTON_TYPES.ACTION}
@@ -25,15 +32,32 @@ function PDFPageButton(props: PDFPageButtonProps) {
   );
 }
 
+function SnapButton(props: Attrs) {
+  const { texture, cacheKey } = loadTextureFromCache(snapIconSrc, 1);
+  return (
+    <Button3D
+      name="Remove Button"
+      scale={BUTTON_SCALE}
+      width={BUTTON_HEIGHT}
+      height={BUTTON_WIDTH}
+      type={BUTTON_TYPES.ACTION}
+      icon={{ texture, cacheKey, scale: [0.165, 0.165, 0.165] }}
+      {...props}
+    />
+  );
+}
+
 const UI_Z = 0.001;
-const POSITION_PREV: ArrayVec3 = [-0.45, 0.0, UI_Z];
-const POSITION_NEXT: ArrayVec3 = [0.45, 0.0, UI_Z];
-const POSITION_LABEL: ArrayVec3 = [0.0, -0.35, UI_Z];
+const POSITION_PREV: ArrayVec3 = [-0.35, 0.0, UI_Z];
+const POSITION_NEXT: ArrayVec3 = [0.35, 0.0, UI_Z];
+const POSITION_LABEL: ArrayVec3 = [0.0, -0.45, UI_Z];
+const POSITION_SNAP: ArrayVec3 = [0.0, 0.45, UI_Z];
 const PAGE_LABEL_COLOR = new Color(0.1, 0.1, 0.1);
 export function PDFMenuPrefab() {
   const refPrev = createRef();
   const refNext = createRef();
   const refLabel = createRef();
+  const refSnap = createRef();
   return (
     <entity
       name="PDF Menu"
@@ -41,9 +65,11 @@ export function PDFMenuPrefab() {
       pdfMenu={{
         prevButtonRef: refPrev,
         nextButtonRef: refNext,
-        pageLabelRef: refLabel
+        pageLabelRef: refLabel,
+        snapRef: refSnap
       }}
     >
+      <SnapButton name="Snap Button" ref={refSnap} position={POSITION_SNAP} />
       <PDFPageButton name="Previous Page Button" text="<" ref={refPrev} position={POSITION_PREV} />
       <PDFPageButton name="Next Page Button" text=">" ref={refNext} position={POSITION_NEXT} />
       <Label ref={refLabel} position={POSITION_LABEL} text={{ color: PAGE_LABEL_COLOR }} />
diff --git a/src/prefabs/video-menu.tsx b/src/prefabs/video-menu.tsx
index 3963fd2975..4b30ac4374 100644
--- a/src/prefabs/video-menu.tsx
+++ b/src/prefabs/video-menu.tsx
@@ -1,17 +1,26 @@
 /** @jsx createElementEntity */
 import { BoxBufferGeometry, Mesh, MeshBasicMaterial, PlaneBufferGeometry } from "three";
 import { Label } from "../prefabs/camera-tool";
-import { Attrs, createElementEntity, createRef } from "../utils/jsx-entity";
+import { ArrayVec3, Attrs, createElementEntity, createRef } from "../utils/jsx-entity";
 import playImageUrl from "../assets/images/sprites/notice/play.png";
 import pauseImageUrl from "../assets/images/sprites/notice/pause.png";
 import { BUTTON_TYPES, Button3D } from "./button3D";
 import { loadTexture, loadTextureFromCache } from "../utils/load-texture";
+import snapIconSrc from "../assets/spawn_message.png";
 
 export async function loadVideoMenuButtonIcons() {
-  return Promise.all([loadTexture(playImageUrl, 1, "image/png"), loadTexture(pauseImageUrl, 1, "image/png")]);
+  return Promise.all([
+    loadTexture(playImageUrl, 1, "image/png"),
+    loadTexture(pauseImageUrl, 1, "image/png"),
+    loadTexture(snapIconSrc, 1, "image/png")
+  ]);
 }
 
 const uiZ = 0.001;
+const BUTTON_HEIGHT = 0.2;
+const BIG_BUTTON_SCALE: ArrayVec3 = [0.8, 0.8, 0.8];
+const BUTTON_SCALE: ArrayVec3 = [0.6, 0.6, 0.6];
+const BUTTON_WIDTH = 0.2;
 
 function Slider({ trackRef, headRef, ...props }: any) {
   return (
@@ -44,10 +53,10 @@ function VideoActionButton({ buttonIcon, ...props }: VideoButtonProps) {
   const { texture, cacheKey } = loadTextureFromCache(buttonIcon, 1);
   return (
     <Button3D
-      position={[0, 0, uiZ]}
-      scale={[1, 1, 1]}
-      width={0.2}
-      height={0.2}
+      position={[0, -0.1, uiZ]}
+      scale={BIG_BUTTON_SCALE}
+      width={BUTTON_HEIGHT}
+      height={BUTTON_WIDTH}
       type={BUTTON_TYPES.DEFAULT}
       icon={{ texture, cacheKey, scale: [0.165, 0.165, 0.165] }}
       {...props}
@@ -55,6 +64,21 @@ function VideoActionButton({ buttonIcon, ...props }: VideoButtonProps) {
   );
 }
 
+function SnapButton(props: Attrs) {
+  const { texture, cacheKey } = loadTextureFromCache(snapIconSrc, 1);
+  return (
+    <Button3D
+      name="Remove Button"
+      scale={BUTTON_SCALE}
+      width={BUTTON_HEIGHT}
+      height={BUTTON_WIDTH}
+      type={BUTTON_TYPES.ACTION}
+      icon={{ texture, cacheKey, scale: [0.165, 0.165, 0.165] }}
+      {...props}
+    />
+  );
+}
+
 export function VideoMenuPrefab() {
   const timeLabelRef = createRef();
   const sliderRef = createRef();
@@ -62,13 +86,14 @@ export function VideoMenuPrefab() {
   const trackRef = createRef();
   const playIndicatorRef = createRef();
   const pauseIndicatorRef = createRef();
+  const snapRef = createRef();
   const halfHeight = 9 / 16 / 2;
 
   return (
     <entity
       name="Video Menu"
       objectMenuTransform={{ center: false }}
-      videoMenu={{ sliderRef, timeLabelRef, headRef, trackRef, playIndicatorRef, pauseIndicatorRef }}
+      videoMenu={{ sliderRef, timeLabelRef, headRef, trackRef, playIndicatorRef, pauseIndicatorRef, snapRef }}
     >
       <Label
         name="Time Label"
@@ -77,6 +102,7 @@ export function VideoMenuPrefab() {
         scale={[0.5, 0.5, 0.5]}
         position={[0.5 - 0.02, halfHeight - 0.02, uiZ]}
       />
+      <SnapButton name="Snap Button" ref={snapRef} position={[0.0, 0.2, uiZ]} />
       <Slider ref={sliderRef} trackRef={trackRef} headRef={headRef} position={[0, -halfHeight + 0.025, uiZ]} />
       <VideoActionButton ref={playIndicatorRef} name={"Play Button"} buttonIcon={playImageUrl} />
       <VideoActionButton ref={pauseIndicatorRef} name={"Pause Button"} buttonIcon={pauseImageUrl} />
diff --git a/src/systems/hubs-systems.ts b/src/systems/hubs-systems.ts
index 9ed0b166a1..45a1e1d82e 100644
--- a/src/systems/hubs-systems.ts
+++ b/src/systems/hubs-systems.ts
@@ -91,6 +91,7 @@ import { linkedMediaSystem } from "../bit-systems/linked-media-system";
 import { linkedVideoSystem } from "../bit-systems/linked-video-system";
 import { linkedPDFSystem } from "../bit-systems/linked-pdf-system";
 import { inspectSystem } from "../bit-systems/inspect-system";
+import { snapMediaSystem } from "../bit-systems/snap-media-system";
 
 declare global {
   interface Window {
@@ -298,6 +299,7 @@ export function mainTick(xrFrame: XRFrame, renderer: WebGLRenderer, scene: Scene
   audioDebugSystem(world);
 
   bitPenCompatSystem(world, aframeSystems["pen-tools"]);
+  snapMediaSystem(world, aframeSystems["hubs-systems"].soundEffectsSystem);
 
   deleteEntitySystem(world, aframeSystems.userinput);
   destroyAtExtremeDistanceSystem(world);
diff --git a/src/utils/jsx-entity.ts b/src/utils/jsx-entity.ts
index 75dd155c56..3803b90f9a 100644
--- a/src/utils/jsx-entity.ts
+++ b/src/utils/jsx-entity.ts
@@ -289,6 +289,7 @@ export interface JSXComponentData extends ComponentData {
     headRef: Ref;
     playIndicatorRef: Ref;
     pauseIndicatorRef: Ref;
+    snapRef: Ref;
   };
   videoMenuItem?: true;
   cursorRaycastable?: true;
@@ -345,6 +346,7 @@ export interface JSXComponentData extends ComponentData {
     prevButtonRef: Ref;
     nextButtonRef: Ref;
     pageLabelRef: Ref;
+    snapRef: Ref;
   };
   cameraTool?: {
     snapMenuRef: Ref;
diff --git a/src/utils/load-pdf.tsx b/src/utils/load-pdf.tsx
index 0aacca3afa..8067b853c7 100644
--- a/src/utils/load-pdf.tsx
+++ b/src/utils/load-pdf.tsx
@@ -21,7 +21,7 @@ function* createPDFResources(url: string): Generator<any, PDFResources, any> {
   material.map = texture;
   material.side = DoubleSide;
   material.transparent = false;
-  return { pdf, canvasContext, material };
+  return { pdf, canvas, canvasContext, material };
 }
 
 export function* loadPDF(world: HubsWorld, eid: EntityID, url: string, isNetworked: boolean) {

From 862c74a383c8796f320c6030ec6f0d3cd17e1709 Mon Sep 17 00:00:00 2001
From: Manuel Martin <manmartin@mozilla.com>
Date: Wed, 24 Jan 2024 14:49:38 +0100
Subject: [PATCH 2/3] Do not show snap button for audio media

---
 src/bit-components.js                | 3 ++-
 src/bit-systems/media-loading.ts     | 1 +
 src/bit-systems/video-menu-system.ts | 4 ++++
 src/prefabs/video-menu.tsx           | 4 ++--
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/bit-components.js b/src/bit-components.js
index b2e11f3e57..5ce85dfe9e 100644
--- a/src/bit-components.js
+++ b/src/bit-components.js
@@ -178,7 +178,8 @@ export const MediaContentBounds = defineComponent({
 });
 export const MediaInfo = defineComponent({
   accessibleUrl: Types.ui32,
-  contentType: Types.ui32
+  contentType: Types.ui32,
+  mediaType: Types.ui8
 });
 MediaInfo.accessibleUrl[$isStringType] = true;
 MediaInfo.contentType[$isStringType] = true;
diff --git a/src/bit-systems/media-loading.ts b/src/bit-systems/media-loading.ts
index 879f4be40c..fe3681e302 100644
--- a/src/bit-systems/media-loading.ts
+++ b/src/bit-systems/media-loading.ts
@@ -282,6 +282,7 @@ function* loadMedia(world: HubsWorld, eid: EntityID) {
     addComponent(world, MediaInfo, media);
     MediaInfo.accessibleUrl[media] = APP.getSid(urlData.accessibleUrl);
     MediaInfo.contentType[media] = APP.getSid(urlData.contentType);
+    MediaInfo.mediaType[media] = urlData.mediaType || 0;
   } catch (e) {
     console.error(e);
     media = renderAsEntity(world, ErrorObject());
diff --git a/src/bit-systems/video-menu-system.ts b/src/bit-systems/video-menu-system.ts
index 12e8d2dbab..2224de0822 100644
--- a/src/bit-systems/video-menu-system.ts
+++ b/src/bit-systems/video-menu-system.ts
@@ -11,6 +11,7 @@ import {
   HeldRemoteRight,
   HoveredRemoteRight,
   Interacted,
+  MediaInfo,
   MediaLoader,
   MediaSnapped,
   MediaVideo,
@@ -28,6 +29,7 @@ import { Emitter2Audio } from "./audio-emitter-system";
 import { EntityID } from "../utils/networking-types";
 import { findAncestorWithComponent, hasAnyComponent } from "../utils/bit-utils";
 import { ObjectMenuTransformFlags } from "../inflators/object-menu-transform";
+import { MediaType } from "../utils/media-utils";
 
 const videoMenuQuery = defineQuery([VideoMenu]);
 const hoveredQuery = defineQuery([HoveredRemoteRight]);
@@ -112,6 +114,8 @@ function flushToObject3Ds(world: HubsWorld, menu: EntityID, frozen: boolean) {
     APP.world.scene.add(obj);
     ObjectMenuTransform.targetObjectRef[menu] = target;
     ObjectMenuTransform.flags[menu] |= ObjectMenuTransformFlags.Enabled;
+    const snapButton = world.eid2obj.get(VideoMenu.snapRef[menu])!;
+    snapButton.visible = MediaInfo.mediaType[target] === MediaType.VIDEO;
   } else {
     obj.removeFromParent();
     setCursorRaycastable(world, menu, false);
diff --git a/src/prefabs/video-menu.tsx b/src/prefabs/video-menu.tsx
index 4b30ac4374..8cecb41e0d 100644
--- a/src/prefabs/video-menu.tsx
+++ b/src/prefabs/video-menu.tsx
@@ -53,7 +53,7 @@ function VideoActionButton({ buttonIcon, ...props }: VideoButtonProps) {
   const { texture, cacheKey } = loadTextureFromCache(buttonIcon, 1);
   return (
     <Button3D
-      position={[0, -0.1, uiZ]}
+      position={[0, 0, uiZ]}
       scale={BIG_BUTTON_SCALE}
       width={BUTTON_HEIGHT}
       height={BUTTON_WIDTH}
@@ -102,7 +102,7 @@ export function VideoMenuPrefab() {
         scale={[0.5, 0.5, 0.5]}
         position={[0.5 - 0.02, halfHeight - 0.02, uiZ]}
       />
-      <SnapButton name="Snap Button" ref={snapRef} position={[0.0, 0.2, uiZ]} />
+      <SnapButton name="Snap Button" ref={snapRef} position={[0, 0.2, uiZ]} />
       <Slider ref={sliderRef} trackRef={trackRef} headRef={headRef} position={[0, -halfHeight + 0.025, uiZ]} />
       <VideoActionButton ref={playIndicatorRef} name={"Play Button"} buttonIcon={playImageUrl} />
       <VideoActionButton ref={pauseIndicatorRef} name={"Pause Button"} buttonIcon={pauseImageUrl} />

From 75efc6111c89026b04a51dd7f122e1d84de12f02 Mon Sep 17 00:00:00 2001
From: Manuel Martin <manmartin@mozilla.com>
Date: Wed, 24 Jan 2024 15:52:24 +0100
Subject: [PATCH 3/3] Place snapped object around original

---
 src/bit-systems/snap-media-system.ts | 67 +++++++++++++++++++++++++++-
 1 file changed, 65 insertions(+), 2 deletions(-)

diff --git a/src/bit-systems/snap-media-system.ts b/src/bit-systems/snap-media-system.ts
index 64b4dfce07..807f93be3d 100644
--- a/src/bit-systems/snap-media-system.ts
+++ b/src/bit-systems/snap-media-system.ts
@@ -5,10 +5,21 @@ import { SOUND_CAMERA_TOOL_TOOK_SNAPSHOT } from "../systems/sound-effects-system
 import { JobRunner } from "../utils/coroutine-utils";
 import { EntityID } from "../utils/networking-types";
 import { PDFResourcesMap } from "./pdf-system";
-import { spawnFromFileList } from "../load-media-on-paste-or-drop";
+import { guessContentType } from "../utils/media-url-utils";
+import { upload } from "../utils/media-utils";
+import qsTruthy from "../utils/qs_truthy";
+import { createNetworkedMedia } from "../utils/create-networked-entity";
+import { Quaternion, Vector3 } from "three";
+import { MediaLoaderParams } from "../inflators/media-loader";
+import { animate } from "../utils/animate";
+import { easeOutQuadratic } from "../utils/easing";
+import { crNextFrame } from "../utils/coroutine";
 
 const TYPE_IMG_PNG = { type: "image/png" };
 
+const finalPos = new Vector3();
+const intialPos = new Vector3();
+const tmpQuat = new Quaternion();
 export function* snapMedia(world: HubsWorld, eid: EntityID) {
   let canvas: HTMLCanvasElement | undefined;
   if (hasComponent(world, MediaPDF, eid)) {
@@ -34,7 +45,59 @@ export function* snapMedia(world: HubsWorld, eid: EntityID) {
     });
     if (blob) {
       const file = new File([yield blob], "snap.png", TYPE_IMG_PNG);
-      spawnFromFileList([file] as any);
+      const desiredContentType = file.type || guessContentType(file.name);
+      const uploadPromise = new Promise((resolve, reject) => {
+        upload(file, desiredContentType)
+          .then(function (response) {
+            const srcUrl = new URL(response.origin);
+            srcUrl.searchParams.set("token", response.meta.access_token);
+            resolve({
+              src: srcUrl.href,
+              recenter: true,
+              resize: !qsTruthy("noResize"),
+              animateLoad: true,
+              fileId: response.file_id,
+              isObjectMenuTarget: true
+            });
+          })
+          .catch(e => {
+            console.error("Media upload failed", e);
+            reject({
+              src: "error",
+              recenter: true,
+              resize: !qsTruthy("noResize"),
+              animateLoad: true,
+              isObjectMenuTarget: true
+            });
+          });
+      });
+
+      const params: MediaLoaderParams = yield uploadPromise;
+      const snappedEid = createNetworkedMedia(APP.world, params);
+      const idx = (Math.floor(Math.random() * 100) % 6) + 3;
+      finalPos.set(
+        Math.cos(Math.PI * 2 * (idx / 6.0)) * 0.75,
+        Math.sin(Math.PI * 2 * (idx / 6.0)) * 0.75,
+        -0.05 + idx * 0.001
+      );
+      const sourceObj = world.eid2obj.get(eid)!;
+      sourceObj.localToWorld(finalPos);
+      const snappedObj = APP.world.eid2obj.get(snappedEid)!;
+      sourceObj.getWorldQuaternion(tmpQuat);
+      snappedObj.quaternion.copy(tmpQuat);
+
+      const onAnimate = ([pos]: [Vector3]) => {
+        snappedObj.position.copy(pos);
+        snappedObj.matrixNeedsUpdate = true;
+      };
+      yield crNextFrame();
+      sourceObj.getWorldPosition(intialPos);
+      yield* animate({
+        properties: [[intialPos, finalPos]],
+        durationMS: 400,
+        easing: easeOutQuadratic,
+        fn: onAnimate
+      });
     } else {
       console.error("Snapped image creation error");
     }