fix: profile image styling

freddysundowner · freddysundowner · commit dd56bfb55068 · 2023-11-02T10:28:04.000+03:00
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingControllerComp.tsx
@@ -387,10 +387,7 @@ let MTComp = (function () {
                 volumeInfo.uid == userId &&
                 props.localUser.value.speaking != speaking
               ) {
-                props.localUser.onChange({
-                  ...props.localUser.value,
-                  speaking,
-                });
+                props.localUser.value.speaking = speaking;
               } else {
                 setUpdateVolume({ update: speaking, userid: volumeInfo.uid });
               }
@@ -474,7 +471,7 @@ let MTComp = (function () {
           {children.meetingName.propertyView({
             label: trans("meeting.meetingName"),
           })}
-          
+
           {children.placement.propertyView({
             label: trans("drawer.placement"),
             radioButton: true,
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videoMeetingStreamComp.tsx
@@ -37,6 +37,7 @@ import { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
 
 import {
   MeetingEventHandlerControl,
+  StringControl,
   StringStateControl,
   hiddenPropertyView,
   stringExposingStateControl,
@@ -72,6 +73,15 @@ const TextContainer = styled.div<{ $style: any }>`
   justify-content: center;
   ${(props) => props.$style && getStyle(props.$style)}
 `;
+const ProfileImageContainer = styled.div<{ $style: any }>`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  justify-content: center;
+  ${(props) => props.$style && getStyle(props.$style)}
+`;
 const VideoContainer = styled.video<{ $style: any }>`
   height: 100%;
   width: 100%;
@@ -166,6 +176,8 @@ const typeOptions = [
 export const meetingStreamChildren = {
   autoHeight: withDefault(AutoHeightControl, "fixed"),
   shareScreen: withDefault(BoolCodeControl, false),
+  profileImageHeight: withDefault(StringControl, "300px"),
+  profileImageWidth: withDefault(StringControl, "300px"),
   type: dropdownControl(typeOptions, ""),
   onEvent: MeetingEventHandlerControl,
   disabled: BoolCodeControl,
@@ -311,16 +323,26 @@ let VideoCompBuilder = (function (props) {
                     $style={props.style}
                   >
                     <img
-                      style={{ borderRadius: "50%" }}
+                      style={{
+                        borderRadius: "50%",
+                        width: props.profileImageWidth,
+                        height: props.profileImageHeight,
+                      }}
                       src={props.profileImageUrl.value}
                     />
                     {userName ?? "No Username"}
                   </TextContainer>
                 </>
               ) : (
-                // )
                 <TextContainer $style={props.style}>
-                  <p>No Video</p>
+                  <img
+                    style={{
+                      borderRadius: "50%",
+                      width: props.profileImageWidth,
+                      height: props.profileImageHeight,
+                    }}
+                    src={props.profileImageUrl.value}
+                  />
                 </TextContainer>
               )}
             </Container>
@@ -333,10 +355,6 @@ let VideoCompBuilder = (function (props) {
       <>
         <Section name={sectionNames.basic}>
           {children.userId.propertyView({ label: trans("meeting.videoId") })}
-          {children.profileImageUrl.propertyView({
-            label: trans("meeting.profileImageUrl"),
-            placeholder: "https://via.placeholder.com/120",
-          })}
           {children.autoHeight.getPropertyView()}
           {children.shareScreen.propertyView({
             label: trans("meeting.shareScreen"),
@@ -349,6 +367,14 @@ let VideoCompBuilder = (function (props) {
           {hiddenPropertyView(children)}
         </Section>
         <Section name={sectionNames.style}>
+          {children.profileImageUrl.propertyView({
+            label: trans("meeting.profileImageUrl"),
+            placeholder: "https://via.placeholder.com/120",
+          })}
+          {children.profileImageHeight.propertyView({
+            label: "Profile Height",
+          })}
+          {children.profileImageWidth.propertyView({ label: "Profile Width" })}
           {children.style.getPropertyView()}
         </Section>
       </>
