diff --git a/package.json b/package.json
index ad584f83bcf0827ec6c4f2914bf9e38abc20234b..0d9ed6b57e38dc448a3da828e3acb5cc24a33035 100644
--- a/package.json
+++ b/package.json
@@ -31,13 +31,17 @@
"classnames": "^2.2.5",
"detect-browser": "^2.1.0",
"event-target-shim": "^3.0.1",
+ "form-urlencoded": "^2.0.4",
"jsonschema": "^1.2.2",
"minijanus": "^0.5.0",
"mobile-detect": "^1.4.1",
+ "moment": "^2.22.0",
+ "moment-timezone": "^0.5.14",
"moving-average": "^1.0.0",
- "naf-janus-adapter": "https://github.com/mozilla/naf-janus-adapter#feature/disconnect",
- "networked-aframe": "github:mozillareality/networked-aframe#mr-social-client/master",
+ "naf-janus-adapter": "^0.5.2",
+ "networked-aframe": "https://github.com/mozillareality/networked-aframe#mr-social-client/master",
"nipplejs": "^0.6.7",
+ "phoenix": "^1.3.0",
"query-string": "^5.0.1",
"raven-js": "^3.20.1",
"react": "^16.1.1",
diff --git a/src/assets/stylesheets/entry.scss b/src/assets/stylesheets/entry.scss
index abed31db312891d5d0d4c425b42310851df21553..7c7d18c840410378a86d9a4b41211777808a60b0 100644
--- a/src/assets/stylesheets/entry.scss
+++ b/src/assets/stylesheets/entry.scss
@@ -51,6 +51,7 @@
background: none;
color: white;
border: none;
+ align-items: center;
@extend %default-font;
&__icon {
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index 77615e9d341f4ca5688ebe6f0e209163f2c884cf..38833657208e9a58a19ef8b10add9e8a5ceaa25d 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -34,6 +34,10 @@ body {
display: flex;
flex-direction: column;
z-index: 2;
+
+ &--noninteractive {
+ pointer-events: none;
+ }
}
.background-video {
@@ -49,7 +53,7 @@ body {
.header-content {
padding: 1.5em 2.5em 1.5em 2.5em;
background-color: rgba(0, 0, 0, 0.85);
- min-height: 90px;
+ height: 90px;
display: flex;
border-bottom: 2px solid #242424;
@@ -217,3 +221,111 @@ body {
}
}
}
+
+.overlay {
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ position: absolute;
+ pointer-events: none;
+ color: white;
+ z-index: 2;
+}
+
+.mailing-list-form {
+ display: flex;
+ height: 100%;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ margin: 0;
+
+ &__first {
+ width: 100%;
+ }
+
+ &__email_field {
+ @extend %rounded-border;
+ @extend %default-font;
+ color: $light-text;
+ font-size: 1.2em;
+ background-color: transparent;
+ line-height: 2.0em;
+ padding-left: 1.25em;
+ padding-right: 1.25em;
+ margin: 0.5em 0;
+ width: 100%;
+ }
+
+ &__submit {
+ @extend %bottom-button;
+ border: 0;
+ margin-top: 16px;
+ }
+
+ &__privacy {
+ margin-top: 10px;
+ font-size: 0.7em;
+ }
+}
+
+.dialog {
+ display: grid;
+ grid-template-columns: 1fr 20px minmax(200px,500px) 20px 1fr;
+ grid-template-rows: 1fr 20px 275px 20px 1fr;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0,0,0,.6);
+
+ &__box {
+ grid-column: 3;
+ grid-row: 3;
+ position: relative;
+ pointer-events: auto;
+
+ &__contents {
+ background-color: rgba(0,0,0,0.8);
+ border-radius: 8px;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ position: relative;
+
+ &__title {
+ @extend %top-title;
+ margin-top: 20px;
+ }
+
+ &__body {
+ margin: 40px;
+ font-size: 1.1em;
+ margin-top: 20px;
+ color: $grey-text;
+ display: flex;
+ flex-direction: column;
+
+ a { color: white }
+ }
+
+ &__close {
+ position: absolute;
+ left: 12px;
+ top: 6px;
+ color: white;
+ font-size: 1.4em;
+
+ background: none;
+ cursor: pointer;
+ border: none;
+ }
+ }
+ }
+}
+
+
+
diff --git a/src/assets/stylesheets/profile.scss b/src/assets/stylesheets/profile.scss
index c0e48ffd2f172c9f017cf0331e5a576ba9ecf207..95f2caa2629d34e3f99fbab242f5cbf28b498038 100644
--- a/src/assets/stylesheets/profile.scss
+++ b/src/assets/stylesheets/profile.scss
@@ -106,12 +106,16 @@
flex: 6 1 auto;
font-size: 1.2em;
line-height: 50px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
}
&__app_name {
font-size: 1.8em;
padding-right: 18px;
line-height: 50px;
+ white-space: nowrap;
}
}
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index 1b9844c8abf2dc7d9ed7c089f84923faa601fd96..2ad5c1cf95deb131b7b8b4aa02add9f63c11cc7f 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -1,6 +1,5 @@
{
- "en":
- {
+ "en": {
"entry.screen-prefix": "Enter on ",
"entry.desktop-screen": "Screen",
"entry.mobile-screen": "Phone",
@@ -33,7 +32,7 @@
"audio.granted-title": "Mic permissions granted",
"audio.granted-subtitle": "You can still mute yourself in-game",
"audio.granted-next": "NEXT",
- "exit.subtitle": "Your session has ended.",
+ "exit.subtitle": "Your session has ended. Refresh your browser to start a new one.",
"autoexit.title": "Auto-ending session in ",
"autoexit.title_units": " seconds",
"autoexit.subtitle": "You have started another session.",
@@ -45,12 +44,15 @@
"home.webvr_disclaimer_post": " experiment by ",
"home.webvr_disclaimer_mr_team": "Mozilla Mixed Reality",
"home.view_source": "View Source",
- "home.join_on_slack": "Join us on Slack",
+ "home.join_us": "Join the Conversation",
"home.report_issue": "Report an Issue",
"home.get_updates": "Get Updates",
"home.hero_title": "A new way to get together online.",
"home.hero_subtitle": "Laugh, play, get stuff done, or just hang out.",
- "home.made_with_love": "made with â¤ï¸ by ",
- "home.environment_author_by": " by "
+ "home.made_with_love": "made with 🦆 by ",
+ "home.environment_author_by": " by ",
+ "home.dialog.close": "CLOSE",
+ "mailing_list.privacy_label": "I'm okay with Mozilla handling my info as explained in",
+ "mailing_list.privacy_link": "this Privacy Notice"
}
}
diff --git a/src/components/animated-robot-hands.js b/src/components/animated-robot-hands.js
deleted file mode 100644
index 1b26402848a8cb641560d76307708c4d77d53352..0000000000000000000000000000000000000000
--- a/src/components/animated-robot-hands.js
+++ /dev/null
@@ -1,94 +0,0 @@
-// Global THREE, AFRAME
-const POSES = {
- open: "allOpen",
- thumbDown: "thumbDown",
- indexDown: "indexDown",
- mrpDown: "mrpDown",
- thumbUp: "thumbsUp",
- point: "point",
- fist: "allGrip",
- pinch: "pinch"
-};
-
-// TODO: When we have analog values of index-finger triggers or middle-finger grips,
-// it would be nice to animate the hands proportionally to those analog values.
-AFRAME.registerComponent("animated-robot-hands", {
- dependencies: ["animation-mixer"],
- schema: {
- leftHand: { type: "selector", default: "#player-left-controller" },
- rightHand: { type: "selector", default: "#player-right-controller" }
- },
-
- init: function() {
- this.playAnimation = this.playAnimation.bind(this);
-
- this.mixer = this.el.components["animation-mixer"].mixer;
-
- const object3DMap = this.el.object3DMap;
- const rootObj = object3DMap.mesh || object3DMap.scene;
- this.clipActionObject = rootObj.parent;
-
- // Set hands to open pose because the bind pose is funky dues
- // to the workaround for FBX2glTF animations.
- this.openL = this.mixer.clipAction(POSES.open + "_L", this.clipActionObject);
- this.openR = this.mixer.clipAction(POSES.open + "_R", this.clipActionObject);
- this.openL.play();
- this.openR.play();
- },
-
- play: function() {
- this.data.leftHand.addEventListener("hand-pose", this.playAnimation);
- this.data.rightHand.addEventListener("hand-pose", this.playAnimation);
- },
-
- pause: function() {
- this.data.leftHand.removeEventListener("hand-pose", this.playAnimation);
- this.data.rightHand.removeEventListener("hand-pose", this.playAnimation);
- },
-
- // Animate from pose to pose.
- // TODO: Transition from current pose (which may be BETWEEN two other poses)
- // to the target pose, rather than stopping previous actions altogether.
- playAnimation: function(evt) {
- const isLeft = evt.target === this.data.leftHand;
- // Stop the initial animations we started when the model loaded.
- if (!this.openLStopped && isLeft) {
- this.openL.stop();
- this.openLStopped = true;
- } else if (!this.openRStopped && !isLeft) {
- this.openR.stop();
- this.openRStopped = true;
- }
-
- const { current, previous } = evt.detail;
- const mixer = this.mixer;
- const suffix = isLeft ? "_L" : "_R";
- const prevPose = POSES[previous] + suffix;
- const currPose = POSES[current] + suffix;
-
- // STOP previous actions playing for this hand.
- if (this["pose" + suffix + "_to"] !== undefined) {
- this["pose" + suffix + "_to"].stop();
- }
- if (this["pose" + suffix + "_from"] !== undefined) {
- this["pose" + suffix + "_from"].stop();
- }
-
- const duration = 0.065;
- // console.log(
- // `Animating ${isLeft ? "left" : "right"} hand from ${prevPose} to ${currPose} over ${duration} seconds.`
- // );
- const from = mixer.clipAction(prevPose, this.clipActionObject);
- const to = mixer.clipAction(currPose, this.clipActionObject);
- from.fadeOut(duration);
- to.fadeIn(duration);
- to.play();
- from.play();
- // Update the mixer slightly to prevent one frame of the default pose
- // from appearing. TODO: Find out why that happens
- this.mixer.update(0.001);
-
- this["pose" + suffix + "_to"] = to;
- this["pose" + suffix + "_from"] = from;
- }
-});
diff --git a/src/components/gltf-model-plus.js b/src/components/gltf-model-plus.js
index d9ff8d8ff722388d3b0a63f4731d5541e91bde5e..41b6b50200ad273fdc5729866a9809245c3c23ff 100644
--- a/src/components/gltf-model-plus.js
+++ b/src/components/gltf-model-plus.js
@@ -154,8 +154,8 @@ function attachTemplate(root, { selector, templateRoot }) {
}
// Append all child elements
- for (const child of root.children) {
- el.appendChild(child);
+ while (root.children.length > 0) {
+ el.appendChild(root.children[0]);
}
}
}
diff --git a/src/components/hand-poses.js b/src/components/hand-poses.js
new file mode 100644
index 0000000000000000000000000000000000000000..16d1f1479af6f4f4e17963084e6e135ecb82b942
--- /dev/null
+++ b/src/components/hand-poses.js
@@ -0,0 +1,75 @@
+const POSES = {
+ open: "allOpen",
+ thumbDown: "thumbDown",
+ indexDown: "indexDown",
+ mrpDown: "mrpDown",
+ thumbUp: "thumbsUp",
+ point: "point",
+ fist: "allGrip",
+ pinch: "pinch"
+};
+
+const NETWORK_POSES = ["allOpen", "thumbDown", "indexDown", "mrpDown", "thumbsUp", "point", "allGrip", "pinch"];
+
+AFRAME.registerComponent("hand-pose", {
+ multiple: true,
+ schema: {
+ pose: { default: 0 }
+ },
+
+ init() {
+ this.animatePose = this.animatePose.bind(this);
+ this.mixer = this.el.components["animation-mixer"];
+ const object3DMap = this.mixer.el.object3DMap;
+ const rootObj = object3DMap.mesh || object3DMap.scene;
+ this.clipActionObject = rootObj.parent;
+ const suffix = this.id == "left" ? "_L" : "_R";
+ this.from = this.to = this.mixer.mixer.clipAction(POSES.open + suffix, this.clipActionObject);
+ this.from.play();
+ },
+
+ update(oldData) {
+ if (oldData.pose != this.data.pose) {
+ this.animatePose(NETWORK_POSES[oldData.pose || 0], NETWORK_POSES[this.data.pose]);
+ }
+ },
+
+ animatePose(prev, curr) {
+ this.from.stop();
+ this.to.stop();
+
+ const duration = 0.065;
+ const suffix = this.id == "left" ? "_L" : "_R";
+ this.from = this.mixer.mixer.clipAction(prev + suffix, this.clipActionObject);
+ this.to = this.mixer.mixer.clipAction(curr + suffix, this.clipActionObject);
+
+ this.from.fadeOut(duration);
+ this.to.fadeIn(duration);
+ this.to.play();
+ this.from.play();
+
+ this.mixer.mixer.update(0.001);
+ }
+});
+
+AFRAME.registerComponent("hand-pose-controller", {
+ multiple: true,
+ schema: {
+ eventSrc: { type: "selector" }
+ },
+ init: function() {
+ this.setHandPose = this.setHandPose.bind(this);
+ },
+
+ play: function() {
+ this.data.eventSrc.addEventListener("hand-pose", this.setHandPose);
+ },
+
+ pause: function() {
+ this.data.eventSrc.removeEventListener("hand-pose", this.setHandPose);
+ },
+
+ setHandPose: function(evt) {
+ this.el.setAttribute(`hand-pose__${this.id}`, "pose", NETWORK_POSES.indexOf(POSES[evt.detail.current]));
+ }
+});
diff --git a/src/components/stats-plus.css b/src/components/stats-plus.css
new file mode 100644
index 0000000000000000000000000000000000000000..fc4417bf506b5a5916c286b72aeaf86189790732
--- /dev/null
+++ b/src/components/stats-plus.css
@@ -0,0 +1,26 @@
+:global(.rs-header) {
+ display: flex;
+ justify-content: space-between;
+ border-bottom: 1px rgba(255,255,255,0.1) solid;
+ margin-bottom: 8px;
+}
+
+:global(.rs-collapse-btn) {
+ cursor: pointer;
+ font-size: 12px;
+}
+
+:global(.rs-fps-counter) {
+ cursor: pointer;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ padding: 8px;
+ color: #aaa;
+ font-size: 10px;
+}
+
+:global(.rs-mobile) {
+ bottom: auto;
+ top: 0;
+}
\ No newline at end of file
diff --git a/src/components/stats-plus.js b/src/components/stats-plus.js
new file mode 100644
index 0000000000000000000000000000000000000000..c64100eeafa0e069a10ff2b005181a2dc446435e
--- /dev/null
+++ b/src/components/stats-plus.js
@@ -0,0 +1,130 @@
+import "./stats-plus.css";
+// Adapted from https://github.com/aframevr/aframe/blob/master/src/components/scene/stats.js
+
+function createStats(scene) {
+ const threeStats = new window.threeStats(scene.renderer);
+ const aframeStats = new window.aframeStats(scene);
+ const plugins = scene.isMobile ? [] : [threeStats, aframeStats];
+ return new window.rStats({
+ css: [], // Our stylesheet is injected from AFrame.
+ values: {
+ fps: { caption: "fps", below: 30 }
+ },
+ groups: [{ caption: "Framerate", values: ["fps", "raf"] }],
+ plugins: plugins
+ });
+}
+
+const HIDDEN_CLASS = "a-hidden";
+
+AFRAME.registerComponent("stats-plus", {
+ // Whether or not the stats panel is expanded.
+ // Shows FPS counter when collapsed.
+ schema: { default: false },
+ init() {
+ this.onExpand = this.onExpand.bind(this);
+ this.onCollapse = this.onCollapse.bind(this);
+ this.onEnterVr = this.onEnterVr.bind(this);
+ this.onExitVr = this.onExitVr.bind(this);
+
+ const scene = this.el.sceneEl;
+ this.stats = createStats(scene);
+ this.statsEl = document.querySelector(".rs-base");
+
+ // Add header to stats panel so we can collapse it
+ const statsHeaderEl = document.createElement("div");
+ statsHeaderEl.classList.add("rs-header");
+
+ const statsTitleEl = document.createElement("h1");
+ statsTitleEl.innerHTML = "Stats";
+ statsHeaderEl.appendChild(statsTitleEl);
+
+ const collapseEl = document.createElement("div");
+ collapseEl.classList.add("rs-collapse-btn");
+ collapseEl.innerHTML = "X";
+ collapseEl.addEventListener("click", this.onCollapse);
+ statsHeaderEl.appendChild(collapseEl);
+
+ this.statsEl.insertBefore(statsHeaderEl, this.statsEl.firstChild);
+
+ // Add fps counter to the page
+ this.fpsEl = document.createElement("div");
+ this.fpsEl.addEventListener("click", this.onExpand);
+ this.fpsEl.classList.add("rs-fps-counter");
+ document.body.appendChild(this.fpsEl);
+ this.lastFpsUpdate = performance.now();
+ this.frameCount = 0;
+
+ if (scene.isMobile) {
+ this.statsEl.classList.add("rs-mobile");
+ this.fpsEl.classList.add("rs-mobile");
+ }
+
+ scene.addEventListener("enter-vr", this.onEnterVr);
+ scene.addEventListener("exit-vr", this.onExitVr);
+ },
+ update(oldData) {
+ if (oldData !== this.data) {
+ if (this.data) {
+ this.statsEl.classList.remove(HIDDEN_CLASS);
+ this.fpsEl.classList.add(HIDDEN_CLASS);
+ } else {
+ this.statsEl.classList.add(HIDDEN_CLASS);
+ this.fpsEl.classList.remove(HIDDEN_CLASS);
+ }
+ }
+ },
+ tick() {
+ if (this.data) {
+ // Update rStats
+ const stats = this.stats;
+ stats("rAF").tick();
+ stats("FPS").frame();
+ stats().update();
+ } else {
+ // Update the fps counter
+ const now = performance.now();
+ this.frameCount++;
+
+ // Update the fps counter text once a second
+ if (now >= this.lastFpsUpdate + 1000) {
+ const fps = this.frameCount / ((now - this.lastFpsUpdate) / 1000);
+ this.fpsEl.innerHTML = Math.round(fps) + " FPS";
+ this.lastFpsUpdate = now;
+ this.frameCount = 0;
+ }
+ }
+ },
+ onEnterVr() {
+ // Hide all stats elements when entering VR on mobile
+ if (this.el.sceneEl.isMobile) {
+ this.statsEl.classList.add(HIDDEN_CLASS);
+ this.fpsEl.classList.add(HIDDEN_CLASS);
+ }
+ },
+ onExitVr() {
+ // Revert to previous state whe exiting VR on mobile
+ if (this.el.sceneEl.isMobile) {
+ if (this.data) {
+ this.statsEl.classList.remove(HIDDEN_CLASS);
+ } else {
+ this.fpsEl.classList.remove(HIDDEN_CLASS);
+ }
+ }
+ },
+ onExpand() {
+ this.el.setAttribute(this.name, true);
+ },
+ onCollapse() {
+ this.el.setAttribute(this.name, false);
+ },
+ remove() {
+ this.el.sceneEl.removeListener("enter-vr", this.hide);
+ this.el.sceneEl.removeListener("exit-vr", this.show);
+
+ if (this.statsEl) {
+ this.statsEl.parentNode.removeChild(this.statsEl);
+ this.fpsEl.parentNode.removeChild(this.fpsEl);
+ }
+ }
+});
diff --git a/src/components/virtual-gamepad-controls.css b/src/components/virtual-gamepad-controls.css
index d3e36e2fa243e0d9e35e693224cbd235420a0702..572e6169f6a29c911d0fa89e37382b10838da3c0 100644
--- a/src/components/virtual-gamepad-controls.css
+++ b/src/components/virtual-gamepad-controls.css
@@ -1,6 +1,6 @@
:local(.touchZone) {
position: absolute;
- top: 0;
+ height: 20vh;
bottom: 0;
}
@@ -13,7 +13,3 @@
left: 50%;
right: 0;
}
-
-:local(.touchZone) .nipple {
- margin: 5vh 5vw;
-}
diff --git a/src/components/virtual-gamepad-controls.js b/src/components/virtual-gamepad-controls.js
index d70219bf1e6374fefc6d6daaeb9e8e10bfc27fb8..f92b7d4534f8e45e499edf6bcf1345f9e0f33374 100644
--- a/src/components/virtual-gamepad-controls.js
+++ b/src/components/virtual-gamepad-controls.js
@@ -16,29 +16,42 @@ AFRAME.registerComponent("virtual-gamepad-controls", {
const leftStick = nipplejs.create({
zone: leftTouchZone,
- mode: "static",
color: "white",
- position: { left: "50px", bottom: "50px" }
+ fadeTime: 0
});
const rightStick = nipplejs.create({
zone: rightTouchZone,
- mode: "static",
color: "white",
- position: { right: "50px", bottom: "50px" }
+ fadeTime: 0
});
- this.onJoystickChanged = this.onJoystickChanged.bind(this);
+ this.onMoveJoystickChanged = this.onMoveJoystickChanged.bind(this);
+ this.onMoveJoystickEnd = this.onMoveJoystickEnd.bind(this);
+ this.onLookJoystickChanged = this.onLookJoystickChanged.bind(this);
+ this.onLookJoystickEnd = this.onLookJoystickEnd.bind(this);
- rightStick.on("move end", this.onJoystickChanged);
- leftStick.on("move end", this.onJoystickChanged);
+ leftStick.on("move", this.onMoveJoystickChanged);
+ leftStick.on("end", this.onMoveJoystickEnd);
+
+ rightStick.on("move", this.onLookJoystickChanged);
+ rightStick.on("end", this.onLookJoystickEnd);
this.leftTouchZone = leftTouchZone;
this.rightTouchZone = rightTouchZone;
this.leftStick = leftStick;
this.rightStick = rightStick;
- this.yaw = 0;
+ this.inVr = false;
+ this.moving = false;
+ this.rotating = false;
+
+ this.moveEvent = {
+ axis: [0, 0]
+ };
+ this.rotateYEvent = {
+ value: 0
+ };
this.onEnterVr = this.onEnterVr.bind(this);
this.onExitVr = this.onExitVr.bind(this);
@@ -46,39 +59,59 @@ AFRAME.registerComponent("virtual-gamepad-controls", {
this.el.sceneEl.addEventListener("exit-vr", this.onExitVr);
},
- onJoystickChanged(event, joystick) {
- if (event.target.id === this.leftStick.id) {
- if (event.type === "move") {
- const angle = joystick.angle.radian;
- const force = joystick.force < 1 ? joystick.force : 1;
- const x = Math.cos(angle) * force;
- const z = Math.sin(angle) * force;
- this.el.sceneEl.emit("move", { axis: [x, z] });
- } else {
- this.el.sceneEl.emit("move", { axis: [0, 0] });
+ onMoveJoystickChanged(event, joystick) {
+ const angle = joystick.angle.radian;
+ const force = joystick.force < 1 ? joystick.force : 1;
+ const x = Math.cos(angle) * force;
+ const z = Math.sin(angle) * force;
+ this.moving = true;
+ this.moveEvent.axis[0] = x;
+ this.moveEvent.axis[1] = z;
+ },
+
+ onMoveJoystickEnd() {
+ this.moving = false;
+ this.moveEvent.axis[0] = 0;
+ this.moveEvent.axis[1] = 0;
+ this.el.sceneEl.emit("move", this.moveEvent);
+ },
+
+ onLookJoystickChanged(event, joystick) {
+ // Set pitch and yaw angles on right stick move
+ const angle = joystick.angle.radian;
+ const force = joystick.force < 1 ? joystick.force : 1;
+ this.rotating = true;
+ this.rotateYEvent.value = Math.cos(angle) * force;
+ },
+
+ onLookJoystickEnd() {
+ this.rotating = false;
+ this.rotateYEvent.value = 0;
+ this.el.sceneEl.emit("rotateY", this.rotateYEvent);
+ },
+
+ tick() {
+ if (!this.inVr) {
+ if (this.moving) {
+ this.el.sceneEl.emit("move", this.moveEvent);
}
- } else {
- if (event.type === "move") {
- // Set pitch and yaw angles on right stick move
- const angle = joystick.angle.radian;
- const force = joystick.force < 1 ? joystick.force : 1;
- this.yaw = Math.cos(angle) * force;
- this.el.sceneEl.emit("rotateY", { value: this.yaw });
- } else {
- this.yaw = 0;
- this.el.sceneEl.emit("rotateY", { value: this.yaw });
+
+ if (this.rotating) {
+ this.el.sceneEl.emit("rotateY", this.rotateYEvent);
}
}
},
onEnterVr() {
// Hide the joystick controls
+ this.inVr = true;
this.leftTouchZone.style.display = "none";
this.rightTouchZone.style.display = "none";
},
onExitVr() {
// Show the joystick controls
+ this.inVr = false;
this.leftTouchZone.style.display = "block";
this.rightTouchZone.style.display = "block";
},
diff --git a/src/hub.html b/src/hub.html
index 00df0df4d8263e4701f9bb3d8152b55d680669ad..edb7395d4641f10c27994b3399dc580e72f6952b 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -64,7 +64,7 @@
<a-entity class="model" gltf-model-plus="inflate: true">
<template data-selector=".RootScene">
- <a-entity ik-controller animation-mixer space-invader-mesh="meshSelector: .Bot_Skinned"></a-entity>
+ <a-entity ik-controller hand-pose__left hand-pose__right animation-mixer space-invader-mesh="meshSelector: .Bot_Skinned"></a-entity>
</template>
<template data-selector=".Neck">
@@ -158,7 +158,7 @@
<!-- Player Rig -->
<a-entity
id="player-rig"
- networked="template: #remote-avatar-template; attachLocalTemplate: false;"
+ networked="template: #remote-avatar-template; attachTemplateToLocal: false;"
spawn-controller="radius: 4;"
wasd-to-analog2d
character-controller="pivot: #player-camera"
@@ -228,8 +228,11 @@
<template data-selector=".RootScene">
<a-entity
ik-controller
- animated-robot-hands
animation-mixer
+ hand-pose__left
+ hand-pose__right
+ hand-pose-controller__left="eventSrc:#player-left-controller"
+ hand-pose-controller__right="eventSrc:#player-right-controller"
></a-entity>
</template>
@@ -276,7 +279,12 @@
></a-entity>
<!-- Environment -->
- <a-entity id="environment-root" position="0 0 0" nav-mesh-helper></a-entity>
+ <a-entity
+ id="environment-root"
+ nav-mesh-helper
+ static-body="shape: none;"
+ class="collidable"
+ ></a-entity>
<a-entity
id="skybox"
@@ -295,23 +303,6 @@
xr="ar: false"
></a-entity>
- <a-cylinder
- position="0 0.45 0"
- material="visible: false"
- height="1" radius="3.1"
- segments-radial="12"
- static-body
- class="collidable"
- ></a-cylinder>
-
- <a-plane
- material="visible: false"
- rotation="-90 0 0"
- height="35"
- width="35"
- static-body
- class="collidable"
- ></a-plane>
</a-scene>
<div id="ui-root"></div>
diff --git a/src/hub.js b/src/hub.js
index 56fd23411736512ae4cd0d5cbe785d635d97021b..cf096150c926e89d4999d87cd0ff34210dc73cd3 100644
--- a/src/hub.js
+++ b/src/hub.js
@@ -1,5 +1,8 @@
import "./assets/stylesheets/hub.scss";
+import moment from "moment-timezone";
+import uuid from "uuid/v4";
import queryString from "query-string";
+import { Socket } from "phoenix";
import { patchWebGLRenderingContext } from "./utils/webgl";
patchWebGLRenderingContext();
@@ -15,7 +18,7 @@ import "aframe-rounded";
import "webrtc-adapter";
import trackpad_dpad4 from "./behaviours/trackpad-dpad4";
-import { joystick_dpad4 } from "./behaviours/joystick-dpad4";
+import joystick_dpad4 from "./behaviours/joystick-dpad4";
import { PressedMove } from "./activators/pressedmove";
import { ReverseY } from "./activators/reversey";
import "./activators/shortpress";
@@ -37,22 +40,25 @@ import "./components/water";
import "./components/skybox";
import "./components/layers";
import "./components/spawn-controller";
-import "./components/animated-robot-hands";
import "./components/hide-when-quality";
import "./components/player-info";
import "./components/debug";
import "./components/animation-mixer";
import "./components/loop-animation";
+import "./components/hand-poses";
import "./components/gltf-model-plus";
import "./components/gltf-bundle";
import "./components/hud-controller";
+import "./components/stats-plus";
import ReactDOM from "react-dom";
import React from "react";
import UIRoot from "./react-components/ui-root";
+import HubChannel from "./utils/hub-channel";
import "./systems/personal-space-bubble";
import "./systems/app-mode";
+import "./systems/exit-on-blur";
import "./gltf-component-mappings";
@@ -86,7 +92,7 @@ import { inGameActions, config as inputConfig } from "./input-mappings";
import registerTelemetry from "./telemetry";
import Store from "./storage/store";
-import { generateDefaultProfile } from "./utils/identity.js";
+import { generateDefaultProfile, generateRandomName } from "./utils/identity.js";
import { getAvailableVREntryTypes } from "./utils/vr-caps-detect.js";
import ConcurrentLoadDetector from "./utils/concurrent-load-detector.js";
@@ -106,14 +112,23 @@ AFRAME.registerInputMappings(inputConfig, true);
const store = new Store();
const concurrentLoadDetector = new ConcurrentLoadDetector();
-const uiRootProps = {};
+const hubChannel = new HubChannel(store);
concurrentLoadDetector.start();
// Always layer in any new default profile bits
store.update({ profile: { ...generateDefaultProfile(), ...(store.state.profile || {}) } });
+// Regenerate name to encourage users to change it.
+if (!store.state.profile.has_changed_name) {
+ store.update({ profile: { display_name: generateRandomName() } });
+}
+
async function exitScene() {
+ if (NAF.connection.adapter && NAF.connection.adapter.localMediaStream) {
+ NAF.connection.adapter.localMediaStream.getTracks().forEach(t => t.stop());
+ }
+ hubChannel.disconnect();
const scene = document.querySelector("a-scene");
scene.renderer.animate(null); // Stop animation loop, TODO A-Frame should do this
document.body.removeChild(scene);
@@ -134,6 +149,8 @@ async function enterScene(mediaStream, enterInVR, janusRoomId) {
document.querySelector("a-scene canvas").classList.remove("blurred");
scene.render();
+ scene.setAttribute("stats-plus", false);
+
if (enterInVR) {
scene.enterVR();
}
@@ -147,11 +164,7 @@ async function enterScene(mediaStream, enterInVR, janusRoomId) {
serverURL: process.env.JANUS_SERVER
});
- if (!qsTruthy("no_stats")) {
- scene.setAttribute("stats", true);
- }
-
- if (isMobile || qsTruthy(qs.mobile)) {
+ if (isMobile || qsTruthy("mobile")) {
playerRig.setAttribute("virtual-gamepad-controls", {});
}
@@ -187,6 +200,12 @@ async function enterScene(mediaStream, enterInVR, janusRoomId) {
});
if (!qsTruthy("offline")) {
+ document.body.addEventListener("connected", () => {
+ hubChannel.sendEntryEvent().then(() => {
+ store.update({ lastEnteredAt: moment().toJSON() });
+ });
+ });
+
scene.components["networked-scene"].connect();
if (mediaStream) {
@@ -210,12 +229,12 @@ async function enterScene(mediaStream, enterInVR, janusRoomId) {
}
}
-function mountUI(scene) {
+function mountUI(scene, props = {}) {
const disableAutoExitOnConcurrentLoad = qsTruthy("allow_multi");
const forcedVREntryType = qs.vr_entry_type || null;
const enableScreenSharing = qsTruthy("enable_screen_sharing");
const htmlPrefix = document.body.dataset.htmlPrefix || "";
- const showProfileEntry = !store.state.profile.has_saved_profile;
+ const showProfileEntry = !store.state.profile.has_changed_name;
ReactDOM.render(
<UIRoot
@@ -230,7 +249,7 @@ function mountUI(scene) {
store,
htmlPrefix,
showProfileEntry,
- ...uiRootProps
+ ...props
}}
/>,
document.getElementById("ui-root")
@@ -246,21 +265,21 @@ const onReady = async () => {
mountUI(scene);
- const remountUI = () => {
- mountUI(scene);
+ let modifiedProps = {};
+ const remountUI = props => {
+ modifiedProps = { ...modifiedProps, ...props };
+ mountUI(scene, modifiedProps);
};
getAvailableVREntryTypes().then(availableVREntryTypes => {
- uiRootProps.availableVREntryTypes = availableVREntryTypes;
- remountUI();
+ remountUI({ availableVREntryTypes });
});
const environmentRoot = document.querySelector("#environment-root");
const initialEnvironmentEl = document.createElement("a-entity");
initialEnvironmentEl.addEventListener("bundleloaded", () => {
- uiRootProps.initialEnvironmentLoaded = true;
- remountUI();
+ remountUI({ initialEnvironmentLoaded: true });
// Wait a tick plus some margin so that the environments actually render.
setTimeout(() => scene.renderer.animate(null), 100);
});
@@ -268,8 +287,7 @@ const onReady = async () => {
if (qs.room) {
// If ?room is set, this is `yarn start`, so just use a default environment and query string room.
- uiRootProps.janusRoomId = qs.room && !isNaN(parseInt(qs.room)) ? parseInt(qs.room) : 1;
- remountUI();
+ remountUI({ janusRoomId: qs.room && !isNaN(parseInt(qs.room)) ? parseInt(qs.room) : 1 });
initialEnvironmentEl.setAttribute("gltf-bundle", {
src: "https://asset-bundles-prod.reticulum.io/rooms/meetingroom/MeetingRoom.bundle.json"
// src: "https://asset-bundles-prod.reticulum.io/rooms/theater/TheaterMeshes.bundle.json"
@@ -279,16 +297,32 @@ const onReady = async () => {
return;
}
- const hubId = document.location.pathname.substring(1).split("/")[0];
+ // Connect to reticulum over phoenix channels to get hub info.
+ const hubId = qs.hub_id || document.location.pathname.substring(1).split("/")[0];
console.log(`Hub ID: ${hubId}`);
- const res = await fetch(`/api/v1/hubs/${hubId}`);
- const data = await res.json();
- const hub = data.hubs[0];
- const defaultSpaceTopic = hub.topics[0];
- const gltfBundleUrl = defaultSpaceTopic.assets.find(a => a.asset_type === "gltf_bundle").src;
- uiRootProps.janusRoomId = defaultSpaceTopic.janus_room_id;
- remountUI();
- initialEnvironmentEl.setAttribute("gltf-bundle", `src: ${gltfBundleUrl}`);
+
+ const socketProtocol = document.location.protocol === "https:" ? "wss:" : "ws:";
+ const socketPort = qs.phx_port || document.location.port;
+ const socketHost = qs.phx_host || document.location.hostname;
+ const socketUrl = `${socketProtocol}//${socketHost}${socketPort ? `:${socketPort}` : ""}/socket`;
+ console.log(`Phoenix Channel URL: ${socketUrl}`);
+
+ const socket = new Socket(socketUrl, { params: { session_id: uuid() } });
+ socket.connect();
+
+ const channel = socket.channel(`hub:${hubId}`, {});
+
+ channel
+ .join()
+ .receive("ok", data => {
+ const hub = data.hubs[0];
+ const defaultSpaceTopic = hub.topics[0];
+ const gltfBundleUrl = defaultSpaceTopic.assets.find(a => a.asset_type === "gltf_bundle").src;
+ remountUI({ janusRoomId: defaultSpaceTopic.janus_room_id });
+ initialEnvironmentEl.setAttribute("gltf-bundle", `src: ${gltfBundleUrl}`);
+ hubChannel.setPhoenixChannel(channel);
+ })
+ .receive("error", res => console.error(res));
};
document.addEventListener("DOMContentLoaded", onReady);
diff --git a/src/network-schemas.js b/src/network-schemas.js
index 54cc0b63ba40efed17baf43c0d3554b1ea2fa4bc..822951bedb782de1ba401ae20c00232f47b61412 100644
--- a/src/network-schemas.js
+++ b/src/network-schemas.js
@@ -3,9 +3,22 @@ function registerNetworkSchemas() {
template: "#remote-avatar-template",
components: [
"position",
- "rotation",
+ {
+ component: "rotation",
+ lerp: false
+ },
"scale",
"player-info",
+ {
+ selector: ".RootScene",
+ component: "hand-pose__left",
+ property: "pose"
+ },
+ {
+ selector: ".RootScene",
+ component: "hand-pose__right",
+ property: "pose"
+ },
{
selector: ".camera",
component: "position"
diff --git a/src/react-components/avatar-selector.js b/src/react-components/avatar-selector.js
index d88340f04532b89d07512d38bb3f292c78e4e844..6ae6ab6ac91110ae8cc65b9d5b5f2db8d075f911 100644
--- a/src/react-components/avatar-selector.js
+++ b/src/react-components/avatar-selector.js
@@ -20,8 +20,8 @@ class AvatarSelector extends Component {
const numAvatars = this.props.avatars.length;
return ((currAvatarIndex + direction) % numAvatars + numAvatars) % numAvatars;
};
- nextAvatarIndex = () => this.getAvatarIndex(1);
- previousAvatarIndex = () => this.getAvatarIndex(-1);
+ nextAvatarIndex = () => this.getAvatarIndex(-1);
+ previousAvatarIndex = () => this.getAvatarIndex(1);
emitChangeToNext = () => {
const nextAvatarId = this.props.avatars[this.nextAvatarIndex()].id;
@@ -38,7 +38,17 @@ class AvatarSelector extends Component {
// HACK - a-animation ought to restart the animation when the `to` attribute changes, but it doesn't
// so we need to force it here.
const currRot = this.animation.parentNode.getAttribute("rotation");
- this.animation.setAttribute("from", `${currRot.x} ${currRot.y} ${currRot.z}`);
+ const currY = currRot.y;
+ const toRot = this.animation.getAttribute("to").split(" ");
+ const toY = toRot[1];
+ const step = 360.0 / this.props.avatars.length;
+ const brokenlyBigRotation = Math.abs(toY - currY) > 3 * step;
+ let fromY = currY;
+ if (brokenlyBigRotation) {
+ // Rotation in Y wrapped around 360. Adjust the "from" to prevent a dramatic rotation
+ fromY = currY < toY ? currY + 360 : currY - 360;
+ }
+ this.animation.setAttribute("from", `${currRot.x} ${fromY} ${currRot.z}`);
this.animation.stop();
this.animation.handleMixinUpdate();
this.animation.start();
@@ -83,7 +93,7 @@ class AvatarSelector extends Component {
attribute="rotation"
dur="1000"
easing="ease-out"
- to={`0 ${360 * this.getAvatarIndex() / this.props.avatars.length + 180} 0`}
+ to={`0 ${(360 * this.getAvatarIndex() / this.props.avatars.length + 180) % 360} 0`}
/>
{avatarEntities}
</a-entity>
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index af896b643db9e3cf38ac5403aa58e143f28c58ce..d91dfdbed6e726a785cbb8744d35e3dab066085c 100644
--- a/src/react-components/home-root.js
+++ b/src/react-components/home-root.js
@@ -3,6 +3,8 @@ import PropTypes from "prop-types";
import { IntlProvider, FormattedMessage, addLocaleData } from "react-intl";
import en from "react-intl/locale-data/en";
import homeVideo from "../assets/video/home.webm";
+import classNames from "classnames";
+import formurlencoded from "form-urlencoded";
import HubCreatePanel from "./hub-create-panel.js";
@@ -28,7 +30,10 @@ class HomeRoot extends Component {
};
state = {
- environments: []
+ environments: [],
+ dialogType: null,
+ mailingListEmail: "",
+ mailingListPrivacy: false
};
componentDidMount() {
@@ -36,6 +41,40 @@ class HomeRoot extends Component {
document.querySelector("#background-video").playbackRate = 0.5;
}
+ showDialog = dialogType => {
+ return e => {
+ e.preventDefault();
+ e.stopPropagation();
+ this.setState({ dialogType });
+ };
+ };
+
+ closeDialog = () => {
+ this.setState({ dialogType: null });
+ };
+
+ signUpForMailingList = async e => {
+ e.preventDefault();
+ e.stopPropagation();
+ if (!this.state.mailingListPrivacy) return;
+
+ const url = "https://www.mozilla.org/en-US/newsletter/";
+
+ const payload = {
+ email: this.state.mailingListEmail,
+ newsletters: "mixed-reality",
+ privacy: true,
+ fmt: "H",
+ source_url: document.location.href
+ };
+
+ await fetch(url, {
+ body: formurlencoded(payload),
+ method: "POST",
+ headers: { "content-type": "application/x-www-form-urlencoded" }
+ }).then(() => this.setState({ dialogType: "email_submitted" }));
+ };
+
loadEnvironments = () => {
const environments = [];
@@ -52,10 +91,98 @@ class HomeRoot extends Component {
};
render() {
+ let dialogTitle = null;
+ let dialogBody = null;
+
+ switch (this.state.dialogType) {
+ // TODO i18n, FormattedMessage doesn't play nicely with links
+ case "slack":
+ dialogTitle = "Get in Touch";
+ dialogBody = (
+ <span>
+ Want to join the conversation?
+ <p />
+ Join us on the{" "}
+ <a href="https://webvr-slack.herokuapp.com/" target="_blank" rel="noopener noreferrer">
+ WebVR Slack
+ </a>{" "}
+ in the #social channel.<br />VR meetups every Friday at noon PST!
+ <p /> Or, tweet at{" "}
+ <a href="https://twitter.com/mozillareality" target="_blank" rel="noopener noreferrer">
+ @mozillareality
+ </a>{" "}
+ on Twitter.
+ </span>
+ );
+ break;
+ case "email_submitted":
+ dialogTitle = "";
+ dialogBody = "Great! Please check your e-mail to confirm your subscription.";
+ break;
+ case "updates":
+ dialogTitle = "";
+ dialogBody = (
+ <span>
+ Sign up to get release notes about new features.
+ <p />
+ <form onSubmit={this.signUpForMailingList}>
+ <div className="mailing-list-form">
+ <input
+ type="email"
+ value={this.state.mailingListEmail}
+ onChange={e => this.setState({ mailingListEmail: e.target.value })}
+ className="mailing-list-form__email_field"
+ required
+ placeholder="Your email here"
+ />
+ <label className="mailing-list-form__privacy">
+ <input
+ className="mailing-list-form__privacy_checkbox"
+ type="checkbox"
+ required
+ value={this.state.mailingListPrivacy}
+ onChange={e => this.setState({ mailingListPrivacy: e.target.checked })}
+ />
+ <span className="mailing-list-form__privacy_label">
+ <FormattedMessage id="mailing_list.privacy_label" />{" "}
+ <a target="_blank" rel="noopener noreferrer" href="https://www.mozilla.org/en-US/privacy/">
+ <FormattedMessage id="mailing_list.privacy_link" />
+ </a>
+ </span>
+ </label>
+ <input className="mailing-list-form__submit" type="submit" value="Sign Up Now" />
+ </div>
+ </form>
+ </span>
+ );
+ break;
+ case "report":
+ dialogTitle = "Report an Issue";
+ dialogBody = (
+ <span>
+ Need to report a problem?
+ <p />
+ You can file a{" "}
+ <a href="https://github.com/mozilla/mr-social-client/issues" target="_blank" rel="noopener noreferrer">
+ Github Issue
+ </a>{" "}
+ or e-mail us for support at <a href="mailto:hubs@mozilla.com">hubs@mozilla.com</a>.
+ <p />
+ You can also find us in #social on the{" "}
+ <a href="http://webvr-slack.herokuapp.com/" target="_blank" rel="noopener noreferrer">
+ WebVR Slack
+ </a>.
+ </span>
+ );
+ break;
+ }
+
+ const mainContentClassNames = classNames({ "main-content": true, "main-content--noninteractive": !!dialogTitle });
+
return (
<IntlProvider locale={lang} messages={messages}>
<div className="home">
- <div className="main-content">
+ <div className={mainContentClassNames}>
<div className="header-content">
<div className="header-content__title">
<img className="header-content__title__name" src="../assets/images/logo.svg" />
@@ -110,13 +237,28 @@ class HomeRoot extends Component {
<div className="footer-content">
<div className="footer-content__links">
<div className="footer-content__links__top">
- <a className="footer-content__links__link" rel="noopener noreferrer" target="_blank" href="#">
- <FormattedMessage id="home.join_on_slack" />
+ <a
+ className="footer-content__links__link"
+ rel="noopener noreferrer"
+ href="#"
+ onClick={this.showDialog("slack")}
+ >
+ <FormattedMessage id="home.join_us" />
</a>
- <a className="footer-content__links__link" rel="noopener noreferrer" target="_blank" href="#">
+ <a
+ className="footer-content__links__link"
+ rel="noopener noreferrer"
+ href="#"
+ onClick={this.showDialog("updates")}
+ >
<FormattedMessage id="home.get_updates" />
</a>
- <a className="footer-content__links__link" rel="noopener noreferrer" target="_blank" href="#">
+ <a
+ className="footer-content__links__link"
+ rel="noopener noreferrer"
+ href="#"
+ onClick={this.showDialog("report")}
+ >
<FormattedMessage id="home.report_issue" />
</a>
</div>
@@ -130,6 +272,22 @@ class HomeRoot extends Component {
<video playsInline autoPlay muted loop className="background-video" id="background-video">
<source src={homeVideo} type="video/webm" />
</video>
+ {this.state.dialogType && (
+ <div className="overlay">
+ <div className="dialog">
+ <div className="dialog__box">
+ <div className="dialog__box__contents">
+ <button className="dialog__box__contents__close" onClick={this.closeDialog}>
+ <span>🗙</span>
+ </button>
+ <div className="dialog__box__contents__title">{dialogTitle}</div>
+ <div className="dialog__box__contents__body">{dialogBody}</div>
+ <div className="dialog__box__contents__button-container" />
+ </div>
+ </div>
+ </div>
+ </div>
+ )}
</div>
</IntlProvider>
);
diff --git a/src/react-components/profile-entry-panel.js b/src/react-components/profile-entry-panel.js
index 8850fb9e5e4fd01241109e8ef4f5885e9b063760..2732f3ca9bd173cc3390bd1af05316b8f6614747 100644
--- a/src/react-components/profile-entry-panel.js
+++ b/src/react-components/profile-entry-panel.js
@@ -14,10 +14,8 @@ class ProfileEntryPanel extends Component {
constructor(props) {
super(props);
- this.state = {
- display_name: this.props.store.state.profile.display_name,
- avatar_id: this.props.store.state.profile.avatar_id
- };
+ const { display_name, avatar_id } = this.props.store.state.profile;
+ this.state = { display_name, avatar_id };
this.props.store.addEventListener("statechanged", this.storeUpdated);
}
@@ -30,12 +28,13 @@ class ProfileEntryPanel extends Component {
e.preventDefault();
const has_agreed_to_terms = this.props.store.state.profile.has_agreed_to_terms || this.state.has_agreed_to_terms;
if (!has_agreed_to_terms) return;
+ const { has_changed_name, display_name } = this.props.store.state.profile;
+ const hasChangedName = has_changed_name || this.state.display_name !== display_name;
this.props.store.update({
profile: {
- has_saved_profile: true,
has_agreed_to_terms: true,
- display_name: this.state.display_name,
- avatar_id: this.state.avatar_id
+ has_changed_name: hasChangedName,
+ ...this.state
}
});
this.props.finished();
@@ -104,7 +103,7 @@ class ProfileEntryPanel extends Component {
type="checkbox"
required
value={this.state.has_agreed_to_terms}
- onChange={e => this.setState({ has_agreed_to_terms: e.target.value })}
+ onChange={e => this.setState({ has_agreed_to_terms: e.target.checked })}
/>
<span className="profile-entry__terms__text">
<FormattedMessage id="profile.terms.prefix" />{" "}
diff --git a/src/react-components/profile-info-header.js b/src/react-components/profile-info-header.js
index 43ec49291007089d54e1d1a52c7a586e766e5fb4..ca7a3b891c3c99cc3aca753244ba4289abe525b4 100644
--- a/src/react-components/profile-info-header.js
+++ b/src/react-components/profile-info-header.js
@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
export const ProfileInfoHeader = props => (
<div className="profile-info-header">
<img src="../assets/images/account.svg" onClick={props.onClick} className="profile-info-header__icon" />
- <div className="profile-info-header__profile_display_name" onClick={props.onClick}>
+ <div className="profile-info-header__profile_display_name" onClick={props.onClick} title={props.name}>
{props.name}
</div>
<div className="profile-info-header__app_name">
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 7103b25831e24aa972d2315152103cfe4b485e60..fa4f0ee177013995b5904dd954573c034ffbc9a8 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -108,6 +108,12 @@ class UIRoot extends Component {
this.props.scene.addEventListener("loaded", this.onSceneLoaded);
this.props.scene.addEventListener("stateadded", this.onAframeStateChanged);
this.props.scene.addEventListener("stateremoved", this.onAframeStateChanged);
+ this.props.scene.addEventListener("exit", this.exit);
+ }
+
+ componentWillUnmount() {
+ this.props.scene.removeEventListener("loaded", this.onSceneLoaded);
+ this.props.scene.removeEventListener("exit", this.exit);
}
componentDidUpdate(prevProps) {
diff --git a/src/storage/store.js b/src/storage/store.js
index 0e76ee5a0449c85b374d0b46e7fadbf8d9e1050c..4351ebeda99e9f9665fcbbf395858296cd2e56a4 100644
--- a/src/storage/store.js
+++ b/src/storage/store.js
@@ -1,5 +1,6 @@
import uuid from "uuid/v4";
import { Validator } from "jsonschema";
+import { merge } from "lodash";
const LOCAL_STORE_KEY = "___mozilla_duck";
const STORE_STATE_CACHE_KEY = Symbol();
@@ -16,8 +17,8 @@ export const SCHEMA = {
type: "object",
additionalProperties: false,
properties: {
- has_saved_profile: { type: "boolean" },
has_agreed_to_terms: { type: "boolean" },
+ has_changed_name: { type: "boolean" },
display_name: { type: "string", pattern: "^[A-Za-z0-9-]{3,32}$" },
avatar_id: { type: "string" }
}
@@ -29,7 +30,8 @@ export const SCHEMA = {
properties: {
id: { type: "string", pattern: "^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$" },
profile: { $ref: "#/definitions/profile" },
- lastUsedMicDeviceId: { type: "string" }
+ lastUsedMicDeviceId: { type: "string" },
+ lastEnteredAt: { type: "string" }
},
additionalProperties: false
@@ -57,7 +59,7 @@ export default class Store extends EventTarget {
throw new Error("Store id is immutable.");
}
- const finalState = { ...this.state, ...newState };
+ const finalState = merge(this.state, newState);
const isValid = validator.validate(finalState, SCHEMA).valid;
if (!isValid) {
diff --git a/src/systems/exit-on-blur.js b/src/systems/exit-on-blur.js
new file mode 100644
index 0000000000000000000000000000000000000000..e6263a101f5a2fd1f71cd4b122a12431104e2457
--- /dev/null
+++ b/src/systems/exit-on-blur.js
@@ -0,0 +1,30 @@
+AFRAME.registerSystem("exit-on-blur", {
+ init() {
+ this.onBlur = this.onBlur.bind(this);
+ this.onFocus = this.onFocus.bind(this);
+
+ window.addEventListener("blur", this.onBlur);
+ window.addEventListener("focus", this.onFocus);
+
+ this.exitTimeout = null;
+ },
+
+ onBlur() {
+ if (this.el.isMobile) {
+ this.exitTimeout = setTimeout(() => {
+ this.el.dispatchEvent(new CustomEvent("exit"));
+ }, 10 * 1000);
+ }
+ },
+
+ onFocus() {
+ if (this.el.isMobile) {
+ clearTimeout(this.exitTimeout);
+ }
+ },
+
+ remove() {
+ clearTimeout(this.exitTimeout);
+ window.removeEventListener("blur", this.onBlur);
+ }
+});
diff --git a/src/utils/hub-channel.js b/src/utils/hub-channel.js
new file mode 100644
index 0000000000000000000000000000000000000000..13e51b21b1e1f3702432a7a04c6804949c332b88
--- /dev/null
+++ b/src/utils/hub-channel.js
@@ -0,0 +1,75 @@
+import moment from "moment-timezone";
+
+export default class HubChannel {
+ constructor(store) {
+ this.store = store;
+ }
+
+ setPhoenixChannel = channel => {
+ this.channel = channel;
+ };
+
+ sendEntryEvent = async () => {
+ if (!this.channel) {
+ console.warn("No phoenix channel initialized before room entry.");
+ return;
+ }
+
+ let entryDisplayType = "Screen";
+
+ if (navigator.getVRDisplays) {
+ const vrDisplay = (await navigator.getVRDisplays()).find(d => d.isPresenting);
+
+ if (vrDisplay) {
+ entryDisplayType = vrDisplay.displayName;
+ }
+ }
+
+ // This is fairly hacky, but gets the # of initial occupants
+ let initialOccupantCount = 0;
+
+ if (NAF.connection.adapter && NAF.connection.adapter.publisher) {
+ initialOccupantCount = NAF.connection.adapter.publisher.initialOccupants.length;
+ }
+
+ const entryTimingFlags = this.getEntryTimingFlags();
+
+ const entryEvent = {
+ ...entryTimingFlags,
+ initialOccupantCount,
+ entryDisplayType,
+ userAgent: navigator.userAgent
+ };
+
+ this.channel.push("events:entered", entryEvent);
+ };
+
+ getEntryTimingFlags = () => {
+ const entryTimingFlags = { isNewDaily: true, isNewMonthly: true, isNewDayWindow: true, isNewMonthWindow: true };
+
+ if (!this.store.state.lastEnteredAt) {
+ return entryTimingFlags;
+ }
+
+ const lastEntered = moment(this.store.state.lastEnteredAt);
+ const lastEnteredPst = moment(lastEntered).tz("America/Los_Angeles");
+ const nowPst = moment().tz("America/Los_Angeles");
+ const dayWindowAgo = moment().subtract(1, "day");
+ const monthWindowAgo = moment().subtract(1, "month");
+
+ entryTimingFlags.isNewDaily =
+ lastEnteredPst.dayOfYear() !== nowPst.dayOfYear() || lastEnteredPst.year() !== nowPst.year();
+ entryTimingFlags.isNewMonthly =
+ lastEnteredPst.month() !== nowPst.month() || lastEnteredPst.year() !== nowPst.year();
+ entryTimingFlags.isNewDayWindow = lastEntered.isBefore(dayWindowAgo);
+ entryTimingFlags.isNewMonthWindow = lastEntered.isBefore(monthWindowAgo);
+
+ return entryTimingFlags;
+ };
+
+ disconnect = () => {
+ if (this.channel) {
+ this.channel.socket.disconnect();
+ }
+ };
+}
diff --git a/src/utils/identity.js b/src/utils/identity.js
index 917553d7c2f13c647349eea95c6e0743814314f3..db78b027e3e851aa254532f264438e362062576c 100644
--- a/src/utils/identity.js
+++ b/src/utils/identity.js
@@ -1,180 +1,108 @@
import { avatars } from "../assets/avatars/avatars.js";
const names = [
- "albattani",
- "allen",
- "almeida",
- "agnesi",
- "archimedes",
- "ardinghelli",
- "aryabhata",
- "austin",
- "babbage",
- "banach",
- "bardeen",
- "bartik",
- "bassi",
- "beaver",
- "bell",
- "benz",
- "bhabha",
- "bhaskara",
- "blackwell",
- "bohr",
- "booth",
- "borg",
- "bose",
- "boyd",
- "brahmagupta",
- "brattain",
- "brown",
- "carson",
- "chandrasekhar",
- "shannon",
- "clarke",
- "colden",
- "cori",
- "cray",
- "curran",
- "curie",
- "darwin",
- "davinci",
- "dijkstra",
- "dubinsky",
- "easley",
- "edison",
- "einstein",
- "elion",
- "engelbart",
- "euclid",
- "euler",
- "fermat",
- "fermi",
- "feynman",
- "franklin",
- "galileo",
- "gates",
- "goldberg",
- "goldstine",
- "goldwasser",
- "golick",
- "goodall",
- "haibt",
- "hamilton",
- "hawking",
- "heisenberg",
- "hermann",
- "heyrovsky",
- "hodgkin",
- "hoover",
- "hopper",
- "hugle",
- "hypatia",
- "jackson",
- "jang",
- "jennings",
- "jepsen",
- "johnson",
- "joliot",
- "jones",
- "kalam",
- "kare",
- "keller",
- "kepler",
- "khorana",
- "kilby",
- "kirch",
- "knuth",
- "kowalevski",
- "lalande",
- "lamarr",
- "lamport",
- "leakey",
- "leavitt",
- "lewin",
- "lichterman",
- "liskov",
- "lovelace",
- "lumiere",
- "mahavira",
- "mayer",
- "mccarthy",
- "mcclintock",
- "mclean",
- "mcnulty",
- "meitner",
- "meninsky",
- "mestorf",
- "minsky",
- "mirzakhani",
- "morse",
- "murdock",
- "neumann",
- "newton",
- "nightingale",
- "nobel",
- "noether",
- "northcutt",
- "noyce",
- "panini",
- "pare",
- "pasteur",
- "payne",
- "perlman",
- "pike",
- "poincare",
- "poitras",
- "ptolemy",
- "raman",
- "ramanujan",
- "ride",
- "montalcini",
- "ritchie",
- "roentgen",
- "rosalind",
- "saha",
- "sammet",
- "shaw",
- "shirley",
- "shockley",
- "sinoussi",
- "snyder",
- "spence",
- "stallman",
- "stonebraker",
- "swanson",
- "swartz",
- "swirles",
- "tesla",
- "thompson",
- "torvalds",
- "turing",
- "varahamihira",
- "visvesvaraya",
- "volhard",
- "wescoff",
- "wiles",
- "williams",
- "wilson",
- "wing",
- "wozniak",
- "wright",
- "yalow",
- "yonath"
+ "Baers-Pochard",
+ "Baikal-Teal",
+ "Barrows-Goldeneye",
+ "Blue-Billed",
+ "Blue-Duck",
+ "Blue-Winged",
+ "Brown-Teal",
+ "Bufflehead",
+ "Canvasback",
+ "Cape-Shoveler",
+ "Chestnut-Teal",
+ "Chiloe-Wigeon",
+ "Cinnamon-Teal",
+ "Comb-Duck",
+ "Common-Eider",
+ "Common-Goldeneye",
+ "Common-Merganser",
+ "Common-Pochard",
+ "Common-Scoter",
+ "Common-Shelduck",
+ "Cotton-Pygmy",
+ "Crested-Duck",
+ "Crested-Shelduck",
+ "Eatons-Pintail",
+ "Falcated",
+ "Ferruginous",
+ "Freckled-Duck",
+ "Gadwall",
+ "Garganey",
+ "Greater-Scaup",
+ "Green-Pygmy",
+ "Grey-Teal",
+ "Hardhead",
+ "Harlequin",
+ "Hartlaubs",
+ "Hooded-Merganser",
+ "Hottentot-Teal",
+ "Kelp-Goose",
+ "King-Eider",
+ "Lake-Duck",
+ "Laysan-Duck",
+ "Lesser-Scaup",
+ "Long-Tailed",
+ "Maccoa-Duck",
+ "Mallard",
+ "Mandarin",
+ "Marbled-Teal",
+ "Mellers-Duck",
+ "Merganser",
+ "Northern-Pintail",
+ "Orinoco-Goose",
+ "Paradise-Shelduck",
+ "Plumed-Whistler",
+ "Puna-Teal",
+ "Pygmy-Goose",
+ "Radjah-Shelduck",
+ "Red-Billed",
+ "Red-Crested",
+ "Red-Shoveler",
+ "Ring-Necked",
+ "Ringed-Teal",
+ "Rosy-Billed",
+ "Ruddy-Shelduck",
+ "Salvadoris-Teal",
+ "Scaly-Sided",
+ "Shelduck",
+ "Shoveler",
+ "Silver-Teal",
+ "Smew",
+ "Spectacled-Eider",
+ "Spot-Billed",
+ "Spotted-Whistler",
+ "Steamerduck",
+ "Stellers-Eider",
+ "Sunda-Teal",
+ "Surf-Scoter",
+ "Tufted-Duck",
+ "Velvet-Scoter",
+ "Wandering-Whistler",
+ "Whistling-duck",
+ "White-Backed",
+ "White-Cheeked",
+ "White-Winged",
+ "Wigeon",
+ "Wood-Duck",
+ "Yellow-Billed"
];
function selectRandom(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
+export function generateRandomName() {
+ return `${selectRandom(names)}-${Math.floor(10000 + Math.random() * 10000)}`;
+}
+
export const avatarIds = avatars.map(av => av.id);
export function generateDefaultProfile() {
- const name = selectRandom(names);
return {
has_agreed_to_terms: false,
- has_saved_profile: false,
- display_name: name.replace(/^./, name[0].toUpperCase()),
+ has_changed_name: false,
avatar_id: selectRandom(avatarIds)
};
}
diff --git a/yarn.lock b/yarn.lock
index 9e4e6fbae46ef483424f8b4ada1dadce72744951..6ae1ce2d8e2b6fb237724d975e27a2145a189ca7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2832,17 +2832,7 @@ error@^7.0.2:
string-template "~0.2.1"
xtend "~4.0.0"
-es-abstract@^1.5.1:
- version "1.11.0"
- resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.11.0.tgz#cce87d518f0496893b1a30cd8461835535480681"
- dependencies:
- es-to-primitive "^1.1.1"
- function-bind "^1.1.1"
- has "^1.0.1"
- is-callable "^1.1.3"
- is-regex "^1.0.4"
-
-es-abstract@^1.7.0:
+es-abstract@^1.5.1, es-abstract@^1.7.0:
version "1.10.0"
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864"
dependencies:
@@ -3365,6 +3355,10 @@ form-data@~2.1.1:
combined-stream "^1.0.5"
mime-types "^2.1.12"
+form-urlencoded@^2.0.4:
+ version "2.0.4"
+ resolved "https://registry.yarnpkg.com/form-urlencoded/-/form-urlencoded-2.0.4.tgz#dbcd590a49ae35d5e9516bbba8567242d0291fe5"
+
forwarded@~0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -3971,7 +3965,7 @@ http-deceiver@^1.2.7:
version "1.2.7"
resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
-http-errors@1.6.2, http-errors@~1.6.2:
+http-errors@1.6.2:
version "1.6.2"
resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.2.tgz#0a002cc85707192a7e7946ceedc11155f60ec736"
dependencies:
@@ -3980,6 +3974,15 @@ http-errors@1.6.2, http-errors@~1.6.2:
setprototypeof "1.0.3"
statuses ">= 1.3.1 < 2"
+http-errors@~1.6.2:
+ version "1.6.3"
+ resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
+ dependencies:
+ depd "~1.1.2"
+ inherits "2.0.3"
+ setprototypeof "1.1.0"
+ statuses ">= 1.4.0 < 2"
+
http-parser-js@>=0.4.0:
version "0.4.10"
resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.10.tgz#92c9c1374c35085f75db359ec56cc257cbb93fa4"
@@ -5122,10 +5125,6 @@ minijanus@^0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/minijanus/-/minijanus-0.5.0.tgz#78e1429bb5d83cb3957a538335d2ae901bf614fa"
-"minijanus@https://github.com/mozilla/minijanus.js#master":
- version "0.5.0"
- resolved "https://github.com/mozilla/minijanus.js#497f4dd80fdb92e247238e638daed14ae6623575"
-
minimalistic-assert@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
@@ -5244,6 +5243,16 @@ module-deps@^6.0.0:
through2 "^2.0.0"
xtend "^4.0.0"
+moment-timezone@^0.5.14:
+ version "0.5.14"
+ resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.14.tgz#4eb38ff9538b80108ba467a458f3ed4268ccfcb1"
+ dependencies:
+ moment ">= 2.9.0"
+
+"moment@>= 2.9.0", moment@^2.22.0:
+ version "2.22.0"
+ resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.0.tgz#7921ade01017dd45186e7fee5f424f0b8663a730"
+
move-concurrently@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -5299,12 +5308,12 @@ mute-stream@0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
-"naf-janus-adapter@https://github.com/mozilla/naf-janus-adapter#feature/disconnect":
- version "0.4.1"
- resolved "https://github.com/mozilla/naf-janus-adapter#4a4532014d6489403cf7e451790925ce747f8e41"
+naf-janus-adapter@^0.5.2:
+ version "0.5.2"
+ resolved "https://registry.yarnpkg.com/naf-janus-adapter/-/naf-janus-adapter-0.5.2.tgz#f4a9522c4e0b38fcbfe7c71b668afed67d5e133e"
dependencies:
debug "^3.1.0"
- minijanus "https://github.com/mozilla/minijanus.js#master"
+ minijanus "^0.5.0"
nan@^2.3.0, nan@^2.3.2:
version "2.9.1"
@@ -5345,9 +5354,9 @@ neo-async@^2.5.0:
version "2.5.0"
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.5.0.tgz#76b1c823130cca26acfbaccc8fbaf0a2fa33b18f"
-"networked-aframe@github:mozillareality/networked-aframe#mr-social-client/master":
+"networked-aframe@https://github.com/mozillareality/networked-aframe#mr-social-client/master":
version "0.6.1"
- resolved "https://codeload.github.com/mozillareality/networked-aframe/tar.gz/69be0e7e5f66070526c8240cb795b9e88da971a9"
+ resolved "https://github.com/mozillareality/networked-aframe#69be0e7e5f66070526c8240cb795b9e88da971a9"
dependencies:
easyrtc "1.1.0"
express "^4.10.7"
@@ -5950,6 +5959,10 @@ performance-now@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+phoenix@^1.3.0:
+ version "1.3.0"
+ resolved "https://registry.yarnpkg.com/phoenix/-/phoenix-1.3.0.tgz#1df2c27f986ee295e37c9983ec28ebac1d7f4a3e"
+
pify@^2.0.0, pify@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -7465,7 +7478,11 @@ static-extend@^0.1.1:
define-property "^0.2.5"
object-copy "^0.1.0"
-"statuses@>= 1.3.1 < 2", statuses@~1.3.1:
+"statuses@>= 1.3.1 < 2", "statuses@>= 1.4.0 < 2":
+ version "1.5.0"
+ resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+
+statuses@~1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"