Merge pull request #20 from wmalik-mux/main

Chat using Custom Events, Display Names, and UI refresh

Author: refactornator

.gitignore

@@ -25,6 +25,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

components/Controls.tsx

@@ -9,11 +9,7 @@ import ControlsLeft from "./controls/ControlsLeft";
 import ControlsCenter from "./controls/ControlsCenter";
 import ACRScoreDialog from "./modals/ACRScoreDialog";
 
-interface Props {
-  renameCallback: (newName: string) => void;
-}
-
-export default function Controls({ renameCallback }: Props): JSX.Element {
+export default function Controls(): JSX.Element {
   const router = useRouter();
   const { leaveSpace } = useSpace();
   const { isOpen: isACRScoreDialogOpen, onOpen: onACRScoreDialogOpen } =
@@ -38,7 +34,7 @@ export default function Controls({ renameCallback }: Props): JSX.Element {
       <ACRScoreDialog isOpen={isACRScoreDialogOpen} onClose={leaveSpacePage} />
       <Flex
         alignItems="center"
-        backgroundColor="#383838"
+        backgroundColor="#0a0a0b"
         bottom="0px"
         flexDirection="row"
         height={{ base: "60px", sm: "80px" }}
@@ -50,8 +46,12 @@ export default function Controls({ renameCallback }: Props): JSX.Element {
         zIndex={1000}
       >
         <ControlsLeft />
-        <ControlsCenter onLeave={promptForACR} onRename={renameCallback} />
-        <ControlsRight onLeave={promptForACR} />
+        {!isACRScoreDialogOpen && (
+          <>
+            <ControlsCenter onLeave={promptForACR} />
+            <ControlsRight onLeave={promptForACR} />
+          </>
+        )}
       </Flex>
     </>
   );

components/Gallery.tsx

@@ -1,8 +1,6 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { IconButton, Center, Flex } from "@chakra-ui/react";
 
-import { MAX_PARTICIPANTS_PER_PAGE } from "lib/constants";
-
 import UserContext from "context/User";
 
 import { useSpace } from "hooks/useSpace";
@@ -13,6 +11,14 @@ import ParticipantAudio from "./ParticipantAudio";
 import ChevronLeftIcon from "components/icons/ChevronLeftIcon";
 import ChevronRightIcon from "components/icons/ChevronRightIcon";
 
+function pushToFront<T>(array: T[], element: T) {
+  const index = array.findIndex((el) => el === element);
+  if (index) {
+    array.splice(index, 1);
+    array.unshift(element);
+  }
+}
+
 interface Props {
   gap: number;
   width: number;
@@ -24,23 +30,36 @@ export default function Gallery({
   gap,
   width,
   height,
-  participantsPerPage = MAX_PARTICIPANTS_PER_PAGE,
+  participantsPerPage,
 }: Props): JSX.Element {
   const [currentPage, setCurrentPage] = useState(1);
-  const { connectionIds, participantCount } = useSpace();
+  const {
+    connectionIds,
+    participantCount,
+    localParticipantConnectionId,
+    screenShareParticipantConnectionId,
+  } = useSpace();
   const { pinnedConnectionId } = React.useContext(UserContext);
 
-  const sortedConnectionIds = useMemo(() => {
-    return [...connectionIds].sort((a, b) => {
-      if (a === pinnedConnectionId) {
-        return -1;
-      } else if (b === pinnedConnectionId) {
-        return 1;
-      } else {
-        return 0;
+  const orderedConnectionIds = useMemo(() => {
+    const ids = [...connectionIds];
+    [
+      screenShareParticipantConnectionId,
+      pinnedConnectionId,
+      localParticipantConnectionId,
+    ].forEach((id) => {
+      if (id) {
+        pushToFront(ids, id);
       }
     });
-  }, [connectionIds, pinnedConnectionId]);
+
+    return ids;
+  }, [
+    connectionIds,
+    localParticipantConnectionId,
+    pinnedConnectionId,
+    screenShareParticipantConnectionId,
+  ]);
 
   const numberPages = useMemo(() => {
     if (participantCount >= participantsPerPage) {
@@ -59,14 +78,19 @@ export default function Gallery({
   const paginatedConnectionIds = useMemo(() => {
     const startIndex = currentPage * participantsPerPage - participantsPerPage;
     const endIndex = startIndex + participantsPerPage;
-    const pageParticipants = sortedConnectionIds.slice(startIndex, endIndex);
+    const pageParticipants = orderedConnectionIds.slice(startIndex, endIndex);
     // if there are no participants, then only the local view will show up on the page
     // we need to go back to the previous page.
     if (pageParticipants.length === 0) {
       goToPreviousPage();
     }
     return pageParticipants;
-  }, [sortedConnectionIds, currentPage, participantsPerPage, goToPreviousPage]);
+  }, [
+    orderedConnectionIds,
+    currentPage,
+    participantsPerPage,
+    goToPreviousPage,
+  ]);
 
   const hidePaginateCtrlRight = currentPage === numberPages;
 

components/Header.tsx

@@ -21,7 +21,13 @@ export default function Header(): JSX.Element {
           target="_blank"
           rel="noreferrer"
         >
-          <Image priority alt="logo" width={150} height={35} src={muxLogo} />
+          <Image
+            priority
+            alt="logo"
+            width={150}
+            src={muxLogo}
+            style={{ height: "auto" }}
+          />
         </a>
       </Flex>
       <Spacer />

components/Meeting.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Center, Flex } from "@chakra-ui/react";
 
 import { useSpace } from "hooks/useSpace";
@@ -7,8 +7,11 @@ import useWindowDimensions from "hooks/useWindowDimension";
 import Gallery from "./Gallery";
 import Timer from "./Timer";
 import ScreenShareRenderer from "./renderers/ScreenShareRenderer";
+import ChatRenderer from "./renderers/ChatRenderer";
+import ChatContext from "context/Chat";
 
 const headerHeight = 80;
+const chatWidth = 300;
 
 export default function Meeting(): JSX.Element {
   let gap = 10;
@@ -18,32 +21,37 @@ export default function Meeting(): JSX.Element {
     isScreenShareActive,
     spaceEndsAt,
   } = useSpace();
+  const { isChatOpen } = useContext(ChatContext);
   const { width = 0, height = 0 } = useWindowDimensions();
 
+  const availableWidth = width - (isChatOpen && width > 800 ? chatWidth : 0);
+
   const paddingY = height < 600 ? 10 : 40;
-  const paddingX = width < 800 ? 40 : 60;
+  const paddingX = availableWidth < 800 ? 40 : 60;
 
-  let galleryWidth = width - paddingX * 2;
+  let galleryWidth = availableWidth - paddingX * 2;
   if (isScreenShareActive) {
     if (participantCount < 6) {
-      galleryWidth = width * 0.25 - paddingX;
+      galleryWidth = availableWidth * 0.25 - paddingX;
     } else {
-      galleryWidth = width * 0.33 - paddingX / 2;
+      galleryWidth = availableWidth * 0.33 - paddingX / 2;
     }
     galleryWidth = Math.max(galleryWidth, 160);
   }
   let galleryHeight = height - headerHeight - paddingY * 2;
 
-  let screenShareWidth = isScreenShareActive ? width - galleryWidth : 0;
+  let screenShareWidth = isScreenShareActive
+    ? availableWidth - galleryWidth
+    : 0;
 
   let direction: "row" | "column" = "row";
   if (width < height) {
     gap = 8;
-    galleryWidth = width - paddingX * 2;
+    galleryWidth = availableWidth - paddingX * 2;
     if (isScreenShareActive) {
       direction = "column";
-      screenShareWidth = width;
-      galleryHeight = height - headerHeight - (width / 4) * 3;
+      screenShareWidth = availableWidth;
+      galleryHeight = height - headerHeight - (availableWidth / 4) * 3;
     }
   }
 
@@ -54,23 +62,27 @@ export default function Meeting(): JSX.Element {
   const participantsPerPage = Math.round(rows * columns);
 
   return (
-    <Flex
-      width="100%"
-      height="100%"
-      alignItems="center"
-      justifyContent="center"
-      direction={direction}
-    >
+    <Flex width="100%" height="100%" direction="row" position="relative">
       {spaceEndsAt && <Timer />}
-      <Center width={`${screenShareWidth}px`} maxHeight="100%">
-        <ScreenShareRenderer attach={attachScreenShare} />
-      </Center>
-      <Gallery
-        gap={gap}
-        width={galleryWidth}
-        height={galleryHeight}
-        participantsPerPage={participantsPerPage}
-      />
+      <Flex
+        maxWidth={availableWidth}
+        height="100%"
+        alignItems="center"
+        justifyContent="center"
+        direction={direction}
+        flexGrow={1}
+      >
+        <Center width={`${screenShareWidth}px`} maxHeight="100%">
+          <ScreenShareRenderer attach={attachScreenShare} />
+        </Center>
+        <Gallery
+          gap={gap}
+          width={galleryWidth}
+          height={galleryHeight}
+          participantsPerPage={participantsPerPage}
+        />
+      </Flex>
+      <ChatRenderer show={width > 800 && isChatOpen} />
     </Flex>
   );
 }

components/Participant.tsx

@@ -1,11 +1,13 @@
 import React, { useMemo } from "react";
 import { Box, Center, Flex } from "@chakra-ui/react";
 
+import UserContext from "context/User";
 import { useParticipant } from "hooks/useParticipant";
 
 import Pin from "./Pin";
 import VideoRenderer from "./renderers/VideoRenderer";
 import ParticipantInfoBar from "./ParticipantInfoBar";
+import ParticipantName from "./ParticipantName";
 
 interface Props {
   width?: number;
@@ -22,17 +24,15 @@ export default function Participant({
     id,
     isLocal,
     isSpeaking,
-    isMicrophoneMuted,
+    hasMicTrack,
+    isMicTrackMuted,
     isCameraOff,
     cameraWidth,
     cameraHeight,
-    attachCamera,
+    displayName,
+    attachVideoElement,
   } = useParticipant(connectionId);
 
-  const displayName = useMemo(() => {
-    return id.split("|")[0];
-  }, [id]);
-
   const outlineWidth = 3;
 
   return (
@@ -42,12 +42,9 @@ export default function Participant({
       minWidth="160px"
       minHeight="90px"
       background="black"
-      outline={`${
-        !isMicrophoneMuted && isSpeaking
-          ? `${outlineWidth}px solid`
-          : "1px solid"
-      }`}
-      outlineColor={`${!isMicrophoneMuted && isSpeaking ? "#FB2491" : "black"}`}
+      boxShadow={`0 0 0 ${
+        !isMicTrackMuted && isSpeaking ? outlineWidth : 1
+      }px ${!isMicTrackMuted && isSpeaking ? "#FA50B5" : "black"}`}
       borderRadius="5px"
       margin={`${outlineWidth}px`}
       overflow="hidden"
@@ -58,30 +55,20 @@ export default function Participant({
         local={isLocal}
         width={cameraWidth}
         height={cameraHeight}
-        attach={attachCamera}
+        attachFunc={attachVideoElement}
         connectionId={connectionId}
       />
 
       <ParticipantInfoBar
-        name={displayName}
-        isMuted={isMicrophoneMuted}
+        name={displayName || id}
+        isMuted={!hasMicTrack || isMicTrackMuted}
         parentHeight={height!}
       />
 
       {isCameraOff && (
-        <Center
-          background="black"
-          color="white"
-          fontSize="45px"
-          h="100%"
-          position="absolute"
-          top="0"
-          w="100%"
-        >
-          <Flex direction="column" textAlign="center">
-            <Box>{displayName}</Box>
-          </Flex>
-        </Center>
+        <ParticipantName isSmall={width! <= 400}>
+          {displayName || id}
+        </ParticipantName>
       )}
 
       {!isLocal && <Pin connectionId={connectionId} />}

components/ParticipantAudio.tsx

@@ -9,9 +9,9 @@ interface Props {
 }
 
 const ParticipantAudio = ({ connectionId }: Props) => {
-  const { isLocal, attachMicrophone } = useParticipant(connectionId);
+  const { isLocal, attachAudioElement } = useParticipant(connectionId);
 
-  return !isLocal ? <AudioRenderer attach={attachMicrophone} /> : null;
+  return !isLocal ? <AudioRenderer attachFunc={attachAudioElement} /> : null;
 };
 
 export default ParticipantAudio;

components/ParticipantName.tsx

@@ -0,0 +1,28 @@
+import { memo } from "react";
+import { Box, Center, Flex } from "@chakra-ui/react";
+
+interface Props {
+  isSmall: boolean;
+  children: string;
+}
+
+function ParticipantName({ isSmall, children }: Props): JSX.Element {
+  return (
+    <Center
+      background="black"
+      color="white"
+      fontSize={isSmall ? "20px" : "45px"}
+      h="100%"
+      position="absolute"
+      top="0"
+      w="100%"
+    >
+      <Flex width="100%" direction="column" textAlign="center">
+        <Box overflowWrap="anywhere">{children}</Box>
+      </Flex>
+    </Center>
+  );
+}
+
+const MemoizedName = memo(ParticipantName);
+export default MemoizedName;