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

package/template/src/components/livestream/LiveStreamContext.tsx

@@ -1,4 +1,11 @@
-import React, {createContext, useContext, useState, useRef} from 'react';
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+} from 'react';
 import {StyleSheet} from 'react-native';
 import ChatContext, {controlMessageEnum} from '../ChatContext';
 import Toast from '../../../react-native-toast-message';
@@ -21,14 +28,65 @@ import {SidePanelType, useContent, useSidePanel} from 'customization-api';
 import TertiaryButton from '../../atoms/TertiaryButton';
 import PrimaryButton from '../../atoms/PrimaryButton';
 import {trimText} from '../../utils/common';
+import {useStringRef} from '../../utils/useString';
+import {
+  livestreamRequestAlreadyProcessed,
+  livestreamToastApprovalBtnText,
+  livestreamToastDenyBtnText,
+} from '../../language/default-labels/videoCallScreenLabels';
 
 const LiveStreamContext = createContext(null as unknown as liveStreamContext);
 
 export const LiveStreamContextConsumer = LiveStreamContext.Consumer;
 
-export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
-  props,
-) => {
+export const LiveStreamContextProvider: React.FC<
+  liveStreamPropsInterface
+> = props => {
+  const requestAlreadyProcessed = useStringRef(
+    livestreamRequestAlreadyProcessed,
+  );
+
+  const raiseHandRequestReceivedToastHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_RECEIVED.text1TranslationKey,
+  );
+  const raiseHandRequestReceivedToastSubHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_RECEIVED.text2TranslationKey,
+  );
+
+  const raiseHandRequestRecallToastHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_REQUEST_RECALL.text1TranslationKey,
+  );
+
+  const raiseHandRequestAcceptedToastHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_ACCEPTED.text1TranslationKey,
+  );
+  const raiseHandRequestAcceptedToastSubHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_ACCEPTED.text2TranslationKey,
+  );
+
+  const raiseHandRequestRejectedToastHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_REJECTED.text1TranslationKey,
+  );
+
+  const raiseHandApprovedRequestRecallToastHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_APPROVED_REQUEST_RECALL.text1TranslationKey,
+  );
+
+  const promoteAsCoHostToastHeading = useStringRef(
+    LSNotificationObject.PROMOTE_AS_CO_HOST.text1TranslationKey,
+  );
+
+  const raiseHandRequestToastHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_REQUEST.text1TranslationKey,
+  );
+  const raiseHandRequestToastSubHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_REQUEST.text2TranslationKey,
+  );
+
+  const raiseHandRequestRecallLocalToastHeading = useStringRef(
+    LSNotificationObject.RAISE_HAND_REQUEST_RECALL_LOCAL.text1TranslationKey,
+  );
+
   const screenshareContextInstance = useScreenshare();
   const screenshareContextInstanceRef = useRef<any>();
   screenshareContextInstanceRef.current = screenshareContextInstance;
@@ -76,6 +134,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
     const data = Object.keys(
       filterObject(
         defaultContent,
+        //@ts-ignore
         ([k, v]) => v?.type === 'rtc' && v.offline === true,
       ),
     );
@@ -112,6 +171,8 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
 
   const [isPendingRequestToReview, setPendingRequestToReview] = useState(false);
 
+  const allowToBePresenter = useStringRef(livestreamToastApprovalBtnText);
+  const deny = useStringRef(livestreamToastDenyBtnText);
   const showToast = (
     text: string,
     text2: string,
@@ -126,7 +187,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
         <PrimaryButton
           containerStyle={style.primaryBtn}
           textStyle={style.primaryBtnText}
-          text="ALLOW TO BE A PRESENTER"
+          text={allowToBePresenter?.current()}
           onPress={() => {
             hostApprovesRequestOfUID(uid);
             Toast.hide();
@@ -136,7 +197,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
       btns.secondaryBtn = (
         <TertiaryButton
           containerStyle={style.secondaryBtn}
-          text="DENY"
+          text={deny?.current()}
           onPress={() => {
             hostRejectsRequestOfUID(uid);
             Toast.hide();
@@ -149,6 +210,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
     }
 
     Toast.show({
+      leadingIconName: 'info',
       type: 'info',
       text1: text,
       text2: text2 ? text2 : null,
@@ -179,7 +241,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
   ) => {
     if (userUID && !isEmptyObject(payload)) {
       const userId = `${userUID}`;
-      setRaiseHandList((oldRaisedHandList) => ({
+      setRaiseHandList(oldRaisedHandList => ({
         ...oldRaisedHandList,
         [userId]: {
           raised: payload?.raised || RaiseHandValue.FALSE,
@@ -218,9 +280,9 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
           PersistanceLevel.Sender,
         );
         //update local cohost state
-        setCoHostUids((prevState) => {
+        setCoHostUids(prevState => {
           return [
-            ...prevState.filter((i) => i !== parseInt(localUidRef.current)),
+            ...prevState.filter(i => i !== parseInt(localUidRef.current)),
           ];
         });
         // Audience notfies all users that co-host permission removed
@@ -249,7 +311,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
           PersistanceLevel.Sender,
         );
         //update local cohost state
-        setCoHostUids((prevState) => {
+        setCoHostUids(prevState => {
           return [...prevState, localUidRef.current];
         });
         // Audience notfies all users that co-host has joined
@@ -299,8 +361,8 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
 
   /** ******* SETTING UP ROLES BEGINS ******* */
   React.useEffect(() => {
-    events.on(EventNames.ROLE_ATTRIBUTE, (data) => {
-      setRaiseHandList((prevState) => {
+    const unsubRoleAttribute = events.on(EventNames.ROLE_ATTRIBUTE, data => {
+      setRaiseHandList(prevState => {
         return {
           ...prevState,
           [data.sender]: {
@@ -313,6 +375,10 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
         };
       });
     });
+
+    return () => {
+      unsubRoleAttribute();
+    };
   }, []);
 
   React.useEffect(() => {
@@ -324,7 +390,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
       ),
       PersistanceLevel.Sender,
     );
-    setRaiseHandList((prevState) => {
+    setRaiseHandList(prevState => {
       return {
         ...prevState,
         [localUid]: {
@@ -342,178 +408,200 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
 
   React.useEffect(() => {
     /** ********************** HOST EVENTS SECTION BEGINS ********************** */
-    events.on(EventNames.RAISED_ATTRIBUTE, (data) => {
-      if (!isHost) return;
-      const payload = JSON.parse(data.payload);
-      const action = payload.action;
-      const value = payload.value;
-      const isProcessed = payload?.isProcessed || false;
-
-      switch (action) {
-        // 1. Host can receive raise hand request with true or false value
-        case LiveStreamControlMessageEnum.raiseHandRequest:
-          switch (value) {
-            case RaiseHandValue.TRUE:
-              // Step 1: Show notifications
-              if (
-                payload.ts > rtmInitTimstamp &&
-                sidePanelRef.current !== SidePanelType.Participants
-              ) {
-                showToast(
-                  `${trimText(getAttendeeName(data.sender))} ${
-                    LSNotificationObject.RAISE_HAND_RECEIVED.text1
-                  }`,
-                  LSNotificationObject.RAISE_HAND_RECEIVED.text2,
-                  data.sender,
-                  data.ts,
-                );
-              }
-              // 2. All Hosts in channel update their raised state to "true" when attendee raise their hand
-              addOrUpdateLiveStreamRequest(data.sender, {
-                ts: data.ts,
-                raised: RaiseHandValue.TRUE,
-                role: ClientRole.Audience,
-                isProcessed: isProcessed,
-              });
-              break;
-            case RaiseHandValue.FALSE:
-              // Step 1: Show notifications
-              if (
-                payload.ts > rtmInitTimstamp &&
-                sidePanelRef.current !== SidePanelType.Participants
-              ) {
-                showToast(
-                  `${trimText(getAttendeeName(data.sender))} ${
-                    LSNotificationObject.RAISE_HAND_REQUEST_RECALL.text1
-                  }`,
-                  LSNotificationObject.RAISE_HAND_REQUEST_RECALL.text2,
-                );
-              }
-              // 2. All Hosts in channel update raised state to "false" when attendee recalls their request
-              addOrUpdateLiveStreamRequest(data.sender, {
-                ts: data.ts,
-                raised: RaiseHandValue.FALSE,
-                role: ClientRole.Audience,
-                isProcessed: isProcessed,
-              });
-            default:
-              break;
-          }
-          break;
-        // 2. All Hosts in channel gets notified when an attendee's request gets approved or rejected
-        case LiveStreamControlMessageEnum.notifyHostsInChannel:
-          if (!isHost) return;
-          switch (value) {
-            case RaiseHandValue.TRUE:
-              addOrUpdateLiveStreamRequest(data.sender, {
-                ts: data.ts,
-                raised: RaiseHandValue.TRUE,
-                role: ClientRole.Broadcaster,
-                isProcessed: isProcessed,
-              });
-              break;
-            case RaiseHandValue.FALSE:
-              addOrUpdateLiveStreamRequest(data.sender, {
-                ts: data.ts,
-                raised: RaiseHandValue.FALSE,
-                role: ClientRole.Audience,
-                isProcessed: isProcessed,
-              });
-              break;
-            default:
-              break;
-          }
-          break;
-        default:
-          break;
-      }
-    });
+    const unsubRaisedAttribute = events.on(
+      EventNames.RAISED_ATTRIBUTE,
+      data => {
+        if (!isHost) return;
+        const payload = JSON.parse(data.payload);
+        const action = payload.action;
+        const value = payload.value;
+        const isProcessed = payload?.isProcessed || false;
+
+        switch (action) {
+          // 1. Host can receive raise hand request with true or false value
+          case LiveStreamControlMessageEnum.raiseHandRequest:
+            switch (value) {
+              case RaiseHandValue.TRUE:
+                // Step 1: Show notifications
+                if (
+                  payload.ts > rtmInitTimstamp &&
+                  sidePanelRef.current !== SidePanelType.Participants
+                ) {
+                  showToast(
+                    raiseHandRequestReceivedToastHeading?.current(
+                      trimText(getAttendeeName(data.sender)),
+                    ),
+                    raiseHandRequestReceivedToastSubHeading?.current(),
+                    data.sender,
+                    data.ts,
+                  );
+                }
+                // 2. All Hosts in channel update their raised state to "true" when attendee raise their hand
+                addOrUpdateLiveStreamRequest(data.sender, {
+                  ts: data.ts,
+                  raised: RaiseHandValue.TRUE,
+                  role: ClientRole.Audience,
+                  isProcessed: isProcessed,
+                });
+                break;
+              case RaiseHandValue.FALSE:
+                // Step 1: Show notifications
+                if (
+                  payload.ts > rtmInitTimstamp &&
+                  sidePanelRef.current !== SidePanelType.Participants
+                ) {
+                  showToast(
+                    raiseHandRequestRecallToastHeading?.current(
+                      trimText(getAttendeeName(data.sender)),
+                    ),
+                    null,
+                  );
+                }
+                // 2. All Hosts in channel update raised state to "false" when attendee recalls their request
+                addOrUpdateLiveStreamRequest(data.sender, {
+                  ts: data.ts,
+                  raised: RaiseHandValue.FALSE,
+                  role: ClientRole.Audience,
+                  isProcessed: isProcessed,
+                });
+              default:
+                break;
+            }
+            break;
+          // 2. All Hosts in channel gets notified when an attendee's request gets approved or rejected
+          case LiveStreamControlMessageEnum.notifyHostsInChannel:
+            if (!isHost) return;
+            switch (value) {
+              case RaiseHandValue.TRUE:
+                addOrUpdateLiveStreamRequest(data.sender, {
+                  ts: data.ts,
+                  raised: RaiseHandValue.TRUE,
+                  role: ClientRole.Broadcaster,
+                  isProcessed: isProcessed,
+                });
+                break;
+              case RaiseHandValue.FALSE:
+                addOrUpdateLiveStreamRequest(data.sender, {
+                  ts: data.ts,
+                  raised: RaiseHandValue.FALSE,
+                  role: ClientRole.Audience,
+                  isProcessed: isProcessed,
+                });
+                break;
+              default:
+                break;
+            }
+            break;
+          default:
+            break;
+        }
+      },
+    );
     /** ********************** HOST EVENTS SECTION ENDS ********************** */
 
     /** ********************** AUDIENCE EVENTS SECTION BEGINS ********************** */
     // 1. Audience receives this when the request is accepted by host
-    events.on(LiveStreamControlMessageEnum.raiseHandRequestAccepted, (data) => {
-      if (raiseHandList[localUidRef.current]?.raised === RaiseHandValue.FALSE)
-        return;
-      showToast(
-        LSNotificationObject.RAISE_HAND_ACCEPTED.text1,
-        LSNotificationObject.RAISE_HAND_ACCEPTED.text2,
-      );
-      // Promote user's privileges to host
-      changeClientRoleTo(ClientRole.Broadcaster);
-      // Audience updates its local attributes and notfies all host when request is approved
-      UpdtLocStateAndBCastAttr(ClientRole.Broadcaster, data.ts);
-    });
+    const unsubRaiseHandReqAcpt = events.on(
+      LiveStreamControlMessageEnum.raiseHandRequestAccepted,
+      data => {
+        if (raiseHandList[localUidRef.current]?.raised === RaiseHandValue.FALSE)
+          return;
+        showToast(
+          raiseHandRequestAcceptedToastHeading?.current(),
+          raiseHandRequestAcceptedToastSubHeading?.current(),
+        );
+        // Promote user's privileges to host
+        changeClientRoleTo(ClientRole.Broadcaster);
+        // Audience updates its local attributes and notfies all host when request is approved
+        UpdtLocStateAndBCastAttr(ClientRole.Broadcaster, data.ts);
+      },
+    );
     /** 2. Audience receives this when the request is rejected by host
      * 2.a  Audience receives this when the request is rejected by host which is not yet approved
      * 2.b  Audience receives this when the request when is demoted by the host
      */
-    events.on(LiveStreamControlMessageEnum.raiseHandRequestRejected, (data) => {
-      /** 2.a */
-      if (
-        raiseHandListRef.current[localUidRef.current].role ==
-        ClientRole.Audience
-      ) {
-        showToast(
-          LSNotificationObject.RAISE_HAND_REJECTED.text1,
-          LSNotificationObject.RAISE_HAND_REJECTED.text2,
-        );
-      } else if (
-        raiseHandListRef.current[localUidRef.current].role ==
-        ClientRole.Broadcaster
-      ) {
-        /** 2.b */
-        showToast(
-          LSNotificationObject.RAISE_HAND_APPROVED_REQUEST_RECALL.text1,
-          LSNotificationObject.RAISE_HAND_APPROVED_REQUEST_RECALL.text2,
-        );
-        screenshareContextInstanceRef?.current?.stopUserScreenShare(); // This will not exist on ios
-
-        // Demote user's privileges to audience
-        changeClientRoleTo(ClientRole.Audience);
-      }
-      // Audience updates its local attributes and notfies all host when demoted/request rejected
-      UpdtLocStateAndBCastAttr(ClientRole.Audience, data.ts);
-    });
+    const unsubRaiseHandReqRej = events.on(
+      LiveStreamControlMessageEnum.raiseHandRequestRejected,
+      data => {
+        /** 2.a */
+        if (
+          raiseHandListRef.current[localUidRef.current].role ==
+          ClientRole.Audience
+        ) {
+          showToast(raiseHandRequestRejectedToastHeading?.current(), null);
+        } else if (
+          raiseHandListRef.current[localUidRef.current].role ==
+          ClientRole.Broadcaster
+        ) {
+          /** 2.b */
+          showToast(
+            raiseHandApprovedRequestRecallToastHeading?.current(),
+            null,
+          );
+          screenshareContextInstanceRef?.current?.stopUserScreenShare(); // This will not exist on ios
+
+          // Demote user's privileges to audience
+          changeClientRoleTo(ClientRole.Audience);
+        }
+        // Audience updates its local attributes and notfies all host when demoted/request rejected
+        UpdtLocStateAndBCastAttr(ClientRole.Audience, data.ts);
+      },
+    );
     // 3. Audience when receives kickUser notifies all host when is kicked out
-    events.on(controlMessageEnum.kickUser, (data) => {
+    const unsubKickUser = events.on(controlMessageEnum.kickUser, data => {
       // Audience updates its local attributes and notfies all host when they(audience) are kicked out
       UpdtLocStateAndBCastAttr(ClientRole.Audience, data.ts);
     });
     // 4. Host promote audience as co-host
-    events.on(LiveStreamControlMessageEnum.promoteAsCoHost, (data) => {
-      showToast(
-        LSNotificationObject.PROMOTE_AS_CO_HOST.text1,
-        LSNotificationObject.PROMOTE_AS_CO_HOST.text2,
-      );
-      // Promote user's privileges to host
-      changeClientRoleTo(ClientRole.Broadcaster);
-      // Audience updates its local attributes and notfies all host when request is approved
-      UpdtLocStateAndBCastAttr(ClientRole.Broadcaster, data.ts);
-    });
+    const unsubPromoteAsCoHost = events.on(
+      LiveStreamControlMessageEnum.promoteAsCoHost,
+      data => {
+        showToast(promoteAsCoHostToastHeading.current(), null);
+        // Promote user's privileges to host
+        changeClientRoleTo(ClientRole.Broadcaster);
+        // Audience updates its local attributes and notfies all host when request is approved
+        UpdtLocStateAndBCastAttr(ClientRole.Broadcaster, data.ts);
+      },
+    );
     // 4. New co-host has joined
-    events.on(LiveStreamControlMessageEnum.coHostJoined, ({payload}) => {
-      try {
-        const data = JSON.parse(payload);
-        if (data?.uid) {
-          setCoHostUids((prevState) => {
-            return [...prevState, parseInt(data.uid)];
-          });
-        }
-      } catch (error) {}
-    });
+    const unsubCoHostJoined = events.on(
+      LiveStreamControlMessageEnum.coHostJoined,
+      ({payload}) => {
+        try {
+          const data = JSON.parse(payload);
+          if (data?.uid) {
+            setCoHostUids(prevState => {
+              return [...prevState, parseInt(data.uid)];
+            });
+          }
+        } catch (error) {}
+      },
+    );
     // 5. Co-host removed
-    events.on(LiveStreamControlMessageEnum.coHostRemoved, ({payload}) => {
-      try {
-        const data = JSON.parse(payload);
-        if (data?.uid) {
-          setCoHostUids((prevState) => {
-            return [...prevState.filter((i) => i !== parseInt(data.uid))];
-          });
-        }
-      } catch (error) {}
-    });
+    const unsubCoHostRemoved = events.on(
+      LiveStreamControlMessageEnum.coHostRemoved,
+      ({payload}) => {
+        try {
+          const data = JSON.parse(payload);
+          if (data?.uid) {
+            setCoHostUids(prevState => {
+              return [...prevState.filter(i => i !== parseInt(data.uid))];
+            });
+          }
+        } catch (error) {}
+      },
+    );
     /** ********************** AUDIENCE EVENTS SECTION ENDS ********************** */
+
+    return () => {
+      unsubRaisedAttribute();
+      unsubRaiseHandReqAcpt();
+      unsubRaiseHandReqRej();
+      unsubKickUser();
+      unsubPromoteAsCoHost();
+      unsubCoHostJoined();
+      unsubCoHostRemoved();
+    };
   }, []);
 
   /** ******* EVENT LISTENERS SECTION ENDS ******* */
@@ -540,7 +628,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
     } else {
       Toast.hide();
       setTimeout(() => {
-        showToast('Request already processed.', null);
+        showToast(requestAlreadyProcessed?.current(), null);
       });
     }
   };
@@ -561,7 +649,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
     } else {
       Toast.hide();
       setTimeout(() => {
-        showToast('Request already processed.', null);
+        showToast(requestAlreadyProcessed?.current(), null);
       });
     }
   };
@@ -590,8 +678,8 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
     if (raiseHandList[localUidRef.current]?.raised === RaiseHandValue.TRUE)
       return;
     showToast(
-      LSNotificationObject.RAISE_HAND_REQUEST.text1,
-      LSNotificationObject.RAISE_HAND_REQUEST.text2,
+      raiseHandRequestToastHeading?.current(),
+      raiseHandRequestToastSubHeading?.current(),
     );
     events.send(
       EventNames.RAISED_ATTRIBUTE,
@@ -638,10 +726,7 @@ export const LiveStreamContextProvider: React.FC<liveStreamPropsInterface> = (
       PersistanceLevel.Sender,
     );
     UpdtLocStateAndBCastAttr(ClientRole.Audience, new Date().getTime());
-    showToast(
-      LSNotificationObject.RAISE_HAND_REQUEST_RECALL_LOCAL.text1,
-      LSNotificationObject.RAISE_HAND_REQUEST_RECALL_LOCAL.text2,
-    );
+    showToast(raiseHandRequestRecallLocalToastHeading?.current(), null);
   };
 
   /** ******* AUDIENCE CONTROLS SECTION ENDS ******* */

package/template/src/components/livestream/Types.ts

@@ -1,4 +1,5 @@
 // DECLARE ENUMS & CONTANTS
+import {TextDataInterface} from '../../language/default-labels';
 import {ClientRole} from '../../../agora-rn-uikit';
 
 export enum RaiseHandValue {
@@ -20,6 +21,19 @@ export interface raiseHandItemInterface {
 }
 
 import {UidType} from '../../../agora-rn-uikit';
+import {
+  livestreamPromoteAsCoHostToastHeading,
+  livestreamRaiseHandApprovedRequestRecallToastHeading,
+  livestreamRaiseHandRequestAcceptedToastHeading,
+  livestreamRaiseHandRequestAcceptedToastSubHeading,
+  livestreamRaiseHandRequestRecallLocalToastHeading,
+  livestreamRaiseHandRequestRecallToastHeading,
+  livestreamRaiseHandRequestReceivedToastHeading,
+  livestreamRaiseHandRequestReceivedToastSubHeading,
+  livestreamRaiseHandRequestRejectedToastHeading,
+  livestreamRaiseHandRequestToastHeading,
+  livestreamRaiseHandRequestToastSubHeading,
+} from '../../language/default-labels/videoCallScreenLabels';
 
 export enum requestStatus {
   AwaitingAction = 'AWAITING_ACTION',
@@ -47,40 +61,42 @@ export enum LiveStreamControlMessageEnum {
   coHostJoined = 'CO_HOST_JOINED',
   coHostRemoved = 'CO_HOST_REMOVED',
 }
+interface LSNotificationObjectInterface {
+  [key: string]: {
+    //text1: string;
+    //text2: string | null;
 
-export const LSNotificationObject = {
+    text1TranslationKey: keyof TextDataInterface;
+    text2TranslationKey?: keyof TextDataInterface;
+  };
+}
+export const LSNotificationObject: LSNotificationObjectInterface = {
   [LiveStreamControlMessageEnum.raiseHandRequest]: {
-    text1: 'You’ve raised your hand.',
-    text2: 'Waiting for host to approve the request',
+    text1TranslationKey: livestreamRaiseHandRequestToastHeading,
+    text2TranslationKey: livestreamRaiseHandRequestToastSubHeading,
   },
   [LiveStreamControlMessageEnum.raiseHandRequestReceived]: {
-    text1: 'has raised their hand to be a Presenter',
-    text2:
-      'Once approved they will be able to speak, share their video and present during this call.',
+    text1TranslationKey: livestreamRaiseHandRequestReceivedToastHeading,
+    text2TranslationKey: livestreamRaiseHandRequestReceivedToastSubHeading,
   },
   [LiveStreamControlMessageEnum.raiseHandRequestAccepted]: {
-    text1: 'Host has approved your request.',
-    text2: 'You are now a Presenter',
+    text1TranslationKey: livestreamRaiseHandRequestAcceptedToastHeading,
+    text2TranslationKey: livestreamRaiseHandRequestAcceptedToastSubHeading,
   },
   [LiveStreamControlMessageEnum.raiseHandRequestRejected]: {
-    text1: 'Your request was rejected by the host',
-    text2: null,
+    text1TranslationKey: livestreamRaiseHandRequestRejectedToastHeading,
   },
   [LiveStreamControlMessageEnum.raiseHandRequestRecall]: {
-    text1: 'has lowered their hand',
-    text2: null,
+    text1TranslationKey: livestreamRaiseHandRequestRecallToastHeading,
   },
   [LiveStreamControlMessageEnum.raiseHandRequestRecallLocal]: {
-    text1: 'You’ve lowered your hand.',
-    text2: null,
+    text1TranslationKey: livestreamRaiseHandRequestRecallLocalToastHeading,
   },
   [LiveStreamControlMessageEnum.raiseHandApprovedRequestRecall]: {
-    text1: 'Host has revoked streaming permissions.',
-    text2: null,
+    text1TranslationKey: livestreamRaiseHandApprovedRequestRecallToastHeading,
   },
   [LiveStreamControlMessageEnum.promoteAsCoHost]: {
-    text1: 'Host promoted you as a Presenter',
-    text2: null,
+    text1TranslationKey: livestreamPromoteAsCoHostToastHeading,
   },
 };