Add call ended page and redirect

src/FullScreenView.jsx

@@ -3,10 +3,11 @@ import { Link, useLocation } from "react-router-dom";
 import { ErrorMessage } from "./Input";
 import styles from "./FullScreenView.module.css";
 import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
+import classNames from "classnames";
 
-export function FullScreenView({ children }) {
+export function FullScreenView({ className, children }) {
   return (
-    <div className={styles.page}>
+    <div className={classNames(styles.page, className)}>
       <Header>
         <LeftNav>
           <HeaderLogo />

src/Home.module.css

@@ -55,20 +55,6 @@
   margin-bottom: 0;
 }
 
-.left .content hr {
-  width: calc(100% - 24px);
-  border: none;
-  border-top: 1px solid var(--bgColor4);
-  color: var(--textColor2);
-  overflow: visible;
-  text-align: center;
-  height: 5px;
-  font-weight: 600;
-  font-size: 15px;
-  line-height: 24px;
-  margin: 0 12px;
-}
-
 .left .content hr:after {
   background-color: var(--bgColor1);
   content: "OR";

src/Room.jsx

@@ -63,8 +63,6 @@ export function Room() {
   const { loading, isAuthenticated, error, client, registerGuest, isGuest } =
     useClient();
 
-  console.log({ isGuest });
-
   useEffect(() => {
     if (!loading && !isAuthenticated) {
       setRegisteringGuest(true);
@@ -180,6 +178,19 @@ export function GroupCallView({
     };
   }, [groupCall]);
 
+  const [left, setLeft] = useState(false);
+  const history = useHistory();
+
+  const onLeave = useCallback(() => {
+    leave();
+
+    if (!isGuest) {
+      history.push("/");
+    } else {
+      setLeft(true);
+    }
+  }, [leave, history, isGuest]);
+
   if (error) {
     return <ErrorView error={error} />;
   } else if (state === GroupCallState.Entered) {
@@ -194,7 +205,7 @@ export function GroupCallView({
         toggleMicrophoneMuted={toggleMicrophoneMuted}
         userMediaFeeds={userMediaFeeds}
         activeSpeaker={activeSpeaker}
-        onLeave={leave}
+        onLeave={onLeave}
         toggleScreensharing={toggleScreensharing}
         isScreensharing={isScreensharing}
         localScreenshareFeed={localScreenshareFeed}
@@ -207,6 +218,8 @@ export function GroupCallView({
     );
   } else if (state === GroupCallState.Entering) {
     return <EnteringRoomView />;
+  } else if (left) {
+    return <CallEndedScreen />;
   } else {
     return (
       <RoomSetupView
@@ -468,3 +481,33 @@ function InRoomView({
     </div>
   );
 }
+
+export function CallEndedScreen() {
+  return (
+    <FullScreenView className={styles.callEndedScreen}>
+      <h1>Your call is now ended</h1>
+      <hr />
+      <h2>Why not finish by creating an account?</h2>
+      <p>You'll be able to:</p>
+      <ul>
+        <li>Easily access all your previous call links</li>
+        <li>Set a username and avatar</li>
+        <li>
+          Get your own Matrix ID so you can log in to{" "}
+          <a href="https://element.io" target="_blank">
+            Element
+          </a>
+        </li>
+      </ul>
+      <LinkButton
+        className={styles.callEndedButton}
+        size="lg"
+        variant="default"
+        to="/login"
+      >
+        Create account
+      </LinkButton>
+      <Link to="/">Not now, return to home screen</Link>
+    </FullScreenView>
+  );
+}

src/Room.module.css

@@ -164,6 +164,30 @@ limitations under the License.
   margin-right: 0px;
 }
 
+.callEndedScreen h1 {
+  margin-bottom: 60px;
+}
+
+.callEndedScreen h2 {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 32px;
+}
+
+.callEndedScreen p {
+  margin: 0 0 16px 0;
+}
+
+.callEndedScreen ul {
+  padding: 0;
+  margin-bottom: 40px;
+}
+
+.callEndedButton {
+  width: 100%;
+  max-width: 360px;
+}
+
 @media (min-width: 800px) {
   .roomContainer {
     flex-direction: row;

src/button/Button.jsx

@@ -10,7 +10,7 @@ import { ReactComponent as ScreenshareIcon } from "../icons/Screenshare.svg";
 import { useButton } from "@react-aria/button";
 import { useObjectRef } from "@react-aria/utils";
 
-const variantToClassName = {
+export const variantToClassName = {
   default: [styles.button],
   toolbar: [styles.toolbarButton],
   icon: [styles.iconButton],
@@ -19,9 +19,22 @@ const variantToClassName = {
   iconCopy: [styles.iconCopyButton],
 };
 
+export const sizeToClassName = {
+  lg: [styles.lg],
+};
+
 export const Button = forwardRef(
   (
-    { variant = "default", on, off, iconStyle, className, children, ...rest },
+    {
+      variant = "default",
+      size,
+      on,
+      off,
+      iconStyle,
+      className,
+      children,
+      ...rest
+    },
     ref
   ) => {
     const buttonRef = useObjectRef(ref);
@@ -40,6 +53,7 @@ export const Button = forwardRef(
       <button
         className={classNames(
           variantToClassName[variant],
+          sizeToClassName[size],
           styles[iconStyle],
           className,
           {

src/button/Button.module.css

@@ -172,3 +172,7 @@ limitations under the License.
   fill: transparent;
   stroke: #0dbd8b;
 }
+
+.lg {
+  height: 40px;
+}

src/button/LinkButton.jsx

@@ -1,11 +1,18 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import classNames from "classnames";
-import styles from "./Button.module.css";
+import { variantToClassName, sizeToClassName } from "./Button";
 
-export function LinkButton({ className, children, ...rest }) {
+export function LinkButton({ className, variant, size, children, ...rest }) {
   return (
-    <Link className={classNames(styles.secondary, className)} {...rest}>
+    <Link
+      className={classNames(
+        variantToClassName[variant || "secondary"],
+        sizeToClassName[size],
+        className
+      )}
+      {...rest}
+    >
       {children}
     </Link>
   );

src/index.css

@@ -140,8 +140,8 @@ body,
 }
 
 a {
-  color: #0086e6;
+  color: var(--primaryColor);
-  font-weight: bold;
+  text-decoration: none;
 }
 
 a:hover,
@@ -149,6 +149,20 @@ a:active {
   opacity: 0.8;
 }
 
+hr {
+  width: calc(100% - 24px);
+  border: none;
+  border-top: 1px solid var(--bgColor4);
+  color: var(--textColor2);
+  overflow: visible;
+  text-align: center;
+  height: 5px;
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 24px;
+  margin: 0 12px;
+}
+
 summary {
   font-size: 14px;
 }