Tencent Cloud

Recent Pages

Android

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.
TUIGiftListView giftListView = new TUIGiftListView(mContext, roomId); //generator giftListView object
List<TUIGift> giftList = new ArrayList<>() //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, Object>: 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 callback in the OnGiftListener of TUIGiftListView, get the number of gifts and gift information, after preprocessing, you can call the sendGift function of TUIGiftListView for the actual sending of gifts.
public void onSendGift(TUIGiftListView view, TUIGift gift, int giftCount) {
   //...This operation is preprocessing, such as verifying the balance of the current user
   TUIGiftUser receiver = new TUIGiftUser();
   //...Set the gift receiver information here
   giftListView.sendGift(gift, giftCount, receiver);
}
Receive Gift
The gift display component TUIGiftPlayView will receive and play gift messages by itself.
TUIGiftPlayView giftPlayView = new TUIGiftPlayView(mContext, roomId);
Note：
TUIGiftPlayView requires full-screen integration.
If you need to get the callback information of receiving gifts, you can implement the onReceiveGift callback in the TUIGiftPlayViewListener of TUIGiftPlayView.
﻿
public interface TUIGiftPlayViewListener {
    void onReceiveGift(TUIGift gift, int giftCount, TUIGiftUser sender, TUIGiftUser receiver);
    //...
}
Play Gift Animation
You need to actively invoke the playGiftAnimation method of TUIGiftPlayView when you receive onPlayGiftAnimation callback from the TUIGiftPlayViewListener of TUIGiftPlayView.
﻿
public interface TUIGiftPlayViewListener {
    void onPlayGiftAnimation(TUIGiftPlayView view, TUIGift gift);
    //...
}
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
Implementing the onRecharge callback in the OnGiftListener of TUIGiftListView can be used to receive the click event of the recharge button thrown by the gift display panel. Here, you can connect to your own recharge system.
public void onRecharge(TUIGiftListView view) {
    //...to recharge
    //setup the latest balance
    giftListView.setBalance(balance);
}
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/src/main/java/com/trtc/uikit/livekit/liveroom/view/audience/component/AudienceFunctionView.java
﻿
mGiftCloudServer.queryGiftInfoList((error, result) -> post(() -> {
    if (error == Error.NO_ERROR) {
        mGiftListPanelView.setGiftList(result);
    } else {
        ToastUtil.toastLongMessage("query gift list error, code = " + error);
    }
}));
Note：
1. Customers implement the logic of mGiftCloudServer.queryGiftInfoList on their own, get a custom gift list List<TUIGift>, and set the gift list through GiftListView.setGiftList.
2. The animationUrl of the gift is required to be a SVGA animation.
2、Customize giftPanel`s balance
// Source code path：tuilivekit/src/main/java/com/trtc/uikit/livekit/liveroom/view/audience/component/AudienceFunctionView.java
﻿
mGiftCloudServer.queryBalance((error, result) -> post(() -> {
    if (error == Error.NO_ERROR) {
        mGiftListPanelView.setBalance(result);
    } else {
        ToastUtil.toastLongMessage("query balance error, code = " + error);
    }
}));
Note：
Customers implement the logic of mGiftCloudServer.queryBalance on their own, obtain the gift balance, and update the gift balance through GiftListView.setBalance.
3、Customize gift consumption logic
// Source code path：tuilivekit/src/main/java/com/trtc/uikit/livekit/liveroom/view/audience/component/AudienceFunctionView.java
﻿
@Override
public void onSendGift(TUIGiftListView view, TUIGift gift, int giftCount) {
    TUIGiftUser receiver = new TUIGiftUser();
    receiver.userId = mLiveRoomInfo.anchorInfo.userId;
    receiver.userName = mLiveRoomInfo.anchorInfo.name.get();
    receiver.avatarUrl = mLiveRoomInfo.anchorInfo.avatarUrl.get();
    receiver.level = "0";
    mGiftCloudServer.sendGift(TUILogin.getUserId(), receiver.userId, gift, giftCount,
            (error, result) -> post(() -> {
       if (error == Error.NO_ERROR) {
           view.sendGift(gift, giftCount, receiver);
           view.setBalance(result);
       } else {
           if (error == Error.BALANCE_INSUFFICIENT) {
               String info = getResources().getString(R.string.livekit_gift_balance_insufficient);
               ToastUtil.toastLongMessage(info);
           } else {
               ToastUtil.toastLongMessage("send gift error, code = " + error);
           }
       }
    }));
}
Note：
Customers implement the logic of mGiftCloudServer.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/src/main/java/com/trtc/uikit/livekit/liveroom/view/audience/component/AudienceLivingView.java
// tuilivekit/src/main/java/com/trtc/uikit/livekit/liveroom/view/anchor/component/livestreaming/AnchorLivingView.java
﻿
@Override
public void onPlayGiftAnimation(TUIGiftPlayView view, TUIGift gift) {
    mGiftCacheService.request(gift.animationUrl, (error, result) -> {
        if (error == 0) {
            view.playGiftAnimation(result);
        }
    });
}
Note：
Customers implement the logic of mGiftCacheService.request on their own, successfully load the animation to get the result (of InputStream type), and then play the gift animation through  playGiftAnimation of TUIGiftPlayView.