agora-appbuilder-core 4.0.0 → 4.0.2

package/template/src/pages/video-call/ActionSheetHandle.tsx

@@ -3,7 +3,12 @@ import React from 'react';
 
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
 
-import {ChatHeader, PeopleHeader, SettingsHeader} from './SidePanelHeader';
+import {
+  ChatHeader,
+  PeopleHeader,
+  SettingsHeader,
+  TranscriptHeader,
+} from './SidePanelHeader';
 
 const ActionSheetHandle = (props: {sidePanel: SidePanelType}) => {
   const Header = null;
@@ -17,6 +22,7 @@ const ActionSheetHandle = (props: {sidePanel: SidePanelType}) => {
       {sidePanel === SidePanelType.Participants && <PeopleHeader />}
       {sidePanel === SidePanelType.Chat && <ChatHeader />}
       {sidePanel === SidePanelType.Settings && <SettingsHeader />}
+      {sidePanel === SidePanelType.Transcript && <TranscriptHeader />}
     </View>
   );
 };

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

@@ -1,24 +1,36 @@
-import {layoutObjectType} from 'customization-api';
+import {LayoutItem} from 'customization-api';
 import GridVideo from '../../components/GridVideo';
 import PinnedVideo from '../../components/PinnedVideo';
 import useLayoutsData from './useLayoutsData';
 import {useLayout} from '../../utils/useLayout';
-
-export const DefaultLayouts: layoutObjectType[] = [
+import {isMobileUA} from '../../utils/common';
+import {
+  toolbarItemLayoutOptionGridText,
+  toolbarItemLayoutOptionSidebarText,
+} from '../../language/default-labels/videoCallScreenLabels';
+const isMobileView = isMobileUA();
+const DefaultLayouts: LayoutItem[] = [
   {
     name: 'grid',
     label: 'Grid',
-    iconName: 'grid',
+    translationKey: toolbarItemLayoutOptionGridText,
+    //iconName: 'grid',
+    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFOSURBVHgB7drBTcNAEIXhWVeQEkwJVIDohA6gA2iBigIVhA6cEuhgGGNfd1+kZK1x9H/SyidbT0/ry+6YAQBwt9z9EOs91tFv4xTrZW8ZasHGWJP3Mc3fz56hiHBTPEbr5xzrsZTya0kzDLW3fNmCo/U1xnqzxBmG+nv2att4ssQZqr/Y/IPaRmJ7l6wZBkMTBQkUJFCQQEECBQkUJFCQQEECBQkUJFCQQEECBQkUJFCQ0Croy7bxY4kztAr6tm18WuIMrSPXQzxO1vlGIU46HyxxhuoOWq9Bnm25FunhvH7fMme4yHz94stt5C0cY32su2NXGQAAuDPOAFUzGANUIhwDVLW3nAGqfwxQiQwMUIkMnCgKFCRQkEBBAgUJFCRQkEBBAgUJFCRQkEBBAgUJFCRQkEBBAgNUIgMDVCIDA1QMUF2X4SLOABUAADv0Bxz9l6sMoGOZAAAAAElFTkSuQmCC',
     component: GridVideo,
   },
   {
     name: 'pinned',
-    label: 'Pinned',
-    iconName: 'pinned',
+    label: 'Sidebar',
+    translationKey: toolbarItemLayoutOptionSidebarText,
+    //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,
   },
 ];
-
+export {DefaultLayouts};
 export const getPinnedLayoutName = () => DefaultLayouts[1].name;
 export const getGridLayoutName = () => DefaultLayouts[0].name;
 
@@ -28,7 +40,7 @@ export const useSetPinnedLayout = () => {
   const pinnedLayoutName = getPinnedLayoutName();
   let checkPinnedLayoutExist = false;
   if (layouts && Array.isArray(layouts) && layouts.length) {
-    let data = layouts.filter((item) => item.name === pinnedLayoutName);
+    let data = layouts.filter(item => item.name === pinnedLayoutName);
     if (data && data.length) {
       checkPinnedLayoutExist = true;
     }

package/template/src/pages/video-call/NameWithMicIcon.tsx

@@ -1,88 +1,60 @@
-import React, {useContext, useEffect} from 'react';
-import {View, StyleSheet, useWindowDimensions, Text} from 'react-native';
-import {RFValue} from 'react-native-responsive-fontsize';
+import React from 'react';
+import {View, StyleSheet, Text} from 'react-native';
 import ThemeConfig from '../../theme';
-import {RenderInterface} from '../../../agora-rn-uikit';
 import ImageIcon from '../../atoms/ImageIcon';
-import TextWithTooltip from '../../subComponents/TextWithTooltip';
+import {useLayout, useContent} from 'customization-api';
+import {isMobileUA, isWeb, useIsSmall} from '../../utils/common';
+import {getGridLayoutName} from './DefaultLayouts';
+import {useVideoContainer} from './VideoRenderer';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 import {useString} from '../../utils/useString';
-import {useLayout, useRender} from 'customization-api';
-import useIsActiveSpeaker from '../../utils/useIsActiveSpeaker';
-import {isMobileUA, isWeb, isWebInternal, useIsSmall} from '../../utils/common';
-import AnimatedActiveSpeaker from '../../atoms/AnimatedActiveSpeaker';
-import {getGridLayoutName, getPinnedLayoutName} from './DefaultLayouts';
+import {videoRoomUserFallbackText} from '../../language/default-labels/videoCallScreenLabels';
 
-interface NameWithMicIconProps {
-  user: RenderInterface;
-  isMax: boolean;
-  videoTileWidth: number;
+export interface NameWithMicIconProps {
+  name: string;
+  muted?: boolean;
+  customBgColor?: string;
+  customTextColor?: string;
 }
 
 const NameWithMicIcon = (props: NameWithMicIconProps) => {
-  const {activeUids} = useRender();
+  const {activeUids, customContent} = useContent();
+  const {videoTileWidth} = useVideoContainer();
   const {currentLayout} = useLayout();
+  const activeUidsLen = activeUids?.filter(i => !customContent[i])?.length;
   const reduceSpace =
     isMobileUA() &&
     activeUids.length > 4 &&
     currentLayout === getGridLayoutName();
-  const {user} = props;
-  const {height, width} = useWindowDimensions();
-  const isActiveSpeaker = useIsActiveSpeaker();
-  const isSpeaking = isActiveSpeaker(user.uid);
-  //commented for v1 release
-  //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
-  const remoteUserDefaultLabel = 'User';
+  const {name, muted} = props;
+  const remoteUserDefaultLabel = useString(videoRoomUserFallbackText)();
   const isSmall = useIsSmall();
   return (
     <View
       style={[
         style.container,
         {
-          maxWidth:
-            props.videoTileWidth * 0.6 > 180 ? 180 : props.videoTileWidth * 0.6,
+          maxWidth: videoTileWidth * 0.6 > 180 ? 180 : videoTileWidth * 0.6,
         },
         reduceSpace ? {left: 2, bottom: 2} : {},
-        reduceSpace && activeUids.length > 12 ? {padding: 2} : {},
+        reduceSpace && activeUidsLen > 12 ? {padding: 2} : {},
+        props?.customBgColor ? {backgroundColor: props?.customBgColor} : {},
       ]}>
-      {/* {user.audio ? (
-          <AnimatedActiveSpeaker isSpeaking={isSpeaking} />
-        ) : ( */}
-      <ImageIcon
-        iconType="plain"
-        name={
-          user.audio && isSpeaking
-            ? 'active-speaker'
-            : user.audio
-            ? 'mic-on'
-            : 'mic-off'
-        }
-        tintColor={
-          user.audio
-            ? $config.PRIMARY_ACTION_BRAND_COLOR
-            : $config.SEMANTIC_ERROR
-        }
-        iconSize={20}
-      />
-      {/* )} */}
-      {/* <ImageIcon
-          name={
-            isSpeaking ? 'active-speaker' : user.audio ? 'mic-on' : 'mic-off'
-          }
+      {muted !== undefined ? (
+        <ImageIcon
+          iconType="plain"
+          name={!muted ? 'mic-on' : 'mic-off'}
           tintColor={
-            isSpeaking
-              ? $config.PRIMARY_ACTION_BRAND_COLOR
-              : user.audio
-              ? $config.PRIMARY_ACTION_BRAND_COLOR
-              : $config.SEMANTIC_ERROR
+            !muted ? $config.PRIMARY_ACTION_BRAND_COLOR : $config.SEMANTIC_ERROR
           }
-          iconSize={'small'}
-        /> */}
+          iconSize={20}
+        />
+      ) : (
+        <></>
+      )}
       {(isMobileUA() || (!isMobileUA() && isSmall())) &&
       currentLayout === getGridLayoutName() &&
-      activeUids.length > 6 ? (
-        //  ||  (isMobileUA() &&
-        //     currentLayout !== getPinnedLayoutName() &&
-        //     !props?.isMax)
+      activeUidsLen > 6 ? (
         <></>
       ) : (
         <PlatformWrapper>
@@ -90,8 +62,11 @@ const NameWithMicIcon = (props: NameWithMicIconProps) => {
             numberOfLines={1}
             textBreakStrategy="simple"
             ellipsizeMode="tail"
-            style={style.name}>
-            {user.name || remoteUserDefaultLabel}
+            style={[
+              style.name,
+              props?.customTextColor ? {color: props?.customTextColor} : {},
+            ]}>
+            {name || remoteUserDefaultLabel}
           </Text>
         </PlatformWrapper>
       )}
@@ -120,7 +95,8 @@ const PlatformWrapper = ({children}) => {
 
 const style = StyleSheet.create({
   container: {
-    backgroundColor: $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR,
+    backgroundColor:
+      $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR + hexadecimalTransparency['25%'],
     position: 'absolute',
     alignItems: 'center',
     padding: 8,
@@ -129,7 +105,8 @@ const style = StyleSheet.create({
     bottom: 8,
     borderRadius: 4,
     flexDirection: 'row',
-    zIndex: 5,
+    zIndex: 999,
+    elevation: 5,
   },
   name: {
     color: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,

package/template/src/pages/video-call/PinchableView.tsx

@@ -0,0 +1,119 @@
+import React, {createRef} from 'react';
+import {Animated, StyleSheet, View} from 'react-native';
+import {
+  PanGestureHandler,
+  PanGestureHandlerStateChangeEvent,
+  PinchGestureHandler,
+  State,
+} from 'react-native-gesture-handler';
+const USE_NATIVE_DRIVER = false;
+//nesting touch handler with native animated driver is not supported yet.
+export class PinchableView extends React.Component {
+  _pinchRef = createRef();
+  _panRef = createRef();
+
+  //pan
+  _translateX = new Animated.Value(0);
+  _translateY = new Animated.Value(0);
+  _lastOffset = {x: 0, y: 0};
+  _onGestureEvent = Animated.event(
+    [
+      {
+        nativeEvent: {
+          translationX: this._translateX,
+          translationY: this._translateY,
+        },
+      },
+    ],
+    {useNativeDriver: USE_NATIVE_DRIVER},
+  );
+  _onHandlerStateChange = (event: PanGestureHandlerStateChangeEvent) => {
+    if (event.nativeEvent.oldState === State.ACTIVE) {
+      this._lastOffset.x += event.nativeEvent.translationX;
+      this._lastOffset.y += event.nativeEvent.translationY;
+      this._translateX.setOffset(this._lastOffset.x);
+      this._translateX.setValue(0);
+      this._translateY.setOffset(this._lastOffset.y);
+      this._translateY.setValue(0);
+    }
+  };
+  //pan
+
+  //pinch
+  _baseScale = new Animated.Value(1);
+  _pinchScale = new Animated.Value(1);
+  _scale = Animated.multiply(this._baseScale, this._pinchScale);
+  _lastScale = 1;
+  _onPinchGestureEvent = Animated.event(
+    [{nativeEvent: {scale: this._pinchScale}}],
+    {
+      useNativeDriver: USE_NATIVE_DRIVER,
+    },
+  );
+  _onPinchHandlerStateChange = (event) => {
+    if (event.nativeEvent.oldState === State.ACTIVE) {
+      this._lastScale *= event.nativeEvent.scale;
+      this._baseScale.setValue(this._lastScale);
+      this._pinchScale.setValue(1);
+    }
+  };
+  //pinch
+
+  render() {
+    return (
+      <View style={styles.mainContainer}>
+        <PanGestureHandler
+          ref={this._panRef}
+          onGestureEvent={this._onGestureEvent}
+          onHandlerStateChange={this._onHandlerStateChange}>
+          <View style={styles.wrapper}>
+            <PinchGestureHandler
+              ref={this._pinchRef}
+              simultaneousHandlers={this._panRef}
+              onGestureEvent={this._onPinchGestureEvent}
+              onHandlerStateChange={this._onPinchHandlerStateChange}>
+              <Animated.View style={styles.viewContainer} collapsable={false}>
+                <Animated.View
+                  style={[
+                    styles.pinchableView,
+                    {
+                      transform: [
+                        {perspective: 200},
+                        {scale: this._scale},
+                        {translateX: this._translateX},
+                        {translateY: this._translateY},
+                      ],
+                    },
+                  ]}>
+                  {this.props.children}
+                </Animated.View>
+              </Animated.View>
+            </PinchGestureHandler>
+          </View>
+        </PanGestureHandler>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    width: '100%',
+    height: '100%',
+  },
+  viewContainer: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'black',
+    overflow: 'hidden',
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  pinchableView: {
+    width: '100%',
+    height: '100%',
+  },
+  wrapper: {
+    flex: 1,
+  },
+});

package/template/src/pages/video-call/RenderComponent.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import VideoRenderer from './VideoRenderer';
 import {UidType} from '../../../agora-rn-uikit';
-import {renderComponentObjectInterface, useRender} from 'customization-api';
+import {useContent} from 'customization-api';
 import {useCustomization} from 'customization-implementation';
 import {isValidReactComponent} from '../../utils/common';
 
@@ -16,35 +16,19 @@ interface RenderComponentProps {
   isMax?: boolean;
 }
 const RenderComponent = ({uid, isMax = false}: RenderComponentProps) => {
-  const {renderList} = useRender();
-  const FpeRenderComponent = useCustomization((config) =>
-    typeof config?.components?.videoCall === 'object' &&
-    typeof config?.components?.videoCall?.customContent === 'object'
-      ? config?.components?.videoCall?.customContent
-      : undefined,
-  );
+  const {defaultContent, customContent, activeUids} = useContent();
+  const RenderComp = DefaultRenderComponent['rtc'];
 
-  const getRenderComponent = (type: keyof renderComponentObjectInterface) => {
-    //checking FPE providing the render component and whether its valid react element
-    const FPEComp =
-      FpeRenderComponent &&
-      FpeRenderComponent[type] &&
-      isValidReactComponent(FpeRenderComponent[type])
-        ? FpeRenderComponent[type]
-        : false;
-    //if its valid element then return fpe comp other return the default component
-    if (FPEComp) {
-      return FPEComp;
-    } else {
-      return DefaultRenderComponent[type]
-        ? DefaultRenderComponent[type]
-        : DefaultRenderComponent['rtc'];
-    }
-  };
-
-  const RenderComp = getRenderComponent(renderList[uid]?.type);
-
-  return <RenderComp user={renderList[uid]} isMax={isMax} />;
+  if (customContent && customContent[uid] && customContent[uid]?.component) {
+    const CustomComponent = customContent[uid]?.component;
+    const CustomComponentProps = customContent[uid]?.props;
+    //@ts-ignore
+    return <CustomComponent {...CustomComponentProps} />;
+  } else if (defaultContent[uid]) {
+    return <RenderComp user={defaultContent[uid]} isMax={isMax} />;
+  } else {
+    return null;
+  }
 };
 
 export default RenderComponent;