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

package/template/_prettierrc.js

@@ -10,9 +10,9 @@
 *********************************************
 */
 module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
   bracketSpacing: false,
-  jsxBracketSameLine: true,
   singleQuote: true,
   trailingComma: 'all',
-  endOfLine:"auto"
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import {StyleProp, ViewStyle} from 'react-native';
-import {RtcEngineEvents} from 'react-native-agora/lib/typescript/src/common/RtcEvents';
+import {RtcEngineEvents} from 'react-native-agora/lib/typescript/common/RtcEvents';
 import {EncryptionMode} from 'react-native-agora';
 import {VideoProfile} from '../Utils/quality';
 import {UidType} from './RtcContext';
@@ -46,14 +46,26 @@ export const toggleHelper = (state: ToggleState) =>
   state === ToggleState.enabled ? ToggleState.disabled : ToggleState.enabled;
 
 export interface DefaultContentInterface {
+  //uikit and core
   uid: UidType;
   audio: ToggleState;
   video: ToggleState;
   streamType: 'high' | 'low';
   type: 'rtc';
   permissionStatus?: PermissionState;
+  localAudioForceDisabled?: boolean;
+  localVideoForceDisabled?: boolean;
   //applicable only to the screenshare
   parentUid?: UidType;
+  //uikit and core
+
+  //core only
+  name: string;
+  screenUid: number;
+  offline: boolean;
+  lastMessageTimeStamp: number;
+  isInWaitingRoom?: boolean;
+  //core only
 }
 export interface CustomContentInterface<T> {
   type: T extends DefaultContentInterface['type'] ? never : T;
@@ -110,10 +122,8 @@ export interface RtcPropsInterface {
   callActive?: boolean;
   encryption?: {
     key: string;
-    mode:
-      | EncryptionMode.AES128XTS
-      | EncryptionMode.AES256XTS
-      | EncryptionMode.AES128ECB;
+    mode: EncryptionMode.AES128GCM2 | EncryptionMode.AES128GCM2;
+    salt: number[];
   };
   // commented for v1 release
   // lifecycle?: {
@@ -123,10 +133,16 @@ export interface RtcPropsInterface {
   geoFencing?: boolean;
   audioRoom?: boolean;
   activeSpeaker?: boolean;
+  preventJoin?: boolean;
+
+  //core only
+  screenShareUid?: number;
+  screenShareToken?: string;
+  //core only
 }
 
 export interface CallbacksInterface {
-  EndCall(): void; //?
+  EndCall(isHost: boolean, isTriggeredByHost: boolean): void; //?
   FullScreen(): void; //?
   SwitchCamera(): void; //Not in reducer
   UpdateDualStreamMode(mode: DualStreamMode): void;
@@ -136,8 +152,8 @@ export interface CallbacksInterface {
   DequeVideo(uid: UidType): void;
   UserMuteRemoteAudio(uid: UidType, muted: ContentInterface['audio']): void;
   UserMuteRemoteVideo(uid: UidType, muted: ContentInterface['video']): void;
-  LocalMuteAudio(muted: ToggleState): void;
-  LocalMuteVideo(muted: ToggleState): void;
+  LocalMuteAudio(muted: ToggleState, forceDisabled?: boolean): void;
+  LocalMuteVideo(muted: ToggleState, forceDisabled?: boolean): void;
   LocalPermissionState(
     permissionState: ContentInterface['permissionStatus'],
   ): void;
@@ -146,7 +162,10 @@ export interface CallbacksInterface {
   JoinChannelSuccess: RtcEngineEvents['JoinChannelSuccess'];
   UpdateRenderList(uid: UidType, user: Partial<ContentInterface>): void;
   AddCustomContent(uid: UidType, data: any): void;
+  RemoveCustomContent(uid: UidType): void;
   UserPin(Uid: UidType): void;
+  UserSecondaryPin(Uid: UidType): void;
+  ActiveSpeaker(Uid: UidType): void;
 }
 
 export type CustomCallbacksInterface = CallbacksInterface;
@@ -158,16 +177,17 @@ export interface PropsInterface {
   mode?: ChannelProfile;
 }
 
-const initialValue: PropsInterface = {
+const initialValue: Partial<PropsInterface> = {
   rtcProps: {
     appId: '',
     channel: '',
     geoFencing: true,
     audioRoom: false,
+    preventJoin: true,
   },
 };
 
-const PropsContext = React.createContext<PropsInterface>(initialValue);
+const PropsContext = React.createContext<Partial<PropsInterface>>(initialValue);
 
 export const PropsProvider = PropsContext.Provider;
 export const PropsConsumer = PropsContext.Consumer;

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

@@ -9,10 +9,29 @@ export interface ContentObjects {
   [key: number]: ContentInterface;
 }
 
+type JSXElement = () => JSX.Element;
+export interface CustomContentInferface {
+  uid: UidType;
+  component: boolean | React.ComponentType | JSXElement;
+  props: any;
+  onStage?: boolean; //true by default
+}
+
+export interface CustomContentObjects {
+  [key: number]: CustomContentInferface;
+}
 export interface ContentStateInterface {
+  customContent?: CustomContentObjects;
+  setCustomContent: (
+    uid: CustomContentInferface['uid'],
+    component: CustomContentInferface['component'],
+    props?: CustomContentInferface['props'],
+    onStage?: CustomContentInferface['onStage'],
+  ) => void;
   defaultContent: ContentObjects;
   activeUids: Array<UidType>;
   pinnedUid?: UidType;
+  secondaryPinnedUid?: UidType;
   lastJoinedUid?: UidType;
 }
 

package/template/agora-rn-uikit/src/Controls/BtnTemplate.tsx

@@ -26,6 +26,7 @@ interface BtnTemplateBasicInterface {
   disabled?: boolean;
 }
 interface BtnTemplateInterfaceWithName extends BtnTemplateBasicInterface {
+  //@ts-ignore
   name?: keyof IconsInterface;
 }
 interface BtnTemplateInterfaceWithIcon extends BtnTemplateBasicInterface {

package/template/agora-rn-uikit/src/Controls/Icons.ts

@@ -9,9 +9,41 @@ export interface IconsInterface {
   'demote-outlined': string;
   'lower-hand': string;
   'raise-hand': string;
+  'white-board': string;
+  ains: string;
+  'vb-blur': string;
+  'vb-color': string;
+  'vb-image': string;
+  vb: string;
+  'turn-off-stt': string;
+  'live-caption-mode': string;
+  done: string;
+  warning: string;
+  'noise-cancellation': string;
+  'whiteboard-new': string;
+  chat_attachment_pdf: string;
+  chat_attachment_image: string;
+  chat_attachment_doc: string;
+  chat_attachment_unknown: string;
 }
 
 const icons: IconsInterface = {
+  'whiteboard-new':
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANWSURBVHgB7ZuBcdswDEWhXgdIN1C6QNNO4HSCbBB3gmYDuxPEncC+LuJs4GwgbxBvgAIVXcs2KQKU5MgS3h3PdzIBif8gUIQoAMMwjDQQMad2A8YxJModtQIPLFksMP5HTVUcNKEqkAAzjPMMY8RFj5Q5jA0a9Eoh0BuMCWX0iAX6AMNBm1d+w1igaHhAHQWOaTbD8LQe4hHGAg12ijoKGBNdR08W60AOJ/TDTvk3h+tmm2XZrcbgY+gPLJPYEkphhsIPUOIViMS5o581tSGthFcUPS+g5OwWc5GzgWGJw9ySQFtQ4ntQHFrkMKsUcZgjgVxCzmF4/JJ2dOkl+GdosfdG7Ql7UJ1LmNbnCt8zasu6Dhts4dmhKzDhoRCFSwo8FNqKuk4hepGTsMOHQqzcPXWdvEAPwA6XFHhSKqnr2EuBsL7OHCIpeq5VoGfUsVH4zsXj7aNAqK8UMncK/+vOBaIuN24grb+oQ12dmVkqfHvzWp2BWCA6PKG2QH9u4MeFn9iwaodp0ZMr/Bc+B3UGUYGwjBZNTphBIugJ/wji6JGOV22A+oTJFJgQTaij0J4j5KiRATZDFU2oYw5KQo4aGWC5LmsCR6AokSt8JtWZQ86qfVLei714ju3c8VeI80SNk3gO7TGHSyBRFMskvZ96OZoW1YjAcuaRTM0FRp52UUbyW4qQw/YM6k8+RdnyYImVaMLDLCm5ldk2+bkr5LQ9g/gFaNZQfNutFcLk0JCQ8/YMZBfBEbHA5uxv5xxaInSi9gx0FzPHBkAHqM+lNtBfUErZgllAB6jHqzZIvzBNNB3Nki1fRz8FcufiaOIXAb46eOGEmUCHSMabnRr4HNE7peg7/Ca4CNlHyY5Ot4MLIBlvLwR6LyTjHdIWvE4wgSKYQBFMoAgmUAQTKIIJFMEEijBagaQrKJFAOMzPGkVjOhVoG+g3hYHAkeOi5yHQ5bXOOFRs52re4zVFEl1rFmifXBUhVNo9ejt7ulidQLnLdczcV/dT+/ZJs0ATGCcFifO5esCXpHm7/kXqMT2Dv0D8fnrwTCC34foexiXSP3F8m8290zx15Ez+FcKz2lDg6YxTyjc35jOkn0NNqX2hJt7adkFSauZbKPcS/En5wMUwDMMwDMMw4C9ycj0K0Sb6NAAAAABJRU5ErkJggg==',
+  'noise-cancellation':
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANxSURBVHgB7ZvxddowEMaPvv5fRlA2yAjuBMkGYYPSCeJMAJ0AMkGyAWzQdAKzAXSCr6dafjjGtiRbxgLu9949g5Fk+8vJOukUIkEQBEEQBEEQ/JlQBACY8uGRTZlTH9omk8mObhkWRrFt0MxKl/Fsc8G2N6JfLvwA92wZ7Ogy945tqlKbKV0qlQdxIbN5kmlzXaqjveiJxoRvYGZu5sGz3hr+bFrae0YPcQcDRy/YeNRR6M60oc15S539KALxRZPKjSSO9R7RnVlLu1r4t1LZDGN2MZyOPk5exOVSdCe1tD1F7jGaBQXgC3libuKZPyaVn7RHaVdXNBIcNx348IutOJ6PQpjSX6iJDC3xy5AeNAROHoS872dsKZstAFNs/8tj7GE2AD5dzDcyPdAV4CQQ9+01H+7YXtl2luJamBddnuu90oXj7EF64sg244/f2X42FCuESc0LMwqQT2vQpct7j2JGqCV/3FZ+2sYmTIm5Oc7IE2+BSrxYvo9OKSQpPCcxI7Gic4BjsJh51DnLMI88Ym8LSeYu7fTxIE0RjKUUJ4eW8zuKEZwxUEQ+P6tOZJfwWEzr60FRUzOg6O9zn4HkqgUqUQwgKXnylW4A9pgtdUxQ3IoHdUYEsiACWRCBLAQRCMeFtAyOOawhQD4pLaLnZ4oBnC7Ct2Y1cUwVdeHBci9ZpXxCPQnhQdOa76ql/Dt150/TD0YMVTn9jXoSQqCPmnNJU2ETxW7Jn7VlM4OqOfeXxgafUy0FK0udIVLPb9VKFAs4zZFZd1cg4OYF1GdrnbO9g4P61G/qUK+64eDkIeGwuIX6F3+QjEqQDVTGW/SiWdlr9LvmzmXmbES4N6bZsb171NXeoio/3UW1AavBE4Kkfztcd0WxYbpL3RKn09Jmx2v+QD2KYgTNq4XBM6y6zYZrpRQzfIO/G248mCe1eI5z8mA00B7jrPq4P/KYa9EkDmLtWlXwedJY9yBP8Fg4h31nyTi7yPoAe7S8Nx71ZASdlupOzbmZKdOW38ow4gpCL+A/pfBFv+8UXTrolwurQ3tUStcE7NMKV2FWuAavacIIpd8tGw9RdFk9tF/2vxd0AfnLuK4L6nOX+fINDU73XGsSigDJalgQgSyIQBZEIAsikAURyEIsAl3FrvxBQb53sGBJwikmqpboWRAEQRCC8A+7wtIN3wzWKgAAAABJRU5ErkJggg==',
+  warning:
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAADNUlEQVR4Ae2c0W0TQRCG/zXxe0pwOoAOLh0kEkQ8kgpIKoioAKggvAEJUkwFuAPoADrABcQssxs7SqSsvXu3Mztx5pMsnew7Rxn/s9/tns+AYRiGYRiGYRiGYRjGtuCvMKHHLhTjoJBYtGtc0WZ38wSmGOPYHWIOZYygkWu8xap4AYcDeu4EClGXwNC2VKzfD7w0xw5eUAr/QBH6ErjA+8Qroa3PoQxVBfQXeEPj3cGaXTp/eae1FaCmhWPrLvCDCjhZu6OjFn4WW1mFUPQkMIhjU/ECPo6RaoSiIoFrxJFCjVB0JPDmnK8ENUJpXsAoDuA5ylEhlKYtnC2OFAqE0jaBueJIoUAozRLYQxxpdrDXSijtElgujnXv1UwoTQo4QBwpOv917QyGDfEWHiyOFI2EIp/AoeJI0UgoogmsKo4UwkKRTWC5OGb0EU+LjhAWilgBe4hj372ix0schu2C40SFItLCxeIgIVDh9u69xwW1vss/XkooMglc4IxFHCkEhcJewJg+H9tXmrP4t5nhT2Bo3VYICIW1gMtrHBO0g10obAWM7TOisa81I5xzfruBL4HS4kgTVq/ZPkiWAjYUR4oTGk5qLl7cwpPAluJI4ZIX7AdRvYAKxJGiW86GqlK1gGrEkYJSWFsodROoRxwpqgulWgEViiNFVaHUS2BNcXjs3p2GxW1XMdkVhVJlNSYOzq7ytCmsqHh8XG7XX8X2OHZH+ISBDC4g2zUOfubL1etBS17DW1i/OFJUEcqgBIpc4+DG08LrEX6hJ8MSyD/jKL8mUspAofQuIPuMIyRjdU2EtsFH57/0X73u1cLs4vD4Tm11bx3PX8a0d+Cht1D6JZBbHCP8hSy9hVKcQCFxzOkD2l8N7nHm4PAT/IRLqbOSA8oL+I2KJ3XaEm7xcnHy30GGWRh3Sw4oKiDLjEMbC5y61/iQu3t2AR/xjKOUIqHkS+TxzjhKKRJKVgIFB3FNZAklL4HbPu49TFYKNyZwefOz9HmZCiiBG+uTm0B1d4qz4/O+pLmxgNFGHu/wtAj/82nOjvmnMZ/JwGOSyT/dPwJRhTGmGn+fwTAMwzAMwzAMwzCMLeA/aQAlpfLwqQYAAAAASUVORK5CYII=',
+  vb: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEfSURBVHgB7VNbEcIwELwwCCgOkIADggMcgAQcVAI4KBJAARLAQeugdXBc6KVzpE2a5Ls7szNtsrebywNgQSoQsSWe+XtLrIlvYsFjJ+xhNQXPD5q5gJD5kfgKmZsFxISMzD26cqq7LHNe7YVYmQ6Mzo5Lc9tdKGDK3IZK1CIkzpzFsmVrUOE0Xjx/k+cyF2DNS1HkQ+vU/A4dIroo2UDzfxsKkOazAcL8LMbunoDKNY/ZosGcCwth8Lf/YmuyHpo1vYg5jf0V1W4NJj40e+c1JAAnHpqaKTCrOhL3xB1xSzRjHbEhfohPpdSD9dpo6P8OER2UgdvjojZ6SGi1wjxcXS/lCUDIQ0fbs5EDK58Q8jC6pmuP8AD9oaaigQWp+AKsAoDF7uWeIAAAAABJRU5ErkJggg==',
+  'vb-image':
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAB20lEQVRIie2UPWsUURSGn2siwcRsdgU/EkjnT5BgsZVgxCaNCiqIIi4WRrD1F6RQxMKAgTRWahkIikktRtzSD1IpCIIEsfAjCQQei5zRyZDdmVjnheHcc+5733fuzLkXdrFTqJ/UEzE+pLbVp+reqF1Rv6rjkTfUl+ozdV8Vg4mIh9W36kK2UG2qi+qZnHhbfaXWona5iskR9V1evANvqiiurlcRf18UV/vVlno3Yr/aow7kxdULZQYfthEfVpfdxK+Iy+pwzF+qJB7k/DcfjPhE/aE2I29G/jjyO5m42igzyMSvqedjvKJOF3jT6kr2+SLW1Td53p6iQUppVW0BD4CPUV4DagVqDViNNb/VOrAAWLaDlrqWtWvU7qsb6g31aMQN9V7MD6mv46mXGfwVjz4/qA6o827FfNR74qAtqUNdxUM0L95WJ3NzY9ExY4U1FzNx9VwVk/3qLePKqAr1bPGgpQ7ElFIyOuo0cAo4BowAfcA68AVoAy+A59EcJ4GRlNKjMoM+4DZwEzgAfAeWgM8xbgCjwPEYf2Oz66ZSSt2vijCYiR85p06ovR14vTE/F/yHRU6nHfwEFoGrpW/zD7PAeEppsIpB98PSBSmlLZrbbh24/r8Gu9gx/gBohhCCgI16xQAAAABJRU5ErkJggg==',
+  'vb-color':
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAvVBMVEUAAAAAAAAAAAAAAABAQEAgICAcHBwaGhogICAeHh4mGiYhISEfHx8eGB4aGh8eGR4cHCAeHiIdHSEbGx8fGx8eGiIeHiEdHSAdGiAdGh8cGh8cGh8cHB4bGyAcHCAdGx8cHB4eGx4dGx0dGx8bGx8cGh8bGh8bGyAdHB8dGx4cGx8cHB8cHB8cHB8cHB4bGx4bGx8cGiAbGx8cGyAcGh8cGh8cGx8cGyAcGyAcGyAcGx8dGx8cGx8cGx////9owITRAAAAPnRSTlMAAQIDBAgJChARFBcZKzIzNzw9QkJERUdhYmNkZWhvcnd5enuCioyer7K0tba3ubq8wcXJy8zOz9DR09bY2WCHnYUAAAABYktHRD5JZADjAAAAuklEQVQoz52R2RKCMAxFiyLu+4KCiiuKAm6oqOT/f0sMbaEwvnAfMpNzm9xpS0heSb3N0XtfduOayDt7oHotSgk+/UAsq8H5DATZFcq7QdhNFI0WgG3Ei/avUUiZFoCgicYI5zVFpyXUGg0TMjqg4fLdwLLuaDz4bp7lo/GMd7MsB41TNmP1J9yro6Gm+bUVXVB2k9S35lX2VIOA0bMkPrrBz7dFo2CwGT39gX2aM8x8rayajn9bSiS/vu5rPfA8hChsAAAAAElFTkSuQmCC',
+  'vb-blur':
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAABWUlEQVRIieWUP0oDYRDF36gRxMZOUQRbIZBIPICYxsZKm1SxtMoBvIBN0qRJrpDaY6iQwt5CCGiUFGLjv5+Fm2SyZDdfFATJg4VvmDdvZmeGkWYCwB6w7uxd4CAkdiEwx6KkeWd3JD2Hl/jXAOpA3dlVoOHsBlBN4nvMBea06EuyZwFAFshF7xpQc74SUI5x/QwGfCAHZPs+v6YZDVdxOZa/JddzM7sBzpzf8zOadj6AARWgDVwCpakEAhKcMIpPYD8kdrCmwA5QiN5NoOl4R7E4k3TsYgd8oADk+z4/gzcNZ/ASE3waU9yje3v+u6SPsb+TBGAb6LkW3QGrIbHB0wY29N2qV0ktM+v9OEH/rphZBShKOpW0EqN1JdXM7Nrz41qp5zqq+kLSUgKlCGylaaQCOGQy8mkak67praS0XnckPUxb+AiAzejWtIEucA9cAefA2q/E/wW+AK4bGrj694GPAAAAAElFTkSuQmCC',
+  ains: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYAgMAAACdGdVrAAAACVBMVEUAAAD///////9zeKVjAAAAA3RSTlMAZr+SD6biAAAAAWJLR0QB/wIt3gAAADVJREFUCNdjYEADjA5giqkBk2J0agRJMjU1NaBTjE5NTUBJIAfEhVJQQawaYIZhtQjmCCQAAMpYF99YsyCnAAAAAElFTkSuQmCC',
+  'white-board':
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAABeElEQVRIie3Uz4tNcRjH8c/XlRgjkiKzUNyr/EjK1n/g/5C/wI8F+ROklNjMjZKysrDT2GuahcjCxqCIJMKUppfFPeo6fWfuGZrdfDbn9Dzf8/48z3POeZINTVBpB7Avybkkp5IsJ3me5GYp5c1/u+EQPuMXnuEplvAVJ1d4poddXQ0OYojjY7EZvMewcn6AV1jG5X/t6gA+4E4ld8vfurQW8F5cw098xNGxXK+5bsHDMYMvXcC7G/D35l0MsX8sP8BLnK6YPJgEP4x3DXgW/VZ+gLcN7FvL5CqmJhncbcZxpJIbh2ubrKRNlVhJMt2GJ5lLMtM6O53kwqpVt0B9vMYL7Fil8j+amziWisl27FkXeMuoExw71xN+Ap9wD1u7wvtdx4JtuGi0Kq50Nbi+1pkbLcZHtVztM+1VYk+SnCml/GiBp3A+ybEkC107uDGpcpzFvNGPxmhVVLvbXInNJlls7peS3G5X3mgxyeMk90sp852q31BNvwGhl1TXx/9xfQAAAABJRU5ErkJggg==',
   profile:
     'data:image/png;base64,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',
   'no-mic':
@@ -32,6 +64,19 @@ const icons: IconsInterface = {
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADvSURBVHgB5ZRREcIwDIZbB5MQCZOABBxQCUMBSJgEHCBhczAJlTAJITmyo1dW2vTKC/x3ubVZky9JbzPmr4SInmySdcemCR7I7nFQmAhFAcxrAE7ilyBhJ75pBxCu+VxfC3FbpR8Ai2zzI5OEq4wAxAcZgJctmBJxuzFE/GsTQAqy+ZoAJPAggblxVQMAX/LRuHxrwFsnQWIsBtChkcwlACj30icgkEveR9VecV8pCJR0cMMyMeQYQfIAJYR1khj1z08NUUsJGUyNlJCLqVEhZNqDWAXE0QMSr2dr7cyF0Jrv40z70XxD+Px2nPkZPQCoHCglmaLpAgAAAABJRU5ErkJggg==',
   'raise-hand':
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADxSURBVHgB5ZTtEYIwDIYD5391gzqBjIAbOIojsIFuoBs4AmyAG+AIblATDSdW+pFSf3g+d+81V0jeNrQA/BVa644EKcGCNapFFfqFQi1IvvxZgEfJ43wwR3HN8cqVnI9N8uoKRx6tXLGc2HbQUjKaLGEiuWVe8ejtcaxBMpIYYCvPqP1XDOjI4rBF7SRJPeUgri2x6oOxWpnNAMKhe/C43RliPpzaosb3QqzBFbVhgyNI0X6o7xdzEgQ7uIGdBp7/p7Ug52MHJ8fqO5ZJeKv0+/EMRYEETKgExSuIIdAk/AZbTOjE0DdpB0U71EHclp/kDilNkhWhg0nUAAAAAElFTkSuQmCC',
+  'turn-off-stt':
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAECSURBVHgBzVQLEcIwDE25CZgDhoNJQMJQADiYA4YCcDAsoIA6GChYHQAKSnJLj1LaXvncwbt710/SlyzpCvAP0FrnxBTHFbIPcMs+JfLMLF2NzI6KQ4OskVdPPMVjhTTZkeDRK2g57YUQCt7ECL6MJEFuQhGxF6ZJqRlS3TqeS2vf1K+HoZ5PUbQvE86Qulrzemo6bN2MPFmQ7TXbWxaskBveq3wHooLss0B2+o4DiYecHwSdS906vjt3zyCDMNbW/AKJiAkW9oKbIPHSSxj+ppcF5549ylRGzoQFMZMJhEEPhUYuY4KmTtRJBXGMkSefQdgLFGrA/6kuKPjsk0fkd7gBEy7vamLyRFEAAAAASUVORK5CYII=',
+  'live-caption-mode':
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADUSURBVHgB5VPtDYIwEL0S/ssIHYERGEE3qBPoBuIGMgFsAk6iI7hBfadHUpsirZFfvOSlxx333RKtDmoUrLUax4nS8QDPSik+KXMMBqwoHUb4Qu4Z78i0pwRIZ8X4ndGfkVM4q8GhHdWFZwT90amGu+l836kKW0c+gCWCVfS5tJa+AQ412ItsA/YKvAX0PfvOVfgz8ikDso4tbcEdve9b4egNZqhiA/LV0SI38BsQiJfReP/EVRjanryEmmaw6Ay5gtKZUSw0eA0F7MS4oTQM4rtWPAFxAE4MEjNhpQAAAABJRU5ErkJggg==',
+  done: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABDSURBVHgB1c3BDQAgCAPAjuIIbKQjuJmjOIKjICS+TBPCkyZ99QhAvahqs64M3lZhoxB8KH7Ax/7hgeC9oxlidoQ6ue+PS8aRUCPDAAAAAElFTkSuQmCC',
+  chat_attachment_pdf:
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFfSURBVHgB7ZU9S8NQGIVPShBsHRSKCpKY6qKLf0A7CCri4ioOOvozjH9A7Ci4uDjrqAgOFetSByenRImK3xZBB4fEN7lYzYfJzbVLS8+Qm/vm3PPkfpAAzS4pWDCvb004jpY00DQMSBnok8XiWpwvE6pwhNetNvSjcnkVqQAplQT5NyAJ0hBAHEQYIMtyJCTkg6AUVeXyNWyJ2gBh+T4VztKsSY2GFHqZW8Db+HS9X1AGfJnBU6R5V3UYmJkHnu+B6im7vzgHzirA4grw8Q7sbHrWjjsLcYo+ptkc8EThg0PA4wMLHxljwbku4GAPvPp7D0YpsFphIFfuxLMU3knwfC94FT0DN3R/ly1Jvg+YmAKuDOqf0EOH1YUAEi5pvOYBvt/cbbfWfzzHh74hn/0K4hT+4Vg3r9R0Q0w1OkU9vwtRe1CCoGzY28GaFGU0LWuD2Mvgn0mN4ksFRdHRcvoCpYdrkbRsJT8AAAAASUVORK5CYII=',
+  chat_attachment_doc:
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAE4SURBVHgB7ZWxS8NAFMZ/KRHcrE6CJKR7B8eAFHRzdNXFUQc3cRMaoe4WHXT0P3B0cyhCdzeHRoiKi9gOglPihbPFJjG5nHVQ/CB5uceX93v3DhL47TKSCf/+0SeKnKIX/V4Po4K30mgc5PkqqYxC8ZE1xLvqdJqUApRUEeTbgCLIRAB5EG2AaZqZkJQPTVm2reSb2Ij+Adoa+1TMNSNfBIcS2nUHbNRfR+uatTBWM7kDJ76tL8LhKthVeZ2swbYrDXGM1zPTcn37PEWeMke05MBZF45FoS1XPltVCa7Pw84FDN5Q0pdnkCwQdzzsehi1Add30BIj2r+U3e8tw80TnHZlbH2MT0U/fsjpH07w8CKCYn8p9QVg9nMia0RtNBUSnidzRpbRD4Ijwd5EfSd9Ub5dsyyPP6d3/d5cbIF9MEYAAAAASUVORK5CYII=',
+  chat_attachment_image:
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFoSURBVHgB3ZSxSsNQFIb/pEFqLCrtIBQSdPUNHDq4+AaOpYtPYJcOQuIDKHZ0rE/gGzh0E5yk0CmhJkoVWksgaDBNTFssaXKT3MSC2B8Scs8953y5/00u8N/FBAOq/qLCdXeTClVFAcNCPqxUzuPy2FCEovk81YF8125LSAVIqSTIrwFJkKUA4iCZARzHESGhPGSUIIpUeUuz6M8AkRa1BjswxjnQaDM3Rq30SpyLXAFt86RcKosc21gY1/NV1NerNKXxANvS0Xs4gHK/j6F26ZthQDjGiIrcA8vsoN89wZelTcc/gKJwiovPmxnGMeGyG8gEeO4ch6zxQ3K2An7UgMsU8LF15kXz6QDB5n4I45oQ+cfpChiY4N8bQPmKmJ/pPxjo13jqd+fjCTBKJMBocivyZcRCjCF6b7P9KayVFmr9IlnU9C5JOrpFWjlwWsEY8VtTNc0zlK15j9ugk/fmTnNPEGSsnL4BS3qBidiHD9wAAAAASUVORK5CYII=',
+  chat_attachment_unknown:
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADXSURBVHgB7ZU9DoIwGIZfCBMuuhgSU4SDMHgSjyLeQI7g5mTiCRy4BzVBXWWREawLEWj6J4uGZyF8ffmetDQt8OtY3QK93inqOpB9SLMMlo14FUVbUc7uVRSaN9EK8TlNN9ASaCKTfC2QSQYRiCTGAsdxuJJeDoYQ31fKDbZEo8CY1lFxOJ4oKwXQYEkIPG/evIdk0erZmYFe8zfPshSOjz9ZV1BfoMnEdYXj/Qsnvz3YYwozCraLZp8F3hIlMKRCte/WLF6Q5vmOuddQn0nB2ichITH+jhcl6jxZhl+rzAAAAABJRU5ErkJggg==',
 };
 
 export default icons;

package/template/agora-rn-uikit/src/Controls/Local/EndCall.tsx

@@ -3,22 +3,24 @@ import PropsContext from '../../Contexts/PropsContext';
 import RtcContext from '../../Contexts/RtcContext';
 import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
+import DispatchContext from '../../Contexts/DispatchContext';
 
-interface EndCallProps{
-  btnText?: string
+interface EndCallProps {
+  btnText?: string;
 }
 
 function EndCall(props?: EndCallProps) {
   const {styleProps} = useContext(PropsContext);
   const {localBtnStyles} = styleProps || {};
   const {endCall} = localBtnStyles || {};
-  const {dispatch} = useContext(RtcContext);
+  const {dispatch} = useContext(DispatchContext);
 
   return (
     <BtnTemplate
+      //@ts-ignore
       name={'callEnd'}
       btnText={props?.btnText || 'Hang Up'}
-      color='#FD0845'
+      color="#FD0845"
       style={{...styles.endCall, ...(endCall as object)}}
       onPress={() =>
         dispatch({

package/template/agora-rn-uikit/src/Controls/Local/FullScreen.tsx

@@ -3,14 +3,16 @@ import PropsContext from '../../Contexts/PropsContext';
 import RtcContext from '../../Contexts/RtcContext';
 import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
+import DispatchContext from '../../Contexts/DispatchContext';
 
 function FullScreen() {
   const {styleProps} = useContext(PropsContext);
   const {localBtnStyles} = styleProps || {};
   const {fullScreen} = localBtnStyles || {};
-  const {dispatch} = useContext(RtcContext);
+  const {dispatch} = useContext(DispatchContext);
   return (
     <BtnTemplate
+      //@ts-ignore
       name={'fullscreen'}
       style={{...styles.localBtn, ...(fullScreen as object)}}
       onPress={() => {

package/template/agora-rn-uikit/src/Controls/Local/LocalAudioMute.tsx

@@ -22,6 +22,7 @@ function LocalAudioMute(props: LocalAudioMuteProps) {
 
   return (
     <BtnTemplate
+      //@ts-ignore
       name={local.audio === ToggleState.enabled ? 'mic' : 'micOff'}
       btnText={btnText}
       style={{

package/template/agora-rn-uikit/src/Controls/Local/LocalVideoMute.tsx

@@ -23,6 +23,7 @@ function LocalVideoMute(props: LocalVideoMuteProps) {
 
   return (
     <BtnTemplate
+      //@ts-ignore
       name={local.video === ToggleState.enabled ? 'videocam' : 'videocamOff'}
       btnText={btnText}
       style={{

package/template/agora-rn-uikit/src/Controls/Local/SwitchCamera.tsx

@@ -17,6 +17,7 @@ function SwitchCamera(props?: Props) {
   const local = useContext(LocalContext);
   return (
     <BtnTemplate
+      //@ts-ignore
       name={'switchCamera'}
       style={{...styles.localBtn, ...(switchCamera as object)}}
       btnText={props?.btnText || 'Switch'}

package/template/agora-rn-uikit/src/Controls/Remote/RemoteAudioMute.tsx

@@ -20,6 +20,7 @@ const RemoteAudioMute: React.FC<RemoteAudioMuteInterface> = (props) => {
   const localUid = useLocalUid();
   return props.user.uid !== localUid ? (
     <BtnTemplate
+      //@ts-ignore
       name={props.user.audio === ToggleState.enabled ? 'mic' : 'micOff'}
       style={{...styles.leftRemoteBtn, ...(muteRemoteAudio as object)}}
       onPress={() => {

package/template/agora-rn-uikit/src/Controls/Remote/RemoteSwap.tsx

@@ -4,19 +4,21 @@ import BtnTemplate from '../BtnTemplate';
 import styles from '../../Style';
 import PropsContext from '../../Contexts/PropsContext';
 import useLocalUid from '../../Utils/useLocalUid';
+import DispatchContext from '../../Contexts/DispatchContext';
 
 interface RemoteSwapInterface {
   uid: UidType;
 }
 
 const RemoteSwap: React.FC<RemoteSwapInterface> = (props) => {
-  const {dispatch} = useContext(RtcContext);
+  const {dispatch} = useContext(DispatchContext);
   const {styleProps} = useContext(PropsContext);
   const {remoteBtnStyles} = styleProps || {};
   const {remoteSwap} = remoteBtnStyles || {};
   const localUid = useLocalUid();
   return (
     <BtnTemplate
+      //@ts-ignore
       name={'remoteSwap'}
       style={
         props.uid !== localUid

package/template/agora-rn-uikit/src/Controls/Remote/RemoteVideoMute.tsx

@@ -21,6 +21,7 @@ const RemoteVideoMute: React.FC<RemoteVideoMuteInterface> = (props) => {
   const localUid = useLocalUid();
   return props.user.uid !== localUid ? (
     <BtnTemplate
+      //@ts-ignore
       name={
         props.user.video === ToggleState.enabled ? 'videocam' : 'videocamOff'
       }

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

@@ -0,0 +1,30 @@
+import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
+
+export default function ActiveSpeaker(
+  state: ContentStateInterface,
+  action: ActionType<'ActiveSpeaker'>,
+) {
+  let localActiveUids = [...state.activeUids];
+  let pinnedUid = state.pinnedUid;
+  let secondaryPinnedUid = state.secondaryPinnedUid;
+  const activeSpeaker =
+    action?.value && action.value?.length ? action.value[0] : 0;
+  if (activeSpeaker) {
+    const filteredData = localActiveUids?.filter((i) => i !== activeSpeaker);
+    const [first, second, ...remaining] = filteredData;
+    if (pinnedUid && secondaryPinnedUid) {
+      localActiveUids = [first, second, activeSpeaker, ...remaining];
+    } else if (pinnedUid && !secondaryPinnedUid) {
+      localActiveUids = [first, activeSpeaker, second, ...remaining];
+    } else if (!pinnedUid && secondaryPinnedUid) {
+      localActiveUids = [activeSpeaker, second, first, ...remaining];
+    } else {
+      localActiveUids = [activeSpeaker, first, second, ...remaining];
+    }
+    console.log('debugging activeSpeaker ', activeSpeaker, localActiveUids);
+  }
+  return {
+    ...state,
+    activeUids: localActiveUids,
+  };
+}

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

@@ -9,12 +9,14 @@ export default function LocalMuteAudio(
   action: ActionType<'LocalMuteAudio'>,
   localUid: UidType,
 ) {
-  let stateUpdate: ContentStateInterface = {
+  let stateUpdate: Partial<ContentStateInterface> = {
     defaultContent: {
       ...state.defaultContent,
       [localUid]: {
         ...state.defaultContent[localUid],
         audio: action.value[0],
+        localAudioForceDisabled:
+          action?.value?.length === 2 ? action.value[1] : false,
       },
     },
     activeUids: [...state.activeUids],

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

@@ -9,12 +9,14 @@ export default function LocalMuteVideo(
   action: ActionType<'LocalMuteVideo'>,
   localUid: UidType,
 ) {
-  let stateUpdate: ContentStateInterface = {
+  let stateUpdate: Partial<ContentStateInterface> = {
     defaultContent: {
       ...state.defaultContent,
       [localUid]: {
         ...state.defaultContent[localUid],
         video: action.value[0],
+        localVideoForceDisabled:
+          action?.value?.length === 2 ? action.value[1] : false,
       },
     },
     activeUids: [...state.activeUids],

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

@@ -9,7 +9,7 @@ export default function LocalPermissionState(
   action: ActionType<'LocalPermissionState'>,
   localUid: UidType,
 ) {
-  let stateUpdate: ContentStateInterface = {
+  let stateUpdate: Partial<ContentStateInterface> = {
     defaultContent: {
       ...state.defaultContent,
       [localUid]: {

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

@@ -12,11 +12,11 @@ export default function RemoteAudioStateChanged(
     audioState = ToggleState.disabled;
   }
 
-  const stateUpdate: ContentStateInterface = {
+  const stateUpdate: Partial<ContentStateInterface> = {
     defaultContent: {
       ...state.defaultContent,
-      [action.value[0]]: {
-        ...state.defaultContent[action.value[0]],
+      [action.value[0] as unknown as number]: {
+        ...state.defaultContent[action.value[0] as unknown as number],
         audio: audioState,
       },
     },

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

@@ -12,15 +12,16 @@ export default function RemoteVideoStateChanged(
     videoState = ToggleState.enabled;
   }
 
-  const stateUpdate: ContentStateInterface = {
+  const stateUpdate: Partial<ContentStateInterface> = {
     defaultContent: {
       ...state.defaultContent,
-      [action.value[0]]: {
-        ...state.defaultContent[action.value[0]],
+      [action.value[0] as unknown as number]: {
+        ...state.defaultContent[action.value[0] as unknown as number],
         video:
+          //@ts-ignore
           videoState !== undefined
             ? videoState
-            : state.defaultContent[action.value[0]].video,
+            : state.defaultContent[action.value[0] as unknown as number].video,
       },
     },
     activeUids: [...state.activeUids],

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

@@ -11,7 +11,7 @@ export default function UpdateDualStreamMode(
 ) {
   const newMode = action.value[0];
   let defaultContent = {...state.defaultContent};
-  let stateUpdate: ContentStateInterface;
+  let stateUpdate: Partial<ContentStateInterface>;
   const setHighStreamType = (uid: UidType) => {
     defaultContent[uid].streamType = 'high';
   };

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

@@ -17,14 +17,17 @@ export default function UserJoined(
   let typeData = {
     type: 'rtc',
   };
-  if (state.defaultContent[newUid] && 'type' in state.defaultContent[newUid]) {
-    typeData.type = state.defaultContent[newUid].type;
+  if (
+    state.defaultContent[newUid as unknown as number] &&
+    'type' in state.defaultContent[newUid as unknown as number]
+  ) {
+    typeData.type = state.defaultContent[newUid as unknown as number].type;
   }
 
   let defaultContent: ContentStateInterface['defaultContent'] = {
     ...state.defaultContent,
-    [newUid]: {
-      ...state.defaultContent[newUid],
+    [newUid as unknown as number]: {
+      ...state.defaultContent[newUid as unknown as number],
       uid: newUid,
       audio: ToggleState.disabled,
       video: ToggleState.disabled,
@@ -40,7 +43,7 @@ export default function UserJoined(
     //Only one remote and local is maximized
     //Change stream type to high if dualStreaMode is DYNAMIC
     if (dualStreamMode === DualStreamMode.DYNAMIC) {
-      defaultContent[newUid].streamType = 'high';
+      defaultContent[newUid as unknown as number].streamType = 'high';
     }
     //Swap render positions
     stateUpdate = {

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

@@ -4,7 +4,7 @@ export default function UserMuteRemoteAudio(
   state: ContentStateInterface,
   action: ActionType<'UserMuteRemoteAudio'>,
 ) {
-  let stateUpdate: ContentStateInterface = {
+  let stateUpdate: Partial<ContentStateInterface> = {
     defaultContent: {
       ...state.defaultContent,
       [action.value[0]]: {

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

@@ -4,7 +4,7 @@ export default function UserMuteRemoteVideo(
   state: ContentStateInterface,
   action: ActionType<'UserMuteRemoteVideo'>,
 ) {
-  let stateUpdate: ContentStateInterface = {
+  let stateUpdate: Partial<ContentStateInterface> = {
     defaultContent: {
       ...state.defaultContent,
       [action.value[0]]: {

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

@@ -15,7 +15,7 @@ export default function UserOffline(
   const updatedActiveUids = [...state.activeUids].filter(
     (uid) => uid !== action.value[0],
   );
-  const stateUpdate: ContentStateInterface = {
+  const stateUpdate: Partial<ContentStateInterface> = {
     defaultContent: state.defaultContent,
     activeUids: updatedActiveUids,
   };

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

@@ -4,8 +4,25 @@ export default function UserPin(
   state: ContentStateInterface,
   action: ActionType<'UserPin'>,
 ) {
+  let localActiveUids = [...state.activeUids];
+  let secondaryPinnedUid = state.secondaryPinnedUid;
+  const pinnedUid =
+    action?.value && action.value?.length ? action.value[0] : '';
+  if (pinnedUid) {
+    const filteredData = localActiveUids?.filter(
+      (i) => i !== pinnedUid && i !== secondaryPinnedUid,
+    );
+    if (secondaryPinnedUid && secondaryPinnedUid !== pinnedUid) {
+      filteredData.unshift(secondaryPinnedUid);
+    }
+    filteredData.unshift(pinnedUid);
+    localActiveUids = filteredData;
+  }
   return {
     ...state,
-    pinnedUid: action?.value && action.value?.length ? action.value[0] : '',
+    pinnedUid,
+    secondaryPinnedUid:
+      pinnedUid === secondaryPinnedUid ? 0 : secondaryPinnedUid,
+    activeUids: localActiveUids,
   };
 }

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

@@ -0,0 +1,23 @@
+import {ActionType, ContentStateInterface} from '../Contexts/RtcContext';
+
+export default function UserSecondaryPin(
+  state: ContentStateInterface,
+  action: ActionType<'UserSecondaryPin'>,
+) {
+  let localActiveUids = [...state.activeUids];
+  const secondaryPinnedUid =
+    action?.value && action.value?.length ? action.value[0] : 0;
+  if (secondaryPinnedUid) {
+    const filteredData: any = localActiveUids?.filter(
+      (i) => i !== secondaryPinnedUid,
+    );
+    const [maxUid, ...minUids] = filteredData;
+    localActiveUids = [maxUid, secondaryPinnedUid, ...minUids];
+  }
+  return {
+    ...state,
+    secondaryPinnedUid,
+    pinnedUid: state?.pinnedUid === secondaryPinnedUid ? 0 : state?.pinnedUid,
+    activeUids: localActiveUids,
+  };
+}

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

@@ -9,3 +9,5 @@ export {default as LocalPermissionState} from './LocalPermissionState';
 export {default as RemoteAudioStateChanged} from './RemoteAudioStateChanged';
 export {default as RemoteVideoStateChanged} from './RemoteVideoStateChanged';
 export {default as UserPin} from './UserPin';
+export {default as UserSecondaryPin} from './UserSecondaryPin';
+export {default as ActiveSpeaker} from './ActiveSpeaker';