Merge pull request #29 from videosdk-live/fix/topbar-changes

Fix/topbar changes
videosdk-live · Mar 21, 2022 · 3dda89a · 3dda89a
2 parents cc9009f + b03b7fc
commit 3dda89a
Show file tree

Hide file tree

Showing 14 changed files with 65 additions and 98 deletions.
diff --git a/package.json b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "videosdk-rtc-react-prebuilt-ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": true,
-  "homepage": "https://embed.videosdk.live/rtc-js-prebuilt/0.3.0/",
+  "homepage": "https://embed.videosdk.live/rtc-js-prebuilt/0.3.1/",
   "dependencies": {
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",

diff --git a/src/App.js b/src/App.js
@@ -538,7 +538,10 @@ const App = () => {
             deviceInfo={{
               sdkType: "prebuilt",
               sdkVersion: prebuiltSDKVersion,
-              rawUserAgent: paramKeys.rawUserAgent,
+              rawUserAgent:
+                paramKeys.rawUserAgent || typeof window !== "undefined"
+                  ? window?.navigator?.userAgent
+                  : null,
             }}
           >
             <MeetingContainer />

diff --git a/src/components/MobileIconButton.js b/src/components/MobileIconButton.js
@@ -21,6 +21,7 @@ const MobileIconButton = ({
   focusIconColor,
   disabled,
   large,
+  // liveStreamStarted,
   // renderRightComponent,
   tooltipTitle,
   btnID,
@@ -97,6 +98,9 @@ const MobileIconButton = ({
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center",
+                    backgroundColor: bgColor,
+                    padding: "5px",
+                    borderRadius: "5px",
                   }}
                 >
                   <Lottie

diff --git a/src/components/OutlineIconButton.js b/src/components/OutlineIconButton.js
@@ -99,36 +99,39 @@ const OutlineIconButton = ({
               transitionTimingFunction: "linear",
             }}
           >
-            <Badge color={"secondary"} badgeContent={badge}>
-              {lottieOption ? (
-                <Box
-                  style={{
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                  }}
-                >
-                  <Lottie
-                    style={{ height: iconSize }}
-                    options={lottieOption}
-                    eventListeners={[{ eventName: "done" }]}
-                    height={iconSize}
-                    width={
-                      (iconSize * lottieOption?.width) / lottieOption?.height
-                    }
-                    isClickToPauseDisabled
+            {Icon && (
+              <Badge color={"secondary"} badgeContent={badge}>
+                {lottieOption ? (
+                  <Box
+                    style={{
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center",
+                    }}
+                  >
+                    <Lottie
+                      style={{ height: iconSize }}
+                      options={lottieOption}
+                      eventListeners={[{ eventName: "done" }]}
+                      height={iconSize}
+                      width={
+                        (iconSize * lottieOption?.width) / lottieOption?.height
+                      }
+                      isClickToPauseDisabled
+                    />
+                  </Box>
+                ) : (
+                  <Icon
+                    style={{
+                      color: isFocused ? focusIconColor || "#1C1F2E" : "#fff",
+                      height: iconSize,
+                      width: iconSize,
+                    }}
+                    fillColor={isFocused ? focusIconColor || "#1C1F2E" : "#fff"}
                   />
-                </Box>
-              ) : (
-                <Icon
-                  style={{
-                    color: isFocused ? focusIconColor || "#1C1F2E" : "#fff",
-                    height: iconSize,
-                    width: iconSize,
-                  }}
-                />
-              )}
-            </Badge>
+                )}
+              </Badge>
+            )}
           </Box>
           {buttonText ? (
             <Typography variant="subtitle2" style={{ fontWeight: "bold" }}>

diff --git a/src/components/OutlineIconTextButton.js b/src/components/OutlineIconTextButton.js
@@ -18,7 +18,7 @@ const OutlineIconTextButton = ({
   focusBGColor,
   disabled,
   renderRightComponent,
-  liveStreamStarted,
+  fillColor,
   lottieOption,
   tooltipTitle,
   btnID,

diff --git a/src/icons/Chat.js b/src/icons/Chat.js
@@ -15,6 +15,7 @@ const Chat = (props) => {
           data-name="chat (1)"
           d="M19,2H5A2.946,2.946,0,0,0,2,5V15a2.946,2.946,0,0,0,3,3H16.6l3.7,3.7a.967.967,0,0,0,1.4,0A.908.908,0,0,0,22,21V5A2.946,2.946,0,0,0,19,2ZM7,13a1,1,0,0,1,0-2,1,1,0,0,1,0,2ZM7,9A.945.945,0,0,1,6,8,.945.945,0,0,1,7,7,.945.945,0,0,1,8,8,.945.945,0,0,1,7,9Zm10,4H11a1,1,0,0,1,0-2h6a1,1,0,0,1,0,2Zm0-4H11a.945.945,0,0,1-1-1,.945.945,0,0,1,1-1h6a.945.945,0,0,1,1,1A.945.945,0,0,1,17,9Z"
           transform="translate(-2 -2)"
+          fill={props.fillColor}
         />
       </svg>
     </SvgIcon>

diff --git a/src/icons/Participants.js b/src/icons/Participants.js
@@ -15,6 +15,7 @@ const Participants = (props) => {
           data-name="Path 6019"
           d="M17.364,11.545a3.273,3.273,0,1,0-3.273-3.273A3.259,3.259,0,0,0,17.364,11.545Zm-8.727,0A3.273,3.273,0,1,0,5.364,8.273,3.259,3.259,0,0,0,8.636,11.545Zm0,2.182C6.095,13.727,1,15,1,17.545v1.636a1.094,1.094,0,0,0,1.091,1.091H15.182a1.094,1.094,0,0,0,1.091-1.091V17.545C16.273,15,11.178,13.727,8.636,13.727Zm8.727,0c-.316,0-.676.022-1.058.055.022.011.033.033.044.044a4.538,4.538,0,0,1,2.105,3.72v1.636a3.278,3.278,0,0,1-.2,1.091h5.651A1.094,1.094,0,0,0,25,19.182V17.545C25,15,19.905,13.727,17.364,13.727Z"
           transform="translate(-1 -5)"
+          fill={props.fillColor}
         />
       </svg>
     </SvgIcon>

diff --git a/src/icons/RaiseHand.js b/src/icons/RaiseHand.js
@@ -16,7 +16,7 @@ const RaiseHand = (props) => {
           id="Path_6011"
           d="M19.75,8A1.25,1.25,0,0,0,18.5,9.25V15H18a3.009,3.009,0,0,0-3,3H14a4.007,4.007,0,0,1,3.5-3.97V3.25a1.25,1.25,0,0,0-2.5,0V11H14V1.25a1.25,1.25,0,0,0-2.5,0V11h-1V2.75a1.25,1.25,0,0,0-2.5,0V12H7V5.75a1.25,1.25,0,0,0-2.5,0v10a8.25,8.25,0,0,0,16.5,0V9.25A1.25,1.25,0,0,0,19.75,8Z"
           transform="translate(1.5)"
-          fill="#95959E"
+          fill={props.fillColor}
         />
       </svg>
     </SvgIcon>

diff --git a/src/icons/RaiseHandDesktop.js b/src/icons/RaiseHandDesktop.js
diff --git a/src/icons/ScreenShare.js b/src/icons/ScreenShare.js
@@ -32,6 +32,7 @@ const ScreenShare = (props) => {
             data-name="share (1)"
             d="M24.35,9.2H6.756a1.079,1.079,0,0,0-1.078,1.074v13.25A1.079,1.079,0,0,0,6.756,24.6H24.351a1.076,1.076,0,0,0,1.074-1.078V10.276A1.075,1.075,0,0,0,24.35,9.2ZM20.1,16.038l-3.069,3.073a.4.4,0,0,1-.43.081.39.39,0,0,1-.244-.365v-1.07a5.05,5.05,0,0,0-4.427,3.483.395.395,0,0,1-.751,0,5.933,5.933,0,0,1-.284-1.809,5.864,5.864,0,0,1,5.46-5.841v-.9a.39.39,0,0,1,.244-.365.4.4,0,0,1,.43.081L20.1,15.482a.386.386,0,0,1,.119.276.4.4,0,0,1-.119.28Zm-.463,10.047a.395.395,0,0,0,0-.79H11.472a.395.395,0,1,0,0,.79Z"
             transform="translate(-1.374 -2.68)"
+            fill={props.fillColor}
           />
         </g>
       </svg>

diff --git a/src/meetingContainer/MeetingContainer.js b/src/meetingContainer/MeetingContainer.js
@@ -321,7 +321,6 @@ const MeetingContainer = () => {
       }
 
       if (type === "RAISE_HAND") {
-        console.log("sendChatMsg has made request");
         if (notificationSoundEnabled) {
           new Audio(
             `https://static.videosdk.live/prebuilt/notification.mp3`
@@ -438,7 +437,7 @@ const MeetingContainer = () => {
 
   const _handleOnLiveStreamStopped = () => {
     if (participantCanToggleLivestream && notificationAlertsEnabled) {
-      enqueueSnackbar("Meeting livestreaming is started.");
+      enqueueSnackbar("Meeting livestreaming is Stopped.");
     }
   };
 

diff --git a/src/meetingContainer/TopBar.js b/src/meetingContainer/TopBar.js
@@ -21,15 +21,14 @@ import recordingBlink from "../animations/recording-blink.json";
 import liveBlink from "../animations/live-blink.json";
 import SettingsOutlinedIcon from "@material-ui/icons/SettingsOutlined";
 import LiveIcon from "../icons/LiveIcon";
-import RaiseHandDesktop from "../icons/RaiseHandDesktop";
+import RaiseHand from "../icons/RaiseHand";
 import {
   Activities,
   Chat,
   EndCall,
   Participants,
   ScreenRecording,
   ScreenShare,
-  RaiseHand,
   LeaveMeetingIcon,
   EndCallIcon,
 } from "../icons";
@@ -92,7 +91,7 @@ const RaiseHandBTN = ({ onClick, isMobile, isTab }) => {
     <Tooltip>
       <OutlineIconButton
         tooltipTitle={"Raise hand"}
-        Icon={RaiseHandDesktop}
+        Icon={RaiseHand}
         onClick={onRaiseHand}
       />
     </Tooltip>
@@ -286,19 +285,18 @@ const GoLiveBTN = ({ isMobile, isTab }) => {
     <>
       {isMobile || isTab ? (
         <MobileIconButton
-          Icon={LiveIcon}
+          bgColor={"#D32F2F"}
           onClick={_handleClick}
           tooltipTitle={isLiveStreaming ? "Stop Live" : "Go Live"}
+          Icon={LiveIcon}
           buttonText={isLiveStreaming ? "Stop Live" : "Go Live"}
           isFocused={isLiveStreaming}
           lottieOption={isLiveStreaming ? defaultOptions : null}
           disabled={!participantCanToggleLivestream}
         />
       ) : (
         <OutlineIconTextButton
-          liveStreamStarted={isLiveStreaming ? true : false}
           bgColor={"#D32F2F"}
-          // Icon={Live}
           onClick={_handleClick}
           tooltipTitle={isLiveStreaming ? "Stop Live" : "Go Live"}
           buttonText="Go Live"

diff --git a/src/meetingContainer/sideViewContainer/ConfigTabPanel.js b/src/meetingContainer/sideViewContainer/ConfigTabPanel.js
@@ -112,29 +112,17 @@ function ConfigTabPanel() {
 
   //handlers
   const _handleChangeLayout = (event) => {
-    console.log(
-      "_handleChangeLayout appMeetingLayout",
-      event.currentTarget.value.toUpperCase()
-    );
-
     const type = event.currentTarget.value.toUpperCase() || typeRef.current;
     publishToPubSub({ type });
   };
 
   const _handleChangePriority = (event) => {
-    console.log(
-      "_handleChangePriority appMeetingLayout",
-      event.currentTarget.value.toUpperCase()
-    );
-
     const priority =
       event.currentTarget.value.toUpperCase() || priorityRef.current;
     publishToPubSub({ priority });
   };
 
   const _handleGridSize = (newGridSize) => {
-    console.log("_handleGridSize appMeetingLayout", newGridSize);
-
     const gridSize = newGridSize || gridSizeRef.current;
     publishToPubSub({ gridSize });
   };
@@ -150,11 +138,6 @@ function ConfigTabPanel() {
 
     const layout = { type, gridSize, priority };
 
-    console.log(
-      { _type, _gridSize, _priority, type, gridSize, priority },
-      "changing appMeetingLayout"
-    );
-
     livestreamPublishRef.current({ layout }, { persist: true });
     hlsPublishRef.current({ layout }, { persist: true });
     meetingPublishRef.current({ layout }, { persist: true });
@@ -166,7 +149,7 @@ function ConfigTabPanel() {
   let Card = ({ isActive, ref, title, Icon, onClick }) => {
     return isActive ? (
       <Box
-        mr={isMobile ? "7px" : "12px"}
+        mr={isMobile ? 0.8 : 2}
         style={{
           justifyItems: "center",
           alignItems: "center",
@@ -185,7 +168,7 @@ function ConfigTabPanel() {
         </ButtonBase>
         <Typography
           style={{
-            marginTop: "12px",
+            marginTop: 12,
             fontSize: "14px",
             fontWeight: "400",
             color: "white",
@@ -196,7 +179,7 @@ function ConfigTabPanel() {
       </Box>
     ) : (
       <Box
-        mr={isMobile ? "7px" : "12px"}
+        mr={isMobile ? 0.8 : 2}
         style={{
           justifyItems: "center",
           alignItems: "center",
@@ -215,7 +198,7 @@ function ConfigTabPanel() {
         </ButtonBase>
         <Typography
           style={{
-            marginTop: "12px",
+            marginTop: 12,
             fontSize: "14px",
             fontWeight: "400",
             color: "#95959E",
@@ -240,7 +223,7 @@ function ConfigTabPanel() {
             fontWeight: 600,
             lineHeight: "16px",
             fontSize: "16px",
-            marginTop: "24px",
+            marginTop: 24,
           }}
           variant="body1"
         >
@@ -249,8 +232,8 @@ function ConfigTabPanel() {
         <Box
           style={{
             display: "flex",
-            marginTop: "16px",
-            marginBottom: "24px",
+            marginTop: 16,
+            marginBottom: 24,
           }}
         >
           {heading === "Layout" ? (
@@ -298,7 +281,7 @@ function ConfigTabPanel() {
           )}
         </Box>
         <Box
-          style={{ borderBottom: "2px solid #3A3F4B", marginLeft: "-12px" }}
+          style={{ borderBottom: "2px solid #3A3F4B", marginLeft: -12 }}
         ></Box>
       </Box>
     );
@@ -309,7 +292,7 @@ function ConfigTabPanel() {
       style={{
         display: "flex",
         maxWidth: "100%",
-        marginLeft: "12px",
+        marginLeft: 12,
         flexDirection: "column",
       }}
     >
@@ -320,15 +303,15 @@ function ConfigTabPanel() {
           style={{
             display: "flex",
             flexDirection: "column",
-            marginRight: "12px",
+            marginRight: 12,
           }}
         >
           <Typography
             style={{
               fontWeight: 600,
               lineHeight: "16px",
               fontSize: "16px",
-              marginTop: "24px",
+              marginTop: 24,
             }}
             variant="body1"
           >
@@ -345,7 +328,7 @@ function ConfigTabPanel() {
             valueLabelDisplay="on"
             step={1}
             style={{
-              marginTop: "48px",
+              marginTop: 48,
               color: "#ffffff",
             }}
             area-label="default"

diff --git a/src/meetingContainer/sideViewContainer/LivestreamConfigTabPanel.js b/src/meetingContainer/sideViewContainer/LivestreamConfigTabPanel.js
@@ -489,7 +489,7 @@ const LiveStreamConfigTabPanel = ({ panelWidth, panelHeight }) => {
     <Box
       style={{
         height: panelHeight - 32,
-        overflowY: "auto",
+        overflowY: "hidden",
         overflowX: "hidden",
       }}
     >