diff --git a/src/assets/hud/share_camera-hover.png b/src/assets/hud/share_camera-hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3ac1877a49e60780f8b0c28aa3ce22799600154
Binary files /dev/null and b/src/assets/hud/share_camera-hover.png differ
diff --git a/src/assets/hud/share_camera.png b/src/assets/hud/share_camera.png
new file mode 100644
index 0000000000000000000000000000000000000000..fd176add98ef6d8d5b4afea6f20b167581212b0a
Binary files /dev/null and b/src/assets/hud/share_camera.png differ
diff --git a/src/assets/hud/share_screen-hover.png b/src/assets/hud/share_screen-hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3ac1877a49e60780f8b0c28aa3ce22799600154
Binary files /dev/null and b/src/assets/hud/share_screen-hover.png differ
diff --git a/src/assets/hud/share_screen.png b/src/assets/hud/share_screen.png
new file mode 100644
index 0000000000000000000000000000000000000000..fd176add98ef6d8d5b4afea6f20b167581212b0a
Binary files /dev/null and b/src/assets/hud/share_screen.png differ
diff --git a/src/assets/hud/share_window-hover.png b/src/assets/hud/share_window-hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3ac1877a49e60780f8b0c28aa3ce22799600154
Binary files /dev/null and b/src/assets/hud/share_window-hover.png differ
diff --git a/src/assets/hud/share_window.png b/src/assets/hud/share_window.png
new file mode 100644
index 0000000000000000000000000000000000000000..fd176add98ef6d8d5b4afea6f20b167581212b0a
Binary files /dev/null and b/src/assets/hud/share_window.png differ
diff --git a/src/assets/stylesheets/2d-hud.scss b/src/assets/stylesheets/2d-hud.scss
index 197c036f569d78ac8b81e8271eb3aeadb1a477ff..43785286361b83cadb8369cb841ad74dad9964c4 100644
--- a/src/assets/stylesheets/2d-hud.scss
+++ b/src/assets/stylesheets/2d-hud.scss
@@ -41,6 +41,24 @@
padding-left: 5px;
padding-right: 45px;
margin-right: -40px;
+ position: relative;
+
+ :local(.video-share-extra-options) {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: flex;
+ flex-direction: column;
+ border-radius: 30px;
+ padding: 5px 5px 8px 5px;
+ background-color: rgba(79, 79, 79, 0.2);
+ z-index: 1;
+
+ :local(.icon-button) {
+ margin-top: 4px;
+ background-color: $hud-panel-background;
+ }
+ }
}
:local(.panel.right) {
@@ -68,6 +86,7 @@
justify-content: center;
align-items: center;
cursor: pointer;
+ margin: 0px 2px;
}
:local(.iconButton.small) {
@@ -144,3 +163,24 @@
:local(.iconButton.mobile-media-picker) {
background-image: url(../hud/spawn_photo.png);
}
+
+:local(.iconButton.share_camera) {
+ background-image: url(../hud/share_camera.png);
+}
+:local(.iconButton.share_camera:hover) {
+ background-image: url(../hud/share_camera-hover.png);
+}
+
+:local(.iconButton.share_screen) {
+ background-image: url(../hud/share_screen.png);
+}
+:local(.iconButton.share_screen:hover) {
+ background-image: url(../hud/share_screen-hover.png);
+}
+
+:local(.iconButton.share_window) {
+ background-image: url(../hud/share_window.png);
+}
+:local(.iconButton.share_window:hover) {
+ background-image: url(../hud/share_window-hover.png);
+}
diff --git a/src/react-components/2d-hud.js b/src/react-components/2d-hud.js
index 74577ff1ec0291d8bd14665fe0a7054c8a0f70e3..2b4b375482e70fb9bca4871a3dbc2f6d07ac3b71 100644
--- a/src/react-components/2d-hud.js
+++ b/src/react-components/2d-hud.js
@@ -1,41 +1,92 @@
-import React from "react";
+import React, { Component } from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import styles from "../assets/stylesheets/2d-hud.scss";
import uiStyles from "../assets/stylesheets/ui-root.scss";
-const TopHUD = ({ muted, frozen, onToggleMute, onToggleFreeze, onSpawnPen, onSpawnCamera }) => (
- <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}
- />
- </div>
- <div
- className={cx(uiStyles.uiInteractive, styles.iconButton, styles.large, styles.freeze, {
- [styles.active]: frozen
- })}
- title={frozen ? "Resume" : "Pause"}
- onClick={onToggleFreeze}
- />
- <div className={cx(uiStyles.uiInteractive, styles.panel, styles.right)}>
- <div className={cx(styles.iconButton, styles.spawn_pen)} title={"Drawing Pen"} onClick={onSpawnPen} />
- <div className={cx(styles.iconButton, styles.spawn_camera)} title={"Camera"} onClick={onSpawnCamera} />
- </div>
- </div>
-);
+class TopHUD extends Component {
+ static propTypes = {
+ muted: PropTypes.bool,
+ frozen: PropTypes.bool,
+ videoShareSource: PropTypes.bool,
+ onToggleMute: PropTypes.func,
+ onToggleFreeze: PropTypes.func,
+ onSpawnPen: PropTypes.func,
+ onSpawnCamera: PropTypes.func,
+ onShareVideo: PropTypes.func
+ };
-TopHUD.propTypes = {
- muted: PropTypes.bool,
- frozen: PropTypes.bool,
- onToggleMute: PropTypes.func,
- onToggleFreeze: PropTypes.func,
- onSpawnPen: PropTypes.func,
- onSpawnCamera: PropTypes.func
-};
+ state = {
+ showVideoShareOptions: false
+ };
+
+ handleVideoShareClicked = source => {};
+
+ render() {
+ return (
+ <div className={cx(styles.container, styles.top, styles.unselectable)}>
+ <div className={cx(uiStyles.uiInteractive, styles.panel, styles.left)}>
+ <div
+ className={cx(styles.iconButton, styles.share_screen, {
+ [styles.active]: this.props.videoShareSource === "screen"
+ })}
+ title={this.props.videoShareSource === "screen" ? "Stop Screen Sharing" : "Share Screen"}
+ onClick={() => this.handleVideoShareClicked("screen")}
+ >
+ <div className={cx(styles.videoShareExtraOptions)}>
+ <div
+ className={cx(styles.iconButton, styles.share_window, {
+ [styles.active]: this.props.videoShareSource === "window"
+ })}
+ title={this.props.videoShareSource === "window" ? "Stop Window Sharing" : "Share Window"}
+ onClick={() => this.handleVideoShareClicked("window")}
+ />
+ <div
+ className={cx(styles.iconButton, styles.share_window, {
+ [styles.active]: this.props.videoShareSource === "window"
+ })}
+ title={this.props.videoShareSource === "window" ? "Stop Window Sharing" : "Share Window"}
+ onClick={() => this.handleVideoShareClicked("window")}
+ />
+ <div
+ className={cx(styles.iconButton, styles.share_camera, {
+ [styles.active]: this.props.videoShareSource === "camera"
+ })}
+ title={this.props.videoShareSource === "camera" ? "Stop Camera Sharing" : "Share Camera"}
+ onClick={() => this.handleVideoShareClicked("camera")}
+ />
+ </div>
+ </div>
+ <div
+ className={cx(styles.iconButton, styles.mute, { [styles.active]: this.props.muted })}
+ title={this.props.muted ? "Unmute Mic" : "Mute Mic"}
+ onClick={this.props.onToggleMute}
+ />
+ </div>
+ <div
+ className={cx(uiStyles.uiInteractive, styles.iconButton, styles.large, styles.freeze, {
+ [styles.active]: this.props.frozen
+ })}
+ title={this.props.frozen ? "Resume" : "Pause"}
+ onClick={this.props.onToggleFreeze}
+ />
+ <div className={cx(uiStyles.uiInteractive, styles.panel, styles.right)}>
+ <div
+ className={cx(styles.iconButton, styles.spawn_pen)}
+ title={"Drawing Pen"}
+ onClick={this.props.onSpawnPen}
+ />
+ <div
+ className={cx(styles.iconButton, styles.spawn_camera)}
+ title={"Camera"}
+ onClick={this.props.onSpawnCamera}
+ />
+ </div>
+ </div>
+ );
+ }
+}
const BottomHUD = ({ onCreateObject, showPhotoPicker, onMediaPicked }) => (
<div className={cx(styles.container, styles.column, styles.bottom, styles.unselectable)}>
diff --git a/src/scene-entry-manager.js b/src/scene-entry-manager.js
index bee6875991fdccc1a38f9bc505ee98364b708225..d67266e83691f3217a92272e86f6cfe6c71acec1 100644
--- a/src/scene-entry-manager.js
+++ b/src/scene-entry-manager.js
@@ -255,6 +255,8 @@ export default class SceneEntryManager {
NAF.connection.adapter.setLocalMediaStream(mediaStream);
currentVideoShareEntity = spawnMediaInfrontOfPlayer(mediaStream, undefined);
}
+
+ this.scene.emit("share_video_enabled", { constraints });
} else {
currentVideoShareEntity.parentNode.removeChild(currentVideoShareEntity);
@@ -264,6 +266,8 @@ export default class SceneEntryManager {
NAF.connection.adapter.setLocalMediaStream(mediaStream);
currentVideoShareEntity = null;
+
+ this.scene.emit("share_video_disabled");
}
isHandlingVideoShare = false;