diff --git a/src/react-components/2d-hud.js b/src/react-components/2d-hud.js index 79bca2f933717ce4ded9fff1f458147d90284982..16cb311257d4c0e2fbd9f1037d7f4b5c15039ac6 100644 --- a/src/react-components/2d-hud.js +++ b/src/react-components/2d-hud.js @@ -9,7 +9,7 @@ class TopHUD extends Component { static propTypes = { muted: PropTypes.bool, frozen: PropTypes.bool, - videoShareSource: PropTypes.string, + videoShareMediaSource: PropTypes.string, availableVREntryTypes: PropTypes.object, onToggleMute: PropTypes.func, onToggleFreeze: PropTypes.func, @@ -20,14 +20,16 @@ class TopHUD extends Component { }; state = { - showVideoShareOptions: false + showVideoShareOptions: false, + lastActiveMediaSource: null }; handleVideoShareClicked = source => { - if (this.props.videoShareSource) { + if (this.props.videoShareMediaSource) { this.props.onEndShareVideo(); } else { this.props.onShareVideo(source); + this.setState({ lastActiveMediaSource: source }); } }; @@ -35,7 +37,10 @@ class TopHUD extends Component { if (this.props.availableVREntryTypes.isInHMD) return null; const videoShareExtraOptionTypes = []; - const primaryVideoShareType = this.props.videoShareSource || (AFRAME.utils.device.isMobile() ? "camera" : "screen"); + const primaryVideoShareType = + this.props.videoShareMediaSource || + this.state.lastActiveMediaSource || + (AFRAME.utils.device.isMobile() ? "camera" : "screen"); if (this.state.showVideoShareOptions) { videoShareExtraOptionTypes.push(primaryVideoShareType); @@ -60,10 +65,10 @@ class TopHUD extends Component { return ( <div - className={cx(styles.iconButton, styles.share_screen, { - [styles.active]: this.props.videoShareSource === primaryVideoShareType + className={cx(styles.iconButton, styles[`share_${primaryVideoShareType}`], { + [styles.active]: this.props.videoShareMediaSource === primaryVideoShareType })} - title={this.props.videoShareSource !== null ? "Stop sharing" : `Share ${primaryVideoShareType}`} + title={this.props.videoShareMediaSource !== null ? "Stop sharing" : `Share ${primaryVideoShareType}`} onClick={() => { if (!this.state.showVideoShareOptions) { this.handleVideoShareClicked(primaryVideoShareType); @@ -77,9 +82,9 @@ class TopHUD extends Component { <div key={type} className={cx(styles.iconButton, styles[`share_${type}`], { - [styles.active]: this.props.videoShareSource === type + [styles.active]: this.props.videoShareMediaSource === type })} - title={this.props.videoShareSource === type ? "Stop sharing" : `Share ${type}`} + title={this.props.videoShareMediaSource === type ? "Stop sharing" : `Share ${type}`} onClick={() => this.handleVideoShareClicked(type)} onMouseOver={showExtrasOnHover} /> diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js index 9aee690248a5c45cc6db6e84080295195eeeaa28..108c3a9447fa8abf3f77fe2857ef39d610bb37aa 100644 --- a/src/react-components/ui-root.js +++ b/src/react-components/ui-root.js @@ -128,7 +128,8 @@ class UIRoot extends Component { exited: false, showProfileEntry: false, - pendingMessage: "" + pendingMessage: "", + videoShareMediaSource: null }; componentDidMount() { @@ -137,12 +138,16 @@ class UIRoot extends Component { this.props.scene.addEventListener("loaded", this.onSceneLoaded); this.props.scene.addEventListener("stateadded", this.onAframeStateChanged); this.props.scene.addEventListener("stateremoved", this.onAframeStateChanged); + this.props.scene.addEventListener("share_video_enabled", this.onShareVideoEnabled); + this.props.scene.addEventListener("share_video_disabled", this.onShareVideoDisabled); this.props.scene.addEventListener("exit", this.exit); } componentWillUnmount() { this.props.scene.removeEventListener("loaded", this.onSceneLoaded); this.props.scene.removeEventListener("exit", this.exit); + this.props.scene.removeEventListener("share_video_enabled", this.onShareVideoEnabled); + this.props.scene.removeEventListener("share_video_disabled", this.onShareVideoDisabled); } onSceneLoaded = () => { @@ -157,6 +162,14 @@ class UIRoot extends Component { }); }; + onShareVideoEnabled = e => { + this.setState({ videoShareMediaSource: e.detail.source }); + }; + + onShareVideoDisabled = () => { + this.setState({ videoShareMediaSource: null }); + }; + toggleMute = () => { this.props.scene.emit("action_mute"); }; @@ -169,6 +182,14 @@ class UIRoot extends Component { this.props.scene.emit("action_space_bubble"); }; + shareVideo = mediaSource => { + this.props.scene.emit(`action_share_${mediaSource}`); + }; + + endShareVideo = () => { + this.props.scene.emit("action_end_video_sharing"); + }; + spawnPen = () => { this.props.scene.emit("penButtonPressed"); }; @@ -1057,10 +1078,13 @@ class UIRoot extends Component { muted={this.state.muted} frozen={this.state.frozen} spacebubble={this.state.spacebubble} + videoShareMediaSource={this.state.videoShareMediaSource} availableVREntryTypes={this.props.availableVREntryTypes} onToggleMute={this.toggleMute} onToggleFreeze={this.toggleFreeze} onToggleSpaceBubble={this.toggleSpaceBubble} + onShareVideo={this.shareVideo} + onEndShareVideo={this.endShareVideo} onSpawnPen={this.spawnPen} onSpawnCamera={() => this.props.scene.emit("action_spawn_camera")} /> diff --git a/src/scene-entry-manager.js b/src/scene-entry-manager.js index f58454b0ec2b12793b845fdf5ccb8a2ddae9aa2d..6b36a09eec0a1b435fe06847dfc2804bf07e8623 100644 --- a/src/scene-entry-manager.js +++ b/src/scene-entry-manager.js @@ -256,6 +256,7 @@ export default class SceneEntryManager { } this.scene.emit("share_video_enabled", { source: constraints.video.mediaSource }); + isHandlingVideoShare = false; }; this.scene.addEventListener("action_share_camera", () => {