Join room view

src/CopyButton.jsx

@@ -6,7 +6,7 @@ import { ReactComponent as CopyIcon } from "./icons/Copy.svg";
 import classNames from "classnames";
 import styles from "./CopyButton.module.css";
 
-export function CopyButton({ value, className, ...rest }) {
+export function CopyButton({ value, className, children, ...rest }) {
   const [isCopied, setCopied] = useClipboard(value, { successDuration: 3000 });
   const { buttonProps } = useButton({
     onPress: () => setCopied(),
@@ -28,7 +28,7 @@ export function CopyButton({ value, className, ...rest }) {
         </>
       ) : (
         <>
-          <span>{value}</span>
+          <span>{children || value}</span>
           <CopyIcon />
         </>
       )}

src/Home.jsx

@@ -20,13 +20,7 @@ import {
   useGroupCallRooms,
   usePublicRooms,
 } from "./ConferenceCallManagerHooks";
-import {
-  Header,
-  HeaderLogo,
-  LeftNav,
-  RightNav,
-  UserDropdownMenu,
-} from "./Header";
+import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
 import ColorHash from "color-hash";
 import styles from "./Home.module.css";
 import { FieldRow, InputField, Button, ErrorMessage } from "./Input";
@@ -36,6 +30,7 @@ import {
   GroupCallType,
 } from "matrix-js-sdk/src/browser-index";
 import { Facepile } from "./Facepile";
+import { UserMenu } from "./UserMenu";
 
 const colorHash = new ColorHash({ lightness: 0.3 });
 
@@ -132,9 +127,9 @@ export function Home({ client, onLogout }) {
           <HeaderLogo />
         </LeftNav>
         <RightNav>
-          <UserDropdownMenu
-            userName={client.getUserIdLocalpart()}
+          <UserMenu
             signedIn
+            userName={client.getUserIdLocalpart()}
             onLogout={onLogout}
           />
         </RightNav>

src/Room.jsx

@@ -16,13 +16,12 @@ limitations under the License.
 
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styles from "./Room.module.css";
-import { useLocation, useParams, useHistory } from "react-router-dom";
+import { useLocation, useParams, useHistory, Link } from "react-router-dom";
 import {
   HangupButton,
   MicButton,
   VideoButton,
   ScreenshareButton,
-  DropdownButton,
 } from "./RoomButton";
 import {
   Header,
@@ -30,7 +29,6 @@ import {
   RightNav,
   RoomHeaderInfo,
   RoomSetupHeaderInfo,
-  UserDropdownMenu,
 } from "./Header";
 import { Button } from "./Input";
 import { GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
@@ -49,7 +47,7 @@ import * as Sentry from "@sentry/react";
 import { OverflowMenu } from "./OverflowMenu";
 import { GridLayoutMenu } from "./GridLayoutMenu";
 import { UserMenu } from "./UserMenu";
-import { useMediaHandler } from "./useMediaHandler";
+import { CopyButton } from "./CopyButton";
 
 const canScreenshare = "getDisplayMedia" in navigator.mediaDevices;
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -126,6 +124,7 @@ export function Room({ client, onLogout }) {
 }
 
 export function GroupCallView({ client, groupCall, simpleGrid, onLogout }) {
+  const [showInspector, setShowInspector] = useState(false);
   const {
     state,
     error,
@@ -200,6 +199,8 @@ export function GroupCallView({ client, groupCall, simpleGrid, onLogout }) {
         localScreenshareFeed={localScreenshareFeed}
         screenshareFeeds={screenshareFeeds}
         simpleGrid={simpleGrid}
+        setShowInspector={setShowInspector}
+        showInspector={showInspector}
       />
     );
   } else if (state === GroupCallState.Entering) {
@@ -219,6 +220,8 @@ export function GroupCallView({ client, groupCall, simpleGrid, onLogout }) {
         localVideoMuted={localVideoMuted}
         toggleLocalVideoMuted={toggleLocalVideoMuted}
         toggleMicrophoneMuted={toggleMicrophoneMuted}
+        setShowInspector={setShowInspector}
+        showInspector={showInspector}
       />
     );
   }
@@ -257,20 +260,13 @@ function RoomSetupView({
   toggleLocalVideoMuted,
   toggleMicrophoneMuted,
   hasLocalParticipant,
+  setShowInspector,
+  showInspector,
 }) {
   const history = useHistory();
   const { stream } = useCallFeed(localCallFeed);
   const videoRef = useMediaStream(stream, true);
 
-  const {
-    audioInput,
-    audioInputs,
-    setAudioInput,
-    videoInput,
-    videoInputs,
-    setVideoInput,
-  } = useMediaHandler(client);
-
   useEffect(() => {
     onInitLocalCallFeed();
   }, [onInitLocalCallFeed]);
@@ -285,14 +281,15 @@ function RoomSetupView({
           />
         </LeftNav>
         <RightNav>
-          <UserDropdownMenu
-            userName={client.getUserIdLocalpart()}
+          <UserMenu
             signedIn
+            userName={client.getUserIdLocalpart()}
             onLogout={onLogout}
           />
         </RightNav>
       </Header>
       <div className={styles.joinRoom}>
+        <h1>New Call</h1>
         {hasLocalParticipant && (
           <p>Warning, you are signed into this call on another device.</p>
         )}
@@ -308,43 +305,41 @@ function RoomSetupView({
             </p>
           )}
           <video ref={videoRef} muted playsInline disablePictureInPicture />
+          {state === GroupCallState.LocalCallFeedInitialized && (
+            <>
+              <Button
+                className={styles.joinCallButton}
+                disabled={state !== GroupCallState.LocalCallFeedInitialized}
+                onClick={onEnter}
+              >
+                Join call now
+              </Button>
+              <div className={styles.previewButtons}>
+                <MicButton
+                  muted={microphoneMuted}
+                  onPress={toggleMicrophoneMuted}
+                />
+                <VideoButton
+                  muted={localVideoMuted}
+                  onPress={toggleLocalVideoMuted}
+                />
+                <OverflowMenu
+                  roomUrl={window.location.href}
+                  setShowInspector={setShowInspector}
+                  showInspector={showInspector}
+                  client={client}
+                />
+              </div>
+            </>
+          )}
         </div>
-        {state === GroupCallState.LocalCallFeedInitialized && (
-          <div className={styles.previewButtons}>
-            <DropdownButton
-              value={audioInput}
-              onChange={({ value }) => setAudioInput(value)}
-              options={audioInputs.map(({ label, deviceId }) => ({
-                label,
-                value: deviceId,
-              }))}
-            >
-              <MicButton
-                muted={microphoneMuted}
-                onClick={toggleMicrophoneMuted}
-              />
-            </DropdownButton>
-            <DropdownButton
-              value={videoInput}
-              onChange={({ value }) => setVideoInput(value)}
-              options={videoInputs.map(({ label, deviceId }) => ({
-                label,
-                value: deviceId,
-              }))}
-            >
-              <VideoButton
-                muted={localVideoMuted}
-                onClick={toggleLocalVideoMuted}
-              />
-            </DropdownButton>
-          </div>
-        )}
-        <Button
-          disabled={state !== GroupCallState.LocalCallFeedInitialized}
-          onClick={onEnter}
-        >
-          Enter Call
-        </Button>
+        <p>Or</p>
+        <CopyButton value={window.location.href} className={styles.copyButton}>
+          Copy call link and join later
+        </CopyButton>
+        <Link className={styles.homeLink} to="/">
+          Take me Home
+        </Link>
       </div>
     </>
   );
@@ -366,9 +361,9 @@ function InRoomView({
   isScreensharing,
   screenshareFeeds,
   simpleGrid,
+  setShowInspector,
+  showInspector,
 }) {
-  const [showInspector, setShowInspector] = useState(false);
-
   const [layout, setLayout] = useVideoGridLayout();
 
   const items = useMemo(() => {

src/Room.module.css

@@ -32,10 +32,16 @@ limitations under the License.
   margin-bottom: 20px;
 }
 
+.homeLink {
+  margin-top: 50px;
+  color: #0dbd8b;
+  text-decoration: none;
+}
+
 .preview {
   position: relative;
-  max-width: 400px;
-  max-height: 225px;
+  width: 100%;
+  max-width: 816px;
   border-radius: 24px;
   overflow: hidden;
   background-color: var(--bgColor3);
@@ -45,7 +51,8 @@ limitations under the License.
 .preview video {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
+  background-color: black;
 }
 
 .webcamPermissions {
@@ -60,11 +67,26 @@ limitations under the License.
 }
 
 .previewButtons {
-  position: relative;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 66px;
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 20px;
+  background-color: rgba(23, 25, 28, 0.9);
+}
+
+.joinCallButton {
+  position: absolute;
+  bottom: 86px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.copyButton {
+  width: auto !important;
 }
 
 .previewButtons > * {