GiftListView

Component Overview
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.
effect display
﻿
Component Integration
Android
iOS
Flutter
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:
build.gradle.kts
build.gradle
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.
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 give 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 the Gift Panel Component
Android
iOS
Flutter
Create a 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() {
    @Override
    public void onSendGift(GiftListPanelView view, Gift gift, int giftCount) {
        
    }
});
﻿
giftListPanelView.sendGift(new Gift(), 1, new GiftUser());
Create a GiftListView object and add it to your view. At the same time, you also need to implement the onSendGift callback method in GiftListViewDelegate.
When you click the send button on the 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 TUIGift
﻿
private let giftList: [TUIGift] = [] //...Replace this with your gift list
﻿
lazy 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 layout
﻿
func 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 here
    let 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)
}
Notes:
After you successfully enter the room, you can then successfully call the sendGift function.
Build 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 liveRoomId
  owner: ownerInfo,                 /// ownerInfo    Replace with your live stream host information
  self: selfInfo,                   /// selfInfo     Replace with your login user information
);
﻿
GiftSendWidget(controller: _giftSendController);
Customizable Gift Panel
Android
iOS
Flutter
If you need to modify the gift list on the gift panel:
GiftListPanelView giftListPanelView = new GiftListPanelView(getContext());
giftListPanelView.setGiftList(giftList);
If you need to modify the gift list on the gift panel, you can call the setGiftList method of GiftListView to implement it.
import TUIGift
﻿
private let giftList: [TUIGift] = [] //...Replace this with your gift list
﻿
lazy var giftListView: GiftListView = {
    let view = GiftListView(roomId: roomId, delegate: self)
    view.setGiftList(giftList)
    return view
}()
Notes:
The animationUrl of the gift must be a SVGA animation.
If you need to modify the gift list on the gift panel, you can call the setGiftList method of GiftSendController. The example is as follows: 
         List<GiftModel> giftList = [     /// custom your gift list data source
  GiftModel(giftId: "1", giftName: "egg", imageUrl: "giftImageUrl", price: 10)
  GiftModel(giftId: "2", giftName: "star", imageUrl: "giftImageUrl", price: 10)
];     
﻿
_giftSendController.setGiftList(giftList);
﻿
﻿
﻿
﻿