agora-appbuilder-core 4.1.22 → 4.1.23-beta.1

package/template/customization/CustomWrapper.tsx

@@ -0,0 +1,121 @@
+import {
+  customEvents,
+  useLocalAudio,
+  useLocalVideo,
+  useRoomInfo,
+  UidType,
+  useUserActionMenu,
+  useContent,
+  useWhiteboard,
+} from 'customization-api';
+import React, {useEffect, useRef, useState} from 'react';
+import {PinProvider} from './PinContext';
+
+export interface CustomWrapperContextInterface {
+  pinnedForAllUid: UidType | null;
+  setPinnedForAllUid: React.Dispatch<React.SetStateAction<UidType | null>>;
+}
+
+const CustomWrapperContext = React.createContext<CustomWrapperContextInterface>(
+  {
+    pinnedForAllUid: null,
+    setPinnedForAllUid: () => {},
+  },
+);
+
+interface CustomWrapperProviderProps {
+  children: React.ReactNode;
+}
+
+const CustomWrapperProvider = (props: CustomWrapperProviderProps) => {
+  const {enableAudioButton, disableAudioButton} = useLocalAudio();
+  const {enableVideoButton, disableVideoButton} = useLocalVideo();
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+
+  const [pinnedForAllUid, setPinnedForAllUid] = useState<UidType | null>(null);
+  const {pinForEveryone, unPinForEveryone} = useUserActionMenu();
+  const {pinnedUid} = useContent();
+  const {getWhiteboardUid} = useWhiteboard();
+
+  // override default host controls
+  useEffect(() => {
+    /**
+     * custom event listener for disable attendee mic
+     * Here we can call disableAudioButton/enableAudioButton function to update participant mic button state
+     */
+    customEvents.on('DISABLE_ATTENDEE_MIC', ({payload}) => {
+      try {
+        //host side we don't disable the button so ignoring it
+        if (isHost) {
+          return;
+        }
+        //attendee only disable the mic button
+        const data = JSON.parse(payload);
+        if (data && data === true) {
+          disableAudioButton();
+        } else {
+          enableAudioButton();
+        }
+      } catch (error) {
+        console.log('debugging error on DISABLE_ATTENDEE_MIC listener ');
+      }
+    });
+    customEvents.on('DISABLE_ATTENDEE_VIDEO', ({payload}) => {
+      try {
+        //host side we don't disable the button so ignoring it
+        if (isHost) {
+          return;
+        }
+        //attendee only disable the mic button
+        const data = JSON.parse(payload);
+        if (data && data === true) {
+          disableVideoButton();
+        } else {
+          enableVideoButton();
+        }
+      } catch (error) {
+        console.log('debugging error on DISABLE_ATTENDEE_VIDEO listener ');
+      }
+    });
+
+    /**
+     * Custom event listener for PIN_FOR_EVERYONE
+     * @param {Object} payload - The payload data sent with the event.
+     */
+    customEvents.on('PIN_FOR_EVERYONE', ({payload}) => {
+      try {
+        const data = JSON.parse(payload);
+        const pinUID =
+          data.uidType === 'whiteboard' && data.pinForAllUid
+            ? getWhiteboardUid()
+            : data.pinForAllUid;
+
+        setPinnedForAllUid(pinUID);
+        if (data.pinForAllUid) {
+          pinForEveryone(pinUID);
+        } else {
+          unPinForEveryone();
+        }
+      } catch (error) {
+        console.log('debugging error on PIN_FOR_EVERYONE listener ');
+      }
+    });
+
+    return () => {
+      customEvents.off('DISABLE_ATTENDEE_MIC', () => {});
+      customEvents.off('DISABLE_ATTENDEE_VIDEO', () => {});
+      customEvents.off('PIN_FOR_EVERYONE', () => {});
+    };
+  }, []);
+
+  return (
+    <CustomWrapperContext.Provider
+      value={{pinnedForAllUid, setPinnedForAllUid}}>
+      <PinProvider>{props.children}</PinProvider>
+    </CustomWrapperContext.Provider>
+  );
+};
+
+export {CustomWrapperProvider, CustomWrapperContext};

package/template/customization/NewBottomBar.tsx

@@ -0,0 +1,86 @@
+import {
+  ToolbarPreset,
+  ToolbarComponents,
+  ToolbarItem,
+  useRoomInfo,
+  useLocalAudio,
+  TertiaryButton,
+  customEvents,
+  PersistanceLevel,
+  useEndCall,
+  useHistory,
+  getCustomRoute,
+  useIsHost,
+  useLocalUid,
+  useIsAttendee,
+} from 'customization-api';
+import React, {useContext, useEffect, useRef, useState} from 'react';
+import Reactions from './Reactions';
+
+const NewEndCall = () => {
+  const {LocalEndcallToolbarItem} = ToolbarComponents;
+  const endCall = useEndCall();
+  const localUid = useLocalUid();
+  const isHost = useIsHost();
+  const history = useHistory();
+
+  React.useEffect(() => {
+    customEvents.on('Host_Disconnects_Call', handleEndCallback);
+    return () => {
+      customEvents.off('Host_Disconnects_Call', handleEndCallback);
+    };
+  }, []);
+  const handleEndCallback = data => {
+    const payload = JSON.parse(data?.payload);
+    if (payload.callEnded) {
+      // other attendees leave call
+      endCall();
+    }
+  };
+  return (
+    <LocalEndcallToolbarItem
+      customExit={() => {
+        // only host can make other participants exist when host ends the call
+        if (isHost(localUid)) {
+          customEvents.send(
+            'Host_Disconnects_Call',
+            JSON.stringify({callEnded: true}),
+            PersistanceLevel.Session,
+          );
+        }
+        // Delay the call end and navigation slightly to ensure the event is sent before the page unloads
+        window.setTimeout(() => {
+          endCall();
+          history.push(getCustomRoute('call-ended')); // optional : if user wants to navigate to a custom page after call ends
+        }, 50);
+      }}
+    />
+  );
+};
+
+export const NewBottomBar = () => {
+  const {ChatToolbarItem, ParticipantToolbarItem} = ToolbarComponents;
+
+  const localUid = useLocalUid();
+  const isAttendee = useIsAttendee();
+  const isAttendeeUser = isAttendee(localUid);
+
+  return (
+    <ToolbarPreset
+      align="bottom"
+      items={{
+        reactions: {
+          component: Reactions,
+          order: 5, // position at which item should appear in bottom list
+          align: 'center', // can be start,center,end
+          hide: false, // show icon or not
+          label: 'haha',
+        },
+        'end-call': {
+          component: NewEndCall,
+        },
+      }}
+      snapPointsMinMax={[100, 300]}
+    />
+  );
+};

package/template/customization/NewUserActionsMenu.tsx

@@ -0,0 +1,137 @@
+import React, {useState} from 'react';
+import {
+  UidType,
+  UserActionMenuItem,
+  UserActionMenuItemsConfig,
+} from 'customization-api';
+
+const BanUserAction = ({
+  closeActionMenu,
+  targetUid,
+}: {
+  closeActionMenu?: () => void;
+  targetUid: UidType;
+}) => (
+  <UserActionMenuItem
+    icon="remove-meeting"
+    iconColor="orange"
+    textColor="orange"
+    label="Ban from room this person"
+    onPress={() => {
+      console.log('Ban logic triggered for', targetUid);
+      closeActionMenu?.();
+    }}
+  />
+);
+
+const PinForEveryone = ({
+  closeActionMenu,
+  targetUid,
+}: {
+  closeActionMenu?: () => void;
+  targetUid: UidType;
+}) => {
+  const [isPinned, setIsPinned] = useState(false);
+  return (
+    <UserActionMenuItem
+      label={isPinned ? 'Unpin for everyone' : 'Pin for everyone'}
+      icon={isPinned ? 'unpin-outlined' : 'pin-outlined'}
+      iconColor="orange"
+      textColor="orange"
+      onPress={() => {
+        setIsPinned(!isPinned);
+        console.log('Pin toggled:', !isPinned, targetUid);
+        closeActionMenu?.();
+      }}
+    />
+  );
+};
+
+const PinForEveryoneT = () => {
+  const [isPinned, setIsPinned] = useState(false);
+  return (
+    <UserActionMenuItem
+      label={isPinned ? 'Unpin T' : 'Pin T'}
+      icon={isPinned ? 'unpin-outlined' : 'pin-outlined'}
+      toggleStatus={isPinned}
+      iconColor="orange"
+      textColor="orange"
+      onPress={() => {
+        setIsPinned(!isPinned);
+        console.log('Pin T toggled:', !isPinned);
+      }}
+    />
+  );
+};
+
+const NewUserActionsMenu = () => null;
+
+(NewUserActionsMenu as any).items = {
+  'remove-from-room': {
+    order: 0,
+    hide: false,
+    onAction: uid => {
+      console.log('Remove from room for uid:', uid);
+    },
+  },
+  'pin-to-top': {
+    order: 1,
+    hide: false,
+    onAction: () => {
+      console.log('Pin to top logic');
+    },
+  },
+  'change-name': {
+    order: 3,
+    hide: false,
+    onAction: () => {
+      console.log('Change name logic');
+    },
+  },
+  'view-in-large': {
+    order: 2,
+    hide: false,
+    onAction: () => {
+      console.log('View in large logic');
+    },
+  },
+  'mute-audio': {
+    order: 0,
+    hide: false,
+    onAction: () => {
+      console.log('Mute audio logic');
+    },
+  },
+  'mute-video': {
+    order: 5,
+    hide: false,
+    onAction: () => {
+      console.log('Mute video logic');
+    },
+  },
+  'message-privately': {
+    order: 1,
+    hide: false,
+    onAction: () => {
+      console.log('Message privately logic');
+    },
+  },
+  'ban-user': {
+    component: BanUserAction,
+    order: 99,
+    visibility: ['host-remote', 'event-host-remote'],
+  },
+  'pin-for-everyone': {
+    component: PinForEveryone,
+    order: 0,
+    visibility: ['host-remote', 'host-self'],
+  },
+  'pin-for-everyone-T': {
+    component: PinForEveryoneT,
+    hide: true,
+    order: 0,
+    visibility: ['host-remote', 'host-self'],
+  },
+};
+
+export default NewUserActionsMenu;

package/template/customization/PinContext.tsx

@@ -0,0 +1,142 @@
+import {
+  useRoomInfo,
+  useUserActionMenu,
+  UidType,
+  UserActionMenuItem,
+  useUserBan,
+  useLocalUid,
+  customEvents,
+  PersistanceLevel,
+  useContent,
+} from 'customization-api';
+import React, {useContext, useEffect, useRef, useState} from 'react';
+import {CustomWrapperContext} from './CustomWrapper';
+
+export interface PinContextInterface {}
+
+const PinContext = React.createContext<PinContextInterface>({});
+
+interface PinProviderProps {
+  children: React.ReactNode;
+}
+
+const PinForEveryone = ({
+  closeActionMenu,
+  targetUid,
+  targetUidType,
+}: {
+  closeActionMenu?: () => void;
+  targetUid: UidType;
+  targetUidType: string;
+}) => {
+  const {pinnedForAllUid, setPinnedForAllUid} =
+    useContext(CustomWrapperContext);
+  const {pinForEveryone, unPinForEveryone} = useUserActionMenu();
+  const {activeUids, pinnedUid} = useContent();
+
+  const isPinned = pinnedForAllUid === targetUid;
+  return (
+    <UserActionMenuItem
+      label={isPinned ? 'Unpin for everyone' : 'Pin for everyone'}
+      icon={isPinned ? 'unpin-outlined' : 'pin-outlined'}
+      iconColor={'yellow'}
+      textColor={'yellow'}
+      disabled={activeUids.length === 1}
+      onPress={() => {
+        const newPinnedUid = pinnedForAllUid === targetUid ? null : targetUid;
+
+        customEvents.send(
+          'PIN_FOR_EVERYONE',
+          JSON.stringify({pinForAllUid: newPinnedUid, uidType: targetUidType}),
+          PersistanceLevel.Session,
+        );
+
+        // Update local state
+        setPinnedForAllUid(newPinnedUid);
+
+        // pinned for local user
+        if (newPinnedUid) {
+          pinForEveryone(newPinnedUid);
+        } else {
+          unPinForEveryone();
+        }
+
+        closeActionMenu?.();
+      }}
+    />
+  );
+};
+
+const PinForEveryoneT = () => {
+  const [isPinned, setIsPinned] = useState(false);
+  const {activeUids} = useContent();
+  return (
+    <UserActionMenuItem
+      label={isPinned ? 'Unpin T' : 'Pin T'}
+      icon={isPinned ? 'unpin-outlined' : 'pin-outlined'}
+      toggleStatus={isPinned}
+      iconColor="orange"
+      textColor="orange"
+      disabled={activeUids.length === 1}
+      onPress={() => {
+        setIsPinned(!isPinned);
+        console.log('Pin T toggled:', !isPinned);
+      }}
+    />
+  );
+};
+
+const PinProvider = (props: PinProviderProps) => {
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+  const localUid = useLocalUid();
+  const {updateUserActionMenuItems} = useUserActionMenu();
+  const banUser = useUserBan();
+  const {activeUids} = useContent();
+
+  useEffect(() => {
+    const updateActions = async () => {
+      // updated user action menu items
+      updateUserActionMenuItems({
+        'remove-from-room': {
+          order: 1,
+          hide: false,
+          onAction: (uid, hostMeetingId) => {
+            console.log('Remove from room for uid:', uid);
+            banUser({uid: uid, duration: 1440, hostMeetingId});
+          },
+        },
+        'view-in-large': {
+          order: 2,
+          hide: true,
+          onAction: () => {
+            console.log('View in large logic');
+          },
+        },
+        'pin-for-everyone': {
+          component: PinForEveryone,
+          order: 0,
+          disabled: activeUids.length === 1,
+          visibility: [
+            'host-remote',
+            'host-self',
+            'event-host-remote',
+            'event-host-self',
+          ],
+        },
+        'pin-for-everyone-T': {
+          component: PinForEveryoneT,
+          hide: false,
+          order: 0,
+          visibility: ['host-remote', 'host-self'],
+        },
+      });
+    };
+    updateActions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeUids]);
+  return <PinContext.Provider value={{}}>{props.children}</PinContext.Provider>;
+};
+
+export {PinProvider, PinContext};

package/template/customization/PreferenceWraper.tsx

@@ -0,0 +1,212 @@
+import {
+  useVirtualBackground,
+  type VBOption,
+  useUserActionMenu,
+  UidType,
+  UserActionMenuItem,
+  useUserBan,
+} from 'customization-api';
+import React, {useEffect, useState} from 'react';
+
+const PreferenceWrapperContext = React.createContext({});
+
+interface PreferenceWrapperProviderProps {
+  children: React.ReactNode;
+}
+const BanUserAction = ({
+  closeActionMenu,
+  targetUid,
+  hostMeetingId,
+}: {
+  closeActionMenu: () => void;
+  targetUid: UidType;
+  hostMeetingId: string;
+}) => {
+  const banUser = useUserBan();
+  return (
+    <UserActionMenuItem
+      icon="remove-meeting"
+      iconColor="yellow"
+      textColor="yellow"
+      label="Ban from room this person now"
+      onPress={() => {
+        console.log('Ban logic triggered for', targetUid);
+        banUser({uid: targetUid, duration: 1440, hostMeetingId});
+        closeActionMenu?.();
+      }}
+    />
+  );
+};
+
+const PreferenceWrapperProvider = (props: PreferenceWrapperProviderProps) => {
+  const {virtualBackgrounds, addVirtualBackgrounds} = useVirtualBackground();
+  const {updateUserActionMenuItems} = useUserActionMenu();
+  const banUser = useUserBan();
+
+  const [isPinned, setIsPinned] = useState(false); // pin for rvyrone
+
+  const PinForEveryone = ({
+    closeActionMenu,
+    targetUid,
+  }: {
+    closeActionMenu?: () => void;
+    targetUid: UidType;
+  }) => {
+    return (
+      <UserActionMenuItem
+        label={isPinned ? 'Unpin for everyone' : 'Pin for everyone'}
+        icon={isPinned ? 'unpin-outlined' : 'pin-outlined'}
+        iconColor="yellow"
+        textColor="yellow"
+        onPress={() => {
+          setIsPinned(!isPinned);
+          console.log('Pin toggled:', !isPinned, targetUid);
+          // closeActionMenu?.();
+        }}
+      />
+    );
+  };
+
+  const PinForEveryoneT = () => {
+    const [isPinned, setIsPinned] = useState(false);
+    return (
+      <UserActionMenuItem
+        label={isPinned ? 'Unpin T' : 'Pin T'}
+        icon={isPinned ? 'unpin-outlined' : 'pin-outlined'}
+        toggleStatus={isPinned}
+        iconColor="orange"
+        textColor="orange"
+        onPress={() => {
+          setIsPinned(!isPinned);
+          console.log('Pin T toggled:', !isPinned);
+        }}
+      />
+    );
+  };
+
+  React.useEffect(() => {
+    const update = async () => {
+      const initialOptions = virtualBackgrounds.slice(0, 3);
+      const options = [
+        ...initialOptions,
+
+        {
+          type: 'image',
+          path: 'https://images.unsplash.com/photo-1581360742512-021d5b2157d8?q=80&w=2079&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+          isSelected: true,
+        },
+
+        {
+          type: 'image',
+          path: 'https://images.unsplash.com/photo-1533090161767-e6ffed986c88?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+          isSelected: false,
+        },
+        {
+          type: 'image',
+          path: 'https://images.unsplash.com/photo-1549890762-0a3f8933bc76?q=80&w=1936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+          isSelected: false,
+        },
+        {
+          type: 'image',
+          path: 'https://images.unsplash.com/photo-1517093728432-a0440f8d45af?q=80&w=2028&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+          isSelected: false,
+        },
+        {
+          type: 'image',
+          path: 'https://images.unsplash.com/photo-1590523741831-ab7e8b8f9c7f?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+          isSelected: false,
+        },
+        {
+          type: 'image',
+          path: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+          isSelected: false,
+        },
+        {
+          type: 'image',
+          path: 'https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?q=80&w=2113&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+          isSelected: false,
+        },
+      ] as VBOption[];
+      await addVirtualBackgrounds(options);
+
+      // // updated user action menu items
+      // updateUserActionMenuItems({
+      //   'remove-from-room': {
+      //     order: 0,
+      //     hide: false,
+      //     onAction: (uid, hostMeetingId) => {
+      //       console.log('Remove from room for uid:', uid);
+      //       banUser({uid: uid, duration: 1440, hostMeetingId});
+      //     },
+      //   },
+      //   'pin-to-top': {
+      //     order: 1,
+      //     hide: false,
+      //     onAction: () => {
+      //       console.log('Pin to top logic');
+      //     },
+      //   },
+      //   'change-name': {
+      //     order: 3,
+      //     hide: false,
+      //     onAction: () => {
+      //       console.log('Change name logic');
+      //     },
+      //   },
+      //   'view-in-large': {
+      //     order: 2,
+      //     hide: false,
+      //     onAction: () => {
+      //       console.log('View in large logic');
+      //     },
+      //   },
+      //   'mute-audio': {
+      //     order: 0,
+      //     hide: false,
+      //     onAction: () => {
+      //       console.log('Mute audio logic');
+      //     },
+      //   },
+      //   'mute-video': {
+      //     order: 5,
+      //     hide: false,
+      //     onAction: () => {
+      //       console.log('Mute video logic');
+      //     },
+      //   },
+      //   'message-privately': {
+      //     order: 1,
+      //     hide: false,
+      //     onAction: () => {
+      //       console.log('Message privately logic');
+      //     },
+      //   },
+      //   'ban-user': {
+      //     component: BanUserAction,
+      //     order: 99,
+      //     visibility: ['host-remote', 'event-host-remote'],
+      //   },
+      //   'pin-for-everyone': {
+      //     component: PinForEveryone,
+      //     order: 0,
+      //     visibility: ['host-remote', 'host-self'],
+      //   },
+      //   'pin-for-everyone-T': {
+      //     component: PinForEveryoneT,
+      //     hide: false,
+      //     order: 0,
+      //     visibility: ['host-remote', 'host-self'],
+      //   },
+      // });
+    };
+    update();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return (
+    <PreferenceWrapperContext.Provider value={{}}>
+      {props.children}
+    </PreferenceWrapperContext.Provider>
+  );
+};
+
+export {PreferenceWrapperProvider, PreferenceWrapperContext};