From 8384968d9c76c62d4a9d0b0fdbb560375179ce1a Mon Sep 17 00:00:00 2001
From: etylu <etlu03@gmail.com>
Date: Wed, 22 Jun 2022 17:45:00 -0500
Subject: [PATCH 1/2] shrunk video-container

---
 src/ui/components/video/VideoChatComponent.scss | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/ui/components/video/VideoChatComponent.scss b/src/ui/components/video/VideoChatComponent.scss
index 67a736e0..6e83f92d 100644
--- a/src/ui/components/video/VideoChatComponent.scss
+++ b/src/ui/components/video/VideoChatComponent.scss
@@ -1,11 +1,14 @@
 .actions-btns {
   display: flex;
   justify-content: center;
+  margin-top: -15px;
+  z-index: 4;
   padding: 20px 0;
   .MuiButtonBase-root {
     margin: 0 20px;
   }
 }
+
 .mini-video-container {
   position: fixed;
   height: 25vh;
@@ -70,8 +73,11 @@
 
 .video-container {
   position: relative;
-  height: 100vh;
-  width: 100%;
+  height: 85vh;
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+  z-index: 0;
   .main-video {
     position: relative;
     width: 100%;

From b7580a334b7c156e676b6bb71db54e4d7a1ff1b4 Mon Sep 17 00:00:00 2001
From: etylu <etlu03@gmail.com>
Date: Wed, 22 Jun 2022 17:46:36 -0500
Subject: [PATCH 2/2] restored "start" and "stop" buttons (temp)

---
 src/ui/components/video/VideoChatComponent.js | 83 ++++++++++++-------
 1 file changed, 54 insertions(+), 29 deletions(-)

diff --git a/src/ui/components/video/VideoChatComponent.js b/src/ui/components/video/VideoChatComponent.js
index 0011be73..6938f03c 100644
--- a/src/ui/components/video/VideoChatComponent.js
+++ b/src/ui/components/video/VideoChatComponent.js
@@ -97,6 +97,7 @@ function VideoChatComponent(props) {
   const [openEnd, setOpenEnd] = useState(false);
   const [buttonDis, setButtonDis] = useState(false);
   const [buttonDisStop, setButtonDisStop] = useState(true);
+  const [startSession, setStartSession] = useState(false);
 
   const recommendedTime = 10 * 60;
   const [countDown, setCountDown] = useState(recommendedTime); // 10 minutes
@@ -239,14 +240,17 @@ function VideoChatComponent(props) {
     setIsAudioEnabled(action);
     toggleAudio(action);
   };
+
   const onToggleVideo = action => {
     setIsVideoEnabled(action);
     toggleVideo(action);
   };
+
   const onToggleAudioSubscription = action => {
     setIsAudioSubscribed(action);
     toggleAudioSubscription(action);
   };
+
   const onToggleVideoSubscription = action => {
     setIsVideoSubscribed(action);
     toggleVideoSubscription(action);
@@ -445,6 +449,7 @@ function VideoChatComponent(props) {
                     </Fab>
                   </Tooltip>
                 )}
+
                 {isVideoSubscribed ? (
                   <Tooltip title="screen on">
                     <Fab size="medium" style={{ marginBottom: 10, marginRight: 10, backgroundColor: '#565656' }}>
@@ -470,21 +475,27 @@ function VideoChatComponent(props) {
             )}
           </div>
         )}
-        <Fab
-          aria-describedby={'addPin'}
-          aria-label="addPin"
-          type="button"
-          color="default"
-          className="pin-Btn"
-          onClick={() => {
-            handlePinButtonClick();
-          }}
-          ref={pinBtn}
-        >
-          <Icon classes={{ root: classes.iconRoot }}>
-            <img className={classes.imageIcon} src={pin} alt="" />
-          </Icon>
-        </Fab>
+
+        {startSession ? (
+          <Fab
+            aria-describedby={'addPin'}
+            aria-label="addPin"
+            type="button"
+            color="default"
+            className="pin-Btn"
+            onClick={() => {
+              handlePinButtonClick();
+            }}
+            ref={pinBtn}
+          >
+            <Icon classes={{ root: classes.iconRoot }}>
+              <img className={classes.imageIcon} src={pin} alt="" />
+            </Icon>
+          </Fab>
+        ) : (
+          <div> </div>
+        )}
+
         <Popper open={popperOpen} anchorEl={pinBtn.current} placement="right" style={{ zIndex: 3 }} transition>
           <ColorLibPaper elevation={2}>
             <Typography variant="body2">{getPopperContent(popperContentIndex)}</Typography>
@@ -494,7 +505,12 @@ function VideoChatComponent(props) {
     );
   };
 
+  const scrollToWebcam = () => {
+    window.scrollTo(0, 175);
+  };
+
   const handleStartChat = async (setApiKey, setSessionId, setToken, baseURL) => {
+    scrollToWebcam();
     setOpen(false);
     console.log('loading info now...');
     setLoadingStatus(true);
@@ -527,6 +543,9 @@ function VideoChatComponent(props) {
         if (!isVideoEnabled) {
           onToggleVideo(false);
         }
+        if (!startSession) {
+          setStartSession(true);
+        }
         if (props.isArchiveHost) {
           //props.startRec();
           //console.log("start recording");
@@ -798,6 +817,16 @@ function VideoChatComponent(props) {
       </div>
 
       <div className="actions-btns">
+        <Button
+          id="start-Btn"
+          onClick={() => handleStartArchive()}
+          color="secondary"
+          variant="contained"
+          disable={buttonDis}
+        >
+          Start Button
+        </Button>
+
         <ColorLibCallEndButton
           variant="contained"
           size="medium"
@@ -806,20 +835,16 @@ function VideoChatComponent(props) {
         >
           Begin Discussion Prep
         </ColorLibCallEndButton>
-        {/* {props.isArchiveHost ? (
-          <Button onClick={() => handleStartArchive()} color="secondary" variant="contained" disabled={buttonDis}>
-            Start Recording
-          </Button>
-        ) : (
-          <div></div>
-        )}
-        {props.isArchiveHost ? (
-          <Button onClick={() => handleStopArchive()} color="secondary" variant="contained" disabled={buttonDisStop}>
-            Stop Recording
-          </Button>
-        ) : (
-          <div></div>
-        )} */}
+
+        <Button
+          id="stop-Btn"
+          onClick={() => handleStopArchive()}
+          color="secondary"
+          variant="contained"
+          disabled={buttonDisStop}
+        >
+          Stop Button
+        </Button>
       </div>
     </>
   );