realtime

2026-04-20 21:35:50 +00:00 · 2024-08-13 10:52:35 +01:00
parent 5b31a186c2
commit 251f533a68
53 changed files with 985 additions and 453 deletions
@@ -1,8 +1,6 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { AnimationController, GestureController, IonRange, ModalController, PopoverController } from '@ionic/angular';
 import { ToastService } from 'src/app/services/toast.service';
-import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
-import { MessagesOptionsPage } from 'src/app/shared/popover/messages-options/messages-options.page';
 import { ContactsPage } from '../new-group/contacts/contacts.page';
 import { ChatOptionsFeaturesPage } from 'src/app/modals/chat-options-features/chat-options-features.page';
 import { ChatMessageStore } from 'src/app/store/chat/chat-message.service';
@@ -12,12 +10,10 @@ import { FileService } from 'src/app/services/functions/file.service';
 import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
 import { ThemeService } from 'src/app/services/theme.service';
 import { ViewEventPage } from 'src/app/modals/view-event/view-event.page';
-import { Storage } from '@ionic/storage';
 import { FileType } from 'src/app/models/fileType';
 import { SearchPage } from 'src/app/pages/search/search.page';
-import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
-import { DocumentViewer, DocumentViewerOptions } from '@ionic-native/document-viewer';
-import { VoiceRecorder, RecordingData, GenericResponse } from 'capacitor-voice-recorder';
+import { CameraResultType } from '@capacitor/camera';
+import { RecordingData } from 'capacitor-voice-recorder';
 import { Filesystem, Directory } from '@capacitor/filesystem';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Platform } from '@ionic/angular';
@@ -29,7 +25,7 @@ import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
 import { PermissionService } from 'src/app/services/permission.service';
 import { ChatPopoverPage } from '../../popover/chat-popover/chat-popover.page';
 import { Observable as  DexieObservable } from 'Dexie';
-import { Observable, Subscription } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { MessageRepositoryService } from 'src/app/module/chat/data/repository/message-respository.service'
 import { RoomRepositoryService } from 'src/app/module/chat/data/repository/room-repository.service'
 import { MessageTable } from 'src/app/module/chat/infra/database/dexie/schema/message';
@@ -45,9 +41,10 @@ import { JSFileToBase64 } from 'src/app/utils/ToBase64';
 import { CameraService } from 'src/app/infra/camera/camera.service'
 import { compressImageBase64 } from '../../../utils/imageCompressore';
 import { FilePickerWebService } from 'src/app/infra/file-picker/web/file-picker-web.service'
+import { FilePickerService } from 'src/app/infra/file-picker/file-picker.service'
 import { allowedDocExtension } from 'src/app/utils/allowedDocExtension';
 import { SpeakerService, StartRecordingResultError, StopRecordingResultError } from 'src/app/infra/speaker/speaker.service'
-const IMAGE_DIR = 'stored-images';
+
@Component({
  selector: 'app-messages',
  templateUrl: './messages.page.html',
@@ -59,7 +56,6 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
  @ViewChild('scrollMe') private myScrollContainer: ElementRef;
  @ViewChild('message-item') messageContainer: ElementRef;

-  messages: any;
  dm: any;
  userPresence = '';
  dmUsers: any;
@@ -116,6 +112,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
  roomName: any;
  isAdmin = true;
  roomCountDownDate: string;
+  audioMimeType = ''

  textField = ''

@@ -132,18 +129,24 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
  totalMessage = 0
  recordData:RecordingData

+  messages: MessageEntity[] = []
+
+  messageReceiveSubject: Subscription
+  messageDeleteSubject: Subscription
+  messageUpdateSubject: Subscription
+  messageSendSubject: Subscription
+
+  messages1: {[key: string]: MessageEntity[]} = {}
+
  constructor(
    public popoverController: PopoverController,
    private modalController: ModalController,
-    /* private navParams: NavParams, */
    private animationController: AnimationController,
    private toastService: ToastService,
    private timeService: TimeService,
    private fileService: FileService,
    private gestureController: GestureController,
    public ThemeService: ThemeService,
-    private storage: Storage,
-    // public RochetChatConnectorService: RochetChatConnectorService,
    private sanitiser: DomSanitizer,
    private file: File,
    private platform: Platform,
@@ -155,6 +158,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
    private chatServiceService: ChatServiceService,
    private CameraService: CameraService,
    private FilePickerWebService: FilePickerWebService,
+    private FilePickerService: FilePickerService,
    private SpeakerService: SpeakerService
  ) {
    // update
@@ -163,9 +167,13 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy

  ngOnChanges(changes: SimpleChanges): void {
    this.roomData$ = this.roomRepositoryService.getItemByIdLive(this.roomId)
+    this.getMessages()
+    this.listenToIncomingMessage()
+    this.listenToDeleteMessage()
+    this.listenToUpdateMessage();
+    this.listenToSendMessage()

    this.roomMessage$ = this.messageRepositoryService.getItemsLive(this.roomId)
-
    this.roomMembers$ = this.roomRepositoryService.getRoomMemberByIdLive(this.roomId) as any
    this.roomStatus$ = this.roomRepositoryService.getRoomStatus(this.roomId)
    this.roomRepositoryService.getRoomById(this.roomId)
@@ -179,25 +187,77 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy

      (this.myInputRef.nativeElement as HTMLDivElement).innerHTML = '::'+ uniqueArray
    })
+  }

-    this.newMessagesStream?.unsubscribe()
-    this.newMessagesStream = this.messageRepositoryService.subscribeToNewMessages(this.roomId).subscribe((e) => {
+  async getMessages() {
+    this.messages1[this.roomId] = []

-      setTimeout(() => {
-        this.scrollToBottomClicked()
-      }, 200)
+    const messages = await this.messageRepositoryService.getItems(this.roomId)
+    this.messages1[this.roomId].unshift(...messages)
+  }

-      setTimeout(() => {
-        this.scrollToBottomClicked()
-      }, 500)
+  listenToIncomingMessage() {
+    this.messageReceiveSubject?.unsubscribe();
+    this.messageReceiveSubject = this.chatServiceService.listenToIncomingMessage(this.roomId).subscribe((message) => {
+      this.messages1[this.roomId].push(message as MessageEntity)
+      this.scrollToBottomClicked()
+    });
+  }

-    })
+  listenToDeleteMessage() {
+    this.messageDeleteSubject?.unsubscribe();

-    //this.userTyping$ = this.userTypingMemoryDataSource.select(state => state) as any
+    this.messageDeleteSubject = this.chatServiceService.listenToDeleteMessage(this.roomId).subscribe((deleteMessage) => {
+      console.log('delete class', deleteMessage);

-    // let a = this.userTypingMemoryDataSource.select(state => state).subscribe((e) => {
-    //   this.userTyping$ = e as any
-    // })
+      const index = this.messages1[this.roomId].findIndex(e => e?.id === deleteMessage.id); // Use triple equals for comparison
+
+      if (index !== -1) { // Check if the item was found
+        console.log('delete ==')
+        this.messages1[this.roomId].splice(index, 1);
+        // console.log('removed index', index);
+      } else {
+        // console.log('message not found');
+      }
+    });
+  }
+
+  listenToUpdateMessage() {
+    this.messageUpdateSubject?.unsubscribe();
+
+    this.messageUpdateSubject = this.chatServiceService.listenToUpdateMessage(this.roomId).subscribe((updateMessage) => {
+      console.log('update message', updateMessage);
+
+      const index = this.messages1[this.roomId].findIndex(e => e?.id === updateMessage.id); // Use triple equals for comparison
+
+      if (index !== -1) { // Check if the item was found
+        console.log('update ==')
+        this.messages1[this.roomId][index].message = updateMessage.message
+        this.messages1[this.roomId][index].reactions = updateMessage.reactions
+      } else {
+        // console.log('message not found');
+      }
+    });
+  }
+
+
+  listenToSendMessage() {
+    this.messageSendSubject?.unsubscribe();
+
+    this.messageSendSubject = this.chatServiceService.listenToSendMessage(this.roomId).subscribe((updateMessage) => {
+      console.log('update message', updateMessage);
+
+      const index = this.messages1[this.roomId].findIndex(e => e?.requestId === updateMessage.requestId); // Use triple equals for comparison
+
+      if (index !== -1) { // Check if the item was found
+        console.log('update ==')
+
+        this.messages1[this.roomId][index].id = updateMessage.id
+
+      } else {
+        // console.log('message not found');
+      }
+    });
  }


@@ -409,9 +469,9 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
      this.recording = false;
      const recordData = stop.value
      this.recordData = recordData
+      this.audioMimeType = recordData.value.mimeType
      if (recordData.value.recordDataBase64.includes('data:audio')) {
        console.log({recordData})
-
        this.audioRecordedDataUrl = recordData.value.recordDataBase64
        this.audioRecordedSafe = this.sanitiser.bypassSecurityTrustResourceUrl(recordData.value.recordDataBase64);
      }
@@ -448,11 +508,16 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
      file: encodedData,
      fileName: "audio",
      source: MessageAttachmentSource.Device,
-      fileType: MessageAttachmentFileType.Audio
+      fileType: MessageAttachmentFileType.Audio,
+      mimeType: this.audioMimeType
+
    }]

    this.chatServiceService.sendMessage(message)
-
+    this.messages1[this.roomId].push(message)
+    setTimeout(() => {
+      this.scrollToBottomClicked()
+    }, 100)

    this.deleteRecording();
  }
@@ -490,7 +555,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
    await modal.present();
  }

-  sendMessage() {
+  async sendMessage() {

    const message = new MessageEntity();
    message.message = this.textField
@@ -503,9 +568,16 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
      wxUserId: SessionStore.user.UserId
    }

-    this.chatServiceService.sendMessage(message)
-
    this.textField = ''
+    this.messages1[this.roomId].push(message)
+    setTimeout(() => {
+      this.scrollToBottomClicked()
+    }, 100)
+    const data = await this.chatServiceService.sendMessage(message)
+    
+
+    console.log({data})
+
  }


@@ -676,9 +748,14 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
          file: compressedImage.value,
          fileName: "foto",
          source: MessageAttachmentSource.Device,
-          fileType: MessageAttachmentFileType.Image
+          fileType: MessageAttachmentFileType.Image,
+          mimeType: picture.value.format
        }]

+        this.messages1[this.roomId].push(message)
+        setTimeout(() => {
+          this.scrollToBottomClicked()
+        }, 100)
        this.chatServiceService.sendMessage(message)

      }
@@ -729,6 +806,10 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
          docId: res.data.selected.Id,
        }]

+        this.messages1[this.roomId].push(message)
+        setTimeout(() => {
+          this.scrollToBottomClicked()
+        }, 100)
        this.chatServiceService.sendMessage(message)
        this.textField = ''

@@ -740,7 +821,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy

  async pickPicture() {

-    const file = await this.FilePickerWebService.getPicture({
+    const file = await this.FilePickerService.getPicture({
      cameraResultType: CameraResultType.Base64
    })

@@ -769,12 +850,19 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
          }

          message.attachments = [{
-            file: compressedImage.value,
+            file: file.value.base64String,
            fileName: "foto",
            source: MessageAttachmentSource.Device,
-            fileType: MessageAttachmentFileType.Image
+            fileType: MessageAttachmentFileType.Image,
+            mimeType: 'image/'+file.value.format,
+            description: ''
+
          }]

+          this.messages1[this.roomId].push(message)
+          setTimeout(() => {
+            this.scrollToBottomClicked()
+          }, 100)
          this.chatServiceService.sendMessage(message)
        }
    }
@@ -821,9 +909,14 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
            file: fileBase64.value,
            fileName: file.value.name,
            source: MessageAttachmentSource.Device,
-            fileType: MessageAttachmentFileType.Doc
+            fileType: MessageAttachmentFileType.Doc,
+            mimeType: file.value.type
          }]

+          this.messages1[this.roomId].push(message)
+          setTimeout(() => {
+            this.scrollToBottomClicked()
+          }, 100)
          this.chatServiceService.sendMessage(message)
        }