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

package/template/src/utils/useMuteToggleLocal.ts

@@ -10,12 +10,15 @@
 *********************************************
 */
 import {useLocalUserInfo, useRtc} from 'customization-api';
-import {useContext, useEffect, useRef, useState} from 'react';
-
-import {ToggleState} from '../../agora-rn-uikit/src/Contexts/PropsContext';
-import {isMobileUA, isWebInternal} from './common';
-import {AppState} from 'react-native';
-import {DispatchContext} from '../../agora-rn-uikit';
+import {useContext} from 'react';
+import {
+  PropsContext,
+  ClientRole,
+  ToggleState,
+  DispatchContext,
+} from '../../agora-rn-uikit';
+import {isAndroid, isIOS, isWebInternal} from './common';
+import {SdkMuteQueueContext} from '../components/SdkMuteToggleListener';
 
 export enum MUTE_LOCAL_TYPE {
   audio,
@@ -28,50 +31,32 @@ function useMuteToggleLocal() {
   const {RtcEngineUnsafe} = useRtc();
   const {dispatch} = useContext(DispatchContext);
   const local = useLocalUserInfo();
+  const isLiveStream = $config.EVENT_MODE;
+  const {rtcProps} = useContext(PropsContext);
+  const isBroadCasting = rtcProps?.role == ClientRole.Broadcaster;
 
-  const appState = useRef(AppState.currentState);
-  const [appStateVisible, setAppStateVisible] = useState(appState.current);
-  const isCamON = useRef(local.video);
-
-  useEffect(() => {
-    if ($config.AUDIO_ROOM || !isMobileUA()) return;
-    const subscription = AppState.addEventListener('change', (nextAppState) => {
-      appState.current = nextAppState;
-      setAppStateVisible(appState.current);
-    });
-
-    return () => {
-      subscription?.remove();
-    };
-  }, []);
+  const {videoMuteQueue, audioMuteQueue} = useContext(SdkMuteQueueContext);
 
-  useEffect(() => {
-    // console.log(`Video State  ${local.video} in Mode  ${appStateVisible}`);
-    if (appStateVisible === 'background') {
-      isCamON.current = local.video;
-      if (isCamON.current) {
-        isWebInternal()
-          ? RtcEngineUnsafe.muteLocalVideoStream(true)
-          : RtcEngineUnsafe.enableLocalVideo(false);
+  const toggleMute = async (
+    type: MUTE_LOCAL_TYPE,
+    _action?: ToggleState,
+    _fromSdk?: boolean,
+  ) => {
+    const queueRef =
+      type === MUTE_LOCAL_TYPE.video ? videoMuteQueue : audioMuteQueue;
 
-        dispatch({
-          type: 'LocalMuteVideo',
-          value: [0],
-        });
+    const handleQueue = async () => {
+      if (queueRef.current.length > 0) {
+        const queueItem = queueRef.current.shift();
+        try {
+          await toggleMute(type, queueItem.action, true);
+          queueItem.resolveQueued();
+        } catch (e) {
+          queueItem.rejectQueued(e);
+        }
       }
-    }
-    if (appStateVisible === 'active' && isCamON.current) {
-      isWebInternal()
-        ? RtcEngineUnsafe.muteLocalVideoStream(false)
-        : RtcEngineUnsafe.enableLocalVideo(true);
-      dispatch({
-        type: 'LocalMuteVideo',
-        value: [1],
-      });
-    }
-  }, [appStateVisible]);
+    };
 
-  return async (type: MUTE_LOCAL_TYPE) => {
     switch (type) {
       case MUTE_LOCAL_TYPE.audio:
         let localAudioState = local.audio;
@@ -80,35 +65,45 @@ function useMuteToggleLocal() {
           localAudioState === ToggleState.enabled ||
           localAudioState === ToggleState.disabled
         ) {
-          // Disable UI
-          dispatch({
-            type: 'LocalMuteAudio',
-            value: [
-              localAudioState === ToggleState.enabled
-                ? ToggleState.disabling
-                : ToggleState.enabling,
-            ],
-          });
-
-          try {
-            await RtcEngineUnsafe.muteLocalAudioStream(
-              localAudioState === ToggleState.enabled,
-            );
-            // Enable UI
+          if (localAudioState !== _action) {
+            // Disable UI
             dispatch({
               type: 'LocalMuteAudio',
               value: [
                 localAudioState === ToggleState.enabled
-                  ? ToggleState.disabled
-                  : ToggleState.enabled,
+                  ? ToggleState.disabling
+                  : ToggleState.enabling,
               ],
             });
-          } catch (e) {
-            console.error(e);
-            dispatch({
-              type: 'LocalMuteAudio',
-              value: [localAudioState],
-            });
+
+            try {
+              await RtcEngineUnsafe.muteLocalAudioStream(
+                localAudioState === ToggleState.enabled,
+              );
+              // Enable UI
+              dispatch({
+                type: 'LocalMuteAudio',
+                value: [
+                  localAudioState === ToggleState.enabled
+                    ? ToggleState.disabled
+                    : ToggleState.enabled,
+                ],
+              });
+              handleQueue();
+            } catch (e) {
+              dispatch({
+                type: 'LocalMuteAudio',
+                value: [localAudioState],
+              });
+              handleQueue();
+              if (_fromSdk) {
+                throw e;
+              } else {
+                console.error('Error toggling audio', e);
+              }
+            }
+          } else {
+            handleQueue();
           }
         }
         break;
@@ -120,45 +115,68 @@ function useMuteToggleLocal() {
           localVideoState === ToggleState.disabled
         ) {
           // Disable UI
-          dispatch({
-            type: 'LocalMuteVideo',
-            value: [
-              localVideoState === ToggleState.enabled
-                ? ToggleState.disabling
-                : ToggleState.enabling,
-            ],
-          });
-
-          try {
-            //enableLocalVideo not available on web
-            isWebInternal()
-              ? await RtcEngineUnsafe.muteLocalVideoStream(
-                  localVideoState === ToggleState.enabled ? true : false,
-                )
-              : await RtcEngineUnsafe.enableLocalVideo(
-                  localVideoState === ToggleState.enabled ? false : true,
-                );
-
-            // Enable UI
+          if (localVideoState !== _action) {
             dispatch({
               type: 'LocalMuteVideo',
               value: [
                 localVideoState === ToggleState.enabled
-                  ? ToggleState.disabled
-                  : ToggleState.enabled,
+                  ? ToggleState.disabling
+                  : ToggleState.enabling,
               ],
             });
-          } catch (e) {
-            console.log('error while dispatching');
-            dispatch({
-              type: 'LocalMuteVideo',
-              value: [localVideoState],
-            });
+
+            try {
+              //enableLocalVideo not available on web
+              isWebInternal()
+                ? await RtcEngineUnsafe.muteLocalVideoStream(
+                    localVideoState === ToggleState.enabled ? true : false,
+                  )
+                : //@ts-ignore
+                  await RtcEngineUnsafe.enableLocalVideo(
+                    localVideoState === ToggleState.enabled ? false : true,
+                  );
+              /**
+               * In native only
+               * hotfix for livestream co-presenter video publishing
+               * enableLocalVideo -> only enabled local video not publishing video stream
+               * enable publishing for livestreaming presenter(who raised hand and approved by host)
+               */
+              if ((isAndroid() || isIOS()) && isLiveStream && isBroadCasting) {
+                await RtcEngineUnsafe.muteLocalVideoStream(
+                  localVideoState === ToggleState.enabled ? true : false,
+                );
+              }
+              // Enable UI
+              dispatch({
+                type: 'LocalMuteVideo',
+                value: [
+                  localVideoState === ToggleState.enabled
+                    ? ToggleState.disabled
+                    : ToggleState.enabled,
+                ],
+              });
+              handleQueue();
+            } catch (e) {
+              dispatch({
+                type: 'LocalMuteVideo',
+                value: [localVideoState],
+              });
+              handleQueue();
+              if (_fromSdk) {
+                throw e;
+              } else {
+                console.error('Error toggling video', e);
+              }
+            }
+          } else {
+            handleQueue();
           }
         }
         break;
     }
   };
+
+  return toggleMute;
 }
 
 export default useMuteToggleLocal;

package/template/src/utils/useString.ts

@@ -13,11 +13,12 @@ import {useCustomization} from 'customization-implementation';
 import {useLanguage} from '../language/useLanguage';
 import {DEFAULT_I18_DATA} from '../language';
 import {TextDataInterface} from '../language/default-labels/index';
+import {useEffect, useRef} from 'react';
 
 export function usei18nData(
   selectedLanguageCode: string = DEFAULT_I18_DATA.locale,
 ) {
-  const languageData = useCustomization((data) => data?.i18n);
+  const languageData = useCustomization(data => data?.i18n);
   if (
     !selectedLanguageCode ||
     !languageData ||
@@ -27,7 +28,7 @@ export function usei18nData(
     return DEFAULT_I18_DATA.data;
   } else {
     let selectedLanguageData = languageData.find(
-      (item) => item.locale === selectedLanguageCode,
+      item => item.locale === selectedLanguageCode,
     );
     if (selectedLanguageData && selectedLanguageData.data) {
       return {
@@ -43,7 +44,7 @@ export function usei18nData(
 export function useString<T = string>(
   keyName: keyof TextDataInterface,
 ): (input?: T) => string {
-  const lanCode = useLanguage((data) => data.languageCode);
+  const lanCode = useLanguage(data => data.languageCode);
   const textData = usei18nData(lanCode);
   const getString = (input?: T) => {
     let keyValue = textData ? textData[keyName] : undefined;
@@ -59,3 +60,12 @@ export function useString<T = string>(
   };
   return getString;
 }
+
+export const useStringRef = (key: keyof TextDataInterface) => {
+  const fn = useString(key);
+  const refFn = useRef(fn);
+  useEffect(() => {
+    refFn.current = fn;
+  }, [fn]);
+  return refFn;
+};

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/tsconfig_rsdk_index.json

@@ -4,7 +4,7 @@
   // "files":["./customization-api/index.ts","./global.d.ts","./bridge/rtm/web/index.ts","./bridge/rtc/webNg/index.ts"],
   // --------------------------------------------------------
   // Use with typescript tsc command
-  "files": ["./src/SDKAppWrapper.tsx", "./index.rsdk.tsx", "./global.d.ts"],
+  "files": ["./index.rsdk.tsx", "./global.d.ts"],
   // --------------------------------------------------------
   "compilerOptions": {
     /* Basic Options */
@@ -47,8 +47,8 @@
     // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
 
     /* Module Resolution Options */
-    // "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
-    "noResolve": true /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "noResolve": false /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
     "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
     "resolveJsonModule": true,
     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */

package/template/tsconfig_wsdk_index.json

@@ -4,7 +4,7 @@
   // "files":["./customization-api/index.ts","./global.d.ts","./bridge/rtm/web/index.ts","./bridge/rtc/webNg/index.ts"],
   // --------------------------------------------------------
   // Use with typescript tsc command
-  "files": ["./src/SDKAppWrapper.tsx", "./index.wsdk.tsx", "./global.d.ts"],
+  "files": ["./index.wsdk.tsx", "./global.d.ts"],
   // --------------------------------------------------------
   "compilerOptions": {
     /* Basic Options */

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/webpack.web.config.js

@@ -31,8 +31,12 @@ module.exports = merge(commons, {
     // https: true,
     historyApiFallback: true, // Support for react-router
     static: './', // same as contentBase from webpack v4 config
-    client:{
-      overlay: false
-    }
+    client: {
+      overlay: false,
+    },
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+    },
   },
 });

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/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/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/components/OAuth.electron.tsx

@@ -1,41 +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 {useHistory} from './Router';
-import SelectOAuth from '../subComponents/SelectOAuth';
-import {url, oAuthSystemType} from './OAuthConfig';
-
-const Oauth = () => {
-  const history = useHistory();
-  const onSelectOAuthSystem = ({
-    oAuthSystem,
-  }: {
-    oAuthSystem: oAuthSystemType;
-  }) => {
-    console.log('electron OAuth');
-    const oAuthUrl = url({platform: 'desktop'})[`${oAuthSystem}Url`];
-    // @ts-ignore
-    window.addEventListener(
-      'message',
-      ({data, origin}: {data: {token: string}; origin: string}) => {
-        if (data.token) {
-          console.log(data, origin);
-          history.push(`/auth-token/${data.token}`);
-        }
-      },
-      false,
-    );
-    window.open(oAuthUrl, 'modal');
-  };
-  return <SelectOAuth onSelectOAuth={onSelectOAuthSystem} />;
-};
-export default Oauth;