Update the active-speaker layout

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;

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,6 +297,9 @@ export const GridView = ({
   const handleNextClick = () => setPage((p) => p + 1);
 
   return (
+    <Container>
+      <Header />
+      <VideoContainer>
         <div ref={gridRef} className="grid">
           {(pages > 1 && page > 1) && (
             <Button
@@ -357,6 +363,8 @@ export const GridView = ({
           }
         `}</style>
         </div>
+      </VideoContainer>
+    </Container>
   );
 };
 

custom/fitness-demo/components/Prejoin/Intro.js

@@ -118,7 +118,7 @@ export const Intro = ({
               />
             </Field>
           </CardBody>
-          <CardFooter divider>
+          <CardFooter>
             <Button
               loading={fetching}
               fullWidth

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,6 +80,9 @@ export const SpeakerView = () => {
 
   return (
     <div className="speaker-view">
+      <Container>
+        <Header />
+        <VideoContainer>
           <div ref={activeRef} className="active">
             {screensAndPinned.length > 0 ? (
               screenShareTiles
@@ -84,6 +90,8 @@ export const SpeakerView = () => {
               <SpeakerTile screenRef={activeRef} participant={currentSpeaker} />
             )}
           </div>
+        </VideoContainer>
+      </Container>
       {showSidebar && (
         <ParticipantBar
           fixed={fixedItems}