agora-appbuilder-core 4.0.0-api.3 → 4.0.0-api.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-api.3",
+  "version": "4.0.0-api.4",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/customization-api/typeDefinition.ts

@@ -55,8 +55,7 @@ export type layoutComponent = React.ComponentType<{
 export interface layoutItem {
   name: string;
   label: string;
-  //todo: hari change iconName into icon and refactor icon lib
-  iconName: keyof IconsInterface;
+  icon: string;
   component: layoutComponent;
 }
 

package/template/src/atoms/ImageIcon.tsx

@@ -17,7 +17,8 @@ import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 
 export interface ImageIconProps {
   tintColor?: string;
-  name: keyof IconsInterface;
+  name?: keyof IconsInterface;
+  icon?: string;
   iconSize?: number;
   iconContainerStyle?: ViewStyle;
   iconBackgroundColor?: string;
@@ -33,6 +34,7 @@ export interface ImageIconProps {
 const ImageIcon = (props: ImageIconProps) => {
   const {
     name,
+    icon = undefined,
     iconSize = 26,
     tintColor,
     base64 = false,
@@ -80,8 +82,16 @@ const ImageIcon = (props: ImageIconProps) => {
             name={name}
             style={{width: iconSize, height: iconSize}}
           />
-        ) : (
+        ) : icon ? (
+          <UIKitImageIcon
+            tintColor={tintColor}
+            icon={icon}
+            style={{width: iconSize, height: iconSize}}
+          />
+        ) : name ? (
           <CustomIcon name={name} color={tintColor} size={iconSize} />
+        ) : (
+          <></>
         )}
       </View>
     </View>

package/template/src/pages/video-call/DefaultLayouts.ts

@@ -3,18 +3,24 @@ import GridVideo from '../../components/GridVideo';
 import PinnedVideo from '../../components/PinnedVideo';
 import useLayoutsData from './useLayoutsData';
 import {useLayout} from '../../utils/useLayout';
-
+import {isMobileUA} from '../../utils/common';
+const isMobileView = isMobileUA();
 export const DefaultLayouts: layoutItem[] = [
   {
     name: 'grid',
     label: 'Grid',
-    iconName: 'grid',
+    //iconName: 'grid',
+    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFOSURBVHgB7drBTcNAEIXhWVeQEkwJVIDohA6gA2iBigIVhA6cEuhgGGNfd1+kZK1x9H/SyidbT0/ry+6YAQBwt9z9EOs91tFv4xTrZW8ZasHGWJP3Mc3fz56hiHBTPEbr5xzrsZTya0kzDLW3fNmCo/U1xnqzxBmG+nv2att4ssQZqr/Y/IPaRmJ7l6wZBkMTBQkUJFCQQEECBQkUJFCQQEECBQkUJFCQQEECBQkUJFCQ0Croy7bxY4kztAr6tm18WuIMrSPXQzxO1vlGIU46HyxxhuoOWq9Bnm25FunhvH7fMme4yHz94stt5C0cY32su2NXGQAAuDPOAFUzGANUIhwDVLW3nAGqfwxQiQwMUIkMnCgKFCRQkEBBAgUJFCRQkEBBAgUJFCRQkEBBAgUJFCRQkEBBAgNUIgMDVCIDA1QMUF2X4SLOABUAADv0Bxz9l6sMoGOZAAAAAElFTkSuQmCC',
     component: GridVideo,
   },
   {
     name: 'pinned',
     label: 'Pinned',
-    iconName: 'pinned',
+    //iconName: 'pinned',
+    //for mobile view top pinned icon and desktop left pinned icon
+    icon: isMobileView
+      ? 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFFSURBVHgB7dzhTcJQFEDhWybQDeoIjuAoTqKO4ASOAk6gG9gNZIN6TTUhhvdOAo9Iy/mSF3689JKeFH40lAhJkhZpHMc+1zrX53igP/OaaDjzJVdfa9DV4uTLOlcfR+jSzswxGmg8c8h1myO3+zZXlQMf4sg4M9Hneixt1q6gj2gQaAZX0Ldtjrze+16lI874ZE4+c9cqVGUgYCBgIGAgYCBgIGAgYCBgIGAgYCBgIEn/6eQ3zObCG2YHMhAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEDAQMBAwEKgF2sTleC9t1AK9xuV4Lm3UfqN4lS9vsfxHw4eu625Km8Ur6OdB+7uYHrxfqiGmcyyqfklnpN+691H5nM7QJtdTTP+4MIQkSYv0BZfkCSDYSwACAAAAAElFTkSuQmCC'
+      : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGCSURBVHgB7drdTYRAFIbhM1SwJWAJVmC2E61AO1BLsCKwgrUDKMEOxkPAS+a7YeCweZ9ksle7OXn3jzBjBgDA3co5X3y9++ryNm6+ns82w9pgra8h1zFMrx99hiSGG/yhtXpGX48ppV8LOkOz9qw8fwRbq6v19WaBZ2jWn2evto8nCzzD6lds+oLaTvzjnaLO0BiKCCQQSCCQQCCBQAKBBAIJBBIIJBBIIJBAIIFAAoEEAgmlQL3t48cCKwX6tn18WWClW64Xf7hZ5R0Fv9P5YOszxL3lumyDXG3eFqlhXF4/tOKPtEf6f4dfbLvfit7Xp817UaMFlywwdjVOgEACgQQCCQQSZKAc9fDSTtT5oNYfOqtzNT36upauhSL8zYc+QBX6OijC4aUIoh+gOhwHqMQM/M0LBBIIJBBIIJBAIIFAAoEEAgkEEggkEEggkEAggUACgYToB6h6O3iG6AeoDp8h+gGqw2cIfYDqNIe4pi2gZUd0C52vj+XTcaoZAAA4lz9x+tmcZ0GmbAAAAABJRU5ErkJggg==',
     component: PinnedVideo,
   },
 ];

package/template/src/subComponents/LayoutIconButton.tsx

@@ -67,12 +67,7 @@ const LayoutIconButton = (props: LayoutIconButtonInterface) => {
         textColor: $config.FONT_COLOR,
       },
     };
-    const iconName =
-      layouts[layout]?.iconName === 'pinned' && isMobileView
-        ? 'list-view'
-        : layouts[layout]?.iconName;
-
-    renderContent.push(
+    const iconName = renderContent.push(
       props?.render ? (
         props.render(onPress)
       ) : (
@@ -105,7 +100,7 @@ const LayoutIconButton = (props: LayoutIconButtonInterface) => {
             }}
             key={'defaultLayoutIconWithName'}
             iconProps={{
-              name: iconName,
+              icon: layouts[layout]?.icon,
               tintColor: $config.SECONDARY_ACTION_COLOR,
             }}
             {...iconButtonProps}

package/template/src/subComponents/LayoutIconDropdown.tsx

@@ -80,10 +80,7 @@ const LayoutIconDropdown = (props: LayoutIconDropdownProps) => {
             padding: 10,
           },
           iconType: 'plain',
-          name:
-            item.iconName === 'pinned' && isMobileView
-              ? 'list-view'
-              : item.iconName,
+          icon: item.icon,
           tintColor: $config.SECONDARY_ACTION_COLOR,
         },
         btnTextProps: {