Customize the seat-taking logic

Customize your own business logic

Live Audio Room Kit (ZegoUIKitPrebuiltLiveAudioRoom) enables you to customize your own business logic via the ZegoUIKitPrebuiltLiveAudioRoomController().seat provided.

The following are supported by the function call:

• speaker.leave({bool showDialog = true}): Voluntarily leave a seat. A pop-up confirmation prompt will show when the showDialog is true.

• host.removeSpeaker(String userID): Remove the speaker from the seat.

• host.close({int targetIndex = -1}):

  Close(lock) the seat, allows you to close all seats or only close specific seat by targetIndex.

  once all seats are closed, the audience can only take the seat by inviting by the host or sending a seat-taking request.

• host.open({int targetIndex = -1}):

  Open(unlock) the seat, allows you to open all seats or only open specific seat by targetIndex.

  once it is opened, the audience can take the seat by clicking it.

• audience.applyToTake: The audience applies to take a speaker seat.

• audience.cancelTakingRequest: The audience cancels his seat-taking request.

• host.acceptTakingRequest(String audienceUserID): The host accepts the audience's seat-taking request.

• host.rejectTakingRequest(String audienceUserID): The host rejects the audience's seat-taking request.

• host.inviteToTake(String userID): The host invites the audience to take a speaker seat.

• audience.acceptTakingInvitation: The audience accepts the seat-taking invite from the host.

The following are supported by the event callbacks:

• ZegoLiveAudioRoomMemberListEvents

  • Function(ZegoUIKitUser user)? onMoreButtonPressed: This callback will be triggered when the more button in the member list is pressed.

• ZegoLiveAudioRoomSeatEvents

  • Function(int index, ZegoUIKitUser? user) onClicked: This callback will be triggered when a seat is clicked.

  • Function() onClosed: This callback will be triggered when a speaker seat is closed.

  • Function() onOpened: This callback will be triggered when a closed speaker seat is opened.

  • Function(Map<int/*seat index*/, ZegoUIKitUser> takenSeats, List untakenSeats) onChanged: This callback will be triggered when someone gets on/gets off/switches seat.

  • ZegoLiveAudioRoomSeatHostEvents

    • Function(ZegoUIKitUser audience) onTakingRequested: The host will receive a notification via this callback when the audience applies to take a seat.

    • Function(ZegoUIKitUser audience) onTakingRequestCanceled: The host will receive a notification via this callback when the audience cancels his seat-taking request.

    • VoidCallback? onTakingInvitationFailed: The host will receive a notification via this callback when a seat-taking invite failed.

    • void Function(ZegoUIKitUser audience)? onTakingInvitationRejected: The host will receive a notification via this callback when the audience rejects the seat-taking invite.

  • ZegoLiveAudioRoomSeatAudienceEvents

    • VoidCallback? onTakingRequestFailed: The audience will receive a notification via this callback when his seat-taking request fails.
    • VoidCallback? onTakingRequestRejected: The audience will receive a notification via this callback when his seat-taking request is rejected by the host.
    • VoidCallback? onTakingInvitationReceived: The audience will receive a notification via this callback when the host invites them to take a seat.

Customize the audience's seat-taking logic

The reference code below implements the following:

1. Decide whether to show the "apply to take a seat" button.

• Listen to the ZegoLiveAudioRoomSeatEvents.onClosed and ZegoLiveAudioRoomSeatEvents.onOpened, you can tell whether the seat is open or closed. If open, the button shows. If closed, the button shall be hidden.

2. How to know whether a seat-taking request is sent?

• Listen to the ZegoLiveAudioRoomSeatAudienceEvents.onTakingRequestFailed and ZegoLiveAudioRoomSeatAudienceEvents.onTakingRequestRejected callbacks, and you can tell when the request is sent successfully via these callbacks.

• Listen to the takenSeatsin the callback ZegoLiveAudioRoomSeatEvents.onChanged, you can tell when the audience takes a seat successfully.

3. How to apply to take a seat and cancel the seat-taking request?

• To send a seat-taking request, use the applyToTake method in ZegoUIKitPrebuiltLiveAudioRoomController().seat.audience.
• To cancel the seat-taking request after applying, use the cancelTakingRequest method in ZegoUIKitPrebuiltLiveAudioRoomController().seat.audience.
• And sure, these methods will return a result, you can do further logic customization based on the returned results.

class LivePage extends StatefulWidget {
  const LivePage({
    Key? key,
    required this.roomID,
    this.isHost = false,
  }) : super(key: key);

  final String roomID;
  final bool isHost;

  @override
  State<LivePage> createState() => _LivePageState();
}

class _LivePageState extends State<LivePage> {
  final isSeatClosedNotifier = ValueNotifier<bool>(false);
  final isRequestingNotifier = ValueNotifier<bool>(false);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ZegoUIKitPrebuiltLiveAudioRoom(
          appID: YourSecret.appID,
          appSign: YourSecret.appSign,
          userID: userID,
          userName: 'user_$userID',
          roomID: widget.roomID,
          events: ZegoUIKitPrebuiltLiveAudioRoomEvents(
            seat: ZegoLiveAudioRoomSeatEvents(
              onClosed: () {
                isSeatClosedNotifier.value = true;
              },
              onOpened: () {
                isSeatClosedNotifier.value = false;
              },
              onChanged: (
                Map<int, ZegoUIKitUser> takenSeats,
                List<int> untakenSeats,
              ) {
                if (isRequestingNotifier.value) {
                  if (takenSeats.values
                      .map((e) => e.id)
                      .toList()
                      .contains(userID)) {
                    /// on the seat now
                    isRequestingNotifier.value = false;
                  }
                }
              },
              host: ZegoLiveAudioRoomSeatHostEvents(),
              audience: ZegoLiveAudioRoomSeatAudienceEvents(
                onTakingRequestFailed: () {
                  isRequestingNotifier.value = false;
                },
                onTakingRequestRejected: () {
                  isRequestingNotifier.value = false;
                },
              ),
            ),
          ),
          config: (widget.isHost
              ? ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
              : ZegoUIKitPrebuiltLiveAudioRoomConfig.audience())

            ///  Remove the button that is used for the audience to apply to take a seat.
            ..bottomMenuBar.audienceButtons = const [
              ZegoLiveAudioRoomMenuBarButtonName.showMemberListButton,
            ]

            /// Add custom button.
            ..bottomMenuBar.audienceExtendButtons = [
              connectButton(),
            ]),
    );
  }

  Widget connectButton() {
    return ValueListenableBuilder<bool>(
      valueListenable: isSeatClosedNotifier,
      builder: (context, isSeatClosed, _) {
        return isSeatClosed
            ? ValueListenableBuilder<bool>(
                valueListenable: isRequestingNotifier,
                builder: (context, isRequesting, _) {
                  return isRequesting
                      ? ElevatedButton(
                          onPressed: () {
                            ZegoUIKitPrebuiltLiveAudioRoomController()
                                .seat
                                .audience
                                .cancelTakingRequest()
                                .then((result) {
                              isRequestingNotifier.value = false;
                            });
                          },
                          child: const Text('Cancel'),
                        )
                      : ElevatedButton(
                          onPressed: () {
                            ZegoUIKitPrebuiltLiveAudioRoomController()
                                .seat
                                .audience
                                .applyToTake()
                                .then((result) {
                              isRequestingNotifier.value = result;
                            });
                          },
                          child: const Text('Request'),
                        );
                },
              )
            : Container();
      },
    );
  }
}