agora-appbuilder-core 4.0.0-api.5 → 4.0.0-api.6

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

@@ -0,0 +1,109 @@
+/*
+********************************************
+ 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, useRef} from 'react';
+import {whiteboardContext} from './WhiteboardConfigure';
+import {StyleSheet, View} from 'react-native';
+import {useRoomInfo} from 'customization-api';
+import {
+  WhiteboardView as NativeWhiteboardView,
+  RoomCallbackHandler,
+} from '@netless/react-native-whiteboard';
+import WhiteboardWidget from './WhiteboardWidget';
+
+interface WhiteboardViewInterface {}
+
+const WhiteboardView: React.FC<WhiteboardViewInterface> = () => {
+  const {getWhiteboardUid, whiteboardActive} = useContext(whiteboardContext);
+  const roomRef = useRef({});
+  const sdkRef = useRef({});
+  const {
+    data: {whiteboard: {room_token, room_uuid} = {}},
+  } = useRoomInfo();
+
+  const roomCallbacks: Partial<RoomCallbackHandler> = {
+    onPhaseChanged: e => console.log('debugging onPhaseChanged changed: ', e),
+    onRoomStateChanged: e =>
+      console.log('debugging onRoomStateChanged changed: ', e),
+    onDisconnectWithError: e =>
+      console.log('debugging onDisconnectWithError: ', e),
+  };
+
+  const sdkCallbacks = {
+    onSetupFail: error =>
+      console.log('debugging whiteboard sdk setup fail: ', error),
+  };
+
+  const joinRoomCallback = (aRoom, aSdk, error) => {
+    roomRef.current = aRoom;
+    sdkRef.current = aSdk;
+
+    console.log('debugging aRoom', aRoom);
+
+    if (error) {
+      console.log(error);
+    } else {
+      try {
+        //aRoom.setMemberState({currentApplianceName: 'hand'});
+      } catch (error2) {
+        console.log('debugging error on whiteboard setMemberState');
+      }
+    }
+  };
+
+  return (
+    <View style={style.whiteboardContainer}>
+      {whiteboardActive ? (
+        <>
+          <WhiteboardWidget whiteboardRoom={roomRef} />
+          <NativeWhiteboardView
+            style={style.whiteboard}
+            sdkConfig={{
+              appIdentifier: $config.WHITEBOARD_APPIDENTIFIER,
+            }}
+            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({
+  whiteboardContainer: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    backgroundColor: 'black',
+  },
+  whiteboard: {
+    aspectRatio: 16.0 / 9.0,
+    flexGrow: 1,
+  },
+  buttonContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+});
+
+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;