agora-appbuilder-core 4.0.0 → 4.0.2

package/template/src/app-state/useNoiseSupression.tsx

@@ -0,0 +1,107 @@
+import React, {createContext, useState, useEffect, useRef} from 'react';
+import {useRtc} from 'customization-api';
+import {ToggleState} from '../../agora-rn-uikit';
+import AgoraRTC from 'agora-rtc-sdk-ng';
+import {AIDenoiserExtension} from 'agora-extension-ai-denoiser';
+//@ts-ignore
+import wasm1 from './../../node_modules/agora-extension-ai-denoiser/external/denoiser-wasm.wasm';
+//@ts-ignore
+import wasm2 from './../../node_modules/agora-extension-ai-denoiser/external/denoiser-wasm-simd.wasm';
+import {createHook} from 'customization-implementation';
+// Necessary To bypass treeshaking, dont remove
+console.log('wasm files loaded are', wasm1, wasm2);
+
+export interface NoiseSupressionContextInterface {
+  isNoiseSupressionEnabled: ToggleState;
+  setNoiseSupression: (
+    p: (currentState: boolean) => boolean | boolean,
+  ) => Promise<void>;
+}
+
+export const NoiseSupressionContext =
+  createContext<NoiseSupressionContextInterface>({
+    isNoiseSupressionEnabled: ToggleState.disabled,
+    setNoiseSupression: async () => {},
+  });
+
+export function NoiseSupressionProvider(props) {
+  const {callActive} = props;
+  const [isNoiseSupressionEnabled, setIsNoiseSupressionEnabled] = useState(
+    ToggleState.disabled,
+  );
+
+  const {RtcEngineUnsafe} = useRtc();
+  let processor = useRef(null);
+
+  useEffect(() => {
+    if (callActive && $config.ENABLE_NOISE_CANCELLATION_BY_DEFAULT) {
+      setNoiseSupression(p => !p);
+    }
+  }, [callActive]);
+
+  useEffect(() => {
+    if ($config.ENABLE_NOISE_CANCELLATION) {
+      const denoiserExtension = new AIDenoiserExtension({assetsPath: 'wasm'});
+      AgoraRTC.registerExtensions([denoiserExtension]);
+      processor.current = denoiserExtension.createProcessor();
+      processor.current.disable();
+    }
+  }, []);
+
+  const enableNoiseSuppression = async () => {
+    if (!$config.ENABLE_NOISE_CANCELLATION) {
+      throw new Error('AINS disabled in config');
+    }
+    //@ts-ignore
+    const localAudioTrack = RtcEngineUnsafe?.localStream?.audio;
+
+    if (processor?.current) {
+      localAudioTrack
+        ?.pipe(processor.current)
+        .pipe(localAudioTrack?.processorDestination);
+      await processor?.current?.enable();
+    }
+  };
+
+  const disableNoiseSuppression = async () => {
+    if (processor?.current) {
+      await processor?.current?.disable();
+    }
+  };
+
+  const setNoiseSupression: NoiseSupressionContextInterface['setNoiseSupression'] =
+    async p => {
+      if (
+        isNoiseSupressionEnabled === ToggleState.disabling ||
+        isNoiseSupressionEnabled === ToggleState.enabling
+      ) {
+        throw new Error('Cant change noise supression, already in transition');
+      }
+      let stateToBeSet =
+        typeof p === 'function'
+          ? p(isNoiseSupressionEnabled === ToggleState.enabled)
+          : p;
+
+      if (stateToBeSet) {
+        setIsNoiseSupressionEnabled(ToggleState.enabling);
+        await enableNoiseSuppression();
+        setIsNoiseSupressionEnabled(ToggleState.enabled);
+      } else {
+        setIsNoiseSupressionEnabled(ToggleState.disabling);
+        await disableNoiseSuppression();
+        setIsNoiseSupressionEnabled(ToggleState.disabled);
+      }
+    };
+
+  return (
+    <NoiseSupressionContext.Provider
+      value={{
+        isNoiseSupressionEnabled,
+        setNoiseSupression,
+      }}>
+      {props.children}
+    </NoiseSupressionContext.Provider>
+  );
+}
+
+export const useNoiseSupression = createHook(NoiseSupressionContext);

package/template/src/app-state/useVideoQuality.tsx

@@ -0,0 +1,39 @@
+import React, {createContext, useState} from 'react';
+import {useRtc} from 'customization-api';
+import {createHook} from 'customization-implementation';
+import {Platform} from 'react-native';
+
+export type VideoQualityType = typeof $config.PROFILE;
+
+interface VideoQualityContextInterface {
+  videoQuality: VideoQualityType;
+  setVideoQuality: (videoQuality: VideoQualityType) => void;
+}
+
+export const VideoQualityContext = createContext<VideoQualityContextInterface>({
+  videoQuality: $config.PROFILE,
+  setVideoQuality: (_p: VideoQualityType) => {},
+});
+
+export const VideoQualityContextProvider = props => {
+  const [currentVideoQuality, setCurrentVideoQuality] =
+    useState<VideoQualityType>($config.PROFILE);
+  const {RtcEngineUnsafe} = useRtc();
+
+  const setVideoQuality = async (p: VideoQualityType) => {
+    if (Platform.OS === 'web' && RtcEngineUnsafe) {
+      // @ts-ignore
+      await RtcEngineUnsafe.setVideoProfile(p);
+      setCurrentVideoQuality(p);
+    }
+  };
+
+  return (
+    <VideoQualityContext.Provider
+      value={{videoQuality: currentVideoQuality, setVideoQuality}}>
+      {props.children}
+    </VideoQualityContext.Provider>
+  );
+};
+
+export const useVideoQuality = createHook(VideoQualityContext);

package/template/src/assets/font-styles.css

@@ -1,8 +1,8 @@
-@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');
 
 @font-face {
   font-family: 'icomoon';
-  src: url('https://dbudicf5k4as1.cloudfront.net/10/icomoon.ttf') format('truetype');
+  src: url('fonts/icomoon.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -24,6 +24,178 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-play-circle:before {
+  content: '\e978';
+  color: #fff;
+}
+.icon-clear-all:before {
+  content: '\e96f';
+  color: #fff;
+}
+.icon-erasor:before {
+  content: '\e970';
+  color: #fff;
+}
+.icon-color-picker:before {
+  content: '\e973';
+  color: #fff;
+}
+.icon-shapes:before {
+  content: '\e974';
+  color: #fff;
+}
+.icon-pen:before {
+  content: '\e975';
+  color: #fff;
+}
+.icon-selector:before {
+  content: '\e977';
+  color: #fff;
+}
+.icon-view-only:before {
+  content: '\e97a';
+  color: #808080;
+}
+.icon-fit-to-screen:before {
+  content: '\e979';
+  color: #fff;
+}
+.icon-zoom-in:before {
+  content: '\e963';
+  color: #fff;
+}
+.icon-zoom-out:before {
+  content: '\e964';
+  color: #fff;
+}
+.icon-undo:before {
+  content: '\e965';
+  color: #fff;
+}
+.icon-redo:before {
+  content: '\e966';
+  color: #fff;
+}
+.icon-light:before {
+  content: '\e967';
+  color: #fff;
+}
+.icon-dark:before {
+  content: '\e968';
+  color: #fff;
+}
+.icon-line:before {
+  content: '\e969';
+  color: #fff;
+}
+.icon-square:before {
+  content: '\e96a';
+  color: #fff;
+}
+.icon-circle:before {
+  content: '\e96b';
+  color: #fff;
+}
+.icon-arrow:before {
+  content: '\e96c';
+  color: #fff;
+}
+.icon-gradient:before {
+  content: '\e96d';
+  color: #eac443;
+}
+.icon-area-selection:before {
+  content: '\e96e';
+  color: #fff;
+}
+.icon-highlight:before {
+  content: '\e971';
+  color: #fff;
+}
+.icon-move:before {
+  content: '\e972';
+  color: #fff;
+}
+.icon-text:before {
+  content: '\e976';
+  color: #fff;
+}
+.icon-celebration:before {
+  content: '\e962';
+  color: #ff414d;
+}
+.icon-upload-new:before {
+  content: '\e961';
+  color: #fff;
+}
+.icon-add:before {
+  content: '\e95d';
+  color: #fff;
+}
+.icon-blur:before {
+  content: '\e95e';
+  color: #fff;
+}
+.icon-remove:before {
+  content: '\e95f';
+  color: #fff;
+}
+.icon-vb:before {
+  content: '\e960';
+  color: #fff;
+}
+.icon-captions:before {
+  content: '\e941';
+  color: #fff;
+}
+.icon-captions-off:before {
+  content: '\e958';
+  color: #fff;
+}
+.icon-view-last:before {
+  content: '\e95c';
+  color: #fff;
+}
+.icon-download:before {
+  content: '\e959';
+  color: #fff;
+}
+.icon-transcript-stop:before {
+  content: '\e95a';
+  color: #fff;
+}
+.icon-transcript:before {
+  content: '\e95b';
+  color: #fff;
+}
+.icon-search:before {
+  content: '\e945';
+  color: #808080;
+}
+.icon-lang-select:before {
+  content: '\e942';
+  color: #fff;
+}
+.icon-globe:before {
+  content: '\e944';
+  color: #808080;
+}
+.icon-down-arrow:before {
+  content: '\e93f';
+  color: #fff;
+}
+.icon-caption-mode:before {
+  content: '\e93c';
+  color: #fff;
+}
+.icon-stt:before {
+  content: '\e93d';
+  color: #fff;
+}
+.icon-transcript-mode:before {
+  content: '\e93e';
+  color: #fff;
+}
 .icon-demote-filled:before {
   content: '\e912';
   color: #fafafa;
@@ -254,7 +426,7 @@
 .icon-recording:before {
   content: '\e928';
 }
-.icon-remove:before {
+.icon-remove1:before {
   content: '\e929';
 }
 .icon-remove-meeting:before {