agora-appbuilder-core 4.0.0 → 4.0.2

package/template/src/components/whiteboard/WhiteboardView.native.tsx

@@ -0,0 +1,188 @@
+/*
+********************************************
+ 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, {useContext, useEffect, useRef, useState} from 'react';
+import {whiteboardContext} from './WhiteboardConfigure';
+import {StyleSheet, View, Text} from 'react-native';
+import {useRoomInfo} from 'customization-api';
+import {
+  WhiteboardView as NativeWhiteboardView,
+  RoomCallbackHandler,
+} from '@netless/react-native-whiteboard';
+import WhiteboardWidget from './WhiteboardWidget';
+import {
+  whiteboardInitializingText,
+  whiteboardNativeInfoToastHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {useString} from '../../utils/useString';
+import ThemeConfig from '../../theme';
+import Toast from '../../../react-native-toast-message';
+import {useContent} from 'customization-api';
+import StorageContext from '../StorageContext';
+
+interface WhiteboardViewInterface {}
+
+const WhiteboardView: React.FC<WhiteboardViewInterface> = () => {
+  const {getWhiteboardUid, whiteboardActive, isWhiteboardOnFullScreen} =
+    useContext(whiteboardContext);
+  const {setStore, store} = useContext(StorageContext);
+  const [isLoading, setIsLoading] = useState(true);
+  const roomRef = useRef({});
+  const sdkRef = useRef({});
+  const {
+    data: {whiteboard: {room_token, room_uuid} = {}},
+  } = useRoomInfo();
+  const whiteboardInitializing = useString(whiteboardInitializingText)();
+  const whiteboardNativeInfoToastHeadingText = useString(
+    whiteboardNativeInfoToastHeading,
+  )();
+
+  useEffect(() => {
+    if (!store?.whiteboardNativeInfoToast) {
+      Toast.show({
+        leadingIconName: 'info',
+        type: 'info',
+        text1: whiteboardNativeInfoToastHeadingText,
+        visibilityTime: 5000,
+        primaryBtn: null,
+        secondaryBtn: null,
+        leadingIcon: null,
+      });
+      setStore(prevState => {
+        return {
+          ...prevState,
+          whiteboardNativeInfoToast: true,
+        };
+      });
+    }
+  }, [store]);
+
+  const roomCallbacks: Partial<RoomCallbackHandler> = {
+    onPhaseChanged: e => {
+      console.log('debugging onPhaseChanged changed: ', e);
+      setIsLoading(false);
+    },
+    // onRoomStateChanged: e =>
+    //   console.log('debugging onRoomStateChanged changed: ', e),
+    onDisconnectWithError: e => {
+      console.log('debugging onDisconnectWithError: ', e);
+      setIsLoading(false);
+    },
+  };
+
+  const sdkCallbacks = {
+    onSetupFail: error => {
+      console.log('debugging whiteboard sdk setup fail: ', error);
+      setIsLoading(false);
+    },
+  };
+
+  const joinRoomCallback = (aRoom, aSdk, error) => {
+    roomRef.current = aRoom;
+    sdkRef.current = aSdk;
+
+    console.log('debugging aRoom', aRoom);
+    setIsLoading(false);
+    if (error) {
+      console.log(error);
+    } else {
+      try {
+        //aRoom.setMemberState({currentApplianceName: 'hand'});
+      } catch (error2) {
+        console.log('debugging error on whiteboard setMemberState');
+      }
+    }
+  };
+
+  return (
+    <View
+      style={
+        isWhiteboardOnFullScreen
+          ? style.whiteboardContainerLandscape
+          : style.whiteboardContainer
+      }>
+      {whiteboardActive ? (
+        <>
+          {isLoading ? (
+            <View style={style.placeholder}>
+              <Text style={style.loadingTextStyle}>
+                {whiteboardInitializing}
+              </Text>
+            </View>
+          ) : (
+            <></>
+          )}
+          <WhiteboardWidget whiteboardRoom={roomRef} />
+          <NativeWhiteboardView
+            style={style.whiteboard}
+            sdkConfig={{
+              appIdentifier: $config.WHITEBOARD_APPIDENTIFIER,
+              userCursor: true,
+            }}
+            roomConfig={{
+              uid: getWhiteboardUid()?.toString(),
+              uuid: room_uuid,
+              roomToken: room_token,
+              region: $config.WHITEBOARD_REGION,
+              isWritable: false,
+            }}
+            joinRoomCallback={joinRoomCallback}
+            roomCallbacks={roomCallbacks}
+            sdkCallbacks={sdkCallbacks}
+          />
+        </>
+      ) : (
+        <></>
+      )}
+    </View>
+  );
+};
+
+const style = StyleSheet.create({
+  placeholder: {
+    position: 'absolute',
+    top: '30%',
+    alignItems: 'center', //Centered horizontally
+    flex: 1,
+    zIndex: 999,
+  },
+  whiteboardContainerLandscape: {
+    flex: 1,
+    position: 'relative',
+    alignSelf: 'center',
+    alignItems: 'center',
+    transform: [{rotate: '90deg'}],
+  },
+  whiteboardContainer: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    backgroundColor: 'black',
+    position: 'relative',
+  },
+  whiteboard: {
+    aspectRatio: 16.0 / 9.0,
+    flexGrow: 1,
+  },
+  buttonContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  loadingTextStyle: {
+    color: $config.HARD_CODED_BLACK_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: ThemeConfig.FontSize.small,
+    fontWeight: '600',
+  },
+});
+
+export default WhiteboardView;

package/template/src/components/whiteboard/WhiteboardView.tsx

@@ -0,0 +1,81 @@
+/*
+********************************************
+ 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, {useRef, useEffect, useContext, useState} from 'react';
+import {whiteboardContext} from './WhiteboardConfigure';
+import {StyleSheet, View, Text} from 'react-native';
+import {RoomPhase, ApplianceNames} from 'white-web-sdk';
+import WhiteboardToolBox from './WhiteboardToolBox';
+import WhiteboardCanvas from './WhiteboardCanvas';
+import {useContent, useLayout} from 'customization-api';
+import {useString} from '../../utils/useString';
+import {whiteboardInitializingText} from '../../language/default-labels/videoCallScreenLabels';
+
+interface WhiteboardViewInterface {
+  showToolbox: boolean;
+}
+
+const WhiteboardView: React.FC<WhiteboardViewInterface> = () => {
+  const wbSurfaceRef = useRef();
+  const {whiteboardRoomState, getWhiteboardUid} = useContext(whiteboardContext);
+  const {currentLayout} = useLayout();
+  const [showToolbox, setShowToolbox] = useState(false);
+  const {activeUids} = useContent();
+  useEffect(() => {
+    if (currentLayout === 'grid') {
+      setShowToolbox(false);
+    } else {
+      if (
+        currentLayout == 'pinned' &&
+        activeUids &&
+        activeUids?.length &&
+        activeUids[0] == getWhiteboardUid()
+      ) {
+        setShowToolbox(true);
+      }
+    }
+  }, [currentLayout, activeUids]);
+
+  const whiteboardInitializing = useString(whiteboardInitializingText)();
+
+  return (
+    <View style={style.flex1}>
+      {whiteboardRoomState == RoomPhase.Connected ? (
+        <WhiteboardCanvas showToolbox={showToolbox} />
+      ) : (
+        <View style={style.placeholder}>
+          <Text style={{color: 'white'}}>{whiteboardInitializing}</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const style = StyleSheet.create({
+  flex1: {flex: 1, position: 'relative'},
+  placeholder: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#00000008',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  toolboxContainer: {
+    position: 'absolute',
+    paddingTop: 50,
+    paddingLeft: 20,
+  },
+});
+
+export default WhiteboardView;