Merge pull request #5718 from djballowe/feat/record-mode

Feat/record mode

src/react-components/room/Tip.scss

@@ -48,4 +48,18 @@
     border-color: theme.$tip-button-color-pressed;
     background-color: theme.$tip-button-color-pressed;
   }
-}
+}
+
+:local(.toast) {
+  animation: vanish 5s;
+  animation-fill-mode: forwards;
+  @keyframes vanish {
+    70% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+}

src/react-components/room/TipContainer.js

@@ -2,6 +2,7 @@ import React, { useCallback, useState } from "react";
 import PropTypes from "prop-types";
 import { FormattedMessage, useIntl, defineMessages } from "react-intl";
 import { Tip } from "./Tip";
+import { ToastTip } from "./ToastTip";
 import { useEffect } from "react";
 import { discordBridgesForPresences, hasEmbedPresences } from "../../utils/phoenix-utils";
 import configs from "../../utils/configs";
@@ -75,7 +76,26 @@ export function FullscreenTip(props) {
   );
 }
 
-export function TipContainer({ hide, inLobby, inRoom, isStreaming, isEmbedded, scene, store, hubId, presences }) {
+export function RecordModeTip(props) {
+  return (
+    <ToastTip>
+      <FormattedMessage id="record-mode-enabled-tip" defaultMessage="Record mode on, press 'B' to toggle off" />
+    </ToastTip>
+  );
+}
+
+export function TipContainer({
+  hide,
+  inLobby,
+  inRoom,
+  isStreaming,
+  isEmbedded,
+  scene,
+  store,
+  hubId,
+  presences,
+  isRecordMode
+}) {
   const intl = useIntl();
   const [lobbyTipDismissed, setLobbyTipDismissed] = useState(false);
   const [broadcastTipDismissed, setBroadcastTipDismissed] = useState(() =>
@@ -94,15 +114,15 @@ export function TipContainer({ hide, inLobby, inRoom, isStreaming, isEmbedded, s
 
   useEffect(
     () => {
-      function onSceneTipChanged({ detail: tipId }) {
-        setOnboardingTipId(tipId);
-      }
+    function onSceneTipChanged({ detail: tipId }) {
+      setOnboardingTipId(tipId);
+    }
 
-      scene.addEventListener("tip-changed", onSceneTipChanged);
+    scene.addEventListener("tip-changed", onSceneTipChanged);
 
-      setOnboardingTipId(scene.systems.tips.activeTip);
-    },
-    [scene]
+    setOnboardingTipId(scene.systems.tips.activeTip);
+  },
+  [scene]
   );
 
   const discordBridges = presences ? discordBridgesForPresences(presences) : [];

src/react-components/room/ToastTip.js

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import styles from "./Tip.scss";
+
+export function ToastTip({ className, children, ...rest }) {
+  return (
+    <div className={classNames(styles.tip, styles.toast, className)} {...rest}>
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+}
+
+ToastTip.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node
+};

src/react-components/ui-root.js

@@ -90,7 +90,7 @@ import { UserProfileSidebarContainer } from "./room/UserProfileSidebarContainer"
 import { CloseRoomModal } from "./room/CloseRoomModal";
 import { WebVRUnsupportedModal } from "./room/WebVRUnsupportedModal";
 import { TweetModalContainer } from "./room/TweetModalContainer";
-import { TipContainer, FullscreenTip } from "./room/TipContainer";
+import { TipContainer, FullscreenTip, RecordModeTip } from "./room/TipContainer";
 import { SpectatingLabel } from "./room/SpectatingLabel";
 import { SignInMessages } from "./auth/SignInModal";
 import { MediaDevicesEvents } from "../utils/media-devices-utils";
@@ -185,6 +185,7 @@ class UIRoot extends Component {
     showPrefs: false,
     watching: false,
     isStreaming: false,
+    isRecordingMode: false,
 
     waitingOnAudio: false,
     audioTrackClone: null,
@@ -327,6 +328,21 @@ class UIRoot extends Component {
     this.props.scene.addEventListener("action_toggle_ui", () =>
       this.setState({ hide: !this.state.hide, hideUITip: false })
     );
+    this.props.scene.addEventListener("action_toggle_record", () => {
+      const cursor = document.querySelector("#right-cursor");
+      if (this.state.isRecordingMode) {
+        // If isRecordingMode is true then toggle it off.
+        cursor.object3D.children[1].material.visible = true;
+        this.setState({ hide: false, hideUITip: false, isRecordingMode: false });
+        document.querySelector(".rs-fps-counter").style.visibility = "visible";
+        document.querySelector(".rs-base").style.visibility = "visible";
+      } else {
+        cursor.object3D.children[1].material.visible = false;
+        this.setState({ hide: true, hideUITip: true, isRecordingMode: true });
+        document.querySelector(".rs-fps-counter").style.visibility = "hidden";
+        document.querySelector(".rs-base").style.visibility = "hidden";
+      }
+    });
     this.props.scene.addEventListener("devicechange", () => {
       this.forceUpdate();
     });
@@ -948,6 +964,13 @@ class UIRoot extends Component {
       isGhost,
       hide
     };
+    if (this.state.isRecordingMode) {
+      return (
+        <div className={classNames(rootStyles)}>
+          <RoomLayoutContainer scene={this.props.scene} store={this.props.store} viewport={<RecordModeTip />} />
+        </div>
+      );
+    }
     if (this.props.hide || this.state.hide) {
       return (
         <div className={classNames(rootStyles)}>

src/systems/ui-hotkeys.js

@@ -18,7 +18,7 @@ AFRAME.registerSystem("ui-hotkeys", {
     this.mediaSearchStore = window.APP.mediaSearchStore;
   },
 
-  tick: function() {
+  tick: function () {
     if (!this.userinput) {
       this.userinput = this.el.systems.userinput;
     }
@@ -62,5 +62,8 @@ AFRAME.registerSystem("ui-hotkeys", {
     if (this.userinput.get(paths.actions.toggleUI)) {
       this.el.emit("action_toggle_ui");
     }
+    if (this.userinput.get(paths.actions.toggleRecord)) {
+      this.el.emit("action_toggle_record");
+    }
   }
 });

src/systems/userinput/bindings/keyboard-mouse-user.js

@@ -151,6 +151,11 @@ export const keyboardMouseUserBindings = addSetsToBindings({
       dest: { value: paths.actions.snapRotateRight },
       xform: xforms.rising
     },
+    {
+      src: { value: paths.device.keyboard.key("b") },
+      dest: { value: paths.actions.toggleRecord },
+      xform: xforms.rising
+    },
     {
       src: { value: paths.device.keyboard.key("Tab") },
       dest: { value: paths.actions.toggleFreeze },

src/systems/userinput/paths.js

@@ -24,6 +24,7 @@ paths.actions.thaw = "/actions/thaw";
 paths.actions.muteMic = "/actions/muteMic";
 paths.actions.toggleFly = "/actions/toggleFly";
 paths.actions.toggleUI = "/actions/toggleUI";
+paths.actions.toggleRecord = "/actions/toggleRecord";
 paths.actions.waypointDeltaDistance = "/actions/waypointDeltaDistance";
 paths.actions.focusChat = "/actions/focusChat";
 paths.actions.focusChatCommand = "/actions/focusChatCommand";