修复视频问题

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

@@ -0,0 +1,14 @@
+@if (iscall) {
+<div class="loading-box">
+  <div class="animation-loading">
+    <div class="container">
+      <span></span>
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+  <div class="loading-title">正在呼叫</div>
+  <div class="close" (click)="onCloseCall()">取消</div>
+</div>
+}

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

@@ -0,0 +1,85 @@
+.loading-box {
+  background: rgb(0 0 0 /90%);
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  z-index: 99;
+  width: 100%;
+  height: 100%;
+  .animation-loading {
+    height: 150px;
+    width: 100%;
+    position: relative;
+  }
+  .container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border-radius: 50%;
+    height: 96px;
+    width: 96px;
+    animation: rotate_3922 1.2s linear infinite;
+    background-color: #9b59b6;
+    background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
+  }
+
+  .container span {
+    position: absolute;
+    border-radius: 50%;
+    height: 100%;
+    width: 100%;
+    background-color: #9b59b6;
+    background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
+  }
+
+  .container span:nth-of-type(1) {
+    filter: blur(5px);
+  }
+
+  .container span:nth-of-type(2) {
+    filter: blur(10px);
+  }
+
+  .container span:nth-of-type(3) {
+    filter: blur(25px);
+  }
+
+  .container span:nth-of-type(4) {
+    filter: blur(50px);
+  }
+
+  .container::after {
+    content: "";
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    right: 10px;
+    bottom: 10px;
+    background-color: #2dd55b;
+    border: solid 5px #ffffff;
+    border-radius: 50%;
+  }
+
+  @keyframes rotate_3922 {
+    from {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
+
+    to {
+      transform: translate(-50%, -50%) rotate(360deg);
+    }
+  }
+  .close {
+    margin-top: 150px;
+    font-size: 14px;
+    color: #004acd;
+    /* background: white; */
+    padding: 4px 20px;
+    border-radius: 6px;
+    border: 1px solid;
+  }
+}

projects/live-app/src/app/components/call-modal/call-modal.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { CallModalComponent } from './call-modal.component';
+
+describe('CallModalComponent', () => {
+  let component: CallModalComponent;
+  let fixture: ComponentFixture<CallModalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CallModalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CallModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,160 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import {
+  AlertController,
+  ToastController,
+} from '../../../modules/ionic-standalone.modules';
+import { AiChatService } from '../../../services/aichart.service';
+import { ConnectTaskService } from '../../../services/connectTask.service';
+import { MessageService } from '../../../services/message.service';
+import * as Parse from 'parse';
+
+@Component({
+  selector: 'app-call-modal',
+  templateUrl: './call-modal.component.html',
+  styleUrls: ['./call-modal.component.scss'],
+  standalone: true,
+  imports: [
+  ],
+})
+export class CallModalComponent implements OnInit {
+  @Input('profile') profile?: Parse.Object;
+  @Input('userStatus') userStatus: string = 'OFFLINE';
+  room?: Parse.Object;
+  uid?: string; //主播频道&uid
+  currentUser?: Parse.Object = Parse.User.current(); //当前登录用户
+  iscall: boolean = false;
+  isLiveing: boolean = false; // 是否在直播通话中
+  constructor(
+    private router: Router,
+    private toastController: ToastController,
+    private alertController: AlertController,
+    private connectTask: ConnectTaskService,
+    private msgSer: MessageService,
+    private aiChatServ: AiChatService
+  ) {
+    this.msgSer.event$.subscribe((data) => {
+      this.inviteCallback(data);
+    });
+  }
+
+  ngOnInit() {
+    this.uid = this.profile?.get('user').id;
+    this.refresh();
+  }
+  ngOnDestroy(): void {
+    //Called once, before the instance is destroyed.
+    //Add 'implements OnDestroy' to the class.
+    if (!this.isLiveing && this.uid !== this.currentUser?.id) {
+      console.log('断开连接');
+      this.msgSer?.unsubscribeMessage(this.uid!);
+    }
+  }
+  refresh() {
+    this.getRoom();
+  }
+
+  async getRoom() {
+    let query = new Parse.Query('Room');
+    query.equalTo('profile', this.profile?.id);
+    query.notEqualTo('isDeleted', true);
+    this.room = await query.first();
+    if (!this.room?.id) return;
+    this.userStatus = await this.connectTask.getState(
+      this.profile?.get('user').id,
+      this.profile?.get('user').id
+    );
+    if (this.profile?.get('isCheck') && this.userStatus == 'ONLINE') {
+      this.userStatus = 'REFUSE';
+    }
+  }
+  async toLiveContact() {
+    if (this.userStatus == 'REFUSE') {
+      const toast = await this.toastController.create({
+        message: '对方已设置免打扰状态',
+        color: 'warning',
+        duration: 1500,
+      });
+      toast.present();
+      return;
+    }
+    this.userStatus = await this.connectTask.getState(this.uid!, this.uid!);
+    if (this.userStatus !== 'ONLINE') {
+      const toast = await this.toastController.create({
+        message: '对方不在线或忙线中',
+        color: 'warning',
+        duration: 1500,
+      });
+      toast.present();
+      return;
+    }
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: '邀请通话',
+      backdropDismiss: false,
+      message: '你将与对方发起私聊通话',
+      buttons: [
+        {
+          text: '取消',
+          role: 'cancel',
+          handler: (blah) => {},
+        },
+        {
+          text: '确定',
+          cssClass: 'secondary',
+          handler: () => {
+            this.sendVideoCallInvite();
+          },
+        },
+      ],
+    });
+    await alert.present();
+  }
+  async inviteCallback(event: boolean) {
+    console.log(event);
+    if (event == undefined) return;
+    this.iscall = false;
+    const toast = await this.toastController.create({
+      message: `对方${event ? '已接受' : '拒绝'}通话邀请`,
+      color: event ? 'success' : 'warning',
+      duration: 1500,
+    });
+    toast.present();
+    if (event) {
+      this.isLiveing = true;
+      this.router.navigate(['live/link-room/' + this.room?.id]);
+    }
+  }
+  async sendVideoCallInvite() {
+    let second = await this.aiChatServ.get_duration(
+      this.room?.id!,
+      this.currentUser?.id!
+    );
+    if (second < 120) {
+      const toast = await this.toastController.create({
+        message: '通话时长不足2分钟，请充值后再试通',
+        color: 'warning',
+        duration: 1500,
+      });
+      toast.present();
+      return;
+    }
+    this.iscall = true;
+    // this.router.navigate(['live/link-room/' + this.room?.id]);
+    await this.msgSer.subscribeMessage(this.uid!, {
+      message: true,
+      presence: true,
+    }); //进入对方主播频道发送聊天邀请
+    this.msgSer.publishMessage('USERCALLINVITATION', this.uid!);
+  }
+  async onCloseCall() {
+    this.iscall = false;
+    const toast = await this.toastController.create({
+      message: '已取消视频通话邀请',
+      color: 'warning',
+      duration: 1500,
+    });
+    toast.present();
+    this.msgSer.publishMessage('CLOASEINVITATION', this.uid!);
+  }
+}

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

@@ -31,6 +31,7 @@
       align-items: center;
       justify-content: center;
       z-index: 1;
+      text-align: center;
     }
   }
 }

projects/live-app/src/modules/live/chat/chat.component.html

@@ -147,7 +147,7 @@
     >
       <ion-icon name="happy-outline" (click)="changeShowEmoji()"></ion-icon>
       @if (uid && profile?.get("identyType") === 'anchor') {
-      <ion-icon name="videocam-outline"></ion-icon>
+      <ion-icon name="videocam-outline" (click)="call.toLiveContact()"></ion-icon>
       } @if (uid && profile?.get("identyType") === 'anchor') {
       <ion-icon name="gift-outline" (click)="gift.openModal()"></ion-icon>
       }
@@ -191,3 +191,6 @@
   (sendEmit)="onSendGift()"
   [toUid]="this.uid"
 ></app-gift-modal>
+@if(profile?.id){
+<app-call-modal #call [profile]="profile"></app-call-modal>
+}

projects/live-app/src/modules/live/chat/chat.component.ts

@@ -1,6 +1,6 @@
 import { DatePipe, CommonModule } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { SharedModule } from '../../shared.module';
@@ -19,6 +19,7 @@ import {
 } from '../../ionic-standalone.modules';
 import { AiChatService } from '../../../services/aichart.service';
 import { AccountService } from '../../../services/account.service';
+import { CallModalComponent } from '../../../app/components/call-modal/call-modal.component';
 
 @Component({
   selector: 'app-chat',
@@ -32,10 +33,13 @@ import { AccountService } from '../../../services/account.service';
     GiftModalComponent,
     CommonModule,
     SharedModule,
+    CallModalComponent
   ],
   // providers: [DatePipe],
 })
 export class ChatComponent implements OnInit {
+  @ViewChild('call') call!: CallModalComponent;
+
   channle: string = '';
   uid: string = '';
   profile?: Parse.Object; // 对方身份

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

@@ -108,7 +108,13 @@
           </div>
         </div>
         <div class="swiper-slide chat-template">
-          <div class="chat-list">
+          <div 
+            [ngClass]="{
+              'chat-list': true,
+              'langh': !liveService.isAnchor,
+            }"
+            id="liveScrollMsg"
+          >
             <p class="message tips">欢迎进入视频直播1V1聊天</p>
             @for (item of msgServe.messageMapList[room?.get('user').id]; track
             $index) {

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

@@ -214,3 +214,6 @@
     }
   }
 }
+.langh{
+  height:200px !important;
+}

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

@@ -54,7 +54,10 @@ export class LinkPageComponent implements OnInit {
     public aiServ: AiChatService,
     public msgServe: MessageService,
     public liveService: LiveService
-  ) {}
+  ) {
+    msgServe.pageFun = this.updatePage;
+    msgServe.pageFun();
+  }
 
   ngOnInit() {
     this.activateRoute.paramMap.subscribe(async (params) => {
@@ -67,6 +70,18 @@ export class LinkPageComponent implements OnInit {
       this.refresh();
     });
   }
+  updatePage() {
+    setTimeout(() => {
+      let dom = document.getElementById('liveScrollMsg');
+      if (dom) {
+        dom.scrollIntoView({
+          behavior: 'smooth',
+          block: 'end',
+          inline: 'nearest',
+        });
+      }
+    }, 500);
+  }
   async refresh() {
     const loading = await this.loadingCtrl.create({
       message: '加载中',
@@ -272,5 +287,6 @@ export class LinkPageComponent implements OnInit {
     if(this.liveService.isAnchor){
       this.msgServe.setConnectState(this.currentUser?.id!, 'ONLINE');
     }
+    this.msgServe.pageFun = () => {};
   }
 }

projects/live-app/src/modules/user/profile/profile.component.html

@@ -155,7 +155,7 @@
       <div class="gift" (click)="gift.openModal()">
         <ion-icon name="gift-outline"></ion-icon>
       </div>
-      <div class="round" (click)="toLiveContact()">
+      <div class="round" (click)="call.toLiveContact()">
         <ion-icon name="videocam-outline"></ion-icon>直播通话
       </div>
       } @if(friends?.get('isPass')){
@@ -205,17 +205,7 @@
   (sendEmit)="onSendGift()"
   [toUid]="this.uid"
 ></app-gift-modal>
-@if (iscall) {
-<div class="loading-box">
-  <div class="animation-loading">
-    <div class="container">
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-    </div>
-  </div>
-  <div class="loading-title">正在呼叫</div>
-  <div class="close" (click)="onCloseCall()">取消</div>
-</div>
+
+@if(profile?.id){
+<app-call-modal #call [profile]="profile"></app-call-modal>
 }

projects/live-app/src/modules/user/profile/profile.component.scss

@@ -289,88 +289,3 @@ ion-modal {
   align-items: center;
   justify-content: center;
 }
-.loading-box {
-  background: rgb(0 0 0 /90%);
-  color: white;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  top: 0;
-  z-index: 99;
-  width: 100%;
-  height: 100%;
-  .animation-loading {
-    height: 150px;
-    width: 100%;
-    position: relative;
-  }
-  .container {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    border-radius: 50%;
-    height: 96px;
-    width: 96px;
-    animation: rotate_3922 1.2s linear infinite;
-    background-color: #9b59b6;
-    background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
-  }
-
-  .container span {
-    position: absolute;
-    border-radius: 50%;
-    height: 100%;
-    width: 100%;
-    background-color: #9b59b6;
-    background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
-  }
-
-  .container span:nth-of-type(1) {
-    filter: blur(5px);
-  }
-
-  .container span:nth-of-type(2) {
-    filter: blur(10px);
-  }
-
-  .container span:nth-of-type(3) {
-    filter: blur(25px);
-  }
-
-  .container span:nth-of-type(4) {
-    filter: blur(50px);
-  }
-
-  .container::after {
-    content: "";
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    right: 10px;
-    bottom: 10px;
-    background-color: #2dd55b;
-    border: solid 5px #ffffff;
-    border-radius: 50%;
-  }
-
-  @keyframes rotate_3922 {
-    from {
-      transform: translate(-50%, -50%) rotate(0deg);
-    }
-
-    to {
-      transform: translate(-50%, -50%) rotate(360deg);
-    }
-  }
-  .close {
-    margin-top: 150px;
-    font-size: 14px;
-    color: #004acd;
-    /* background: white; */
-    padding: 4px 20px;
-    border-radius: 6px;
-    border: 1px solid;
-  }
-}

projects/live-app/src/modules/user/profile/profile.component.ts

@@ -8,16 +8,17 @@ import { ImagePreviewComponent } from '../../../app/components/image-preview/ima
 import { AiChatService } from '../../../services/aichart.service';
 import { UploadComponent } from '../../../app/components/upload/upload.component';
 import { GiftModalComponent } from '../../../app/components/gift-modal/gift-modal.component';
-import { MessageService } from '../../../services/message.service';
+// import { MessageService } from '../../../services/message.service';
 import { ConnectTaskService } from '../../../services/connectTask.service';
 import { getBirthdatByIdNo,getConstellation } from '../../../services/utils';
 import {
   ionicStandaloneModules,
-  AlertController,
+  // AlertController,
   LoadingController,
   ToastController,
 } from '../../ionic-standalone.modules';
 import { AccountService } from '../../../services/account.service';
+import { CallModalComponent } from '../../../app/components/call-modal/call-modal.component';
 
 @Component({
   selector: 'app-profile',
@@ -33,11 +34,14 @@ import { AccountService } from '../../../services/account.service';
     ImagePreviewComponent,
     UploadComponent,
     GiftModalComponent,
+    CallModalComponent
   ],
   providers: [DatePipe],
 })
 export class ProfileComponent implements OnInit {
   // @ViewChild('upload') upload!: UploadComponent;
+  @ViewChild('call') call!: CallModalComponent;
+
   uid: string = '';
   currentUser?: Parse.Object = Parse.User.current(); //当前登录用户
   user?: Parse.Object; // 查看用户
@@ -54,25 +58,22 @@ export class ProfileComponent implements OnInit {
   isFollow: boolean = false;
   giftList: any[] = []; //礼物
   isOpen: boolean = false; //打开弹窗
-  room?: Parse.Object;
+  // room?: Parse.Object;
   @ViewChild('gift') gift!: GiftModalComponent;
-  iscall: boolean = false;
-  isLiveing: boolean = false; // 是否在直播通话中
+  // iscall: boolean = false;
+  // isLiveing: boolean = false; // 是否在直播通话中
   userStatus: string = 'OFFLINE';
   constructor(
     private activateRoute: ActivatedRoute,
     private router: Router,
-    public toastController: ToastController,
-    public loadingCtrl: LoadingController,
+    private toastController: ToastController,
+    private loadingCtrl: LoadingController,
     private aiChatServ: AiChatService,
-    private alertController: AlertController,
+    // private alertController: AlertController,
+    // private msgSer: MessageService,
     private connectTask: ConnectTaskService,
-    private msgSer: MessageService,
     public accServ: AccountService,
   ) {
-    this.msgSer.event$.subscribe((data) => {
-      this.inviteCallback(data);
-    });
   }
   get state() {
     let map: any = {
@@ -118,12 +119,10 @@ export class ProfileComponent implements OnInit {
     });
   }
   ngOnDestroy(): void {
-    //Called once, before the instance is destroyed.
-    //Add 'implements OnDestroy' to the class.
-    if (!this.isLiveing && this.uid !== this.currentUser?.id) {
-      console.log('断开连接');
-      this.msgSer?.unsubscribeMessage(this.uid);
-    }
+    // if (!this.isLiveing && this.uid !== this.currentUser?.id) {
+    //   console.log('断开连接');
+    //   this.msgSer?.unsubscribeMessage(this.uid);
+    // }
   }
   async refresh() {
     const loading = await this.loadingCtrl.create({
@@ -139,7 +138,7 @@ export class ProfileComponent implements OnInit {
     let res1 = await this.aiChatServ.getGiftLogCount(this.uid);
     this.numsObject.gift = res1.data[0].gift ?? 0;
     this.giftList = await this.aiChatServ.getGiftList(this.uid, 16);
-    this.getRoom();
+    // this.getRoom();
     loading.dismiss();
   }
   async getFriends() {
@@ -181,16 +180,16 @@ export class ProfileComponent implements OnInit {
     let r = await query.first();
     this.isFollow = r?.id ? true : false;
   }
-  async getRoom() {
-    let query = new Parse.Query('Room');
-    query.equalTo('company', this.aiChatServ.company);
-    query.equalTo('profile', this.profile?.id);
-    // query.equalTo('state', true);
-    query.notEqualTo('isDeleted', true);
-    query.select('objectId');
-    let r = await query.first();
-    this.room = r;
-  }
+  // async getRoom() {
+  //   let query = new Parse.Query('Room');
+  //   query.equalTo('company', this.aiChatServ.company);
+  //   query.equalTo('profile', this.profile?.id);
+  //   // query.equalTo('state', true);
+  //   query.notEqualTo('isDeleted', true);
+  //   query.select('objectId');
+  //   let r = await query.first();
+  //   this.room = r;
+  // }
   /* 关注 */
   async onCollection() {
     let query = new Parse.Query('ProfileRadar');
@@ -298,96 +297,6 @@ export class ProfileComponent implements OnInit {
   toMsg() {
     this.router.navigate(['live/chat/' + this.friends?.get('channel')]);
   }
-  async toLiveContact() {
-    if(this.userStatus == 'REFUSE'){
-      const toast = await this.toastController.create({
-        message: '对方已设置免打扰状态',
-        color: 'warning',
-        duration: 1500,
-      });
-      toast.present();
-      return
-    }
-    this.userStatus = await this.connectTask.getState(this.uid, this.uid);
-    if (this.userStatus !== 'ONLINE') {
-      const toast = await this.toastController.create({
-        message: '对方不在线或忙线中',
-        color: 'warning',
-        duration: 1500,
-      });
-      toast.present();
-      return;
-    }
-    const alert = await this.alertController.create({
-      cssClass: 'my-custom-class',
-      header: '邀请通话',
-      backdropDismiss: false,
-      message: '你将与对方发起私聊通话',
-      buttons: [
-        {
-          text: '取消',
-          role: 'cancel',
-          handler: (blah) => {},
-        },
-        {
-          text: '确定',
-          cssClass: 'secondary',
-          handler: () => {
-            this.sendVideoCallInvite();
-          },
-        },
-      ],
-    });
-    await alert.present();
-  }
-  async inviteCallback(event: boolean) {
-    console.log(event);
-    if (event == undefined) return;
-    this.iscall = false;
-    const toast = await this.toastController.create({
-      message: `对方${event ? '已接受' : '拒绝'}通话邀请`,
-      color: event ? 'success' : 'warning',
-      duration: 1500,
-    });
-    toast.present();
-    if (event) {
-      this.isLiveing = true;
-      // this.userStatus = await this.connectTask.getState(this.uid, this.uid);
-      this.router.navigate(['live/link-room/' + this.room?.id]);
-    }
-  }
-  async sendVideoCallInvite() {
-    let second = await this.aiChatServ.get_duration(
-      this.room?.id!,
-      this.currentUser?.id!
-    );
-    if (second < 120) {
-      const toast = await this.toastController.create({
-        message: '通话时长不足2分钟，请充值后再试通',
-        color: 'warning',
-        duration: 1500,
-      });
-      toast.present();
-      return;
-    }
-    this.iscall = true;
-    // this.router.navigate(['live/link-room/' + this.room?.id]);
-    await this.msgSer.subscribeMessage(this.uid, {
-      message: true,
-      presence: true,
-    }); //进入对方主播频道发送聊天邀请
-    this.msgSer.publishMessage('USERCALLINVITATION', this.uid);
-  }
-  async onCloseCall() {
-    this.iscall = false;
-    const toast = await this.toastController.create({
-      message: '已取消视频通话邀请',
-      color: 'warning',
-      duration: 1500,
-    });
-    toast.present();
-    this.msgSer.publishMessage('CLOASEINVITATION', this.uid);
-  }
   onSendGift() {
     console.log('点击送出礼物');
     // this.liveService.get_duration()

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

@@ -528,6 +528,7 @@ export class LiveService {
     this.alert = await this.alertController.create({
       header: title || '提示',
       message: message,
+      backdropDismiss: false,
       buttons: [
         {
           text: '确认',

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

@@ -314,7 +314,9 @@ export class MessageService {
           this.channelNameList[channelName] = true;
           if (!this.messageMapList[channelName]) {
             this.messageMapList[channelName] = [];
-            this.getHistoryMessage(channelName);
+            if(channelName.indexOf('-') > -1 || channelName == 'global_room'){
+              this.getHistoryMessage(channelName);
+            }
           }
           this.pageFun?.();
           resolve(true);