Skip to content

Commit

Permalink
Merge branch 'master' of github.com:mozilla/hubs into bug/pinning
Browse files Browse the repository at this point in the history
  • Loading branch information
@brianpeiris
brianpeiris committed Oct 13, 2021
2 parents 8123838 + 6567ebd commit fe733a8
Show file tree
Hide file tree
Showing 23 changed files with 319 additions and 113 deletions.
Binary file modified src/assets/models/LoadingObject_Atom.glb
View file
Binary file not shown.
5 changes: 3 additions & 2 deletions src/components/camera-tool.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -487,6 +487,7 @@ AFRAME.registerComponent("camera-tool", {
if (cancel) {
this.videoRecorder.onstop = () => {};
this.videoRecorder._free();
this.el.sceneEl.emit("action_camera_recording_ended");
}

this.videoRecorder.stop();
Expand All @@ -499,8 +500,8 @@ AFRAME.registerComponent("camera-tool", {
clearInterval(this.videoCountdownInterval);

this.videoCountdownInterval = null;
this.el.setAttribute("camera-tool", "label", "");
this.el.setAttribute("camera-tool", { isRecording: false, isSnapping: false });

this.el.setAttribute("camera-tool", { label: " ", isRecording: false, isSnapping: false });
},

tick() {
Expand Down
16 changes: 13 additions & 3 deletions src/components/gltf-model-plus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,8 @@ const extractZipFile = promisifyWorker(new SketchfabZipWorker());

function defaultInflator(el, componentName, componentData) {
if (!AFRAME.components[componentName]) {
throw new Error(`Inflator failed. "${componentName}" component does not exist.`);
console.warn(`Inflator failed. "${componentName}" component does not exist.`);
return;
}
if (AFRAME.components[componentName].multiple && Array.isArray(componentData)) {
for (let i = 0; i < componentData.length; i++) {
Expand Down Expand Up @@ -402,7 +403,7 @@ class GLTFHubsPlugin {

function hookDef(defType, hookName) {
return Promise.all(
parser.json[defType].map((_def, idx) => {
(parser.json[defType] || []).map((_def, idx) => {
return Promise.all(
parser._invokeAll(function(ext) {
return ext[hookName] && ext[hookName](idx);
Expand All @@ -413,7 +414,11 @@ class GLTFHubsPlugin {
}

// TODO decide if thse should get put into the GLTF loader itself
return Promise.all([hookDef("scenes", "extendScene"), hookDef("nodes", "extendNode")]);
return Promise.all([
hookDef("scenes", "extendScene"),
hookDef("nodes", "extendNode"),
hookDef("materials", "extendMaterial")
]);
}

afterRoot(gltf) {
Expand Down Expand Up @@ -468,6 +473,11 @@ class GLTFHubsComponentsExtension {
if (ext) return this.resolveComponentLinks(ext);
}

extendMaterial(materialIdx) {
const ext = this.parser.json.materials[materialIdx]?.extensions?.MOZ_hubs_components;
if (ext) return this.resolveComponentLinks(ext);
}

resolveComponentLinks(ext) {
const deps = [];

Expand Down
4 changes: 3 additions & 1 deletion src/components/media-video.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,14 @@ import { SourceType, AudioType } from "./audio-params";
import { errorTexture } from "../utils/error-texture";
import { scaleToAspectRatio } from "../utils/scale-to-aspect-ratio";
import { isSafari } from "../utils/detect-safari";
import { isIOS as detectIOS } from "../utils/is-mobile";

import qsTruthy from "../utils/qs_truthy";

const ONCE_TRUE = { once: true };
const TYPE_IMG_PNG = { type: "image/png" };

const isIOS = AFRAME.utils.device.isIOS();
const isIOS = detectIOS();
const audioIconTexture = new HubsTextureLoader().load(audioIcon);

export const VOLUME_LABELS = [];
Expand Down Expand Up @@ -386,6 +387,7 @@ AFRAME.registerComponent("media-video", {
texture = linkedVideoTexture;
audioSourceEl = linkedAudioSource;
} else {
this.el.emit("video-loading");
({ texture, audioSourceEl } = await this.createVideoTextureAudioSourceEl());
if (getCurrentMirroredMedia() === this.el) {
await refreshMediaMirror();
Expand Down
21 changes: 8 additions & 13 deletions src/gltf-component-mappings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ function registerRootSceneComponent(componentName) {
}

registerRootSceneComponent("fog");
registerRootSceneComponent("background");

AFRAME.GLTFModelPlus.registerComponent("duck", "duck", el => {
el.setAttribute("duck", "");
Expand Down Expand Up @@ -599,22 +598,18 @@ AFRAME.GLTFModelPlus.registerComponent("audio-zone", "audio-zone", (el, componen
el.setAttribute(componentName, { ...componentData });
});

AFRAME.GLTFModelPlus.registerComponent("background", "background", (el, _componentName, componentData) => {
console.warn(
"The `background` component is deprecated, use `backgroundColor` on the `environment-settings` component instead."
);
// This assumes the background component is on the root entity, which it is for spoke, the only thing using this component
el.setAttribute("environment-settings", { backgroundColor: new THREE.Color(componentData.color) });
});

AFRAME.GLTFModelPlus.registerComponent(
"environment-settings",
"environment-settings",
(el, componentName, componentData) => {
// assume equirect for env and background for now
// TODO do we always want to flipy for these?
if (componentData.envMapTexture) {
componentData.envMapTexture.mapping = THREE.EquirectangularReflectionMapping;
componentData.envMapTexture.flipY = true;
}

if (componentData.backgroundTexture) {
componentData.backgroundTexture.mapping = THREE.EquirectangularReflectionMapping;
componentData.backgroundTexture.flipY = true;
}

// TODO a bit silly to be storing this as an aframe component. Use a glboal store of some sort
el.setAttribute(componentName, {
...componentData,
Expand Down
17 changes: 15 additions & 2 deletions src/hub.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import initialBatchImage from "./assets/images/warning_icon.png";
import loadingEnvironment from "./assets/models/LoadingEnvironment.glb";

import "aframe";
import "./utils/aframe-overrides";

// A-Frame hardcodes THREE.Cache.enabled = true
// But we don't want to use THREE.Cache because
Expand All @@ -46,7 +47,7 @@ import "webrtc-adapter";
import "aframe-slice9-component";
import "./utils/threejs-positional-audio-updatematrixworld";
import "./utils/threejs-world-update";
import "./utils/threejs-raycast-patches";
import "./utils/threejs-patches";
import patchThreeAllocations from "./utils/threejs-allocation-patches";
import { detectOS, detect } from "detect-browser";
import {
Expand All @@ -65,7 +66,7 @@ import "./phoenix-adapter";
import nextTick from "./utils/next-tick";
import { addAnimationComponents } from "./utils/animation";
import Cookies from "js-cookie";
import { DialogAdapter, DIALOG_CONNECTION_ERROR_FATAL } from "./naf-dialog-adapter";
import { DialogAdapter, DIALOG_CONNECTION_ERROR_FATAL, DIALOG_CONNECTION_CONNECTED } from "./naf-dialog-adapter";
import "./change-hub";

import "./components/scene-components";
Expand Down Expand Up @@ -257,6 +258,7 @@ import { ExitReason } from "./react-components/room/ExitedRoomScreen";
import { OAuthScreenContainer } from "./react-components/auth/OAuthScreenContainer";
import { SignInMessages } from "./react-components/auth/SignInModal";
import { ThemeProvider } from "./react-components/styles/theme";
import { LogMessageType } from "./react-components/room/ChatSidebar";

const PHOENIX_RELIABLE_NAF = "phx-reliable";
NAF.options.firstSyncSource = PHOENIX_RELIABLE_NAF;
Expand Down Expand Up @@ -763,6 +765,9 @@ document.addEventListener("DOMContentLoaded", async () => {
const entryManager = new SceneEntryManager(hubChannel, authChannel, history);
window.APP.entryManager = entryManager;

APP.dialog.on(DIALOG_CONNECTION_CONNECTED, () => {
scene.emit("didConnectToDialog");
});
APP.dialog.on(DIALOG_CONNECTION_ERROR_FATAL, () => {
// TODO: Change the wording of the connect error to match dialog connection error
// TODO: Tell the user that dialog is broken, but don't completely end the experience
Expand Down Expand Up @@ -1210,6 +1215,14 @@ document.addEventListener("DOMContentLoaded", async () => {
});
}
});
events.on(`hub:change`, ({ key, previous, current }) => {
if (
key === hubChannel.channel.socket.params().session_id &&
previous.profile.avatarId !== current.profile.avatarId
) {
messageDispatch.log(LogMessageType.avatarChanged);
}
});
events.on(`hub:change`, ({ key, current }) => {
scene.emit("presence_updated", {
sessionId: key,
Expand Down
3 changes: 3 additions & 0 deletions src/naf-dialog-adapter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const WEBCAM_SIMULCAST_ENCODINGS = [
// Used for simulcast screen sharing.
const SCREEN_SHARING_SIMULCAST_ENCODINGS = [{ dtx: true, maxBitrate: 1500000 }, { dtx: true, maxBitrate: 6000000 }];

export const DIALOG_CONNECTION_CONNECTED = "dialog-connection-connected";
export const DIALOG_CONNECTION_ERROR_FATAL = "dialog-connection-error-fatal";

export class DialogAdapter extends EventEmitter {
Expand Down Expand Up @@ -440,9 +441,11 @@ export class DialogAdapter extends EventEmitter {
try {
await this._joinRoom();
resolve();
this.emit(DIALOG_CONNECTION_CONNECTED);
} catch (err) {
this.emitRTCEvent("warn", "Adapter", () => `Error during connect: ${error}`);
reject(err);
this.emit(DIALOG_CONNECTION_ERROR_FATAL);
}
});
});
Expand Down
5 changes: 5 additions & 0 deletions src/react-components/preferences-screen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -509,6 +509,10 @@ const preferenceLabels = defineMessages({
fastRoomSwitching: {
id: "preferences-screen.preference.fast-room-switching",
defaultMessage: "Enable Fast Room Switching"
},
lazyLoadSceneMedia: {
id: "preferences-screen.preference.lazy-load-scene-media",
defaultMessage: "Enable Scene Media Lazy Loading"
}
});

Expand Down Expand Up @@ -1089,6 +1093,7 @@ class PreferencesScreen extends Component {
{ key: "allowMultipleHubsInstances", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: false },
{ key: "disableIdleDetection", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: false },
{ key: "fastRoomSwitching", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: false },
{ key: "lazyLoadSceneMedia", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: false },
{ key: "preferMobileObjectInfoPanel", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: false },
{ key: "animateWaypointTransitions", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: true },
{ key: "showFPSCounter", prefType: PREFERENCE_LIST_ITEM_TYPE.CHECK_BOX, defaultBool: false },
Expand Down
7 changes: 6 additions & 1 deletion src/react-components/room/ChatSidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,8 @@ export const LogMessageType = {
invalidAudioNormalizationRange: "invalidAudioNormalizationRange",
audioSuspended: "audioSuspended",
audioResumed: "audioResumed",
joinFailed: "joinFailed"
joinFailed: "joinFailed",
avatarChanged: "avatarChanged"
};

const logMessages = defineMessages({
Expand Down Expand Up @@ -228,6 +229,10 @@ const logMessages = defineMessages({
[LogMessageType.joinFailed]: {
id: "chat-sidebar.log-message.join-failed",
defaultMessage: "Failed to join room: {message}"
},
[LogMessageType.avatarChanged]: {
id: "chat-sidebar.log-message.avatar-changed",
defaultMessage: "Your avatar has been changed."
}
});

Expand Down
96 changes: 74 additions & 22 deletions src/react-components/room/useRoomLoadingState.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,38 @@ function reducer(state, action) {
loading: !(state.environmentLoaded && state.networkConnected),
messageKey: state.environmentLoaded ? "enteringRoom" : "loadingObjects"
};
case "environment-loaded":
case "environment-loaded": {
const loaded = state.lazyLoadMedia
? state.networkConnected && state.dialogConnected
: state.allObjectsLoaded && state.networkConnected && state.dialogConnected;
return {
...state,
environmentLoaded: true,
loading: !(state.allObjectsLoaded && state.networkConnected),
messageKey: state.allObjectsLoaded ? "enteringRoom" : "loadingObjects"
loading: !loaded,
messageKey: state.lazyLoadMedia
? loaded
? "enteringRoom"
: "connectingScene"
: loaded
? "enteringRoom"
: "loadingObjects"
};
}
case "network-connected":
return {
...state,
networkConnected: true,
loading: !(state.environmentLoaded && state.allObjectsLoaded)
loading: state.lazyLoadMedia
? !(state.environmentLoaded && state.dialogConnected)
: !(state.environmentLoaded && state.allObjectsLoaded && state.dialogConnected)
};
case "dialog-connected":
return {
...state,
dialogConnected: true,
loading: state.lazyLoadMedia
? !(state.environmentLoaded && state.networkConnected)
: !(state.environmentLoaded && state.allObjectsLoaded && state.networkConnected)
};
}
}
Expand All @@ -42,6 +62,11 @@ const messages = defineMessages({
description: "The loading progress. How many objects have finished loading?",
defaultMessage: "Loading objects {loadedCount}/{objectCount}"
},
connectingScene: {
id: "loading-screen.connecting",
description: "The scene is loaded, we are waiting for the networked scene to be connected to enter.",
defaultMessage: "Connecting to the scene..."
},
enteringRoom: {
id: "loading-screen.entering-room",
description:
Expand All @@ -53,6 +78,7 @@ const messages = defineMessages({
export function useRoomLoadingState(sceneEl) {
// Holds the id of the current
const loadingTimeoutRef = useRef();
const lazyLoadMedia = APP.store.state.preferences.lazyLoadSceneMedia;

const [{ loading, messageKey, objectCount, loadedCount }, dispatch] = useReducer(reducer, {
loading: !sceneEl.is("loaded"),
Expand All @@ -61,7 +87,9 @@ export function useRoomLoadingState(sceneEl) {
loadedCount: 0,
allObjectsLoaded: false,
environmentLoaded: false,
networkConnected: false
networkConnected: false,
dialogConnected: false,
lazyLoadMedia
});

const onObjectLoading = useCallback(
Expand Down Expand Up @@ -103,37 +131,61 @@ export function useRoomLoadingState(sceneEl) {
[dispatch]
);

const onDialogConnected = useCallback(
() => {
dispatch({ type: "dialog-connected" });
},
[dispatch]
);

useEffect(
() => {
// Once the scene has loaded the dependencies to this hook will change,
// the event listeners will be removed, and we can prevent adding them again.
if (loading) {
console.log("Attaching room state event listeners");
sceneEl.addEventListener("model-loading", onObjectLoading);
sceneEl.addEventListener("image-loading", onObjectLoading);
sceneEl.addEventListener("pdf-loading", onObjectLoading);
sceneEl.addEventListener("model-loaded", onObjectLoaded);
sceneEl.addEventListener("image-loaded", onObjectLoaded);
sceneEl.addEventListener("pdf-loaded", onObjectLoaded);
sceneEl.addEventListener("model-error", onObjectLoaded);
if (!lazyLoadMedia) {
sceneEl.addEventListener("model-loading", onObjectLoading);
sceneEl.addEventListener("image-loading", onObjectLoading);
sceneEl.addEventListener("pdf-loading", onObjectLoading);
sceneEl.addEventListener("video-loading", onObjectLoading);
sceneEl.addEventListener("model-loaded", onObjectLoaded);
sceneEl.addEventListener("image-loaded", onObjectLoaded);
sceneEl.addEventListener("pdf-loaded", onObjectLoaded);
sceneEl.addEventListener("video-loaded", onObjectLoaded);
sceneEl.addEventListener("model-error", onObjectLoaded);
}
sceneEl.addEventListener("environment-scene-loaded", onEnvironmentLoaded);
sceneEl.addEventListener("didConnectToNetworkedScene", onNetworkConnected);
sceneEl.addEventListener("didConnectToDialog", onDialogConnected);
}

return () => {
console.log("Removing room state event listeners");
sceneEl.removeEventListener("model-loading", onObjectLoading);
sceneEl.removeEventListener("image-loading", onObjectLoading);
sceneEl.removeEventListener("pdf-loading", onObjectLoading);
sceneEl.removeEventListener("model-loaded", onObjectLoaded);
sceneEl.removeEventListener("image-loaded", onObjectLoaded);
sceneEl.removeEventListener("pdf-loaded", onObjectLoaded);
sceneEl.removeEventListener("model-error", onObjectLoaded);
if (!lazyLoadMedia) {
sceneEl.removeEventListener("model-loading", onObjectLoading);
sceneEl.removeEventListener("image-loading", onObjectLoading);
sceneEl.removeEventListener("pdf-loading", onObjectLoading);
sceneEl.removeEventListener("video-loading", onObjectLoading);
sceneEl.removeEventListener("model-loaded", onObjectLoaded);
sceneEl.removeEventListener("image-loaded", onObjectLoaded);
sceneEl.removeEventListener("pdf-loaded", onObjectLoaded);
sceneEl.removeEventListener("video-loaded", onObjectLoaded);
sceneEl.removeEventListener("model-error", onObjectLoaded);
}
sceneEl.removeEventListener("environment-scene-loaded", onEnvironmentLoaded);
sceneEl.removeEventListener("didConnectToNetworkedScene", onNetworkConnected);
sceneEl.removeEventListener("didConnectToDialog", onDialogConnected);
};
},
[sceneEl, loading, onObjectLoaded, onObjectLoading, onEnvironmentLoaded, onNetworkConnected]
[
sceneEl,
loading,
onObjectLoaded,
onObjectLoading,
onEnvironmentLoaded,
onNetworkConnected,
onDialogConnected,
lazyLoadMedia
]
);

const intl = useIntl();
Expand Down
Loading

0 comments on commit fe733a8

Please sign in to comment.