Move to using a MediaLink component

Hubs-Foundation · Oct 2, 2023 · c619017 · c619017
1 parent 6f76917
commit c619017
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 23 deletions.
diff --git a/src/bit-components.js b/src/bit-components.js
@@ -152,8 +152,7 @@ export const MyCameraTool = defineComponent();
 export const MediaLoader = defineComponent({
   src: Types.ui32,
   flags: Types.ui8,
-  fileId: Types.ui32,
-  linkSrc: Types.ui32
+  fileId: Types.ui32
 });
 MediaLoader.src[$isStringType] = true;
 MediaLoader.fileId[$isStringType] = true;
@@ -388,3 +387,7 @@ export const LinearScale = defineComponent({
 export const Quack = defineComponent();
 export const TrimeshTag = defineComponent();
 export const HeightFieldTag = defineComponent();
+export const MediaLink = defineComponent({
+  src: Types.ui32
+});
+MediaLink.src[$isStringType] = true;
diff --git a/src/bit-systems/media-loading.ts b/src/bit-systems/media-loading.ts
@@ -7,6 +7,7 @@ import {
   MediaContentBounds,
   MediaImageLoaderData,
   MediaInfo,
+  MediaLink,
   MediaLoaded,
   MediaLoader,
   MediaVideoLoaderData,
@@ -219,9 +220,8 @@ function* loadByMediaType(
       throw new UnsupportedMediaTypeError(eid, mediaType);
   }
 
-  const linkSrc = APP.getString(MediaLoader.linkSrc[eid]);
-  if (linkSrc) {
-    inflateLink(world, mediaEid, { href: linkSrc, type: LinkType.LINK });
+  if (hasComponent(world, MediaLink, eid)) {
+    inflateLink(world, mediaEid, { href: APP.getString(MediaLink.src[eid])!, type: LinkType.LINK });
     inflateGrabbable(world, mediaEid, { cursor: true, hand: false });
   }
 

diff --git a/src/components/gltf-model-plus.js b/src/components/gltf-model-plus.js
@@ -584,7 +584,9 @@ class GLTFHubsComponentsExtension {
           if (shouldUseNewLoader()) {
             if (Object.prototype.hasOwnProperty.call(ext, "link")) {
               if (["image", "video", "model"].includes(componentName)) {
-                props["linkSrc"] = ext.link.href;
+                ext["media-link"] = {
+                  src: ext.link.href
+                };
                 delete ext.link;
               }
             }

diff --git a/src/inflators/image-loader.ts b/src/inflators/image-loader.ts
@@ -9,8 +9,6 @@ export interface ImageLoaderParams {
   projection: ProjectionModeName;
   alphaMode: AlphaModeName;
   alphaCutoff: number;
-  linkSrc?: string;
-  controls: true;
 }
 
 const DEFAULTS: Partial<ImageLoaderParams> = {
@@ -25,8 +23,7 @@ export function inflateImageLoader(world: HubsWorld, eid: number, params: ImageL
     recenter: false,
     resize: false,
     animateLoad: false,
-    isObjectMenuTarget: params.linkSrc && params.controls ? true : false,
-    linkSrc: params.controls ? params.linkSrc : undefined
+    isObjectMenuTarget: false
   });
 
   const requiredParams = Object.assign({}, DEFAULTS, params) as Required<ImageLoaderParams>;

diff --git a/src/inflators/media-link.ts b/src/inflators/media-link.ts
@@ -0,0 +1,13 @@
+import { addComponent } from "bitecs";
+import { HubsWorld } from "../app";
+import { EntityID } from "../utils/networking-types";
+import { MediaLink } from "../bit-components";
+
+export type MediaLinkParams = {
+  src: string;
+};
+
+export function inflateMediaLink(world: HubsWorld, eid: EntityID, params: MediaLinkParams) {
+  addComponent(world, MediaLink, eid);
+  MediaLink.src[eid] = APP.getSid(params.src);
+}
diff --git a/src/inflators/media-loader.ts b/src/inflators/media-loader.ts
@@ -10,13 +10,12 @@ export type MediaLoaderParams = {
   animateLoad: boolean;
   fileId?: string;
   isObjectMenuTarget: boolean;
-  linkSrc?: string;
 };
 
 export function inflateMediaLoader(
   world: HubsWorld,
   eid: number,
-  { src, recenter, resize, animateLoad, fileId, isObjectMenuTarget, linkSrc }: MediaLoaderParams
+  { src, recenter, resize, animateLoad, fileId, isObjectMenuTarget }: MediaLoaderParams
 ) {
   addComponent(world, MediaLoader, eid);
   let flags = 0;
@@ -29,7 +28,4 @@ export function inflateMediaLoader(
     MediaLoader.fileId[eid] = APP.getSid(fileId)!;
   }
   MediaLoader.src[eid] = APP.getSid(src)!;
-  if (linkSrc) {
-    MediaLoader.linkSrc[eid] = APP.getSid(linkSrc)!;
-  }
 }
diff --git a/src/inflators/model-loader.ts b/src/inflators/model-loader.ts
@@ -3,7 +3,6 @@ import { inflateMediaLoader } from "./media-loader";
 
 export type ModelLoaderParams = {
   src: string;
-  linkSrc?: string;
 };
 
 export function inflateModelLoader(world: HubsWorld, eid: number, params: ModelLoaderParams) {
@@ -12,7 +11,6 @@ export function inflateModelLoader(world: HubsWorld, eid: number, params: ModelL
     recenter: true,
     resize: false,
     animateLoad: false,
-    isObjectMenuTarget: params.linkSrc ? true : false,
-    linkSrc: params.linkSrc
+    isObjectMenuTarget: false
   });
 }
diff --git a/src/inflators/video-loader.ts b/src/inflators/video-loader.ts
@@ -9,7 +9,6 @@ export interface VideoLoaderParams {
   autoPlay: boolean;
   controls: boolean;
   loop: boolean;
-  linkSrc?: string;
 }
 
 const DEFAULTS: Partial<VideoLoaderParams> = {
@@ -25,8 +24,7 @@ export function inflateVideoLoader(world: HubsWorld, eid: number, params: VideoL
     recenter: false,
     resize: false,
     animateLoad: false,
-    isObjectMenuTarget: params.linkSrc && params.controls ? true : false,
-    linkSrc: params.controls ? params.linkSrc : undefined
+    isObjectMenuTarget: false
   });
 
   const requiredParams = Object.assign({}, DEFAULTS, params) as Required<VideoLoaderParams>;

diff --git a/src/utils/jsx-entity.ts b/src/utils/jsx-entity.ts
@@ -98,6 +98,7 @@ import { inflateTrimesh } from "../inflators/trimesh";
 import { HeightFieldParams, inflateHeightField } from "../inflators/heightfield";
 import { inflateAudioSettings } from "../inflators/audio-settings";
 import { HubsVideoTexture } from "../textures/HubsVideoTexture";
+import { inflateMediaLink, MediaLinkParams } from "../inflators/media-link";
 
 preload(
   new Promise(resolve => {
@@ -380,6 +381,7 @@ export interface GLTFComponentData extends ComponentData {
   zoneAudioSource: AudioSourceParams;
   audioTarget: AudioTargetParams;
   audioSettings: SceneAudioSettings;
+  mediaLink: MediaLinkParams;
 
   // deprecated
   spawnPoint?: true;
@@ -472,7 +474,7 @@ const jsxInflators: Required<{ [K in keyof JSXComponentData]: InflatorFn }> = {
   model: inflateModel,
   image: inflateImage,
   video: inflateVideo,
-  link: inflateLink,
+  link: inflateLink
 };
 
 export const gltfInflators: Required<{ [K in keyof GLTFComponentData]: InflatorFn }> = {
@@ -507,7 +509,8 @@ export const gltfInflators: Required<{ [K in keyof GLTFComponentData]: InflatorF
   boxCollider: inflateBoxCollider,
   trimesh: inflateTrimesh,
   heightfield: inflateHeightField,
-  audioSettings: inflateAudioSettings
+  audioSettings: inflateAudioSettings,
+  mediaLink: inflateMediaLink
 };
 
 function jsxInflatorExists(name: string): name is keyof JSXComponentData {