Unseen performance

.defaults.env

@@ -32,3 +32,4 @@ DEFAULT_SCENE_SID="JGLt8DP"
 
 IMMERS_SERVER="https://localhost:8081"
 IMMERS_SCOPE="modAdditive"
+IMMERS_ALLOW_GUESTS="true"

src/assets/images/spritesheets/sprite-system-action-spritesheet.json

@@ -285,157 +285,173 @@
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
 		},
-		"inspect-action.png":
+		"immers-bg-hover.png":
 		{
 			"frame": {"x":328,"y":738,"w":64,"h":64},
 			"rotated": false,
 			"trimmed": false,
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
 		},
-		"mute-action.png":
+		"immers-bg.png":
 		{
 			"frame": {"x":408,"y":738,"w":64,"h":64},
 			"rotated": false,
 			"trimmed": false,
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
 		},
-		"next.png":
+		"inspect-action.png":
 		{
 			"frame": {"x":488,"y":738,"w":64,"h":64},
 			"rotated": false,
 			"trimmed": false,
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
 		},
-		"pin-action.png":
+		"mute-action.png":
 		{
 			"frame": {"x":568,"y":738,"w":64,"h":64},
 			"rotated": false,
 			"trimmed": false,
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
 		},
-		"prev.png":
+		"next.png":
 		{
 			"frame": {"x":648,"y":738,"w":64,"h":64},
 			"rotated": false,
 			"trimmed": false,
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
 		},
-		"recenter-action.png":
+		"pin-action.png":
 		{
 			"frame": {"x":728,"y":738,"w":64,"h":64},
 			"rotated": false,
 			"trimmed": false,
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
 		},
-		"record-action-alpha.png":
+		"prev.png":
 		{
 			"frame": {"x":882,"y":8,"w":64,"h":64},
 			"rotated": false,
 			"trimmed": false,
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
 		},
-		"record-action.png":
+		"recenter-action.png":
 		{
 			"frame": {"x":882,"y":88,"w":64,"h":64},
 			"rotated": false,
 			"trimmed": false,
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
 		},
-		"remove-action.png":
+		"record-action-alpha.png":
 		{
 			"frame": {"x":882,"y":168,"w":64,"h":64},
 			"rotated": false,
 			"trimmed": false,
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
 		},
-		"rotate-action.png":
+		"record-action.png":
 		{
 			"frame": {"x":882,"y":248,"w":64,"h":64},
 			"rotated": false,
 			"trimmed": false,
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
 		},
-		"scale-action.png":
+		"remove-action.png":
 		{
 			"frame": {"x":882,"y":328,"w":64,"h":64},
 			"rotated": false,
 			"trimmed": false,
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
 		},
-		"serialize-action.png":
+		"rotate-action.png":
 		{
 			"frame": {"x":882,"y":408,"w":64,"h":64},
 			"rotated": false,
 			"trimmed": false,
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
 		},
-		"snap-page.png":
+		"scale-action.png":
 		{
 			"frame": {"x":882,"y":488,"w":64,"h":64},
 			"rotated": false,
 			"trimmed": false,
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
 		},
-		"spawn_message.png":
+		"serialize-action.png":
 		{
 			"frame": {"x":882,"y":568,"w":64,"h":64},
 			"rotated": false,
 			"trimmed": false,
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
 		},
-		"spawn_message_dark-hover.png":
+		"snap-page.png":
 		{
 			"frame": {"x":882,"y":648,"w":64,"h":64},
 			"rotated": false,
 			"trimmed": false,
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
 		},
-		"spawn_message_dark.png":
+		"spawn_message.png":
 		{
 			"frame": {"x":882,"y":728,"w":64,"h":64},
 			"rotated": false,
 			"trimmed": false,
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
 		},
-		"stop-action.png":
+		"spawn_message_dark-hover.png":
 		{
 			"frame": {"x":8,"y":818,"w":64,"h":64},
 			"rotated": false,
 			"trimmed": false,
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
 		},
-		"undo-action.png":
+		"spawn_message_dark.png":
 		{
 			"frame": {"x":88,"y":818,"w":64,"h":64},
 			"rotated": false,
 			"trimmed": false,
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
 		},
-		"unmute-action.png":
+		"stop-action.png":
 		{
 			"frame": {"x":168,"y":818,"w":64,"h":64},
 			"rotated": false,
 			"trimmed": false,
 			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 			"sourceSize": {"w":64,"h":64}
+		},
+		"undo-action.png":
+		{
+			"frame": {"x":248,"y":818,"w":64,"h":64},
+			"rotated": false,
+			"trimmed": false,
+			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
+			"sourceSize": {"w":64,"h":64}
+		},
+		"unmute-action.png":
+		{
+			"frame": {"x":328,"y":818,"w":64,"h":64},
+			"rotated": false,
+			"trimmed": false,
+			"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
+			"sourceSize": {"w":64,"h":64}
 		}
 	}
 }

src/components/block-button.js

@@ -11,14 +11,19 @@ AFRAME.registerComponent("block-button", {
       this.el.emit("immers-block", { clientId: this.owner });
     };
     this.onScopeChange = () => {
-      if (this.el.sceneEl.states.includes("immers-scope-addBlocks")) {
+      if (
+        this.playerEl?.getAttribute("player-info").immersId &&
+        this.el.sceneEl.states.includes("immers-scope-addBlocks")
+      ) {
         this.textEl.setAttribute("text", "value", "Block");
       } else {
         this.textEl.setAttribute("text", "value", "Hide");
       }
     };
     NAF.utils.getNetworkedEntity(this.el).then(networkedEl => {
+      this.playerEl = networkedEl;
       this.owner = networkedEl.components.networked.data.owner;
+      this.playerEl.addEventListener("immers-id-changed", this.onScopeChange);
     });
     this.onScopeChange();
   },
@@ -27,11 +32,17 @@ AFRAME.registerComponent("block-button", {
     this.el.object3D.addEventListener("interact", this.onClick);
     this.el.sceneEl.addEventListener("stateadded", this.onScopeChange);
     this.el.sceneEl.addEventListener("stateremoved", this.onScopeChange);
+    if (this.playerEl) {
+      this.playerEl.addEventListener("immers-id-changed", this.onScopeChange);
+    }
   },
 
   pause() {
     this.el.object3D.removeEventListener("interact", this.onClick);
     this.el.sceneEl.removeEventListener("stateremoved", this.onScopeChange);
+    if (this.playerEl) {
+      this.playerEl.removeEventListener("immers-id-changed", this.onScopeChange);
+    }
   },
 
   block(clientId) {

src/components/immers/immers-follow-button.js

@@ -6,6 +6,9 @@
 AFRAME.registerComponent("immers-follow-button", {
   schema: { relation: { type: "string", default: "none", oneOf: ["none", "request", "friend", "pending"] } },
   init() {
+    this.showIfLoggedIn = () => {
+      this.el.object3D.visible = !!this.playerEl?.getAttribute("player-info").immersId;
+    };
     NAF.utils.getNetworkedEntity(this.el).then(networkedEl => {
       this.playerEl = networkedEl;
       this.playerEl.addEventListener("stateadded", this.onState);
@@ -14,6 +17,8 @@ AFRAME.registerComponent("immers-follow-button", {
       } else if (this.playerEl.is("immers-follow-request")) {
         this.el.setAttribute("immers-follow-button", { relation: "request" });
       }
+      this.showIfLoggedIn();
+      this.playerEl.addEventListener("immers-id-changed", this.showIfLoggedIn);
     });
     this.textEl = this.el.querySelector("[text]");
     // avoid accidental double clicks
@@ -48,6 +53,7 @@ AFRAME.registerComponent("immers-follow-button", {
     this.el.object3D.addEventListener("interact", this.onClick);
     if (this.playerEl) {
       this.playerEl.addEventListener("stateadded", this.onState);
+      this.playerEl.addEventListener("immers-id-changed", this.showIfLoggedIn);
     }
   },
 
@@ -73,6 +79,7 @@ AFRAME.registerComponent("immers-follow-button", {
     this.el.object3D.removeEventListener("interact", this.onClick);
     if (this.playerEl) {
       this.playerEl.removeEventListener("stateadded", this.onState);
+      this.playerEl.removeEventListener("immers-id-changed", this.showIfLoggedIn);
     }
   },
 

src/components/in-world-hud.js

@@ -10,6 +10,7 @@ AFRAME.registerComponent("in-world-hud", {
     this.spawn = this.el.querySelector(".spawn");
     this.pen = this.el.querySelector(".penhud");
     this.cameraBtn = this.el.querySelector(".camera-btn");
+    this.immersBtn = this.el.querySelector(".immers-btn");
     this.inviteBtn = this.el.querySelector(".invite-btn");
     this.background = this.el.querySelector(".bg");
     this.notificationText = this.el.querySelector("#hud-presence-notification");
@@ -24,6 +25,7 @@ AFRAME.registerComponent("in-world-hud", {
         this.pen.setAttribute("icon-button", "disabled", !window.APP.hubChannel.can("spawn_drawing"));
         this.cameraBtn.setAttribute("icon-button", "disabled", !window.APP.hubChannel.can("spawn_camera"));
       }
+      this.immersBtn.object3D.visible = !this.el.sceneEl.is("immers-connected");
     };
 
     this.onStateChange = evt => {
@@ -52,6 +54,10 @@ AFRAME.registerComponent("in-world-hud", {
       this.el.emit("action_toggle_camera");
     };
 
+    this.onImmersClick = () => {
+      this.el.emit("action_immers_register");
+    };
+
     this.onInviteClick = () => {
       this.el.emit("action_invite");
     };
@@ -73,6 +79,7 @@ AFRAME.registerComponent("in-world-hud", {
     this.pen.object3D.addEventListener("interact", this.onPenClick);
     this.cameraBtn.object3D.addEventListener("interact", this.onCameraClick);
     this.inviteBtn.object3D.addEventListener("interact", this.onInviteClick);
+    this.immersBtn.object3D.addEventListener("interact", this.onImmersClick);
   },
 
   pause() {
@@ -86,5 +93,6 @@ AFRAME.registerComponent("in-world-hud", {
     this.pen.object3D.removeEventListener("interact", this.onPenClick);
     this.cameraBtn.object3D.removeEventListener("interact", this.onCameraClick);
     this.inviteBtn.object3D.removeEventListener("interact", this.onInviteClick);
+    this.immersBtn.object3D.removeEventListener("interact", this.onImmersClick);
   }
 });

src/components/media-views.js

@@ -17,6 +17,7 @@ import { applyPersistentSync } from "../utils/permissions-utils";
 import { refreshMediaMirror, getCurrentMirroredMedia } from "../utils/mirror-utils";
 import { detect } from "detect-browser";
 import semver from "semver";
+import { makeChromaKeyMaterial } from "./unseen/chroma-key-material";
 
 import qsTruthy from "../utils/qs_truthy";
 
@@ -297,7 +298,7 @@ AFRAME.registerComponent("media-video", {
     this.isSnapping = false;
     this.videoIsLive = null; // value null until we've determined if the video is live or not.
     this.onSnapImageLoaded = () => (this.isSnapping = false);
-
+    /*
     this.el.setAttribute("hover-menu__video", { template: "#video-hover-menu", isFlat: true });
     this.el.components["hover-menu__video"].getHoverMenu().then(menu => {
       // If we got removed while waiting, do nothing.
@@ -327,7 +328,7 @@ AFRAME.registerComponent("media-video", {
       this.updateHoverMenu();
       this.updatePlaybackState();
     });
-
+    */
     NAF.utils
       .getNetworkedEntity(this.el)
       .then(networkedEl => {
@@ -660,7 +661,7 @@ AFRAME.registerComponent("media-video", {
     const projection = this.data.projection;
 
     if (!this.mesh || projection !== oldData.projection) {
-      const material = new THREE.MeshBasicMaterial();
+      const material = src.startsWith("hubs://") ? makeChromaKeyMaterial(texture) : new THREE.MeshBasicMaterial();
 
       let geometry;