diff --git a/src/assets/stylesheets/2d-hud.scss b/src/assets/stylesheets/2d-hud.scss index 834223deb7562cee1bc1a3ea01f39a3c27b864a2..b1d4f0584822ec7161fadc0bfbd443fd7525891f 100644 --- a/src/assets/stylesheets/2d-hud.scss +++ b/src/assets/stylesheets/2d-hud.scss @@ -45,11 +45,11 @@ :local(.video-share-extra-options) { position: absolute; - top: 0; + top: -1px; left: 0; display: flex; flex-direction: column; - border-radius: 30px; + border-radius: 28px; padding: 3px 3px 6px 3px; background-color: rgba(72, 72, 72, 0.2); border: 2px solid rgba(72, 72, 72, 0.3); @@ -61,7 +61,7 @@ } :local(.iconButton):first-child { - margin-top: 0; + margin-top: 1px; } } } @@ -91,7 +91,7 @@ justify-content: center; align-items: center; cursor: pointer; - margin: 0px 2px; + margin: 0px 4px; } :local(.iconButton.small) { diff --git a/src/components/emit-scene-event-on-remove.js b/src/components/emit-scene-event-on-remove.js new file mode 100644 index 0000000000000000000000000000000000000000..4f6a02f5411a965dd461623a003d9bcb7a979dda --- /dev/null +++ b/src/components/emit-scene-event-on-remove.js @@ -0,0 +1,11 @@ +AFRAME.registerComponent("emit-scene-event-on-remove", { + schema: { + event: { default: null } + }, + + remove() { + if (this.data.event) { + this.el.sceneEl.emit(this.data.event, { el: this.el }); + } + } +}); diff --git a/src/hub.js b/src/hub.js index 1d74a88640664bb8530b434a64c5f1ef5a762227..b8c039be72fc43817085c0e1752889708758c50f 100644 --- a/src/hub.js +++ b/src/hub.js @@ -61,6 +61,7 @@ import "./components/gamma-factor"; import "./components/visible-to-owner"; import "./components/camera-tool"; import "./components/action-to-event"; +import "./components/emit-scene-event-on-remove"; import ReactDOM from "react-dom"; import React from "react"; diff --git a/src/network-schemas.js b/src/network-schemas.js index 686b91e484a7fa8e29efd14a41a9a3d4c05b9207..4d20913eaab0c320a50e355db072541b91442dc9 100644 --- a/src/network-schemas.js +++ b/src/network-schemas.js @@ -72,21 +72,6 @@ function registerNetworkSchemas() { ] }); - NAF.schemas.add({ - template: "#screen-template", - components: [ - { - component: "position", - requiresNetworkUpdate: vectorRequiresUpdate(0.001) - }, - { - component: "rotation", - requiresNetworkUpdate: vectorRequiresUpdate(0.5) - }, - "scale" - ] - }); - NAF.schemas.add({ template: "#interactable-media", components: [ diff --git a/src/react-components/2d-hud.js b/src/react-components/2d-hud.js index 16cb311257d4c0e2fbd9f1037d7f4b5c15039ac6..fd3e3317a420ac54ec210e0758d994a309bfbd16 100644 --- a/src/react-components/2d-hud.js +++ b/src/react-components/2d-hud.js @@ -54,7 +54,10 @@ class TopHUD extends Component { const showExtrasOnHover = () => { clearTimeout(this.hideVideoSharingButtonTimeout); - this.setState({ showVideoShareOptions: true }); + + if (!this.props.videoShareMediaSource) { + this.setState({ showVideoShareOptions: true }); + } }; const hideExtrasOnOut = () => { diff --git a/src/scene-entry-manager.js b/src/scene-entry-manager.js index 6b36a09eec0a1b435fe06847dfc2804bf07e8623..6614d9be1c7baa946d9e28c3034a13bca6ef2dc6 100644 --- a/src/scene-entry-manager.js +++ b/src/scene-entry-manager.js @@ -253,6 +253,9 @@ export default class SceneEntryManager { newStream.getVideoTracks().forEach(track => mediaStream.addTrack(track)); NAF.connection.adapter.setLocalMediaStream(mediaStream); currentVideoShareEntity = spawnMediaInfrontOfPlayer(mediaStream, undefined); + + // Wire up custom removal event which will stop the stream. + currentVideoShareEntity.setAttribute("emit-scene-event-on-remove", "event:action_end_video_sharing"); } this.scene.emit("share_video_enabled", { source: constraints.video.mediaSource }); @@ -298,7 +301,10 @@ export default class SceneEntryManager { this.scene.addEventListener("action_end_video_sharing", () => { if (isHandlingVideoShare) return; isHandlingVideoShare = true; - currentVideoShareEntity.parentNode.removeChild(currentVideoShareEntity); + + if (currentVideoShareEntity.parentNode) { + currentVideoShareEntity.parentNode.removeChild(currentVideoShareEntity); + } for (const track of mediaStream.getVideoTracks()) { mediaStream.removeTrack(track);