WIP: Agora integrationn

client/packages/lowcoder-design/src/icons/index.ts

@@ -168,6 +168,7 @@ export { ReactComponent as AudioCompIcon } from "./icon-insert-audio.svg";
 export { ReactComponent as VideoCompIcon } from "./icon-insert-video.svg";
 export { ReactComponent as videoPlayTriangle } from "./icon-video-play-triangle.svg";
 export { ReactComponent as DrawerCompIcon } from "./icon-drawer.svg";
+export { ReactComponent as LeftMeetingIcon } from "./icon-left-comp-video.svg";
 export { ReactComponent as PlusIcon } from "./icon-plus.svg";
 export { ReactComponent as HomeIcon } from "./icon-application-home.svg";
 export { ReactComponent as HomeModuleIcon } from "./icon-application-module.svg";
@@ -236,6 +237,7 @@ export { ReactComponent as LeftContainer } from "./icon-left-comp-container.svg"
 export { ReactComponent as LeftDate } from "./icon-left-comp-date.svg";
 export { ReactComponent as LeftDivider } from "./icon-left-comp-divider.svg";
 export { ReactComponent as LeftDrawer } from "./icon-left-comp-drawer.svg";
+export { ReactComponent as LeftMeeting } from "./icon-left-comp-video.svg";
 export { ReactComponent as LeftFile } from "./icon-left-comp-file.svg";
 export { ReactComponent as LeftFileViewer } from "./icon-left-comp-fileViewer.svg";
 export { ReactComponent as LeftForm } from "./icon-left-comp-form.svg";

client/packages/lowcoder/docker-compose.yaml

@@ -0,0 +1,99 @@
+version: '3'
+
+services:
+  mysql:
+    image: mysql:8.0.22
+    command: --default-authentication-plugin=mysql_native_password
+    volumes:
+      - mysqlvol:/var/lib/mysql
+      - ./backup:/var/backup
+    environment:
+      MYSQL_ROOT_PASSWORD: defaultpassword
+    ports:
+      - "3306:3306"
+
+  redis:
+    image: redis
+    volumes:
+      - redisvol:/data
+
+  taxi-rider-api:
+    image: ridyio/ridy-rider-api
+    restart: always
+    depends_on:
+      - "mysql"
+      - "redis"
+      - "taxi-admin-api"
+    volumes:
+      - ./img:/app/uploads
+      - ./config-new:/app/config
+    environment:
+      - MYSQL_HOST=mysql
+      - GATEWAY_SERVER_URL=http://x.x.x.x:3333
+      - RIDER_SERVER_URL=http://x.x.x.x:4000
+      - ENCRYPTION_KEY=lPw3ethAy4WqnWa3b4TAbCUJr89RifEs
+      - REDIS_HOST=redis
+    ports:
+      - "4000:3000"
+
+  taxi-driver-api:
+    image: ridyio/ridy-driver-api
+    restart: always
+    depends_on:
+      - "mysql"
+      - "redis"
+      - "taxi-admin-api"
+    volumes:
+      - ./img:/app/uploads
+      - ./config-new:/app/config
+    environment:
+      - MYSQL_HOST=mysql
+      - GATEWAY_SERVER_URL=http://x.x.x.x:3333
+      - DRIVER_SERVER_URL=http://x.x.x.x:4002
+      - REDIS_HOST=redis
+      - ENCRYPTION_KEY=lPw3ethAy4WqnWa3b4TAbCUJr89RifEs
+    ports:
+      - "4002:3000"
+
+  taxi-admin-api:
+    image: ridyio/ridy-admin-api
+    restart: always
+    depends_on:
+      - "mysql"
+      - "redis"
+    links:
+      - mysql
+    volumes:
+      - ./img:/app/uploads
+      - ./config-new:/app/config
+    environment:
+      - MYSQL_HOST=mysql
+      - REDIS_HOST=redis
+    ports:
+      - "4001:3000"
+
+  taxi-admin-panel:
+    image: ridyio/ridy-admin-panel
+    restart: always
+    volumes:
+       - taxiassets:/usr/share/nginx/html/assets
+    ports:
+      - "4003:80"
+
+  payment-gateways:
+    image: ridyio/delivery-gateway-box
+    depends_on:
+      - "taxi-rider-api"
+    ports:
+      - "3333:3333"
+    environment:
+      - MYSQL_HOST=mysql
+      - TEST_MODE=true
+      - MYSQL_DB=ridy
+      - GATEWAY_SERVER_URL=http://x.x.x.x:3333
+      - ENCRYPTION_KEY=lPw3ethAy4WqnWa3b4TAbCUJr89RifEs
+
+volumes:
+  redisvol:
+  mysqlvol:
+  taxiassets:

client/packages/lowcoder/package.json

@@ -36,6 +36,8 @@
     "@types/react-signature-canvas": "^1.0.2",
     "@types/react-test-renderer": "^18.0.0",
     "@types/react-virtualized": "^9.21.21",
+    "agora-access-token": "^2.0.4",
+    "agora-rtc-sdk-ng": "^4.19.0",
     "ali-oss": "^6.17.1",
     "antd": "5.7.2",
     "antd-img-crop": "^4.12.2",

client/packages/lowcoder/src/comps/comps/containerBase/utils.tsx

@@ -95,6 +95,7 @@ export function oldContainerParamsToNew(params: any): any {
       container: { layout: params.value.layout, items: params.value.items },
     };
     const newParams = { ...params, value: newValue };
+    // console.log("tempParams", newParams);
     // log.debug("params: ", params, "newParams: ", newParams);
     return newParams;
   }

client/packages/lowcoder/src/comps/comps/imageComp.tsx

@@ -1,15 +1,27 @@
 import styled, { css } from "styled-components";
 import { Section, sectionNames } from "lowcoder-design";
-import { clickEvent, eventHandlerControl } from "../controls/eventHandlerControl";
+import {
+  clickEvent,
+  eventHandlerControl,
+} from "../controls/eventHandlerControl";
 import { StringStateControl } from "../controls/codeStateControl";
 import { UICompBuilder, withDefault } from "../generators";
-import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
+import {
+  NameConfig,
+  NameConfigHidden,
+  withExposingConfigs,
+} from "../generators/withExposing";
 import { RecordConstructorToView } from "lowcoder-core";
 import { useEffect, useRef, useState } from "react";
 import _ from "lodash";
 import ReactResizeDetector from "react-resize-detector";
 import { styleControl } from "comps/controls/styleControl";
-import { ImageStyle, ImageStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import {
+  ImageStyle,
+  ImageStyleType,
+  heightCalculator,
+  widthCalculator,
+} from "comps/controls/styleControlConstants";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
@@ -42,9 +54,9 @@ const getStyle = (style: ImageStyleType) => {
     img {
       border: 1px solid ${style.border};
       border-radius: ${style.radius};
-      margin: ${style.margin};	
-      padding: ${style.padding};	
-      max-width: ${widthCalculator(style.margin)};	
+      margin: ${style.margin};
+      padding: ${style.padding};
+      max-width: ${widthCalculator(style.margin)};
       max-height: ${heightCalculator(style.margin)};
     }
 
@@ -67,7 +79,7 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
       setWidth(img.naturalWidth);
       setHeight(img.naturalHeight);
     };
-  }
+  };
 
   useEffect(() => {
     const newImage = new Image(0, 0);
@@ -79,14 +91,16 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
     };
   }, [props.src.value]);
 
-  useEffect(() =>{
+  useEffect(() => {
     if (height && width) {
       onResize();
     }
-  }, [height, width])
+  }, [height, width]);
 
   // on safari
   const setStyle = (height: string, width: string) => {
+    console.log(width, height);
+
     const img = imgRef.current;
     const imgDiv = img?.getElementsByTagName("div")[0];
     const imgCurrent = img?.getElementsByTagName("img")[0];
@@ -117,7 +131,12 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
   return (
     <ReactResizeDetector onResize={onResize}>
       <Container ref={conRef} $style={props.style}>
-        <div ref={imgRef} style={props.autoHeight ? { width: "100%", height: "100%" } : undefined}>
+        <div
+          ref={imgRef}
+          style={
+            props.autoHeight ? { width: "100%", height: "100%" } : undefined
+          }
+        >
           <AntImage
             src={props.src.value}
             referrerPolicy="same-origin"
@@ -156,14 +175,18 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
           })}
         </Section>
 
-        <Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
+        <Section name={sectionNames.interaction}>
+          {children.onEvent.getPropertyView()}
+        </Section>
 
         <Section name={sectionNames.layout}>
           {children.autoHeight.getPropertyView()}
           {hiddenPropertyView(children)}
         </Section>
 
-        <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+        <Section name={sectionNames.style}>
+          {children.style.getPropertyView()}
+        </Section>
       </>
     );
   })