From 623c15f2d33044cb990d4c653e56b492bd9318e8 Mon Sep 17 00:00:00 2001
From: harshithpabbati <pabbatiharshith@gmail.com>
Date: Mon, 17 Jan 2022 13:39:39 +0530
Subject: [PATCH] Update the active-speaker layout

---
 custom/fitness-demo/components/Call/Room.js   |  13 +-
 .../components/GridView/GridView.js           | 132 ++++++++++--------
 .../fitness-demo/components/Prejoin/Intro.js  |   2 +-
 .../components/SpeakerView/SpeakerView.js     |  22 ++-
 4 files changed, 87 insertions(+), 82 deletions(-)

diff --git a/custom/fitness-demo/components/Call/Room.js b/custom/fitness-demo/components/Call/Room.js
index 4dbdf79..2ba2617 100644
--- a/custom/fitness-demo/components/Call/Room.js
+++ b/custom/fitness-demo/components/Call/Room.js
@@ -1,17 +1,6 @@
 import React from 'react';
-import VideoContainer from '@custom/shared/components/VideoContainer/VideoContainer';
-
-import { Container } from './Container';
-import { Header } from './Header';
 import { VideoView } from './VideoView';
 
-export function Room({ children }) {
-  return (
-    <Container>
-      <Header />
-      <VideoContainer>{children ? children : <VideoView />}</VideoContainer>
-    </Container>
-  );
-}
+export const Room = () => <VideoView />;
 
 export default Room;
diff --git a/custom/fitness-demo/components/GridView/GridView.js b/custom/fitness-demo/components/GridView/GridView.js
index dbd3440..a3be7b5 100644
--- a/custom/fitness-demo/components/GridView/GridView.js
+++ b/custom/fitness-demo/components/GridView/GridView.js
@@ -7,6 +7,7 @@ import React, {
 } from 'react';
 import Button from '@custom/shared/components/Button';
 import Tile from '@custom/shared/components/Tile';
+import VideoContainer from '@custom/shared/components/VideoContainer';
 import {
   DEFAULT_ASPECT_RATIO,
   MEETING_STATE_JOINED,
@@ -20,6 +21,8 @@ import { ReactComponent as IconArrow } from '@custom/shared/icons/raquo-md.svg';
 import sortByKey from '@custom/shared/lib/sortByKey';
 import PropTypes from 'prop-types';
 import { useDeepCompareMemo } from 'use-deep-compare';
+import Container from '../Call/Container';
+import Header from '../Call/Header';
 
 // --- Constants
 
@@ -294,69 +297,74 @@ export const GridView = ({
   const handleNextClick = () => setPage((p) => p + 1);
 
   return (
-    <div ref={gridRef} className="grid">
-      {(pages > 1 && page > 1) && (
-        <Button
-          className="page-button prev"
-          type="button"
-          onClick={handlePrevClick}
-        >
-          <IconArrow />
-        </Button>
-      )}
-      <div className="tiles">{tiles}</div>
-      {(pages > 1 && page < pages) && (
-        <Button
-          className="page-button next"
-          type="button"
-          onClick={handleNextClick}
-        >
-          <IconArrow />
-        </Button>
-      )}
+    <Container>
+      <Header />
+      <VideoContainer>
+        <div ref={gridRef} className="grid">
+          {(pages > 1 && page > 1) && (
+            <Button
+              className="page-button prev"
+              type="button"
+              onClick={handlePrevClick}
+            >
+              <IconArrow />
+            </Button>
+          )}
+          <div className="tiles">{tiles}</div>
+          {(pages > 1 && page < pages) && (
+            <Button
+              className="page-button next"
+              type="button"
+              onClick={handleNextClick}
+            >
+              <IconArrow />
+            </Button>
+          )}
 
-      <style jsx>{`
-        .grid {
-          align-items: center;
-          display: flex;
-          height: 100%;
-          justify-content: center;
-          position: relative;
-          width: 100%;
-        }
-
-        .grid .tiles {
-          align-items: center;
-          display: flex;
-          flex-flow: row wrap;
-          gap: 1px;
-          max-height: 100%;
-          justify-content: center;
-          margin: auto;
-          overflow: hidden;
-          width: 100%;
-        }
-
-        .grid :global(.page-button) {
-          border-radius: var(--radius-sm) 0 0 var(--radius-sm);
-          height: 84px;
-          padding: 0px var(--spacing-xxxs) 0px var(--spacing-xxs);
-          background-color: var(--blue-default);
-          color: white;
-          border-right: 0px;
-        }
-
-        .grid :global(.page-button):disabled {
-          color: var(--blue-dark);
-          background-color: var(--blue-light);
-          border-color: var(--blue-light);
-        }
-
-        .grid :global(.page-button.prev) {
-          transform: scaleX(-1);
-        }
-      `}</style>
-    </div>
+          <style jsx>{`
+          .grid {
+            align-items: center;
+            display: flex;
+            height: 100%;
+            justify-content: center;
+            position: relative;
+            width: 100%;
+          }
+  
+          .grid .tiles {
+            align-items: center;
+            display: flex;
+            flex-flow: row wrap;
+            gap: 1px;
+            max-height: 100%;
+            justify-content: center;
+            margin: auto;
+            overflow: hidden;
+            width: 100%;
+          }
+  
+          .grid :global(.page-button) {
+            border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+            height: 84px;
+            padding: 0px var(--spacing-xxxs) 0px var(--spacing-xxs);
+            background-color: var(--blue-default);
+            color: white;
+            border-right: 0px;
+          }
+  
+          .grid :global(.page-button):disabled {
+            color: var(--blue-dark);
+            background-color: var(--blue-light);
+            border-color: var(--blue-light);
+          }
+  
+          .grid :global(.page-button.prev) {
+            transform: scaleX(-1);
+          }
+        `}</style>
+        </div>
+      </VideoContainer>
+    </Container>
   );
 };
 
diff --git a/custom/fitness-demo/components/Prejoin/Intro.js b/custom/fitness-demo/components/Prejoin/Intro.js
index f7cce1a..6a7ee9a 100644
--- a/custom/fitness-demo/components/Prejoin/Intro.js
+++ b/custom/fitness-demo/components/Prejoin/Intro.js
@@ -118,7 +118,7 @@ export const Intro = ({
               />
             </Field>
           </CardBody>
-          <CardFooter divider>
+          <CardFooter>
             <Button
               loading={fetching}
               fullWidth
diff --git a/custom/fitness-demo/components/SpeakerView/SpeakerView.js b/custom/fitness-demo/components/SpeakerView/SpeakerView.js
index 3eccd37..5a3d48a 100644
--- a/custom/fitness-demo/components/SpeakerView/SpeakerView.js
+++ b/custom/fitness-demo/components/SpeakerView/SpeakerView.js
@@ -1,10 +1,13 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import ParticipantBar from '@custom/shared/components/ParticipantBar/ParticipantBar';
+import VideoContainer from '@custom/shared/components/VideoContainer';
 import { useCallState } from '@custom/shared/contexts/CallProvider';
 import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
 import { useTracks } from '@custom/shared/contexts/TracksProvider';
 import { useUIState } from '@custom/shared/contexts/UIStateProvider';
 import { isScreenId } from '@custom/shared/contexts/participantsState';
+import Container from '../Call/Container';
+import Header from '../Call/Header';
 import { ScreensAndPins } from './ScreensAndPins';
 import { SpeakerTile } from './SpeakerTile';
 
@@ -77,13 +80,18 @@ export const SpeakerView = () => {
 
   return (
     <div className="speaker-view">
-      <div ref={activeRef} className="active">
-        {screensAndPinned.length > 0 ? (
-          screenShareTiles
-        ) : (
-          <SpeakerTile screenRef={activeRef} participant={currentSpeaker} />
-        )}
-      </div>
+      <Container>
+        <Header />
+        <VideoContainer>
+          <div ref={activeRef} className="active">
+            {screensAndPinned.length > 0 ? (
+              screenShareTiles
+            ) : (
+              <SpeakerTile screenRef={activeRef} participant={currentSpeaker} />
+            )}
+          </div>
+        </VideoContainer>
+      </Container>
       {showSidebar && (
         <ParticipantBar
           fixed={fixedItems}