礼物对接

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

@@ -14,9 +14,10 @@
       送出<span class="gift-name">{{ msgSerrvice.giftLogMap[0]?.gift?.name }}</span>
       <span class="num">* {{ msgSerrvice.giftLogMap[0]?.count }}</span>
     </div>
-    <div class="gift-container">
+    <!-- <div class="gift-container">
       <img class="gift-img" [src]="msgSerrvice.giftLogMap[0]?.gift?.imgUrl" />
-    </div>
+    </div> -->
   </div>
 </div>
+<div class="vap-gift" id="vap-gift"></div>
 }

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

@@ -1,6 +1,6 @@
 .flutter-container {
   width: 100%;
-  height: 51.2821vw;
+  height: 120px;
   position: fixed;
   top: 0;
   left: 0;
@@ -23,7 +23,7 @@
   .user-region {
     // backdrop-filter: saturate(180%) blur(5.1282vw);
     // background: rgb(81 81 81 / 80%);
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.51), rgba(0, 0, 0, 0.24), rgba(47, 47, 47, 0.03));
+    // background: linear-gradient(to bottom, rgba(0, 0, 0, 0.51), rgba(0, 0, 0, 0.24), rgba(47, 47, 47, 0.03));
     color: #ffffff;
     // margin: 2.5641vw auto;
     // background: #fb475ec7;
@@ -127,3 +127,9 @@
       -5.1282vw -5.1282vw 10.2564vw #ffae34, 5.1282vw -10.2564vw 12.8205vw #ec760c, 0 -20.5128vw 17.9487vw #f38e1c;
   }
 }
+
+.vap-gift{
+  position: fixed;
+  top: 0;
+  z-index: 999;
+}

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

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { MessageService } from '../../../services/message.service';
-
 @Component({
   selector: 'app-flutter-comp',
   templateUrl: './flutter-comp.component.html',
@@ -16,5 +15,4 @@ export class FlutterCompComponent implements OnInit {
 
   ngOnInit() {
   }
-
 }

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

@@ -84,4 +84,4 @@
   <img [src]="currentGift?.imgUrl" alt="" />
 </div>
 } -->
-<div id="vap-warp"></div>
+<div class="vap-warp" id="vap-warp"></div>

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

@@ -152,7 +152,7 @@
     bottom: 102.5641vw;
   }
 }
-#vap-warp{
+.vap-warp{
   position: fixed;
   top: 0;
   z-index: 999;

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

@@ -58,7 +58,6 @@ export class GiftModalComponent implements OnInit {
   }
   async ngOnInit() {
     this.giftList = this.msgSerrvice.giftList;
-    // this.initPlayer()
   }
   async openModal() {
     let uid: any = Parse.User.current()?.id;
@@ -112,7 +111,9 @@ export class GiftModalComponent implements OnInit {
                 //   console.log(_this.isShowGiftModal);
                 //   console.log('5s后关闭');
                 // }, 5000);
-                this.initPlayer()
+                setTimeout(() => {
+                  this.initPlayer()
+                }, 0);
               })
               .catch((err) => {
                 _this.isOpenGift = false;
@@ -128,8 +129,8 @@ export class GiftModalComponent implements OnInit {
 
   
   initPlayer(){
+    console.log('emit 送出礼物');
     let json = this.currentGift.config
-    // 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-warp');
     let vapPlayer = new Vap.default({
       container: dom, // 要渲染的载体，dom元素
@@ -138,7 +139,7 @@ export class GiftModalComponent implements OnInit {
       width: window.innerWidth, // 容器宽度
       height: window.innerHeight, // 容器高度
       fps: 30, // 帧数，json文件中有这个视频的帧数的，可以看一下，
-      mute: true, // 静音
+      mute: false, // 静音
       type: 2, // 组件基于type字段做了实例化缓存，不同的VAP实例应该使用不同的type值（如0、1、2等）
       loop: false, // 循环
       precache: true, // 预加载视频，下载完再播。小动画建议边下边播，大动画还是先下后播吧，因为太大了或者网络不好，会一卡一卡的。
@@ -150,7 +151,7 @@ export class GiftModalComponent implements OnInit {
       // 监听播放完成的事件
       vapPlayer.destroy();
       vapPlayer = null;
-      console.log(123);
+      console.log('play end');
     });
     vapPlayer.on('playering', function() { console.log('playering'); })
   }

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

@@ -154,12 +154,15 @@ export class AiChatService {
     (SELECT COUNT(*) FROM "ProfileRadar" WHERE "toUser" = '${uid}' AND "name" = '关注' AND "isDeleted" IS NOT TRUE) AS fans;`;
     return this.http.customSQL(sql);
   }
-  async getGift(type?: string): Promise<any> {
-    let where = type ? `AND "type" = '${type}'` : '';
+  async getGift(type?: string,id?:string): Promise<any> {
+    let where = type ? `AND "type" = '${type}'` : ``;
+    let whereId = id ? `AND "objectId" = '${id}'` : ``;
     let sql = `SELECT "objectId" AS "id","name","price","order","imgUrl","video","type","rightsMap","config"
     FROM "GiftModule"
     WHERE "company" = '${this.company}'
+    AND "isDeleted" IS NOT TRUE
     ${where}
+    ${whereId}
     ORDER BY "price"`;
     const data: any = await this.http.customSQL(sql);
     return data?.data;

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

@@ -7,6 +7,8 @@ import { Subject } from 'rxjs';
 import { Router } from '@angular/router';
 import { AiChatService } from './aichart.service';
 declare const AgoraRTM: any;
+declare const Vap: any;
+
 @Injectable({
   providedIn: 'root',
 })
@@ -30,6 +32,7 @@ export class MessageService {
   giftLogMap: any = [];
   giftList: Array<any> = []; //礼物列表
   timeg: any;
+  isPlayer:boolean = false;
 
   reset() {
     this.options = { connectState: false };
@@ -152,13 +155,17 @@ export class MessageService {
     let toast;
     if (message.indexOf('ONUSERSENDGIFT_') > -1) {
       let arr = message.split('_');
-      let gift = this.giftList.find((item: any) => item.id == arr[1]);
+      // let gift = this.giftList.find((item: any) => item.id == arr[1]);
+      let r = await this.aiServ.getGift(undefined,arr[1])
+      let gift = r[0]
       this.giftLogMap.push({
         gift,
         count: arr?.[2],
         user: userData,
       });
-      !this.timeg && this.showGiftDecrement();
+      !this.isPlayer && setTimeout(() => {
+        this.playGift(this.giftLogMap.slice(-1)[0]);
+      }, 0);
       return;
     }
     if (message.indexOf('USERGREETING_') > -1) {
@@ -251,16 +258,51 @@ export class MessageService {
   }
 
   // 礼物消息
-  showGiftDecrement() {
-    this.timeg = setTimeout(() => {
-      this.giftLogMap.shift();
-      if (this.giftLogMap.length > 0) {
-        this.showGiftDecrement();
-      } else {
-        clearTimeout(this.timeg);
-        this.timeg = null;
+  // showGiftDecrement() {
+  //   this.timeg = setTimeout(() => {
+  //     this.giftLogMap.shift();
+  //     if (this.giftLogMap.length > 0) {
+  //       this.showGiftDecrement();
+  //     } else {
+  //       clearTimeout(this.timeg);
+  //       this.timeg = null;
+  //     }
+  //   }, 5000);
+  // }
+  
+  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');
+    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.giftLogMap.pop();
+      if(this.giftLogMap.length > 0){
+        this.playGift(this.giftLogMap.slice(-1)[0]);
+      }else{
+        this.isPlayer = false
       }
-    }, 5000);
+    });
+    vapPlayer.on('playering', function() { console.log('playering'); })
   }
 
   async getRoom(uid: string): Promise<string | undefined> {