agora-appbuilder-core 2.2.0 → 2.3.0-beta.2

package/template/react-native-toast-message/src/index.wsdk.js

@@ -0,0 +1,419 @@
+import React, { Component } from 'react';
+import { Animated, PanResponder, Keyboard } from 'react-native';
+import PropTypes from 'prop-types';
+
+import SuccessToast from './components/success';
+import ErrorToast from './components/error';
+import InfoToast from './components/info';
+import { complement } from './utils/arr';
+import { includeKeys } from './utils/obj';
+import { stylePropType } from './utils/prop-types';
+import { isIOS } from './utils/platform';
+import styles from './styles';
+
+const FRICTION = 8;
+
+const defaultComponentsConfig = {
+  // eslint-disable-next-line react/prop-types
+  success: ({ hide, ...rest }) => (
+    <SuccessToast {...rest} onTrailingIconPress={hide} />
+  ),
+  // eslint-disable-next-line react/prop-types
+  error: ({ hide, ...rest }) => (
+    <ErrorToast {...rest} onTrailingIconPress={hide} />
+  ),
+  // eslint-disable-next-line react/prop-types
+  info: ({ hide, ...rest }) => (
+    <InfoToast {...rest} onTrailingIconPress={hide} />
+  )
+};
+
+function shouldSetPanResponder(gesture) {
+  const { dx, dy } = gesture;
+  // Fixes onPress handler https://github.com/calintamas/react-native-toast-message/issues/113
+  return Math.abs(dx) > 2 || Math.abs(dy) > 2;
+}
+
+const getInitialState = ({
+  topOffset,
+  bottomOffset,
+  keyboardOffset,
+  visibilityTime,
+  height,
+  autoHide,
+  position,
+  type
+}) => ({
+  // layout
+  topOffset,
+  bottomOffset,
+  keyboardOffset,
+  height,
+  position,
+  type,
+
+  // timing (in ms)
+  visibilityTime,
+  autoHide,
+
+  // content
+  text1: undefined,
+  text2: undefined,
+
+  onPress: undefined,
+  onShow: undefined,
+  onHide: undefined
+});
+
+class Toast extends Component {
+  static _ref = null;
+
+  static setRef(ref = {}) {
+    Toast._ref = ref;
+  }
+
+  static getRef() {
+    return Toast._ref;
+  }
+
+  static clearRef() {
+    Toast._ref = null;
+  }
+
+  static show(options = {}) {
+    Toast._ref.show(options);
+  }
+
+  static hide() {
+    Toast._ref.hide();
+  }
+
+  constructor(props) {
+    super(props);
+
+    this._setState = this._setState.bind(this);
+    this._animateMovement = this._animateMovement.bind(this);
+    this._animateRelease = this._animateRelease.bind(this);
+    this.startTimer = this.startTimer.bind(this);
+    this.animate = this.animate.bind(this);
+    this.show = this.show.bind(this);
+    this.hide = this.hide.bind(this);
+    this.onLayout = this.onLayout.bind(this);
+
+    this.state = {
+      ...getInitialState(props),
+
+      inProgress: false,
+      isVisible: false,
+      animation: new Animated.Value(0),
+      keyboardHeight: 0,
+      keyboardVisible: false,
+
+      customProps: {}
+    };
+
+    this.panResponder = PanResponder.create({
+      onMoveShouldSetPanResponder: (event, gesture) =>
+        shouldSetPanResponder(gesture),
+      onMoveShouldSetPanResponderCapture: (event, gesture) =>
+        shouldSetPanResponder(gesture),
+      onPanResponderMove: (event, gesture) => {
+        this._animateMovement(gesture);
+      },
+      onPanResponderRelease: (event, gesture) => {
+        this._animateRelease(gesture);
+      }
+    });
+  }
+
+  componentDidMount() {
+    const noop = {
+      remove: () => {}
+    };
+    this.keyboardDidShowListener = isIOS
+      ? Keyboard.addListener('keyboardDidShow', this.keyboardDidShow)
+      : noop;
+    this.keyboardDidHideListner = isIOS
+      ? Keyboard.addListener('keyboardDidHide', this.keyboardDidHide)
+      : noop;
+  }
+
+  componentWillUnmount() {
+    this.keyboardDidShowListener.remove();
+    this.keyboardDidHideListner.remove();
+    clearTimeout(this.timer);
+  }
+
+  keyboardDidShow = (e) => {
+    const { isVisible, position } = this.state;
+    this.setState({
+      keyboardHeight: e.endCoordinates.height,
+      keyboardVisible: true
+    });
+
+    if (isVisible && position === 'bottom') {
+      this.animate({ toValue: 2 });
+    }
+  };
+
+  keyboardDidHide = () => {
+    const { isVisible, position } = this.state;
+    this.setState({
+      keyboardVisible: false
+    });
+    if (isVisible && position === 'bottom') {
+      this.animate({ toValue: 1 });
+    }
+  };
+
+  _setState(reducer) {
+    return new Promise((resolve) => this.setState(reducer, () => resolve()));
+  }
+
+  _animateMovement(gesture) {
+    const { position, animation, keyboardVisible } = this.state;
+    const { dy } = gesture;
+    let value = 1 + dy / 100;
+    const start = keyboardVisible && position === 'bottom' ? 2 : 1;
+
+    if (position === 'bottom') {
+      value = start - dy / 100;
+    }
+
+    if (value <= start) {
+      animation.setValue(value);
+    }
+  }
+
+  _animateRelease(gesture) {
+    const { position, animation, keyboardVisible } = this.state;
+    const { dy, vy } = gesture;
+
+    const isBottom = position === 'bottom';
+    let value = 1 + dy / 100;
+
+    if (isBottom) {
+      value = 1 - dy / 100;
+    }
+
+    const treshold = 0.65;
+    if (value <= treshold || Math.abs(vy) >= treshold) {
+      this.hide({
+        speed: Math.abs(vy) * 3
+      });
+    } else {
+      Animated.spring(animation, {
+        toValue: keyboardVisible && isBottom ? 2 : 1,
+        velocity: vy,
+        useNativeDriver: true
+      }).start();
+    }
+  }
+
+  async show(options = {}) {
+    const { inProgress, isVisible } = this.state;
+    if (inProgress || isVisible) {
+      await this.hide();
+    }
+
+    await this._setState((prevState) => ({
+      ...prevState,
+      ...getInitialState(this.props), // Reset layout
+      /*
+          Preserve the previously computed height (via onLayout).
+          If the height of the component corresponding to this `show` call is different,
+          onLayout will be called again and `height` state will adjust.
+
+          This fixes an issue where a succession of calls to components with custom heights (custom Toast types)
+          fails to hide them completely due to always resetting to the default component height
+      */
+      height: prevState.height,
+      inProgress: true,
+      ...options,
+      ...(options?.props ? { customProps: options.props } : { customProps: {} })
+    }));
+    await this.animateShow();
+    await this._setState((prevState) => ({
+      ...prevState,
+      isVisible: true,
+      inProgress: false
+    }));
+    this.clearTimer();
+
+    const { autoHide, onShow } = this.state;
+
+    if (autoHide) {
+      this.startTimer();
+    }
+
+    if (onShow) {
+      onShow();
+    }
+  }
+
+  async hide({ speed } = {}) {
+    await this._setState((prevState) => ({
+      ...prevState,
+      inProgress: true
+    }));
+    await this.animateHide({
+      speed
+    });
+    this.clearTimer();
+    await this._setState((prevState) => ({
+      ...prevState,
+      isVisible: false,
+      inProgress: false
+    }));
+
+    const { onHide } = this.state;
+    if (onHide) {
+      onHide();
+    }
+  }
+
+  animateShow = () => {
+    const { keyboardVisible, position } = this.state;
+    const toValue = keyboardVisible && position === 'bottom' ? 2 : 1;
+    return this.animate({ toValue });
+  };
+
+  animateHide({ speed } = {}) {
+    return this.animate({ toValue: 0, speed });
+  }
+
+  animate({ toValue, speed = 0 }) {
+    const { animation } = this.state;
+    return new Promise((resolve) => {
+      const config = {
+        toValue,
+        useNativeDriver: true,
+        ...(speed > 0 ? { speed } : { friction: FRICTION })
+      };
+      Animated.spring(animation, config).start(() => resolve());
+    });
+  }
+
+  startTimer() {
+    const { visibilityTime } = this.state;
+    this.timer = setTimeout(() => this.hide(), visibilityTime);
+  }
+
+  clearTimer() {
+    clearTimeout(this.timer);
+    this.timer = null;
+  }
+
+  renderContent({ config }) {
+    const componentsConfig = {
+      ...defaultComponentsConfig,
+      ...config
+    };
+
+    const { type, customProps } = this.state;
+    const toastComponent = componentsConfig[type];
+
+    if (!toastComponent) {
+      // eslint-disable-next-line no-console
+      console.error(
+        `Type '${type}' does not exist. Make sure to add it to your 'config'. You can read the documentation here: https://github.com/calintamas/react-native-toast-message/blob/master/README.md`
+      );
+      return null;
+    }
+
+    return toastComponent({
+      ...includeKeys({
+        obj: this.state,
+        keys: [
+          'position',
+          'type',
+          'inProgress',
+          'isVisible',
+          'text1',
+          'text2',
+          'hide',
+          'show',
+          'onPress'
+        ]
+      }),
+      props: { ...customProps },
+      hide: this.hide,
+      show: this.show
+    });
+  }
+
+  getBaseStyle(position = 'bottom', keyboardHeight) {
+    const { topOffset, bottomOffset, keyboardOffset, height, animation } =
+      this.state;
+    const offset = position === 'bottom' ? bottomOffset : topOffset;
+
+    // +5 px to completely hide the toast under StatusBar (on Android)
+    const range = [height + 5, -offset, -(keyboardOffset + keyboardHeight)];
+    const outputRange = position === 'bottom' ? range : complement(range);
+
+    const translateY = animation.interpolate({
+      inputRange: [0, 1, 2],
+      outputRange: [0, 1, 0]
+    });
+
+    return [
+      styles.base,
+      styles[position],
+      {
+        opacity: translateY
+      }
+    ];
+  }
+
+  onLayout(e) {
+    this.setState({ height: e.nativeEvent.layout.height });
+  }
+
+  render() {
+    const { style } = this.props;
+    const { position, keyboardHeight } = this.state;
+    const baseStyle = this.getBaseStyle(position, keyboardHeight);
+
+    return (
+      <Animated.View
+        testID='animatedView'
+        onLayout={this.onLayout}
+        style={[
+          baseStyle,
+          style,
+          { zIndex: 100, display: this.state.isVisible ? 'flex' : 'none', backgroundColor:'red' }
+        ]} //added zindex
+        {...this.panResponder.panHandlers}>
+        {this.renderContent(this.props)}
+      </Animated.View>
+    );
+  }
+}
+
+Toast.propTypes = {
+  config: PropTypes.objectOf(PropTypes.func),
+  style: stylePropType,
+  topOffset: PropTypes.number,
+  bottomOffset: PropTypes.number,
+  keyboardOffset: PropTypes.number,
+  visibilityTime: PropTypes.number,
+  autoHide: PropTypes.bool,
+  height: PropTypes.number,
+  position: PropTypes.oneOf(['top', 'bottom']),
+  type: PropTypes.string
+};
+
+Toast.defaultProps = {
+  config: {},
+  style: undefined,
+  topOffset: 30,
+  bottomOffset: 40,
+  keyboardOffset: 15,
+  visibilityTime: 4000,
+  autoHide: true,
+  height: 60,
+  position: 'top',
+  type: 'success'
+};
+
+export default Toast;

package/template/src/App.tsx

@@ -13,84 +13,116 @@ import React, {useState} from 'react';
 import Join from './pages/Join';
 import VideoCall from './pages/VideoCall';
 import Create from './pages/Create';
-import Authenticate from './pages/Authenticate';
-import {Router, Route, Switch, Redirect} from './components/Router';
+import {Route, Switch, Redirect} from './components/Router';
 import PrivateRoute from './components/PrivateRoute';
 import OAuth from './components/OAuth';
-import Navigation from './components/Navigation';
 import StoreToken from './components/StoreToken';
-import {StorageProvider} from './components/StorageContext';
-import GraphQLProvider from './components/GraphQLProvider';
-// import JoinPhrase from './components/JoinPhrase';
-import {SessionProvider} from './components/SessionContext';
-import {ImageBackground, Platform, SafeAreaView, StatusBar} from 'react-native';
-import ColorConfigure from './components/ColorConfigure';
-import Toast from '../react-native-toast-message';
-import ToastConfig from './subComponents/toastConfig';
-import shouldAuthenticate from './utils/shouldAuthenticate';
+import {shouldAuthenticate, isIOS} from './utils/common';
 import KeyboardManager from 'react-native-keyboard-manager';
-
-
-if (Platform.OS === 'ios') {
+// commented for v1 release
+//import {useFpe, CustomRoutesInterface, CUSTOM_ROUTES_PREFIX} from 'fpe-api';
+import AppWrapper from './AppWrapper';
+import {
+  MeetingInfoContextInterface,
+  MeetingInfoDefaultValue,
+  MeetingInfoProvider,
+} from './components/meeting-info/useMeetingInfo';
+import {SetMeetingInfoProvider} from './components/meeting-info/useSetMeetingInfo';
+import {ShareLinkProvider} from './components/useShareLink';
+if (isIOS) {
   KeyboardManager.setEnable(true);
   KeyboardManager.setEnableAutoToolbar(false);
   KeyboardManager.setShouldShowToolbarPlaceholder(false);
   KeyboardManager.setShouldResignOnTouchOutside(true);
 }
 
+//Extending the UI Kit Type defintion to add custom attribute to render interface
+declare module 'agora-rn-uikit' {
+  interface DefaultRenderInterface {
+    name: string;
+    screenUid: number;
+    offline: boolean;
+  }
+  interface RtcPropsInterface {
+    screenShareUid: number;
+    screenShareToken?: string;
+  }
+}
+
 const App: React.FC = () => {
-  const [phrase, onChangePhrase] = useState('');
+  //commented for v1 release
+  //const CustomRoutes = useFpe((data) => data?.customRoutes);
+  // const RenderCustomRoutes = () => {
+  //   try {
+  //     return (
+  //       CustomRoutes &&
+  //       Array.isArray(CustomRoutes) &&
+  //       CustomRoutes.length &&
+  //       CustomRoutes?.map((item: CustomRoutesInterface, i: number) => {
+  //         let RouteComponent = item?.isPrivateRoute ? PrivateRoute : Route;
+  //         return (
+  //           <RouteComponent
+  //             path={CUSTOM_ROUTES_PREFIX + item.path}
+  //             exact={item.exact}
+  //             key={i}
+  //             failureRedirectTo={
+  //               item.failureRedirectTo ? item.failureRedirectTo : '/'
+  //             }
+  //             {...item.routeProps}>
+  //             <item.component {...item.componentProps} />
+  //           </RouteComponent>
+  //         );
+  //       })
+  //     );
+  //   } catch (error) {
+  //     console.error('Error on rendering the custom routes');
+  //     return null;
+  //   }
+  // };
+  const [meetingInfo, setMeetingInfo] = useState<MeetingInfoContextInterface>(
+    MeetingInfoDefaultValue,
+  );
 
   return (
-    <ImageBackground
-      source={{uri: $config.BG}}
-      style={{flex: 1}}
-      resizeMode={'cover'}>
-      <SafeAreaView style={{flex: 1}}>
-        <StatusBar hidden={true} />
-        <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />
-        <StorageProvider>
-          <GraphQLProvider>
-            <Router>
-              <SessionProvider>
-                <ColorConfigure>
-                  <Navigation />
-                  <Switch>
-                    <Route exact path={'/'}>
-                      <Redirect to={'/create'} />
-                    </Route>
-                    <Route exact path={'/authenticate'}>
-                      {shouldAuthenticate ? <OAuth /> : <Redirect to={'/'} />}
-                    </Route>
-                    <Route path={'/auth-token/:token'}>
-                      <StoreToken />
-                    </Route>
-                    <Route exact path={'/join'}>
-                      <Join phrase={phrase} onChangePhrase={onChangePhrase} />
-                    </Route>
-                    {shouldAuthenticate ? (
-                      <PrivateRoute
-                        path={'/create'}
-                        failureRedirectTo={'/authenticate'}>
-                        <Create />
-                      </PrivateRoute>
-                    ) : (
-                      <Route path={'/create'}>
-                        <Create />
-                      </Route>
-                    )}
-                    <Route path={'/:phrase'}>
-                      <VideoCall />
-                    </Route>
-                  </Switch>
-                </ColorConfigure>
-              </SessionProvider>
-            </Router>
-          </GraphQLProvider>
-        </StorageProvider>
-      </SafeAreaView>
-    </ImageBackground>
+    <AppWrapper>
+      <SetMeetingInfoProvider value={{setMeetingInfo}}>
+        <MeetingInfoProvider value={{...meetingInfo}}>
+          <ShareLinkProvider>
+            <Switch>
+              {/* commented for v1 release */}
+              {/* {RenderCustomRoutes()} */}
+              <Route exact path={'/'}>
+                <Redirect to={'/create'} />
+              </Route>
+              <Route exact path={'/authenticate'}>
+                {shouldAuthenticate ? <OAuth /> : <Redirect to={'/'} />}
+              </Route>
+              <Route path={'/auth-token/:token'}>
+                <StoreToken />
+              </Route>
+              <Route exact path={'/join'}>
+                <Join />
+              </Route>
+              {shouldAuthenticate ? (
+                <PrivateRoute
+                  path={'/create'}
+                  failureRedirectTo={'/authenticate'}>
+                  <Create />
+                </PrivateRoute>
+              ) : (
+                <Route path={'/create'}>
+                  <Create />
+                </Route>
+              )}
+              <Route path={'/:phrase'}>
+                <VideoCall />
+              </Route>
+            </Switch>
+          </ShareLinkProvider>
+        </MeetingInfoProvider>
+      </SetMeetingInfoProvider>
+    </AppWrapper>
   );
-  // return <div> hello world</div>; {/* isn't join:phrase redundant now, also can we remove joinStore */}
 };
+
 export default App;

package/template/src/AppWrapper.tsx

@@ -0,0 +1,79 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React from 'react';
+import {Router} from './components/Router';
+import Navigation from './components/Navigation';
+import {StorageProvider} from './components/StorageContext';
+import GraphQLProvider from './components/GraphQLProvider';
+import {SessionProvider} from './components/SessionContext';
+import {ImageBackground, SafeAreaView, StatusBar, Platform} from 'react-native';
+import ColorConfigure from './components/ColorConfigure';
+import Toast from '../react-native-toast-message';
+import ToastConfig from './subComponents/toastConfig';
+import {isValidReactComponent} from './utils/common';
+import DimensionProvider from './components/dimension/DimensionProvider';
+import Error from './components/common/Error';
+import {ErrorProvider} from './components/common';
+import {useFpe, FpeProvider, fpeConfig, FpeApiInterface} from 'fpe-api';
+import {LanguageProvider} from './language/useLanguage';
+
+interface AppWrapperProps {
+  children: React.ReactNode;
+  fpeConfig?: FpeApiInterface;
+}
+
+const AppWrapper = (props: AppWrapperProps) => {
+  const AppRoot = useFpe((data) => {
+    if (data?.appRoot && isValidReactComponent(data.appRoot)) {
+      return data.appRoot;
+    }
+    return React.Fragment;
+  });
+
+  return (
+    <AppRoot>
+      <ImageBackground
+        source={{uri: $config.BG}}
+        style={{flex: 1}}
+        resizeMode={'cover'}>
+        <SafeAreaView
+          // @ts-ignore textAlign not supported by TS definitions but is applied to web regardless
+          style={[{flex: 1}, Platform.select({web: {textAlign: 'left'}})]}>
+          <StatusBar hidden={true} />
+          <Toast ref={(ref) => Toast.setRef(ref)} config={ToastConfig} />
+          <StorageProvider>
+            <GraphQLProvider>
+              <Router>
+                <SessionProvider>
+                  <ColorConfigure>
+                    <DimensionProvider>
+                      <LanguageProvider>
+                        <ErrorProvider>
+                          <Error />
+                          <Navigation />
+                          {props.children}
+                        </ErrorProvider>
+                      </LanguageProvider>
+                    </DimensionProvider>
+                  </ColorConfigure>
+                </SessionProvider>
+              </Router>
+            </GraphQLProvider>
+          </StorageProvider>
+        </SafeAreaView>
+      </ImageBackground>
+    </AppRoot>
+  );
+  // return <div> hello world</div>; {/* isn't join:phrase redundant now, also can we remove joinStore */}
+};
+
+export default AppWrapper;