agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/pages/video-call/ActionSheetStyles.css

@@ -0,0 +1,138 @@
+
+  :root {
+    --rsbs-backdrop-bg: rgba(0, 0, 0, 0.6);
+    --rsbs-bg: #fff;
+    --rsbs-handle-bg: hsla(0, 0%, 0%, 0.14);
+    --rsbs-max-w: auto;
+    --rsbs-ml: env(safe-area-inset-left);
+    --rsbs-mr: env(safe-area-inset-right);
+    --rsbs-overlay-rounded: 16px;
+    --handleColor: $config.PRIMARY_ACTION_BRAND_COLOR;
+  }
+
+ 
+  [data-rsbs-overlay] {
+    border-top-left-radius: var(--rsbs-overlay-rounded);
+    border-top-right-radius: var(--rsbs-overlay-rounded);
+    display: flex;
+    background: var(--sheet-background); /* var(--rsbs-bg);*/
+    flex-direction: column;
+    height: var(--rsbs-overlay-h);
+    transform: translate3d(0, var(--rsbs-overlay-translate-y), 0);
+    will-change: height;
+  }
+  
+  [data-rsbs-overlay]:focus {
+    outline: none;
+  }
+  [data-rsbs-is-blocking="false"] [data-rsbs-overlay] {
+    box-shadow: 0 -5px 60px 0 rgba(38, 89, 115, 0.11),
+      0 -1px 0 rgba(38, 89, 115, 0.05);
+  }
+  [data-rsbs-overlay],
+  [data-rsbs-root]:after {
+    max-width: var(--rsbs-max-w);
+    margin-left: var(--rsbs-ml);
+    margin-right: var(--rsbs-mr);
+  }
+  [data-rsbs-overlay],
+  [data-rsbs-backdrop],
+  [data-rsbs-root]:after {
+    z-index: 3;
+    overscroll-behavior: none;
+    touch-action: none;
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+  }
+  [data-rsbs-backdrop] {
+    top: -60px;
+    bottom: -60px;
+    background-color: var(--rsbs-backdrop-bg);
+    will-change: opacity;
+    cursor: pointer;
+    opacity: 1;
+  }
+  [data-rsbs-is-dismissable="false"] [data-rsbs-backdrop] {
+    cursor: ns-resize;
+  }
+  
+  [data-rsbs-root]:after {
+    content: "";
+    pointer-events: none;
+    background: var(--rsbs-bg);
+    height: 1px;
+    transform-origin: bottom;
+    transform: scale3d(1, var(--rsbs-antigap-scale-y), 1);
+    will-change: transform;
+  }
+  [data-rsbs-footer],
+  [data-rsbs-header] {
+    flex-shrink: 0;
+    cursor: ns-resize;
+   
+  }
+  [data-rsbs-header] {
+    text-align: center;
+    user-select: none;
+    box-shadow: 0 1px 0
+      rgba(46, 59, 66, calc(var(--rsbs-content-opacity) * 0.125));
+    z-index: 1;
+   /* padding-top: calc(20px + env(safe-area-inset-top));
+    padding-bottom: 16px; */
+  
+  }
+  [data-rsbs-header]:before {
+    /* position: absolute;
+    content: "";
+    display: block;
+    width: 36px;
+    height: 4px;
+    top: calc(8px + env(safe-area-inset-top));
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 2px; */
+    background-color: var(--handle-background); /*var(--rsbs-handle-bg); */
+  }
+  @media (min-resolution: 2dppx) {
+    [data-rsbs-header]:before {
+      transform: translateX(-50%) scaleY(0.75);
+    }
+  }
+  [data-rsbs-has-header="false"] [data-rsbs-header] {
+    box-shadow: none;
+    padding-top: calc(12px + env(safe-area-inset-top));
+  }
+  
+  [data-rsbs-scroll] {
+    flex-shrink: 1;
+    flex-grow: 1;
+    -webkit-tap-highlight-color: revert;
+    -webkit-touch-callout: revert;
+    -webkit-user-select: auto;
+    -ms-user-select: auto;
+    user-select: auto;
+    overflow: hidden;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  [data-rsbs-state="opening"] [data-rsbs-content="true"] {
+    height:100%;
+  }
+
+  [data-rsbs-state="open"] [data-rsbs-content="true"] {
+    height:100%;
+  }
+  [data-rsbs-state="dragging"] [data-rsbs-content="true"] {
+    height:100%;
+  }
+  [data-rsbs-state="snapping"] [data-rsbs-content="true"] {
+    height:100%;
+  }
+
+

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

@@ -1,24 +1,37 @@
-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';
+import {LogSource, logger} from '../../logger/AppBuilderLogger';
+const isMobileView = isMobileUA();
+const DefaultLayouts: LayoutItem[] = [
   {
     name: 'grid',
-    label: 'Grid Layout',
-    iconName: 'gridLayoutIcon',
+    label: '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 Layout',
-    iconName: 'pinnedLayoutIcon',
+    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 +41,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;
     }
@@ -58,8 +71,15 @@ export const useChangeDefaultLayout = () => {
   }
 
   return () => {
-    setLayout((activeLayout: string) =>
-      activeLayout === layout[1].name ? layout[0].name : layout[1].name,
-    );
+    setLayout((activeLayout: string) => {
+      const layoutIs =
+        activeLayout === layout[1].name ? layout[0].name : layout[1].name;
+      logger.log(
+        LogSource.Internals,
+        'LAYOUT',
+        `layout changed to - ${layoutIs}`,
+      );
+      return layoutIs;
+    });
   };
 };

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

@@ -1,68 +1,121 @@
-import React, {useContext} from 'react';
-import {View, StyleSheet, useWindowDimensions} from 'react-native';
-import {RFValue} from 'react-native-responsive-fontsize';
-import {ImageIcon, RenderInterface} from '../../../agora-rn-uikit';
-import TextWithTooltip from '../../subComponents/TextWithTooltip';
-import ColorContext from '../../components/ColorContext';
+import React from 'react';
+import {View, StyleSheet, Text} from 'react-native';
+import ThemeConfig from '../../theme';
+import ImageIcon from '../../atoms/ImageIcon';
+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 {videoRoomUserFallbackText} from '../../language/default-labels/videoCallScreenLabels';
 
-interface NameWithMicIconProps {
-  user: RenderInterface;
+export interface NameWithMicIconProps {
+  name: string;
+  muted?: boolean;
+  customBgColor?: string;
+  customTextColor?: string;
 }
 
 const NameWithMicIcon = (props: NameWithMicIconProps) => {
-  const {user} = props;
-  const {primaryColor} = useContext(ColorContext);
-  const {height, width} = useWindowDimensions();
-  //commented for v1 release
-  //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
-  const remoteUserDefaultLabel = 'User';
+  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 {name, muted} = props;
+  const remoteUserDefaultLabel = useString(videoRoomUserFallbackText)();
+  const isSmall = useIsSmall();
   return (
-    <>
-      <View style={[style.MicBackdrop]}>
+    <View
+      style={[
+        style.container,
+        {
+          maxWidth: videoTileWidth * 0.6 > 180 ? 180 : videoTileWidth * 0.6,
+        },
+        reduceSpace ? {left: 2, bottom: 2} : {},
+        reduceSpace && activeUidsLen > 12 ? {padding: 2} : {},
+        props?.customBgColor ? {backgroundColor: props?.customBgColor} : {},
+      ]}>
+      {muted !== undefined ? (
         <ImageIcon
-          name={user.audio ? 'mic' : 'micOff'}
-          color={user.audio ? primaryColor : 'red'}
-          style={style.MicIcon}
+          iconType="plain"
+          name={!muted ? 'mic-on' : 'mic-off'}
+          tintColor={
+            !muted ? $config.PRIMARY_ACTION_BRAND_COLOR : $config.SEMANTIC_ERROR
+          }
+          iconSize={20}
         />
-      </View>
-      <View style={{flex: 1}}>
-        <TextWithTooltip
-          value={user.name || remoteUserDefaultLabel}
-          style={[
-            style.name,
-            {
-              fontSize: RFValue(14, height > width ? height : width),
-            },
-          ]}
-        />
-      </View>
-    </>
+      ) : (
+        <></>
+      )}
+      {(isMobileUA() || (!isMobileUA() && isSmall())) &&
+      currentLayout === getGridLayoutName() &&
+      activeUidsLen > 6 ? (
+        <></>
+      ) : (
+        <PlatformWrapper>
+          <Text
+            numberOfLines={1}
+            textBreakStrategy="simple"
+            ellipsizeMode="tail"
+            style={[
+              style.name,
+              props?.customTextColor ? {color: props?.customTextColor} : {},
+            ]}>
+            {name || remoteUserDefaultLabel}
+          </Text>
+        </PlatformWrapper>
+      )}
+    </View>
+  );
+};
+const PlatformWrapper = ({children}) => {
+  return isWeb() ? (
+    <div
+      style={{
+        userSelect: 'none',
+        MozUserSelect: 'none',
+        WebkitUserSelect: 'none',
+        msUserSelect: 'none',
+        alignSelf: 'center',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        color: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
+      }}>
+      {children}
+    </div>
+  ) : (
+    <>{children}</>
   );
 };
 
 const style = StyleSheet.create({
+  container: {
+    backgroundColor:
+      $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR + hexadecimalTransparency['25%'],
+    position: 'absolute',
+    alignItems: 'center',
+    padding: 8,
+    // height: 34,
+    left: 8,
+    bottom: 8,
+    borderRadius: 4,
+    flexDirection: 'row',
+    zIndex: 999,
+    elevation: 5,
+  },
   name: {
-    color: $config.PRIMARY_FONT_COLOR,
-    lineHeight: 25,
-    fontWeight: '700',
+    color: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
+    fontSize: ThemeConfig.FontSize.small,
+    fontWeight: '600',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
     flexShrink: 1,
-  },
-  MicBackdrop: {
-    width: 20,
-    height: 20,
-    borderRadius: 15,
-    marginHorizontal: 10,
-    backgroundColor: $config.SECONDARY_FONT_COLOR,
-    display: 'flex',
-    alignSelf: 'center',
-    justifyContent: 'center',
-  },
-  MicIcon: {
-    width: '80%',
-    height: '80%',
-    alignSelf: 'center',
-    resizeMode: 'contain',
+    marginLeft: 4,
+    marginRight: 2,
   },
 });
 

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';
 
@@ -13,37 +13,22 @@ const DefaultRenderComponent: RenderComponentType = {
 };
 interface RenderComponentProps {
   uid: UidType;
+  isMax?: boolean;
 }
-const RenderComponent = ({uid}: 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 RenderComponent = ({uid, isMax = false}: RenderComponentProps) => {
+  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]} />;
+  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;