Customize the seats

Specify user seats

Live Audio Room Kit (ZegoUIKitPrebuiltLiveAudioRoom) allows you to set specified seats for roles in the live audio room accordingly.

1. takeSeatIndexWhenJoining: Use this to set the seat that the user sits in automatically when joining the live audio room (for the host and speakers).
2. hostSeatIndexes: Use this to set the special seat for the host only (speakers and the audience are not allowed to sit).

Customize the seat layout

Live Audio Room Kit (ZegoUIKitPrebuiltLiveAudioRoom) generally uses rows and alignments for layout, to customize the seat layout, refer to the following:

• ZegoLiveAudioRoomLayoutConfig:

  1. rowConfigs([ZegoLiveAudioRoomLayoutRowConfig]): How many rows there are and how each row is configured.
  2. rowSpacing(int): The space in each row, and it must ≥ 0.

• ZegoLiveAudioRoomLayoutRowConfig:

  1. count(int): Number of seats in each row, ranging from [1 - 4].
  2. seatSpacing(int): Horizontal spacing for each seat, and it must ≥ 0 (this only takes effect when the alignment is start, end, and center).
  3. alignment(ZegoLiveAudioRoomLayoutAlignment): The alignment set for the columns.

• ZegoLiveAudioRoomLayoutAlignment:

  1. start: Place the seats as close to the start of the main axis as possible.

  2. end: Place the seats as close to the end of the main axis as possible.

  3. center: Place the seats as close to the middle of the main axis as possible.

  4. spaceBetween: Place the free space evenly between the seats.

  5. spaceAround: Place the free space evenly between the seats as well as half of that space before and after the first and last seat.

  6. spaceEvenly: Place the free space evenly between the seats as well as before and after the first and last seat.

     The six alignment effects are as follows:

The reference code below implements the following custom settings, with the following effect:

1. The only seat in the first row is set to the host's special seat.
2. The number of seats in the second and third rows is 4, and the alignment is spaceAround.

class ViewController: UIViewController {

    let selfUserID: String = "userID"
    let selfUserName: String = "userName"
    let yourAppID: UInt32 = YourAppID
    let yourAppSign: String = "YourAppSign"
    let roomID: String = "YourRoomID"

    @IBAction func startLiveAudio(_ sender: Any) {

        // Modify your custom configurations here.
        let config: ZegoUIKitPrebuiltLiveAudioRoomConfig = ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
        let layoutConfig: ZegoLiveAudioRoomLayoutConfig = ZegoLiveAudioRoomLayoutConfig()
        layoutConfig.rowSpecing = 5

        let rowConfig0: ZegoLiveAudioRoomLayoutRowConfig = ZegoLiveAudioRoomLayoutRowConfig()
        rowConfig0.count = 1
        rowConfig0.alignment = .center

        let rowConfig1: ZegoLiveAudioRoomLayoutRowConfig = ZegoLiveAudioRoomLayoutRowConfig()
        rowConfig1.count = 4
        rowConfig1.alignment = .spaceAround

        let rowConfig2: ZegoLiveAudioRoomLayoutRowConfig = ZegoLiveAudioRoomLayoutRowConfig()
        rowConfig2.count = 4
        rowConfig2.alignment = .spaceAround

        layoutConfig.rowConfigs = [rowConfig0,rowConfig1, rowConfig2]
        layoutConfig.rowSpecing = 0
        config.layoutConfig = layoutConfig

        let liveAudioVC = ZegoUIKitPrebuiltLiveAudioRoomVC.init(yourAppID, appSign: yourAppSign, userID: selfUserID, userName: selfUserName, roomID: roomID, config: config)

        liveAudioVC.modalPresentationStyle = .fullScreen
        self.present(liveAudioVC, animated: true, completion: nil)
    }
}

Customize the seat's UI

By default, the seat's UI displays the sound waves around the user's avatar.

If you are not satisfied with the sound wave style, or you want to customize the background view, use the configurations in the seatConfig accordingly.

Hide the sound waves

The sound waves are displayed by default, to hide it, use the showSoundWaveInAudioMode config.

showSoundWaveInAudioMode: Use this to decide whether to display the sound waves around the user avatar or not. Displayed by default.

Here is the reference code:

class ViewController: UIViewController {

    let selfUserID: String = "userID"
    let selfUserName: String = "userName"
    let yourAppID: UInt32 = YourAppID
    let yourAppSign: String = "YourAppSign"
    let roomID: String = "YourRoomID"

    @IBAction func startLiveAudio(_ sender: Any) {

        // Modify your custom configurations here.
        let config: ZegoUIKitPrebuiltLiveAudioRoomConfig = ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
        config.seatConfig.showSoundWaveInAudioMode = false
        let liveAudioVC = ZegoUIKitPrebuiltLiveAudioRoomVC.init(yourAppID, appSign: yourAppSign, userID: selfUserID, userName: selfUserName, roomID: roomID, config: config)

        liveAudioVC.modalPresentationStyle = .fullScreen
        self.present(liveAudioVC, animated: true, completion: nil)
    }
}

Customize the foreground/background view of the seat

To customize the seat's background view, use the following configurations:

1. backgroundColor: Use this to customize the background color.
2. backgroundImage : Use this to customize the background image.

To customize the user seat's foreground view, you will need to declare the delegate and implement the getSeatForegroundView method.

The following shows the effect and the reference code:

class ViewController: UIViewController {

    let selfUserID: String = "userID"
    let selfUserName: String = "userName"
    let yourAppID: UInt32 = YourAppID
    let yourAppSign: String = "YourAppSign"
    let roomID: String = "YourRoomID"

    @IBAction func startLiveAudio(_ sender: Any) {

        // Modify your custom configurations here.
        let config: ZegoUIKitPrebuiltLiveAudioRoomConfig = ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
        config.seatConfig.backgroudColor = <#Your backgroudColor#>
        config.seatConfig.backgroundImage = <#Your image#>
        let liveAudioVC = ZegoUIKitPrebuiltLiveAudioRoomVC.init(yourAppID, appSign: yourAppSign, userID: selfUserID, userName: selfUserName, roomID: roomID, config: config)
        liveAudioVC.delegate = self
        liveAudioVC.modalPresentationStyle = .fullScreen
        self.present(liveAudioVC, animated: true, completion: nil)
    }
}

extension ViewController : ZegoUIKitPrebuiltLiveAudioRoomVCDelegate {
    func getSeatForegroundView(_ userInfo: ZegoUIKitUser?, seatIndex: Int) -> UIView? {
        return YourCustomVideoForegroundView
    }
}