diff --git a/src/AudioContext.js b/src/AudioContext.js
deleted file mode 100644
index 8d1554ff5eb63f27e5c96da5cd3122c96393f63e..0000000000000000000000000000000000000000
--- a/src/AudioContext.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-export const AudioContext = React.createContext({
- onMouseEnter: () => {
- console.log("enter sound not configured");
- },
- onMouseLeave: () => {}
-});
diff --git a/src/hub.html b/src/hub.html
index 0eb0a47548b3ec8b85641a4be2ca9671e1d3c1fc..1134b5cdc6400814a15a9659337495b0d9f0273f 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -448,7 +448,7 @@
scene-sound__hud_action_space_bubble="on: action_space_bubble;"
sound__hud_spawn_pen="src: #sound_asset-spawn_pen; on: nothing; poolSize: 2;"
scene-sound__hud_spawn_pen="on: spawn_pen;"
- sound__hud_mouseover="src: #sound_asset-hud_mouseover; on: nothing; poolSize: 1;"
+ sound__hud_mouseover="src: #sound_asset-hud_mouseover; on: nothing; poolSize: 5;"
scene-sound__hud_mouseover="on: play_sound-hud_mouse_enter;"
sound__hud_mouseout="src: #sound_asset-hud_mouseout; on: nothing; poolSize: 1;"
scene-sound__hud_mouseout="on: play_sound-hud_mouse_leave;"
diff --git a/src/react-components/2d-hud.js b/src/react-components/2d-hud.js
index d40e661c9a63338ae027ff44d004fc906d86147c..62f597fa7859b5c9b4affd6b21ac8c2596fc71ea 100644
--- a/src/react-components/2d-hud.js
+++ b/src/react-components/2d-hud.js
@@ -4,49 +4,37 @@ import cx from "classnames";
import styles from "../assets/stylesheets/2d-hud.scss";
import uiStyles from "../assets/stylesheets/ui-root.scss";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
const TopHUD = ({ muted, frozen, onToggleMute, onToggleFreeze, onSpawnPen, onSpawnCamera }) => (
- <AudioContext.Consumer>
- {audio => (
- <div className={cx(styles.container, styles.top, styles.unselectable)}>
- <div className={cx(uiStyles.uiInteractive, styles.panel, styles.left)}>
- <div
- className={cx(styles.iconButton, styles.mute, { [styles.active]: muted })}
- title={muted ? "Unmute Mic" : "Mute Mic"}
- onClick={onToggleMute}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- />
- </div>
+ <div className={cx(styles.container, styles.top, styles.unselectable)}>
+ <div className={cx(uiStyles.uiInteractive, styles.panel, styles.left)}>
+ <WithHoverSound>
<div
- className={cx(uiStyles.uiInteractive, styles.iconButton, styles.large, styles.freeze, {
- [styles.active]: frozen
- })}
- title={frozen ? "Resume" : "Pause"}
- onClick={onToggleFreeze}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
+ className={cx(styles.iconButton, styles.mute, { [styles.active]: muted })}
+ title={muted ? "Unmute Mic" : "Mute Mic"}
+ onClick={onToggleMute}
/>
- <div className={cx(uiStyles.uiInteractive, styles.panel, styles.right)}>
- <div
- className={cx(styles.iconButton, styles.spawn_pen)}
- title={"Drawing Pen"}
- onClick={onSpawnPen}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- />
- <div
- className={cx(styles.iconButton, styles.spawn_camera)}
- title={"Camera"}
- onClick={onSpawnCamera}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- />
- </div>
- </div>
- )}
- </AudioContext.Consumer>
+ </WithHoverSound>
+ </div>
+ <WithHoverSound>
+ <div
+ className={cx(uiStyles.uiInteractive, styles.iconButton, styles.large, styles.freeze, {
+ [styles.active]: frozen
+ })}
+ title={frozen ? "Resume" : "Pause"}
+ onClick={onToggleFreeze}
+ />
+ </WithHoverSound>
+ <div className={cx(uiStyles.uiInteractive, styles.panel, styles.right)}>
+ <WithHoverSound>
+ <div className={cx(styles.iconButton, styles.spawn_pen)} title={"Drawing Pen"} onClick={onSpawnPen} />
+ </WithHoverSound>
+ <WithHoverSound>
+ <div className={cx(styles.iconButton, styles.spawn_camera)} title={"Camera"} onClick={onSpawnCamera} />
+ </WithHoverSound>
+ </div>
+ </div>
);
TopHUD.propTypes = {
@@ -59,47 +47,38 @@ TopHUD.propTypes = {
};
const BottomHUD = ({ onCreateObject, showPhotoPicker, onMediaPicked }) => (
- <AudioContext.Consumer>
- {audio => (
- <div className={cx(styles.container, styles.column, styles.bottom, styles.unselectable)}>
- {showPhotoPicker ? (
- <div className={cx(uiStyles.uiInteractive, styles.panel, styles.up)}>
- <input
- id="media-picker-input"
- className={cx(styles.hide)}
- type="file"
- accept="image/*"
- multiple
- onChange={e => {
- for (const file of e.target.files) {
- onMediaPicked(file);
- }
- }}
- />
- <label htmlFor="media-picker-input">
- <div
- className={cx(styles.iconButton, styles.mobileMediaPicker)}
- title={"Pick Media"}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- />
- </label>
- </div>
- ) : (
- <div />
- )}
- <div>
- <div
- className={cx(uiStyles.uiInteractive, styles.iconButton, styles.large, styles.createObject)}
- title={"Create Object"}
- onClick={onCreateObject}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- />
- </div>
+ <div className={cx(styles.container, styles.column, styles.bottom, styles.unselectable)}>
+ {showPhotoPicker ? (
+ <div className={cx(uiStyles.uiInteractive, styles.panel, styles.up)}>
+ <input
+ id="media-picker-input"
+ className={cx(styles.hide)}
+ type="file"
+ accept="image/*"
+ multiple
+ onChange={e => {
+ for (const file of e.target.files) {
+ onMediaPicked(file);
+ }
+ }}
+ />
+ <label htmlFor="media-picker-input">
+ <div className={cx(styles.iconButton, styles.mobileMediaPicker)} title={"Pick Media"} />
+ </label>
</div>
+ ) : (
+ <div />
)}
- </AudioContext.Consumer>
+ <div>
+ <WithHoverSound>
+ <div
+ className={cx(uiStyles.uiInteractive, styles.iconButton, styles.large, styles.createObject)}
+ title={"Create Object"}
+ onClick={onCreateObject}
+ />
+ </WithHoverSound>
+ </div>
+ </div>
);
BottomHUD.propTypes = {
diff --git a/src/react-components/auto-exit-warning.js b/src/react-components/auto-exit-warning.js
index 4f54111ed0290f3e15bc1112c4df5181fd3aef14..ede4d6e5290034768eed7eb1c0707a9d47e4a72b 100644
--- a/src/react-components/auto-exit-warning.js
+++ b/src/react-components/auto-exit-warning.js
@@ -2,31 +2,24 @@ import React from "react";
import { FormattedMessage } from "react-intl";
import PropTypes from "prop-types";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
const AutoExitWarning = props => (
- <AudioContext.Consumer>
- {audio => (
- <div className="autoexit-panel">
- <div className="autoexit-panel__title">
- <FormattedMessage id="autoexit.title" />
- <span>{props.secondsRemaining}</span>
- <FormattedMessage id="autoexit.title_units" />
- </div>
- <div className="autoexit-panel__subtitle">
- <FormattedMessage id="autoexit.subtitle" />
- </div>
- <div
- className="autoexit-panel__cancel-button"
- onClick={props.onCancel}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="autoexit.cancel" />
- </div>
+ <div className="autoexit-panel">
+ <div className="autoexit-panel__title">
+ <FormattedMessage id="autoexit.title" />
+ <span>{props.secondsRemaining}</span>
+ <FormattedMessage id="autoexit.title_units" />
+ </div>
+ <div className="autoexit-panel__subtitle">
+ <FormattedMessage id="autoexit.subtitle" />
+ </div>
+ <WithHoverSound>
+ <div className="autoexit-panel__cancel-button" onClick={props.onCancel}>
+ <FormattedMessage id="autoexit.cancel" />
</div>
- )}
- </AudioContext.Consumer>
+ </WithHoverSound>
+ </div>
);
AutoExitWarning.propTypes = {
diff --git a/src/react-components/avatar-selector.js b/src/react-components/avatar-selector.js
index 314b45d74f95ecb14091c14d2f6d95cfc922ec0a..6ffbe380d160ae375b4171585e7422cd09c8809d 100644
--- a/src/react-components/avatar-selector.js
+++ b/src/react-components/avatar-selector.js
@@ -4,7 +4,7 @@ import { injectIntl } from "react-intl";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons/faAngleLeft";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
class AvatarSelector extends Component {
static propTypes = {
@@ -177,30 +177,16 @@ class AvatarSelector extends Component {
/>
<a-entity hide-when-quality="low" light="type: ambient; color: #FFF" />
</a-scene>
- <AudioContext.Consumer>
- {audio => (
- <button
- className="avatar-selector__previous-button"
- onClick={this.emitChangeToPrevious}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FontAwesomeIcon icon={faAngleLeft} />
- </button>
- )}
- </AudioContext.Consumer>
- <AudioContext.Consumer>
- {audio => (
- <button
- className="avatar-selector__next-button"
- onClick={this.emitChangeToNext}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FontAwesomeIcon icon={faAngleRight} />
- </button>
- )}
- </AudioContext.Consumer>
+ <WithHoverSound>
+ <button className="avatar-selector__previous-button" onClick={this.emitChangeToPrevious}>
+ <FontAwesomeIcon icon={faAngleLeft} />
+ </button>
+ </WithHoverSound>
+ <WithHoverSound>
+ <button className="avatar-selector__next-button" onClick={this.emitChangeToNext}>
+ <FontAwesomeIcon icon={faAngleRight} />
+ </button>
+ </WithHoverSound>
</div>
);
}
diff --git a/src/react-components/create-object-dialog.js b/src/react-components/create-object-dialog.js
index 46b1d95d12ff6bcaa0d7d856cb94516be8b9bc68..c42f0de145bb05c7d490fb9ae7d57e5c124bc87e 100644
--- a/src/react-components/create-object-dialog.js
+++ b/src/react-components/create-object-dialog.js
@@ -7,7 +7,7 @@ import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes";
import styles from "../assets/stylesheets/create-object-dialog.scss";
import cx from "classnames";
import DialogContainer from "./dialog-container.js";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
const attributionHostnames = {
"giphy.com": giphyLogo,
@@ -88,32 +88,18 @@ export default class CreateObjectDialog extends Component {
const { onCreate, onClose, ...other } = this.props; // eslint-disable-line no-unused-vars
const cancelButton = (
- <AudioContext.Consumer>
- {audio => (
- <label
- className={cx(styles.smallButton, styles.cancelIcon)}
- onClick={this.reset}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FontAwesomeIcon icon={faTimes} />
- </label>
- )}
- </AudioContext.Consumer>
+ <WithHoverSound>
+ <label className={cx(styles.smallButton, styles.cancelIcon)} onClick={this.reset}>
+ <FontAwesomeIcon icon={faTimes} />
+ </label>
+ </WithHoverSound>
);
const uploadButton = (
- <AudioContext.Consumer>
- {audio => (
- <label
- htmlFor={fileInputId}
- className={cx(styles.smallButton, styles.uploadIcon)}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FontAwesomeIcon icon={faPaperclip} />
- </label>
- )}
- </AudioContext.Consumer>
+ <WithHoverSound>
+ <label htmlFor={fileInputId} className={cx(styles.smallButton, styles.uploadIcon)}>
+ <FontAwesomeIcon icon={faPaperclip} />
+ </label>
+ </WithHoverSound>
);
const filenameLabel = <label className={cx(styles.leftSideOfInput)}>{this.state.fileName}</label>;
const urlInput = (
@@ -144,17 +130,11 @@ export default class CreateObjectDialog extends Component {
{this.state.url || this.state.fileName ? cancelButton : uploadButton}
</div>
<div className={styles.buttons}>
- <AudioContext.Consumer>
- {audio => (
- <button
- className={styles.actionButton}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <span>Create</span>
- </button>
- )}
- </AudioContext.Consumer>
+ <WithHoverSound>
+ <button className={styles.actionButton}>
+ <span>Create</span>
+ </button>
+ </WithHoverSound>
</div>
{this.state.attributionImage ? (
<div>
diff --git a/src/react-components/create-room-dialog.js b/src/react-components/create-room-dialog.js
index 15e61023ae2cbc13b78640138db39c463936cdcb..b2de60e8da20ed55ad0c4128297fb1a87b0fbcac 100644
--- a/src/react-components/create-room-dialog.js
+++ b/src/react-components/create-room-dialog.js
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import DialogContainer from "./dialog-container.js";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
const HUB_NAME_PATTERN = "^[A-Za-z0-9-'\":!@#$%^&*(),.?~ ]{4,64}$";
@@ -47,17 +47,11 @@ export default class CreateRoomDialog extends Component {
onChange={e => this.setState({ customSceneUrl: e.target.value })}
/>
<div className="custom-scene-form__buttons">
- <AudioContext.Consumer>
- {audio => (
- <button
- className="custom-scene-form__action-button"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <span>create</span>
- </button>
- )}
- </AudioContext.Consumer>
+ <WithHoverSound>
+ <button className="custom-scene-form__action-button">
+ <span>create</span>
+ </button>
+ </WithHoverSound>
</div>
</div>
</form>
diff --git a/src/react-components/dialog-container.js b/src/react-components/dialog-container.js
index f57aa92ccdcf02edd0bf19168e3ef7c64c698edc..a38923e7a71d57b4bb66aa23c855381af362d3ff 100644
--- a/src/react-components/dialog-container.js
+++ b/src/react-components/dialog-container.js
@@ -1,6 +1,6 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
export default class DialogContainer extends Component {
static propTypes = {
@@ -38,29 +38,22 @@ export default class DialogContainer extends Component {
render() {
return (
<div className="dialog-overlay">
- <AudioContext.Consumer>
- {audio => (
- <div className="dialog" onClick={this.onContainerClicked}>
- <div className="dialog__box">
- <div className="dialog__box__contents">
- {this.props.onClose && (
- <button
- className="dialog__box__contents__close"
- onClick={this.props.onClose}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <span>×</span>
- </button>
- )}
- <div className="dialog__box__contents__title">{this.props.title}</div>
- <div className="dialog__box__contents__body">{this.props.children}</div>
- <div className="dialog__box__contents__button-container" />
- </div>
- </div>
+ <div className="dialog" onClick={this.onContainerClicked}>
+ <div className="dialog__box">
+ <div className="dialog__box__contents">
+ {this.props.onClose && (
+ <WithHoverSound>
+ <button className="dialog__box__contents__close" onClick={this.props.onClose}>
+ <span>×</span>
+ </button>
+ </WithHoverSound>
+ )}
+ <div className="dialog__box__contents__title">{this.props.title}</div>
+ <div className="dialog__box__contents__body">{this.props.children}</div>
+ <div className="dialog__box__contents__button-container" />
</div>
- )}
- </AudioContext.Consumer>
+ </div>
+ </div>
</div>
);
}
diff --git a/src/react-components/entry-buttons.js b/src/react-components/entry-buttons.js
index 469572e40dcdedc7429fca48deaa1325475726b5..3b4d034d60693c6a2a99538581cae8499b666a69 100644
--- a/src/react-components/entry-buttons.js
+++ b/src/react-components/entry-buttons.js
@@ -1,7 +1,6 @@
import React from "react";
import { FormattedMessage } from "react-intl";
import PropTypes from "prop-types";
-import { AudioContext } from "../AudioContext";
import MobileScreenEntryImg from "../assets/images/mobile_screen_entry.svg";
import DesktopScreenEntryImg from "../assets/images/desktop_screen_entry.svg";
@@ -10,16 +9,12 @@ import GearVREntryImg from "../assets/images/gearvr_entry.svg";
import DaydreamEntryImg from "../assets/images/daydream_entry.svg";
import DeviceEntryImg from "../assets/images/device_entry.svg";
import styles from "../assets/stylesheets/entry.scss";
+import { WithHoverSound } from "./wrap-with-audio";
-const EntryButton = props => (
- <AudioContext.Consumer>
- {audio => (
- <button
- className={styles.entryButton}
- onClick={props.onClick}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
+const EntryButton = props => {
+ return (
+ <WithHoverSound>
+ <button className={styles.entryButton} onClick={props.onClick}>
<img src={props.iconSrc} className={styles.icon} />
<div className={styles.label}>
<div className={styles.contents}>
@@ -37,9 +32,9 @@ const EntryButton = props => (
</div>
</div>
</button>
- )}
- </AudioContext.Consumer>
-);
+ </WithHoverSound>
+ );
+};
EntryButton.propTypes = {
onClick: PropTypes.func,
diff --git a/src/react-components/help-dialog.js b/src/react-components/help-dialog.js
index ba6da9a9711a3bb944976b011483d898567ac135..a54947d301011dd2d829704c260f2c9083b13964 100644
--- a/src/react-components/help-dialog.js
+++ b/src/react-components/help-dialog.js
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import { FormattedMessage } from "react-intl";
import DialogContainer from "./dialog-container.js";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
export default class HelpDialog extends Component {
render() {
@@ -22,39 +22,27 @@ export default class HelpDialog extends Component {
<p>
The <b>Pause/Resume Toggle</b> pauses all other avatars and lets you block others or remove objects.
</p>
- <AudioContext.Consumer>
- {audio => (
- <p className="dialog__box__contents__links">
- <a
- target="_blank"
- rel="noopener noreferrer"
- href="https://github.com/mozilla/hubs/blob/master/TERMS.md"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="profile.terms_of_use" />
- </a>
- <a
- target="_blank"
- rel="noopener noreferrer"
- href="https://github.com/mozilla/hubs/blob/master/PRIVACY.md"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="profile.privacy_notice" />
- </a>
- <a
- target="_blank"
- rel="noopener noreferrer"
- href="/?report"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="help.report_issue" />
- </a>
- </p>
- )}
- </AudioContext.Consumer>
+ <p className="dialog__box__contents__links">
+ <WithHoverSound>
+ <a target="_blank" rel="noopener noreferrer" href="https://github.com/mozilla/hubs/blob/master/TERMS.md">
+ <FormattedMessage id="profile.terms_of_use" />
+ </a>
+ </WithHoverSound>
+ <WithHoverSound>
+ <a
+ target="_blank"
+ rel="noopener noreferrer"
+ href="https://github.com/mozilla/hubs/blob/master/PRIVACY.md"
+ >
+ <FormattedMessage id="profile.privacy_notice" />
+ </a>
+ </WithHoverSound>
+ <WithHoverSound>
+ <a target="_blank" rel="noopener noreferrer" href="/?report">
+ <FormattedMessage id="help.report_issue" />
+ </a>
+ </WithHoverSound>
+ </p>
</div>
</DialogContainer>
);
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index 49ccd30da1da604e2aac5cb1298271275cefc009..86d7217a7f22f2df0791c848b5c95c11d62e7bad 100644
--- a/src/react-components/home-root.js
+++ b/src/react-components/home-root.js
@@ -20,7 +20,7 @@ import ReportDialog from "./report-dialog.js";
import SlackDialog from "./slack-dialog.js";
import UpdatesDialog from "./updates-dialog.js";
import DialogContainer from "./dialog-container.js";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
addLocaleData([...en]);
@@ -181,146 +181,141 @@ class HomeRoot extends Component {
});
return (
- <AudioContext.Consumer>
- {audio => (
- <IntlProvider locale={lang} messages={messages}>
- <div className={styles.home}>
- <div className={mainContentClassNames}>
- <div className={styles.headerContent}>
- <div className={styles.titleAndNav} onClick={() => (document.location = "/")}>
- <div className={styles.hubs} onMouseEnter={audio.onMouseEnter} onMouseLeave={audio.onMouseLeave}>
- hubs
- </div>
- <div className={styles.preview} onMouseEnter={audio.onMouseEnter} onMouseLeave={audio.onMouseLeave}>
- preview
- </div>
- <div className={styles.links}>
- <a
- href="https://blog.mozvr.com/introducing-hubs-a-new-way-to-get-together-online/"
- rel="noreferrer noopener"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="home.about_link" />
- </a>
- <a
- href="https://github.com/mozilla/hubs"
- rel="noreferrer noopener"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="home.source_link" />
- </a>
- </div>
- </div>
- <div className={styles.ident} />
- </div>
- <div className={styles.heroContent}>
- <div className={styles.attribution}>
- Medieval Fantasy Book by{" "}
+ <IntlProvider locale={lang} messages={messages}>
+ <div className={styles.home}>
+ <div className={mainContentClassNames}>
+ <div className={styles.headerContent}>
+ <div className={styles.titleAndNav} onClick={() => (document.location = "/")}>
+ <WithHoverSound>
+ <div className={styles.hubs}>hubs</div>
+ </WithHoverSound>
+ <WithHoverSound>
+ <div className={styles.preview}>preview</div>
+ </WithHoverSound>
+ <div className={styles.links}>
+ <WithHoverSound>
<a
- target="_blank"
+ href="https://blog.mozvr.com/introducing-hubs-a-new-way-to-get-together-online/"
rel="noreferrer noopener"
- href="https://sketchfab.com/models/06d5a80a04fc4c5ab552759e9a97d91a?utm_campaign=06d5a80a04fc4c5ab552759e9a97d91a&utm_medium=embed&utm_source=oembed"
>
- Pixel
+ <FormattedMessage id="home.about_link" />
</a>
- </div>
- <div className={styles.container}>
- <img className={styles.logo} src={hubLogo} />
- <div className={styles.title}>
- <FormattedMessage id="home.hero_title" />
+ </WithHoverSound>
+ <WithHoverSound>
+ <a href="https://github.com/mozilla/hubs" rel="noreferrer noopener">
+ <FormattedMessage id="home.source_link" />
+ </a>
+ </WithHoverSound>
+ </div>
+ </div>
+ <div className={styles.ident} />
+ </div>
+ <div className={styles.heroContent}>
+ <div className={styles.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={styles.container}>
+ <img className={styles.logo} src={hubLogo} />
+ <div className={styles.title}>
+ <FormattedMessage id="home.hero_title" />
+ </div>
+ {this.state.environments.length === 0 && (
+ <div className="loader-wrap">
+ <div className="loader">
+ <div className="loader-center" />
</div>
- {this.state.environments.length === 0 && (
- <div className="loader-wrap">
- <div className="loader">
- <div className="loader-center" />
- </div>
- </div>
- )}
</div>
- <div className={styles.create}>
- <HubCreatePanel
- initialEnvironment={this.props.initialEnvironment}
- environments={this.state.environments}
- />
- </div>
- {this.state.environments.length > 1 && (
- <div className={styles.joinButton}>
- <a href="/link" onMouseEnter={audio.onMouseEnter} onMouseLeave={audio.onMouseLeave}>
- <FormattedMessage id="home.join_room" />
- </a>
- </div>
- )}
+ )}
+ </div>
+ <div className={styles.create}>
+ <HubCreatePanel
+ initialEnvironment={this.props.initialEnvironment}
+ environments={this.state.environments}
+ />
+ </div>
+ {this.state.environments.length > 1 && (
+ <div className={styles.joinButton}>
+ <WithHoverSound>
+ <a href="/link">
+ <FormattedMessage id="home.join_room" />
+ </a>
+ </WithHoverSound>
</div>
- <div className={styles.footerContent}>
- <div className={styles.links}>
- <div className={styles.top}>
- <a
- className={styles.link}
- rel="noopener noreferrer"
- href="#"
- onClick={this.onDialogLinkClicked(this.showSlackDialog.bind(this))}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="home.join_us" />
- </a>
- <a
- className={styles.link}
- rel="noopener noreferrer"
- href="#"
- onClick={this.onDialogLinkClicked(this.showUpdatesDialog.bind(this))}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="home.get_updates" />
- </a>
- <a
- className={styles.link}
- rel="noopener noreferrer"
- href="#"
- onClick={this.onDialogLinkClicked(this.showReportDialog.bind(this))}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="home.report_issue" />
- </a>
- <a
- className={styles.link}
- target="_blank"
- rel="noopener noreferrer"
- href="https://github.com/mozilla/hubs/blob/master/TERMS.md"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="home.terms_of_use" />
- </a>
- <a
- className={styles.link}
- target="_blank"
- rel="noopener noreferrer"
- href="https://github.com/mozilla/hubs/blob/master/PRIVACY.md"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="home.privacy_notice" />
- </a>
+ )}
+ </div>
+ <div className={styles.footerContent}>
+ <div className={styles.links}>
+ <div className={styles.top}>
+ <WithHoverSound>
+ <a
+ className={styles.link}
+ rel="noopener noreferrer"
+ href="#"
+ onClick={this.onDialogLinkClicked(this.showSlackDialog.bind(this))}
+ >
+ <FormattedMessage id="home.join_us" />
+ </a>
+ </WithHoverSound>
+ <WithHoverSound>
+ <a
+ className={styles.link}
+ rel="noopener noreferrer"
+ href="#"
+ onClick={this.onDialogLinkClicked(this.showUpdatesDialog.bind(this))}
+ >
+ <FormattedMessage id="home.get_updates" />
+ </a>
+ </WithHoverSound>
+ <WithHoverSound>
+ <a
+ className={styles.link}
+ rel="noopener noreferrer"
+ href="#"
+ onClick={this.onDialogLinkClicked(this.showReportDialog.bind(this))}
+ >
+ <FormattedMessage id="home.report_issue" />
+ </a>
+ </WithHoverSound>
+ <WithHoverSound>
+ <a
+ className={styles.link}
+ target="_blank"
+ rel="noopener noreferrer"
+ href="https://github.com/mozilla/hubs/blob/master/TERMS.md"
+ >
+ <FormattedMessage id="home.terms_of_use" />
+ </a>
+ </WithHoverSound>
+ <WithHoverSound>
+ <a
+ className={styles.link}
+ target="_blank"
+ rel="noopener noreferrer"
+ href="https://github.com/mozilla/hubs/blob/master/PRIVACY.md"
+ >
+ <FormattedMessage id="home.privacy_notice" />
+ </a>
+ </WithHoverSound>
- <img className={styles.mozLogo} src={mozLogo} />
- </div>
- </div>
+ <img className={styles.mozLogo} src={mozLogo} />
</div>
</div>
- <video playsInline muted loop autoPlay className={styles.backgroundVideo} id="background-video">
- <source src={homeVideoWebM} type="video/webm" />
- <source src={homeVideoMp4} type="video/mp4" />
- </video>
- {this.state.dialog}
</div>
- </IntlProvider>
- )}
- </AudioContext.Consumer>
+ </div>
+ <video playsInline muted loop autoPlay className={styles.backgroundVideo} id="background-video">
+ <source src={homeVideoWebM} type="video/webm" />
+ <source src={homeVideoMp4} type="video/mp4" />
+ </video>
+ {this.state.dialog}
+ </div>
+ </IntlProvider>
);
}
}
diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js
index 4df0fa184e0aa781ef06e4dbcf24031b3de6d7f0..fc37100d81e9128300a7cced60d3479eeaa03601 100644
--- a/src/react-components/hub-create-panel.js
+++ b/src/react-components/hub-create-panel.js
@@ -8,7 +8,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { resolveURL, extractUrlBase } from "../utils/resolveURL";
import { getReticulumFetchUrl } from "../utils/phoenix-utils";
import CreateRoomDialog from "./create-room-dialog.js";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
import default_scene_preview_thumbnail from "../assets/images/default_thumbnail.png";
import styles from "../assets/stylesheets/hub-create.scss";
@@ -174,118 +174,95 @@ class HubCreatePanel extends Component {
const environmentThumbnail = this._getEnvironmentThumbnail(this.state.environmentIndex);
return (
- <AudioContext.Consumer>
- {audio => (
- <div>
- <form onSubmit={this.createHub}>
- <div className={styles.createPanel}>
- <div className={styles.form}>
- <div className={styles.environment}>
- <div className={styles.picker}>
- <img className={styles.image} srcSet={environmentThumbnail.srcset} />
- <div className={styles.labels}>
- <div className={styles.header}>
- <span className={styles.title}>{environmentTitle}</span>
- {environmentAuthor &&
- environmentAuthor.name &&
- (environmentAuthor.url ? (
- <a
- href={environmentAuthor.url}
- rel="noopener noreferrer"
- className={styles.author}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="home.environment_author_by" />
- <span>{environmentAuthor.name}</span>
- </a>
- ) : (
- <span className={styles.author}>
- <FormattedMessage id="home.environment_author_by" />
- <span>{environmentAuthor.name}</span>
- </span>
- ))}
- {environmentAuthor &&
- environmentAuthor.organization &&
- (environmentAuthor.organization.url ? (
- <a
- href={environmentAuthor.organization.url}
- rel="noopener noreferrer"
- className={styles.org}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <span>{environmentAuthor.organization.name}</span>
- </a>
- ) : (
- <span className={styles.org}>
- <span>{environmentAuthor.organization.name}</span>
- </span>
- ))}
- </div>
- <div className={styles.footer}>
- <button
- onClick={this.showCustomSceneDialog}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- className={styles.customButton}
- >
- <FormattedMessage id="home.room_create_options" />
- </button>
- </div>
- </div>
- <div className={styles.controls}>
- <button
- className={styles.prev}
- type="button"
- tabIndex="1"
- onClick={this.setToPreviousEnvironment}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FontAwesomeIcon icon={faAngleLeft} />
- </button>
-
- <button
- className={styles.next}
- type="button"
- tabIndex="2"
- onClick={this.setToNextEnvironment}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FontAwesomeIcon icon={faAngleRight} />
+ <div>
+ <form onSubmit={this.createHub}>
+ <div className={styles.createPanel}>
+ <div className={styles.form}>
+ <div className={styles.environment}>
+ <div className={styles.picker}>
+ <img className={styles.image} srcSet={environmentThumbnail.srcset} />
+ <div className={styles.labels}>
+ <div className={styles.header}>
+ <span className={styles.title}>{environmentTitle}</span>
+ {environmentAuthor &&
+ environmentAuthor.name &&
+ (environmentAuthor.url ? (
+ <WithHoverSound>
+ <a href={environmentAuthor.url} rel="noopener noreferrer" className={styles.author}>
+ <FormattedMessage id="home.environment_author_by" />
+ <span>{environmentAuthor.name}</span>
+ </a>
+ </WithHoverSound>
+ ) : (
+ <span className={styles.author}>
+ <FormattedMessage id="home.environment_author_by" />
+ <span>{environmentAuthor.name}</span>
+ </span>
+ ))}
+ {environmentAuthor &&
+ environmentAuthor.organization &&
+ (environmentAuthor.organization.url ? (
+ <WithHoverSound>
+ <a
+ href={environmentAuthor.organization.url}
+ rel="noopener noreferrer"
+ className={styles.org}
+ >
+ <span>{environmentAuthor.organization.name}</span>
+ </a>
+ </WithHoverSound>
+ ) : (
+ <span className={styles.org}>
+ <span>{environmentAuthor.organization.name}</span>
+ </span>
+ ))}
+ </div>
+ <div className={styles.footer}>
+ <WithHoverSound>
+ <button onClick={this.showCustomSceneDialog} className={styles.customButton}>
+ <FormattedMessage id="home.room_create_options" />
</button>
- </div>
+ </WithHoverSound>
</div>
</div>
- <div className={styles.container}>
- <button
- type="submit"
- tabIndex="5"
- className={styles.submitButton}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="home.room_create_button" />
- </button>
+ <div className={styles.controls}>
+ <WithHoverSound>
+ <button
+ className={styles.prev}
+ type="button"
+ tabIndex="1"
+ onClick={this.setToPreviousEnvironment}
+ >
+ <FontAwesomeIcon icon={faAngleLeft} />
+ </button>
+ </WithHoverSound>
+ <WithHoverSound>
+ <button className={styles.next} type="button" tabIndex="2" onClick={this.setToNextEnvironment}>
+ <FontAwesomeIcon icon={faAngleRight} />
+ </button>
+ </WithHoverSound>
</div>
</div>
</div>
- </form>
- {this.state.showCustomSceneDialog && (
- <CreateRoomDialog
- onClose={() => this.setState({ showCustomSceneDialog: false })}
- onCustomScene={(name, url) => {
- this.setState({ showCustomSceneDialog: false, name: name, customSceneUrl: url }, () =>
- this.createHub()
- );
- }}
- />
- )}
+ <div className={styles.container}>
+ <WithHoverSound>
+ <button type="submit" tabIndex="5" className={styles.submitButton}>
+ <FormattedMessage id="home.room_create_button" />
+ </button>
+ </WithHoverSound>
+ </div>
+ </div>
</div>
+ </form>
+ {this.state.showCustomSceneDialog && (
+ <CreateRoomDialog
+ onClose={() => this.setState({ showCustomSceneDialog: false })}
+ onCustomScene={(name, url) => {
+ this.setState({ showCustomSceneDialog: false, name: name, customSceneUrl: url }, () => this.createHub());
+ }}
+ />
)}
- </AudioContext.Consumer>
+ </div>
);
}
}
diff --git a/src/react-components/invite-dialog.js b/src/react-components/invite-dialog.js
index 238775205e35b9a166ba4a66b114be039fb0ade7..8a913d7b7702cc13d0833031bbadd134528f686e 100644
--- a/src/react-components/invite-dialog.js
+++ b/src/react-components/invite-dialog.js
@@ -4,7 +4,7 @@ import copy from "copy-to-clipboard";
import classNames from "classnames";
import { FormattedMessage } from "react-intl";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
import styles from "../assets/stylesheets/invite-dialog.scss";
function pad(num, size) {
@@ -46,72 +46,51 @@ export default class InviteDialog extends Component {
const shareLink = `hub.link/${entryCodeString}`;
return (
- <AudioContext.Consumer>
- {audio => (
- <div className={styles.dialog}>
- <div className={styles.attachPoint} />
- <div
- className={styles.close}
- onClick={() => this.props.onClose()}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <span>×</span>
- </div>
- <div>
- <FormattedMessage id="invite.enter_via" />
- <a
- href="https://hub.link"
- target="_blank"
- className={styles.hubLinkLink}
- rel="noopener noreferrer"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- hub.link
- </a>
- <FormattedMessage id="invite.and_enter_code" />
- </div>
- <div className={styles.code}>
- {entryCodeString.split("").map((d, i) => (
- <div
- className={classNames({ [styles.digit]: true, [styles[`digit_${i}`]]: true })}
- key={`link_code_${i}`}
- >
- {d}
- </div>
- ))}
- </div>
- <div>
- <FormattedMessage id="invite.or_visit" />
- </div>
- <div className={styles.domain}>
- <input type="text" readOnly onFocus={e => e.target.select()} value={shareLink} />
- </div>
- <div className={styles.buttons}>
- <button
- className={styles.linkButton}
- onClick={this.copyClicked.bind(this, "https://" + shareLink)}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <span>{this.state.copyButtonActive ? "copied!" : "copy"}</span>
- </button>
- {this.props.allowShare &&
- navigator.share && (
- <button
- className={styles.linkButton}
- onClick={this.shareClicked.bind(this, "https://" + shareLink)}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <span>{this.state.shareButtonActive ? "sharing..." : "share"}</span>
- </button>
- )}
- </div>
+ <div className={styles.dialog}>
+ <div className={styles.attachPoint} />
+ <WithHoverSound>
+ <div className={styles.close} onClick={() => this.props.onClose()}>
+ <span>×</span>
</div>
- )}
- </AudioContext.Consumer>
+ </WithHoverSound>
+ <div>
+ <FormattedMessage id="invite.enter_via" />
+ <WithHoverSound>
+ <a href="https://hub.link" target="_blank" className={styles.hubLinkLink} rel="noopener noreferrer">
+ hub.link
+ </a>
+ </WithHoverSound>
+ <FormattedMessage id="invite.and_enter_code" />
+ </div>
+ <div className={styles.code}>
+ {entryCodeString.split("").map((d, i) => (
+ <div className={classNames({ [styles.digit]: true, [styles[`digit_${i}`]]: true })} key={`link_code_${i}`}>
+ {d}
+ </div>
+ ))}
+ </div>
+ <div>
+ <FormattedMessage id="invite.or_visit" />
+ </div>
+ <div className={styles.domain}>
+ <input type="text" readOnly onFocus={e => e.target.select()} value={shareLink} />
+ </div>
+ <div className={styles.buttons}>
+ <WithHoverSound>
+ <button className={styles.linkButton} onClick={this.copyClicked.bind(this, "https://" + shareLink)}>
+ <span>{this.state.copyButtonActive ? "copied!" : "copy"}</span>
+ </button>
+ </WithHoverSound>
+ {this.props.allowShare &&
+ navigator.share && (
+ <WithHoverSound>
+ <button className={styles.linkButton} onClick={this.shareClicked.bind(this, "https://" + shareLink)}>
+ <span>{this.state.shareButtonActive ? "sharing..." : "share"}</span>
+ </button>
+ </WithHoverSound>
+ )}
+ </div>
+ </div>
);
}
}
diff --git a/src/react-components/invite-team-dialog.js b/src/react-components/invite-team-dialog.js
index 65ccc55caa679b691b8cf14d24e122324f6ce512..6c0b685ddfad382bc2dfc022dc152a3c1c4898a6 100644
--- a/src/react-components/invite-team-dialog.js
+++ b/src/react-components/invite-team-dialog.js
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import DialogContainer from "./dialog-container.js";
import PropTypes from "prop-types";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
export default class InviteTeamDialog extends Component {
static propTypes = {
@@ -31,18 +31,11 @@ export default class InviteTeamDialog extends Component {
</div>
<div className="invite-team-form">
<div className="invite-team-form__buttons">
- <AudioContext.Consumer>
- {audio => (
- <button
- className="invite-team-form__action-button"
- onClick={this.inviteClicked}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <span>{this.state.inviteButtonText}</span>
- </button>
- )}
- </AudioContext.Consumer>
+ <WithHoverSound>
+ <button className="invite-team-form__action-button" onClick={this.inviteClicked}>
+ <span>{this.state.inviteButtonText}</span>
+ </button>
+ </WithHoverSound>
</div>
</div>
</div>
diff --git a/src/react-components/link-dialog.js b/src/react-components/link-dialog.js
index 7461ad08618719efddd0b9ea1b77b0d5f6bd2e28..e8482958e20120f6beb6a0cbfd34f7f21c398af8 100644
--- a/src/react-components/link-dialog.js
+++ b/src/react-components/link-dialog.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
import classNames from "classnames";
import { FormattedMessage } from "react-intl";
import LinkDialogHeader from "../assets/images/link_dialog_header.svg";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
import styles from "../assets/stylesheets/link-dialog.scss";
@@ -17,77 +17,62 @@ export default class LinkDialog extends Component {
const { linkCode } = this.props;
return (
- <AudioContext.Consumer>
- {audio => (
- <div className={styles.dialog}>
- <div
- className={styles.close}
- onClick={() => this.props.onClose()}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <span>×</span>
- </div>
+ <div className={styles.dialog}>
+ <WithHoverSound>
+ <div className={styles.close} onClick={() => this.props.onClose()}>
+ <span>×</span>
+ </div>
+ </WithHoverSound>
+ <div>
+ {!linkCode && (
<div>
- {!linkCode && (
- <div>
- <div className={classNames("loading-panel", styles.codeLoadingPanel)}>
- <div className="loader-wrap">
- <div className="loader">
- <div className="loader-center" />
- </div>
- </div>
+ <div className={classNames("loading-panel", styles.codeLoadingPanel)}>
+ <div className="loader-wrap">
+ <div className="loader">
+ <div className="loader-center" />
</div>
</div>
- )}
+ </div>
+ </div>
+ )}
+ {linkCode && (
+ <div className={styles.contents}>
+ <img className={styles.imageHeader} src={LinkDialogHeader} />
+ <div className={styles.header}>
+ <FormattedMessage id="link.connect_headset" />
+ </div>
+ <div>
+ <FormattedMessage id="link.in_your_browser" />
+ </div>
+ <WithHoverSound>
+ <a href="https://hub.link" className={styles.domain} target="_blank" rel="noopener noreferrer">
+ hub.link
+ </a>
+ </WithHoverSound>
+ <div>
+ <FormattedMessage id="link.enter_code" />
+ </div>
{linkCode && (
- <div className={styles.contents}>
- <img className={styles.imageHeader} src={LinkDialogHeader} />
- <div className={styles.header}>
- <FormattedMessage id="link.connect_headset" />
- </div>
- <div>
- <FormattedMessage id="link.in_your_browser" />
- </div>
- <a
- href="https://hub.link"
- className={styles.domain}
- target="_blank"
- rel="noopener noreferrer"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- hub.link
- </a>
- <div>
- <FormattedMessage id="link.enter_code" />
- </div>
- {linkCode && (
- <div className={styles.code}>
- {linkCode.split("").map((d, i) => (
- <span className={styles.digit} key={`link_code_${i}`}>
- {d}
- </span>
- ))}
- </div>
- )}
- <div className={styles.keepOpen}>
- <FormattedMessage id="link.do_not_close" />
- </div>
- <button
- className={styles.closeButton}
- onClick={() => this.props.onClose()}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="link.cancel" />
- </button>
+ <div className={styles.code}>
+ {linkCode.split("").map((d, i) => (
+ <span className={styles.digit} key={`link_code_${i}`}>
+ {d}
+ </span>
+ ))}
</div>
)}
+ <div className={styles.keepOpen}>
+ <FormattedMessage id="link.do_not_close" />
+ </div>
+ <WithHoverSound>
+ <button className={styles.closeButton} onClick={() => this.props.onClose()}>
+ <FormattedMessage id="link.cancel" />
+ </button>
+ </WithHoverSound>
</div>
- </div>
- )}
- </AudioContext.Consumer>
+ )}
+ </div>
+ </div>
);
}
}
diff --git a/src/react-components/link-root.js b/src/react-components/link-root.js
index 2d53455412b5e40c048ecc849c248dd2c08d2e4a..ce0105e493766e05d4b1bedbf1e28818d8f896a2 100644
--- a/src/react-components/link-root.js
+++ b/src/react-components/link-root.js
@@ -8,7 +8,7 @@ import classNames from "classnames";
import styles from "../assets/stylesheets/link.scss";
import { disableiOSZoom } from "../utils/disable-ios-zoom";
import HeadsetIcon from "../assets/images/generic_vr_entry.svg";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
const MAX_DIGITS = 6;
const MAX_LETTERS = 4;
@@ -136,155 +136,142 @@ class LinkRoot extends Component {
return (
<IntlProvider locale={lang} messages={messages}>
- <AudioContext.Consumer>
- {audio => (
- <div className={styles.link}>
- <div className={styles.linkContents}>
- <div className={styles.logo}>
- <img src="../assets/images/hub-preview-light-no-shadow.png" />
- </div>
- {this.state.entered.length === this.maxAllowedChars() && (
- <div className={classNames("loading-panel", styles.codeLoadingPanel)}>
- <div className="loader-wrap">
- <div className="loader">
- <div className="loader-center" />
- </div>
- </div>
- </div>
- )}
-
- <div className={styles.enteredContents}>
- <div className={styles.header}>
- <FormattedMessage
- id={
- this.state.failedAtLeastOnce
- ? "link.try_again"
- : "link.link_page_header_" + (!this.state.isAlphaMode ? "entry" : "headset")
- }
- />
+ <div className={styles.link}>
+ <div className={styles.linkContents}>
+ <div className={styles.logo}>
+ <img src="../assets/images/hub-preview-light-no-shadow.png" />
+ </div>
+ {this.state.entered.length === this.maxAllowedChars() && (
+ <div className={classNames("loading-panel", styles.codeLoadingPanel)}>
+ <div className="loader-wrap">
+ <div className="loader">
+ <div className="loader-center" />
</div>
+ </div>
+ </div>
+ )}
+
+ <div className={styles.enteredContents}>
+ <div className={styles.header}>
+ <FormattedMessage
+ id={
+ this.state.failedAtLeastOnce
+ ? "link.try_again"
+ : "link.link_page_header_" + (!this.state.isAlphaMode ? "entry" : "headset")
+ }
+ />
+ </div>
- <div className={styles.entered}>
- <input
- className={styles.charInput}
- type={this.state.isAlphaMode ? "text" : "tel"}
- pattern="[0-9A-I]*"
- value={this.state.entered}
- onChange={ev => {
- if (!this.state.isAlphaMode && ev.target.value.match(/[a-z]/i)) {
- this.setState({ isAlphaMode: true });
- }
-
- this.setState({ entered: ev.target.value.toUpperCase() });
- }}
- />
- </div>
+ <div className={styles.entered}>
+ <input
+ className={styles.charInput}
+ type={this.state.isAlphaMode ? "text" : "tel"}
+ pattern="[0-9A-I]*"
+ value={this.state.entered}
+ onChange={ev => {
+ if (!this.state.isAlphaMode && ev.target.value.match(/[a-z]/i)) {
+ this.setState({ isAlphaMode: true });
+ }
+
+ this.setState({ entered: ev.target.value.toUpperCase() });
+ }}
+ />
+ </div>
- <div className={styles.enteredFooter}>
- {!this.state.isAlphaMode && (
- <img onClick={() => this.toggleMode()} src={HeadsetIcon} className={styles.headsetIcon} />
- )}
- {!this.state.isAlphaMode && (
- <span>
- <a
- href="#"
- onClick={() => this.toggleMode()}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="link.linking_a_headset" />
- </a>
- </span>
- )}
- </div>
- </div>
+ <div className={styles.enteredFooter}>
+ {!this.state.isAlphaMode && (
+ <img onClick={() => this.toggleMode()} src={HeadsetIcon} className={styles.headsetIcon} />
+ )}
+ {!this.state.isAlphaMode && (
+ <span>
+ {" "}
+ <WithHoverSound>
+ <a href="#" onClick={() => this.toggleMode()}>
+ <FormattedMessage id="link.linking_a_headset" />
+ </a>
+ </WithHoverSound>
+ </span>
+ )}
+ </div>
+ </div>
- <div className={styles.keypad}>
- {(this.state.isAlphaMode
- ? ["A", "B", "C", "D", "E", "F", "G", "H", "I"]
- : [1, 2, 3, 4, 5, 6, 7, 8, 9]
- ).map((d, i) => (
- <button
- disabled={this.state.entered.length === this.maxAllowedChars()}
- key={`char_${i}`}
- className={styles.keypadButton}
- onClick={() => {
- if (!hasTouchEvents) this.addToEntry(d);
- }}
- onTouchStart={() => this.addToEntry(d)}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- {d}
- </button>
- ))}
+ <div className={styles.keypad}>
+ {(this.state.isAlphaMode
+ ? ["A", "B", "C", "D", "E", "F", "G", "H", "I"]
+ : [1, 2, 3, 4, 5, 6, 7, 8, 9]
+ ).map((d, i) => (
+ <WithHoverSound>
<button
- className={classNames(styles.keypadButton, styles.keypadToggleMode)}
- onTouchStart={() => this.toggleMode()}
+ disabled={this.state.entered.length === this.maxAllowedChars()}
+ key={`char_${i}`}
+ className={styles.keypadButton}
onClick={() => {
- if (!hasTouchEvents) this.toggleMode();
+ if (!hasTouchEvents) this.addToEntry(d);
}}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
+ onTouchStart={() => this.addToEntry(d)}
>
- {this.state.isAlphaMode ? "123" : "ABC"}
+ {d}
</button>
- {!this.state.isAlphaMode && (
- <button
- disabled={this.state.entered.length === this.maxAllowedChars()}
- className={classNames(styles.keypadButton, styles.keypadZeroButton)}
- onTouchStart={() => this.addToEntry(0)}
- onClick={() => {
- if (!hasTouchEvents) this.addToEntry(0);
- }}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- 0
- </button>
- )}
+ </WithHoverSound>
+ ))}
+ <WithHoverSound>
+ <button
+ className={classNames(styles.keypadButton, styles.keypadToggleMode)}
+ onTouchStart={() => this.toggleMode()}
+ onClick={() => {
+ if (!hasTouchEvents) this.toggleMode();
+ }}
+ >
+ {this.state.isAlphaMode ? "123" : "ABC"}
+ </button>
+ </WithHoverSound>
+ {!this.state.isAlphaMode && (
+ <WithHoverSound>
<button
- disabled={this.state.entered.length === 0 || this.state.entered.length === this.maxAllowedChars()}
- className={classNames(styles.keypadButton, styles.keypadBackspace)}
- onTouchStart={() => this.removeChar()}
+ disabled={this.state.entered.length === this.maxAllowedChars()}
+ className={classNames(styles.keypadButton, styles.keypadZeroButton)}
+ onTouchStart={() => this.addToEntry(0)}
onClick={() => {
- if (!hasTouchEvents) this.removeChar();
+ if (!hasTouchEvents) this.addToEntry(0);
}}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
>
- ⌫
+ 0
</button>
- </div>
+ </WithHoverSound>
+ )}
+ <WithHoverSound>
+ <button
+ disabled={this.state.entered.length === 0 || this.state.entered.length === this.maxAllowedChars()}
+ className={classNames(styles.keypadButton, styles.keypadBackspace)}
+ onTouchStart={() => this.removeChar()}
+ onClick={() => {
+ if (!hasTouchEvents) this.removeChar();
+ }}
+ >
+ ⌫
+ </button>
+ </WithHoverSound>
+ </div>
- <div className={styles.footer}>
- <div
- className={styles.linkHeadsetFooterLink}
- style={{ visibility: this.state.isAlphaMode ? "hidden" : "visible" }}
- >
- <img
- onClick={() => this.toggleMode()}
- src={HeadsetIcon}
- className={styles.headsetIcon}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- />
- <span>
- <a
- href="#"
- onClick={() => this.toggleMode()}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="link.linking_a_headset" />
- </a>
- </span>
- </div>
- </div>
+ <div className={styles.footer}>
+ <div
+ className={styles.linkHeadsetFooterLink}
+ style={{ visibility: this.state.isAlphaMode ? "hidden" : "visible" }}
+ >
+ <WithHoverSound>
+ <img onClick={() => this.toggleMode()} src={HeadsetIcon} className={styles.headsetIcon} />
+ </WithHoverSound>
+ <span>
+ <WithHoverSound>
+ <a href="#" onClick={() => this.toggleMode()}>
+ <FormattedMessage id="link.linking_a_headset" />
+ </a>
+ </WithHoverSound>
+ </span>
</div>
</div>
- )}
- </AudioContext.Consumer>
+ </div>
+ </div>
</IntlProvider>
);
}
diff --git a/src/react-components/profile-entry-panel.js b/src/react-components/profile-entry-panel.js
index 9dff6f08d3b95fecb860bf1d212b7dd905315b3b..e4d02c70a4bb896816c44d8018aeae2da8ea0139 100644
--- a/src/react-components/profile-entry-panel.js
+++ b/src/react-components/profile-entry-panel.js
@@ -5,7 +5,7 @@ import { SCHEMA } from "../storage/store";
import styles from "../assets/stylesheets/profile.scss";
import classNames from "classnames";
import hubLogo from "../assets/images/hub-preview-white.png";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
class ProfileEntryPanel extends Component {
static propTypes = {
@@ -76,73 +76,66 @@ class ProfileEntryPanel extends Component {
const { formatMessage } = this.props.intl;
return (
- <AudioContext.Consumer>
- {audio => (
- <div className={styles.profileEntry}>
- <form onSubmit={this.saveStateAndFinish} className={styles.form}>
- <div className={classNames([styles.box, styles.darkened])}>
- <label htmlFor="#profile-entry-display-name" className={styles.title}>
- <FormattedMessage id="profile.header" />
- </label>
- <input
- id="profile-entry-display-name"
- className={styles.formFieldText}
- value={this.state.displayName}
- 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)}
- />
- <div className={styles.avatarSelectorContainer}>
- <div className="loading-panel">
- <div className="loader-wrap">
- <div className="loader">
- <div className="loader-center" />
- </div>
- </div>
+ <div className={styles.profileEntry}>
+ <form onSubmit={this.saveStateAndFinish} className={styles.form}>
+ <div className={classNames([styles.box, styles.darkened])}>
+ <label htmlFor="#profile-entry-display-name" className={styles.title}>
+ <FormattedMessage id="profile.header" />
+ </label>
+ <input
+ id="profile-entry-display-name"
+ className={styles.formFieldText}
+ value={this.state.displayName}
+ 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)}
+ />
+ <div className={styles.avatarSelectorContainer}>
+ <div className="loading-panel">
+ <div className="loader-wrap">
+ <div className="loader">
+ <div className="loader-center" />
</div>
- <iframe
- className={styles.avatarSelector}
- src={`/avatar-selector.html#avatar_id=${this.state.avatarId}`}
- ref={ifr => (this.avatarSelector = ifr)}
- />
- </div>
- <input
- className={styles.formSubmit}
- type="submit"
- value={formatMessage({ id: "profile.save" })}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- />
- <div className={styles.links}>
- <a
- target="_blank"
- rel="noopener noreferrer"
- href="https://github.com/mozilla/hubs/blob/master/TERMS.md"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="profile.terms_of_use" />
- </a>
- <a
- target="_blank"
- rel="noopener noreferrer"
- href="https://github.com/mozilla/hubs/blob/master/PRIVACY.md"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="profile.privacy_notice" />
- </a>
</div>
</div>
- </form>
- <img className={styles.logo} src={hubLogo} />
+ <iframe
+ className={styles.avatarSelector}
+ src={`/avatar-selector.html#avatar_id=${this.state.avatarId}`}
+ ref={ifr => (this.avatarSelector = ifr)}
+ />
+ </div>
+ <WithHoverSound>
+ <input className={styles.formSubmit} type="submit" value={formatMessage({ id: "profile.save" })} />
+ </WithHoverSound>
+ <div className={styles.links}>
+ <WithHoverSound>
+ <a
+ target="_blank"
+ rel="noopener noreferrer"
+ href="https://github.com/mozilla/hubs/blob/master/TERMS.md"
+ >
+ <FormattedMessage id="profile.terms_of_use" />
+ </a>
+ </WithHoverSound>
+
+ <WithHoverSound>
+ <a
+ target="_blank"
+ rel="noopener noreferrer"
+ href="https://github.com/mozilla/hubs/blob/master/PRIVACY.md"
+ >
+ <FormattedMessage id="profile.privacy_notice" />
+ </a>
+ </WithHoverSound>
+ </div>
</div>
- )}
- </AudioContext.Consumer>
+ </form>
+ <img className={styles.logo} src={hubLogo} />
+ </div>
);
}
}
diff --git a/src/react-components/profile-info-header.js b/src/react-components/profile-info-header.js
index 2e6de88966a6c751fc5b2941d1a8ef95ed2b5296..9b5b54ce5f9324390936934f531966bb60cb6c20 100644
--- a/src/react-components/profile-info-header.js
+++ b/src/react-components/profile-info-header.js
@@ -2,44 +2,30 @@ import React from "react";
import PropTypes from "prop-types";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faQuestion } from "@fortawesome/free-solid-svg-icons/faQuestion";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
export const ProfileInfoHeader = props => (
- <AudioContext.Consumer>
- {audio => (
- <div className="profile-info-header">
- <div className="profile-info-header__menu-buttons">
- <button
- className="profile-info-header__menu-buttons__menu-button"
- onClick={props.onClickHelp}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <i className="profile-info-header__menu-buttons__menu-button__icon">
- <FontAwesomeIcon icon={faQuestion} />
- </i>
- </button>
+ <div className="profile-info-header">
+ <div className="profile-info-header__menu-buttons">
+ <WithHoverSound>
+ <button className="profile-info-header__menu-buttons__menu-button" onClick={props.onClickHelp}>
+ <i className="profile-info-header__menu-buttons__menu-button__icon">
+ <FontAwesomeIcon icon={faQuestion} />
+ </i>
+ </button>
+ </WithHoverSound>
+ </div>
+ <div className="profile-info-header__profile_display_name">
+ <WithHoverSound>
+ <img src="../assets/images/account.svg" onClick={props.onClickName} className="profile-info-header__icon" />
+ </WithHoverSound>
+ <WithHoverSound>
+ <div onClick={props.onClickName} title={props.name}>
+ {props.name}
</div>
- <div className="profile-info-header__profile_display_name">
- <img
- src="../assets/images/account.svg"
- onClick={props.onClickName}
- className="profile-info-header__icon"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- />
- <div
- onClick={props.onClickName}
- title={props.name}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- {props.name}
- </div>
- </div>
- </div>
- )}
- </AudioContext.Consumer>
+ </WithHoverSound>
+ </div>
+ </div>
);
ProfileInfoHeader.propTypes = {
diff --git a/src/react-components/report-dialog.js b/src/react-components/report-dialog.js
index 12649646cf06865f46980b3d728dba01882822d6..359f4da55236d7d3f36248df94943195252ccb59 100644
--- a/src/react-components/report-dialog.js
+++ b/src/react-components/report-dialog.js
@@ -1,59 +1,41 @@
import React, { Component } from "react";
import DialogContainer from "./dialog-container.js";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
export default class ReportDialog extends Component {
render() {
return (
- <AudioContext.Consumer>
- {audio => (
- <DialogContainer title="Report an Issue" {...this.props}>
- <span>
- <p>Need to report a problem?</p>
- <p>
- You can file a{" "}
- <a
- href="https://github.com/mozilla/hubs/issues"
- target="_blank"
- rel="noopener noreferrer"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- GitHub Issue
- </a>{" "}
- or e-mail us for support at{" "}
- <a href="mailto:hubs@mozilla.com" onMouseEnter={audio.onMouseEnter} onMouseLeave={audio.onMouseLeave}>
- hubs@mozilla.com
- </a>
- .
- </p>
- <p>
- You can also find us in{" "}
- <a
- href="https://webvr.slack.com/messages/social"
- target="_blank"
- rel="noopener noreferrer"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- #social
- </a>{" "}
- on the{" "}
- <a
- href="https://webvr-slack.herokuapp.com/"
- target="_blank"
- rel="noopener noreferrer"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- WebVR Slack
- </a>
- .
- </p>
- </span>
- </DialogContainer>
- )}
- </AudioContext.Consumer>
+ <DialogContainer title="Report an Issue" {...this.props}>
+ <span>
+ <p>Need to report a problem?</p>
+ <p>
+ You can file a{" "}
+ <WithHoverSound>
+ <a href="https://github.com/mozilla/hubs/issues" target="_blank" rel="noopener noreferrer">
+ GitHub Issue
+ </a>
+ </WithHoverSound>
+ or e-mail us for support at{" "}
+ <WithHoverSound>
+ <a href="mailto:hubs@mozilla.com">hubs@mozilla.com</a>
+ </WithHoverSound>
+ </p>
+ <p>
+ You can also find us in{" "}
+ <WithHoverSound>
+ <a href="https://webvr.slack.com/messages/social" target="_blank" rel="noopener noreferrer">
+ #social
+ </a>
+ </WithHoverSound>
+ on the{" "}
+ <WithHoverSound>
+ <a href="https://webvr-slack.herokuapp.com/" target="_blank" rel="noopener noreferrer">
+ WebVR Slack
+ </a>
+ </WithHoverSound>
+ </p>
+ </span>
+ </DialogContainer>
);
}
}
diff --git a/src/react-components/safari-dialog.js b/src/react-components/safari-dialog.js
index 60fd609efab23ff56fa643d0ba42faf86b9bf36d..608eaa03c5b19cdf26de58440116be6d9707d02e 100644
--- a/src/react-components/safari-dialog.js
+++ b/src/react-components/safari-dialog.js
@@ -1,7 +1,7 @@
import React, { Component } from "react";
import copy from "copy-to-clipboard";
import DialogContainer from "./dialog-container.js";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
export default class SafariDialog extends Component {
state = {
@@ -28,18 +28,11 @@ export default class SafariDialog extends Component {
className="invite-form__link_field"
/>
<div className="invite-form__buttons">
- <AudioContext.Consumer>
- {audio => (
- <button
- className="invite-form__action-button"
- onClick={onCopyClicked}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <span>{this.state.copyLinkButtonText}</span>
- </button>
- )}
- </AudioContext.Consumer>
+ <WithHoverSound>
+ <button className="invite-form__action-button" onClick={onCopyClicked}>
+ <span>{this.state.copyLinkButtonText}</span>
+ </button>
+ </WithHoverSound>
</div>
</div>
</div>
diff --git a/src/react-components/scene-ui.js b/src/react-components/scene-ui.js
index 65af8699649ec67523b36fe160157f8b11065e5a..08bf8bbb57368c4c1b5e7d4ef01d7c90ecb6f363 100644
--- a/src/react-components/scene-ui.js
+++ b/src/react-components/scene-ui.js
@@ -7,7 +7,7 @@ import styles from "../assets/stylesheets/scene-ui.scss";
import hubLogo from "../assets/images/hub-preview-white.png";
import { getReticulumFetchUrl } from "../utils/phoenix-utils";
import { generateHubName } from "../utils/name-generation";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
import { lang, messages } from "../utils/i18n";
@@ -69,43 +69,38 @@ class SceneUI extends Component {
render() {
return (
<IntlProvider locale={lang} messages={messages}>
- <AudioContext.Consumer>
- {audio => (
- <div className={styles.ui}>
- <div
- className={classNames({
- [styles.screenshot]: true,
- [styles.screenshotHidden]: this.props.sceneLoaded
- })}
- >
- {this.state.showScreenshot && <img src={this.props.sceneScreenshotURL} />}
- </div>
- <div className={styles.whiteOverlay} />
- <div className={styles.grid}>
- <div className={styles.mainPanel}>
- <a
- href="/"
- className={styles.logo}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <img src={hubLogo} />
- </a>
- <div className={styles.logoTagline}>
- <FormattedMessage id="scene.logo_tagline" />
- </div>
- <button onClick={this.createRoom} onMouseEnter={audio.onMouseEnter} onMouseLeave={audio.onMouseLeave}>
- <FormattedMessage id="scene.create_button" />
- </button>
- </div>
- </div>
- <div className={styles.info}>
- <div className={styles.name}>{this.props.sceneName}</div>
- <div className={styles.attribution}>{this.props.sceneAttribution}</div>
+ <div className={styles.ui}>
+ <div
+ className={classNames({
+ [styles.screenshot]: true,
+ [styles.screenshotHidden]: this.props.sceneLoaded
+ })}
+ >
+ {this.state.showScreenshot && <img src={this.props.sceneScreenshotURL} />}
+ </div>
+ <div className={styles.whiteOverlay} />
+ <div className={styles.grid}>
+ <div className={styles.mainPanel}>
+ <WithHoverSound>
+ <a href="/" className={styles.logo}>
+ <img src={hubLogo} />
+ </a>
+ </WithHoverSound>
+ <div className={styles.logoTagline}>
+ <FormattedMessage id="scene.logo_tagline" />
</div>
+ <WithHoverSound>
+ <button onClick={this.createRoom}>
+ <FormattedMessage id="scene.create_button" />
+ </button>
+ </WithHoverSound>
</div>
- )}
- </AudioContext.Consumer>
+ </div>
+ <div className={styles.info}>
+ <div className={styles.name}>{this.props.sceneName}</div>
+ <div className={styles.attribution}>{this.props.sceneAttribution}</div>
+ </div>
+ </div>
</IntlProvider>
);
}
diff --git a/src/react-components/slack-dialog.js b/src/react-components/slack-dialog.js
index 8b70d8504ce9eeedd1e8b197b14f10557e10053d..d53329b3d7f2ef4ce448f5035898c49107eee9ec 100644
--- a/src/react-components/slack-dialog.js
+++ b/src/react-components/slack-dialog.js
@@ -1,56 +1,40 @@
import React, { Component } from "react";
import DialogContainer from "./dialog-container.js";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
export default class SlackDialog extends Component {
render() {
return (
<DialogContainer title="Get in Touch" {...this.props}>
- <AudioContext.Consumer>
- {audio => (
- <span>
- <p>Want to join the conversation?</p>
- <p>
- Join us on the{" "}
- <a
- href="https://webvr-slack.herokuapp.com/"
- target="_blank"
- rel="noopener noreferrer"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- WebVR Slack
- </a>{" "}
- in the{" "}
- <a
- href="https://webvr.slack.com/messages/social"
- target="_blank"
- rel="noopener noreferrer"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- #social
- </a>{" "}
- channel.
- <br />
- VR meetups every Friday at noon PDT!
- </p>
- <p>
- Or, tweet at{" "}
- <a
- href="https://twitter.com/mozillareality"
- target="_blank"
- rel="noopener noreferrer"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- @mozillareality
- </a>{" "}
- on Twitter.
- </p>
- </span>
- )}
- </AudioContext.Consumer>
+ <span>
+ <p>Want to join the conversation?</p>
+ <p>
+ Join us on the{" "}
+ <WithHoverSound>
+ <a href="https://webvr-slack.herokuapp.com/" target="_blank" rel="noopener noreferrer">
+ WebVR Slack
+ </a>
+ </WithHoverSound>{" "}
+ in the{" "}
+ <WithHoverSound>
+ <a href="https://webvr.slack.com/messages/social" target="_blank" rel="noopener noreferrer">
+ #social
+ </a>
+ </WithHoverSound>{" "}
+ channel.
+ <br />
+ VR meetups every Friday at noon PDT!
+ </p>
+ <p>
+ Or, tweet at{" "}
+ <WithHoverSound>
+ <a href="https://twitter.com/mozillareality" target="_blank" rel="noopener noreferrer">
+ @mozillareality
+ </a>
+ </WithHoverSound>{" "}
+ on Twitter.
+ </p>
+ </span>
</DialogContainer>
);
}
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 0fec42f87ca6accec6cc7cf07fab958ca6344eb2..722c118b8a0225df52e9604ba83bfe9a5c344b0b 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -9,7 +9,7 @@ import MovingAverage from "moving-average";
import screenfull from "screenfull";
import styles from "../assets/stylesheets/ui-root.scss";
import entryStyles from "../assets/stylesheets/entry.scss";
-import { AudioContext } from "../AudioContext";
+import { AudioContext, WithHoverSound } from "./wrap-with-audio";
import { lang, messages } from "../utils/i18n";
import AutoExitWarning from "./auto-exit-warning";
@@ -137,8 +137,8 @@ class UIRoot extends Component {
const scene = this.props.scene;
this.setState({
audioContext: {
- onMouseEnter: () => {
- scene.emit("play_sound-hud_mouse_enter");
+ playSound: sound => {
+ scene.emit(sound);
},
onMouseLeave: () => {
// scene.emit("play_sound-hud_mouse_leave");
@@ -594,69 +594,50 @@ class UIRoot extends Component {
if (this.props.roomUnavailableReason === "closed") {
// TODO i18n, due to links and markup
subtitle = (
- <AudioContext.Consumer>
- {audio => (
- <div>
- Sorry, this room is no longer available.
- <p />A room may be closed if we receive reports that it violates our{" "}
- <a
- target="_blank"
- rel="noreferrer noopener"
- href="https://github.com/mozilla/hubs/blob/master/TERMS.md"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- Terms of Use
- </a>
- .<br />
- If you have questions, contact us at{" "}
- <a href="mailto:hubs@mozilla.com" onMouseEnter={audio.onMouseEnter} onMouseLeave={audio.onMouseLeave}>
- 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"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- GitHub
- </a>
- .
- </div>
- )}
- </AudioContext.Consumer>
+ <div>
+ Sorry, this room is no longer available.
+ <p />A room may be closed if we receive reports that it violates our{" "}
+ <WithHoverSound>
+ <a target="_blank" rel="noreferrer noopener" href="https://github.com/mozilla/hubs/blob/master/TERMS.md">
+ Terms of Use
+ </a>
+ </WithHoverSound>
+ .<br />
+ If you have questions, contact us at{" "}
+ <WithHoverSound>
+ <a href="mailto:hubs@mozilla.com">hubs@mozilla.com</a>
+ </WithHoverSound>
+ .<p />
+ If you'd like to run your own server, hubs's source code is available on{" "}
+ <WithHoverSound>
+ <a href="https://github.com/mozilla/hubs">GitHub</a>
+ </WithHoverSound>
+ .
+ </div>
);
} else if (this.props.platformUnsupportedReason === "no_data_channels") {
// TODO i18n, due to links and markup
subtitle = (
- <AudioContext.Consumer>
- {audio => (
- <div>
- Your browser does not support{" "}
- <a
- href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createDataChannel#Browser_compatibility"
- rel="noreferrer noopener"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- WebRTC Data Channels
- </a>
- , which is required to use Hubs.
- <br />
- If you"d like to use Hubs with Oculus or SteamVR, you can{" "}
- <a
- href="https://www.mozilla.org/firefox"
- rel="noreferrer noopener"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- Download Firefox
- </a>
- .
- </div>
- )}
- </AudioContext.Consumer>
+ <div>
+ Your browser does not support{" "}
+ <WithHoverSound>
+ <a
+ href="https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createDataChannel#Browser_compatibility"
+ rel="noreferrer noopener"
+ >
+ WebRTC Data Channels
+ </a>
+ </WithHoverSound>
+ , which is required to use Hubs.
+ <br />
+ If you"d like to use Hubs with Oculus or SteamVR, you can{" "}
+ <WithHoverSound>
+ <a href="https://www.mozilla.org/firefox" rel="noreferrer noopener">
+ Download Firefox
+ </a>
+ </WithHoverSound>
+ .
+ </div>
);
} else {
const reason = this.props.roomUnavailableReason || this.props.platformUnsupportedReason;
@@ -666,17 +647,12 @@ class UIRoot extends Component {
<FormattedMessage id={exitSubtitleId} />
<p />
{this.props.roomUnavailableReason && (
- <AudioContext.Consumer>
- {audio => (
- <div>
- You can also{" "}
- <a href="/" onMouseEnter={audio.onMouseEnter} onMouseLeave={audio.onMouseLeave}>
- create a new room
- </a>
- .
- </div>
- )}
- </AudioContext.Consumer>
+ <div>
+ You can also{" "}
+ <WithHoverSound>
+ <a href="/">create a new room</a>.
+ </WithHoverSound>
+ </div>
)}
</div>
);
@@ -720,38 +696,29 @@ class UIRoot extends Component {
renderEntryStartPanel = () => {
return (
- <AudioContext.Consumer>
- {audio => (
- <div className={entryStyles.entryPanel}>
- <div className={entryStyles.title}>{this.props.hubName}</div>
-
- <div className={entryStyles.center}>
- <div
- onClick={() => this.setState({ showProfileEntry: true })}
- className={entryStyles.profileName}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <img src="../assets/images/account.svg" className={entryStyles.profileIcon} />
- <div title={this.props.store.state.profile.displayName}>
- {this.props.store.state.profile.displayName}
- </div>
- </div>
- </div>
+ <div className={entryStyles.entryPanel}>
+ <div className={entryStyles.title}>{this.props.hubName}</div>
- <div className={entryStyles.buttonContainer}>
- <button
- className={classNames([entryStyles.actionButton, entryStyles.wideButton])}
- onClick={() => this.handleStartEntry()}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="entry.enter-room" />
- </button>
+ <div className={entryStyles.center}>
+ <WithHoverSound>
+ <div onClick={() => this.setState({ showProfileEntry: true })} className={entryStyles.profileName}>
+ <img src="../assets/images/account.svg" className={entryStyles.profileIcon} />
+ <div title={this.props.store.state.profile.displayName}>{this.props.store.state.profile.displayName}</div>
</div>
- </div>
- )}
- </AudioContext.Consumer>
+ </WithHoverSound>
+ </div>
+
+ <div className={entryStyles.buttonContainer}>
+ <WithHoverSound>
+ <button
+ className={classNames([entryStyles.actionButton, entryStyles.wideButton])}
+ onClick={() => this.handleStartEntry()}
+ >
+ <FormattedMessage id="entry.enter-room" />
+ </button>
+ </WithHoverSound>
+ </div>
+ </div>
);
};
@@ -784,18 +751,11 @@ class UIRoot extends Component {
)}
<DeviceEntryButton onClick={() => this.attemptLink()} isInHMD={this.props.availableVREntryTypes.isInHMD} />
{this.props.availableVREntryTypes.cardboard !== VR_DEVICE_AVAILABILITY.no && (
- <AudioContext.Consumer>
- {audio => (
- <div
- className={entryStyles.secondary}
- onClick={this.enterVR}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="entry.cardboard" />
- </div>
- )}
- </AudioContext.Consumer>
+ <WithHoverSound>
+ <div className={entryStyles.secondary} onClick={this.enterVR}>
+ <FormattedMessage id="entry.cardboard" />
+ </div>
+ </WithHoverSound>
)}
{screenSharingCheckbox}
</div>
@@ -819,55 +779,42 @@ class UIRoot extends Component {
renderMicPanel = () => {
return (
- <AudioContext.Consumer>
- {audio => (
- <div className="mic-grant-panel">
- <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}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <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}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <img src="../assets/images/mic_granted.png" srcSet="../assets/images/mic_granted@2x.png 2x" />
- </button>
- )}
- </div>
- <div className="mic-grant-panel__next-container">
- <button
- className={classNames("mic-grant-panel__next")}
- onClick={this.onMicGrantButton}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="audio.granted-next" />
+ <div className="mic-grant-panel">
+ <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 ? (
+ <WithHoverSound>
+ <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>
- </div>
- </div>
+ </WithHoverSound>
+ ) : (
+ <WithHoverSound>
+ <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>
+ </WithHoverSound>
+ )}
</div>
- )}
- </AudioContext.Consumer>
+ <div className="mic-grant-panel__next-container">
+ <WithHoverSound>
+ <button className={classNames("mic-grant-panel__next")} onClick={this.onMicGrantButton}>
+ <FormattedMessage id="audio.granted-next" />
+ </button>
+ </WithHoverSound>
+ </div>
+ </div>
+ </div>
);
};
@@ -879,121 +826,111 @@ class UIRoot extends Component {
const speakerClip = { clip: `rect(${this.state.tonePlaying ? 0 : maxLevelHeight}px, 111px, 111px, 0px)` };
const subtitleId = AFRAME.utils.device.isMobile() ? "audio.subtitle-mobile" : "audio.subtitle-desktop";
return (
- <AudioContext.Consumer>
- {audio => (
- <div className="audio-setup-panel">
- <div>
- <div className="audio-setup-panel__title">
- <FormattedMessage id="audio.title" />
- </div>
- <div className="audio-setup-panel__subtitle">
- {(AFRAME.utils.device.isMobile() || this.state.enterInVR) && <FormattedMessage id={subtitleId} />}
+ <div className="audio-setup-panel">
+ <div>
+ <div className="audio-setup-panel__title">
+ <FormattedMessage id="audio.title" />
+ </div>
+ <div className="audio-setup-panel__subtitle">
+ {(AFRAME.utils.device.isMobile() || this.state.enterInVR) && <FormattedMessage id={subtitleId} />}
+ </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 ? (
+ <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>
+ <WithHoverSound>
+ <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 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 ? (
- <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}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
+ </WithHoverSound>
+ </div>
+ {this.state.audioTrack && (
+ <div className="audio-setup-panel__device-chooser">
+ <WithHoverSound>
+ <select
+ className="audio-setup-panel__device-chooser__dropdown"
+ value={this.selectedMicDeviceId()}
+ onChange={this.micDeviceChanged}
>
- <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}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- {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>
- )}
+ {this.state.micDevices.map(d => (
+ <option key={d.deviceId} value={d.deviceId}>
+
+ {d.label}
+ </option>
+ ))}
+ </select>
+ </WithHoverSound>
+ <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>
- <div className="audio-setup-panel__enter-button-container">
- <button
- className="audio-setup-panel__enter-button"
- onClick={this.onAudioReadyButton}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="audio.enter-now" />
- </button>
+ )}
+ {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>
- )}
- </AudioContext.Consumer>
+ )}
+ </div>
+ <div className="audio-setup-panel__enter-button-container">
+ <WithHoverSound>
+ <button className="audio-setup-panel__enter-button" onClick={this.onAudioReadyButton}>
+ <FormattedMessage id="audio.enter-now" />
+ </button>
+ </WithHoverSound>
+ </div>
+ </div>
);
};
@@ -1019,23 +956,16 @@ class UIRoot extends Component {
if (this.state.entryPanelCollapsed && !this.isWaitingForAutoExit()) {
dialogContents = (
- <AudioContext.Consumer>
- {audio => (
- <div className={entryStyles.entryDialog}>
- <div> </div>
- <button
- onClick={() => this.setState({ entryPanelCollapsed: false })}
- className={entryStyles.expand}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <i>
- <FontAwesomeIcon icon={faChevronUp} />
- </i>
- </button>
- </div>
- )}
- </AudioContext.Consumer>
+ <div className={entryStyles.entryDialog}>
+ <div> </div>
+ <WithHoverSound>
+ <button onClick={() => this.setState({ entryPanelCollapsed: false })} className={entryStyles.expand}>
+ <i>
+ <FontAwesomeIcon icon={faChevronUp} />
+ </i>
+ </button>
+ </WithHoverSound>
+ </div>
);
} else {
dialogContents = this.isWaitingForAutoExit() ? (
@@ -1046,20 +976,13 @@ class UIRoot extends Component {
) : (
<div className={entryStyles.entryDialog}>
{!this.state.entryPanelCollapsed && (
- <AudioContext.Consumer>
- {audio => (
- <button
- onClick={() => this.setState({ entryPanelCollapsed: true })}
- className={entryStyles.collapse}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <i>
- <FontAwesomeIcon icon={faChevronDown} />
- </i>
- </button>
- )}
- </AudioContext.Consumer>
+ <WithHoverSound>
+ <button onClick={() => this.setState({ entryPanelCollapsed: true })} className={entryStyles.collapse}>
+ <i>
+ <FontAwesomeIcon icon={faChevronDown} />
+ </i>
+ </button>
+ </WithHoverSound>
)}
{startPanel}
{devicePanel}
@@ -1081,141 +1004,125 @@ class UIRoot extends Component {
return (
<IntlProvider locale={lang} messages={messages}>
<AudioContext.Provider value={this.state.audioContext}>
- <AudioContext.Consumer>
- {audio => (
- <div className={styles.ui}>
- {this.state.dialog}
+ <div className={styles.ui}>
+ {this.state.dialog}
- {this.state.showProfileEntry && (
- <ProfileEntryPanel finished={this.onProfileFinished} store={this.props.store} />
- )}
+ {this.state.showProfileEntry && (
+ <ProfileEntryPanel finished={this.onProfileFinished} store={this.props.store} />
+ )}
- {(!entryFinished || this.isWaitingForAutoExit()) && (
- <div className={styles.uiDialog}>
- <div className={dialogBoxContentsClassNames}>{dialogContents}</div>
- </div>
- )}
+ {(!entryFinished || this.isWaitingForAutoExit()) && (
+ <div className={styles.uiDialog}>
+ <div className={dialogBoxContentsClassNames}>{dialogContents}</div>
+ </div>
+ )}
- <div
- className={classNames({
- [styles.inviteContainer]: true,
- [styles.inviteContainerBelowHud]: entryFinished,
- [styles.inviteContainerInverted]: this.state.showInviteDialog
- })}
- >
- {!showVREntryButton && (
- <button
- className={classNames({
- [styles.hideSmallScreens]: this.props.occupantCount > 1 && entryFinished
- })}
- onClick={() => this.toggleInviteDialog()}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="entry.invite-others-nag" />
- </button>
- )}
- {!showVREntryButton &&
- this.props.occupantCount > 1 &&
- entryFinished && (
- <button
- onClick={this.onMiniInviteClicked}
- className={styles.inviteMiniButton}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <span>
- {this.state.miniInviteActivated
- ? navigator.share
- ? "sharing..."
- : "copied!"
- : "hub.link/" + this.props.hubEntryCode}
- </span>
- </button>
- )}
- {showVREntryButton && (
- <button
- onClick={() => this.props.scene.enterVR()}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="entry.return-to-vr" />
+ <div
+ className={classNames({
+ [styles.inviteContainer]: true,
+ [styles.inviteContainerBelowHud]: entryFinished,
+ [styles.inviteContainerInverted]: this.state.showInviteDialog
+ })}
+ >
+ {!showVREntryButton && (
+ <WithHoverSound>
+ <button
+ className={classNames({
+ [styles.hideSmallScreens]: this.props.occupantCount > 1 && entryFinished
+ })}
+ onClick={() => this.toggleInviteDialog()}
+ >
+ <FormattedMessage id="entry.invite-others-nag" />
+ </button>
+ </WithHoverSound>
+ )}
+ {!showVREntryButton &&
+ this.props.occupantCount > 1 &&
+ entryFinished && (
+ <WithHoverSound>
+ <button onClick={this.onMiniInviteClicked} className={styles.inviteMiniButton}>
+ <span>
+ {this.state.miniInviteActivated
+ ? navigator.share
+ ? "sharing..."
+ : "copied!"
+ : "hub.link/" + this.props.hubEntryCode}
+ </span>
</button>
- )}
- {this.state.showInviteDialog && (
- <InviteDialog
- allowShare={!this.props.availableVREntryTypes.isInHMD}
- entryCode={this.props.hubEntryCode}
- onClose={() => this.setState({ showInviteDialog: false })}
- />
- )}
- </div>
-
- {this.state.showLinkDialog && (
- <LinkDialog
- linkCode={this.state.linkCode}
- onClose={() => {
- this.state.linkCodeCancel();
- this.setState({ showLinkDialog: false, linkCode: null, linkCodeCancel: null });
- }}
- />
+ </WithHoverSound>
)}
+ {showVREntryButton && (
+ <WithHoverSound>
+ <button onClick={() => this.props.scene.enterVR()}>
+ <FormattedMessage id="entry.return-to-vr" />
+ </button>
+ </WithHoverSound>
+ )}
+ {this.state.showInviteDialog && (
+ <InviteDialog
+ allowShare={!this.props.availableVREntryTypes.isInHMD}
+ entryCode={this.props.hubEntryCode}
+ onClose={() => this.setState({ showInviteDialog: false })}
+ />
+ )}
+ </div>
- <button
- onClick={() => this.showHelpDialog()}
- className={styles.helpIcon}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <i>
- <FontAwesomeIcon icon={faQuestion} />
- </i>
- </button>
+ {this.state.showLinkDialog && (
+ <LinkDialog
+ linkCode={this.state.linkCode}
+ onClose={() => {
+ this.state.linkCodeCancel();
+ this.setState({ showLinkDialog: false, linkCode: null, linkCodeCancel: null });
+ }}
+ />
+ )}
- <div
- className={styles.presenceInfo}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FontAwesomeIcon icon={faUsers} />
- <span className={styles.occupantCount}>{this.props.occupantCount || "-"}</span>
- </div>
-
- {this.state.entryStep === ENTRY_STEPS.finished ? (
- <div>
- <TwoDHUD.TopHUD
- muted={this.state.muted}
- frozen={this.state.frozen}
- spacebubble={this.state.spacebubble}
- onToggleMute={this.toggleMute}
- onToggleFreeze={this.toggleFreeze}
- onToggleSpaceBubble={this.toggleSpaceBubble}
- onSpawnPen={this.spawnPen}
- onSpawnCamera={() => this.props.scene.emit("action_spawn_camera")}
- />
- {this.props.isSupportAvailable && (
- <div className={styles.nagCornerButton}>
- <button
- onClick={() => this.showInviteTeamDialog()}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="entry.invite-team-nag" />
- </button>
- </div>
- )}
- {!this.isWaitingForAutoExit() && (
- <TwoDHUD.BottomHUD
- onCreateObject={() => this.showCreateObjectDialog()}
- showPhotoPicker={AFRAME.utils.device.isMobile()}
- onMediaPicked={this.createObject}
- />
- )}
+ <WithHoverSound>
+ <button onClick={() => this.showHelpDialog()} className={styles.helpIcon}>
+ <i>
+ <FontAwesomeIcon icon={faQuestion} />
+ </i>
+ </button>
+ </WithHoverSound>
+
+ <WithHoverSound>
+ <div className={styles.presenceInfo}>
+ <FontAwesomeIcon icon={faUsers} />
+ <span className={styles.occupantCount}>{this.props.occupantCount || "-"}</span>
+ </div>
+ </WithHoverSound>
+
+ {this.state.entryStep === ENTRY_STEPS.finished ? (
+ <div>
+ <TwoDHUD.TopHUD
+ muted={this.state.muted}
+ frozen={this.state.frozen}
+ spacebubble={this.state.spacebubble}
+ onToggleMute={this.toggleMute}
+ onToggleFreeze={this.toggleFreeze}
+ onToggleSpaceBubble={this.toggleSpaceBubble}
+ onSpawnPen={this.spawnPen}
+ onSpawnCamera={() => this.props.scene.emit("action_spawn_camera")}
+ />
+ {this.props.isSupportAvailable && (
+ <div className={styles.nagCornerButton}>
+ <WithHoverSound>
+ <button onClick={() => this.showInviteTeamDialog()}>
+ <FormattedMessage id="entry.invite-team-nag" />
+ </button>
+ </WithHoverSound>
</div>
- ) : null}
+ )}
+ {!this.isWaitingForAutoExit() && (
+ <TwoDHUD.BottomHUD
+ onCreateObject={() => this.showCreateObjectDialog()}
+ showPhotoPicker={AFRAME.utils.device.isMobile()}
+ onMediaPicked={this.createObject}
+ />
+ )}
</div>
- )}
- </AudioContext.Consumer>
+ ) : null}
+ </div>
</AudioContext.Provider>
</IntlProvider>
);
diff --git a/src/react-components/updates-dialog.js b/src/react-components/updates-dialog.js
index 2437d6f229b85dc73133989e2aa018232f7d671e..b5a746582e5b460c73b1bb1b5105ba6003537744 100644
--- a/src/react-components/updates-dialog.js
+++ b/src/react-components/updates-dialog.js
@@ -3,7 +3,7 @@ import { FormattedMessage } from "react-intl";
import PropTypes from "prop-types";
import formurlencoded from "form-urlencoded";
import DialogContainer from "./dialog-container.js";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
export default class UpdatesDialog extends Component {
static propTypes = {
@@ -41,57 +41,45 @@ export default class UpdatesDialog extends Component {
return (
<DialogContainer {...other}>
- <AudioContext.Consumer>
- {audio => (
- <span>
- <p>Sign up to get updates about new features in Hubs.</p>
- <form onSubmit={signUpForMailingList}>
- <div className="mailing-list-form">
+ <span>
+ <p>Sign up to get updates about new features in Hubs.</p>
+ <form onSubmit={signUpForMailingList}>
+ <div className="mailing-list-form">
+ <WithHoverSound>
+ <input
+ type="email"
+ value={this.state.mailingListEmail}
+ onChange={e => this.setState({ mailingListEmail: e.target.value })}
+ className="mailing-list-form__email_field"
+ required
+ placeholder="Your email here"
+ />
+ </WithHoverSound>
+ <label className="mailing-list-form__privacy">
+ <WithHoverSound>
<input
- type="email"
- value={this.state.mailingListEmail}
- onChange={e => this.setState({ mailingListEmail: e.target.value })}
- className="mailing-list-form__email_field"
+ className="mailing-list-form__privacy_checkbox"
+ type="checkbox"
required
- placeholder="Your email here"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
+ value={this.state.mailingListPrivacy}
+ onChange={e => this.setState({ mailingListPrivacy: e.target.checked })}
/>
- <label className="mailing-list-form__privacy">
- <input
- className="mailing-list-form__privacy_checkbox"
- type="checkbox"
- required
- value={this.state.mailingListPrivacy}
- onChange={e => this.setState({ mailingListPrivacy: e.target.checked })}
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- />
- <span className="mailing-list-form__privacy_label">
- <FormattedMessage id="mailing_list.privacy_label" />{" "}
- <a
- target="_blank"
- rel="noopener noreferrer"
- href="https://www.mozilla.org/en-US/privacy/"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- <FormattedMessage id="mailing_list.privacy_link" />
- </a>
- </span>
- </label>
- <input
- className="mailing-list-form__submit"
- type="submit"
- value="Sign Up Now"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- />
- </div>
- </form>
- </span>
- )}
- </AudioContext.Consumer>
+ </WithHoverSound>
+ <span className="mailing-list-form__privacy_label">
+ <FormattedMessage id="mailing_list.privacy_label" />{" "}
+ <WithHoverSound>
+ <a target="_blank" rel="noopener noreferrer" href="https://www.mozilla.org/en-US/privacy/">
+ <FormattedMessage id="mailing_list.privacy_link" />
+ </a>
+ </WithHoverSound>
+ </span>
+ </label>
+ <WithHoverSound>
+ <input className="mailing-list-form__submit" type="submit" value="Sign Up Now" />
+ </WithHoverSound>
+ </div>
+ </form>
+ </span>
</DialogContainer>
);
}
diff --git a/src/react-components/webvr-recommend-dialog.js b/src/react-components/webvr-recommend-dialog.js
index edfd4af5d64de6fc658de59336e7c1e42e05b182..7080457c4d37164a9e75e6f5af1c8003a534cbbe 100644
--- a/src/react-components/webvr-recommend-dialog.js
+++ b/src/react-components/webvr-recommend-dialog.js
@@ -1,39 +1,27 @@
import React, { Component } from "react";
import DialogContainer from "./dialog-container.js";
-import { AudioContext } from "../AudioContext";
+import { WithHoverSound } from "./wrap-with-audio";
export default class WebVRRecommendDialog extends Component {
render() {
return (
<DialogContainer title="Enter in VR" {...this.props}>
- <AudioContext.Consumer>
- {audio => (
- <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
- <p>To enter Hubs with Oculus or SteamVR, you can use Firefox.</p>
- <a
- className="info-dialog--action-button"
- href="https://www.mozilla.org/firefox"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- Download Firefox
+ <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+ <p>To enter Hubs with Oculus or SteamVR, you can use Firefox.</p>
+ <WithHoverSound>
+ <a className="info-dialog--action-button" href="https://www.mozilla.org/firefox">
+ Download Firefox
+ </a>
+ </WithHoverSound>
+ <p style={{ fontSize: "0.8em" }}>
+ For a full list of browsers with experimental VR support, visit{" "}
+ <WithHoverSound>
+ <a href="https://webvr.rocks" target="_blank" rel="noopener noreferrer">
+ WebVR Rocks
</a>
- <p style={{ fontSize: "0.8em" }}>
- For a full list of browsers with experimental VR support, visit{" "}
- <a
- href="https://webvr.rocks"
- target="_blank"
- rel="noopener noreferrer"
- onMouseEnter={audio.onMouseEnter}
- onMouseLeave={audio.onMouseLeave}
- >
- WebVR Rocks
- </a>
- .
- </p>
- </div>
- )}
- </AudioContext.Consumer>
+ </WithHoverSound>
+ </p>
+ </div>
</DialogContainer>
);
}
diff --git a/src/react-components/wrap-with-audio.js b/src/react-components/wrap-with-audio.js
new file mode 100644
index 0000000000000000000000000000000000000000..7d44c9a70aa150677a811bdd966442b96b165d4e
--- /dev/null
+++ b/src/react-components/wrap-with-audio.js
@@ -0,0 +1,20 @@
+import React from "react";
+
+export const AudioContext = React.createContext({});
+
+export const hudHoverSound = "play_sound-hud_mouse_enter";
+
+export const WithHoverSound = ({ sound, children }) => {
+ return (
+ <AudioContext.Consumer>
+ {context => {
+ return React.cloneElement(children, {
+ onMouseEnter: e => {
+ context.playSound(sound || hudHoverSound);
+ children.props.onMouseEnter && children.props.onMouseEnter(e);
+ }
+ });
+ }}
+ </AudioContext.Consumer>
+ );
+};