Message Rendering

import TUIBarrage

let barrageDisplayView = BarrageStreamView(roomId: roomId)
// ...Add barrageInputView to your parent view here and adjust the layout

barrageDisplayView.setOwnerId(ownerId)

BarrageDisplayController _displayController = BarrageDisplayController(
                roomId: "liveRoomId",             /// Replace with your live stream room ID
                ownerId:  "liveOwnerId",          /// Replace with your live stream host ID 
                selfUserId: "selfUserId",         /// Replace with your currently logged-in user ID
                selfName: "selfUserName";         /// Replace with your currently logged-in user nickname
BarrageDisplayWidget(controller: _displayController);

import TUIBarrage
import RTCCommon

// Example 1: Insert a gift message into the barrage area
let barrage = TUIBarrage()
barrage.content = "gift"
barrage.user.userId = "sender.userId"
barrage.user.userName = "sender.userName"
barrage.user.avatarUrl = "sender.avatarUrl"
barrage.user.level = "sender.level"

let giftCount = 1
barrage.extInfo["TYPE"] = AnyCodable("GIFTMESSAGE")
barrage.extInfo["gift_name"] = AnyCodable("gift.giftName")
barrage.extInfo["gift_count"] = AnyCodable(giftCount)
barrage.extInfo["gift_icon_url"] = AnyCodable("gift.imageUrl")
barrage.extInfo["gift_receiver_username"] = AnyCodable("receiver.userName")

barrageDisplayView.insertBarrages([barrage])

BarrageUser barrageUser = BarrageUser();
barrageUser.userId = "enterRoomUserId";            /// Displayed user ID information
barrageUser.userName = "enterRoomUserName";        /// Displayed user nickname information
barrageUser.avatarUrl = "enterRoomUserAvatar";     /// Displayed user avatar information
barrageUser.level = "66";                          /// Displayed user level information

Barrage barrage = Barrage();
barrage.user = barrageUser;
barrage.content = "Enter a room";                       /// Displayed text content
_displayController.insertMessage(barrage);


import TUIBarrage

class MyViewController: BarrageStreamViewDelegate {
    let barrageDisplayView = BarrageStreamView(roomId: roomId)

    override func viewDidLoad() {
        super.viewDidLoad()
        barrageDisplayView.delegate = self  // Set the proxy for BarrageStreamView
        
        // ...
    }


    func onBarrageClicked(user: TUIUserInfo) {
        // Here you can add the event processing logic for barrage message clicks. 'user' is the sender information.
    }
    
    func barrageDisplayView(_ barrageDisplayView: BarrageStreamView, createCustomCell barrage: TUIBarrage) -> UIView? {
        // Whether to use Custom UI, if not needed, return nil just
        guard let type = barrage.extInfo["TYPE"], type.value as? String == "GIFTMESSAGE" else {
            return nil
        }
        
        // Return custom message style UI (gift echo)
        return CustomBarrageView(barrage: barrage)
    }
}


// Custom UI
class CustomBarrageView: UIView {
    let barrage: TUIBarrage
    init(barrage: TUIBarrage) {
        self.barrage = barrage
        super.init(frame: .zero)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    // ...Layout and draw your own UI here
}


/// 1. Define a custom barrage item builder
class GiftBarrageItemBuilder extends CustomBarrageBuilder {
  @override
  Widget buildWidget(BuildContext context, Barrage barrage) { /// When shouldCustomizeBarrageItem returns true, customize widget
    return const Text(
      barrage.content,
      style: TextStyle(fontSize: 18, fontWeight: FontWeight.w700, color: Colors.red),
    );
  }

  @override
  bool shouldCustomizeBarrageItem(Barrage barrage) {    /// For the data model of the barrage message, determine whether the current barrage message needs to be customized
    if (barrage.extInfo.keys.isNotEmpty) {
      return true;
    }
    return false;
  }
}

/// 2. Set setCustomBarrageBuilder for BarrageDisplayWidget
_displayController.setCustomBarrageBuilder(GiftBarrageItemBuilder());