agora-appbuilder-core 4.0.0-test.2 → 4.0.1

package/template/src/utils/useToolbar.tsx

@@ -0,0 +1,59 @@
+/*
+********************************************
+ 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, {useEffect, useState} from 'react';
+import {createHook} from 'customization-implementation';
+
+export enum ToolbarPosition {
+  top = 'TOP',
+  bottom = 'BOTTOM',
+  left = 'LEFT',
+  right = 'RIGHT',
+}
+
+export interface ToolbarInferface {
+  position?: ToolbarPosition;
+  isHorizontal?: boolean;
+}
+
+const ToolbarContext = React.createContext<ToolbarInferface>({
+  position: undefined,
+  isHorizontal: true,
+});
+
+interface ToolbarProviderProps {
+  value: ToolbarInferface;
+  children: React.ReactNode;
+}
+const ToolbarProvider = (props: ToolbarProviderProps) => {
+  const [isHorizontal, setIsHorizontal] = useState(true);
+  useEffect(() => {
+    if (
+      props?.value?.position === ToolbarPosition.left ||
+      props?.value?.position === ToolbarPosition.right
+    ) {
+      setIsHorizontal(false);
+    } else {
+      !isHorizontal && setIsHorizontal(true);
+    }
+  }, [props?.value?.position]);
+  return (
+    <ToolbarContext.Provider
+      value={{position: props?.value?.position, isHorizontal}}>
+      {props.children}
+    </ToolbarContext.Provider>
+  );
+};
+
+const useToolbar = createHook(ToolbarContext);
+
+export {ToolbarProvider, useToolbar};

package/template/static.d.ts

@@ -0,0 +1,42 @@
+declare module "src/SDKAppWrapper" {
+    import { CustomizationApiInterface, MeetingInfoContextInterface, customEvents } from "customization-api/index";
+    import { userEventsMapInterface } from "src/utils/SdkEvents";
+    import { Unsubscribe } from 'nanoevents';
+    import { deviceId } from "src/components/DeviceConfigure";
+    type meetingData = Partial<MeetingInfoContextInterface['data']>;
+    export interface AppBuilderSdkApiInterface {
+        customize: (customization: CustomizationApiInterface) => Promise<void>;
+        joinRoom: (roomDetails: string | meetingData, userName?: string) => Promise<meetingData>;
+        joinPrecall: (roomDetails: string | meetingData, userName?: string) => Promise<[meetingData, (userName?: string) => Promise<MeetingInfoContextInterface['data']>]>;
+        setMicrophone: (deviceId: deviceId) => Promise<void>;
+        setCamera: (deviceId: deviceId) => Promise<void>;
+        setSpeaker: (deviceId: deviceId) => Promise<void>;
+        muteAudio: (mute: boolean | ((currentMute: boolean) => boolean)) => Promise<void>;
+        muteVideo: (mute: boolean | ((currentMute: boolean) => boolean)) => Promise<void>;
+        createCustomization: (customization: CustomizationApiInterface) => CustomizationApiInterface;
+        login: (token: string) => Promise<void>;
+        logout: () => Promise<void>;
+        customEvents: typeof customEvents;
+        on: <T extends keyof userEventsMapInterface>(userEventName: T, cb: userEventsMapInterface[T]) => Unsubscribe;
+    }
+    export const AppBuilderSdkApi: AppBuilderSdkApiInterface;
+    const SDKAppWrapper: () => JSX.Element;
+    export default SDKAppWrapper;
+}
+declare module "index.rsdk" {
+    /**
+     * @format
+     */
+    import { AppBuilderSdkApiInterface } from "src/SDKAppWrapper";
+    import React from 'react';
+    import * as RN from 'react-native-web';
+    import './src/assets/font-styles.css';
+    export * from "customization-api/index";
+    export * from "customization-implementation/index";
+    interface AppBuilderReactSdkInterface extends AppBuilderSdkApiInterface {
+        View: React.FC;
+    }
+    const AppBuilderReactSdkApi: AppBuilderReactSdkInterface;
+    export { React, RN };
+    export default AppBuilderReactSdkApi;
+}

package/template/web/index.html

@@ -27,6 +27,26 @@
         /* *:active {
             outline: none;
         } */
+    /* Webkit (Chrome, Safari) */
+    ::-webkit-scrollbar {
+    width: 4px;
+    }
+
+    ::-webkit-scrollbar-track {
+    background-color: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+    background-color: #777;
+    border-radius: 2px;
+    }
+
+    /* Firefox */
+    html {
+    scrollbar-width: thin;
+    scrollbar-color: transparent #777;
+    }
+
     </style>
 <div id="react-app" style="
     height: 100vh;

package/template/webpack.commons.js

@@ -34,15 +34,15 @@ module.exports = {
   plugins: [
     // Using html webpack plugin to utilize our index.html
     !isSdk &&
-    new HtmlWebpackPlugin({
-      title: configVars['$config.APP_NAME'],
-      template: isElectron ? 'electron/index.html' : 'web/index.html',
-    }),
+      new HtmlWebpackPlugin({
+        title: configVars['$config.APP_NAME'],
+        template: isElectron ? 'electron/index.html' : 'web/index.html',
+      }),
     isDevelopment &&
-    !isSdk &&
-    new ReactRefreshWebpackPlugin({
-      overlay: false,
-    }),
+      !isSdk &&
+      new ReactRefreshWebpackPlugin({
+        overlay: false,
+      }),
   ].filter(Boolean),
   resolve: {
     alias: {
@@ -141,9 +141,20 @@ module.exports = {
       },
       {
         test: /\.css$/i,
-        use: ["style-loader", "css-loader"],
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.(wasm)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              outputPath: 'wasm',
+              name: '[name].[ext]',
+            },
+          },
+        ],
       },
-
     ],
   },
 };

package/template/_buckconfig

@@ -1,6 +0,0 @@
-
-[android]
-  target = Google Inc.:Google APIs:23
-
-[maven_repositories]
-  central = https://repo1.maven.org/maven2

package/template/_gitattributes

@@ -1 +0,0 @@
-*.pbxproj -text

package/template/agora-rn-uikit/src/Contexts/RenderContext.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import {RenderStateInterface} from './RtcContext';
-
-const RenderContext = React.createContext<RenderStateInterface>(
-  {} as RenderStateInterface,
-);
-
-export const RenderProvider = RenderContext.Provider;
-export const RenderConsumer = RenderContext.Consumer;
-export default RenderContext;

package/template/agora-rn-uikit/src/Reducer/ActiveSpeakerDetected.ts

@@ -1,11 +0,0 @@
-import {ActionType, RenderStateInterface} from '../Contexts/RtcContext';
-
-export default function ActiveSpeakerDetected(
-  state: RenderStateInterface,
-  action: ActionType<'ActiveSpeakerDetected'>,
-) {
-  return {
-    ...state,
-    activeSpeaker: action?.value && action.value?.length ? action.value[0] : '',
-  };
-}

package/template/android/app/_BUCK

@@ -1,55 +0,0 @@
-# To learn about Buck see [Docs](https://buckbuild.com/).
-# To run your application with Buck:
-# - install Buck
-# - `npm start` - to start the packager
-# - `cd android`
-# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
-# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
-# - `buck install -r android/app` - compile, install and run application
-#
-
-load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
-
-lib_deps = []
-
-create_aar_targets(glob(["libs/*.aar"]))
-
-create_jar_targets(glob(["libs/*.jar"]))
-
-android_library(
-    name = "all-libs",
-    exported_deps = lib_deps,
-)
-
-android_library(
-    name = "app-code",
-    srcs = glob([
-        "src/main/java/**/*.java",
-    ]),
-    deps = [
-        ":all-libs",
-        ":build_config",
-        ":res",
-    ],
-)
-
-android_build_config(
-    name = "build_config",
-    package = "com.helloworld",
-)
-
-android_resource(
-    name = "res",
-    package = "com.helloworld",
-    res = "src/main/res",
-)
-
-android_binary(
-    name = "app",
-    keystore = "//android/keystores:debug",
-    manifest = "src/main/AndroidManifest.xml",
-    package_type = "debug",
-    deps = [
-        ":app-code",
-    ],
-)

package/template/android/app/build_defs.bzl

@@ -1,19 +0,0 @@
-"""Helper definitions to glob .aar and .jar targets"""
-
-def create_aar_targets(aarfiles):
-    for aarfile in aarfiles:
-        name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")]
-        lib_deps.append(":" + name)
-        android_prebuilt_aar(
-            name = name,
-            aar = aarfile,
-        )
-
-def create_jar_targets(jarfiles):
-    for jarfile in jarfiles:
-        name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")]
-        lib_deps.append(":" + name)
-        prebuilt_jar(
-            name = name,
-            binary_jar = jarfile,
-        )

package/template/bridge/rtc/webNg/LocalView.tsx

@@ -1,20 +0,0 @@
-/*
-********************************************
- 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 SurfaceView, {RtcSurfaceViewProps, StyleProps} from './SurfaceView';
-
-interface LocalViewInterface extends RtcSurfaceViewProps, StyleProps {}
-
-export default function LocalView(props: LocalViewInterface) {
-  //   console.log('LocalView props: ', props);
-  return <SurfaceView uid={0} {...props} />;
-}

package/template/ios/HelloWorld/AppDelegate.m

@@ -1,74 +0,0 @@
-#import "AppDelegate.h"
-
-#import <React/RCTBridge.h>
-#import <React/RCTBundleURLProvider.h>
-#import <React/RCTRootView.h>
-#import <React/RCTLinkingManager.h>
-
-#ifdef FB_SONARKIT_ENABLED
-#import <FlipperKit/FlipperClient.h>
-#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
-#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
-#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
-#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
-#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>
-
-static void InitializeFlipper(UIApplication *application) {
-  FlipperClient *client = [FlipperClient sharedClient];
-  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
-  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
-  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
-  [client addPlugin:[FlipperKitReactPlugin new]];
-  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
-  [client start];
-}
-#endif
-
-@implementation AppDelegate
-
-- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
-{
-#ifdef FB_SONARKIT_ENABLED
-  InitializeFlipper(application);
-#endif
-
-  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
-  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
-                                                   moduleName:@"HelloWorld"
-                                            initialProperties:nil];
-
-  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
-
-  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
-  UIViewController *rootViewController = [UIViewController new];
-  rootViewController.view = rootView;
-  self.window.rootViewController = rootViewController;
-  [self.window makeKeyAndVisible];
-  return YES;
-}
-
-- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
-{
-#if DEBUG
-  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
-#else
-  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
-#endif
-}
-
-- (BOOL)application:(UIApplication *)application
-   openURL:(NSURL *)url
-   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
-{
-  return [RCTLinkingManager application:application openURL:url options:options];
-}
-
-- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
- restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
-{
- return [RCTLinkingManager application:application
-                  continueUserActivity:userActivity
-                    restorationHandler:restorationHandler];
-}
-
-@end

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import {useCustomization} from 'customization-implementation';
-
-const CustomUserContextHolder: React.FC<{children: any}> = (props) => {
-  const useUserContext = useCustomization((config) => {
-    if (
-      config?.components?.videoCall &&
-      typeof config?.components?.videoCall === 'object' &&
-      config?.components?.videoCall?.useUserContext &&
-      typeof config?.components?.videoCall?.useUserContext === 'function'
-    ) {
-      return config?.components?.videoCall?.useUserContext;
-    } else {
-      return () => {};
-    }
-  });
-  useUserContext();
-  return props.children;
-};
-export default CustomUserContextHolder;

package/template/src/utils/useButtonTemplate.tsx

@@ -1,44 +0,0 @@
-/*
-********************************************
- 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 {createHook} from 'customization-implementation';
-
-export enum ButtonTemplateName {
-  topBar,
-  bottomBar,
-  actionBar,
-}
-
-export interface ButtonTemplateInferface {
-  buttonTemplateName?: ButtonTemplateName;
-}
-
-const ButtonTemplateContext = React.createContext<ButtonTemplateInferface>({
-  buttonTemplateName: undefined,
-});
-
-interface ButtonTemplateProviderProps {
-  value: ButtonTemplateInferface;
-  children: React.ReactNode;
-}
-const ButtonTemplateProvider = (props: ButtonTemplateProviderProps) => {
-  return (
-    <ButtonTemplateContext.Provider value={{...props.value}}>
-      {props.children}
-    </ButtonTemplateContext.Provider>
-  );
-};
-
-const useButtonTemplate = createHook(ButtonTemplateContext);
-
-export {ButtonTemplateProvider, useButtonTemplate};

package/template/src/utils/useJoinMeeting.ts

@@ -1,142 +0,0 @@
-import {useContext} from 'react';
-import {gql} from '@apollo/client';
-import StorageContext from '../components/StorageContext';
-import {MeetingInfoContextInterface} from '../components/meeting-info/useMeetingInfo';
-import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
-import {GraphQLContext} from '../components/GraphQLProvider';
-import useGetName from './useGetName';
-
-const JOIN_CHANNEL_PHRASE_AND_GET_USER = gql`
-  query JoinChannel($passphrase: String!) {
-    joinChannel(passphrase: $passphrase) {
-      channel
-      title
-      isHost
-      secret
-      mainUser {
-        rtc
-        rtm
-        uid
-      }
-      screenShare {
-        rtc
-        rtm
-        uid
-      }
-    }
-    getUser {
-      name
-      email
-    }
-  }
-`;
-
-const JOIN_CHANNEL_PHRASE = gql`
-  query JoinChannel($passphrase: String!) {
-    joinChannel(passphrase: $passphrase) {
-      channel
-      title
-      isHost
-      secret
-      mainUser {
-        rtc
-        rtm
-        uid
-      }
-      screenShare {
-        rtc
-        rtm
-        uid
-      }
-    }
-  }
-`;
-/**
- * Returns an asynchronous function to join a meeting with the given phrase.
- */
-export default function useJoinMeeting() {
-  const {store} = useContext(StorageContext);
-  const {setMeetingInfo} = useSetMeetingInfo();
-  const {client} = useContext(GraphQLContext);
-  const username = useGetName();
-
-  return async (phrase: string) => {
-    setMeetingInfo((prevState) => {
-      return {
-        ...prevState,
-        isJoinDataFetched: false,
-      };
-    });
-    try {
-      const response = await client.query({
-        query:
-          store.token === null
-            ? JOIN_CHANNEL_PHRASE
-            : JOIN_CHANNEL_PHRASE_AND_GET_USER,
-        variables: {
-          passphrase: phrase,
-          //userName: username,
-        },
-      });
-      if (response.error) {
-        throw response.error;
-      } else {
-        if (response && response.data) {
-          let data = response.data;
-          let meetingInfo: Partial<MeetingInfoContextInterface['data']> = {};
-          if (data?.joinChannel?.channel) {
-            meetingInfo.channel = data.joinChannel.channel;
-          }
-          if (data?.joinChannel?.mainUser?.uid) {
-            meetingInfo.uid = data.joinChannel.mainUser.uid;
-          }
-          if (data?.joinChannel?.mainUser?.rtc) {
-            meetingInfo.token = data.joinChannel.mainUser.rtc;
-          }
-          if (data?.joinChannel?.mainUser?.rtm) {
-            meetingInfo.rtmToken = data.joinChannel.mainUser.rtm;
-          }
-          if (data?.joinChannel?.secret) {
-            meetingInfo.encryptionSecret = data.joinChannel.secret;
-          }
-          if (data?.joinChannel?.screenShare?.uid) {
-            meetingInfo.screenShareUid = data.joinChannel.screenShare.uid;
-          }
-          if (data?.joinChannel?.screenShare?.rtc) {
-            meetingInfo.screenShareToken = data.joinChannel.screenShare.rtc;
-          }
-          if (data?.joinChannel?.isHost) {
-            meetingInfo.isHost = data.joinChannel.isHost;
-          }
-          if (data?.joinChannel?.title) {
-            meetingInfo.meetingTitle = data.joinChannel.title;
-          }
-          //getUser is not available from backend
-          // if (data?.getUser?.name) {
-          //   meetingInfo.username = data.getUser.name;
-          // }
-          console.log('!!!!!Meetinginfo', {
-            meetingInfo,
-            response: response.data,
-          });
-          setMeetingInfo((prevState) => {
-            let compiledMeetingInfo = {
-              ...prevState.data,
-              ...meetingInfo,
-            };
-            return {
-              ...prevState,
-              isJoinDataFetched: true,
-              data: compiledMeetingInfo,
-            };
-          });
-          return meetingInfo;
-        } else {
-          throw new Error('An error occurred in parsing the channel data.');
-        }
-      }
-    } catch (error) {
-      throw error;
-    }
-  };
-}