Browse Source

更新全平台礼物飘窗

warrior 2 months ago
parent
commit
94cd6f1666

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

@@ -1,15 +1,21 @@
-@if (msgSerrvice.giftLog) {
+@if (msgSerrvice.giftLogMap.length > 0) {
 <div
   class="flutter-container"
   [style.background-image]="'url(img/flutter.gif)'"
 >
   <div class="flutter-banner">
-    <div class="text">甜心宝贝送出法拉利</div>
-    <div class="gift-container">
+    <div class="user-region">
       <img
-        class="gift-img"
-        src="https://file-cloud.fmode.cn/Qje9D4bqol/20241203/q1f26f111037245.png"
+        [src]="msgSerrvice.giftLogMap[0]?.user?.avatar?.value"
+        alt=""
+        class="avatar"
       />
+      <span class="user-nickname">{{ msgSerrvice.giftLogMap[0]?.user?.nickname?.value }}</span>
+      送出<span class="gift-name">{{ msgSerrvice.giftLogMap[0]?.gift?.name }}</span>
+      <span class="num">* {{ msgSerrvice.giftLogMap[0]?.count }}</span>
+    </div>
+    <div class="gift-container">
+      <img class="gift-img" [src]="msgSerrvice.giftLogMap[0]?.gift?.imgUrl" />
     </div>
   </div>
 </div>

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

@@ -5,23 +5,52 @@
   top: 0;
   left: 0;
 
-  .flutter-banner{
+  .flutter-banner {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    background: linear-gradient(to bottom, rgb(0 0 0 / 51%), rgb(0 0 0 / 24%), rgb(47 47 47 / 3%));
+    background: linear-gradient(
+      to bottom,
+      rgb(0 0 0 / 51%),
+      rgb(0 0 0 / 24%),
+      rgb(47 47 47 / 3%)
+    );
   }
 
-  .text {
+  .user-region {
     color: #ffffff;
     margin: 10px auto;
     // background: #fb475ec7;
     padding: 6px 20px;
     width: 80%;
     text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+    }
+    .user-nickname {
+      margin-left: 10px;
+    }
+    .gift-name {
+      font-size: 20px;
+      font-weight: bold;
+      font-family: '微软雅黑';
+      background: #d32d2d;
+      color: #fff;
+      text-align: center;
+      margin: 0 10px;
+      text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
+        -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 0 -80px 70px #f38e1c; /*设置文字阴影*/
+      animation: fontAmt 2s infinite; /*设置动画*/
+      padding: 0px 10px;
+    }
   }
   .gift-container {
     width: 100%;
@@ -74,4 +103,24 @@
   100% {
     right: 390px;
   }
-}
+}
+
+@keyframes fontAmt {
+  /*创建动画*/
+  0% {
+    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
+      -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 0 -80px 70px #f38e1c;
+  }
+  30% {
+    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
+      -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 10px -90px 80px #f38e1c;
+  }
+  60% {
+    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
+      -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 0px -80px 100px #f38e1c;
+  }
+  100% {
+    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
+      -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 0 -80px 70px #f38e1c;
+  }
+}

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

@@ -10,6 +10,7 @@ import {
   LoadingController,
 } from '../../../modules/ionic-standalone.modules';
 import { AccountService } from '../../../services/account.service';
+import { MessageService } from '../../../services/message.service';
 @Component({
   selector: 'app-gift-modal',
   templateUrl: './gift-modal.component.html',
@@ -50,10 +51,11 @@ export class GiftModalComponent implements OnInit {
     public liveService: LiveService,
     private loadingCtrl: LoadingController,
     public accServ: AccountService,
-  ) {}
+    public msgSerrvice: MessageService
+    ) {}
 
   async ngOnInit() {
-    this.giftList = await this.aiServ.getGift();
+    this.giftList = this.msgSerrvice.giftList
   }
   async openModal() {
     let uid: any = Parse.User.current()?.id;
@@ -101,6 +103,7 @@ export class GiftModalComponent implements OnInit {
                 _this.sendEmit.emit(); //触发父组件的sendEmit事件
                 _this.isOpenGift = false;
                 _this.isShowGiftModal = true;
+                _this.publishGiftMessage(_this.currentGift.id, _this.giftCount);
                 setTimeout(() => {
                   _this.isShowGiftModal = false;
                   console.log(_this.isShowGiftModal);
@@ -121,4 +124,12 @@ export class GiftModalComponent implements OnInit {
   onCloseGiftModal(){
     if(!this.isShowGiftModal) this.isShowGiftModal = false
   }
+
+  publishGiftMessage(gid:string,count:number) {
+    this.msgSerrvice.subscribeMessage(this.toUid, {
+      message: true,
+      presence: true,
+    }); //进入对方主播频道发送聊天邀请
+    this.msgSerrvice.publishMessage(`ONUSERSENDGIFT_${gid}_'${count}`,this.toUid);
+  }
 }

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

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

+ 2 - 0
projects/live-app/src/modules/live/link-page/link-page.component.ts

@@ -17,6 +17,7 @@ import {
   ToastController,
 } from '../../ionic-standalone.modules';
 import { MessageService } from '../../../services/message.service';
+import { FlutterCompComponent } from '../../../app/components/flutter-comp/flutter-comp.component';
 @Component({
   selector: 'app-link-page',
   templateUrl: './link-page.component.html',
@@ -29,6 +30,7 @@ import { MessageService } from '../../../services/message.service';
     CommonModule,
     SharedModule,
     GiftModalComponent,
+    FlutterCompComponent
   ],
 })
 export class LinkPageComponent implements OnInit {

+ 1 - 0
projects/live-app/src/modules/user/certification/certification.component.ts

@@ -182,6 +182,7 @@ export class CertificationComponent implements OnInit {
     this.profile?.set('sex', sex);
     this.profile?.set('city', city);
     this.profile?.set('isCross', true);
+    this.profile?.set('birthdate', String(this.getAgeFromIdCard(this.idCard)));
     await this.profile?.save();
     if (this.profile?.id) {
       localStorage.setItem('profile', JSON.stringify(this.profile.toJSON()));

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

@@ -10,7 +10,7 @@ export class AiChatService {
   company: string = 'Qje9D4bqol';
   emojis: Array<any> = [];
 
-  constructor(private router: Router, private http: HttpService) {
+  constructor(private http: HttpService) {
     this.initEmoji();
   }
   async getAccountLog(): Promise<any> {

+ 39 - 12
projects/live-app/src/services/message.service.ts

@@ -5,6 +5,7 @@ import { AlertController, ToastController } from '@ionic/angular';
 // import AgoraRTM from 'agora-rtmClient';
 import { Subject } from 'rxjs';
 import { Router } from '@angular/router';
+import { AiChatService } from './aichart.service';
 declare const AgoraRTM: any;
 @Injectable({
   providedIn: 'root',
@@ -26,14 +27,18 @@ export class MessageService {
   pageFun?: Function; //页面传入的方法
   alert: any; // 弹窗
   messageMapList: any = {};
-  giftLog?: string = ''; //当前礼物弹窗
-  
+  giftLogMap: any = [];
+  giftList: Array<any> = [];//礼物列表
+  timeg:any
   constructor(
     private alertController: AlertController,
     private router: Router,
     public toastController: ToastController,
-    private http: HttpService
-  ) {}
+    private http: HttpService,
+    private aiServ: AiChatService
+  ) {
+    this.aiServ.getGift().then((data) => (this.giftList = data));
+  }
 
   /* 获取token */
   async getToken() {
@@ -89,7 +94,7 @@ export class MessageService {
       const message = JSON.parse(event.message);
       let is_self = event.publisher == this.userId;
       console.log('自己发出的消息:', is_self, message.text);
-      if (states.includes(message.text)) {
+      if (states.includes(message.text) || message.text.indexOf('ONUSERSENDGIFT_') > -1) {
         if (!is_self) {
           this.callPresence(message.text, event.publisher, event.channelName);
         }
@@ -121,11 +126,7 @@ export class MessageService {
       Mode: mode,
     };
     try {
-      await this.rtmClient?.presence.setState(
-        channelName,
-        channelType,
-        states
-      );
+      await this.rtmClient?.presence.setState(channelName, channelType, states);
       console.log('频道状态发生更改:', mode);
     } catch (err: any) {
       console.log(err);
@@ -137,6 +138,17 @@ export class MessageService {
     console.log(message);
     let userData = await this.getUserMetadata(publisher);
     let toast;
+    if(message.indexOf('ONUSERSENDGIFT_') > -1){
+      let arr = message.split('_')
+      let gift = this.giftList.find((item: any) => item.id == arr[1]);
+      this.giftLogMap.push({
+        gift,
+        count:arr?.[2],
+        user:userData
+      })
+      !this.timeg && this.showGiftDecrement()
+      return
+    }
     switch (message) {
       case 'USERCALLINVITATION':
         await this.setConnectState(this.userId, 'CONNECTING');
@@ -198,7 +210,22 @@ export class MessageService {
         this.eventSource.next(true);
         break;
     }
+
+  }
+
+  // 礼物消息
+  showGiftDecrement(){
+    this.timeg = setTimeout(() => {
+      this.giftLogMap.shift();
+      if(this.giftLogMap.length > 0){
+        this.showGiftDecrement();
+      }else{
+        clearTimeout(this.timeg);
+        this.timeg = null
+      }
+    }, 500000);
   }
+
   async getRoom(uid: string): Promise<string | undefined> {
     let query = new Parse.Query('Room');
     query.equalTo('company', this.company);
@@ -424,9 +451,9 @@ export class MessageService {
         publishMessage,
         publishOptions
       );
-      console.log(result);
+      console.log('发出消息:', result);
     } catch (status) {
-      console.log(status);
+      console.log('发出消息失败:', status);
     }
   }
 }