礼物对接

projects/live-app/src/app/components/flutter-comp/flutter-comp.component.html

@@ -19,5 +19,5 @@
     </div> -->
   </div>
 </div>
-<div class="vap-gift" id="vap-gift"></div>
 }
+<div class="vap-gift" [id]="domId"></div>

projects/live-app/src/app/components/flutter-comp/flutter-comp.component.ts

@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { MessageService } from '../../../services/message.service';
+declare const Vap: any;
 @Component({
   selector: 'app-flutter-comp',
   templateUrl: './flutter-comp.component.html',
@@ -8,11 +9,48 @@ import { MessageService } from '../../../services/message.service';
   imports: []
 })
 export class FlutterCompComponent implements OnInit {
-
+  @Input('domId') domId: string = 'vap-gift'
   constructor(
     public msgSerrvice: MessageService
-  ) { }
-
+  ) { 
+    this.msgSerrvice.eventplay$.subscribe((data) => {
+      this.playGift(data);
+    });
+  }
+  playGift(giftModule:any){
+    console.log(giftModule);
+    this.msgSerrvice.isPlayer = true
+    let dom = document.getElementById(this.domId);
+    console.log(dom);
+    let vapPlayer = new Vap.default({
+      container: dom, // 要渲染的载体，dom元素
+      src: giftModule.gift?.video, // vap动画地址
+      config: giftModule.gift?.config, // 播放vap动画需要的 json文件。必填
+      width: window.innerWidth, // 容器宽度
+      height: window.innerHeight, // 容器高度
+      fps: 30, // 帧数，json文件中有这个视频的帧数的，可以看一下，
+      mute: false, // 静音
+      type: 2, // 组件基于type字段做了实例化缓存，不同的VAP实例应该使用不同的type值（如0、1、2等）
+      loop: false, // 循环
+      precache: true, // 预加载视频，下载完再播。小动画建议边下边播，大动画还是先下后播吧，因为太大了或者网络不好，会一卡一卡的。
+      beginPoint: 0, // 起始播放时间点(单位秒),在一些浏览器中可能无效
+      accurate: true, // 是否启用精准模式（使用requestVideoFrameCallback提升融合效果，浏览器不兼容时自动降级）
+    });
+    vapPlayer.play(); // 开始播放
+    vapPlayer.on('ended', () => {
+      // 监听播放完成的事件
+      vapPlayer.destroy();
+      vapPlayer = null;
+      console.log('播放结束');
+      this.msgSerrvice.giftLogMap.pop();
+      if(this.msgSerrvice.giftLogMap.length > 0){
+        this.playGift(this.msgSerrvice.giftLogMap.slice(-1)[0]);
+      }else{
+        this.msgSerrvice.isPlayer = false
+      }
+    });
+    vapPlayer.on('playering', function() { console.log('playering'); })
+  }
   ngOnInit() {
   }
 }

projects/live-app/src/app/components/gift-modal/gift-modal.component.ts

@@ -8,6 +8,7 @@ import {
   ionicStandaloneModules,
   AlertController,
   LoadingController,
+  ToastController,
 } from '../../../modules/ionic-standalone.modules';
 import { AccountService } from '../../../services/account.service';
 import { MessageService } from '../../../services/message.service';
@@ -53,6 +54,7 @@ export class GiftModalComponent implements OnInit {
     public liveService: LiveService,
     private loadingCtrl: LoadingController,
     public accServ: AccountService,
+    public toastController: ToastController,
     public msgSerrvice: MessageService
   ) {
   }
@@ -77,6 +79,15 @@ export class GiftModalComponent implements OnInit {
 
   async sendGift() {
     let _this = this;
+    if(!this.wallet?.balance || this.wallet.balance < this.currentGift.price * this.giftCount){
+      const toast = await this.toastController.create({
+        message: '余额不足',
+        color: 'danger',
+        duration: 1000,
+      });
+      toast.present();
+      return;
+    }
     if (!this.currentGift?.id || this.giftCount < 1) return;
     const alert = await this.alertController.create({
       cssClass: 'my-custom-class',
@@ -140,7 +151,7 @@ export class GiftModalComponent implements OnInit {
       height: window.innerHeight, // 容器高度
       fps: 30, // 帧数，json文件中有这个视频的帧数的，可以看一下，
       mute: false, // 静音
-      type: 2, // 组件基于type字段做了实例化缓存，不同的VAP实例应该使用不同的type值（如0、1、2等）
+      type: 1, // 组件基于type字段做了实例化缓存，不同的VAP实例应该使用不同的type值（如0、1、2等）
       loop: false, // 循环
       precache: true, // 预加载视频，下载完再播。小动画建议边下边播，大动画还是先下后播吧，因为太大了或者网络不好，会一卡一卡的。
       beginPoint: 0, // 起始播放时间点(单位秒),在一些浏览器中可能无效

projects/live-app/src/modules/live/link-page/link-page.component.html

@@ -198,4 +198,4 @@
   [toUid]="this.room?.get('user').id"
 ></app-gift-modal>
 }
-<app-flutter-comp />
+<app-flutter-comp [domId]="'live-vap-gift'"></app-flutter-comp>

projects/live-app/src/services/message.service.ts

@@ -15,6 +15,9 @@ declare const Vap: any;
 export class MessageService {
   private eventSource = new Subject<any>();
   event$ = this.eventSource.asObservable();
+  private eventplay = new Subject<any>();
+  eventplay$ = this.eventplay.asObservable();
+
   company: string = 'Qje9D4bqol';
   rtmClient: any; // RTM实例
   // rtmClientMap: any = {};
@@ -164,7 +167,8 @@ export class MessageService {
         user: userData,
       });
       !this.isPlayer && setTimeout(() => {
-        this.playGift(this.giftLogMap.slice(-1)[0]);
+        // this.playGift(this.giftLogMap.slice(-1)[0]);
+        this.eventplay.next(this.giftLogMap.slice(-1)[0]);
       }, 0);
       return;
     }
@@ -273,8 +277,8 @@ export class MessageService {
   playGift(giftModule:any){
     console.log(giftModule);
     this.isPlayer = true
-    // let json = {"info":{"v":2,"f":56,"w":750,"h":1334,"fps":15,"videoW":1136,"videoH":1344,"aFrame":[754,0,375,667],"rgbFrame":[0,0,750,1334],"isVapx":0,"orien":0}}
     let dom = document.getElementById('vap-gift');
+    console.log(dom);
     let vapPlayer = new Vap.default({
       container: dom, // 要渲染的载体，dom元素
       src: giftModule.gift?.video, // vap动画地址