agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/utils/useRemoteRequest.ts

@@ -0,0 +1,84 @@
+/*
+********************************************
+ 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 {useRoomInfo} from '../components/room-info/useRoomInfo';
+import {controlMessageEnum} from '../components/ChatContext';
+import useIsPSTN from './useIsPSTN';
+import useMutePSTN from './useMutePSTN';
+import {UidType} from '../../agora-rn-uikit';
+import events, {PersistanceLevel} from '../rtm-events-api';
+
+export enum REQUEST_REMOTE_TYPE {
+  audio,
+  video,
+}
+/**
+ * Returns an asynchronous function to request audio/video for a remote user with the given uid or if no uid provided, request everyone else in the meeting.
+ */
+function useRemoteRequest() {
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+  const isPSTN = useIsPSTN();
+
+  return async (type: REQUEST_REMOTE_TYPE, uid?: UidType) => {
+    if (isHost) {
+      switch (type) {
+        case REQUEST_REMOTE_TYPE.audio:
+          // To individual
+          if (uid) {
+            if (isPSTN(uid)) {
+              //can't ask pstn user to unmute
+            } else {
+              events.send(
+                controlMessageEnum.requestAudio,
+                '',
+                PersistanceLevel.None,
+                uid,
+              );
+            }
+          } else {
+            // To everyone
+            events.send(
+              controlMessageEnum.requestAudio,
+              '',
+              PersistanceLevel.None,
+            );
+          }
+          break;
+        case REQUEST_REMOTE_TYPE.video:
+          if (uid) {
+            // To individual
+            if (!isPSTN(uid)) {
+              events.send(
+                controlMessageEnum.requestVideo,
+                '',
+                PersistanceLevel.None,
+                uid,
+              );
+            }
+          } else {
+            // To everyone
+            events.send(
+              controlMessageEnum.requestVideo,
+              '',
+              PersistanceLevel.None,
+            );
+          }
+          break;
+      }
+    } else {
+      console.error('A host can only request audience audio or video.');
+    }
+  };
+}
+
+export default useRemoteRequest;

package/template/src/utils/useSearchParams.tsx

@@ -0,0 +1,28 @@
+import {useLocation} from '../components/Router';
+import {useMemo} from 'react';
+import isSDK from './isSDK';
+
+interface ReadOnlyURLSearchParams extends URLSearchParams {
+  append: never;
+  set: never;
+  delete: never;
+  sort: never;
+}
+
+function useLocationWrapper() {
+  let search = useLocation().search;
+  if (isSDK()) {
+    search = window.location.search;
+  }
+  return {
+    search,
+  };
+}
+
+export function useSearchParams() {
+  const {search} = useLocationWrapper();
+  return useMemo(
+    () => new URLSearchParams(search) as ReadOnlyURLSearchParams,
+    [search],
+  );
+}

package/template/src/utils/useSidePanel.tsx

@@ -10,13 +10,14 @@
 *********************************************
 */
 
-import React, {SetStateAction} from 'react';
+import React, {useState, SetStateAction, useEffect} from 'react';
 import {SidePanelType} from '../subComponents/SidePanelEnum';
 import {createHook} from 'customization-implementation';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 export interface SidePanelContextInterface {
-  sidePanel: SidePanelType;
-  setSidePanel: React.Dispatch<SetStateAction<SidePanelType>>;
+  sidePanel: SidePanelType | string;
+  setSidePanel: React.Dispatch<SetStateAction<SidePanelType | string>>;
 }
 
 const SidePanelContext = React.createContext<SidePanelContextInterface>({
@@ -25,12 +26,22 @@ const SidePanelContext = React.createContext<SidePanelContextInterface>({
 });
 
 interface SidePanelProviderProps {
-  value: SidePanelContextInterface;
   children: React.ReactNode;
 }
 const SidePanelProvider = (props: SidePanelProviderProps) => {
+  const [sidePanel, setSidePanel] = useState<SidePanelType>(SidePanelType.None);
+
+  useEffect(() => {
+    logger.log(
+      LogSource.Internals,
+      'CONTROLS',
+      `Side panel changed to -> ${SidePanelType[sidePanel]}`,
+    );
+  }, [sidePanel]);
+
+  const value = {sidePanel, setSidePanel};
   return (
-    <SidePanelContext.Provider value={{...props.value}}>
+    <SidePanelContext.Provider value={value}>
       {props.children}
     </SidePanelContext.Provider>
   );

package/template/src/utils/useSpeechToText.ts

@@ -0,0 +1,102 @@
+import {useEffect, useRef} from 'react';
+import {
+  SidePanelType,
+  customEvents,
+  useContent,
+  useSTTAPI,
+  useSidePanel,
+} from 'customization-api';
+import useTranscriptDownload from '../subComponents/caption/useTranscriptDownload';
+import {useCaption} from '../subComponents/caption/useCaption';
+import {LanguageType} from '../subComponents/caption/utils';
+
+const useSpeechToText = () => {
+  const {
+    isCaptionON: isSpeechToTextOn,
+    setIsCaptionON,
+    meetingTranscript: transcriptData,
+    captionObj: captionData,
+    prevSpeakerRef,
+    activeSpeakerRef,
+  } = useCaption();
+  const {setSidePanel} = useSidePanel();
+
+  const {start, restart, stop, isAuthorizedSTTUser} = useSTTAPI();
+  const {defaultContent} = useContent();
+
+  const isAuthorizedSTTUserRef = useRef(isAuthorizedSTTUser);
+  const defaultContentRef = useRef(defaultContent);
+
+  const showTranscriptPanel = (show: boolean) => {
+    show
+      ? setSidePanel(SidePanelType.Transcript)
+      : setSidePanel(SidePanelType.None);
+  };
+
+  const showCaptionPanel = (show: boolean) => {
+    show ? setIsCaptionON(true) : setIsCaptionON(false);
+  };
+
+  useEffect(() => {
+    if (!$config.ENABLE_STT) {
+      throw new Error('Speech To Text is not enabled');
+    }
+  }, []);
+
+  useEffect(() => {
+    isAuthorizedSTTUserRef.current = isAuthorizedSTTUser;
+  }, [isAuthorizedSTTUser]);
+
+  useEffect(() => {
+    defaultContentRef.current = defaultContent;
+  }, [defaultContent]);
+
+  const {downloadTranscript} = useTranscriptDownload();
+
+  const getActiveSpeakerName = (): string => {
+    return defaultContentRef.current[activeSpeakerRef.current]?.name || '';
+  };
+
+  const getPrevSpeakerName = (): string => {
+    return defaultContentRef.current[prevSpeakerRef.current]?.name || '';
+  };
+
+  const startSpeechToText = async (language: LanguageType[]) => {
+    if (!isAuthorizedSTTUserRef.current) {
+      throw new Error('Invalid user');
+    }
+    return await start(language);
+  };
+
+  const stopSpeechToText = async () => {
+    if (!isAuthorizedSTTUserRef.current) {
+      throw new Error('Invalid user');
+    }
+    return await stop();
+  };
+
+  const changeSpeakingLanguage = async (language: LanguageType[]) => {
+    if (!isAuthorizedSTTUserRef.current) {
+      throw new Error('Invalid user');
+    }
+    return await restart(language);
+  };
+
+  return $config.ENABLE_STT
+    ? {
+        isSpeechToTextOn,
+        startSpeechToText,
+        stopSpeechToText,
+        changeSpeakingLanguage,
+        downloadTranscript,
+        getActiveSpeakerName,
+        getPrevSpeakerName,
+        showTranscriptPanel,
+        showCaptionPanel,
+        transcriptData,
+        captionData,
+      }
+    : {};
+};
+
+export default useSpeechToText;

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 {
@@ -40,22 +41,33 @@ export function usei18nData(
   }
 }
 
-export function useString<T = string>(
+export function useString<T = any>(
   keyName: keyof TextDataInterface,
-): (input?: T) => string {
-  const lanCode = useLanguage((data) => data.languageCode);
+): (...args: T[]) => string {
+  const lanCode = useLanguage(data => data.languageCode);
   const textData = usei18nData(lanCode);
-  const getString = (input?: T) => {
+
+  const getString = (...args: T[]) => {
     let keyValue = textData ? textData[keyName] : undefined;
     if (!keyValue) {
       return '';
     } else if (typeof keyValue === 'function') {
-      return keyValue(input);
+      return keyValue(...args);
     } else if (typeof keyValue === 'string') {
       return keyValue;
     } else {
       return '';
     }
   };
+
   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/src/utils/useSwitchCamera.native.tsx

@@ -0,0 +1,25 @@
+/*
+********************************************
+ 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 {useRtc} from 'customization-api';
+
+function useSwitchCamera() {
+  const {RtcEngineUnsafe} = useRtc();
+  return () => {
+    try {
+      RtcEngineUnsafe.switchCamera();
+    } catch (error) {
+      console.error(error);
+    }
+  };
+}
+
+export default useSwitchCamera;

package/template/src/utils/useSwitchCamera.tsx

@@ -0,0 +1,19 @@
+/*
+********************************************
+ 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.
+*********************************************
+*/
+
+function useSwitchCamera() {
+  return () => {
+    console.warn('SwitchCamera only supported on native platforms');
+  };
+}
+
+export default useSwitchCamera;

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/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 */
@@ -46,8 +46,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/web/index.html

@@ -1,15 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <!-- moved to template/src/assets/font-styles.css as it was not available for sdks-->
+    <!-- <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet"> -->
 
-    <base href="/">
+    <base href="/" />
     <title><%= htmlWebpackPlugin.options.title %></title>
-</head>
-<body>
+  </head>
+  <body>
     <style>
-        /* .video-container > *{
+      /* .video-container > *{
             background-color: #000 !important;
 
         }
@@ -19,16 +23,40 @@
         .video-container{
             background-color: #000;
         } */
-        /* *:active {
+      /* *:active {
             outline: none;
         } */
-    </style>
-<div id="react-app" style="
-    height: 100vh;
-    max-height: -webkit-fill-available;
-    display: flex;
-">
+      /* Webkit (Chrome, Safari) */
+      ::-webkit-scrollbar {
+        width: 4px;
+      }
+
+      ::-webkit-scrollbar-track {
+        background-color: transparent;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        background-color: #777;
+        border-radius: 2px;
+      }
 
-</div>
-</body>
-</html>
+      /** to hide screenshare fullscreen play/pause button  */
+      video::-webkit-media-controls-play-button {
+        display: none !important;
+      }
+
+      /* Firefox */
+      html {
+        scrollbar-width: thin;
+        scrollbar-color: transparent #777;
+      }
+    </style>
+    <div
+      id="react-app"
+      style="
+        height: 100vh;
+        max-height: -webkit-fill-available;
+        display: flex;
+      "></div>
+  </body>
+</html>

package/template/webpack.commons.js

@@ -139,6 +139,22 @@ module.exports = {
           },
         ],
       },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.(wasm)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              outputPath: 'wasm',
+              name: '[name].[ext]',
+            },
+          },
+        ],
+      },
     ],
   },
 };

package/template/webpack.rsdk.config.js

@@ -17,13 +17,12 @@ module.exports = merge(commons, {
     'react-router': 'react-router',
     'react-router-dom': 'react-router-dom',
     '@apollo/client': '@apollo/client',
-    nanoid: 'nanoid',
   },
   // Main entry point for the web application
   entry: {
     main: './index.rsdk.tsx',
   },
-  target: 'node',
+  target: 'web',
   output: {
     path: path.resolve(__dirname, `../Builds/react-sdk`),
     filename: 'index.js',

package/template/webpack.web.config.js

@@ -28,10 +28,15 @@ module.exports = merge(commons, {
   // Webpack dev server config
   devServer: {
     port: 9000,
+    // 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/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;