separate control bar from chat and video

Author: matkam

packages/react/src/prefabs/VideoConference.tsx

@@ -138,39 +138,41 @@ export function VideoConference({
           // onPinChange={handleFocusStateChange}
           onWidgetChange={widgetUpdate}
         >
-          <div className="lk-video-conference-inner">
-            {!focusTrack ? (
-              <div className="lk-grid-layout-wrapper">
-                <GridLayout tracks={tracks}>
-                  <ParticipantTile />
-                </GridLayout>
-              </div>
-            ) : (
-              <div className="lk-focus-layout-wrapper">
-                <FocusLayoutContainer>
-                  <CarouselLayout tracks={carouselTracks}>
+          <div className="lk-video-conference-content">
+            <div className="lk-video-conference-inner">
+              {!focusTrack ? (
+                <div className="lk-grid-layout-wrapper">
+                  <GridLayout tracks={tracks}>
                     <ParticipantTile />
-                  </CarouselLayout>
-                  {focusTrack && <FocusLayout trackRef={focusTrack} />}
-                </FocusLayoutContainer>
+                  </GridLayout>
+                </div>
+              ) : (
+                <div className="lk-focus-layout-wrapper">
+                  <FocusLayoutContainer>
+                    <CarouselLayout tracks={carouselTracks}>
+                      <ParticipantTile />
+                    </CarouselLayout>
+                    {focusTrack && <FocusLayout trackRef={focusTrack} />}
+                  </FocusLayoutContainer>
+                </div>
+              )}
+            </div>
+            <Chat
+              style={{ display: widgetState.showChat ? 'grid' : 'none' }}
+              messageFormatter={chatMessageFormatter}
+              messageEncoder={chatMessageEncoder}
+              messageDecoder={chatMessageDecoder}
+            />
+            {SettingsComponent && (
+              <div
+                className="lk-settings-menu-modal"
+                style={{ display: widgetState.showSettings ? 'block' : 'none' }}
+              >
+                <SettingsComponent />
               </div>
             )}
-            <ControlBar controls={{ chat: true, settings: !!SettingsComponent }} />
           </div>
-          <Chat
-            style={{ display: widgetState.showChat ? 'grid' : 'none' }}
-            messageFormatter={chatMessageFormatter}
-            messageEncoder={chatMessageEncoder}
-            messageDecoder={chatMessageDecoder}
-          />
-          {SettingsComponent && (
-            <div
-              className="lk-settings-menu-modal"
-              style={{ display: widgetState.showSettings ? 'block' : 'none' }}
-            >
-              <SettingsComponent />
-            </div>
-          )}
+          <ControlBar controls={{ chat: true, settings: !!SettingsComponent }} />
         </LayoutContextProvider>
       )}
       <RoomAudioRenderer />

packages/styles/scss/prefabs/video-conference.scss

@@ -19,15 +19,25 @@
 .video-conference {
   position: relative;
   display: flex;
+  flex-direction: column;
   align-items: stretch;
   height: 100%;
 }
 
+.video-conference-content {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  flex: 1;
+}
+
 .video-conference-inner {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   width: 100%;
+  flex: 1;
 }
 
 .settings-menu-modal {
@@ -53,4 +63,4 @@
   max-width: 100%;
   max-height: 100%;
   overflow-y: auto;
-}
+}