diff --git a/package.json b/package.json
index 2d4901d3943dd6a8d752ced976608016fe96ce45..a86b58dbedf0f72813f92978b5120294ea8d4c40 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
"aframe-input-mapping-component": "https://github.com/johnshaughnessy/aframe-input-mapping-component#feature/map-to-array",
"aframe-physics-extras": "https://github.com/infinitelee/aframe-physics-extras#fix/physics-collider-crash",
"aframe-physics-system": "https://github.com/donmccurdy/aframe-physics-system",
- "aframe-teleport-controls": "https://github.com/netpro2k/aframe-teleport-controls#feature/teleport-origin",
+ "aframe-teleport-controls": "https://github.com/netpro2k/aframe-teleport-controls#feature/pauseable",
"aframe-xr": "github:brianpeiris/aframe-xr#3162aed",
"babel-plugin-react-intl": "^2.4.0",
"babel-plugin-transform-react-jsx-img-import": "^0.1.4",
diff --git a/src/assets/hud/avatar.jpg b/src/assets/hud/avatar.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..af8093c601f6dcbc74b431ff7f7aca414cf4dc01
Binary files /dev/null and b/src/assets/hud/avatar.jpg differ
diff --git a/src/assets/hud/muted.png b/src/assets/hud/muted.png
index 7a15a9ea9e9125e04739214c0fad7c0226d5eca2..b557fd0195e53a1dc9b4873db65b69afb0b7d1b1 100644
Binary files a/src/assets/hud/muted.png and b/src/assets/hud/muted.png differ
diff --git a/src/assets/hud/unmuted.png b/src/assets/hud/unmuted.png
new file mode 100755
index 0000000000000000000000000000000000000000..71f1af21bdd72aaa22ebe740e84a481aa1dc8b3f
Binary files /dev/null and b/src/assets/hud/unmuted.png differ
diff --git a/src/assets/stylesheets/entry.scss b/src/assets/stylesheets/entry.scss
index d30ffc98bc332d450d24dc29f3e2ebbcf5d21772..2915f56da8f98f3fc79bda2b147d3750179c5dbc 100644
--- a/src/assets/stylesheets/entry.scss
+++ b/src/assets/stylesheets/entry.scss
@@ -18,6 +18,29 @@
flex-direction: column;
flex: 10 1 auto;
justify-content: center;
+
+ &__screen-sharing {
+ font-size: 1.4em;
+ margin-left: 2.95em;
+ margin-top: 0.6em;
+ }
+
+ &__screen-sharing-checkbox {
+ appearance: none;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ width: 2em;
+ height: 2em;
+ border: 3px solid white;
+ border-radius: 9px;
+ vertical-align: sub;
+ margin: 0 0.6em
+ }
+ &__screen-sharing-checkbox:checked {
+ border: 9px double white;
+ outline: 9px solid white;
+ outline-offset: -18px;
+ }
}
.entry-panel__secondary {
diff --git a/src/assets/stylesheets/ui-root.scss b/src/assets/stylesheets/ui-root.scss
index 9d252f04d8ccb94b203a5cd2ef46ec2caf062d2b..74f4ad4a37f344162f1ee029a51fd5e0525e2728 100644
--- a/src/assets/stylesheets/ui-root.scss
+++ b/src/assets/stylesheets/ui-root.scss
@@ -28,18 +28,21 @@
.ui-dialog-box {
grid-column: 3;
- grid-row : 3;
+ grid-row: 3;
position: relative;
}
.ui-dialog-box-contents {
background-color: $darker-transparent;
border-radius: 8px;
- pointer-events: auto;
width: 100%;
height: 100%;
}
+.ui-interactive {
+ pointer-events: auto;
+}
+
.ui-dialog-box--backgrounded {
}
@@ -48,4 +51,3 @@
opacity: 0.7;
pointer-events: none;
}
-
diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json
index e45a644cc1992e965200facb0c45b84f63830ad9..207f10306031fbd1f72c5c87ca3af953446dc9e3 100644
--- a/src/assets/translations.data.json
+++ b/src/assets/translations.data.json
@@ -12,6 +12,7 @@
"entry.daydream-prefix": "Enter on ",
"entry.daydream-medium": "Daydream",
"entry.daydream-via-chrome": "Using Google Chrome",
+ "entry.enable-screen-sharing": "Share my desktop",
"profile.save": "SAVE",
"profile.display_name.validation_warning": "Alphanumerics and hyphens. At least 3 characters, no more than 32",
"profile.header": "Your identity",
diff --git a/src/components/2d-mute-state-indicator.css b/src/components/2d-mute-state-indicator.css
deleted file mode 100644
index 9713edb2ee92e8b0b8e0eafb5a7e8ac41719dcac..0000000000000000000000000000000000000000
--- a/src/components/2d-mute-state-indicator.css
+++ /dev/null
@@ -1,12 +0,0 @@
-:local(.indicator) {
- position: absolute;
- top: 10px;
- left: calc(50vw - 16px);
- width: 32px;
- height: 32px;
- background-size: 100%;
-}
-
-:local(.indicator.muted) {
- background-image: url(../assets/hud/muted.png);
-}
diff --git a/src/components/2d-mute-state-indicator.js b/src/components/2d-mute-state-indicator.js
deleted file mode 100644
index 95df937d8ded1e13e5d125bfb3295b118649a2be..0000000000000000000000000000000000000000
--- a/src/components/2d-mute-state-indicator.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import styles from "./2d-mute-state-indicator.css";
-/**
- * Shows a 2d incicator on screen reflecting mute state
- * @TODO this probably shouldnt be an aframe component but baring any other 2d UI handling it feels cleaner here than jsut free-flaoting
- */
-AFRAME.registerComponent("2d-mute-state-indicator", {
- schema: {},
-
- init() {
- this.onStateToggled = this.onStateToggled.bind(this);
-
- this.muteIcon = document.createElement("div");
- this.muteIcon.classList.add(styles.indicator);
- document.body.appendChild(this.muteIcon);
-
- this.updateMuteState();
- },
-
- play() {
- this.el.sceneEl.addEventListener("stateadded", this.onStateToggled);
- this.el.sceneEl.addEventListener("stateremoved", this.onStateToggled);
- },
-
- pause() {
- this.el.sceneEl.removeEventListener("stateadded", this.onStateToggled);
- this.el.sceneEl.removeEventListener("stateremoved", this.onStateToggled);
- },
-
- onStateToggled(e) {
- if (!e.detail.state === "muted") return;
- this.updateMuteState();
- },
-
- updateMuteState() {
- const muted = this.el.sceneEl.is("muted");
- this.muteIcon.classList.toggle(styles.muted, muted);
- }
-});
diff --git a/src/components/character-controller.js b/src/components/character-controller.js
index 8aaa2240a24bf169bd72f6e957f54031f436e7eb..20553d36ce9c06ca84806fd5b6adc7350ddf2aaa 100644
--- a/src/components/character-controller.js
+++ b/src/components/character-controller.js
@@ -41,6 +41,14 @@ AFRAME.registerComponent("character-controller", {
eventSrc.removeEventListener("rotateY", this.setAngularVelocity);
eventSrc.removeEventListener("snap_rotate_left", this.snapRotateLeft);
eventSrc.removeEventListener("snap_rotate_right", this.snapRotateRight);
+ this.reset();
+ },
+
+ reset() {
+ this.accelerationInput.set(0, 0, 0);
+ this.velocity.set(0, 0, 0);
+ this.angularVelocity = 0;
+ this.pendingSnapRotationMatrix.identity();
},
setAccelerationInput: function(event) {
@@ -82,6 +90,9 @@ AFRAME.registerComponent("character-controller", {
const distance = this.data.groundAcc * deltaSeconds;
const rotationDelta = this.data.rotationSpeed * this.angularVelocity * deltaSeconds;
+ // 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();
+
pivotPos.copy(pivot.position);
pivotPos.applyMatrix4(root.matrix);
trans.setPosition(pivotPos);
diff --git a/src/components/in-world-hud.js b/src/components/in-world-hud.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69cfd7374eaa1ca1972b3cb00784d837dc987b8
--- /dev/null
+++ b/src/components/in-world-hud.js
@@ -0,0 +1,121 @@
+AFRAME.registerComponent("in-world-hud", {
+ schema: {
+ haptic: { type: "selector" },
+ raycaster: { type: "selector" }
+ },
+ init() {
+ this.bg = this.el.querySelector(".bg");
+ this.mic = this.el.querySelector(".mic");
+ this.nametag = this.el.querySelector(".username");
+ this.nametag.object3DMap.text.material.depthTest = false;
+ this.data.raycaster.components.line.material.depthTest = false;
+
+ const muted = this.el.sceneEl.is("muted");
+ this.mic.setAttribute("src", muted ? "#muted" : "#unmuted");
+
+ const scene = this.el.sceneEl;
+ this.onUsernameChanged = this.onUsernameChanged.bind(this);
+ scene.addEventListener("username-changed", this.onUsernameChanged);
+
+ this.showCorrectMuteState = () => {
+ const muted = this.el.sceneEl.is("muted");
+ this.mic.setAttribute("src", muted ? "#muted" : "#unmuted");
+ };
+
+ this.onStateChange = evt => {
+ if (evt.detail !== "muted") return;
+ this.showCorrectMuteState();
+ };
+
+ this.onMicHover = () => {
+ this.hoveredOnMic = true;
+ this.data.haptic.emit("haptic_pulse", { intensity: "low" });
+ this.mic.setAttribute("material", "color", "#1DD");
+ };
+
+ this.onMicHoverExit = () => {
+ this.hoveredOnMic = false;
+ this.mic.setAttribute("material", "color", "#FFF");
+ this.showCorrectMuteState();
+ };
+
+ this.onMicDown = () => {
+ this.data.haptic.emit("haptic_pulse", { intensity: "medium" });
+ this.el.sceneEl.removeEventListener("micAudio", this.onAudioFrequencyChange);
+ this.mic.setAttribute("material", "color", this.el.sceneEl.is("muted") ? "#0FA" : "#F33");
+ this.el.emit("action_mute");
+ window.setTimeout(() => {
+ this.mic.setAttribute("material", "color", "#FFF");
+ this.el.sceneEl.addEventListener("micAudio", this.onAudioFrequencyChange);
+ }, 150);
+ };
+
+ this.onClick = () => {
+ if (this.hoveredOnMic) {
+ this.onMicDown();
+ }
+ };
+
+ this.onAudioFrequencyChange = e => {
+ if (this.hoveredOnMic) return;
+ const red = 1.0 - e.detail.volume / 10.0;
+ this.mic.object3DMap.mesh.material.color = { r: red, g: 9, b: 9 };
+ };
+
+ this.el.sceneEl.addEventListener("mediaStream", evt => {
+ this.ms = evt.detail.ms;
+ const ctx = THREE.AudioContext.getContext();
+ const source = ctx.createMediaStreamSource(this.ms);
+ this.analyser = ctx.createAnalyser();
+ this.levels = new Uint8Array(this.analyser.frequencyBinCount);
+ source.connect(this.analyser);
+ });
+ },
+
+ play() {
+ this.mic.addEventListener("raycaster-intersected", this.onMicHover);
+ this.mic.addEventListener("raycaster-intersected-cleared", this.onMicHoverExit);
+
+ this.el.sceneEl.addEventListener("stateadded", this.onStateChange);
+ this.el.sceneEl.addEventListener("stateremoved", this.onStateChange);
+
+ this.el.addEventListener("click", this.onClick);
+
+ this.el.sceneEl.addEventListener("micAudio", this.onAudioFrequencyChange);
+ },
+
+ pause() {
+ this.nametag.removeEventListener("raycaster-intersected", this.onNametagHovered);
+ this.nametag.removeEventListener("raycaster-intersected-cleared", this.onNametagUnhovered);
+
+ this.el.sceneEl.removeEventListener("stateadded", this.onStateChange);
+ this.el.sceneEl.removeEventListener("stateremoved", this.onStateChange);
+
+ this.el.removeEventListener("click", this.onClick);
+
+ this.el.sceneEl.removeEventListener("micAudio", this.onAudioFrequencyChange);
+ },
+
+ tick: function(t, dt) {
+ if (!this.analyser) return;
+
+ this.analyser.getByteFrequencyData(this.levels);
+
+ let sum = 0;
+ for (let i = 0; i < this.levels.length; i++) {
+ sum += this.levels[i];
+ }
+ this.volume = sum / this.levels.length;
+ this.el.emit("micAudio", {
+ volume: this.volume,
+ levels: this.levels
+ });
+ },
+
+ onUsernameChanged(evt) {
+ const { username } = evt.detail;
+ const width = evt.detail.username.length == 0 ? 1 : 40 / username.length;
+ this.nametag.setAttribute("text", "width", Math.min(width, 6));
+ this.nametag.setAttribute("text", "value", username);
+ }
+});
diff --git a/src/components/networked-video-player.js b/src/components/networked-video-player.js
index 03cfba4f6d7a835ac825804724a4109d16690cdb..51adcf2f7f2ddd6d0023c54442e03627ea952c70 100644
--- a/src/components/networked-video-player.js
+++ b/src/components/networked-video-player.js
@@ -1,3 +1,5 @@
+import queryString from "query-string";
+
import styles from "./networked-video-player.css";
const nafConnected = function() {
@@ -9,14 +11,6 @@ const nafConnected = function() {
AFRAME.registerComponent("networked-video-player", {
schema: {},
async init() {
- let container = document.getElementById("nvp-debug-container");
- if (!container) {
- container = document.createElement("div");
- container.id = "nvp-debug-container";
- container.classList.add(styles.container);
- document.body.appendChild(container);
- }
-
await nafConnected();
const networkedEl = await NAF.utils.getNetworkedEntity(this.el);
@@ -25,6 +19,24 @@ AFRAME.registerComponent("networked-video-player", {
}
const ownerId = networkedEl.components.networked.data.owner;
+
+ const qs = queryString.parse(location.search);
+ const rejectScreenShares = qs.accept_screen_shares === undefined;
+ if (ownerId !== NAF.clientId && rejectScreenShares) {
+ // Toggle material visibility since object visibility is network-synced
+ // TODO: There ought to be a better way to disable network syncs on a remote entity
+ this.el.setAttribute("material", {visible: false});
+ return;
+ }
+
+ let container = document.getElementById("nvp-debug-container");
+ if (!container) {
+ container = document.createElement("div");
+ container.id = "nvp-debug-container";
+ container.classList.add(styles.container);
+ document.body.appendChild(container);
+ }
+
const stream = await NAF.connection.adapter.getMediaStream(ownerId, "video");
if (!stream) {
return;
diff --git a/src/components/wasd-to-analog2d.js b/src/components/wasd-to-analog2d.js
index 1b83f8f63a2ef969300ef1c91a0814f04a1f0ed8..a424cb893ab10c29575667f7c68539dd65e90689 100644
--- a/src/components/wasd-to-analog2d.js
+++ b/src/components/wasd-to-analog2d.js
@@ -17,17 +17,8 @@ AFRAME.registerComponent("wasd-to-analog2d", {
},
play: function() {
- const eventNames = [
- "w_down",
- "w_up",
- "a_down",
- "a_up",
- "s_down",
- "s_up",
- "d_down",
- "d_up"
- ];
- for (var name of eventNames) {
+ const eventNames = ["w_down", "w_up", "a_down", "a_up", "s_down", "s_up", "d_down", "d_up"];
+ for (const name of eventNames) {
this.el.sceneEl.addEventListener(name, this.onWasd);
}
// I listen to events that this component generates instead of emitting "move"
@@ -42,10 +33,8 @@ AFRAME.registerComponent("wasd-to-analog2d", {
pause: function() {
this.el.sceneEl.removeEventListener("wasd", this.onWasd);
- this.el.sceneEl.removeEventListener(
- this.data.analog2dOutputAction,
- this.move
- );
+ this.el.sceneEl.removeEventListener(this.data.analog2dOutputAction, this.move);
+ this.keys = {};
},
onWasd: function(event) {
@@ -58,18 +47,13 @@ AFRAME.registerComponent("wasd-to-analog2d", {
tick: function(t, dt) {
this.target = [0, 0];
- for (var key in this.keys) {
+ for (const key in this.keys) {
if (this.keys[key] && this.vectors[key]) {
- this.target = [
- this.target[0] + this.vectors[key][0],
- this.target[1] + this.vectors[key][1]
- ];
+ this.target = [this.target[0] + this.vectors[key][0], this.target[1] + this.vectors[key][1]];
}
}
- const targetMagnitude = Math.sqrt(
- this.target[0] * this.target[0] + this.target[1] * this.target[1]
- );
+ const targetMagnitude = Math.sqrt(this.target[0] * this.target[0] + this.target[1] * this.target[1]);
if (targetMagnitude !== 0) {
this.target[0] = this.target[0] / targetMagnitude;
this.target[1] = this.target[1] / targetMagnitude;
diff --git a/src/input-mappings.js b/src/input-mappings.js
index 6449f41c43cbda7a44fd3ec3e5edf51b2376f63e..a5338250079c08c94d79edb84457ff4e3b4e7b65 100644
--- a/src/input-mappings.js
+++ b/src/input-mappings.js
@@ -10,6 +10,10 @@ const inGameActions = {
action_teleport_down: { label: "Teleport Aim" },
action_teleport_up: { label: "Teleport" },
action_share_screen: { label: "Share Screen" }
+ },
+ hud: {
+ action_ui_select_down: { label: "Select UI item" },
+ action_ui_select_up: { label: "Select UI item" }
}
};
@@ -79,6 +83,7 @@ const config = {
q_press: "snap_rotate_left",
e_press: "snap_rotate_right",
v_press: "action_share_screen",
+ b_press: "action_select_hud_item",
// We can't create a keyboard behaviour with AFIM yet,
// so these will get captured by wasd-to-analog2d
@@ -99,6 +104,40 @@ const config = {
D_down: "d_down",
D_up: "d_up"
}
+ },
+ hud: {
+ "vive-controls": {
+ triggerdown: { right: "action_ui_select_down" },
+ triggerup: { right: "action_ui_select_up" }
+ },
+ "oculus-touch-controls": {
+ triggerdown: { right: "action_ui_select_down" },
+ triggerup: { right: "action_ui_select_up" },
+ gripdown: "middle_ring_pinky_down",
+ gripup: "middle_ring_pinky_up",
+ abuttontouchstart: "thumb_down",
+ abuttontouchend: "thumb_up",
+ bbuttontouchstart: "thumb_down",
+ bbuttontouchend: "thumb_up",
+ xbuttontouchstart: "thumb_down",
+ xbuttontouchend: "thumb_up",
+ ybuttontouchstart: "thumb_down",
+ ybuttontouchend: "thumb_up",
+ surfacetouchstart: "thumb_down",
+ surfacetouchend: "thumb_up",
+ thumbsticktouchstart: "thumb_down",
+ thumbsticktouchend: "thumb_up",
+ triggertouchstart: "index_down",
+ triggertouchend: "index_up"
+ },
+ "daydream-controls": {
+ trackpaddown: { right: "action_ui_select_down" },
+ trackpadup: { right: "action_ui_select_up" }
+ },
+ "gearvr-controls": {
+ trackpaddown: { right: "action_ui_select_down" },
+ trackpadup: { right: "action_ui_select_up" }
+ }
}
}
};
diff --git a/src/react-components/2d-hud.css b/src/react-components/2d-hud.css
new file mode 100644
index 0000000000000000000000000000000000000000..556431ac6ca824e0bbcf4cf4d5644e05be4dc309
--- /dev/null
+++ b/src/react-components/2d-hud.css
@@ -0,0 +1,65 @@
+:local(.container) {
+ position: absolute;
+ top: 10px;
+ display: flex;
+ justify-content: center;
+ height: 60px;
+ width: 100%;
+}
+
+:local(.bg) {
+ position: absolute;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ padding: 10px;
+ background-color: rgba(0, 0, 0, 0.35);
+}
+
+:local(.nametag) {
+ display: flex;
+ justify-content: center;
+ font-size: 32px;
+ font-family: sans-serif;
+ color: white;
+ margin: 0 10px 0 0;
+}
+
+:local(.avatar) {
+ display: flex;
+ width: 48px;
+ height: 48px;
+ background-size: 100%;
+ background-image: url(../assets/hud/avatar.jpg);
+}
+
+:local(.mic) {
+ display: flex;
+ width: 48px;
+ height: 48px;
+ mask: url(../assets/hud/unmuted.png);
+ mask-size: 48px;
+ background-color: white;
+ cursor: pointer;
+}
+
+:local(.mic:hover) {
+ background-color: cyan;
+}
+
+:local(.mic.muted:hover) {
+ background-color: cyan;
+}
+
+:local(.mic:active) {
+ background-color: red;
+}
+
+:local(.mic.muted) {
+ mask: url(../assets/hud/muted.png);
+ mask-size: 48px;
+}
+
+:local(.mic.muted:active) {
+ background-color: green;
+}
diff --git a/src/react-components/2d-hud.js b/src/react-components/2d-hud.js
new file mode 100644
index 0000000000000000000000000000000000000000..fda3ae06ad0ce63b7b773d5a69f4141b52389c9f
--- /dev/null
+++ b/src/react-components/2d-hud.js
@@ -0,0 +1,23 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import cx from "classnames";
+
+import styles from "./2d-hud.css";
+
+const TwoDHUD = ({ name, muted, onToggleMute }) => (
+ <div className={styles.container}>
+ <div className={cx("ui-interactive", styles.bg)}>
+ <div className={cx(styles.mic, { [styles.muted]: muted })} onClick={onToggleMute} />
+ <div className={styles.nametag}>{name}</div>
+ <div className={styles.avatar} />
+ </div>
+ </div>
+);
+
+TwoDHUD.propTypes = {
+ name: PropTypes.string,
+ muted: PropTypes.bool,
+ onToggleMute: PropTypes.func
+};
+
+export default TwoDHUD;
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 38194bfacb2e6d0a661ba5c90b1c7f2dec37d67f..26ffdfbf3d55227218ea4c36f3752fbe888461df 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -1,25 +1,27 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
import { VR_DEVICE_AVAILABILITY } from "../utils/vr-caps-detect";
import queryString from "query-string";
import { SCHEMA } from "../storage/store";
-import MobileDetect from 'mobile-detect';
-import { IntlProvider, FormattedMessage, addLocaleData } from 'react-intl';
-import en from 'react-intl/locale-data/en';
-import MovingAverage from 'moving-average';
+import MobileDetect from "mobile-detect";
+import { IntlProvider, FormattedMessage, addLocaleData } from "react-intl";
+import en from "react-intl/locale-data/en";
+import MovingAverage from "moving-average";
-import AutoExitWarning from './auto-exit-warning';
-import { TwoDEntryButton, GenericEntryButton, GearVREntryButton, DaydreamEntryButton } from './entry-buttons.js';
-import { ProfileInfoHeader } from './profile-info-header.js';
-import ProfileEntryPanel from './profile-entry-panel';
+import AutoExitWarning from "./auto-exit-warning";
+import { TwoDEntryButton, GenericEntryButton, GearVREntryButton, DaydreamEntryButton } from "./entry-buttons.js";
+import { ProfileInfoHeader } from "./profile-info-header.js";
+import ProfileEntryPanel from "./profile-entry-panel";
+import TwoDHUD from "./2d-hud";
const mobiledetect = new MobileDetect(navigator.userAgent);
-const lang = ((navigator.languages && navigator.languages[0]) ||
- navigator.language || navigator.userLanguage).toLowerCase().split(/[_-]+/)[0];
+const lang = ((navigator.languages && navigator.languages[0]) || navigator.language || navigator.userLanguage)
+ .toLowerCase()
+ .split(/[_-]+/)[0];
-import localeData from '../assets/translations.data.json';
+import localeData from "../assets/translations.data.json";
addLocaleData([...en]);
const messages = localeData[lang] || localeData.en;
@@ -30,7 +32,7 @@ const ENTRY_STEPS = {
mic_granted: "mic_granted",
audio_setup: "audio_setup",
finished: "finished"
-}
+};
const HMD_MIC_REGEXES = [/\Wvive\W/i, /\Wrift\W/i];
@@ -39,11 +41,6 @@ async function grantedMicLabels() {
return mediaDevices.filter(d => d.label && d.kind === "audioinput").map(d => d.label);
}
-async function hasGrantedMicPermissions() {
- const micLabels = await grantedMicLabels();
- return micLabels.length > 0;
-}
-
// This is a list of regexes that match the microphone labels of HMDs.
//
// If entering VR mode, and if any of these regexes match an audio device,
@@ -62,9 +59,10 @@ class UIRoot extends Component {
concurrentLoadDetector: PropTypes.object,
disableAutoExitOnConcurrentLoad: PropTypes.bool,
forcedVREntryType: PropTypes.string,
+ enableScreenSharing: PropTypes.bool,
store: PropTypes.object,
scene: PropTypes.object
- }
+ };
state = {
availableVREntryTypes: null,
@@ -72,7 +70,10 @@ class UIRoot extends Component {
enterInVR: false,
shareScreen: false,
+ requestedScreen: false,
mediaStream: null,
+ videoTrack: null,
+ audioTrack: null,
toneInterval: null,
tonePlaying: false,
@@ -91,13 +92,15 @@ class UIRoot extends Component {
exited: false,
showProfileEntry: false
- }
+ };
componentDidMount() {
this.setupTestTone();
this.props.concurrentLoadDetector.addEventListener("concurrentload", this.onConcurrentLoad);
this.micLevelMovingAverage = MovingAverage(100);
this.props.scene.addEventListener("loaded", this.onSceneLoaded);
+ this.props.scene.addEventListener("stateadded", this.onAframeStateChanged);
+ this.props.scene.addEventListener("stateremoved", this.onAframeStateChanged);
}
componentWillUnmount() {
@@ -106,7 +109,18 @@ class UIRoot extends Component {
onSceneLoaded = () => {
this.setState({ sceneLoaded: true });
- }
+ };
+
+ // TODO: mute state should probably actually just live in react land
+ onAframeStateChanged = e => {
+ if (e.detail !== "muted") return;
+ this.setState({
+ muted: this.props.scene.is("muted")
+ });
+ };
+ toggleMute = () => {
+ this.props.scene.emit("action_mute");
+ };
handleForcedVREntryType = () => {
if (!this.props.forcedVREntryType) return;
@@ -116,7 +130,7 @@ class UIRoot extends Component {
} else if (this.props.forcedVREntryType === "gearvr") {
this.enterGearVR();
}
- }
+ };
setupTestTone = () => {
const toneClip = document.querySelector("#test-tone");
@@ -128,27 +142,29 @@ class UIRoot extends Component {
setTimeout(() => {
this.setState({ tonePlaying: true });
- setTimeout(() => { this.setState({ tonePlaying: false }); }, toneLength)
+ setTimeout(() => {
+ this.setState({ tonePlaying: false });
+ }, toneLength);
}, toneDelay);
};
toneClip.addEventListener("seeked", toneIndicatorLoop);
toneClip.addEventListener("playing", toneIndicatorLoop);
- }
+ };
startTestTone = () => {
const toneClip = document.querySelector("#test-tone");
toneClip.loop = true;
toneClip.play();
- }
+ };
stopTestTone = () => {
- const toneClip = document.querySelector("#test-tone")
+ const toneClip = document.querySelector("#test-tone");
toneClip.pause();
toneClip.currentTime = 0;
- this.setState({ tonePlaying: false })
- }
+ this.setState({ tonePlaying: false });
+ };
onConcurrentLoad = () => {
if (this.props.disableAutoExitOnConcurrentLoad) return;
@@ -165,35 +181,54 @@ class UIRoot extends Component {
this.checkForAutoExit();
}, 500);
- this.setState({ autoExitTimerStartedAt: new Date(), autoExitTimerInterval })
- }
+ this.setState({ autoExitTimerStartedAt: new Date(), autoExitTimerInterval });
+ };
checkForAutoExit = () => {
if (this.state.secondsRemainingBeforeAutoExit !== 0) return;
this.endAutoExitTimer();
this.exit();
- }
+ };
exit = () => {
this.props.exitScene();
this.setState({ exited: true });
- }
+ };
isWaitingForAutoExit = () => {
return this.state.secondsRemainingBeforeAutoExit <= AUTO_EXIT_TIMER_SECONDS;
- }
+ };
endAutoExitTimer = () => {
clearInterval(this.state.autoExitTimerInterval);
- this.setState({ autoExitTimerStartedAt: null, autoExitTimerInterval: null, secondsRemainingBeforeAutoExit: Infinity });
+ this.setState({
+ autoExitTimerStartedAt: null,
+ autoExitTimerInterval: null,
+ secondsRemainingBeforeAutoExit: Infinity
+ });
+ };
+
+ hasGrantedMicPermissions = async () => {
+ if (this.state.requestedScreen) {
+ // There is no way to tell if you've granted mic permissions in a previous session if we've
+ // already prompted for screen sharing permissions, so we have to assume that we've never granted permissions.
+ // Fortunately, if you *have* granted permissions permanently, there won't be a second browser prompt, but we
+ // can't determine that before hand.
+ // See https://bugzilla.mozilla.org/show_bug.cgi?id=1449783 for a potential solution in the future.
+ return false;
+ }
+ else {
+ // If we haven't requested the screen in this session, check if we've granted permissions in a previous session.
+ return (await grantedMicLabels()).length > 0;
+ }
}
- performDirectEntryFlow = async (enterInVR) => {
+ performDirectEntryFlow = async enterInVR => {
this.startTestTone();
- this.setState({ enterInVR })
+ this.setState({ enterInVR });
- const hasGrantedMic = await hasGrantedMicPermissions();
+ const hasGrantedMic = await this.hasGrantedMicPermissions();
if (hasGrantedMic) {
await this.setMediaStreamToDefault();
@@ -202,15 +237,15 @@ class UIRoot extends Component {
this.stopTestTone();
this.setState({ entryStep: ENTRY_STEPS.mic_grant });
}
- }
+ };
enter2D = async () => {
await this.performDirectEntryFlow(false);
- }
+ };
enterVR = async () => {
await this.performDirectEntryFlow(true);
- }
+ };
enterGearVR = async () => {
this.exit();
@@ -219,10 +254,11 @@ class UIRoot extends Component {
const qs = queryString.parse(document.location.search);
qs.vr_entry_type = "gearvr"; // Auto-choose 'gearvr' after landing in Oculus Browser
- const ovrwebUrl = `ovrweb://${document.location.protocol || "http:"}//${document.location.host}${document.location.pathname || ""}?${queryString.stringify(qs)}#{document.location.hash || ""}`;
+ const ovrwebUrl = `ovrweb://${document.location.protocol || "http:"}//${document.location.host}${document.location
+ .pathname || ""}?${queryString.stringify(qs)}#{document.location.hash || ""}`;
document.location = ovrwebUrl;
- }
+ };
enterDaydream = async () => {
const loc = document.location;
@@ -234,44 +270,72 @@ class UIRoot extends Component {
const qs = queryString.parse(document.location.search);
qs.vr_entry_type = "daydream"; // Auto-choose 'daydream' after landing in chrome
- const intentUrl = `intent://${document.location.host}${document.location.pathname || ""}?${queryString.stringify(qs)}#Intent;scheme=${(document.location.protocol || "http:").replace(":", "")};action=android.intent.action.VIEW;package=com.android.chrome;end;`;
+ const intentUrl = `intent://${document.location.host}${document.location.pathname || ""}?${queryString.stringify(
+ qs
+ )}#Intent;scheme=${(document.location.protocol || "http:").replace(
+ ":",
+ ""
+ )};action=android.intent.action.VIEW;package=com.android.chrome;end;`;
document.location = intentUrl;
} else {
await this.performDirectEntryFlow(true);
}
- }
+ };
- mediaVideoConstraint = () => {
- return this.state.shareScreen ? { mediaSource: "screen", height: 720, frameRate: 30 } : false;
+ micDeviceChanged = async ev => {
+ const constraints = { audio: { deviceId: { exact: [ev.target.value] } } };
+ await this.fetchAudioTrack(constraints);
+ await this.setupNewMediaStream();
}
- micDeviceChanged = async (ev) => {
- const constraints = { audio: { deviceId: { exact: [ev.target.value] } }, video: this.mediaVideoConstraint() };
- await this.setupNewMediaStream(constraints);
+ setMediaStreamToDefault = async () => {
+ await this.fetchAudioTrack({ audio: true });
+ await this.setupNewMediaStream();
+ }
+
+ setStateAndRequestScreen = async e => {
+ const checked = e.target.checked;
+ await this.setState({ requestedScreen: true, shareScreen: checked });
+ if (checked) {
+ this.fetchVideoTrack({ video: {
+ mediaSource: "screen",
+ // Work around BMO 1449832 by calculating the width. This will break for multi monitors if you share anything
+ // other than your current monitor that has a different aspect ratio.
+ width: screen.width / screen.height * 720,
+ height: 720,
+ frameRate: 30
+ } });
+ }
+ else {
+ this.setState({ videoTrack: null });
+ }
}
- setMediaStreamToDefault = async () => {
- await this.setupNewMediaStream({ audio: true, video: false });
+ fetchVideoTrack = async constraints => {
+ const mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
+ this.setState({ videoTrack: mediaStream.getVideoTracks()[0] });
}
- setupNewMediaStream = async (constraints) => {
- const AudioContext = window.AudioContext || window.webkitAudioContext;
- const audioContext = new AudioContext();
+ fetchAudioTrack = async constraints => {
+ if (this.state.audioTrack) {
+ this.state.audioTrack.stop();
+ }
+ const mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
+ this.setState({ audioTrack: mediaStream.getAudioTracks()[0] });
+ }
- if (this.state.mediaStream) {
- clearInterval(this.state.micUpdateInterval);
+ setupNewMediaStream = async constraints => {
+ const mediaStream = new MediaStream();
- const previousStream = this.state.mediaStream;
+ // we should definitely have an audioTrack at this point.
+ mediaStream.addTrack(this.state.audioTrack);
- for (const tracks of [previousStream.getAudioTracks(), previousStream.getVideoTracks()]) {
- for (const track of tracks) {
- track.stop();
- }
- }
+ if (this.state.videoTrack) {
+ mediaStream.addTrack(this.state.videoTrack);
}
- const mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
-
+ const AudioContext = window.AudioContext || window.webkitAudioContext;
+ const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(mediaStream);
const analyzer = audioContext.createAnalyser();
const levels = new Uint8Array(analyzer.fftSize);
@@ -287,13 +351,13 @@ class UIRoot extends Component {
v = Math.max(levels[x] - 127, v);
}
- const level = v / 128.0 ;
+ const level = v / 128.0;
this.micLevelMovingAverage.push(Date.now(), level);
- this.setState({ micLevel: this.micLevelMovingAverage.movingAverage() })
+ this.setState({ micLevel: this.micLevelMovingAverage.movingAverage() });
}, 50);
this.setState({ mediaStream, micUpdateInterval });
- }
+ };
onMicGrantButton = async () => {
if (this.state.entryStep == ENTRY_STEPS.mic_grant) {
@@ -303,43 +367,50 @@ class UIRoot extends Component {
this.startTestTone();
await this.beginAudioSetup();
}
- }
+ };
onProfileFinished = () => {
- this.setState({ showProfileEntry: false })
- }
+ this.setState({ showProfileEntry: false });
+ };
beginAudioSetup = async () => {
await this.fetchMicDevices();
this.setState({ entryStep: ENTRY_STEPS.audio_setup });
- }
+ };
fetchMicDevices = async () => {
const mediaDevices = await navigator.mediaDevices.enumerateDevices();
- this.setState({ micDevices: mediaDevices.filter(d => d.kind === "audioinput").map(d => ({ deviceId: d.deviceId, label: d.label }))});
- }
+ this.setState({
+ micDevices: mediaDevices.
+ filter(d => d.kind === "audioinput").
+ map(d => ({ deviceId: d.deviceId, label: d.label }))
+ });
+ };
shouldShowHmdMicWarning = () => {
if (mobiledetect.mobile()) return false;
if (!this.state.enterInVR) return false;
if (!this.hasHmdMicrophone()) return false;
- return !(HMD_MIC_REGEXES.find(r => this.selectedMicLabel().match(r)));
- }
+ return !HMD_MIC_REGEXES.find(r => this.selectedMicLabel().match(r));
+ };
hasHmdMicrophone = () => {
- return !!(this.state.micDevices.find(d => HMD_MIC_REGEXES.find(r => d.label.match(r))));
- }
+ return !!this.state.micDevices.find(d => HMD_MIC_REGEXES.find(r => d.label.match(r)));
+ };
selectedMicLabel = () => {
- return (this.state.mediaStream
- && this.state.mediaStream.getAudioTracks().length > 0
- && this.state.mediaStream.getAudioTracks()[0].label) || "";
- }
+ return (
+ (this.state.mediaStream &&
+ this.state.mediaStream.getAudioTracks().length > 0 &&
+ this.state.mediaStream.getAudioTracks()[0].label) ||
+ ""
+ );
+ };
selectedMicDeviceId = () => {
return this.state.micDevices.filter(d => d.label === this.selectedMicLabel).map(d => d.deviceId)[0];
- }
+ };
onAudioReadyButton = () => {
this.props.enterScene(this.state.mediaStream, this.state.enterInVR);
@@ -348,17 +419,17 @@ class UIRoot extends Component {
if (mediaStream) {
if (mediaStream.getAudioTracks().length > 0) {
- console.log(`Using microphone: ${mediaStream.getAudioTracks()[0].label}`)
+ console.log(`Using microphone: ${mediaStream.getAudioTracks()[0].label}`);
}
if (mediaStream.getVideoTracks().length > 0) {
- console.log('Screen sharing enabled.')
+ console.log("Screen sharing enabled.");
}
}
this.stopTestTone();
this.setState({ entryStep: ENTRY_STEPS.finished });
- }
+ };
render() {
if (!this.props.scene.hasLoaded || !this.state.availableVREntryTypes) {
@@ -367,7 +438,7 @@ class UIRoot extends Component {
<div className="loading-panel">
<div className="loader-wrap">
<div className="loader">
- <div className="loader-center"/>
+ <div className="loader-center" />
</div>
</div>
<div className="loading-panel__title">
@@ -386,7 +457,7 @@ class UIRoot extends Component {
<b>moz://a</b> duck
</div>
<div className="loading-panel__subtitle">
- <FormattedMessage id="exit.subtitle"/>
+ <FormattedMessage id="exit.subtitle" />
</div>
</div>
</IntlProvider>
@@ -395,125 +466,213 @@ class UIRoot extends Component {
const daydreamMaybeSubtitle = messages["entry.daydream-via-chrome"];
- const entryPanel = this.state.entryStep === ENTRY_STEPS.start
- ? (
- <div className="entry-panel">
- <TwoDEntryButton onClick={this.enter2D}/>
- { this.state.availableVREntryTypes.generic !== VR_DEVICE_AVAILABILITY.no && <GenericEntryButton onClick={this.enterVR}/> }
- { this.state.availableVREntryTypes.gearvr !== VR_DEVICE_AVAILABILITY.no && <GearVREntryButton onClick={this.enterGearVR}/> }
- { this.state.availableVREntryTypes.daydream !== VR_DEVICE_AVAILABILITY.no &&
+ // Only show this in desktop firefox since other browsers/platforms will ignore the "screen" media constraint and
+ // will attempt to share your webcam instead!
+ const screenSharingCheckbox = (
+ this.props.enableScreenSharing &&
+ !mobiledetect.mobile() &&
+ /firefox/i.test(navigator.userAgent) &&
+ (
+ <label className="entry-panel__screen-sharing">
+ <input className="entry-panel__screen-sharing-checkbox" type="checkbox"
+ value={this.state.shareScreen}
+ onChange={this.setStateAndRequestScreen}
+ />
+ <FormattedMessage id="entry.enable-screen-sharing" />
+ </label>
+ )
+ );
+
+ const entryPanel =
+ this.state.entryStep === ENTRY_STEPS.start ? (
+ <div className="entry-panel">
+ <TwoDEntryButton onClick={this.enter2D} />
+ { this.state.availableVREntryTypes.generic !== VR_DEVICE_AVAILABILITY.no && (
+ <GenericEntryButton onClick={this.enterVR} />
+ )}
+ { this.state.availableVREntryTypes.gearvr !== VR_DEVICE_AVAILABILITY.no && (
+ <GearVREntryButton onClick={this.enterGearVR} />
+ )}
+ { this.state.availableVREntryTypes.daydream !== VR_DEVICE_AVAILABILITY.no && (
<DaydreamEntryButton
onClick={this.enterDaydream}
- subtitle={this.state.availableVREntryTypes.daydream == VR_DEVICE_AVAILABILITY.maybe ? daydreamMaybeSubtitle : "" }/> }
- { this.state.availableVREntryTypes.cardboard !== VR_DEVICE_AVAILABILITY.no &&
- (<div className="entry-panel__secondary" onClick={this.enterVR}><FormattedMessage id="entry.cardboard"/></div>) }
- </div>
- ) : null;
+ subtitle={
+ this.state.availableVREntryTypes.daydream == VR_DEVICE_AVAILABILITY.maybe ? daydreamMaybeSubtitle : ""
+ }
+ />
+ )}
+ {this.state.availableVREntryTypes.cardboard !== VR_DEVICE_AVAILABILITY.no && (
+ <div className="entry-panel__secondary" onClick={this.enterVR}>
+ <FormattedMessage id="entry.cardboard" />
+ </div>
+ )}
+ { screenSharingCheckbox }
+ </div>
+ ) : null;
- const micPanel = this.state.entryStep === ENTRY_STEPS.mic_grant || this.state.entryStep == ENTRY_STEPS.mic_granted
- ? (
+ const micPanel =
+ 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" }/>
+ <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" }/>
+ <FormattedMessage
+ id={this.state.entryStep == ENTRY_STEPS.mic_grant ? "audio.grant-subtitle" : "audio.granted-subtitle"}
+ />
</div>
<div className="mic-grant-panel__icon">
- { this.state.entryStep == ENTRY_STEPS.mic_grant ?
- (<img onClick={this.onMicGrantButton} src="../assets/images/mic_denied.png" srcSet="../assets/images/mic_denied@2x.png 2x" className="mic-grant-panel__icon"/>) :
- (<img onClick={this.onMicGrantButton} src="../assets/images/mic_granted.png" srcSet="../assets/images/mic_granted@2x.png 2x" className="mic-grant-panel__icon"/>)}
+ {this.state.entryStep == ENTRY_STEPS.mic_grant ? (
+ <img
+ onClick={this.onMicGrantButton}
+ src="../assets/images/mic_denied.png"
+ srcSet="../assets/images/mic_denied@2x.png 2x"
+ className="mic-grant-panel__icon"
+ />
+ ) : (
+ <img
+ onClick={this.onMicGrantButton}
+ src="../assets/images/mic_granted.png"
+ srcSet="../assets/images/mic_granted@2x.png 2x"
+ className="mic-grant-panel__icon"
+ />
+ )}
</div>
<div className="mic-grant-panel__next" onClick={this.onMicGrantButton}>
- <FormattedMessage id={ this.state.entryStep == ENTRY_STEPS.mic_grant ? "audio.grant-next" : "audio.granted-next" }/>
+ <FormattedMessage
+ id={this.state.entryStep == ENTRY_STEPS.mic_grant ? "audio.grant-next" : "audio.granted-next"}
+ />
</div>
</div>
) : null;
const maxLevelHeight = 111;
- const micClip = { clip: `rect(${maxLevelHeight - Math.floor(this.state.micLevel * maxLevelHeight)}px, 111px, 111px, 0px)` };
+ const micClip = {
+ clip: `rect(${maxLevelHeight - Math.floor(this.state.micLevel * maxLevelHeight)}px, 111px, 111px, 0px)`
+ };
const speakerClip = { clip: `rect(${this.state.tonePlaying ? 0 : maxLevelHeight}px, 111px, 111px, 0px)` };
- const audioSetupPanel = this.state.entryStep === ENTRY_STEPS.audio_setup
- ? (
+ const audioSetupPanel =
+ this.state.entryStep === ENTRY_STEPS.audio_setup ? (
<div className="audio-setup-panel">
<div className="audio-setup-panel__title">
- <FormattedMessage id="audio.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" }/>) }
+ {(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__mic">
- <img src="../assets/images/mic_level.png" srcSet="../assets/images/mic_level@2x.png 2x" className="audio-setup-panel__levels__mic_icon"/>
- <img src="../assets/images/level_fill.png" srcSet="../assets/images/level_fill@2x.png 2x" className="audio-setup-panel__levels__level" style={ micClip }/>
+ <img
+ src="../assets/images/mic_level.png"
+ srcSet="../assets/images/mic_level@2x.png 2x"
+ className="audio-setup-panel__levels__mic_icon"
+ />
+ <img
+ src="../assets/images/level_fill.png"
+ srcSet="../assets/images/level_fill@2x.png 2x"
+ className="audio-setup-panel__levels__level"
+ style={micClip}
+ />
</div>
<div className="audio-setup-panel__levels__speaker">
- <img src="../assets/images/speaker_level.png" srcSet="../assets/images/speaker_level@2x.png 2x" className="audio-setup-panel__levels__speaker_icon"/>
- <img src="../assets/images/level_fill.png" srcSet="../assets/images/level_fill@2x.png 2x" className="audio-setup-panel__levels__level" style={ speakerClip }/>
+ <img
+ src="../assets/images/speaker_level.png"
+ srcSet="../assets/images/speaker_level@2x.png 2x"
+ className="audio-setup-panel__levels__speaker_icon"
+ />
+ <img
+ src="../assets/images/level_fill.png"
+ srcSet="../assets/images/level_fill@2x.png 2x"
+ className="audio-setup-panel__levels__level"
+ style={speakerClip}
+ />
</div>
</div>
<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
+ 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>
<div className="audio-setup-panel__device-chooser__mic-icon">
- <img src="../assets/images/mic_small.png" srcSet="../assets/images/mic_small@2x.png 2x"/>
+ <img src="../assets/images/mic_small.png" srcSet="../assets/images/mic_small@2x.png 2x" />
</div>
</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"/>
+ {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"/>
+ <FormattedMessage id="audio.hmd-mic-warning" />
</span>
- </div>) }
+ </div>
+ )}
<div className="audio-setup-panel__enter-button" onClick={this.onAudioReadyButton}>
- <FormattedMessage id="audio.enter-now"/>
+ <FormattedMessage id="audio.enter-now" />
</div>
</div>
) : null;
- const dialogContents = this.isWaitingForAutoExit() ?
- (<AutoExitWarning secondsRemaining={this.state.secondsRemainingBeforeAutoExit} onCancel={this.endAutoExitTimer} />) :
- (
- <div className="entry-dialog">
- <ProfileInfoHeader name={this.props.store.state.profile.display_name} onClick={(() => this.setState({showProfileEntry: true })) }/>
- {entryPanel}
- {micPanel}
- {audioSetupPanel}
- </div>
- );
+ const dialogContents = this.isWaitingForAutoExit() ? (
+ <AutoExitWarning secondsRemaining={this.state.secondsRemainingBeforeAutoExit} onCancel={this.endAutoExitTimer} />
+ ) : (
+ <div className="entry-dialog">
+ <ProfileInfoHeader
+ name={this.props.store.state.profile.display_name}
+ onClick={() => this.setState({ showProfileEntry: true })}
+ />
+ {entryPanel}
+ {micPanel}
+ {audioSetupPanel}
+ </div>
+ );
- const dialogClassNames = classNames({
- 'ui-dialog': true,
- 'ui-dialog--darkened': this.state.entryStep !== ENTRY_STEPS.finished
+ const dialogClassNames = classNames("ui-dialog", {
+ "ui-dialog--darkened": this.state.entryStep !== ENTRY_STEPS.finished
});
- const dialogBoxClassNames = classNames({ 'ui-dialog-box': true });
+ const dialogBoxClassNames = classNames("ui-interactive", "ui-dialog-box");
const dialogBoxContentsClassNames = classNames({
- 'ui-dialog-box-contents': true,
- 'ui-dialog-box-contents--backgrounded': this.state.showProfileEntry
+ "ui-dialog-box-contents": true,
+ "ui-dialog-box-contents--backgrounded": this.state.showProfileEntry
});
return (
<IntlProvider locale={lang} messages={messages}>
- <div className={dialogClassNames}>
- {
- (this.state.entryStep !== ENTRY_STEPS.finished || this.isWaitingForAutoExit()) &&
- (
+ <div className="ui">
+ <div className={dialogClassNames}>
+ {(this.state.entryStep !== ENTRY_STEPS.finished || this.isWaitingForAutoExit()) && (
<div className={dialogBoxClassNames}>
- <div className={dialogBoxContentsClassNames}>
- {dialogContents}
- </div>
+ <div className={dialogBoxContentsClassNames}>{dialogContents}</div>
{this.state.showProfileEntry && (
- <ProfileEntryPanel finished={this.onProfileFinished} store={this.props.store}/>)}
+ <ProfileEntryPanel finished={this.onProfileFinished} store={this.props.store} />
+ )}
</div>
- )
- }
+ )}
+ </div>
+ {this.state.entryStep === ENTRY_STEPS.finished ? (
+ <TwoDHUD
+ name={this.props.store.state.profile.display_name}
+ muted={this.state.muted}
+ onToggleMute={this.toggleMute}
+ />
+ ) : null}
</div>
</IntlProvider>
);
diff --git a/src/room.html b/src/room.html
index c5262d318c69d8d3c38c1abddfc44ebfcff5bf3d..5f63358aa5e17651ee03d9978f098035e533b164 100644
--- a/src/room.html
+++ b/src/room.html
@@ -19,10 +19,15 @@
<a-scene
physics
mute-mic="eventSrc: a-scene; toggleEvents: action_mute"
- 2d-mute-state-indicator
- light="defaultLightsEnabled: false">
+
+ app-mode-input-mappings="modes: default, hud; actionSets: default, hud;"
+ >
<a-assets>
+ <img id="unmuted" src="./assets/hud/unmuted.png" >
+ <img id="muted" src="./assets/hud/muted.png" >
+ <img id="avatar" src="./assets/hud/avatar.jpg" >
+
<a-progressive-asset
id="botdefault"
response-type="arraybuffer"
@@ -100,7 +105,7 @@
<!-- Templates -->
<template id="video-template">
- <a-entity class="video" geometry="primitive: plane;" material="side: double" networked-video-player></a-entity>
+ <a-entity class="video" geometry="primitive: plane;" material="side: double; shader: flat;" networked-video-player></a-entity>
</template>
<template id="remote-avatar-template">
@@ -194,6 +199,8 @@
radius=0.02
static-body="shape: sphere;"
mixin="super-hands"
+ segments-height="9"
+ segments-width="9"
></a-sphere>
</a-entity>
@@ -205,8 +212,25 @@
wasd-to-analog2d
character-controller="pivot: #player-camera"
ik-root
+ app-mode-toggle-playing__character-controller="mode: hud; invert: true;"
+ app-mode-toggle-playing__wasd-to-analog2d="mode: hud; invert: true;"
player-info
>
+
+ <a-entity
+ id="player-hud"
+ 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="-39 0 0">
+ <a-box geometry="height:0.13;width:0.6;depth:0.001" material="depthTest:false; color:#000000;opacity:0.35" class="hud bg"></a-box>
+ <a-image src="#unmuted" scale="-0.1 0.1 0.1" position="-0.2 0 0.001" class="hud mic" material="alphaTest:0.1;depthTest:false;"></a-image>
+ <a-text scale="0.3 0.3 0.3" position="0 0 0.001" class="hud username" text="width:6;alphaTest:0.1;align:center;"></a-text>
+ <a-image src="#avatar" scale="0.1 0.1 0.1" position="0.2 0 0.001" class="hud avatar" material="depthTest:false;"></a-image>
+ </a-entity>
+ </a-entity>
+
<a-entity
id="player-camera"
class="camera"
@@ -222,9 +246,12 @@
hand-controls2="left"
tracked-controls
teleport-controls="cameraRig: #player-rig; teleportOrigin: #player-camera; button: action_teleport_"
+ app-mode-toggle-playing__teleport-controls="mode: hud; invert: true;"
haptic-feedback
></a-entity>
+
+
<a-entity
id="player-right-controller"
class="right-controller"
@@ -232,6 +259,13 @@
tracked-controls
teleport-controls="cameraRig: #player-rig; teleportOrigin: #player-camera; button: action_teleport_"
haptic-feedback
+ raycaster="objects:.hud; showLine: true;"
+ cursor="fuse: false; downEvents: action_ui_select_down; upEvents: action_ui_select_up;"
+
+ app-mode-toggle-playing__teleport-controls="mode: hud; invert: true;"
+ app-mode-toggle-playing__raycaster="mode: hud;"
+ app-mode-toggle-playing__cursor="mode: hud;"
+ app-mode-toggle-attribute__line="mode: hud; property: visible;"
></a-entity>
<a-gltf-entity class="model" inflate="true">
@@ -359,7 +393,7 @@
></a-plane>
</a-scene>
- <div id="ui-root" class="ui"></div>
+ <div id="ui-root"></div>
</body>
</html>
diff --git a/src/room.js b/src/room.js
index 1aab59b5e58407d0d3d3e0f4e4553f144c72b0f8..6793385903a90d285ba45f7d00f164e9f21061fc 100644
--- a/src/room.js
+++ b/src/room.js
@@ -23,7 +23,7 @@ import "./components/wasd-to-analog2d"; //Might be a behaviour or activator in t
import "./components/mute-mic";
import "./components/audio-feedback";
import "./components/bone-mute-state-indicator";
-import "./components/2d-mute-state-indicator";
+import "./components/in-world-hud";
import "./components/virtual-gamepad-controls";
import "./components/ik-controller";
import "./components/hand-controls2";
@@ -47,6 +47,9 @@ import React from "react";
import UIRoot from "./react-components/ui-root";
import "./systems/personal-space-bubble";
+import "./systems/app-mode";
+
+import "./elements/a-gltf-entity";
import "./gltf-component-mappings";
@@ -83,6 +86,12 @@ import { generateDefaultProfile } from "./utils/identity.js";
import { getAvailableVREntryTypes } from "./utils/vr-caps-detect.js";
import ConcurrentLoadDetector from "./utils/concurrent-load-detector.js";
+function qsTruthy(param) {
+ const val = qs[param];
+ // if the param exists but is not set (e.g. "?foo&bar"), its value is null.
+ return val === null || /1|on|true/i.test(val);
+}
+
registerTelemetry();
AFRAME.registerInputBehaviour("vive_trackpad_dpad4", vive_trackpad_dpad4);
@@ -98,43 +107,18 @@ concurrentLoadDetector.start();
// Always layer in any new default profile bits
store.update({ profile: { ...generateDefaultProfile(), ...(store.state.profile || {}) } });
-async function shareMedia(audio, video) {
- const constraints = {
- audio: !!audio,
- video: video ? { mediaSource: "screen", height: 720, frameRate: 30 } : false
- };
- const mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
- NAF.connection.adapter.setLocalMediaStream(mediaStream);
-
- const id = `${NAF.clientId}-screen`;
- let entity = document.getElementById(id);
- if (entity) {
- entity.setAttribute("visible", !!video);
- } else if (video) {
- const sceneEl = document.querySelector("a-scene");
- entity = document.createElement("a-entity");
- entity.id = id;
- entity.setAttribute("offset-relative-to", {
- target: "#player-camera",
- offset: "0 0 -2",
- on: "action_share_screen"
- });
- entity.setAttribute("networked", { template: "#video-template" });
- sceneEl.appendChild(entity);
- }
-}
-
async function exitScene() {
const scene = document.querySelector("a-scene");
scene.renderer.animate(null); // Stop animation loop, TODO A-Frame should do this
document.body.removeChild(scene);
}
-function applyProfile(playerRig) {
+function applyProfileFromStore(playerRig) {
playerRig.setAttribute("player-info", {
displayName: store.state.profile.display_name,
avatar: '#' + (store.state.profile.avatar || "botdefault")
});
+ document.querySelector("a-scene").emit("username-changed", { username: displayName });
}
async function enterScene(mediaStream, enterInVR) {
@@ -154,37 +138,51 @@ async function enterScene(mediaStream, enterInVR) {
audio: true,
debug: true,
connectOnLoad: false,
- room: qs.room && !isNaN(parseInt(qs.room)) ? parseInt(qs.room) : 1,
+ room: qs.room && !isNaN(parseInt(qs.room, 10)) ? parseInt(qs.room, 10) : 1,
serverURL: process.env.JANUS_SERVER
});
- if (!qs.stats || !/off|false|0/.test(qs.stats)) {
+ if (!qsTruthy("no_stats")) {
scene.setAttribute("stats", true);
}
- if (isMobile || qs.mobile) {
+ if (isMobile || qsTruthy(qs.mobile)) {
playerRig.setAttribute("virtual-gamepad-controls", {});
}
- const applyProfileOnPlayerRig = applyProfile.bind(null, playerRig);
+ const applyProfileOnPlayerRig = applyProfileFromStore.bind(null, playerRig);
applyProfileOnPlayerRig();
store.addEventListener("statechanged", applyProfileOnPlayerRig);
- const avatarScale = parseInt(qs.avatarScale, 10);
+ const avatarScale = parseInt(qs.avatar_scale, 10);
if (avatarScale) {
playerRig.setAttribute("scale", { x: avatarScale, y: avatarScale, z: avatarScale });
}
- let sharingScreen = false;
+ const videoTracks = mediaStream.getVideoTracks();
+ let sharingScreen = videoTracks.length > 0;
+
+ const screenEntityId = `${NAF.clientId}-screen`;
+ let screenEntity = document.getElementById(screenEntityId);
- // TODO remove
scene.addEventListener("action_share_screen", () => {
sharingScreen = !sharingScreen;
- shareMedia(true, sharingScreen);
+ if (sharingScreen) {
+ for (const track of videoTracks) {
+ mediaStream.addTrack(track);
+ }
+ }
+ else {
+ for (const track of mediaStream.getVideoTracks()) {
+ mediaStream.removeTrack(track);
+ }
+ }
+ NAF.connection.adapter.setLocalMediaStream(mediaStream);
+ screenEntity.setAttribute("visible", sharingScreen);
});
- if (qs.offline) {
+ if (qsTruthy("offline")) {
onConnect();
} else {
document.body.addEventListener("connected", onConnect);
@@ -194,23 +192,19 @@ async function enterScene(mediaStream, enterInVR) {
if (mediaStream) {
NAF.connection.adapter.setLocalMediaStream(mediaStream);
- const hasVideo = !!(mediaStream.getVideoTracks().length > 0);
-
- const id = `${NAF.clientId}-screen`;
- let entity = document.getElementById(id);
- if (entity) {
- entity.setAttribute("visible", hasVideo);
- } else if (hasVideo) {
+ if (screenEntity) {
+ screenEntity.setAttribute("visible", sharingScreen);
+ } else if (sharingScreen) {
const sceneEl = document.querySelector("a-scene");
- entity = document.createElement("a-entity");
- entity.id = id;
- entity.setAttribute("offset-relative-to", {
- target: "#head",
+ screenEntity = document.createElement("a-entity");
+ screenEntity.id = screenEntityId;
+ screenEntity.setAttribute("offset-relative-to", {
+ target: "#player-camera",
offset: "0 0 -2",
on: "action_share_screen"
});
- entity.setAttribute("networked", { template: "#video-template" });
- sceneEl.appendChild(entity);
+ screenEntity.setAttribute("networked", { template: "#video-template" });
+ sceneEl.appendChild(screenEntity);
}
}
}
@@ -220,12 +214,9 @@ function onConnect() {}
function mountUI(scene) {
const qs = queryString.parse(location.search);
- const disableAutoExitOnConcurrentLoad = qs.allow_multi === "true";
- let forcedVREntryType = null;
-
- if (qs.vr_entry_type) {
- forcedVREntryType = qs.vr_entry_type;
- }
+ const disableAutoExitOnConcurrentLoad = qsTruthy("allow_multi");
+ const forcedVREntryType = qs.vr_entry_type || null;
+ const enableScreenSharing = qsTruthy("enable_screen_sharing");
const uiRoot = ReactDOM.render(
<UIRoot
@@ -236,6 +227,7 @@ function mountUI(scene) {
concurrentLoadDetector,
disableAutoExitOnConcurrentLoad,
forcedVREntryType,
+ enableScreenSharing,
store
}}
/>,
diff --git a/src/systems/app-mode.js b/src/systems/app-mode.js
new file mode 100644
index 0000000000000000000000000000000000000000..421bf48abbab344b877f9805803a7dfe30472336
--- /dev/null
+++ b/src/systems/app-mode.js
@@ -0,0 +1,226 @@
+/* global AFRAME, console, setTimeout, clearTimeout */
+
+const AppModes = Object.freeze({ DEFAULT: "default", HUD: "hud" });
+
+/**
+ * Simple system for keeping track of a modal app state
+ */
+AFRAME.registerSystem("app-mode", {
+ init() {
+ this.setMode(AppModes.DEFAULT);
+ },
+
+ setMode(newMode) {
+ if (Object.values(AppModes).includes(newMode) && newMode !== this.mode) {
+ this.mode = newMode;
+ this.el.emit("app-mode-change", { mode: this.mode });
+ }
+ }
+});
+
+/**
+ * Toggle the isPlaying state of a component based on app mode
+ */
+AFRAME.registerComponent("app-mode-toggle-playing", {
+ multiple: true,
+ schema: {
+ mode: { type: "string" },
+ invert: { type: "boolean", default: false }
+ },
+
+ init() {
+ const AppModeSystem = this.el.sceneEl.systems["app-mode"];
+ this.el.sceneEl.addEventListener("app-mode-change", e => {
+ this.updateComponentState(e.detail.mode === this.data.mode);
+ });
+ this.updateComponentState(AppModeSystem.mode === this.data.mode);
+ },
+
+ updateComponentState(isModeActive) {
+ const componentName = this.id;
+ this.el.components[componentName][isModeActive !== this.data.invert ? "play" : "pause"]();
+ }
+});
+
+/**
+ * Toggle a boolean property of a component based on app mode
+ */
+AFRAME.registerComponent("app-mode-toggle-attribute", {
+ multiple: true,
+ schema: {
+ mode: { type: "string" },
+ invert: { type: "boolean", default: false },
+ property: { type: "string" }
+ },
+
+ init() {
+ const AppModeSystem = this.el.sceneEl.systems["app-mode"];
+ this.el.sceneEl.addEventListener("app-mode-change", e => {
+ this.updateComponentState(e.detail.mode === this.data.mode);
+ });
+ this.updateComponentState(AppModeSystem.mode === this.data.mode);
+ },
+
+ updateComponentState(isModeActive) {
+ const componentName = this.id;
+ this.el.setAttribute(componentName, this.data.property, isModeActive !== this.data.invert);
+ }
+});
+
+/**
+ * Toggle aframe input mappings action set based on app mode
+ */
+AFRAME.registerComponent("app-mode-input-mappings", {
+ schema: {
+ modes: { default: [] },
+ actionSets: { default: [] }
+ },
+ init() {
+ this.el.sceneEl.addEventListener("app-mode-change", e => {
+ const { modes, actionSets } = this.data;
+ const idx = modes.indexOf(e.detail.mode);
+ if (idx != -1 && modes[idx] && actionSets[idx] && AFRAME.inputActions[actionSets[idx]]) {
+ // TODO: this assumes full control over current action set reguardless of what else might be manipulating it, this is obviously wrong
+ AFRAME.currentInputMapping = actionSets[idx];
+ } else {
+ console.error(`no valid action set for ${e.detail.mode}`);
+ }
+ });
+ }
+});
+
+const TWOPI = Math.PI * 2;
+function deltaAngle(a, b) {
+ const p = Math.abs(b - a) % TWOPI;
+ return p > Math.PI ? TWOPI - p : p;
+}
+
+/**
+ * Positions the HUD and toggles app mode based on where the user is looking
+ */
+AFRAME.registerComponent("hud-controller", {
+ schema: {
+ head: { type: "selector" },
+ offset: { default: 1 }, // distance from hud below head,
+ lookCutoff: { default: -25 }, // angle at which the hud should be "on",
+ animRange: { default: 30 }, // degrees over which to animate the hud into view
+ yawCutoff: { default: 100 } // yaw degrees at wich the hud should reoirent even if the user is looking down
+ },
+ init() {
+ this.isYLocked = false;
+ this.lockedHeadPositionY = 0;
+ },
+
+ pause() {
+ // TODO: this assumes full control over current app mode reguardless of what else might be manipulating it, this is obviously wrong
+ const AppModeSystem = this.el.sceneEl.systems["app-mode"];
+ AppModeSystem.setMode(AppModes.DEFAULT);
+ },
+
+ tick() {
+ const hud = this.el.object3D;
+ const head = this.data.head.object3D;
+ const sceneEl = this.el.sceneEl;
+
+ const { offset, lookCutoff, animRange, yawCutoff } = this.data;
+
+ const pitch = head.rotation.x * THREE.Math.RAD2DEG;
+ const yawDif = deltaAngle(head.rotation.y, hud.rotation.y) * THREE.Math.RAD2DEG;
+
+ // Reorient the hud only if the user is looking "up", for right now this arbitrarily means the hud is 1/3 way animated away
+ // TODO: come up with better huristics for this that maybe account for the user turning away from the hud "too far", also animate the position so that it doesnt just snap.
+ if (yawDif >= yawCutoff || pitch > lookCutoff + animRange / 3) {
+ const lookDir = new THREE.Vector3(0, 0, -1);
+ lookDir.applyQuaternion(head.quaternion);
+ lookDir.add(head.position);
+ hud.position.x = lookDir.x;
+ hud.position.z = lookDir.z;
+ hud.setRotationFromEuler(new THREE.Euler(0, head.rotation.y, 0));
+ }
+
+ //animate the hud into place over animRange degrees as the user aproaches the lookCutoff angle
+ const t = 1 - THREE.Math.clamp(pitch - lookCutoff, 0, animRange) / animRange;
+
+ // Lock the hud in place relative to a known head position so it doesn't bob up and down
+ // with the user's head
+ if (!this.isYLocked && t === 1) {
+ this.lockedHeadPositionY = head.position.y;
+ }
+ const EPSILON = 0.001;
+ this.isYLocked = t > 1 - EPSILON;
+
+ hud.position.y = (this.isYLocked ? this.lockedHeadPositionY : head.position.y) - offset - offset * (1 - t);
+ hud.rotation.x = (1 - t) * THREE.Math.DEG2RAD * 90;
+
+ // update the app mode when the HUD locks on or off
+ // TODO: this assumes full control over current app mode reguardless of what else might be manipulating it, this is obviously wrong
+ const AppModeSystem = sceneEl.systems["app-mode"];
+ if (pitch < lookCutoff && AppModeSystem.mode !== AppModes.HUD) {
+ AppModeSystem.setMode(AppModes.HUD);
+ sceneEl.renderer.sortObjects = true;
+ } else if (pitch > lookCutoff && AppModeSystem.mode === AppModes.HUD) {
+ AppModeSystem.setMode(AppModes.DEFAULT);
+ sceneEl.renderer.sortObjects = false;
+ }
+ }
+});
+
+/**
+ * Toggle visibility of an entity based on if the user is in vr mode or not
+ */
+AFRAME.registerComponent("vr-mode-toggle-visibility", {
+ schema: {
+ invert: { type: "boolean", default: false }
+ },
+
+ init() {
+ this.updateComponentState = this.updateComponentState.bind(this);
+ },
+
+ play() {
+ this.updateComponentState();
+ this.el.sceneEl.addEventListener("enter-vr", this.updateComponentState);
+ this.el.sceneEl.addEventListener("exit-vr", this.updateComponentState);
+ },
+
+ pause() {
+ this.el.sceneEl.removeEventListener("enter-vr", this.updateComponentState);
+ this.el.sceneEl.removeEventListener("exit-vr", this.updateComponentState);
+ },
+
+ updateComponentState(i) {
+ const inVRMode = this.el.sceneEl.is("vr-mode");
+ this.el.setAttribute("visible", inVRMode !== this.data.invert);
+ }
+});
+
+/**
+ * Toggle the isPlaying state of a component based on app mode
+ */
+AFRAME.registerComponent("vr-mode-toggle-playing", {
+ multiple: true,
+ schema: {
+ invert: { type: "boolean", default: false }
+ },
+
+ init() {
+ this.updateComponentState = this.updateComponentState.bind(this);
+ },
+
+ play() {
+ this.updateComponentState();
+ this.el.sceneEl.addEventListener("enter-vr", this.updateComponentState);
+ this.el.sceneEl.addEventListener("exit-vr", this.updateComponentState);
+ },
+
+ pause() {
+ this.el.sceneEl.removeEventListener("enter-vr", this.updateComponentState);
+ this.el.sceneEl.removeEventListener("exit-vr", this.updateComponentState);
+ },
+
+ updateComponentState(i) {
+ const componentName = this.id;
+ const inVRMode = this.el.sceneEl.is("vr-mode");
+ this.el.components[componentName][inVRMode !== this.data.invert ? "play" : "pause"]();
+ }
+});
diff --git a/yarn.lock b/yarn.lock
index 7a0884a0ae0198f5d8f079ca59c2141f478966b8..b2fc3a25d7605205ddad6244206d2076f41149ac 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -169,9 +169,9 @@ aframe-physics-system@^1.4.3:
three-to-cannon "^1.2.0"
webworkify "^1.4.0"
-"aframe-teleport-controls@https://github.com/netpro2k/aframe-teleport-controls#feature/teleport-origin":
- version "0.3.0"
- resolved "https://github.com/netpro2k/aframe-teleport-controls#41fe311d3123503ba44761acce69d0f0634139cc"
+"aframe-teleport-controls@https://github.com/netpro2k/aframe-teleport-controls#feature/pauseable":
+ version "0.3.2"
+ resolved "https://github.com/netpro2k/aframe-teleport-controls#7f67003dd3bd1348357fbf89aaeed916ef2d4016"
"aframe-xr@github:brianpeiris/aframe-xr#3162aed":
version "0.0.9"
@@ -2583,14 +2583,14 @@ dom-walk@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
-domain-browser@^1.1.1, domain-browser@^1.2.0:
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
-
-domain-browser@~1.1.0:
+domain-browser@^1.1.1, domain-browser@~1.1.0:
version "1.1.7"
resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
+domain-browser@^1.2.0:
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
+
domelementtype@1:
version "1.3.0"
resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"