Pinning/Unpinning interaction and media promotion checks for bitECS + entity state API

src/bit-components.js

@@ -153,10 +153,17 @@ export const CameraTool = defineComponent({
 export const MyCameraTool = defineComponent();
 export const MediaLoader = defineComponent({
   src: Types.ui32,
-  flags: Types.ui8
+  flags: Types.ui8,
+  fileId: Types.ui32
 });
 MediaLoader.src[$isStringType] = true;
-export const MediaLoaded = defineComponent();
+MediaLoader.fileId[$isStringType] = true;
+export const MediaLoaded = defineComponent({
+  fileId: Types.ui8,
+  src: Types.ui32
+});
+MediaLoaded.fileId[$isStringType] = true;
+MediaLoaded.src[$isStringType] = true;
 export const MediaContentBounds = defineComponent({
   bounds: [Types.f32, 3]
 });

src/bit-systems/media-loading.ts

@@ -79,8 +79,9 @@ const loaderForMediaType = {
     { accessibleUrl, contentType }: { accessibleUrl: string; contentType: string }
   ) => loadModel(world, accessibleUrl, contentType, true),
   [MediaType.PDF]: (world: HubsWorld, { accessibleUrl }: { accessibleUrl: string }) => loadPDF(world, accessibleUrl),
-  [MediaType.AUDIO]: (world: HubsWorld, { accessibleUrl }: { accessibleUrl: string }) => loadAudio(world, accessibleUrl),
-  [MediaType.HTML]: (world: HubsWorld, { canonicalUrl, thumbnail }: { canonicalUrl: string, thumbnail: string }) =>
+  [MediaType.AUDIO]: (world: HubsWorld, { accessibleUrl }: { accessibleUrl: string }) =>
+    loadAudio(world, accessibleUrl),
+  [MediaType.HTML]: (world: HubsWorld, { canonicalUrl, thumbnail }: { canonicalUrl: string; thumbnail: string }) =>
     loadHtml(world, canonicalUrl, thumbnail)
 };
 
@@ -216,6 +217,9 @@ function* loadAndAnimateMedia(world: HubsWorld, eid: EntityID, clearRollbacks: C
   if (MediaLoader.flags[eid] & MEDIA_LOADER_FLAGS.ANIMATE_LOAD) {
     yield* animateScale(world, media);
   }
+  addComponent(world, MediaLoaded, eid);
+  MediaLoaded.fileId[eid] = MediaLoader.fileId[eid];
+  MediaLoaded.src[eid] = MediaLoader.src[eid];
   removeComponent(world, MediaLoader, eid);
 
   if (media) {

src/bit-systems/network-receive-system.ts

@@ -1,6 +1,6 @@
 import { addComponent, defineQuery, enterQuery, hasComponent, removeComponent, removeEntity } from "bitecs";
 import { HubsWorld } from "../app";
-import { Networked, Owned } from "../bit-components";
+import { Networked, Owned, Pinnable, Pinned } from "../bit-components";
 import { renderAsNetworkedEntity } from "../utils/create-networked-entity";
 import { deleteEntityState, hasSavedEntityState } from "../utils/entity-state-utils";
 import { networkableComponents, schemas, StoredComponent } from "../utils/network-schemas";
@@ -12,6 +12,7 @@ import {
   createMessageDatas,
   disconnectedClientIds,
   isNetworkInstantiated,
+  isPinned,
   localClientID,
   networkedQuery,
   pendingCreatorChanges,
@@ -141,7 +142,6 @@ export function networkReceiveSystem(world: HubsWorld) {
         world.ignoredNids.add(nid);
         continue;
       }
-
       renderAsNetworkedEntity(world, prefabName, initialData, nidString, creator);
     }
   }
@@ -229,6 +229,10 @@ export function networkReceiveSystem(world: HubsWorld) {
         removeComponent(world, Owned, eid);
       }
 
+      if (isPinned(eid) && hasComponent(world, Pinnable, eid)) {
+        addComponent(world, Pinned, eid);
+      }
+
       Networked.owner[eid] = APP.getSid(updateMessage.owner);
       Networked.lastOwnerTime[eid] = updateMessage.lastOwnerTime;
       Networked.timestamp[eid] = updateMessage.timestamp;

src/bit-systems/object-menu.ts

@@ -1,25 +1,30 @@
-import { defineQuery, enterQuery, entityExists, exitQuery, hasComponent } from "bitecs";
+import { addComponent, defineQuery, enterQuery, entityExists, exitQuery, hasComponent, removeComponent } from "bitecs";
 import { Matrix4, Quaternion, Vector3 } from "three";
 import type { HubsWorld } from "../app";
 import {
   HeldRemoteRight,
   HoveredRemoteRight,
   Interacted,
+  MediaLoaded,
   ObjectMenu,
   ObjectMenuTarget,
+  Pinnable,
+  Pinned,
   RemoteRight,
   Rigidbody
 } from "../bit-components";
 import { anyEntityWith, findAncestorWithComponent } from "../utils/bit-utils";
 import { createNetworkedEntity } from "../utils/create-networked-entity";
-import { createEntityState, deleteEntityState } from "../utils/entity-state-utils";
 import HubChannel from "../utils/hub-channel";
 import type { EntityID } from "../utils/networking-types";
 import { setMatrixWorld } from "../utils/three-utils";
 import { deleteTheDeletableAncestor } from "./delete-entity-system";
-import { createMessageDatas, isPinned } from "./networking";
+import { createMessageDatas } from "./networking";
 import { TRANSFORM_MODE } from "../components/transform-object-button";
 import { ScalingHandler } from "../components/scale-button";
+import { setPinned } from "../utils/bit-pinning-helper";
+import { getPromotionTokenForFile } from "../utils/media-utils";
+import { get } from "react-hook-form";
 
 // Working variables.
 const _vec3_1 = new Vector3();
@@ -148,9 +153,9 @@ function cloneObject(world: HubsWorld, sourceEid: EntityID) {
 
 function handleClicks(world: HubsWorld, menu: EntityID, hubChannel: HubChannel) {
   if (clicked(world, ObjectMenu.pinButtonRef[menu])) {
-    createEntityState(hubChannel, world, ObjectMenu.targetRef[menu]);
+    setPinned(hubChannel, world, ObjectMenu.targetRef[menu], true);
   } else if (clicked(world, ObjectMenu.unpinButtonRef[menu])) {
-    deleteEntityState(hubChannel, world, ObjectMenu.targetRef[menu]);
+    setPinned(hubChannel, world, ObjectMenu.targetRef[menu], false);
   } else if (clicked(world, ObjectMenu.cameraFocusButtonRef[menu])) {
     console.log("Clicked focus");
   } else if (clicked(world, ObjectMenu.cameraTrackButtonRef[menu])) {
@@ -203,8 +208,15 @@ function updateVisibility(world: HubsWorld, menu: EntityID, frozen: boolean) {
   const obj = world.eid2obj.get(menu)!;
   obj.visible = visible;
 
-  world.eid2obj.get(ObjectMenu.pinButtonRef[menu])!.visible = visible && !isPinned(target);
-  world.eid2obj.get(ObjectMenu.unpinButtonRef[menu])!.visible = visible && isPinned(target);
+  if (hasComponent(world, Pinnable, target)) {
+    if (hasComponent(world, Pinned, target)) {
+      world.eid2obj.get(ObjectMenu.unpinButtonRef[menu])!.visible = visible;
+    } else {
+      const fileId = APP.getString(MediaLoaded.fileId[target]);
+      const canPin = !fileId || getPromotionTokenForFile(fileId);
+      world.eid2obj.get(ObjectMenu.pinButtonRef[menu])!.visible = visible && canPin;
+    }
+  }
 
   [
     ObjectMenu.cameraFocusButtonRef[menu],

src/inflators/media-loader.ts

@@ -8,13 +8,14 @@ export type MediaLoaderParams = {
   resize: boolean;
   recenter: boolean;
   animateLoad: boolean;
+  fileId?: string;
   isObjectMenuTarget: boolean;
 };
 
 export function inflateMediaLoader(
   world: HubsWorld,
   eid: number,
-  { src, recenter, resize, animateLoad, isObjectMenuTarget }: MediaLoaderParams
+  { src, recenter, resize, animateLoad, fileId, isObjectMenuTarget }: MediaLoaderParams
 ) {
   addComponent(world, MediaLoader, eid);
   let flags = 0;
@@ -23,5 +24,8 @@ export function inflateMediaLoader(
   if (animateLoad) flags |= MEDIA_LOADER_FLAGS.ANIMATE_LOAD;
   if (isObjectMenuTarget) flags |= MEDIA_LOADER_FLAGS.IS_OBJECT_MENU_TARGET;
   MediaLoader.flags[eid] = flags;
+  if (fileId) {
+    MediaLoader.fileId[eid] = APP.getSid(fileId)!;
+  }
   MediaLoader.src[eid] = APP.getSid(src)!;
 }

src/load-media-on-paste-or-drop.ts

@@ -51,6 +51,7 @@ export async function spawnFromFileList(files: FileList) {
           recenter: true,
           resize: !qsTruthy("noResize"),
           animateLoad: true,
+          fileId: response.file_id,
           isObjectMenuTarget: true
         };
       })
@@ -61,6 +62,7 @@ export async function spawnFromFileList(files: FileList) {
           recenter: true,
           resize: !qsTruthy("noResize"),
           animateLoad: true,
+          fileId: null,
           isObjectMenuTarget: true
         };
       });

src/prefabs/media.tsx

@@ -13,6 +13,7 @@ export function MediaPrefab(params: MediaLoaderParams): EntityDef {
       networkedTransform
       mediaLoader={params}
       deletable
+      pinnable
       grabbable={{ cursor: true, hand: true }}
       destroyAtExtremeDistance
       floatyObject={{

src/utils/bit-pinning-helper.ts

@@ -0,0 +1,49 @@
+import { HubsWorld } from "../app";
+import { MediaLoaded } from "../bit-components";
+import { createEntityState, deleteEntityState } from "./entity-state-utils";
+import HubChannel from "./hub-channel";
+import { takeOwnership } from "./take-ownership";
+
+export const setPinned = async (hubChannel: HubChannel, world: HubsWorld, eid: number, shouldPin: boolean) => {
+  _signInAndPinOrUnpinElement(hubChannel, world, eid, shouldPin);
+};
+
+const _pinElement = async (hubChannel: HubChannel, world: HubsWorld, eid: number) => {
+  const src = APP.getString(MediaLoaded.src[eid]);
+  const fileId = APP.getString(MediaLoaded.fileId[eid]);
+  let fileAccessToken, promotionToken;
+  if (src) {
+    fileAccessToken = new URL(src).searchParams.get("token") as string;
+    const storedPromotionToken = APP.store.state.uploadPromotionTokens.find(
+      (upload: { fileId: string }) => upload.fileId === fileId
+    );
+    if (storedPromotionToken) {
+      promotionToken = storedPromotionToken.promotionToken;
+    }
+  }
+
+  try {
+    await createEntityState(hubChannel, world, eid, fileId!, fileAccessToken, promotionToken);
+    takeOwnership(world, eid);
+  } catch (e) {
+    if (e.reason === "invalid_token") {
+      // TODO: Sign out and sign in again
+      // signInAndPinOrUnpinElement(el);
+      console.log("PinningHelper: Pin failed due to invalid token, signing out and trying again", e);
+    } else {
+      console.warn("PinningHelper: Pin failed for unknown reason", e);
+    }
+  }
+};
+
+const unpinElement = (hubChannel: HubChannel, world: HubsWorld, eid: number) => {
+  deleteEntityState(hubChannel, world, eid);
+};
+
+const _signInAndPinOrUnpinElement = (hubChannel: HubChannel, world: HubsWorld, eid: number, shouldPin: boolean) => {
+  const action = shouldPin ? () => _pinElement(hubChannel, world, eid) : () => unpinElement(hubChannel, world, eid);
+
+  // TODO: Perform conditional sign in
+
+  action();
+};

src/utils/entity-state-utils.ts

@@ -29,6 +29,9 @@ export type CreateEntityStatePayload = {
   nid: NetworkID;
   create_message: CreateMessage;
   updates: UpdateEntityStatePayload[];
+  file_id?: string;
+  file_access_token?: string;
+  promotion_token?: string;
 };
 
 export type DeleteEntityStatePayload = {
@@ -42,15 +45,27 @@ export function hasSavedEntityState(world: HubsWorld, eid: EntityID) {
   });
 }
 
-export async function createEntityState(hubChannel: HubChannel, world: HubsWorld, eid: EntityID) {
+export async function createEntityState(
+  hubChannel: HubChannel,
+  world: HubsWorld,
+  eid: EntityID,
+  fileId?: string,
+  fileAccessToken?: string,
+  promotionToken?: string
+) {
   const payload = createEntityStatePayload(world, eid);
+  if (fileId && promotionToken) {
+    payload.file_id = fileId;
+    payload.file_access_token = fileAccessToken;
+    payload.promotion_token = promotionToken;
+  }
   // console.log("save_entity_state",  payload);
   return push(hubChannel, "save_entity_state", payload);
 }
 
 export async function updateEntityState(hubChannel: HubChannel, world: HubsWorld, eid: EntityID) {
   const payload = updateEntityStatePayload(world, eid);
-  // console.log("update_entity_state",  payload);
+  // console.log("update_entity_state", payload);
   return push(hubChannel, "update_entity_state", payload);
 }
 

src/utils/jsx-entity.ts

@@ -39,7 +39,8 @@ import {
   VideoTextureSource,
   Quack,
   Mirror,
-  MixerAnimatableInitialize
+  MixerAnimatableInitialize,
+  Pinnable
 } from "../bit-components";
 import { inflateMediaLoader } from "../inflators/media-loader";
 import { inflateMediaFrame } from "../inflators/media-frame";
@@ -311,6 +312,7 @@ export interface JSXComponentData extends ComponentData {
   rigidbody?: OptionalParams<RigidBodyParams>;
   physicsShape?: OptionalParams<PhysicsShapeParams>;
   floatyObject?: any;
+  pinnable?: any;
   networkedFloatyObject?: any;
   networkedTransform?: any;
   objectMenu?: {
@@ -451,6 +453,7 @@ const jsxInflators: Required<{ [K in keyof JSXComponentData]: InflatorFn }> = {
   networkedTransform: createDefaultInflator(NetworkedTransform),
   networked: createDefaultInflator(Networked),
   objectMenu: createDefaultInflator(ObjectMenu),
+  pinnable: createDefaultInflator(Pinnable),
   linkHoverMenu: createDefaultInflator(LinkHoverMenu),
   linkHoverMenuItem: createDefaultInflator(LinkHoverMenuItem),
   pdfMenu: createDefaultInflator(PDFMenu),

src/utils/listen-for-network-messages.ts

@@ -1,3 +1,4 @@
+import { addComponent, hasComponent, removeComponent } from "bitecs";
 import {
   connectedClientIds,
   disconnectedClientIds,
@@ -9,6 +10,7 @@ import {
 } from "../bit-systems/networking";
 import { EntityState } from "./entity-state-utils";
 import type { ClientID, CreatorChange, Message } from "./networking-types";
+import { Pinnable, Pinned } from "../bit-components";
 
 type Emitter = {
   on: (event: string, callback: (a: any) => any) => number;
@@ -91,7 +93,13 @@ export function queueEntityStateAsMessage(entityState: EntityState) {
 }
 
 function onEntityStateCreated(response: { data: EntityState[] }) {
-  // console.log("entity_state_saved", response);
+  const rootNid = APP.getSid(response.data[0]!.create_message.networkId);
+  const eid = APP.world.nid2eid.get(rootNid);
+  if (eid) {
+    if (hasComponent(APP.world, Pinnable, eid)) {
+      addComponent(APP.world, Pinned, eid);
+    }
+  }
   queueEntityStateAsMessage(response.data[0]!);
 }
 
@@ -100,6 +108,10 @@ function onEntityStateUpdated(_response: any) {
 }
 
 function onEntityStateDeleted(response: CreatorChange) {
-  // console.log("entity_state_deleted", response);
+  const rootNid = APP.getSid(response.nid);
+  const eid = APP.world.nid2eid.get(rootNid);
+  if (eid) {
+    removeComponent(APP.world, Pinned, eid);
+  }
   pendingCreatorChanges.push(response);
 }