End-call Customization

The following guide describes the steps to end-call for everyone once the host leaves the call on App Builder SDK.

STEP 1

Use Customization API to update the bottom bar for new end-call functionality.

const userCustomization = customize({
    components: {
        videoCall: {
            ...
            // Update the bottom bar with new end-call functionality
            bottomToolBar: UpdatedBottomBar,
            // (Optional) - Custom route config to re-direct users after end-call
            customRoutes: [{component: CustomEndCallPage, path: 'call-ended'}],
            ...
        },
    },
});

STEP 2

Update the bottom bar with new end-call functionality. Overriding the end-call key will replace the existing End Call button with the Custom End Call button

export const UpdatedBottomBar = () => {
  const { ChatToolbarItem, ParticipantToolbarItem } = ToolbarComponents;

  const localUid = useLocalUid();
  const isAttendee = useIsAttendee();
  const isAttendeeUser = isAttendee(localUid);

  return (
    <ToolbarPreset
      align="bottom"
      items={{
        "end-call": {
          component: NewEndCall,
        },
      }}
    />
  );
};

STEP 3

Create the custom end-call button using the Customization API. The ToolbarComponents component can be imported from the customization API. LocalEndcallToolbarItem and customExit are used to customise the end-call functionality

const NewEndCall = () => {
  const { LocalEndcallToolbarItem } = ToolbarComponents;

  return <LocalEndcallToolbarItem customExit={() => {}} />;
};

STEP 4

The Host sends the custom event to everyone to disconnect the call

const NewEndCall = () => {
  const { LocalEndcallToolbarItem } = ToolbarComponents;
  const localUid = useLocalUid();
  const isHost = useIsHost();
  const history = useHistory();

  //Host sends the custom event for call disconnect
  return (
    <LocalEndcallToolbarItem
      customExit={() => {
        // When host click end call
        if (isHost(localUid)) {
          // Send custom events to all participants to disconnect from the call
          customEvents.send(
            "Host_Disconnects_Call",
            JSON.stringify({ callEnded: true }),
            PersistanceLevel.Session,
          );
        }
        // Disconnect the host from the call after sending the custom event
        window.setTimeout(() => {
          endCall();
          // (Optional) -  if the user wants to navigate to a custom page after the call ends
          history.push(getCustomRoute("call-ended"));
        }, 50);
      }}
    />
  );
};

STEP 5

Participants receive the custom event and leave the call.

const NewEndCall = () => {
  const endCall = useEndCall();
  ...

  //Participants reacting to the custom event.
  React.useEffect(() => {
    // handle custom disconnect event for participants
    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={() => {
       ...
      }}
    />
  );
};

Now, you should be able to achieve custom end-call functionality with Customization API and Custom events.

---