Fix media loader initialization

Hubs-Foundation · Aug 9, 2023 · a197395 · a197395
1 parent 63f14b7
commit a197395
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 59 deletions.
diff --git a/src/bit-components.js b/src/bit-components.js
@@ -175,6 +175,10 @@ export const MediaImage = defineComponent({
 MediaImage.cacheKey[$isStringType] = true;
 MediaImage.projection[$isStringType] = true;
 MediaImage.alphaMode[$isStringType] = true;
+/**
+ * @type {Map<EntityId, ImageLoaderParams}>}
+ */
+export const MediaImageLoaderData = new Map();
 
 export const NetworkedPDF = defineComponent({
   pageNumber: Types.ui8
@@ -190,6 +194,10 @@ export const MediaVideo = defineComponent({
   projection: Types.ui8
 });
 MediaVideo.projection[$isStringType] = true;
+/**
+ * @type {Map<EntityId, VideoLoaderParams}>}
+ */
+export const MediaVideoLoaderData = new Map();
 /**
  * @type {Map<EntityId, HTMLVideoElement}>}
  */

diff --git a/src/inflators/image-loader.ts b/src/inflators/image-loader.ts
@@ -1,8 +1,7 @@
 import { HubsWorld } from "../app";
 import { ProjectionMode } from "../utils/projection-mode";
 import { inflateMediaLoader } from "./media-loader";
-import { MediaImage } from "../bit-components";
-import { AlphaMode } from "../utils/create-image-mesh";
+import { MediaImageLoaderData } from "../bit-components";
 
 export interface ImageLoaderParams {
   src: string;
@@ -20,8 +19,5 @@ export function inflateImageLoader(world: HubsWorld, eid: number, params: ImageL
     isObjectMenuTarget: false
   });
 
-  const { projection, alphaMode, alphaCutoff } = params;
-  MediaImage.projection[eid] = APP.getSid(projection !== undefined ? projection : ProjectionMode.FLAT);
-  MediaImage.alphaMode[eid] = APP.getSid(alphaMode !== undefined ? alphaMode : AlphaMode.Opaque);
-  MediaImage.alphaCutoff[eid] = alphaCutoff !== undefined ? alphaCutoff : 0.5;
+  MediaImageLoaderData.set(eid, params);
 }
diff --git a/src/inflators/video-loader.ts b/src/inflators/video-loader.ts
@@ -1,12 +1,11 @@
 import { HubsWorld } from "../app";
-import { MediaVideo } from "../bit-components";
+import { MediaVideoLoaderData } from "../bit-components";
 import { ProjectionMode } from "../utils/projection-mode";
 import { inflateMediaLoader } from "./media-loader";
-import { VIDEO_FLAGS } from "./video";
 
 export interface VideoLoaderParams {
   src: string;
-  projection: ProjectionMode;
+  projection?: ProjectionMode;
   autoPlay: boolean;
   controls: boolean;
   loop: boolean;
@@ -21,9 +20,5 @@ export function inflateVideoLoader(world: HubsWorld, eid: number, params: VideoL
     isObjectMenuTarget: false
   });
 
-  const { autoPlay, controls, loop, projection } = params;
-  autoPlay !== false && (MediaVideo.flags[eid] |= VIDEO_FLAGS.AUTOPLAY);
-  loop !== false && (MediaVideo.flags[eid] |= VIDEO_FLAGS.LOOP);
-  controls !== false && (MediaVideo.flags[eid] |= VIDEO_FLAGS.CONTROLS);
-  MediaVideo.projection[eid] = APP.getSid(projection !== undefined ? projection : ProjectionMode.FLAT);
+  MediaVideoLoaderData.set(eid, params);
 }
diff --git a/src/utils/load-audio.tsx b/src/utils/load-audio.tsx
@@ -6,27 +6,20 @@ import { loadAudioTexture } from "../utils/load-audio-texture";
 import { HubsWorld } from "../app";
 import { HubsVideoTexture } from "../textures/HubsVideoTexture";
 import { EntityID } from "./networking-types";
-import { MediaVideo } from "../bit-components";
-import { VIDEO_FLAGS } from "../inflators/video";
+import { MediaVideoLoaderData } from "../bit-components";
+import { VideoLoaderParams } from "../inflators/video-loader";
 
 export function* loadAudio(world: HubsWorld, eid: EntityID, url: string) {
   let loop = true;
   let autoPlay = true;
   let controls = true;
-  if (MediaVideo.flags[eid]) {
-    loop = (MediaVideo.flags[eid] & VIDEO_FLAGS.LOOP) !== 0;
-    autoPlay = (MediaVideo.flags[eid] & VIDEO_FLAGS.AUTOPLAY) !== 0;
-    controls = (MediaVideo.flags[eid] & VIDEO_FLAGS.CONTROLS) !== 0;
-  } else {
-    MediaVideo.flags[eid] |= VIDEO_FLAGS.AUTOPLAY;
-    MediaVideo.flags[eid] |= VIDEO_FLAGS.LOOP;
-    MediaVideo.flags[eid] |= VIDEO_FLAGS.CONTROLS;
-  }
   let projection = ProjectionMode.FLAT;
-  if (MediaVideo.projection[eid]) {
-    projection = APP.getString(MediaVideo.projection[eid]) as ProjectionMode;
-  } else {
-    MediaVideo.projection[eid] = APP.getSid(ProjectionMode.FLAT);
+  if (MediaVideoLoaderData.has(eid)) {
+    const params = MediaVideoLoaderData.get(eid)! as VideoLoaderParams;
+    loop = params.loop;
+    autoPlay = params.autoPlay;
+    controls = params.controls;
+    MediaVideoLoaderData.delete(eid);
   }
 
   const { texture, ratio, video }: { texture: HubsVideoTexture; ratio: number; video: HTMLVideoElement } =

diff --git a/src/utils/load-image.tsx b/src/utils/load-image.tsx
@@ -7,7 +7,7 @@ import { HubsWorld } from "../app";
 import { Texture } from "three";
 import { AlphaMode } from "./create-image-mesh";
 import { EntityID } from "./networking-types";
-import { MediaImage } from "../bit-components";
+import { MediaImageLoaderData } from "../bit-components";
 import { ImageParams } from "../inflators/image";
 
 export function* createImageDef(world: HubsWorld, url: string, contentType: string): Generator<any, ImageParams, any> {
@@ -37,20 +37,12 @@ export function* createImageDef(world: HubsWorld, url: string, contentType: stri
 export function* loadImage(world: HubsWorld, eid: EntityID, url: string, contentType: string) {
   const imageDef = yield* createImageDef(world, url, contentType);
 
-  if (MediaImage.projection[eid]) {
-    imageDef.projection = APP.getString(MediaImage.projection[eid]) as ProjectionMode;
-  } else {
-    imageDef.projection = ProjectionMode.FLAT;
-  }
-  if (MediaImage.alphaMode[eid]) {
-    imageDef.alphaMode = APP.getString(MediaImage.alphaMode[eid]) as AlphaMode;
-  } else {
-    imageDef.alphaMode = AlphaMode.Opaque;
-  }
-  if (MediaImage.alphaCutoff[eid]) {
-    imageDef.alphaCutoff = MediaImage.alphaCutoff[eid];
-  } else {
-    imageDef.alphaCutoff = 0.5;
+  if (MediaImageLoaderData.has(eid)) {
+    const params = MediaImageLoaderData.get(eid)!;
+    imageDef.projection = params.projection as ProjectionMode;
+    imageDef.alphaMode = params.alphaMode as AlphaMode;
+    imageDef.alphaCutoff = params.alphaCutoff;
+    MediaImageLoaderData.delete(eid);
   }
 
   return renderAsEntity(world, <entity name="Image" image={imageDef} />);

diff --git a/src/utils/load-video.tsx b/src/utils/load-video.tsx
@@ -6,27 +6,21 @@ import { loadVideoTexture } from "../utils/load-video-texture";
 import { HubsWorld } from "../app";
 import { HubsVideoTexture } from "../textures/HubsVideoTexture";
 import { EntityID } from "./networking-types";
-import { MediaVideo } from "../bit-components";
-import { VIDEO_FLAGS } from "../inflators/video";
+import { MediaVideoLoaderData } from "../bit-components";
+import { VideoLoaderParams } from "../inflators/video-loader";
 
 export function* loadVideo(world: HubsWorld, eid: EntityID, url: string, contentType: string) {
   let loop = true;
   let autoPlay = true;
   let controls = true;
-  if (MediaVideo.flags[eid]) {
-    loop = (MediaVideo.flags[eid] & VIDEO_FLAGS.LOOP) !== 0;
-    autoPlay = (MediaVideo.flags[eid] & VIDEO_FLAGS.AUTOPLAY) !== 0;
-    controls = (MediaVideo.flags[eid] & VIDEO_FLAGS.CONTROLS) !== 0;
-  } else {
-    MediaVideo.flags[eid] |= VIDEO_FLAGS.AUTOPLAY;
-    MediaVideo.flags[eid] |= VIDEO_FLAGS.LOOP;
-    MediaVideo.flags[eid] |= VIDEO_FLAGS.CONTROLS;
-  }
   let projection = ProjectionMode.FLAT;
-  if (MediaVideo.projection[eid]) {
-    projection = APP.getString(MediaVideo.projection[eid]) as ProjectionMode;
-  } else {
-    MediaVideo.projection[eid] = APP.getSid(ProjectionMode.FLAT);
+  if (MediaVideoLoaderData.has(eid)) {
+    const params = MediaVideoLoaderData.get(eid)! as VideoLoaderParams;
+    loop = params.loop;
+    autoPlay = params.autoPlay;
+    controls = params.controls;
+    projection = params.projection!;
+    MediaVideoLoaderData.delete(eid);
   }
 
   const { texture, ratio, video }: { texture: HubsVideoTexture; ratio: number; video: HTMLVideoElement } =