agora-appbuilder-core 4.0.7 → 4.0.8

package/template/src/utils/useJoinRoom.ts

@@ -7,6 +7,7 @@ import {GraphQLContext} from '../components/GraphQLProvider';
 import useGetName from './useGetName';
 import useWaitingRoomAPI from '../subComponents/waiting-rooms/useWaitingRoomAPI';
 import {base64ToUint8Array} from '../utils';
+import {LogSource, logger} from '../logger/AppBuilderLogger';
 
 const JOIN_CHANNEL_PHRASE_AND_GET_USER = gql`
   query JoinChannel($passphrase: String!) {
@@ -85,11 +86,21 @@ export default function useJoinRoom() {
     try {
       let response = null;
       if (isWaitingRoomEnabled) {
+        logger.log(
+          LogSource.NetworkRest,
+          'channel_join_request',
+          'API channel_join_request. Trying request to join channel as waiting room is enabled',
+        );
         response = await requestToJoin({
           meetingPhrase: phrase,
           send_event: false,
         });
       } else {
+        logger.log(
+          LogSource.NetworkRest,
+          'joinChannel',
+          'API joinChannel. Trying to join channel. Waiting room is disabled',
+        );
         response = await client.query({
           query:
             store.token === null
@@ -102,10 +113,26 @@ export default function useJoinRoom() {
         });
       }
       if (response?.error) {
+        logger.error(
+          LogSource.NetworkRest,
+          `${isWaitingRoomEnabled ? 'channel_join_request' : 'joinChannel'}`,
+          `API ${
+            isWaitingRoomEnabled ? 'channel_join_request' : 'joinChannel'
+          } failed.`,
+          response?.error,
+        );
         throw response.error;
       } else {
         if ((response && response.data) || isWaitingRoomEnabled) {
           let data = isWaitingRoomEnabled ? response : response.data;
+          logger.log(
+            LogSource.NetworkRest,
+            `${isWaitingRoomEnabled ? 'channel_join_request' : 'joinChannel'}`,
+            `API to ${
+              isWaitingRoomEnabled ? 'channel_join_request' : 'joinChannel'
+            } successful.`,
+            phrase,
+          );
           let roomInfo: Partial<RoomInfoContextInterface['data']> = {};
 
           if (data?.joinChannel?.channel || data?.channel) {

package/template/src/utils/useLayout.tsx

@@ -10,8 +10,10 @@
 *********************************************
 */
 
-import React, {SetStateAction} from 'react';
+import React, {SetStateAction, useState} from 'react';
 import {createHook} from 'customization-implementation';
+import useLayoutsData from '../pages/video-call/useLayoutsData';
+import {isArray} from './common';
 
 export interface LayoutContextInterface {
   currentLayout: string;
@@ -24,12 +26,16 @@ const LayoutContext = React.createContext<LayoutContextInterface>({
 });
 
 interface LayoutProviderProps {
-  value: LayoutContextInterface;
   children: React.ReactNode;
 }
 const LayoutProvider = (props: LayoutProviderProps) => {
+  const layouts = useLayoutsData();
+  const defaultLayoutName = isArray(layouts) ? layouts[0].name : '';
+  const [currentLayout, setLayout] = useState(defaultLayoutName);
+
+  const value = {currentLayout, setLayout};
   return (
-    <LayoutContext.Provider value={{...props.value}}>
+    <LayoutContext.Provider value={value}>
       {props.children}
     </LayoutContext.Provider>
   );

package/template/src/utils/useSidePanel.tsx

@@ -10,9 +10,10 @@
 *********************************************
 */
 
-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;
@@ -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>
   );