GiftPlayView
Component Overview
Gift Player mainly provides playback functionality for displaying bullet animations, full-screen animations (in svga, mp4 formats), and like animations.Bullet Animation | Full-Screen Animation |
 |  |
Component Integration
1. Create a directory named com.trtc.uikit.livekit under the src/main/java directory in your project, and copy the common directory and component/gift directory under the livekit directory on github to the com.trtc.uikit.livekit directory you created.
2. Copy the res-common and res-gift directories under the main directory on github to the src/main directory in your own project.
3. Add the following configuration in the android node of your build.gradle.kts or build.gradle file:
sourceSets.getByName("main") {res.setSrcDirs(listOf("src/main/res", "src/main/res-common", "src/main/res-gift"))}
sourceSets {main {res.srcDirs = ['src/main/res','src/main/res-common','src/main/res-gift',]}}
4. Use the global string replacement feature in Android Studio to globally replace
import com.trtc.uikit.livekit.R; with your project's own R file. An example is as follows:
Import components using CocoaPods. The specific steps for importing components are as follows:
1. You need to download the
Gift and Common folders on GitHub to your local system.
2. Add
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
If you don't have a
Podfile file, first use the terminal to cd into the xxxx.xcodeproj directory, then create it with the following command:pod init
3. In the terminal, first
cd to the Podfile directory, then execute the following commands to install components.pod install
4. Any issues you encounter during integration and use, feel free to provide feedback.
1. In the 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
1. Execute the
2.
flutter pub get command.3. Configure multilingual support. Add the multilingual support of the gift component to the
localizationsDelegates and supportedLocales properties of your application's MaterialApp.MaterialApp(localizationsDelegates: const [...GiftLocalizations.localizationsDelegates,], supportedLocales: const [...GiftLocalizations.supportedLocales,],// ...);
Component Usage
Notes:
Since the gift component requires live room information parameters, it is necessary to load the gift component after Audience Entering the Live Room or anchor create live room.
Integrating Gift Player
gift display component
GiftPlayView itself will receive and play gift messages.GiftPlayView giftPlayView = new GiftPlayView(getContext());giftPlayView.init("roomId");
The gift display component
GiftPlayView itself receives and plays gift messages.You just need to create a
GiftPlayView object and add it to your view.import TUIGiftlet giftPlayView = GiftPlayView(groupId: roomId)// ...Add giftPlayView to your parent view here and adjust the layout
Build
GiftDisplayController and GiftDisplayWidget objects where you need to connect and display gift messages, and add the built GiftDisplayWidget object to your Widget tree. Sample code is as follows:GiftDisplayController _giftDisplayController = GiftDisplayController(rroomId: "roomId", /// roomId replace with your liveRoomIdowner: ownerInfo, /// ownerInfo Replace with your live stream host informationself: selfInfo, /// selfInfo Replace with your login user information);GiftDisplayWidget(controller: _giftDisplayController!);
Listen for Gift Sending and Receiving Messages
To need to get callback information for receiving gifts, you can implement the
onReceiveGift function in TUIGiftPlayViewListener of GiftPlayView.giftPlayView.setListener(new GiftPlayView.TUIGiftPlayViewListener() {@Overridepublic void onReceiveGift(Gift gift, int giftCount, GiftUser sender, GiftUser receiver) {}@Overridepublic void onPlayGiftAnimation(GiftPlayView view, Gift gift) {}});
Notes:
After you successfully enter the room, you will then receive the
onReceiveGift callback.If you need to get callback information for receiving gifts, you can implement the
giftPlayView:onReceiveGift:gift:giftCount:sender:receiver function in the GiftPlayViewDelegate proxy of GiftPlayView.import TUIGiftfunc giftPlayView(_ giftPlayView: GiftPlayView, onReceiveGift gift: TUIGift, giftCount: Int, sender: TUIGiftUser, receiver: TUIGiftUser)// Custom processing}
When playing the full - screen gift animation, you will receive the
giftPlayView:onPlayGiftAnimation:gift callback. In this callback, you can call the playGiftAnimation function to play the full - screen gift animation.import TUIGiftfunc giftPlayView(_ giftPlayView: GiftPlayView, onPlayGiftAnimation gift: TUIGift) {let fileUrl = "" // You need to save the animation resource corresponding to gift.animationUrl to the sandbox, and then assign the animation address in the sandbox to fileUrl.giftPlayView.playGiftAnimation(playUrl: fileUrl)}
Notes:
make sure the passed parameters for the function
playGiftAnimation are local sandbox paths.If you need to get gift exchange callback information, you can call the
setGiftCallback method of GiftDisplayController. Sample code is as follows:_giftDisplayController?.setGiftCallback(onReceiveGiftCallback: _onReceiveGiftCallback, /// _onReceiveGiftCallback can be replaced with your custom process methodonSendGiftCallback: _onSendGiftCallback, /// _onSendGiftCallback can be replaced with your custom process method);
