tencent cloud

Feedback

Last updated: 2024-04-26 14:30:52
    The interactive gift component is a virtual gift interaction platform designed to add more fun to users' social experiences. With this component, users can send virtual gifts to their favorite live streamers to show their appreciation, love, and support. The interactive gift component supports setting gift materials, displaying balance, playing ordinary gifts and full-screen gifts, and adding a recharge button, etc.

    Overview

    
    
    
    Display Gifts
    
    
    
    Play normal gift
    
    
    
    Play full-screen gift

    Gift System

    
    
    
    
    
    
    Gift system`s Structure diagram
    Gift system`s Sequence diagram

    Integration

    The gift component mainly provides 2 objects:
    TUIGiftListView: A gift panel that presents the gift list, sends gifts, and recharges.
    TUIGiftPlayView: A panel that plays gifts and automatically listens to gift messages.

    Set gift materials

    The gift panel component TUIGiftListView provides the setGiftList interface, which can be used to set gift materials.
    let giftListView: TUIGiftListView = TUIGiftListView(groupId: xxx) //generator giftListView object
    let giftList: [TUIGift] = ... //you can change gift materials here
    giftListView.setGiftList(giftList) //set gift materials of giftListPanleView
    Note: The parameters and descriptions of TUIGift are as follows:
    giftId: String: Gift ID
    giftName: String: Gift Name
    imageUrl: String: Image displayed on the gift panel
    animationUrl: String: SVGA animation URL
    price: Int: Gift Price
    extInfo: [String: AnyCodable]: Custom extension information
    The interactive gift component supports setting your own gift materials. If the animationUrl is empty, the gift playing effect will be an ordinary play, and the content played will be the image linked by the imageUrl. If the animationUrl is not empty, the playing effect will be a full-screen play, and the content played will be the corresponding svga animation.

    Send gift

    Implement the onSendGift delegate function in the TUIGiftListViewDelegate of TUIGiftListView to get the gift count and gift information. After preprocessing, you can call the sendGift function of TUIGiftListView for the actual sending of gifts.
    giftListView.delegate = self
    
    extension ViewController: TUIGiftListViewDelegate {
    func onSendGift(giftListView view: TUIGiftListView, giftModel: TUIGift, giftCount: Int) {
    //...Here is the preprocessing, such as verifying the current user's balance and other operations.
    let receiver = TUIGiftUser()
    //...Set the gift recipient information here.
    view.sendGift(giftModel: giftModel, giftCount: giftCount, receiver: receiver)
    }
    }

    ReceiveGift

    The gift display component TUIGiftPlayView will receive and play gift messages by itself.
    let giftDisplayView: TUIGiftPlayView = TUIGiftPlayView(groupId:xxx)
    Note:
    TUIGiftPlayView requires full-screen integration.
    If you need to get the callback information of receiving gifts, you can implement the giftPlayView:onPlayGift delegate function in the TUIGiftPlayViewDelegate of TUIGiftPlayView.
    
    extension ViewController: TUIGiftPlayViewDelegate {
    func giftPlayView(_ giftPlayView: TUIGiftPlayView, onPlayGift gift: TUIGift, giftCount: Int, sender: TUIGiftUser, receiver: TUIGiftUser) {
    //...You can handle this on your own here.
    }
    }

    Play Gift Animation

    You need to actively invoke the playGiftAnimation method of TUIGiftPlayView when you receive onPlayGiftAnimation callback from the TUIGiftPlayViewDelegate of TUIGiftPlayView.
    extension ViewController: TUIGiftPlayViewDelegate {
    func giftPlayView(_ giftPlayView: TUIGiftPlayView, onPlayGiftAnimation gift: TUIGift) {
    //...
    }
    }
    Note:
    Only SVGA animations are supported.

    Set balance

    The gift panel component TUIGiftListView provides the setBalance interface, which can be used to set the balance value displayed on the gift panel.
    giftListView.setBalance(xxx)

    Recharge

    Implement the onRecharge delegate function in the TUIGiftListViewDelegate of TUIGiftListView, which can be used to receive the click event of the recharge button thrown by the gift display panel, and connect to your own recharge system here.
    extension ViewController: TUIGiftListViewDelegate {
    func onRecharge(giftListView view: TUIGiftListView) {
    //...This can be used to connect to your own recharge system. After the recharge is completed,
    //you can call view.setBalance(xxx) to set the balance display of the gift display panel.
    }
    }
    Note:
    1. The gift balance is a concept of virtual currency, not real money.
    2. The gift recharge logic is implemented externally, and customers can connect to their own recharge system. After the recharge is completed, the gift balance is updated.

    Modify source code to customize

    1. Customize giftList

    Modify the gift list on the audience's gift panel:
    // Source code path:TUILiveKit/Source/LiveRoom/View/Audience/Component/AudienceLivingView.swift
    
    private lazy var giftPanelView: TUIGiftListView = {
    let view = TUIGiftListView(groupId: liveRoomInfo.roomId.value)
    giftCloudServer.queryGiftInfoList { [weak self] error, giftList in
    guard let self = self else { return }
    DispatchQueue.main.async {
    if error == .noError {
    view.setGiftList(giftList)
    } else {
    self.makeToast("query gift list error, code = \\(error)")
    }
    }
    }
    return view
    }()
    
    Note:
    1. Customers implement the logic of giftCloudServer.queryGiftInfoList on their own, get a custom gift list [TUIGift] , and set the gift list through view.setGiftList.
    2. The animationUrl of the gift is required to be a SVGA animation.

    2. Customize giftPanel`s balance

    // Source code path:TUILiveKit/Source/LiveRoom/View/Audience/Component/AudienceLivingView.swift
    
    private lazy var giftPanelView: TUIGiftListView = {
    let view = TUIGiftListView(groupId: liveRoomInfo.roomId.value)
    giftCloudServer.queryBalance { [weak self] error, balance in
    guard let self = self else { return }
    DispatchQueue.main.async {
    if error == .noError {
    view.setBalance(balance)
    } else {
    self.makeToast("query balance error, code = \\(error)")
    }
    }
    }
    return view
    }()
    Note:
    Customers implement the logic of giftCloudServer.queryBalance on their own, obtain the gift balance, and update the gift balance through view.setBalance.

    3. Customize gift consumption logic

    // Source code path:TUILiveKit/Source/LiveRoom/View/Audience/Component/AudienceLivingView.swift
    
    func onSendGift(giftListView view: TUIGiftListView, giftModel: TUIGift, giftCount: Int) {
    let receiver = TUIGiftUser()
    receiver.userId = liveRoomInfo.anchorInfo.value.userId
    receiver.userName = liveRoomInfo.anchorInfo.value.name.value
    receiver.avatarUrl = liveRoomInfo.anchorInfo.value.avatarUrl.value
    receiver.level = "0"
    giftCloudServer.sendGift(sender: TUILogin.getUserID() ?? "",
    receiver: receiver.userId,
    giftModel: giftModel,
    giftCount: giftCount) { [weak self] error, balance in
    guard let self = self else { return }
    if error == .noError {
    view.sendGift(giftModel: giftModel, giftCount: giftCount, receiver: receiver)
    view.setBalance(balance)
    } else {
    self.makeToast(.balanceInsufficientText)
    }
    }
    }
    
    Note:
    Customers implement the logic of giftCloudServer.sendGift on their own. If the gift can be consumed, send the gift message through GiftListView's sendGift, and then update the gift balance through setBalance.

    4. Customize load and play gift animation

    
    // Source code path:
    // TUILiveKit/Source/LiveRoom/View/Audience/Component/AudienceLivingView.swift
    // TUILiveKit/Source/LiveRoom/View/Anchor/Living/AudienceLivingView.swift
    
    func giftPlayView(_ giftPlayView: TUIGiftPlayView, onPlayGiftAnimation gift: TUIGift) {
    giftCacheService.request(urlString: gift.animationUrl) { error, data in
    guard let data = data else { return }
    if error == 0 {
    DispatchQueue.main.async {
    giftPlayView.playGiftAnimation(animationData: data)
    }
    }
    }
    }
    
    Note:
    Customers implement the logic of giftCacheService.request on their own, successfully load the animation to get the data (of Data type), and then play the gift animation through playGiftAnimation of TUIGiftPlayView.
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support