Gift Display Panel | Normal Gift Playback Effect | Full-Screen Gift Playback Effect |
| | |
Gift System Architecture Diagram | Gift System Sequence Diagram |
| |
GiftListView.sendGift
to send the gift message.// File Location: iOS/TUILiveKit/Source/Common/UIComponent/GiftGiftCloudServer // Custom Gifts Backend Services Directory├── CloudServerConfig.swift // Service Layer Data Source for Gift Component├── GiftCloudServer.swift // Default implementation class, interacting with the gift backend, responsible for verifying balance, settlement, statistics, etc. Custom implementation is recommended for clients└── IGiftCloudServer.swift // Gift backend service interface
// File Location: iOS/TUILiveKit/Source/Common/UIComponentGift├── TUIGiftListView.swift // Gift Panel View├── TUIGiftPlayView.swift // Gift Playback View└── View // View Layer Directory of Gift Component└── Views // Custom Category Directory of Gift Component├── TUIGiftBulletView.swift // General Gift Playback Category of Gift Component├── TUIGiftCell.swift // Customizable Gift Cell of Gift Component├── TUIGiftSideslipLayout.swift // Custom Layout Class of Gift Component└── TUIGiftView.swift // Gift Display View Class of Gift Component
// File Location: iOS/TUILiveKit/Source/Common/UIComponent/Gift/Store/TUIGiftStore.swiftclass TUIGiftStore {static let shared = TUIGiftStore()private init() {giftCloudServer.queryGiftInfoList { [weak self] error, giftList inguard let self = self else { return }if error == .noError {self.giftList = giftList}}}var giftList: [TUIGift] = []let giftCloudServer: IGiftCloudServer = GiftCloudServer()}// File Location: iOS/TUILiveKit/Source/View/LiveRoom/View/Audience/AudienceView.swiftfunc getRouteView(route: Route) -> UIView? {if route == .giftView {giftPanelView.setGiftList(TUIGiftStore.shared.giftList)return giftPanelView}else {return nil}}
giftCloudServer.queryGiftInfoList
to get a custom gift list List<TUIGift>
, and sets the gift list via GiftListView.setGiftList
.animationUrl
of the gift requires an SVGA animation// File Location: iOS/TUILiveKit/Source/View/LiveRoom/View/Audience/AudienceView.swiftlazy var giftPanelView: TUIGiftListView = {let view = TUIGiftListView(groupId: roomId)view.delegate = selfTUIGiftStore.shared.giftCloudServer.queryBalance { error, balance inif error == .noError {view.setBalance(balance)}}return view}()
giftCloudServer.queryBalance
to get the gift balance and update the balance through GiftListView.setBalance
.// File Location: iOS/TUILiveKit/Source/View/LiveRoom/View/Audience/AudienceView.swiftfunc onSendGift(giftListView view: TUIGiftListView, giftModel: TUIGift, giftCount: Int) {let anchorInfo = store.selectCurrent(RoomSelectors.getRoomOwnerInfo)let receiver = TUIGiftUser()receiver.userId = anchorInfo.userIdreceiver.userName = anchorInfo.namereceiver.avatarUrl = anchorInfo.avatarUrlreceiver.level = "0"let selfInfo = store.selectCurrent(UserSelectors.getSelfInfo)TUIGiftStore.shared.giftCloudServer.sendGift(sender: selfInfo.userId,receiver: receiver.userId,giftModel: giftModel,giftCount: giftCount) { [weak self] error, balance inguard let self = self else { return }if error == .noError {view.sendGift(giftModel: giftModel, giftCount: giftCount, receiver: receiver)view.setBalance(balance)} else {let toastInfo = ToastInfo(message: .balanceInsufficientText)store.dispatch(action: ViewActions.toastEvent(payload: toastInfo))}}}
giftCloudServer.sendGift
. The main process is to first connect to the client’s business server for balance verification. After verification, the server performs billing and records the consumption. Finally, it calls back the result to the client. Upon receiving the successful callback, the client sends the gift message through GiftListView
's sendGift
and updates the gift balance via setBalance
.// File Location:// iOS/TUILiveKit/Source/View/LiveRoom/View/Audience/Component/AudienceLiving.swift// iOS/TUILiveKit/Source/View/LiveRoom/View/Anchor/LivingView/AnchorLivingView.swiftfunc giftPlayView(_ giftPlayView: TUIGiftPlayView, onPlayGiftAnimation gift: TUIGift) {guard let url = URL(string: gift.animationUrl) else { return }giftCacheService.request(withURL: url) { error, fileUrl inif error == 0 {DispatchQueue.main.async {giftPlayView.playGiftAnimation(playUrl: fileUrl)}}}}
giftCacheService.request
. After successfully loading the animation, get the fileUrl
(String
type) and play the gift animation through TUIGiftPlayView
's playGiftAnimation
.TUIGiftListView
: Gift Panel, presents the gift list, sends gifts, and recharges.TUIGiftPlayView
: Panel for playing gifts, automatically listens to gift messages.TUIGiftListView
provides the setGiftList
interface, which can be used to set gift materials.let view = TUIGiftListView(groupId: roomId) // Create gift panel objectlet giftList:[TUIGift] = [] // Replace this with your own gift materials arraygiftList.setGiftList(giftList) // Set the materials for the gift panel
The parameters and description of
TUIGift are as follows:giftId: String
: Gift IDgiftName: String
: Gift NameimageUrl: String
: Image displayed on the gift panelanimationUrl: String
: SVGA Animation URLprice: int
: Gift PriceextInfo: <String, AnyCodable>
: Custom extension information.animationUrl
is empty, the gift playback effect is standard, and the content played is the image linked by imageUrl; if animationUrl
is not empty, the playback effect is full-screen, and the content played is the corresponding svga animation.TUIGiftListView
delegate TUIGiftListViewDelegate
in onSendGift:giftListView:gift:giftCount
to get the gift count and gift information. After pre-processing, you can call the TUIGiftListView
's sendGift
function for the actual gift sending.func onSendGift(giftListView view: TUIGiftListView, giftModel: TUIGift, giftCount: Int) {//...Here is the pre-processing, such as verifying the current user's balance, etclet receiver = TUIGiftUser()//...Here set the gift recipient informationview.sendGift(giftModel: giftModel, giftCount: giftCount, receiver: receiver)}
TUIGiftPlayView
itself will receive and play gift messages.let giftPlayView = TUIGiftPlayView(groupId: roomId)
TUIGiftPlayView
needs full-screen integrationTUIGiftPlayView
delegate TUIGiftPlayViewDelegate
function giftPlayView:onReceiveGift:gift:giftCount:sender:receiver
.func giftPlayView(_ giftPlayView: TUIGiftPlayView, onReceiveGift gift: TUIGift, giftCount: Int, sender: TUIGiftUser, receiver: TUIGiftUser) {// Custom Processing}
TUIGiftPlayView
's playGiftAnimation
to play the animation. The appropriate time to call is upon receiving the TUIGiftPlayViewDelegate
's giftPlayView:onPlayGiftAnimation
callback.func giftPlayView(_ giftPlayView: TUIGiftPlayView, onPlayGiftAnimation gift: TUIGift) {giftPlayView.playGiftAnimation(playUrl: fileUrl)}
TUIGiftListView
provides the setBalance
interface, which can be used to set the balance value displayed on the gift panel.giftListView.setBalance(xxx);
TUIGiftListViewDelegate
in TUIGiftListView
, the onRecharge:view
callback can be used to receive the recharge button click event thrown by the gift display panel, where you can integrate your own recharge system.func onRecharge(giftListView view: TUIGiftListView) {//...go to recharge//Set the latest balance view.setBalance(balance)}
TUIGiftListView
delegate TUIGiftListViewDelegate
callback onSendGift:view:giftModel:giftCount
to connect to the customer's own business server. After completing balance verification, gift billing, and consumption statistics, call TUIGiftListView
's sendGift
to send the gift message.func onSendGift(giftListView view: TUIGiftListView, giftModel: TUIGift, giftCount: Int) {//... Here, connect to the customer's own business server to complete balance verification, gift billing, consumption statistics, etclet receiver = TUIGiftUser()//...Here set the gift recipient informationview.sendGift(giftModel: giftModel, giftCount: giftCount, receiver: receiver)}
Was this page helpful?