Gift Effects

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
Android
iOS
Flutter
step 1:Download the TUILiveKit component
Clone/download the code from GitHub, then copy the tuilivekit subdirectory under the Android directory to the same-level directory as your app in the current project, as shown in the figure below:
﻿
﻿
﻿
step 2:Project Configuration
1. Add the jitpack repository address in the 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).
settings.gradle.kts
settings.gradle
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
﻿
        // Add jitpack repository url
        maven { url = uri("https://jitpack.io") }
    }
}
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
﻿
        // Add jitpack repository url
        maven { url 'https://jitpack.io' }
    }
}
2. Add the following code in the settings.gradle.kts (or settings.gradle) file in the project root directory. It enables importing the downloaded tuilivekit component into your current project:
settings.gradle.kts
settings.gradle
include(":tuilivekit")
include ':tuilivekit'
3. Locate the 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:
build.gradle.kts
build.gradle
api(project(":tuilivekit"))
api project(':tuilivekit')
Note:
Note: The TUILiveKit project internally depends on 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.
4. Since we use Java reflection features internally in the SDK, some classes in the SDK need to be added to the non-obfuscation list. Therefore, you need to add the following code in the 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.** { *;}
5. Find the 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 sdk
    android:allowBackup="false"
    tools:replace="android:allowBackup">
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.
Swift
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: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.19.0
  # Add gift dependency
  live_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
Android
iOS
Flutter
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 TUIGift
﻿
let 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 liveRoomId
  owner: ownerInfo,                  /// ownerInfo    Replace with your live stream host information
  self: selfInfo,                    /// selfInfo     Replace with your login user information
);
﻿
GiftDisplayWidget(controller: _giftDisplayController!);
Listen for Gift Sending and Receiving Messages
Android
iOS
Flutter
To need to get callback information for receiving gifts, you can implement the onReceiveGift function in TUIGiftPlayViewListener of GiftPlayView.
giftPlayView.setListener(new GiftPlayView.TUIGiftPlayViewListener() {
    @Override
    public void onReceiveGift(Gift gift, int giftCount, GiftUser sender, GiftUser receiver) {
        
    }
﻿
    @Override
    public 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 TUIGift
﻿
func 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 TUIGift
﻿
func 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 method
  onSendGiftCallback: _onSendGiftCallback,           /// _onSendGiftCallback    can be replaced with your custom process method
);
﻿
﻿
﻿
﻿
﻿
Bullet Animation	Full-Screen Animation
Gift Effects

Component Overview

Component Integration

Component Usage

Integrating Gift Player

Listen for Gift Sending and Receiving Messages

﻿
