Gift Panel Component displays our default built-in gifts. Clicking on these gifts allows you to send them to the live streaming room. The anchor and users in the live streaming room can play these gifts through the Gift Player component.

settings.gradle.kts (or settings.gradle) file in the project root directory: add the jitpack repository dependency (to download the SVGAPlayer third-party library for playing gift svg animations).dependencyResolutionManagement {repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)repositories {google()mavenCentral()// Add jitpack repository urlmaven { url = uri("https://jitpack.io") }}}
dependencyResolutionManagement {repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)repositories {google()mavenCentral()// Add jitpack repository urlmaven { url 'https://jitpack.io' }}}
settings.gradle.kts (or settings.gradle) file in the project root directory. It enables importing the downloaded tuilivekit component into your current project:include(":tuilivekit")
include ':tuilivekit'
build.gradle.kts (or build.gradle) file under the app directory and add the following code in it. It enables declaring the current app's dependency on the newly joined tuilivekit component:api(project(":tuilivekit"))
api project(':tuilivekit')
TRTC SDK, IM SDK, tuiroomengine, and the public library tuicore by default. Developers do not need to separately configure them. If needed, just modify the tuilivekit/build.gradle file to upgrade.proguard-rules.pro file:-keep class com.tencent.** { *; }-keep class com.trtc.uikit.livekit.livestreamcore.** { *; }-keep class com.trtc.uikit.livekit.component.gift.store.model.** { *; }-keep class com.squareup.wire.** { *; }-keep class com.opensource.svgaplayer.proto.** { *; }-keep class com.tcmediax.** { *; }-keep class com.tencent.** { *; }-keep class com.tencent.xmagic.** { *; }-keep class androidx.exifinterface.** {*;}-keep class com.google.gson.** { *;}# Tencent Effect SDK - beauty-keep class com.tencent.xmagic.** { *;}-keep class org.light.** { *;}-keep class org.libpag.** { *;}-keep class org.extra.** { *;}-keep class com.gyailib.**{ *;}-keep class com.tencent.cloud.iai.lib.** { *;}-keep class com.tencent.beacon.** { *;}-keep class com.tencent.qimei.** { *;}-keep class androidx.exifinterface.** { *;}
AndroidManifest.xml file under the app directory, add tools:replace="android:allowBackup" and android:allowBackup="false" in the application node, overwrite the setting within component, and use your own setting.// app/src/main/AndroidManifest.xml<application...// add the following configuration to overwrite the configuration in the dependent sdkandroid:allowBackup="false"tools:replace="android:allowBackup">
Gift and Common folders on GitHub to your local system.
pod 'TUIGift' and pod 'TUILiveResources' dependencies in your Podfile.target 'xxxx' do......pod 'TUILiveResources', :path => '../Component/Common/TUILiveResources.podspec'// The path is the relative path between your Podfile file and TUILiveResources.Podspec file.pod 'TUIGift', :path => '../Component/Gift/TUIGift.podspec'// The path is the relative path between your Podfile file and TUIGift.Podspec file.end
Podfile file, first use the terminal to cd into the xxxx.xcodeproj directory, then create it with the following command:pod init
cd to the Podfile directory, then execute the following commands to install components.pod install
dependencies node of the pubspec.yaml file in the project engineering, add a dependency on gift.dependencies:flutter:sdk: flutterflutter_localizations:sdk: flutterintl: ^0.19.0# Add gift dependencylive_uikit_gift: ^1.0.0
flutter pub get command.localizationsDelegates and supportedLocales properties of your application's MaterialApp.MaterialApp(localizationsDelegates: const [...GiftLocalizations.localizationsDelegates,], supportedLocales: const [...GiftLocalizations.supportedLocales,],// ...);
GiftListPanelView object and add it to your view. Also need to implement the onSendGift callback in OnSendGiftListener of GiftListPanelView, retrieve the gift count and gift information. After pre-processing, you can call the sendGift function of GiftListPanelView for the actual sending of gifts.GiftListPanelView giftListPanelView = new GiftListPanelView(getContext());giftListPanelView.init("roomId");giftListPanelView.setListener(new GiftListPanelView.OnSendGiftListener() {@Overridepublic void onSendGift(GiftListPanelView view, Gift gift, int giftCount) {}});giftListPanelView.sendGift(new Gift(), 1, new GiftUser());
callback method in GiftListViewDelegate.GiftListView panel, you will receive this callback approach. You may obtain the gift count and gift information for the gifts prepared for sending in this method. After pre-processing, you can call the sendGift function of GiftListView for the actual sending of gifts.import TUIGiftprivate let giftList: [TUIGift] = [] //...Replace this with your gift listlazy var giftListView: GiftListView = {let view = GiftListView(roomId: roomId, delegate: self)view.setGiftList(giftList)return view}()// ...Add giftListView to your parent view here and adjust the layoutfunc onSendGift(gift model: TUIGift, giftCount: Int) {//...Perform pre-processing here, such as validating the current user's balance and other operations.let receiver = TUIGiftUser()//...Set gift recipient information herelet completion: TUIGiftIMSendBlock = { code, message in//...This is the post callback for sendGift. You can add your post-processing logic here, such as showing a toast.}giftListView.sendGift(model: model, giftCount: giftCount, receiver: receiver, completion: completion)}
sendGift function.GiftSendController and GiftSendWidget objects where you need to integrate the send gift message feature, and add the constructed GiftSendWidget object to your Widget tree. Sample code is as follows:GiftSendController _giftSendController = GiftSendController(roomId: "romId", /// roomId replace with your liveRoomIdowner: ownerInfo, /// ownerInfo Replace with your live stream host informationself: selfInfo, /// selfInfo Replace with your login user information);GiftSendWidget(controller: _giftSendController);
GiftListPanelView giftListPanelView = new GiftListPanelView(getContext());giftListPanelView.setGiftList(giftList);
setGiftList method of GiftListView to implement it.import TUIGiftprivate let giftList: [TUIGift] = [] //...Replace this with your gift listlazy var giftListView: GiftListView = {let view = GiftListView(roomId: roomId, delegate: self)view.setGiftList(giftList)return view}()
animationUrl of the gift must be a SVGA animation.setGiftList method of GiftSendController. The example is as follows: List<GiftModel> giftList = [ /// custom your gift list data sourceGiftModel(giftId: "1", giftName: "egg", imageUrl: "giftImageUrl", price: 10)GiftModel(giftId: "2", giftName: "star", imageUrl: "giftImageUrl", price: 10)];_giftSendController.setGiftList(giftList);
Feedback