Refactor and fixes

Hubs-Foundation · Jun 6, 2023 · 40e63e6 · 40e63e6
1 parent 1bacad9
commit 40e63e6
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 43 deletions.
diff --git a/src/bit-components.js b/src/bit-components.js
@@ -186,8 +186,10 @@ MediaPDF.map = new Map();
 
 export const MediaVideo = defineComponent({
  ratio: Types.f32,
- flags: Types.ui8
+ flags: Types.ui8,
+ projection: Types.ui8
 });
+MediaVideo.projection[$isStringType] = true;
 /**
  * @type {Map<EntityId, HTMLVideoElement}>}
  */

diff --git a/src/inflators/image-loader.ts b/src/inflators/image-loader.ts
@@ -21,7 +21,7 @@ export function inflateImageLoader(world: HubsWorld, eid: number, params: ImageL
  });
 
  const { projection, alphaMode, alphaCutoff } = params;
- MediaImage.projection[eid] = APP.getSid(projection ? projection : ProjectionMode.FLAT);
- MediaImage.alphaMode[eid] = APP.getSid(alphaMode ? alphaMode : AlphaMode.Opaque);
- alphaCutoff && (MediaImage.alphaCutoff[eid] = alphaCutoff);
+ 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;
 }
diff --git a/src/inflators/image.ts b/src/inflators/image.ts
@@ -7,14 +7,6 @@ import { Texture } from "three";
 import { HubsWorld } from "../app";
 import { EntityID } from "../utils/networking-types";
 
-export const IMAGE_FLAGS = {
- ALPHA_MODE_OPAQUE: 1 << 0,
- ALPHA_MODE_BLEND: 1 << 1,
- ALPHA_MODE_MASK: 1 << 2,
- PROJECTION_FLAT: 1 << 3,
- PROJECTION_EQUIRECT: 1 << 4
-};
-
 export interface ImageParams {
  cacheKey: string;
  texture: Texture;
@@ -32,6 +24,17 @@ export function inflateImage(world: HubsWorld, eid: EntityID, params: ImageParam
  : createImageMesh(texture, ratio, alphaMode, alphaCutoff);
  addObject3DComponent(world, eid, mesh);
  addComponent(world, MediaImage, eid);
+
+ if (projection) {
+ MediaImage.projection[eid] = APP.getSid(projection);
+ }
+ if (alphaMode) {
+ MediaImage.alphaMode[eid] = APP.getSid(alphaMode);
+ }
+ if (alphaCutoff) {
+ MediaImage.alphaCutoff[eid] = alphaCutoff;
+ }
+
  MediaImage.cacheKey[eid] = APP.getSid(cacheKey);
  return eid;
 }
diff --git a/src/inflators/video-loader.ts b/src/inflators/video-loader.ts
@@ -22,12 +22,8 @@ export function inflateVideoLoader(world: HubsWorld, eid: number, params: VideoL
  });
 
  const { autoPlay, controls, loop, projection } = params;
- autoPlay && (MediaVideo.flags[eid] |= VIDEO_FLAGS.AUTOPLAY);
- loop && (MediaVideo.flags[eid] |= VIDEO_FLAGS.LOOP);
- controls && (MediaVideo.flags[eid] |= VIDEO_FLAGS.CONTROLS);
- if (projection === ProjectionMode.SPHERE_EQUIRECTANGULAR) {
- MediaVideo.flags[eid] |= VIDEO_FLAGS.PROJECTION_EQUIRECT;
- } else {
- MediaVideo.flags[eid] |= VIDEO_FLAGS.PROJECTION_FLAT;
- }
+ 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);
 }
diff --git a/src/inflators/video.ts b/src/inflators/video.ts
@@ -10,9 +10,7 @@ import { Texture } from "three";
 export const VIDEO_FLAGS = {
  AUTOPLAY: 1 << 0,
  LOOP: 1 << 1,
- CONTROLS: 1 << 2,
- PROJECTION_FLAT: 1 << 3,
- PROJECTION_EQUIRECT: 1 << 4
+ CONTROLS: 1 << 2
 };
 
 export interface VideoParams {
@@ -34,13 +32,17 @@ export function inflateVideo(world: HubsWorld, eid: EntityID, params: VideoParam
  addObject3DComponent(world, eid, mesh);
  addComponent(world, MediaVideo, eid);
 
- autoPlay && (MediaVideo.flags[eid] |= VIDEO_FLAGS.AUTOPLAY);
- loop && (MediaVideo.flags[eid] |= VIDEO_FLAGS.LOOP);
- controls && (MediaVideo.flags[eid] |= VIDEO_FLAGS.CONTROLS);
- if (projection === ProjectionMode.SPHERE_EQUIRECTANGULAR) {
- MediaVideo.flags[eid] |= VIDEO_FLAGS.PROJECTION_EQUIRECT;
- } else {
- MediaVideo.flags[eid] |= VIDEO_FLAGS.PROJECTION_FLAT;
+ if (autoPlay) {
+ MediaVideo.flags[eid] |= VIDEO_FLAGS.AUTOPLAY;
+ }
+ if (loop) {
+ MediaVideo.flags[eid] |= VIDEO_FLAGS.LOOP;
+ }
+ if (controls) {
+ MediaVideo.flags[eid] |= VIDEO_FLAGS.CONTROLS;
+ }
+ if (projection) {
+ MediaVideo.projection[eid] = APP.getSid(projection);
  }
 
  MediaVideo.ratio[eid] = ratio;

diff --git a/src/utils/load-audio.tsx b/src/utils/load-audio.tsx
@@ -13,15 +13,20 @@ export function* loadAudio(world: HubsWorld, eid: EntityID, url: string) {
  let loop = true;
  let autoPlay = true;
  let controls = true;
- let projection = ProjectionMode.FLAT;
  if (MediaVideo.flags[eid]) {
- autoPlay = (MediaVideo.flags[eid] & VIDEO_FLAGS.AUTOPLAY) !== 0;
  loop = (MediaVideo.flags[eid] & VIDEO_FLAGS.LOOP) !== 0;
+ autoPlay = (MediaVideo.flags[eid] & VIDEO_FLAGS.AUTOPLAY) !== 0;
  controls = (MediaVideo.flags[eid] & VIDEO_FLAGS.CONTROLS) !== 0;
- projection =
- (MediaVideo.flags[eid] & VIDEO_FLAGS.PROJECTION_EQUIRECT) !== 0
- ? ProjectionMode.SPHERE_EQUIRECTANGULAR
- : ProjectionMode.FLAT;
+ } 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);
  }
 
  const { texture, ratio, video }: { texture: HubsVideoTexture; ratio: number; video: HTMLVideoElement } =

diff --git a/src/utils/load-image.tsx b/src/utils/load-image.tsx
@@ -14,7 +14,7 @@ export function* createImageDef(world: HubsWorld, url: string, contentType: stri
  const { texture, ratio, cacheKey }: { texture: Texture; ratio: number; cacheKey: string } =
  yield loadTextureCancellable(url, 1, contentType);
 
- // TODO it would be nice if we could be less agressive with transparency here.
+ // TODO it would be nice if we could be less aggressive with transparency here.
  // Doing so requires inspecting the raw file data upstream of here and passing
  // that info through somehow which feels tricky.
  let alphaMode: AlphaMode = AlphaMode.Blend;
@@ -39,12 +39,18 @@ export function* loadImage(world: HubsWorld, eid: EntityID, url: string, content
 
  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;
  }
 
  return renderAsEntity(world, <entity name="Image" image={imageDef} />);

diff --git a/src/utils/load-video.tsx b/src/utils/load-video.tsx
@@ -13,15 +13,20 @@ export function* loadVideo(world: HubsWorld, eid: EntityID, url: string, content
  let loop = true;
  let autoPlay = true;
  let controls = true;
- let projection = ProjectionMode.FLAT;
  if (MediaVideo.flags[eid]) {
- autoPlay = (MediaVideo.flags[eid] & VIDEO_FLAGS.AUTOPLAY) !== 0;
  loop = (MediaVideo.flags[eid] & VIDEO_FLAGS.LOOP) !== 0;
+ autoPlay = (MediaVideo.flags[eid] & VIDEO_FLAGS.AUTOPLAY) !== 0;
  controls = (MediaVideo.flags[eid] & VIDEO_FLAGS.CONTROLS) !== 0;
- projection =
- (MediaVideo.flags[eid] & VIDEO_FLAGS.PROJECTION_EQUIRECT) !== 0
- ? ProjectionMode.SPHERE_EQUIRECTANGULAR
- : ProjectionMode.FLAT;
+ } 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);
  }
 
  const { texture, ratio, video }: { texture: HubsVideoTexture; ratio: number; video: HTMLVideoElement } =