fix chat ui details

This commit is contained in:
Peter Maquiran
2024-09-09 10:28:53 +01:00
parent e7887d4e5a
commit 96daa01f94
20 changed files with 236 additions and 108 deletions
-20
View File
@@ -71,9 +71,6 @@ export class ChatPage implements OnInit {
RoomSelected!: RoomViewModel;
private worker: SharedWorker;
private port: MessagePort;
constructor(
private modalController: ModalController,
private timeService: TimeService,
@@ -105,25 +102,9 @@ export class ChatPage implements OnInit {
this.boldTable = distributionObject
})
this.worker = new SharedWorker('shared-worker.js');
// this.worker.port.start()
this.port = this.worker.port;
this.port.onmessage = (event) => {
console.log('Received from worker:', event.data);
}
//this.port.postMessage('hello');
}
// Method to update the room list
// updateRoomList(newRoomList: { id: string, name: string }[]): void {
// this.roomListSubject.next(newRoomList);
// }
// Fetch all items using useLiveQuery
updatemessage(sortedRooms) {
this.rooms = sortedRooms
@@ -358,7 +339,6 @@ export class ChatPage implements OnInit {
openMessagesPage(roomId) {
this.port.postMessage('hello');
// this.chatService.refreshtoken();
this.roomId = roomId;
this.RoomSelected = this.rooms.filter(e => e.id == roomId)[0]
@@ -9,7 +9,7 @@
<span *ngIf="roomStatus$ | async as roomStatus"><ion-icon *ngIf="roomStatus" class="online" name="ellipse"></ion-icon></span>
</div>
<div class="right">
<button title="Menu" class="btn-no-color" (click)="_openMessagesOptions()" >
<button title="Menu" class="btn-no-color" (click)="_openMessagesOptions()" *ngIf="roomType == RoomTypeEnum.Group">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/theme/blue/icons-menu.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-menu.svg">
</ion-icon>
@@ -186,46 +186,8 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
) {
// update
this.checkAudioPermission()
//this.sendChunks()
// this.worker = new SharedWorker('shared-worker.js');
// this.port = this.worker.port;
// this.port.onmessage = (event) => {
// console.log('Received from worker:', event.data);
// }
// this.port.postMessage('hello');
}
// sendChunks() {
// const base64String = 'data:video/mp4;base64,AAAAHGZ0eXBtcDQyAAAAAGlzb21tcDQyAAACAGlzb21tcDQyaXNvbXJtZGEAAAAHZnJlZS1ybWRhAAAAGXZmY2MtbGF2ZjU4LmEyLTkyLm12NTZjAGZyZWUtcm1kYQAAAAVyZWZsYXYAAABWZGF0YTqBgIAAAAs9AAABM/f/+6mpg6z+d0+j5adJHVD+lk75p0ntRFEyTlHT/GRYbDg4ODhISEhAQK/jMCAxCBAIEwMmJgAABNmY2MtbGF2ZjU4LmEyLTkyLm12NTZjAGZyZWUtcm1kYQAAAAVyZWZsYXY=';
// const chunkSize = Math.ceil(base64String.length / 2);
// const chunks = [
// { chunk: base64String.slice(0, chunkSize), index: 0 },
// { chunk: base64String.slice(chunkSize), index: 1 }
// ];
// const identifier = uuidv4(); // You can set a unique identifier for the file
// const totalChunks = chunks.length;
// chunks.forEach((chunkData) => {
// const payload = {
// chunk: chunkData.chunk,
// identifier,
// index: chunkData.index,
// totalChunks
// };
// this.http.post('https://gdapi-dev.dyndns.info/stage/api/v2/File/UploadBase64Chunks', payload)
// .subscribe(response => {
// console.log('Chunk sent successfully:', response);
// }, error => {
// console.error('Error sending chunk:', error);
// });
// });
// }
ngOnChanges(changes: SimpleChanges): void {
@@ -51,7 +51,7 @@
<div class="messages height-100 width-100 d-flex flex-column" #scrollMe >
<div
*ngFor="let message of messages1[roomId]" class="messages-list-item-wrapper"
*ngFor="let message of messages1[roomId]; let messageIndex = index" class="messages-list-item-wrapper"
[ngClass]="{
'info-meeting': message.messageType == IMessageType.information && !message.ballon,
'info-ballon': message.ballon == true,
@@ -24,7 +24,7 @@ import { Observable, Subscription } from 'rxjs';
import { MessageTable } from 'src/app/infra/database/dexie/instance/chat/schema/message';
import { ChatServiceService } from 'src/app/module/chat/domain/chat-service.service';
import { EditMessagePage } from 'src/app/ui/chat/modal/edit-message/edit-message.page';
import { IMessageType, MessageAttachmentFileType, MessageAttachmentSource } from 'src/app/core/chat/entity/message';
import { IMessageType, MessageAttachmentFileType, MessageAttachmentSource, MessageEntity } from 'src/app/core/chat/entity/message';
import { MemberTable } from 'src/app/infra/database/dexie/instance/chat/schema/members';
import { TypingTable } from 'src/app/infra/database/dexie/instance/chat/schema/typing';
import { compressImageBase64 } from 'src/app/utils/imageCompressore';
@@ -50,6 +50,8 @@ import { MessageViewModal } from '../../store/model/message';
import { XBallon } from '../../utils/messageBallon';
import { tap } from 'rxjs/operators';
import { ChatPopoverPage } from '../chat-popover/chat-popover.page';
import { ViewOncesImagePageInput, ViewOncesImagePage } from '../view-onces/view-onces.page';
import { LastMessage } from '../../utils/lastMessage';
@@ -887,6 +889,19 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
}
async onImageError() {}
async onImageLoad(message: MessageViewModal, index:number) {
if(message.attachments[0].fileName == LastMessage.attachments[0].fileName) {
this.scrollToBottom()
setTimeout(() => {
this.scrollToBottom();
}, 100)
this.messages1[this.roomId].splice(index, 1);
}
}
async takePictureMobile() {
@@ -1067,6 +1082,22 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
}
async viewOnce(event: Event, message: MessageViewModal, index:number) {
const params: ViewOncesImagePageInput = {
imageDataUrl: message.attachments[index].safeFile as any,
}
const modal = await this.modalController.create({
component: ViewOncesImagePage,
cssClass: '',
componentProps: params
});
modal.present()
return modal.onDidDismiss().then((res) => {
this.messageDelete(message)
});
}
async addFileToChat(types) {
console.log('add file ')
@@ -1,6 +1,6 @@
<ion-header>
<ion-toolbar>
<ion-title class="title" *ngIf="roomData$ | async as roomData"> Nome do grupo {{ roomData.roomName }}</ion-title>
<ion-title class="title" *ngIf="roomData$ | async as roomData"> {{ roomData.roomName }}</ion-title>
</ion-toolbar>
</ion-header>
@@ -10,9 +10,12 @@
<ion-list class="header-bottom-contacts px-20" *ngIf="roomMembers$ | async as memberList">
<div *ngFor="let user of memberList; let i = index">
<div class="py-1">
<!-- <img [src]="memberList.userPhoto" class="pa-20"> {{ user.wxFullName }} -->
{{ user.wxFullName }} <span *ngIf="user.isAdmin">(admin do group)</span>
<div class="py-1 d-flex align-center">
<div class="image-container mr-10">
<img *ngIf="ObjectURL[user.wxUserId]" [src]="ObjectURL[user.wxUserId]">
</div>
{{ user.wxFullName }} <span class="admin" *ngIf="user.isAdmin">(admin do group)</span>
</div>
</div>
</ion-list>
@@ -5,4 +5,18 @@ img {
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
height: 35px;
width: 35px;
object-fit: cover;
}
.image-container {
height: 35px;
width: 35px;
background-color: gray;
border-radius: 20px;
}
.admin {
color: gray;
}
@@ -2,12 +2,11 @@ import { Component, OnInit } from '@angular/core';
import { NavParams } from '@ionic/angular';
import { Observable } from 'rxjs';
import { MemberListLocalRepository } from 'src/app/module/chat/data/repository/member/member-list-local-repository.service'
import { Observable as DexieObservable } from 'Dexie';
import { RoomLocalRepository } from 'src/app/module/chat/data/repository/room/room-local-repository.service'
import { MemberTable } from 'src/app/infra/database/dexie/instance/chat/schema/members';
import { RoomTable } from 'src/app/infra/database/dexie/instance/chat/schema/room';
import { tap } from 'rxjs/operators';
import { map, tap } from 'rxjs/operators';
import { ChatServiceService } from 'src/app/module/chat/domain/chat-service.service'
import { MemberEntity } from 'src/app/core/chat/entity/member';
@Component({
selector: 'app-room-info',
templateUrl: './room-info.page.html',
@@ -16,13 +15,15 @@ import { tap } from 'rxjs/operators';
export class RoomInfoPage implements OnInit {
roomId:string;
roomMembers$: Observable<MemberTable[] | undefined>
roomMembers$: Observable<MemberEntity[]>
roomData$: Observable<RoomTable | undefined>
ObjectURL : {[key: string]: string} = {};
constructor(
private navParams: NavParams,
private MemberListLocalRepository: MemberListLocalRepository,
private RoomLocalRepository: RoomLocalRepository,
private ChatServiceService: ChatServiceService
) {
this.roomId = this.navParams.get('roomId');
}
@@ -31,10 +32,24 @@ export class RoomInfoPage implements OnInit {
// this.roomMessage$ = this.messageRepositoryService.getItemsLive(this.roomId)
this.roomMembers$ = this.MemberListLocalRepository.getRoomMemberByIdLive(this.roomId).pipe(
tap((data)=> {
console.log(data)
})
map((memberList) => memberList.map(e => Object.assign(new MemberEntity(), e))),
tap((members) => {
for(let member of members) {
if(!this.ObjectURL[member.wxUserId] && member.hasPhoto()) {
this.ChatServiceService.getUserPhoto({wxUserId: member.wxUserId, attachmentId: member.userPhoto}).then((result)=> {
if(result.isOk()) {
console.log('get photo', result.value)
this.ObjectURL[member.wxUserId] = 'data:image/jpeg;base64,'+result.value
}
})
}
}
}),
)
this.roomData$ = this.RoomLocalRepository.getRoomByIdLive(this.roomId)
}