|
|
@@ -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> {
|
