agora-appbuilder-core 3.0.8 → 4.0.0-api.0

package/template/src/theme/index.ts

@@ -0,0 +1,46 @@
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+
+const EmphasisOpacity = {
+  high: 1,
+  medium: 0.85,
+  disabled: 0.4,
+};
+const EmphasisPlus = {
+  high: '',
+  medium: hexadecimalTransparency['85%'],
+  disabled: hexadecimalTransparency['40%'],
+};
+const FontSize: {
+  extraLarge: 32;
+  large: 20;
+  medium: 18;
+  normal: 16;
+  small: 14;
+  tiny: 12;
+} = {
+  extraLarge: 32,
+  large: 20,
+  medium: 18,
+  normal: 16,
+  small: 14,
+  tiny: 12,
+};
+const FontFamily = {
+  sansPro: 'Source Sans Pro',
+};
+
+const BorderRadius: {small: 4; medium: 8; large: 12; extraLarge: 20} = {
+  small: 4,
+  medium: 8,
+  large: 12,
+  extraLarge: 20,
+};
+
+const ThemeConfig = {
+  EmphasisOpacity,
+  EmphasisPlus,
+  FontSize,
+  FontFamily,
+  BorderRadius,
+};
+export default ThemeConfig;

package/template/src/utils/PlatformWrapper.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {useState} from 'react';
+import {isWebInternal} from './common';
+
+const PlatformWrapper = ({children}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  return isWebInternal() ? (
+    <div
+      onMouseEnter={() => {
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}>
+      {children(isHovered)}
+    </div>
+  ) : (
+    <>{children(false)}</>
+  );
+};
+export default PlatformWrapper;

package/template/src/utils/SdkEvents.ts

@@ -9,24 +9,33 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-/**
- * @format
- */
-type callBackType = (...args: any[]) => void;
-import {userEventsMapInterface} from '../SDKAppWrapper';
+
 import {createNanoEvents} from 'nanoevents';
+import {UidType} from 'agora-rn-uikit';
+import {IRemoteTrack} from 'agora-rtc-sdk-ng';
 
-interface eventsMapInterface extends userEventsMapInterface {
-  addFpe?: callBackType;
-  addFpeInit?: () => void;
-  joinInit?: () => void;
-  joinMeetingWithPhrase?: (
-    phrase: string,
-    resolve: () => void,
-    reject: (e: Error) => void,
+export interface userEventsMapInterface {
+  leave: () => void;
+  create: (
+    hostPhrase: string,
+    attendeePhrase?: string,
+    pstnNumer?: {
+      number: string;
+      pin: string;
+    },
+  ) => void;
+  'ready-to-join': (meetingTitle: string, devices: MediaDeviceInfo[]) => void;
+  join: (
+    meetingTitle: string,
+    devices: MediaDeviceInfo[],
+    isHost: boolean,
   ) => void;
+  'rtc-user-published': (uid: UidType, trackType: 'audio' | 'video') => void;
+  'rtc-user-unpublished': (uid: UidType, trackType: 'audio' | 'video') => void;
+  'rtc-user-joined': (uid: UidType) => void;
+  'rtc-user-left': (uid: UidType) => void;
 }
 
-const SDKEvents = createNanoEvents<eventsMapInterface>();
+const SDKEvents = createNanoEvents<userEventsMapInterface>();
 
 export default SDKEvents;

package/template/src/utils/SdkMethodEvents.ts

@@ -0,0 +1,81 @@
+import {SdkMethodEvents} from '../SDKAppWrapper';
+import {createNanoEvents, Emitter} from 'nanoevents';
+
+type EventParameterHelper<T extends keyof SdkMethodEvents> = Parameters<
+  SdkMethodEvents[T]
+>;
+
+type EventReturnTypeHelper<T extends keyof SdkMethodEvents> = ReturnType<
+  SdkMethodEvents[T]
+>;
+
+type EventKeyNameHelper = keyof SdkMethodEvents;
+
+type injectAsync<T extends (...p: any) => any> = (
+  res: (result?: ReturnType<T> | PromiseLike<ReturnType<T>>) => void,
+  rej: (reason?: any) => void,
+  ...params: Parameters<T>
+) => void;
+
+export type _InternalSDKMethodEventsMap = {
+  [K in EventKeyNameHelper]: injectAsync<SdkMethodEvents[K]>;
+};
+
+type emitCacheType = {
+  [K in EventKeyNameHelper]?: Parameters<_InternalSDKMethodEventsMap[K]>;
+};
+
+type emitCacheEnabledType = {
+  [K in EventKeyNameHelper]?: boolean;
+};
+
+class SDKMethodEvents {
+  constructor() {
+    this.emitter = createNanoEvents();
+  }
+
+  emitter: Emitter;
+
+  emitCache: emitCacheType = {};
+  emitCacheDisabled: emitCacheEnabledType = {};
+
+  async emit<T extends EventKeyNameHelper>(
+    event: T,
+    ...params: EventParameterHelper<T>
+  ) {
+    if (this.emitCache[event]) {
+      throw new Error(`Event: ${event} already in callstack`);
+    }
+
+    const result = await new Promise<EventReturnTypeHelper<T>>((res, rej) => {
+      this.emitCache[event] = [res, rej, ...params] as any;
+      this.emitter.emit(event, res, rej, ...params);
+    })
+      .then((res) => {
+        delete this.emitCache[event];
+        return res;
+      })
+      .catch((e) => {
+        delete this.emitCache[event];
+        throw e;
+      });
+
+    return result;
+  }
+
+  on<T extends EventKeyNameHelper>(
+    event: T,
+    callback: _InternalSDKMethodEventsMap[T],
+  ) {
+    const unsub = this.emitter.on(event, callback);
+    if (this.emitCache[event] && !this.emitCacheDisabled[event]) {
+      this.emitter.emit(event, ...this.emitCache[event]);
+    }
+    this.emitCacheDisabled[event] = true;
+    return unsub;
+  }
+}
+
+const SDKMethodEventsManager = new SDKMethodEvents();
+
+export default SDKMethodEventsManager;

package/template/src/utils/common.tsx

@@ -10,11 +10,21 @@
 *********************************************
 */
 import React from 'react';
-import {Platform as ReactNativePlatform} from 'react-native';
+import {
+  Platform as ReactNativePlatform,
+  useWindowDimensions,
+} from 'react-native';
 import Platform from '../subComponents/Platform';
 
 import * as ReactIs from 'react-is';
 
+const trimText = (text: string, length: number = 25) => {
+  if (!text) {
+    return '';
+  }
+  return text?.substring(0, length) + (text?.length > length ? '...' : '');
+};
+const maxInputLimit = 60;
 const isValidReactComponent = <T,>(Component?: React.ComponentType<T>) =>
   Component && ReactIs.isValidElementType(Component) ? true : false;
 
@@ -57,10 +67,150 @@ const isIOS = () => Platform === 'native' && ReactNativePlatform.OS === 'ios';
 //@ts-ignore
 const isDesktop = () => Platform === 'electron';
 
+/**
+ * Checks whether the application is running on mobile device (user agent) and returns true/false.
+ * @returns function
+ */
+//@ts-ignore
+const isMobileUA = () => {
+  let check = false;
+  (function (a) {
+    if (
+      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
+        a,
+      ) ||
+      isAndroid() ||
+      isIOS()
+    )
+      check = true;
+  })(navigator?.userAgent || navigator?.vendor || window?.opera);
+  return check;
+};
+
 const isArray = (data: any[]) =>
   data && Array.isArray(data) && data.length ? true : false ? true : false;
+
+interface calculatedPositionProps {
+  px: number;
+  py: number;
+  localWidth: number;
+  localHeight: number;
+  globalWidth: number;
+  globalHeight: number;
+  extra?: {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+  };
+  popupWidth?: number;
+}
+const calculatePosition = (params: calculatedPositionProps) => {
+  const {
+    px,
+    py,
+    localWidth,
+    localHeight,
+    globalWidth,
+    globalHeight,
+    extra: {top = 0, bottom = 0, left = 0, right = 0} = {},
+    popupWidth = 220,
+  } = params;
+  //right hand side
+  if (px > globalWidth / 2) {
+    // if actionmenu overflow - horizontal
+    const w = globalWidth - px + popupWidth;
+    let minus = 0;
+    if (w > globalWidth) {
+      minus = w - globalWidth + 10;
+    }
+    //right bottom
+    if (py > globalHeight / 2) {
+      return {
+        bottom: globalHeight - py + bottom,
+        right: globalWidth - px - minus + right,
+      };
+    }
+    //right top
+    else {
+      return {
+        top: py + localHeight + top,
+        right: globalWidth - px - minus + right,
+      };
+    }
+  }
+  //left hand side
+  else {
+    // if actionmenu overflow - horizontal
+    const w = px + localWidth + popupWidth;
+    let minus = 0;
+    if (w > globalWidth) {
+      minus = w - globalWidth + 10;
+    }
+    //left bottom
+    if (py > globalHeight / 2) {
+      return {
+        bottom: globalHeight - py + bottom,
+        left: px + localWidth - minus + left,
+      };
+    }
+    //left top
+    else {
+      return {
+        top: py + localHeight + top + top,
+        left: px + localWidth - minus + left,
+      };
+    }
+  }
+};
+
+const BREAKPOINTS = {
+  xs: 360,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1330,
+  xxl: 1400,
+};
+
+const useIsDesktop = () => {
+  const {width, height} = useWindowDimensions();
+  return (from: 'default' | 'toolbar' | 'popup' = 'default') => {
+    if (from === 'default') {
+      return width > height ? true : false;
+    } else if (from === 'toolbar') {
+      return width > BREAKPOINTS.xl;
+    } else if (from === 'popup') {
+      return width > BREAKPOINTS.md;
+    }
+    return width >= BREAKPOINTS.xl;
+  };
+};
+const useIsSmall = () => {
+  const {width} = useWindowDimensions();
+  return (number = BREAKPOINTS.sm) => {
+    return width < number;
+  };
+};
+
+const useResponsive = () => {
+  const {width} = useWindowDimensions();
+  return (input: number) => {
+    if (width < BREAKPOINTS.xs) {
+      return input / 3;
+    } else if (width < BREAKPOINTS.md) {
+      return input / 2;
+    } else {
+      return input;
+    }
+  };
+};
 export {
+  useIsDesktop,
+  useIsSmall,
+  BREAKPOINTS,
   useHasBrandLogo,
+  isMobileUA,
   isAndroid,
   isIOS,
   isWebInternal,
@@ -69,4 +219,8 @@ export {
   shouldAuthenticate,
   isArray,
   isValidReactComponent,
+  maxInputLimit,
+  trimText,
+  calculatePosition,
+  useResponsive,
 };

package/template/src/utils/hexadecimalTransparency.ts

@@ -0,0 +1,108 @@
+/**
+ * Hexadecimal color code for transparency
+ * ref https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
+ */
+const hexadecimalTransparency = {
+  '100%': 'FF',
+  '99%': 'FC',
+  '98%': 'FA',
+  '97%': 'F7',
+  '96%': 'F5',
+  '95%': 'F2',
+  '94%': 'F0',
+  '93%': 'ED',
+  '92%': 'EB',
+  '91%': 'E8',
+  '90%': 'E6',
+  '89%': 'E3',
+  '88%': 'E0',
+  '87%': 'DE',
+  '86%': 'DB',
+  '85%': 'D9',
+  '84%': 'D6',
+  '83%': 'D4',
+  '82%': 'D1',
+  '81%': 'CF',
+  '80%': 'CC',
+  '79%': 'C9',
+  '78%': 'C7',
+  '77%': 'C4',
+  '76%': 'C2',
+  '75%': 'BF',
+  '74%': 'BD',
+  '73%': 'BA',
+  '72%': 'B8',
+  '71%': 'B5',
+  '70%': 'B3',
+  '69%': 'B0',
+  '68%': 'AD',
+  '67%': 'AB',
+  '66%': 'A8',
+  '65%': 'A6',
+  '64%': 'A3',
+  '63%': 'A1',
+  '62%': '9E',
+  '61%': '9C',
+  '60%': '99',
+  '59%': '96',
+  '58%': '94',
+  '57%': '91',
+  '56%': '8F',
+  '55%': '8C',
+  '54%': '8A',
+  '53%': '87',
+  '52%': '85',
+  '51%': '82',
+  '50%': '80',
+  '49%': '7D',
+  '48%': '7A',
+  '47%': '78',
+  '46%': '75',
+  '45%': '73',
+  '44%': '70',
+  '43%': '6E',
+  '42%': '6B',
+  '41%': '69',
+  '40%': '66',
+  '39%': '63',
+  '38%': '61',
+  '37%': '5E',
+  '36%': '5C',
+  '35%': '59',
+  '34%': '57',
+  '33%': '54',
+  '32%': '52',
+  '31%': '4F',
+  '30%': '4D',
+  '29%': '4A',
+  '28%': '47',
+  '27%': '45',
+  '26%': '42',
+  '25%': '40',
+  '24%': '3D',
+  '23%': '3B',
+  '22%': '38',
+  '21%': '36',
+  '20%': '33',
+  '19%': '30',
+  '18%': '2E',
+  '17%': '2B',
+  '16%': '29',
+  '15%': '26',
+  '14%': '24',
+  '13%': '21',
+  '12%': '1F',
+  '11%': '1C',
+  '10%': '1A',
+  '9%': '17',
+  '8%': '14',
+  '7%': '12',
+  '6%': '0F',
+  '5%': '0D',
+  '4%': '0A',
+  '3%': '08',
+  '2%': '05',
+  '1%': '03',
+  '0%': '00',
+};
+export default hexadecimalTransparency;

package/template/src/utils/index.tsx

@@ -55,3 +55,22 @@ export function isEmptyObject(obj: object) {
   }
   return true;
 }
+
+export const randomNameGenerator = (num: number) => {
+  let res = '';
+  for (let i = 0; i < num; i++) {
+    const random = Math.floor(Math.random() * 10);
+    res += String.fromCharCode(97 + random);
+  }
+  return res;
+};
+export function formatAMPM(date) {
+  var hours = date.getHours();
+  var minutes = date.getMinutes();
+  var ampm = hours >= 12 ? 'pm' : 'am';
+  hours = hours % 12;
+  hours = hours ? hours : 12; // the hour '0' should be '12'
+  minutes = minutes < 10 ? '0' + minutes : minutes;
+  var strTime = hours + ':' + minutes + ' ' + ampm;
+  return strTime;
+}

package/template/src/utils/isMobileOrTablet.ts

@@ -13,14 +13,19 @@ const isMobileOrTablet = () => {
   (function (a) {
     if (
       /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(
-        a,
+        a
       ) ||
       /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
-        a.substr(0, 4),
+        a.substr(0, 4)
       )
     )
       check = true;
   })(navigator?.userAgent || navigator?.vendor || window?.opera);
+  check =
+    (/Macintosh/i.test(navigator?.userAgent) &&
+      navigator?.maxTouchPoints &&
+      navigator?.maxTouchPoints > 1) ||
+    check;
   return check;
 };
 

package/template/src/utils/pendingStateUpdateHelper.ts

@@ -0,0 +1,19 @@
+/**
+ * Wrapper around 200ms buffered updates.
+ * @param action - The asynchronous action that causes update
+ * @param cb - Callback method called with true if 200ms exceeded in performing 
+   * provided action and called with false after action completed
+ */
+const pendingStateUpdateHelper = async (
+  action: () => Promise<any>,
+  cb: (exceeded200ms: boolean) => void,
+) => {
+  const pendingTimeout = setTimeout(() => {
+    cb(true);
+  }, 200);
+  await action();
+  clearTimeout(pendingTimeout);
+  cb(false);
+};
+
+export default pendingStateUpdateHelper;

package/template/src/utils/useActiveSpeaker.ts

@@ -0,0 +1,42 @@
+/*
+********************************************
+ 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 {useContent} from 'customization-api';
+import {useEffect, useState} from 'react';
+import LocalEventEmitter, {
+  LocalEventsEnum,
+} from '../rtm-events-api/LocalEvents';
+
+/**
+ * Returns a function that checks whether the given uid is a active speaker and returns true/false
+ * @returns function
+ */
+function useActiveSpeaker() {
+  const [activeSpeaker, setActiveSpeaker] = useState(undefined);
+  const {defaultContent} = useContent();
+  useEffect(() => {
+    const listenActiveSpeaker = (data) => {
+      setActiveSpeaker(data);
+    };
+    LocalEventEmitter.on(LocalEventsEnum.ACTIVE_SPEAKER, listenActiveSpeaker);
+    return () => {
+      LocalEventEmitter.off(
+        LocalEventsEnum.ACTIVE_SPEAKER,
+        listenActiveSpeaker,
+      );
+    };
+  }, []);
+  return activeSpeaker && defaultContent[activeSpeaker].audio
+    ? activeSpeaker
+    : undefined;
+}
+
+export default useActiveSpeaker;

package/template/src/utils/{useCreateMeeting.ts → useCreateRoom.ts}

@@ -1,6 +1,6 @@
 import {gql, useMutation} from '@apollo/client';
-import {MeetingInfoContextInterface} from '../components/meeting-info/useMeetingInfo';
-import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
+import {RoomInfoContextInterface} from '../components/room-info/useRoomInfo';
+import {useSetRoomInfo} from '../components/room-info/useSetRoomInfo';
 import SDKEvents from '../utils/SdkEvents';
 
 const CREATE_CHANNEL = gql`
@@ -30,12 +30,17 @@ const CREATE_CHANNEL = gql`
 /**
  * Returns an asynchronous function to create a meeting with the given options.
  */
-export default function useCreateMeeting() {
+export type createRoomFun = (
+  roomTitle: string,
+  enablePSTN?: boolean,
+) => Promise<void>;
+export default function useCreateRoom(): createRoomFun {
   const [createChannel, {error}] = useMutation(CREATE_CHANNEL);
-  const {setMeetingInfo} = useSetMeetingInfo();
+  const {setRoomInfo} = useSetRoomInfo();
   return async (
     roomTitle: string,
     enablePSTN?: boolean,
+    //isSeparateHostLink will be for internal usage since backend integration is not there
     isSeparateHostLink?: boolean,
   ) => {
     const res = await createChannel({
@@ -49,37 +54,37 @@ export default function useCreateMeeting() {
       throw error;
     }
     if (res && res?.data && res?.data?.createChannel) {
-      let meetingInfo: Partial<MeetingInfoContextInterface['data']> = {
+      let roomInfo: Partial<RoomInfoContextInterface['data']> = {
         roomId: {
           attendee: '',
         },
       };
       if (res?.data?.createChannel?.passphrase?.view) {
-        meetingInfo.roomId.attendee = res.data.createChannel.passphrase.view;
+        roomInfo.roomId.attendee = res.data.createChannel.passphrase.view;
       }
       if (res?.data?.createChannel?.passphrase?.host) {
-        meetingInfo.roomId.host = res.data.createChannel.passphrase.host;
+        roomInfo.roomId.host = res.data.createChannel.passphrase.host;
       }
       if (enablePSTN === true && res?.data?.createChannel?.pstn) {
-        meetingInfo.pstn = {
+        roomInfo.pstn = {
           number: res.data.createChannel.pstn.number,
           pin: res.data.createChannel.pstn.dtmf,
         };
       }
-      setMeetingInfo({
+      setRoomInfo({
         data: {
           isHost: true,
           isSeparateHostLink: isSeparateHostLink ? true : false,
           meetingTitle: roomTitle,
-          roomId: meetingInfo?.roomId,
-          pstn: meetingInfo?.pstn,
+          roomId: roomInfo?.roomId,
+          pstn: roomInfo?.pstn,
         },
       });
       SDKEvents.emit(
         'create',
-        meetingInfo.roomId.host,
-        meetingInfo.roomId.attendee,
-        meetingInfo?.pstn,
+        roomInfo.roomId.host,
+        roomInfo.roomId.attendee,
+        roomInfo?.pstn,
       );
     } else {
       throw new Error(`An error occurred in parsing the channel data.`);