Add invite others view when there's only 1 participant in the call

custom/fitness-demo/components/Call/InviteOthers.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import Button from '@custom/shared/components/Button';
+import { Card, CardBody, CardHeader } from '@custom/shared/components/Card';
+import { TextInput } from '@custom/shared/components/Input';
+import Tile from '@custom/shared/components/Tile';
+import { DEFAULT_ASPECT_RATIO } from '@custom/shared/constants';
+import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
+
+export const InviteOthers = () => {
+  const { localParticipant } = useParticipants();
+
+  return (
+    <div className="invite-wrapper">
+      <div className="invite-others">
+        <Card variant="dark">
+          <CardHeader>
+            Waiting for others to join!
+          </CardHeader>
+          <CardBody>
+            <div className="link">
+              <TextInput
+                variant="border"
+                value={window.location.href}
+                disabled
+              />
+              <Button
+                onClick={() => navigator.clipboard.writeText(window.location.href)}
+              >
+                Copy link
+              </Button>
+            </div>
+          </CardBody>
+        </Card>
+      </div>
+      <div className="preview">
+        <Tile participant={localParticipant} mirrored aspectRatio={DEFAULT_ASPECT_RATIO} />
+      </div>
+      <style jsx>{`
+        .invite-wrapper {
+          display: flex;
+          height: 100%;
+          width: 100%;
+          position: relative;
+        }
+        
+        .invite-others {
+          width: 50%;
+          margin: auto;
+          text-align: center;
+        }
+        
+        .link {
+          display: flex;
+          justify-content: center;
+          gap: 10px;
+        }
+        
+        .preview {
+          width: 186px;
+        }
+      `}
+      </style>
+    </div>
+  )
+}
+
+export default InviteOthers;

custom/fitness-demo/components/Call/VideoView.js

@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react';
 import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
 import { useUIState, VIEW_MODE_SPEAKER } from '@custom/shared/contexts/UIStateProvider';
-import { GridView } from '../GridView/GridView';
+import { GridView } from '../GridView';
 import { SpeakerView } from '../SpeakerView';
+import InviteOthers from './InviteOthers';
 
 export const VideoView = () => {
   const { viewMode, setIsShowingScreenshare } = useUIState();
@@ -14,6 +15,8 @@ export const VideoView = () => {
   }, [screens, setIsShowingScreenshare]);
 
   if (!participants.length) return null;
+  if (participants.length === 1) return <InviteOthers />;
+
   return viewMode === VIEW_MODE_SPEAKER ? <SpeakerView />: <GridView />;
 };
 

custom/shared/components/Card/Card.js

@@ -2,14 +2,21 @@ import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-export const Card = ({ children, className }) => (
+export const Card = ({ children, className, variant }) => (
-  <div className={classNames('card', className)}>
+  <div className={classNames('card', className, variant)}>
     {children}
     <style jsx>{`
-      background: white;
+
-      box-sizing: border-box;
+      .card {
-      border-radius: var(--radius-md);
+        background: var(--reverse);
-      padding: var(--spacing-md);
+        box-sizing: border-box;
+        border-radius: var(--radius-md);
+        padding: var(--spacing-md);
+      }
+      
+      .card.dark {
+        background-color: var(--blue-dark);;
+      }
     `}</style>
   </div>
 );
@@ -26,7 +33,6 @@ export const CardHeader = ({ children }) => (
       h2 {
         font-size: 1.375rem;
         margin: 0px;
-        color: var(--text-default);
       }
 
       & + :global(.card-body) {

custom/shared/components/Input/Input.js

@@ -113,7 +113,7 @@ const InputContainer = ({ children, prefix, className }) => (
         opacity: 1;
       }
       .dark :global(input)::-moz-placeholder {
-        ccolor: var(--text-mid);
+        color: var(--text-mid);
         opacity: 1;
       }
       .dark :global(input)::-ms-input-placeholder {
@@ -126,6 +126,12 @@ const InputContainer = ({ children, prefix, className }) => (
         border: 0px;
         box-shadow: none;
       }
+      
+      .border :global(input) {
+        background: transparent;
+        border: 1px solid var(--reverse);
+        color: var(--reverse);
+      }
     `}</style>
   </div>
 );