diff --git a/.travis.yml b/.travis.yml
index 890fcfd3ac3ca6f4d4ac9507586110c817dc3edf..57b5ad30beddf0a3e3c7f856fb89cb7fc3b11f99 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,5 +1,5 @@
language: node_js
-node_js: node
+node_js: "9"
cache: yarn
before_install:
- curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.5.1
diff --git a/PRIVACY.md b/PRIVACY.md
index e24a7694c4f59404174dfa940e4be583ff0daa44..4b0acc3e1d7f94088bd39eed00089221475e5c67 100644
--- a/PRIVACY.md
+++ b/PRIVACY.md
@@ -16,7 +16,7 @@ In this Privacy Notice, we explain what data may be accessible to Mozilla or oth
- **Avatar data**: We receive and send to others in the Room the name of your Avatar, its position in the Room, and your interactions with objects in the Room. Mozilla does not record or store this data. You can optionally store information about your Avatar in your browser’s local storage.
- **Room data**: Rooms are publicly accessible to anyone with the URL. Mozilla receives data about the virtual objects and Avatars in a Room and shares that data with others in the Room.
- **Voice data**: If your microphone is on, Mozilla receives and sends audio to other users in the Room. Mozilla does not record or store the audio. *Be aware that once you agree to let Hubs use your microphone, it will stay on as long as you remain in a Hubs room, unless you turn it off.*
-- You can learn more by looking at the code itself. [Janus SFU](https://github.com/mozilla/janus-plugin-sfu), [Reticulum](https://github.com/mozilla/reticulum), [Hubs](https://github.com/mozilla/hubs)
+- You can learn more by looking at the code itself. [Janus SFU](https://github.com/mozilla/janus-plugin-sfu), [Reticulum](https://github.com/mozilla/reticulum), [Hubs](https://github.com/mozilla/hubs), [Hubs-Ops](https://github.com/mozilla/hubs-ops)
</details>
<p/>
@@ -29,5 +29,5 @@ In this Privacy Notice, we explain what data may be accessible to Mozilla or oth
- **Technical data**: We receive and store data about Room URLs and names; the type of device you use to interact with Hubs, as well as its operating system, language, the name and version of browser; and other data to load and operate the Room.
- **Interaction data**: We receive data about your interactions with the Hubs service itself such as the number of Rooms created, the maximum number of users in a particular room at one same time, the start and end time of a user’s interaction with Hubs, the amount of time a user interacts with Hubs through Virtual Reality, the first time in a particular month or day that a user begins to use Hubs. Mozilla uses third party services to store and analyze these operational messages.
- **Error Data**: In order to diagnose problems, Hubs sends Mozilla logs of error messages (which include the Room URL, response time for requests, the page you were on when you encountered the error, your operating system, browser information, and may include your IP address).
-- You can learn more by looking at the code itself. [Janus SFU](https://github.com/mozilla/janus-plugin-sfu), [Reticulum](https://github.com/mozilla/reticulum), [Hubs](https://github.com/mozilla/hubs)
+- You can learn more by looking at the code itself. [Janus SFU](https://github.com/mozilla/janus-plugin-sfu), [Reticulum](https://github.com/mozilla/reticulum), [Hubs](https://github.com/mozilla/hubs), [Hubs-Ops](https://github.com/mozilla/hubs-ops)
</details>
diff --git a/README.md b/README.md
index 1984ffdafd45296fd66ddc389afa74b5b3a0bc82..5f0bf883f79df7b447d8c9fbd3b4102072a8efbc 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Mozilla Social Mixed Reality Client [](https://travis-ci.org/mozilla/hubs)
+[](https://travis-ci.org/mozilla/hubs)
A prototype client demonstrating a multi-user experience in WebVR. Built with
[A-Frame](https://github.com/aframevr/aframe/)
@@ -33,4 +33,12 @@ yarn build
- `no_stats` - Disable performance stats
- `vr_entry_type` - Either "gearvr" or "daydream". Used internally to force a VR entry type
+## Additional Resources
+
+* [Reticulum](https://github.com/mozilla/reticulum) - Phoenix-based backend for managing state and presence.
+* [NAF Janus Adapter](https://github.com/mozilla/naf-janus-adapter) - A [Networked A-Frame](https://github.com/networked-aframe) adapter for the Janus SFU service.
+* [Janus Gateway](https://github.com/meetecho/janus-gateway) - A WebRTC proxy used for centralizing network traffic in this client.
+* [Janus SFU Plugin](https://github.com/mozilla/janus-plugin-sfu) - Plugins for Janus which enables it to act as a SFU.
+* [Hubs-Ops](https://github.com/mozilla/hubs-ops) - Infrastructure as code + management tools for running necessary backend services on AWS.
+
[](http://waffle.io/mozilla/socialmr)
diff --git a/package.json b/package.json
index b70f19a6db7b579488a153b78efc7c57ee6cc7fb..bf3cae400bf95c01a23c6200b49007c4a2b72344 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
"@fortawesome/react-fontawesome": "^0.0.18",
"aframe-billboard-component": "^1.0.0",
"aframe-extras": "https://github.com/MozillaReality/aframe-extras#feature/precompute-nav-mesh",
- "aframe-input-mapping-component": "https://github.com/johnshaughnessy/aframe-input-mapping-component#feature/map-to-array",
+ "aframe-input-mapping-component": "https://github.com/mozillareality/aframe-input-mapping-component#hubs/master",
"aframe-physics-extras": "https://github.com/infinitelee/aframe-physics-extras#fix/physics-collider-crash",
"aframe-physics-system": "https://github.com/infinitelee/aframe-physics-system#feature/shape-component",
"aframe-rounded": "^1.0.3",
diff --git a/scripts/build_local_reticulum.sh b/scripts/build_local_reticulum.sh
index 118a801e24fba4fdbed51c5b23f793db46cc498f..f883958f8f18e028a32916f50c6af38002938893 100755
--- a/scripts/build_local_reticulum.sh
+++ b/scripts/build_local_reticulum.sh
@@ -4,4 +4,4 @@ if [ ! -e ../reticulum ]; then
echo "This script assumes reticulum is checked out in a sibling to this folder."
fi
-rm -rf ../reticulum/priv/static ; BASE_ASSETS_PATH=http://localhost:4000/ yarn build -- --output-path ../reticulum/priv/static
+rm -rf ../reticulum/priv/static ; GENERATE_SMOKE_TESTS=true BASE_ASSETS_PATH=http://localhost:4000/ yarn build -- --output-path ../reticulum/priv/static
diff --git a/scripts/default.env b/scripts/default.env
index b5dbe2c7c9ec3b22eba8d36f07c2fbd700bf0cb0..3d6556c0fa826b118d94dc8bc88a9f2555c5a520 100644
--- a/scripts/default.env
+++ b/scripts/default.env
@@ -1,6 +1,7 @@
# This origin trial token is used to enable WebVR and Gamepad Extensions on Chrome 62+
# You can find more information about getting your own origin trial token here: https://github.com/GoogleChrome/OriginTrials/blob/gh-pages/developer-guide.md
-ORIGIN_TRIAL_TOKEN="ArEZ0vY0uMo3pj+oY8Up4u4Hy8QolJwKxG4/2WRhSPnTZRrviiGhzP6/y72nBdsIhdEyoundxqg//KLbs2vGnQoAAABkeyJvcmlnaW4iOiJodHRwczovL3JldGljdWx1bS5pbzo0NDMiLCJmZWF0dXJlIjoiV2ViVlIxLjFNNjIiLCJleHBpcnkiOjE1MjYzNDg2MjEsImlzU3ViZG9tYWluIjp0cnVlfQ=="
+ORIGIN_TRIAL_TOKEN="AgN/JtqSF6qpD3OZk8KgM5/UYqUUrwc166cOQSRCqvU+TIpHWdiwBUWH5V1K/jJkdtBrO4Q5I0XSGm16uB/Y4QQAAABVeyJvcmlnaW4iOiJodHRwczovL2h1YnMubW96aWxsYS5jb206NDQzIiwiZmVhdHVyZSI6IldlYlZSMS4xTTYyIiwiZXhwaXJ5IjoxNTI4MjQ1ODI1fQ=="
ORIGIN_TRIAL_EXPIRES="2018-05-15"
JANUS_SERVER="wss://prod-janus.reticulum.io"
DEV_RETICULUM_SERVER="dev.reticulum.io"
+ASSET_BUNDLE_SERVER="https://asset-bundles-prod.reticulum.io"
diff --git a/src/assets/environments/environments.js b/src/assets/environments/environments.js
new file mode 100644
index 0000000000000000000000000000000000000000..7c20ce61da763de912493c4e8d35385d09347b5a
--- /dev/null
+++ b/src/assets/environments/environments.js
@@ -0,0 +1,7 @@
+export const ENVIRONMENT_URLS = [
+ process.env.ASSET_BUNDLE_SERVER + "/rooms/meetingroom/MeetingRoom.bundle.json",
+ process.env.ASSET_BUNDLE_SERVER + "/rooms/atrium/Atrium.bundle.json",
+ process.env.ASSET_BUNDLE_SERVER + "/rooms/MedievalFantasyBook/MedievalFantasyBook.bundle.json"
+];
+
+export const DEFAULT_ENVIRONMENT_URL = ENVIRONMENT_URLS[0];
diff --git a/src/assets/images/hub-preview.png b/src/assets/images/hub-preview.png
new file mode 100755
index 0000000000000000000000000000000000000000..5a976607e2539031d67dc17e727ecff02740c3ad
Binary files /dev/null and b/src/assets/images/hub-preview.png differ
diff --git a/src/assets/sfx/quack.mp3 b/src/assets/sfx/quack.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..5c9d5c87de7cc144af2afe5175151cf0c89ecff1
Binary files /dev/null and b/src/assets/sfx/quack.mp3 differ
diff --git a/src/assets/sfx/specialquack.mp3 b/src/assets/sfx/specialquack.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..ac461e6c916fc2cb86230d66661c8316bd415fbb
Binary files /dev/null and b/src/assets/sfx/specialquack.mp3 differ
diff --git a/src/assets/stylesheets/2d-hud.scss b/src/assets/stylesheets/2d-hud.scss
index 0d63efc581e07237e8188e6a2ba22142626d0cc0..263569b58b04e599868e601cd0c960cee543c843 100644
--- a/src/assets/stylesheets/2d-hud.scss
+++ b/src/assets/stylesheets/2d-hud.scss
@@ -6,6 +6,7 @@
align-items: center;
height: 80px;
width: 100%;
+ user-select: none;
}
:local(.panel) {
diff --git a/src/assets/stylesheets/audio.scss b/src/assets/stylesheets/audio.scss
index e2f8a35193d8fdff02ef6126a14862c4d9a3d4e3..1cfd75286aa7ea74e03a3c625f7121af31494926 100644
--- a/src/assets/stylesheets/audio.scss
+++ b/src/assets/stylesheets/audio.scss
@@ -1,10 +1,17 @@
.audio-setup-panel {
text-align: center;
overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ &__enter-button-container {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ }
&__enter-button {
@extend %bottom-button;
- margin: 32px auto;
}
&__title {
@@ -95,6 +102,16 @@
flex: 10 1 auto;
justify-content: flex-start;
align-items: center;
+ overflow-y: auto;
+
+ &__grant-container {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ min-height: max-content;
+ }
&__title {
@extend %top-title;
@@ -105,13 +122,14 @@
}
&__button-container {
- flex: 10;
+ flex: 5;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
width: 111px;
height: 111px;
+ margin: 1em;
}
&__button {
@@ -120,10 +138,16 @@
cursor: pointer;
}
+ &__next-container {
+ display: flex;
+ }
+
&__next {
@extend %bottom-button;
- padding-top: 0;
- padding-bottom: 0;
flex: 1 1;
}
+
+ .invisible {
+ visibility: hidden;
+ }
}
diff --git a/src/assets/stylesheets/footer.scss b/src/assets/stylesheets/footer.scss
index f0a48bc6d15b8c1efab6c902f7e7024985f12f5f..ee9439da0cc2755dca67bc69d9acf39a1e0421e4 100644
--- a/src/assets/stylesheets/footer.scss
+++ b/src/assets/stylesheets/footer.scss
@@ -9,8 +9,9 @@
flex-direction: column;
// Position above virtual gamepad controls on mobile
z-index: 1;
+ user-select: none;
- @media (min-width: 769px) and (min-height: 401px) {
+ @media (min-width: 769px) and (min-height: 421px) {
pointer-events: auto;
}
}
@@ -35,25 +36,25 @@
background-color: transparent;
border-bottom: 1px solid rgba(32, 32, 32, 0.65);
- @media (min-width: 769px) , (max-height: 401px) {
+ @media (min-width: 769px) , (max-height: 421px) {
display: none;
}
}
:local(.header) {
background-color: rgba(0, 0, 0, 0.65);
- @media (max-width: 768px) , (max-height: 400px) {
+ @media (max-width: 768px) , (max-height: 420px) {
background-color: transparent;
}
:local(.hub-info) {
- @media (max-width: 768px) , (max-height: 400px) {
+ @media (max-width: 768px) , (max-height: 420px) {
display: none;
}
}
:local(.hub-stats) {
- @media (max-width: 768px) , (max-height: 400px) {
+ @media (max-width: 768px) , (max-height: 420px) {
display: none;
}
}
@@ -64,7 +65,7 @@
margin: 16px 24px;
display: flex;
align-items: center;
- @media (max-width: 768px) , (max-height: 400px) {
+ @media (max-width: 768px) , (max-height: 420px) {
margin: 16px 8px;
margin-left: 24px;
font-size: 0.9em;
@@ -76,10 +77,10 @@
display: flex;
align-items: center;
justify-content: flex-end;
- @media (min-width: 769px) and (min-height: 401px) {
+ @media (min-width: 769px) and (min-height: 421px) {
flex: 1;
}
- @media (max-width: 768px) , (max-height: 400px) {
+ @media (max-width: 768px) , (max-height: 420px) {
margin: 16px 8px;
}
:local(.hub-participant-count) {
@@ -109,13 +110,13 @@
}
:local(.menu-button__narrow-close-icon) {
- @media (max-width: 768px) , (max-height: 400px) {
+ @media (max-width: 768px) , (max-height: 420px) {
display: none;
}
}
:local(.menu-button__wide-close-icon) {
- @media (min-width: 769px) and (min-height: 401px) {
+ @media (min-width: 769px) and (min-height: 421px) {
display: none;
}
}
diff --git a/src/assets/stylesheets/hub.scss b/src/assets/stylesheets/hub.scss
index b7d6a928ceb38e36282373ca184bbef631705025..dd69bc88ab5e30c2022269a128f1f910171a6673 100644
--- a/src/assets/stylesheets/hub.scss
+++ b/src/assets/stylesheets/hub.scss
@@ -19,3 +19,7 @@
.a-canvas.a-grab-cursor:active {
cursor: none;
}
+
+.webxr-realities, .webxr-sessions {
+ user-select: none;
+}
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index 46cb2719338a77caa009fad200e752f0767454c1..7aa0079ce7bf648480fe507525fff489cc5b3d46 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -122,6 +122,7 @@ body {
min-height: 740px;
display: flex;
flex-direction: column;
+ position: relative;
@media (max-width: 768px) {
padding: 1em 1.5em 1em 1.5em;
@@ -129,6 +130,19 @@ body {
min-height: 490px;
}
+ &__attribution {
+ position: absolute;
+ right: 12px;
+ bottom: 12px;
+ color: $grey-text;
+ text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
+ opacity: 0.5;
+
+ a {
+ color: $grey-text;
+ }
+ }
+
&__container {
padding-top: 2vw;
padding-left: 2.1em;
@@ -195,7 +209,7 @@ body {
.footer-content {
padding: 1em 2.25em 1em 2.25em;
background-color: rgba(0, 0, 0, 0.85);
- min-height: 100px;
+ min-height: 80px;
display: flex;
border-top: 2px solid #242424;
align-items: center;
diff --git a/src/assets/stylesheets/info-dialog.scss b/src/assets/stylesheets/info-dialog.scss
index 1bb309739cddbd82ef3046c6377a97c926061b02..7e67c1f4c0d5897734020bceca6da9017afeff81 100644
--- a/src/assets/stylesheets/info-dialog.scss
+++ b/src/assets/stylesheets/info-dialog.scss
@@ -28,7 +28,7 @@
pointer-events: auto;
&__contents {
- padding: 10px;
+ padding: 30px;
background-color: rgba(0,0,0,0.8);
box-shadow: 0px 0px 30px 1px #202020;
border-radius: 8px;
diff --git a/src/assets/stylesheets/profile.scss b/src/assets/stylesheets/profile.scss
index 862d1fc3d7e3ac11d5dcea13158781068ce8426b..2ed8fde235a1f75fcbb77bddf41bce2815d94cee 100644
--- a/src/assets/stylesheets/profile.scss
+++ b/src/assets/stylesheets/profile.scss
@@ -32,7 +32,7 @@
width: 60vw;
min-width: 300px;
max-width: 700px;
- min-height: 300px;
+ min-height: 200px;
max-height: 1000px;
height: 90%;
overflow-y: auto;
@@ -81,6 +81,7 @@
&__form-submit {
@extend %bottom-button;
margin: 0;
+ min-height: max-content;
}
}
@@ -101,6 +102,8 @@
&__icon {
@extend %fa-icon-button-icon;
background: transparent;
+ border-color: $darker-grey;
+ color: $light-grey;
}
}
}
@@ -109,7 +112,7 @@
cursor: pointer;
width: 20px;
height: 20px;
- padding: 15px;
+ margin: 15px;
}
&__profile_display_name {
diff --git a/src/assets/stylesheets/shared.scss b/src/assets/stylesheets/shared.scss
index cf74ed84f1af74d750dac97741f3c2cd525ec2e2..18944a4080dd096f4f6d917e61d3834cb05ab04a 100644
--- a/src/assets/stylesheets/shared.scss
+++ b/src/assets/stylesheets/shared.scss
@@ -3,6 +3,7 @@ $darker-transparent: rgba(0, 0, 0, 0.6);
$darkest-transparent: rgba(0, 0, 0, 0.95);
$grey-text: rgba(192, 192, 192, 1.0);
$light-text: rgba(240, 240, 240, 1.0);
+$light-grey: lightgrey;
$dark-grey: rgba(128, 128, 128, 1.0);
$darker-grey: rgba(64, 64, 64, 1.0);
@@ -22,7 +23,7 @@ $darker-grey: rgba(64, 64, 64, 1.0);
font-size: 1em;
font-weight: bold;
margin-top: auto;
- margin-bottom: 8px;
+ margin-bottom: 24px;
cursor: pointer;
border: 3px solid white;
border-radius: 14px;
diff --git a/src/assets/stylesheets/ui-root.scss b/src/assets/stylesheets/ui-root.scss
index 1cadcc2333efa20a81867a16c2f97bea6d729d4f..5fe3b55f81ff8db50a7502cc401c4caeef6a2de5 100644
--- a/src/assets/stylesheets/ui-root.scss
+++ b/src/assets/stylesheets/ui-root.scss
@@ -1,4 +1,4 @@
-.ui {
+#ui-root .ui {
@extend %default-font;
width: 100%;
@@ -8,6 +8,26 @@
position: absolute;
pointer-events: none;
color: white;
+
+ &__help-icon {
+ @extend %fa-icon-button;
+ pointer-events: auto;
+ position: absolute;
+ top: 0px;
+ left: 14px;
+
+ &__icon {
+ background: rgba(33, 33, 33, 0.5);
+ border-radius: 36px;
+ display: inline-block;
+ font-size: 22px;
+ vertical-align: sub;
+ line-height: 38px;
+ border: 0;
+ width: 36px;
+ height: 36px;
+ }
+ }
}
.blurred {
@@ -20,6 +40,7 @@
grid-template-rows: 1fr 20px minmax(200px, 600px) 20px 1fr;
width: 100%;
height: 100%;
+ user-select: none;
&--darkened {
background-color: $dark-transparent;
diff --git a/src/components/character-controller.js b/src/components/character-controller.js
index e811dd507bc8f5a0d886b1c912cc7679ebdf55a8..26dc12a8cd1e36eefe4d4ab65faee4c559576f09 100644
--- a/src/components/character-controller.js
+++ b/src/components/character-controller.js
@@ -89,7 +89,8 @@ AFRAME.registerComponent("character-controller", {
const rotationInvMatrix = new THREE.Matrix4();
const pivotRotationMatrix = new THREE.Matrix4();
const pivotRotationInvMatrix = new THREE.Matrix4();
- const start = new THREE.Vector3();
+ const startPos = new THREE.Vector3();
+ const startScale = new THREE.Vector3();
return function(t, dt) {
const deltaSeconds = dt / 1000;
@@ -98,7 +99,8 @@ AFRAME.registerComponent("character-controller", {
const distance = this.data.groundAcc * deltaSeconds;
const rotationDelta = this.data.rotationSpeed * this.angularVelocity * deltaSeconds;
- start.copy(root.position);
+ startScale.copy(root.scale);
+ startPos.copy(root.position);
// Other aframe components like teleport-controls set position/rotation/scale, not the matrix, so we need to make sure to compose them back into the matrix
root.updateMatrix();
@@ -134,19 +136,13 @@ AFRAME.registerComponent("character-controller", {
// Reapply playspace (player rig) translation
root.applyMatrix(trans);
- // @TODO this is really ugly, can't just set the position/rotation directly or they wont network
- this.el.setAttribute("rotation", {
- x: root.rotation.x * THREE.Math.RAD2DEG,
- y: root.rotation.y * THREE.Math.RAD2DEG,
- z: root.rotation.z * THREE.Math.RAD2DEG
- });
+ // TODO: the above matrix trnsfomraitons introduce some floating point erros in scale, this reverts them to avoid spamming network with fake scale updates
+ root.scale.copy(startScale);
this.pendingSnapRotationMatrix.identity(); // Revert to identity
if (this.velocity.lengthSq() > EPS) {
- this.setPositionOnNavMesh(start, root);
- } else {
- this.el.setAttribute("position", root.position);
+ this.setPositionOnNavMesh(startPos, root);
}
};
})(),
diff --git a/src/components/controls-shape-offset.js b/src/components/controls-shape-offset.js
new file mode 100644
index 0000000000000000000000000000000000000000..7ce8764332f0e8b7b6116add6a8e8178a84121f6
--- /dev/null
+++ b/src/components/controls-shape-offset.js
@@ -0,0 +1,45 @@
+import { CONTROLLER_OFFSETS } from "./hand-controls2.js";
+
+AFRAME.registerComponent("controls-shape-offset", {
+ schema: {
+ additionalOffset: { default: { x: 0, y: -0.03, z: -0.04 } }
+ },
+ init: function() {
+ this.controller = null;
+ this.shapeAdded = false;
+
+ this._handleControllerConnected = this._handleControllerConnected.bind(this);
+ this.el.addEventListener("controllerconnected", this._handleControllerConnected);
+ },
+
+ remove: function() {
+ this.el.removeEventListener("controllerconnected", this._handleControllerConnected);
+ },
+
+ tick: function() {
+ if (!this.shapeAdded && this.controller) {
+ this.shapeAdded = true;
+ const hasOffset = CONTROLLER_OFFSETS.hasOwnProperty(this.controller);
+ const offset = hasOffset ? CONTROLLER_OFFSETS[this.controller] : CONTROLLER_OFFSETS.default;
+ const position = new THREE.Vector3();
+ const quaternion = new THREE.Quaternion();
+ const scale = new THREE.Vector3();
+ offset.decompose(position, quaternion, scale);
+ position.add(this.data.additionalOffset);
+ quaternion.conjugate();
+
+ const shape = {
+ shape: "sphere",
+ radius: "0.02",
+ orientation: quaternion,
+ offset: position
+ };
+
+ this.el.setAttribute("shape", shape);
+ }
+ },
+
+ _handleControllerConnected: function(e) {
+ this.controller = e.detail.name;
+ }
+});
diff --git a/src/components/css-class.js b/src/components/css-class.js
new file mode 100644
index 0000000000000000000000000000000000000000..1528ed4d450aea61f63b7426524229ed63609044
--- /dev/null
+++ b/src/components/css-class.js
@@ -0,0 +1,17 @@
+AFRAME.registerComponent("css-class", {
+ schema: {
+ type: "string"
+ },
+ init() {
+ this.el.classList.add(this.data);
+ },
+ update(oldData) {
+ if (this.data !== oldData) {
+ this.el.classList.remove(oldData);
+ this.el.classList.add(this.data);
+ }
+ },
+ remove() {
+ this.el.classList.remove(this.data);
+ }
+});
diff --git a/src/components/cursor-controller.js b/src/components/cursor-controller.js
index 572b17d91f606912b612fb3e1b8e440f33be46a0..2acb029db487a392802bd14f6457d2a4d5be7758 100644
--- a/src/components/cursor-controller.js
+++ b/src/components/cursor-controller.js
@@ -78,16 +78,13 @@ AFRAME.registerComponent("cursor-controller", {
},
play: function() {
- if (!this.inVR && this.isMobile && !this.hasPointingDevice) {
- document.addEventListener("touchstart", this._handleTouchStart);
- document.addEventListener("touchmove", this._handleTouchMove);
- document.addEventListener("touchend", this._handleTouchEnd);
- } else {
- document.addEventListener("mousedown", this._handleMouseDown);
- document.addEventListener("mousemove", this._handleMouseMove);
- document.addEventListener("mouseup", this._handleMouseUp);
- document.addEventListener("wheel", this._handleWheel);
- }
+ document.addEventListener("touchstart", this._handleTouchStart);
+ document.addEventListener("touchmove", this._handleTouchMove);
+ document.addEventListener("touchend", this._handleTouchEnd);
+ document.addEventListener("mousedown", this._handleMouseDown);
+ document.addEventListener("mousemove", this._handleMouseMove);
+ document.addEventListener("mouseup", this._handleMouseUp);
+ document.addEventListener("wheel", this._handleWheel);
window.addEventListener("enter-vr", this._handleEnterVR);
window.addEventListener("exit-vr", this._handleExitVR);
@@ -258,6 +255,8 @@ AFRAME.registerComponent("cursor-controller", {
},
_handleTouchStart: function(e) {
+ if (!this.isMobile || this.hasPointingDevice) return;
+
const touch = e.touches[0];
if (touch.clientY / window.innerHeight >= 0.8) return true;
this.mousePos.set(touch.clientX / window.innerWidth * 2 - 1, -(touch.clientY / window.innerHeight) * 2 + 1);
@@ -303,6 +302,8 @@ AFRAME.registerComponent("cursor-controller", {
},
_handleTouchMove: function(e) {
+ if (!this.isMobile || this.hasPointingDevice) return;
+
for (let i = 0; i < e.touches.length; i++) {
const touch = e.touches[i];
if (touch.clientY / window.innerHeight >= 0.8) return true;
@@ -312,6 +313,8 @@ AFRAME.registerComponent("cursor-controller", {
},
_handleTouchEnd: function(e) {
+ if (!this.isMobile || this.hasPointingDevice) return;
+
for (let i = 0; i < e.changedTouches.length; i++) {
const touch = e.changedTouches[i];
const thisTouchDidNotDriveMousePos =
@@ -326,6 +329,8 @@ AFRAME.registerComponent("cursor-controller", {
},
_handleMouseDown: function() {
+ if (this.isMobile && !this.inVR && !this.hasPointingDevice) return;
+
if (this._isTargetOfType(TARGET_TYPE_INTERACTABLE_OR_UI)) {
this._setLookControlsEnabled(false);
this.data.cursor.emit("cursor-grab", {});
@@ -335,10 +340,14 @@ AFRAME.registerComponent("cursor-controller", {
},
_handleMouseMove: function(e) {
+ if (this.isMobile && !this.inVR && !this.hasPointingDevice) return;
+
this.mousePos.set(e.clientX / window.innerWidth * 2 - 1, -(e.clientY / window.innerHeight) * 2 + 1);
},
_handleMouseUp: function() {
+ if (this.isMobile && !this.inVR && !this.hasPointingDevice) return;
+
this._setLookControlsEnabled(true);
this.data.cursor.emit("cursor-release", {});
this._endTeleport();
diff --git a/src/components/duck.js b/src/components/duck.js
new file mode 100644
index 0000000000000000000000000000000000000000..59172942074173c393c7d86e9fd9e121737ae128
--- /dev/null
+++ b/src/components/duck.js
@@ -0,0 +1,41 @@
+/* global CANNON */
+AFRAME.registerComponent("duck", {
+ schema: {
+ initialForce: { default: 0 },
+ maxForce: { default: 6.5 },
+ maxScale: { default: 5 }
+ },
+
+ init: function() {
+ this.physicsSystem = this.el.sceneEl.systems.physics;
+ this.hasBody = false;
+ this.position = new CANNON.Vec3();
+ this.force = new CANNON.Vec3(0, this.data.initialForce, 0);
+ this.initialScale = this.el.object3D.scale.x;
+ this.maxScale = this.data.maxScale * this.initialScale;
+ },
+
+ play: function() {
+ this.physicsSystem.addComponent(this);
+ },
+
+ pause: function() {
+ this.physicsSystem.removeComponent(this);
+ },
+
+ beforeStep: function() {
+ if (this.el.body && NAF.utils.isMine(this.el)) {
+ const currentScale = this.el.object3D.scale.x;
+ const ratio = Math.min(1, (currentScale - this.initialScale) / (this.maxScale - this.initialScale));
+ const force = ratio * this.data.maxForce;
+ if (force > 0) {
+ const angle = Math.random() * Math.PI * 2;
+ const x = Math.cos(angle);
+ const z = Math.sin(angle);
+ this.force.set(x, force, z);
+ this.position.set(x * 0.01, 0, z * 0.01);
+ this.el.body.applyForce(this.force, this.position);
+ }
+ }
+ }
+});
diff --git a/src/components/hand-controls2.js b/src/components/hand-controls2.js
index af86cd5da272ea5aee5c60e75578da84a13aaef5..a5f212453d00a4dd6d7fdeb001dd36dc545c5057 100644
--- a/src/components/hand-controls2.js
+++ b/src/components/hand-controls2.js
@@ -10,7 +10,7 @@ const POSES = {
mrpDown: "mrpDown"
};
-const CONTROLLER_OFFSETS = {
+export const CONTROLLER_OFFSETS = {
default: new THREE.Matrix4(),
"oculus-touch-controls": new THREE.Matrix4().makeTranslation(0, -0.015, 0.04),
"vive-controls": new THREE.Matrix4().compose(
@@ -18,6 +18,11 @@ const CONTROLLER_OFFSETS = {
new THREE.Quaternion().setFromEuler(new THREE.Euler(-40 * THREE.Math.DEG2RAD, 0, 0)),
new THREE.Vector3(1, 1, 1)
),
+ "windows-motion-controls": new THREE.Matrix4().compose(
+ new THREE.Vector3(0, -0.017, 0.13),
+ new THREE.Quaternion().setFromEuler(new THREE.Euler(-40 * THREE.Math.DEG2RAD, 0, 0)),
+ new THREE.Vector3(1, 1, 1)
+ ),
"daydream-controls": new THREE.Matrix4().makeTranslation(0, 0, -0.04),
"gearvr-controls": new THREE.Matrix4()
};
diff --git a/src/components/haptic-feedback.js b/src/components/haptic-feedback.js
index 35a79cd9555e2864e5c496f671fcb9ddd8831345..9a0a2337de1ef895bdbd3bb699259f3063187cf2 100644
--- a/src/components/haptic-feedback.js
+++ b/src/components/haptic-feedback.js
@@ -10,7 +10,7 @@ AFRAME.registerComponent("haptic-feedback", {
},
init: function() {
- this.pulse = this.pulse.bind(this);
+ this.handlePulse = this.handlePulse.bind(this);
this.getActuator = this.getActuator.bind(this);
this.getActuator().then(actuator => {
this.actuator = actuator;
@@ -37,21 +37,27 @@ AFRAME.registerComponent("haptic-feedback", {
},
play: function() {
- this.el.addEventListener(this.data.hapticEventName, this.pulse);
+ this.el.addEventListener(this.data.hapticEventName, this.handlePulse);
},
pause: function() {
- this.el.removeEventListener(this.data.hapticEventName, this.pulse);
+ this.el.removeEventListener(this.data.hapticEventName, this.handlePulse);
},
- pulse: function(event) {
+ handlePulse: function(event) {
const { intensity } = event.detail;
- if (!strengthForIntensity[intensity]) {
+
+ if (strengthForIntensity[intensity]) {
+ this.pulse(strengthForIntensity[intensity]);
+ } else if (Number(intensity) === intensity) {
+ this.pulse(intensity);
+ } else {
console.warn(`Invalid intensity : ${intensity}`);
- return;
}
+ },
+ pulse: function(intensity) {
if (this.actuator) {
- this.actuator.pulse(strengthForIntensity[intensity], 15);
+ this.actuator.pulse(intensity, 15);
}
}
});
diff --git a/src/components/icon-button.js b/src/components/icon-button.js
index eab80803f4d85ad425a6d5a0c71fc8f6f9ddc333..88f5e7303822ff103d7e67479ab99b3d7bddba4f 100644
--- a/src/components/icon-button.js
+++ b/src/components/icon-button.js
@@ -5,7 +5,10 @@ AFRAME.registerComponent("icon-button", {
activeImage: { type: "string" },
activeHoverImage: { type: "string" },
active: { type: "boolean" },
- haptic: { type: "selector" }
+ haptic: { type: "selector" },
+ tooltip: { type: "selector" },
+ tooltipText: { type: "string" },
+ activeTooltipText: { type: "string" }
},
init() {
@@ -53,5 +56,12 @@ AFRAME.registerComponent("icon-button", {
const image = active ? (hovering ? "activeHoverImage" : "activeImage") : hovering ? "hoverImage" : "image";
this.el.setAttribute("src", this.data[image]);
+
+ if (this.data.tooltip) {
+ this.data.tooltip.setAttribute("visible", this.hovering);
+ this.data.tooltip
+ .querySelector("[text]")
+ .setAttribute("text", "value", this.data.active ? this.data.activeTooltipText : this.data.tooltipText);
+ }
}
});
diff --git a/src/components/quack.js b/src/components/quack.js
new file mode 100644
index 0000000000000000000000000000000000000000..e97b6f8f1bf5cfccd2efab3dcc4f486d09c2330d
--- /dev/null
+++ b/src/components/quack.js
@@ -0,0 +1,27 @@
+AFRAME.registerComponent("quack", {
+ schema: {
+ quackPercentage: { default: 1 },
+ specialQuackPercentage: { default: 0.01 }
+ },
+
+ init: function() {
+ this._handleGrabStart = this._handleGrabStart.bind(this);
+ },
+
+ play: function() {
+ this.el.addEventListener("grab-start", this._handleGrabStart);
+ },
+
+ pause: function() {
+ this.el.removeEventListener("grab-start", this._handleGrabStart);
+ },
+
+ _handleGrabStart: function() {
+ const rand = Math.random();
+ if (rand < this.data.specialQuackPercentage) {
+ this.el.emit("specialquack");
+ } else if (rand < this.data.quackPercentage) {
+ this.el.emit("quack");
+ }
+ }
+});
diff --git a/src/components/scene-shadow.js b/src/components/scene-shadow.js
new file mode 100644
index 0000000000000000000000000000000000000000..72d77cf36b36c80279b0683531f4682f1f5b7a47
--- /dev/null
+++ b/src/components/scene-shadow.js
@@ -0,0 +1,30 @@
+// For use in environment gltf bundles to set scene shadow properties.
+AFRAME.registerComponent("scene-shadow", {
+ schema: {
+ autoUpdate: {
+ type: "boolean",
+ default: true
+ },
+ type: {
+ type: "string",
+ default: "pcf"
+ },
+ renderReverseSided: {
+ type: "boolean",
+ default: true
+ },
+ renderSingleSided: {
+ type: "boolean",
+ default: true
+ }
+ },
+ init() {
+ this.originalShadowProperties = this.el.sceneEl.getAttribute("shadow");
+ },
+ update() {
+ this.el.sceneEl.setAttribute("shadow", this.data);
+ },
+ remove() {
+ this.el.sceneEl.setAttribute("shadow", this.originalShadowProperties);
+ }
+});
diff --git a/src/components/spawn-controller.js b/src/components/spawn-controller.js
index eab8314c8664965cbdd2b19acf99fa74609052c5..1daf01b756e4308f1f9d50ceffd362aeb4b8e399 100644
--- a/src/components/spawn-controller.js
+++ b/src/components/spawn-controller.js
@@ -1,31 +1,26 @@
AFRAME.registerComponent("spawn-controller", {
schema: {
- radius: { type: "number", default: 1 }
+ target: { type: "selector" },
+ loadedEvent: { type: "string" }
},
-
init() {
- const el = this.el;
- const center = el.getAttribute("position");
+ this.onLoad = this.onLoad.bind(this);
+ this.data.target.addEventListener(this.data.loadedEvent, this.onLoad);
+ },
+ onLoad() {
+ const spawnPoints = document.querySelectorAll("[spawn-point]");
- const angleRad = Math.random() * 2 * Math.PI;
- const circlePoint = this.getPointOnCircle(this.data.radius, angleRad);
- const worldPoint = {
- x: circlePoint.x + center.x,
- y: center.y,
- z: circlePoint.z + center.z
- };
- el.setAttribute("position", worldPoint);
+ if (spawnPoints.length === 0) {
+ // Keep default position
+ return;
+ }
- const angleDeg = angleRad * THREE.Math.RAD2DEG;
- const angleToCenter = -1 * angleDeg + 90;
- el.setAttribute("rotation", { x: 0, y: angleToCenter, z: 0 });
+ const spawnPointIndex = Math.round((spawnPoints.length - 1) * Math.random());
+ const spawnPoint = spawnPoints[spawnPointIndex];
- el.object3D.updateMatrix();
- },
-
- getPointOnCircle(radius, angleRad) {
- const x = Math.cos(angleRad) * radius;
- const z = Math.sin(angleRad) * radius;
- return { x: x, z: z };
+ spawnPoint.object3D.getWorldPosition(this.el.object3D.position);
+ this.el.object3D.rotation.copy(spawnPoint.object3D.rotation);
}
});
+
+AFRAME.registerComponent("spawn-point", {});
diff --git a/src/components/stats-plus.css b/src/components/stats-plus.css
index 9fc5a1908dbc72abadc6a67c0479e3cfe8d01db3..80e411dfc77fce5109655aefd2e0347d59a01cda 100644
--- a/src/components/stats-plus.css
+++ b/src/components/stats-plus.css
@@ -14,15 +14,17 @@
font-family: monospace;
cursor: pointer;
position: absolute;
- top: 0;
+ top: 10px;
right: 0;
padding: 8px 12px;
color: #aaa;
font-size: 10px;
+ user-select: none;
}
:global(.rs-base) {
right: 10px;
left: auto;
top: 10px;
+ user-select: none;
}
diff --git a/src/components/super-networked-interactable.js b/src/components/super-networked-interactable.js
index a5baed53dd2f3f5404a81a26150904353434e9e9..0d9fc26dea6304e7ea66f165f76a62bd7044b2d3 100644
--- a/src/components/super-networked-interactable.js
+++ b/src/components/super-networked-interactable.js
@@ -1,10 +1,12 @@
AFRAME.registerComponent("super-networked-interactable", {
schema: {
mass: { default: 1 },
+ hapticsMassVelocityFactor: { default: 0.1 },
counter: { type: "selector" }
},
init: function() {
+ this.system = this.el.sceneEl.systems.physics;
this.counter = this.data.counter.components["networked-counter"];
this.hand = null;
@@ -21,12 +23,23 @@ AFRAME.registerComponent("super-networked-interactable", {
this.ownershipLostListener = this._onOwnershipLost.bind(this);
this.el.addEventListener("grab-start", this.grabStartListener);
this.el.addEventListener("ownership-lost", this.ownershipLostListener);
+ this.system.addComponent(this);
},
remove: function() {
this.counter.deregister(this.el);
this.el.removeEventListener("grab-start", this.grabStartListener);
this.el.removeEventListener("ownership-lost", this.ownershipLostListener);
+ this.system.removeComponent(this);
+ },
+
+ afterStep: function() {
+ if (this.el.is("grabbed") && this.hand && this.hand.components.hasOwnProperty("haptic-feedback")) {
+ const hapticFeedback = this.hand.components["haptic-feedback"];
+ let velocity = this.el.body.velocity.lengthSquared() * this.el.body.mass * this.data.hapticsMassVelocityFactor;
+ velocity = Math.min(1, velocity);
+ hapticFeedback.pulse(velocity);
+ }
},
_onGrabStart: function(e) {
diff --git a/src/components/super-spawner.js b/src/components/super-spawner.js
index 9d36c6583f01909e0db08f93450c78cd78c3c3aa..41e2d7aeabbe77f2dc0ba9b3821170fab9724db5 100644
--- a/src/components/super-spawner.js
+++ b/src/components/super-spawner.js
@@ -3,11 +3,14 @@ AFRAME.registerComponent("super-spawner", {
template: { default: "" },
useCustomSpawnPosition: { default: false },
spawnPosition: { type: "vec3" },
- events: { default: ["cursor-grab", "action_grab"] }
+ events: { default: ["cursor-grab", "action_grab"] },
+ spawnCooldown: { default: 1 }
},
init: function() {
this.entities = new Map();
+ this.timeout = null;
+ this.defaultScale = this.el.getAttribute("scale").clone();
},
play: function() {
@@ -17,19 +20,27 @@ AFRAME.registerComponent("super-spawner", {
pause: function() {
this.el.removeEventListener("grab-start", this.handleGrabStart);
+
+ clearTimeout(this.timeout);
+ this.timeout = null;
+ this.el.setAttribute("visible", true);
+ this.el.setAttribute("scale", this.defaultScale);
},
remove: function() {
for (const entity of this.entities.keys()) {
const data = this.entities.get(entity);
entity.removeEventListener("componentinitialized", data.componentinInitializedListener);
- entity.removeEventListener("bodyloaded", data.bodyLoadedListener);
+ entity.removeEventListener("body-loaded", data.bodyLoadedListener);
}
this.entities.clear();
},
_handleGrabStart: function(e) {
+ if (this.timeout) {
+ return;
+ }
const hand = e.detail.hand;
const entity = document.createElement("a-entity");
@@ -51,6 +62,16 @@ AFRAME.registerComponent("super-spawner", {
const pos = this.data.useCustomSpawnPosition ? this.data.spawnPosition : this.el.getAttribute("position");
entity.setAttribute("position", pos);
this.el.sceneEl.appendChild(entity);
+
+ if (this.data.spawnCooldown > 0) {
+ this.el.setAttribute("visible", false);
+ this.el.setAttribute("scale", { x: 0.0001, y: 0.0001, z: 0.0001 });
+ this.timeout = setTimeout(() => {
+ this.el.setAttribute("visible", true);
+ this.el.setAttribute("scale", this.defaultScale);
+ this.timeout = null;
+ }, this.data.spawnCooldown * 1000);
+ }
},
_handleComponentInitialzed: function(entity, e) {
diff --git a/src/components/wasd-to-analog2d.js b/src/components/wasd-to-analog2d.js
index 35b68026bd121a35bb7f7c139d15423262475b86..a86641623b348f67c743e1845f51dd1c6e9ccb7f 100644
--- a/src/components/wasd-to-analog2d.js
+++ b/src/components/wasd-to-analog2d.js
@@ -11,9 +11,11 @@ AFRAME.registerComponent("wasd-to-analog2d", {
s: [0, -1],
d: [1, 0]
};
- this.onWasd = this.onWasd.bind(this);
this.keys = {};
+
+ this.onWasd = this.onWasd.bind(this);
this.move = this.move.bind(this);
+ this.onBlur = this.onBlur.bind(this);
},
play: function() {
@@ -25,18 +27,24 @@ AFRAME.registerComponent("wasd-to-analog2d", {
// directly because ideally this would live as an input mapping, but the events
// generated by this component won't actually get mapped.
this.el.sceneEl.addEventListener(this.data.analog2dOutputAction, this.move);
- },
-
- move: function(event) {
- this.el.emit("move", { axis: event.detail.axis });
+ window.addEventListener("blur", this.onBlur);
},
pause: function() {
this.el.sceneEl.removeEventListener("wasd", this.onWasd);
this.el.sceneEl.removeEventListener(this.data.analog2dOutputAction, this.move);
+ window.removeEventListener("blur", this.onBlur);
this.keys = {};
},
+ onBlur: function() {
+ this.keys = {};
+ },
+
+ move: function(event) {
+ this.el.emit("move", { axis: event.detail.axis });
+ },
+
onWasd: function(event) {
const keyEvent = event.type;
const down = keyEvent.indexOf("down") !== -1;
diff --git a/src/components/water.js b/src/components/water.js
index b7f176131ea97f6f47fbbb31b27c59e80350b78b..cfa33e4b166eea99f5af30d5c5fa36d0075c7378 100644
--- a/src/components/water.js
+++ b/src/components/water.js
@@ -148,10 +148,14 @@ AFRAME.registerComponent("water", {
distance: { type: "number", default: 1 },
speed: { type: "number", default: 0.1 },
forceMobile: { type: "boolean", default: false },
- normalMap: { type: "asset" }
+ normalMap: { type: "asset", default: "#water-normal-map" }
},
init() {
- const waterGeometry = new THREE.PlaneBufferGeometry(800, 800);
+ const waterMesh = this.el.getObject3D("mesh");
+ const waterGeometry = waterMesh.geometry;
+
+ // Render THREE.Water shader instead of THREE.Mesh
+ waterMesh.visible = false;
const waterNormals = new THREE.Texture(this.data.normalMap);
waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping;
@@ -223,5 +227,7 @@ AFRAME.registerComponent("water", {
remove() {
this.el.removeObject3D("water");
+ const waterMesh = this.el.getObject3D("mesh");
+ waterMesh.visible = true;
}
});
diff --git a/src/gltf-component-mappings.js b/src/gltf-component-mappings.js
index e2177fb25a1025ad56e9b135626b3abca64b1d97..99b9b0bf6c2dae246cfd33bc654bd21260d98eef 100644
--- a/src/gltf-component-mappings.js
+++ b/src/gltf-component-mappings.js
@@ -1,10 +1,27 @@
import "./components/gltf-model-plus";
import { resolveURL } from "./utils/resolveURL";
+AFRAME.GLTFModelPlus.registerComponent("quack", "quack");
+AFRAME.GLTFModelPlus.registerComponent("sound", "sound");
+AFRAME.GLTFModelPlus.registerComponent("collision-filter", "collision-filter");
+AFRAME.GLTFModelPlus.registerComponent("css-class", "css-class");
+AFRAME.GLTFModelPlus.registerComponent("scene-shadow", "scene-shadow");
+AFRAME.GLTFModelPlus.registerComponent("super-spawner", "super-spawner");
+AFRAME.GLTFModelPlus.registerComponent("gltf-model-plus", "gltf-model-plus");
+AFRAME.GLTFModelPlus.registerComponent("body", "body");
+AFRAME.GLTFModelPlus.registerComponent("hide-when-quality", "hide-when-quality");
+AFRAME.GLTFModelPlus.registerComponent("light", "light");
+AFRAME.GLTFModelPlus.registerComponent("skybox", "skybox");
+AFRAME.GLTFModelPlus.registerComponent("layers", "layers");
+AFRAME.GLTFModelPlus.registerComponent("shadow", "shadow");
+AFRAME.GLTFModelPlus.registerComponent("xr", "xr");
+AFRAME.GLTFModelPlus.registerComponent("water", "water");
AFRAME.GLTFModelPlus.registerComponent("scale-audio-feedback", "scale-audio-feedback");
+AFRAME.GLTFModelPlus.registerComponent("animation-mixer", "animation-mixer");
AFRAME.GLTFModelPlus.registerComponent("loop-animation", "loop-animation");
AFRAME.GLTFModelPlus.registerComponent("shape", "shape");
AFRAME.GLTFModelPlus.registerComponent("visible", "visible");
+AFRAME.GLTFModelPlus.registerComponent("spawn-point", "spawn-point");
AFRAME.GLTFModelPlus.registerComponent("nav-mesh", "nav-mesh", (el, componentName, componentData, gltfPath) => {
if (componentData.src) {
componentData.src = resolveURL(componentData.src, gltfPath);
diff --git a/src/hub.html b/src/hub.html
index 581bc3ffe008dc53cb4be3c414c119935af629e6..af1bb3ef2bf5ff1ccd6839793ac70b7395af89f0 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -2,6 +2,8 @@
<html>
<head>
+ <!-- DO NOT REMOVE/EDIT THIS COMMENT - HUB_META_TAGS -->
+
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="origin-trial" data-feature="WebVR (For Chrome M62+)" data-expires="<%= ORIGIN_TRIAL_EXPIRES %>" content="<%= ORIGIN_TRIAL_TOKEN %>">
@@ -28,7 +30,7 @@
<a-scene
networked-scene="adapter: janus; audio: true; debug: true; connectOnLoad: false;"
- physics
+ physics="gravity: -6;"
mute-mic="eventSrc: a-scene; toggleEvents: action_mute"
freeze-controller="toggleEvent: action_freeze"
personal-space-bubble="debug: false;"
@@ -63,6 +65,9 @@
<a-asset-item id="watch-model" response-type="arraybuffer" src="./assets/hud/watch.glb"></a-asset-item>
<a-asset-item id="interactable-duck" response-type="arraybuffer" src="./assets/interactables/duck/DuckyMesh.glb"></a-asset-item>
+ <a-asset-item id="quack" src="./assets/sfx/quack.mp3" response-type="arraybuffer" preload="auto"></a-asset-item>
+ <a-asset-item id="specialquack" src="./assets/sfx/specialquack.mp3" response-type="arraybuffer" preload="auto"></a-asset-item>
+
<img id="water-normal-map" src="./assets/waternormals.jpg">
<!-- Templates -->
@@ -136,6 +141,13 @@
personal-space-invader="radius: 0.15; useMaterial: true;"
bone-visibility
>
+ <a-cylinder
+ static-body
+ radius="0.13"
+ height="0.2"
+ position="0 0.07 0.05"
+ visible="false"
+ ></a-cylinder>
</a-entity>
</template>
@@ -155,10 +167,11 @@
gltf-model-plus="src: #interactable-duck; inflate: true;"
scale="2 2 2"
class="interactable"
- super-networked-interactable="counter: #counter; mass: 5;"
- body="type: dynamic; shape: none; mass: 5;"
+ super-networked-interactable="counter: #counter; mass: 1;"
+ body="type: dynamic; shape: none; mass: 1;"
grabbable
stretchable="useWorldPosition: true;"
+ duck
></a-entity>
</template>
@@ -177,15 +190,6 @@
<!-- Interactables -->
<a-entity id="counter" networked-counter="max: 3; ttl: 120"></a-entity>
- <a-entity
- gltf-model-plus="src: #interactable-duck"
- scale="2 2 2"
- class="interactable"
- super-spawner="template: #interactable-template;"
- position="2.9 1.2 0"
- body="mass: 0; type: static; shape: box;"
- ></a-entity>
-
<a-entity
id="cursor-controller"
cursor-controller="
@@ -219,7 +223,7 @@
<a-entity
id="player-rig"
networked="template: #remote-avatar-template; attachTemplateToLocal: false;"
- spawn-controller="radius: 4;"
+ spawn-controller="loadedEvent: bundleloaded; target: #environment-root"
wasd-to-analog2d
character-controller="pivot: #player-camera"
ik-root
@@ -228,16 +232,18 @@
>
<a-entity
id="player-hud"
- class="ui"
hud-controller="head: #player-camera;"
vr-mode-toggle-visibility
vr-mode-toggle-playing__hud-controller
>
<a-entity in-world-hud="haptic:#player-right-controller;raycaster:#player-right-controller;" rotation="30 0 0">
<a-rounded height="0.13" width="0.48" color="#000000" position="-0.24 -0.065 0" radius="0.065" opacity="0.35" class="hud bg"></a-rounded>
- <a-image icon-button="image: #mute-off; hoverImage: #mute-off-hover; activeImage: #mute-on; activeHoverImage: #mute-on-hover" scale="0.1 0.1 0.1" position="-0.17 0 0.001" class="hud mic" material="alphaTest:0.1;"></a-image>
- <a-image icon-button="image: #freeze-off; hoverImage: #freeze-off-hover; activeImage: #freeze-on; activeHoverImage: #freeze-on-hover" scale="0.2 0.2 0.2" position="0 0 0.001" class="hud freeze"></a-image>
- <a-image icon-button="image: #bubble-off; hoverImage: #bubble-off-hover; activeImage: #bubble-on; activeHoverImage: #bubble-on-hover" scale="0.1 0.1 0.1" position="0.17 0 0.001" class="hud bubble" material="alphaTest:0.1;"></a-image>
+ <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Mute Mic; activeTooltipText: Unmute Mic; image: #mute-off; hoverImage: #mute-off-hover; activeImage: #mute-on; activeHoverImage: #mute-on-hover" scale="0.1 0.1 0.1" position="-0.17 0 0.001" class="ui hud mic" material="alphaTest:0.1;"></a-image>
+ <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Pause; activeTooltipText: Resume; image: #freeze-off; hoverImage: #freeze-off-hover; activeImage: #freeze-on; activeHoverImage: #freeze-on-hover" scale="0.2 0.2 0.2" position="0 0 0.005" class="ui hud freeze"></a-image>
+ <a-image icon-button="tooltip: #hud-tooltip; tooltipText: Enable Bubble; activeTooltipText: Disable Bubble; image: #bubble-off; hoverImage: #bubble-off-hover; activeImage: #bubble-on; activeHoverImage: #bubble-on-hover" scale="0.1 0.1 0.1" position="0.17 0 0.001" class="ui hud bubble" material="alphaTest:0.1;"></a-image>
+ <a-rounded visible="false" id="hud-tooltip" height="0.08" width="0.3" color="#000000" position="-0.15 -0.2 0" rotation="-20 0 0" radius="0.025" opacity="0.35" class="hud bg">
+ <a-entity text="value: Mute Mic; align:center;" position="0.15 0.04 0.001" ></a-entity>
+ </a-rounded>
</a-entity>
</a-entity>
@@ -278,7 +284,11 @@
hitOpacity: 0.3;
missOpacity: 0.2;"
haptic-feedback
- ></a-entity>
+ body="type: static; shape: none;"
+ mixin="super-hands"
+ controls-shape-offset
+ >
+ </a-entity>
<a-entity
id="player-right-controller"
@@ -295,6 +305,9 @@
hitOpacity: 0.3;
missOpacity: 0.2;"
haptic-feedback
+ body="type: static; shape: none;"
+ mixin="super-hands"
+ controls-shape-offset
></a-entity>
<a-entity gltf-model-plus="inflate: true;"
@@ -321,67 +334,22 @@
</template>
<template data-selector=".LeftHand">
- <a-entity bone-visibility>
- <a-entity
- id="left-super-hand"
- event-repeater="
- events: action_grab, action_release, action_primary_down, action_primary_up;
- eventSource: #player-left-controller"
- static-body="shape: sphere; sphereRadius: 0.02"
- mixin="super-hands"
- position="0 0.05 0"
- ></a-entity>
- </a-entity>
+ <a-entity bone-visibility></a-entity>
</template>
<template data-selector=".RightHand">
- <a-entity bone-visibility>
- <a-entity
- id="right-super-hand"
- event-repeater="
- events: action_grab, action_release, action_primary_down, action_primary_up;
- eventSource: #player-right-controller"
- static-body="shape: sphere; sphereRadius: 0.02"
- mixin="super-hands"
- position="0 -0.05 0"
- ></a-entity>
- </a-entity>
+ <a-entity bone-visibility></a-entity>
</template>
</a-entity>
</a-entity>
- <!-- Lights -->
- <a-entity
- hide-when-quality="low"
- light="type: directional; color: #F9FFCE; intensity: 0.6"
- position="0.002 5.231 -15.3"
- ></a-entity>
-
<!-- Environment -->
<a-entity
id="environment-root"
nav-mesh-helper
static-body="shape: none;"
></a-entity>
-
- <a-entity
- id="skybox"
- scale="8000 8000 8000"
- skybox="azimuth:0.280; inclination:0.440"
- light="type: ambient; color: #FFF"
- layers="reflection:true"
- xr="ar: false"
- ></a-entity>
-
- <a-entity
- id="water"
- water="forceMobile: true; normalMap:#water-normal-map"
- rotation="-90 0 0"
- position="0 -88.358 -332.424"
- xr="ar: false"
- ></a-entity>
-
</a-scene>
<div id="ui-root"></div>
diff --git a/src/hub.js b/src/hub.js
index 26b9e1f368908a0b94a4612193cd722d1b11f38b..554d1f3a7a449f3fd22571b7a251c6690ee74b77 100644
--- a/src/hub.js
+++ b/src/hub.js
@@ -57,6 +57,8 @@ import "./components/block-button";
import "./components/visible-while-frozen";
import "./components/stats-plus";
import "./components/networked-avatar";
+import "./components/css-class";
+import "./components/scene-shadow";
import ReactDOM from "react-dom";
import React from "react";
@@ -68,6 +70,7 @@ import "./systems/app-mode";
import "./systems/exit-on-blur";
import "./gltf-component-mappings";
+import { DEFAULT_ENVIRONMENT_URL } from "./assets/environments/environments";
import { App } from "./App";
@@ -91,6 +94,9 @@ import "./components/super-networked-interactable";
import "./components/networked-counter";
import "./components/super-spawner";
import "./components/event-repeater";
+import "./components/controls-shape-offset";
+import "./components/duck";
+import "./components/quack";
import "./components/cursor-controller";
@@ -308,8 +314,24 @@ const onReady = async () => {
}
};
+ const getPlatformUnsupportedReason = () => {
+ if (typeof RTCDataChannelEvent === "undefined") {
+ return "no_data_channels";
+ }
+
+ return null;
+ };
+
remountUI({ enterScene, exitScene });
+ const platformUnsupportedReason = getPlatformUnsupportedReason();
+
+ if (platformUnsupportedReason) {
+ remountUI({ platformUnsupportedReason: platformUnsupportedReason });
+ exitScene();
+ return;
+ }
+
getAvailableVREntryTypes().then(availableVREntryTypes => {
remountUI({ availableVREntryTypes });
});
@@ -328,10 +350,7 @@ const onReady = async () => {
// If ?room is set, this is `yarn start`, so just use a default environment and query string room.
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"
- // src: "https://asset-bundles-prod.reticulum.io/rooms/atrium/AtriumMeshes.bundle.json"
- // src: "https://asset-bundles-prod.reticulum.io/rooms/courtyard/CourtyardMeshes.bundle.json"
+ src: DEFAULT_ENVIRONMENT_URL
});
return;
}
diff --git a/src/index.js b/src/index.js
index 198ee8d47378bd740fc9a2891cc6945447442b2a..2383019035144bc82277e15baa01b034f6244754 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,16 @@
import "./assets/stylesheets/index.scss";
import React from "react";
import ReactDOM from "react-dom";
-import HomeRoot from "./react-components/home-root";
import registerTelemetry from "./telemetry";
+import HomeRoot from "./react-components/home-root";
+import InfoDialog from "./react-components/info-dialog.js";
+import queryString from "query-string";
+
+const qs = queryString.parse(location.search);
registerTelemetry();
-ReactDOM.render(<HomeRoot />, document.getElementById("home-root"));
+
+ReactDOM.render(
+ <HomeRoot dialogType={qs.list_signup ? InfoDialog.dialogTypes.updates : null} />,
+ document.getElementById("home-root")
+);
diff --git a/src/input-mappings.js b/src/input-mappings.js
index a5c399937f0af8d129e2a177a5175bfeeb27efbd..f9985498157ac70bec292eacfe241dfbb5927355 100644
--- a/src/input-mappings.js
+++ b/src/input-mappings.js
@@ -26,6 +26,9 @@ const config = {
"vive-controls": {
trackpad: "trackpad_dpad4"
},
+ "windows-motion-controls": {
+ joystick: "joystick_dpad4"
+ },
"daydream-controls": {
trackpad: "trackpad_dpad4"
},
@@ -80,6 +83,28 @@ const config = {
abuttondown: "action_primary_down",
abuttonup: "action_primary_up"
},
+ "windows-motion-controls": {
+ joystick_dpad4_west: {
+ right: "snap_rotate_left"
+ },
+ joystick_dpad4_east: {
+ right: "snap_rotate_right"
+ },
+ "trackpad.pressedmove": { left: "move" },
+ joystick_dpad4_pressed_west_down: { right: "snap_rotate_left" },
+ joystick_dpad4_pressed_east_down: { right: "snap_rotate_right" },
+ trackpaddown: { right: "action_primary_down" },
+ trackpadup: { right: "action_primary_up" },
+ menudown: "thumb_down",
+ menuup: "thumb_up",
+ gripdown: ["action_grab", "middle_ring_pinky_down"],
+ gripup: ["action_release", "middle_ring_pinky_up"],
+ trackpadtouchstart: "thumb_down",
+ trackpadtouchend: "thumb_up",
+ triggerdown: ["action_grab", "index_down"],
+ triggerup: ["action_release", "index_up"],
+ "axismove.reverseY": { left: "move" }
+ },
"daydream-controls": {
trackpad_dpad4_pressed_west_down: "snap_rotate_left",
trackpad_dpad4_pressed_east_down: "snap_rotate_right",
diff --git a/src/react-components/2d-hud.js b/src/react-components/2d-hud.js
index eff928870432936ca41843202bbdfc073adaf032..141606a83d121f0a280ac5ac6b6d997856f7fc1e 100644
--- a/src/react-components/2d-hud.js
+++ b/src/react-components/2d-hud.js
@@ -7,15 +7,21 @@ import styles from "../assets/stylesheets/2d-hud.scss";
const TwoDHUD = ({ muted, frozen, spacebubble, onToggleMute, onToggleFreeze, onToggleSpaceBubble }) => (
<div className={styles.container}>
<div className={cx("ui-interactive", styles.panel, styles.left)}>
- <div className={cx(styles.iconButton, styles.mute, { [styles.active]: muted })} onClick={onToggleMute} />
+ <div
+ className={cx(styles.iconButton, styles.mute, { [styles.active]: muted })}
+ title={muted ? "Unmute Mic" : "Mute Mic"}
+ onClick={onToggleMute}
+ />
</div>
<div
className={cx("ui-interactive", styles.iconButton, styles.large, styles.freeze, { [styles.active]: frozen })}
+ title={frozen ? "Resume" : "Pause"}
onClick={onToggleFreeze}
/>
<div className={cx("ui-interactive", styles.panel, styles.right)}>
<div
className={cx(styles.iconButton, styles.bubble, { [styles.active]: spacebubble })}
+ title={spacebubble ? "Disable Bubble" : "Enable Bubble"}
onClick={onToggleSpaceBubble}
/>
</div>
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index f930eaea721535e886cc0ddbeb9611f8644da52c..32e3c3d6887ec44b840a51c8218d48da4091842d 100644
--- a/src/react-components/home-root.js
+++ b/src/react-components/home-root.js
@@ -4,6 +4,7 @@ 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 { ENVIRONMENT_URLS } from "../assets/environments/environments";
import HubCreatePanel from "./hub-create-panel.js";
import InfoDialog from "./info-dialog.js";
@@ -17,17 +18,10 @@ addLocaleData([...en]);
const messages = localeData[lang] || localeData.en;
-const ENVIRONMENT_URLS = [
- "https://asset-bundles-prod.reticulum.io/rooms/meetingroom/MeetingRoom.bundle.json",
- "https://asset-bundles-prod.reticulum.io/rooms/theater/Theater.bundle.json",
- "https://asset-bundles-prod.reticulum.io/rooms/atrium/Atrium.bundle.json",
- "https://asset-bundles-prod.reticulum.io/rooms/courtyard/Courtyard.bundle.json",
- "https://asset-bundles-prod.reticulum.io/rooms/MedievalFantasyBook/MedievalFantasyBook.bundle.json"
-];
-
class HomeRoot extends Component {
static propTypes = {
- intl: PropTypes.object
+ intl: PropTypes.object,
+ dialogType: PropTypes.symbol
};
state = {
@@ -39,6 +33,7 @@ class HomeRoot extends Component {
componentDidMount() {
this.loadEnvironments();
+ this.setState({ dialogType: this.props.dialogType });
document.querySelector("#background-video").playbackRate = 0.75;
}
@@ -115,6 +110,16 @@ class HomeRoot extends Component {
</div>
</div>
<div className="hero-content">
+ <div className="hero-content__attribution">
+ Medieval Fantasy Book by{" "}
+ <a
+ target="_blank"
+ rel="noreferrer noopener"
+ href="https://sketchfab.com/models/06d5a80a04fc4c5ab552759e9a97d91a?utm_campaign=06d5a80a04fc4c5ab552759e9a97d91a&utm_medium=embed&utm_source=oembed"
+ >
+ Pixel
+ </a>
+ </div>
<div className="hero-content__container">
<div className="hero-content__container__title">
<FormattedMessage id="home.hero_title" />
@@ -172,16 +177,6 @@ class HomeRoot extends Component {
</a>
</div>
<div className="footer-content__links__bottom">
- <div>
- Medieval Fantasy Book by{" "}
- <a
- target="_blank"
- rel="noreferrer noopener"
- href="https://sketchfab.com/models/06d5a80a04fc4c5ab552759e9a97d91a?utm_campaign=06d5a80a04fc4c5ab552759e9a97d91a&utm_medium=embed&utm_source=oembed"
- >
- Pixel
- </a>
- </div>
<div>
<FormattedMessage id="home.made_with_love" />
<span style={{ fontWeight: "bold", color: "white" }}>Mozilla</span>
diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js
index 0b74d55b2698d51f6688e23e02e871177ecea436..f925d6ae55d82e7019f68658d3f7c03a986a038e 100644
--- a/src/react-components/hub-create-panel.js
+++ b/src/react-components/hub-create-panel.js
@@ -6,6 +6,7 @@ import classNames from "classnames";
import faAngleLeft from "@fortawesome/fontawesome-free-solid/faAngleLeft";
import faAngleRight from "@fortawesome/fontawesome-free-solid/faAngleRight";
import FontAwesomeIcon from "@fortawesome/react-fontawesome";
+import { resolveURL, extractUrlBase } from "../utils/resolveURL";
import default_scene_preview_thumbnail from "../assets/images/default_thumbnail.png";
@@ -42,11 +43,24 @@ class HubCreatePanel extends Component {
_getEnvironmentThumbnail = environmentIndex => {
const environment = this.props.environments[environmentIndex];
const meta = environment.meta || {};
- return (
- (meta.images || []).find(i => i.type === "preview-thumbnail") || {
- srcset: default_scene_preview_thumbnail
+
+ let environmentThumbnail = {
+ srcset: default_scene_preview_thumbnail
+ };
+
+ if (meta.images) {
+ const thumbnailImage = meta.images.find(i => i.type === "preview-thumbnail");
+
+ if (thumbnailImage) {
+ const baseURL = new URL(extractUrlBase(environment.bundle_url), window.location.href);
+
+ environmentThumbnail = {
+ srcset: resolveURL(thumbnailImage.srcset, baseURL)
+ };
}
- );
+ }
+
+ return environmentThumbnail;
};
createHub = async e => {
diff --git a/src/react-components/info-dialog.js b/src/react-components/info-dialog.js
index 8091484d0f34925270c7455e9eb86f65a0c1bea3..ab7bdda1c22098e1991afd98ff23ffdeb63df83e 100644
--- a/src/react-components/info-dialog.js
+++ b/src/react-components/info-dialog.js
@@ -56,7 +56,7 @@ class InfoDialog extends Component {
const payload = {
email: this.state.mailingListEmail,
- newsletters: "mixed-reality",
+ newsletters: "hubs",
privacy: true,
fmt: "H",
source_url: document.location.href
@@ -133,7 +133,7 @@ class InfoDialog extends Component {
dialogTitle = "";
dialogBody = (
<span>
- Sign up to get updates about new features in hubs.
+ Sign up to get updates about new features in Hubs.
<p />
<form onSubmit={this.signUpForMailingList}>
<div className="mailing-list-form">
diff --git a/src/react-components/profile-entry-panel.js b/src/react-components/profile-entry-panel.js
index e10f9bc6c6f7e42b112f43dfe5d7dcb83b1f5f50..8d1c341ad3b0337ca71663629ce5705f55297ae8 100644
--- a/src/react-components/profile-entry-panel.js
+++ b/src/react-components/profile-entry-panel.js
@@ -87,6 +87,7 @@ class ProfileEntryPanel extends Component {
onFocus={e => e.target.select()}
onChange={e => this.setState({ displayName: e.target.value })}
required
+ spellCheck="false"
pattern={SCHEMA.definitions.profile.properties.displayName.pattern}
title={formatMessage({ id: "profile.display_name.validation_warning" })}
ref={inp => (this.nameInput = inp)}
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 43d39ba0a1e442f55dc095b29e63b64096be68ae..b9eccdcf1cd7227e29f7b28325f1d58029e935dd 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -17,6 +17,9 @@ import InfoDialog from "./info-dialog.js";
import TwoDHUD from "./2d-hud";
import Footer from "./footer";
+import FontAwesomeIcon from "@fortawesome/react-fontawesome";
+import faQuestion from "@fortawesome/fontawesome-free-solid/faQuestion";
+
const mobiledetect = new MobileDetect(navigator.userAgent);
const lang = ((navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage)
@@ -69,6 +72,7 @@ class UIRoot extends Component {
initialEnvironmentLoaded: PropTypes.bool,
janusRoomId: PropTypes.number,
roomUnavailableReason: PropTypes.string,
+ platformUnsupportedReason: PropTypes.string,
hubName: PropTypes.string,
occupantCount: PropTypes.number
};
@@ -245,17 +249,13 @@ class UIRoot extends Component {
};
performDirectEntryFlow = async enterInVR => {
- if (mobiledetect.mobile() && !enterInVR && screenfull.enabled) {
- screenfull.request();
- }
-
this.setState({ enterInVR });
const hasGrantedMic = await this.hasGrantedMicPermissions();
if (hasGrantedMic) {
- this.beginAudioSetup();
await this.setMediaStreamToDefault();
+ this.beginAudioSetup();
} else {
this.setState({ entryStep: ENTRY_STEPS.mic_grant });
}
@@ -405,7 +405,11 @@ class UIRoot extends Component {
// the css renderer to keep up.
this.micLevelMovingAverage.push(Date.now(), level * multiplier);
const average = this.micLevelMovingAverage.movingAverage();
- this.setState({ micLevel: average });
+ this.setState(state => {
+ if (Math.abs(average - state.micLevel) > 0.0001) {
+ return { micLevel: average };
+ }
+ });
}, 50);
const micDeviceId = this.micDeviceIdForMicLabel(this.micLabelForMediaStream(mediaStream));
@@ -486,6 +490,10 @@ class UIRoot extends Component {
};
onAudioReadyButton = () => {
+ if (mobiledetect.mobile() && !this.state.enterInVR && screenfull.enabled) {
+ screenfull.request();
+ }
+
this.props.enterScene(this.state.mediaStream, this.state.enterInVR, this.props.janusRoomId);
const mediaStream = this.state.mediaStream;
@@ -512,18 +520,9 @@ class UIRoot extends Component {
};
render() {
- if (this.state.exited || this.props.roomUnavailableReason) {
+ if (this.state.exited || this.props.roomUnavailableReason || this.props.platformUnsupportedReason) {
let subtitle = null;
- if (this.props.roomUnavailableReason !== "closed") {
- const exitSubtitleId = `exit.subtitle.${this.state.exited ? "exited" : this.props.roomUnavailableReason}`;
- subtitle = (
- <div>
- <FormattedMessage id={exitSubtitleId} />
- <p />
- You can also <a href="/">create a new room</a>.
- </div>
- );
- } else {
+ if (this.props.roomUnavailableReason === "closed") {
// TODO i18n, due to links and markup
subtitle = (
<div>
@@ -537,7 +536,34 @@ class UIRoot extends Component {
If you have questions, contact us at <a href="mailto:hubs@mozilla.com">hubs@mozilla.com</a>.
<p />
If you'd like to run your own server, hubs's source code is available on{" "}
- <a href="https://github.com/mozilla/hubs">Github</a>.
+ <a href="https://github.com/mozilla/hubs">GitHub</a>.
+ </div>
+ );
+ } else if (this.props.platformUnsupportedReason === "no_data_channels") {
+ // TODO i18n, due to links and markup
+ subtitle = (
+ <div>
+ Your browser does not support{" "}
+ <a
+ href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createDataChannel#Browser_compatibility"
+ rel="noreferrer noopener"
+ >
+ WebRTC Data Channels
+ </a>, which is required to use Hubs.
+ </div>
+ );
+ } else {
+ const reason = this.props.roomUnavailableReason || this.props.platformUnsupportedReason;
+ const exitSubtitleId = `exit.subtitle.${this.state.exited ? "exited" : reason}`;
+ subtitle = (
+ <div>
+ <FormattedMessage id={exitSubtitleId} />
+ <p />
+ {this.props.roomUnavailableReason && (
+ <div>
+ You can also <a href="/">create a new room</a>.
+ </div>
+ )}
</div>
);
}
@@ -616,34 +642,41 @@ class UIRoot extends Component {
) : null;
const micPanel =
- this.state.entryStep === ENTRY_STEPS.mic_grant || this.state.entryStep == ENTRY_STEPS.mic_granted ? (
+ this.state.entryStep === ENTRY_STEPS.mic_grant || this.state.entryStep === ENTRY_STEPS.mic_granted ? (
<div className="mic-grant-panel">
- <div className="mic-grant-panel__title">
- <FormattedMessage
- id={this.state.entryStep == ENTRY_STEPS.mic_grant ? "audio.grant-title" : "audio.granted-title"}
- />
- </div>
- <div className="mic-grant-panel__subtitle">
- <FormattedMessage
- id={this.state.entryStep == ENTRY_STEPS.mic_grant ? "audio.grant-subtitle" : "audio.granted-subtitle"}
- />
- </div>
- <div className="mic-grant-panel__button-container">
- {this.state.entryStep == ENTRY_STEPS.mic_grant ? (
- <button className="mic-grant-panel__button" onClick={this.onMicGrantButton}>
- <img src="../assets/images/mic_denied.png" srcSet="../assets/images/mic_denied@2x.png 2x" />
- </button>
- ) : (
- <button className="mic-grant-panel__button" onClick={this.onMicGrantButton}>
- <img src="../assets/images/mic_granted.png" srcSet="../assets/images/mic_granted@2x.png 2x" />
- </button>
- )}
+ <div className="mic-grant-panel__grant-container">
+ <div className="mic-grant-panel__title">
+ <FormattedMessage
+ id={this.state.entryStep == ENTRY_STEPS.mic_grant ? "audio.grant-title" : "audio.granted-title"}
+ />
+ </div>
+ <div className="mic-grant-panel__subtitle">
+ <FormattedMessage
+ id={this.state.entryStep == ENTRY_STEPS.mic_grant ? "audio.grant-subtitle" : "audio.granted-subtitle"}
+ />
+ </div>
+ <div className="mic-grant-panel__button-container">
+ {this.state.entryStep == ENTRY_STEPS.mic_grant ? (
+ <button className="mic-grant-panel__button" onClick={this.onMicGrantButton}>
+ <img src="../assets/images/mic_denied.png" srcSet="../assets/images/mic_denied@2x.png 2x" />
+ </button>
+ ) : (
+ <button className="mic-grant-panel__button" onClick={this.onMicGrantButton}>
+ <img src="../assets/images/mic_granted.png" srcSet="../assets/images/mic_granted@2x.png 2x" />
+ </button>
+ )}
+ </div>
</div>
- {this.state.entryStep == ENTRY_STEPS.mic_granted && (
- <button className="mic-grant-panel__next" onClick={this.onMicGrantButton}>
+ <div className="mic-grant-panel__next-container">
+ <button
+ className={classNames("mic-grant-panel__next", {
+ invisible: this.state.entryStep === ENTRY_STEPS.mic_grant
+ })}
+ onClick={this.onMicGrantButton}
+ >
<FormattedMessage id="audio.granted-next" />
</button>
- )}
+ </div>
</div>
) : null;
@@ -656,100 +689,104 @@ class UIRoot extends Component {
const audioSetupPanel =
this.state.entryStep === ENTRY_STEPS.audio_setup ? (
<div className="audio-setup-panel">
- <div className="audio-setup-panel__title">
- <FormattedMessage id="audio.title" />
- </div>
- <div className="audio-setup-panel__subtitle">
- {(mobiledetect.mobile() || this.state.enterInVR) && (
- <FormattedMessage id={mobiledetect.mobile() ? "audio.subtitle-mobile" : "audio.subtitle-desktop"} />
- )}
- </div>
- <div className="audio-setup-panel__levels">
- <div className="audio-setup-panel__levels__icon">
- <img
- src="../assets/images/level_background.png"
- srcSet="../assets/images/level_background@2x.png 2x"
- className="audio-setup-panel__levels__icon-part"
- />
- <img
- src="../assets/images/level_fill.png"
- srcSet="../assets/images/level_fill@2x.png 2x"
- className="audio-setup-panel__levels__icon-part"
- style={micClip}
- />
- {this.state.audioTrack ? (
+ <div>
+ <div className="audio-setup-panel__title">
+ <FormattedMessage id="audio.title" />
+ </div>
+ <div className="audio-setup-panel__subtitle">
+ {(mobiledetect.mobile() || this.state.enterInVR) && (
+ <FormattedMessage id={mobiledetect.mobile() ? "audio.subtitle-mobile" : "audio.subtitle-desktop"} />
+ )}
+ </div>
+ <div className="audio-setup-panel__levels">
+ <div className="audio-setup-panel__levels__icon">
<img
- src="../assets/images/mic_level.png"
- srcSet="../assets/images/mic_level@2x.png 2x"
+ src="../assets/images/level_background.png"
+ srcSet="../assets/images/level_background@2x.png 2x"
className="audio-setup-panel__levels__icon-part"
/>
- ) : (
<img
- src="../assets/images/mic_denied.png"
- srcSet="../assets/images/mic_denied@2x.png 2x"
+ src="../assets/images/level_fill.png"
+ srcSet="../assets/images/level_fill@2x.png 2x"
className="audio-setup-panel__levels__icon-part"
+ style={micClip}
/>
- )}
- </div>
- <div className="audio-setup-panel__levels__icon" onClick={this.playTestTone}>
- <img
- src="../assets/images/level_background.png"
- srcSet="../assets/images/level_background@2x.png 2x"
- className="audio-setup-panel__levels__icon-part"
- />
- <img
- src="../assets/images/level_fill.png"
- srcSet="../assets/images/level_fill@2x.png 2x"
- className="audio-setup-panel__levels__icon-part"
- style={speakerClip}
- />
- <img
- src="../assets/images/speaker_level.png"
- srcSet="../assets/images/speaker_level@2x.png 2x"
- className="audio-setup-panel__levels__icon-part"
- />
+ {this.state.audioTrack ? (
+ <img
+ src="../assets/images/mic_level.png"
+ srcSet="../assets/images/mic_level@2x.png 2x"
+ className="audio-setup-panel__levels__icon-part"
+ />
+ ) : (
+ <img
+ src="../assets/images/mic_denied.png"
+ srcSet="../assets/images/mic_denied@2x.png 2x"
+ className="audio-setup-panel__levels__icon-part"
+ />
+ )}
+ </div>
+ <div className="audio-setup-panel__levels__icon" onClick={this.playTestTone}>
+ <img
+ src="../assets/images/level_background.png"
+ srcSet="../assets/images/level_background@2x.png 2x"
+ className="audio-setup-panel__levels__icon-part"
+ />
+ <img
+ src="../assets/images/level_fill.png"
+ srcSet="../assets/images/level_fill@2x.png 2x"
+ className="audio-setup-panel__levels__icon-part"
+ style={speakerClip}
+ />
+ <img
+ src="../assets/images/speaker_level.png"
+ srcSet="../assets/images/speaker_level@2x.png 2x"
+ className="audio-setup-panel__levels__icon-part"
+ />
+ </div>
</div>
+ {this.state.audioTrack && (
+ <div className="audio-setup-panel__device-chooser">
+ <select
+ className="audio-setup-panel__device-chooser__dropdown"
+ value={this.selectedMicDeviceId()}
+ onChange={this.micDeviceChanged}
+ >
+ {this.state.micDevices.map(d => (
+ <option key={d.deviceId} value={d.deviceId}>
+ {d.label}
+ </option>
+ ))}
+ </select>
+ <img
+ className="audio-setup-panel__device-chooser__mic-icon"
+ src="../assets/images/mic_small.png"
+ srcSet="../assets/images/mic_small@2x.png 2x"
+ />
+ <img
+ className="audio-setup-panel__device-chooser__dropdown-arrow"
+ src="../assets/images/dropdown_arrow.png"
+ srcSet="../assets/images/dropdown_arrow@2x.png 2x"
+ />
+ </div>
+ )}
+ {this.shouldShowHmdMicWarning() && (
+ <div className="audio-setup-panel__hmd-mic-warning">
+ <img
+ src="../assets/images/warning_icon.png"
+ srcSet="../assets/images/warning_icon@2x.png 2x"
+ className="audio-setup-panel__hmd-mic-warning__icon"
+ />
+ <span className="audio-setup-panel__hmd-mic-warning__label">
+ <FormattedMessage id="audio.hmd-mic-warning" />
+ </span>
+ </div>
+ )}
+ </div>
+ <div className="audio-setup-panel__enter-button-container">
+ <button className="audio-setup-panel__enter-button" onClick={this.onAudioReadyButton}>
+ <FormattedMessage id="audio.enter-now" />
+ </button>
</div>
- {this.state.audioTrack && (
- <div className="audio-setup-panel__device-chooser">
- <select
- className="audio-setup-panel__device-chooser__dropdown"
- value={this.selectedMicDeviceId()}
- onChange={this.micDeviceChanged}
- >
- {this.state.micDevices.map(d => (
- <option key={d.deviceId} value={d.deviceId}>
- {d.label}
- </option>
- ))}
- </select>
- <img
- className="audio-setup-panel__device-chooser__mic-icon"
- src="../assets/images/mic_small.png"
- srcSet="../assets/images/mic_small@2x.png 2x"
- />
- <img
- className="audio-setup-panel__device-chooser__dropdown-arrow"
- src="../assets/images/dropdown_arrow.png"
- srcSet="../assets/images/dropdown_arrow@2x.png 2x"
- />
- </div>
- )}
- {this.shouldShowHmdMicWarning() && (
- <div className="audio-setup-panel__hmd-mic-warning">
- <img
- src="../assets/images/warning_icon.png"
- srcSet="../assets/images/warning_icon@2x.png 2x"
- className="audio-setup-panel__hmd-mic-warning__icon"
- />
- <span className="audio-setup-panel__hmd-mic-warning__label">
- <FormattedMessage id="audio.hmd-mic-warning" />
- </span>
- </div>
- )}
- <button className="audio-setup-panel__enter-button" onClick={this.onAudioReadyButton}>
- <FormattedMessage id="audio.enter-now" />
- </button>
</div>
) : null;
@@ -789,6 +826,17 @@ class UIRoot extends Component {
onCloseDialog={() => this.setState({ infoDialogType: null })}
/>
+ {this.state.entryStep === ENTRY_STEPS.finished && (
+ <button
+ onClick={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.help })}
+ className="ui__help-icon"
+ >
+ <i className="ui__help-icon__icon">
+ <FontAwesomeIcon icon={faQuestion} />
+ </i>
+ </button>
+ )}
+
<div className={dialogClassNames}>
{(this.state.entryStep !== ENTRY_STEPS.finished || this.isWaitingForAutoExit()) && (
<div className={dialogBoxClassNames}>
diff --git a/src/utils/resolveURL.js b/src/utils/resolveURL.js
index ddc6c86803b9adc7ea028b2b127ae0783270f521..35ccc3150278558e4026240164116785620ecfc3 100644
--- a/src/utils/resolveURL.js
+++ b/src/utils/resolveURL.js
@@ -15,3 +15,11 @@ export function resolveURL(url, path) {
// Relative URL
return path + url;
}
+
+export function extractUrlBase(url) {
+ const index = url.lastIndexOf("/");
+
+ if (index === -1) return "./";
+
+ return url.substr(0, index + 1);
+}
diff --git a/webpack.config.js b/webpack.config.js
index c0f8c88b3af3a6c2e43f7111f517841c4fcfec3c..4fc219ef830791bd6dbc6d201143ba82af6b961c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -206,6 +206,12 @@ const config = {
to: "favicon.ico"
}
]),
+ new CopyWebpackPlugin([
+ {
+ from: "src/assets/images/hub-preview.png",
+ to: "hub-preview.png"
+ }
+ ]),
// Extract required css and add a content hash.
new ExtractTextPlugin({
filename: "assets/stylesheets/[name]-[contenthash].css",
@@ -228,7 +234,8 @@ const config = {
"process.env": JSON.stringify({
NODE_ENV: process.env.NODE_ENV,
JANUS_SERVER: process.env.JANUS_SERVER,
- DEV_RETICULUM_SERVER: process.env.DEV_RETICULUM_SERVER
+ DEV_RETICULUM_SERVER: process.env.DEV_RETICULUM_SERVER,
+ ASSET_BUNDLE_SERVER: process.env.ASSET_BUNDLE_SERVER
})
})
]
diff --git a/yarn.lock b/yarn.lock
index 321a63370a4e9eb13191ae2835ed429b7eb6c242..a9e1e2e95bf3783fdc9550bdcce76c190a646d44 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -166,9 +166,9 @@ aframe-billboard-component@^1.0.0:
dependencies:
three-pathfinding "^0.5.5"
-"aframe-input-mapping-component@https://github.com/johnshaughnessy/aframe-input-mapping-component#feature/map-to-array":
+"aframe-input-mapping-component@https://github.com/mozillareality/aframe-input-mapping-component#hubs/master":
version "0.1.2"
- resolved "https://github.com/johnshaughnessy/aframe-input-mapping-component#33d7ad4c82a5e2b74defca39c7fa5ef15aab493e"
+ resolved "https://github.com/mozillareality/aframe-input-mapping-component#03932457c5318db243e811d2767fe0c5a8c7e9e0"
"aframe-physics-extras@https://github.com/infinitelee/aframe-physics-extras#fix/physics-collider-crash":
version "0.1.2"