diff --git a/src/app/pages/chat/group-messages/group-messages.module.ts b/src/app/pages/chat/group-messages/group-messages.module.ts index f6047147e..910c7e4e4 100644 --- a/src/app/pages/chat/group-messages/group-messages.module.ts +++ b/src/app/pages/chat/group-messages/group-messages.module.ts @@ -16,6 +16,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { ImageCropperModule } from 'ngx-image-cropper'; import { AngularCropperjsModule } from 'angular-cropperjs'; import { LettersAvatarModule } from "ngx-letters-avatar"; +import { PipesModule } from 'src/app/pipes/pipes.module'; @NgModule({ imports: [ @@ -26,7 +27,8 @@ import { LettersAvatarModule } from "ngx-letters-avatar"; GroupMessagesPageRoutingModule, ChatPopoverPageModule, BtnModalDismissPageModule, - LettersAvatarModule + LettersAvatarModule, + PipesModule, /* ImageCropperModule, AngularCropperjsModule */ diff --git a/src/app/pages/chat/group-messages/group-messages.page.html b/src/app/pages/chat/group-messages/group-messages.page.html index 9bbe22d91..426df33e0 100644 --- a/src/app/pages/chat/group-messages/group-messages.page.html +++ b/src/app/pages/chat/group-messages/group-messages.page.html @@ -106,7 +106,7 @@
-
+
@@ -117,11 +117,14 @@ {{file.title}}
-
- +
+ +
+
+ {{file.description}} - {{msg.displayType}} + {{msg.displayType}}
@@ -190,32 +193,47 @@
{{ wsChatMethodsService.getGroupRoom(roomId).userThatIsTyping }} está a escrever...
+ +
+ {{durationDisplay}} + +
+
- +
- - - - +
+ - diff --git a/src/app/pages/chat/group-messages/group-messages.page.scss b/src/app/pages/chat/group-messages/group-messages.page.scss index 05a8e69b4..65dbba56d 100644 --- a/src/app/pages/chat/group-messages/group-messages.page.scss +++ b/src/app/pages/chat/group-messages/group-messages.page.scss @@ -177,7 +177,7 @@ -webkit-overflow-scrolling: touch; .messages-list-item-wrapper{ - overflow: auto; + overflow: hidden; } .messages-list-item-wrapper-active{ background: #e6f6ff75 !important; @@ -358,4 +358,4 @@ .typing ngx-letters-avatar { padding-right: 5px; -} \ No newline at end of file +} diff --git a/src/app/pages/chat/group-messages/group-messages.page.ts b/src/app/pages/chat/group-messages/group-messages.page.ts index 0180b6f80..1e4443a52 100644 --- a/src/app/pages/chat/group-messages/group-messages.page.ts +++ b/src/app/pages/chat/group-messages/group-messages.page.ts @@ -32,6 +32,8 @@ import { Storage } from '@ionic/storage'; import { CameraService } from 'src/app/services/camera.service'; import { SearchPage } from 'src/app/pages/search/search.page'; import { ProcessesService } from 'src/app/services/processes.service'; +import { VoiceRecorder, VoiceRecorderPlugin, RecordingData, GenericResponse, CurrentRecordingStatus } from 'capacitor-voice-recorder'; +import { Filesystem, Directory, Encoding } from '@capacitor/filesystem'; @Component({ selector: 'app-group-messages', @@ -74,6 +76,15 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy { @ViewChild('scrollMe') private myScrollContainer: ElementRef; + recording = false; + allowTyping = true; + storedFileNames = []; + lastAudioRecorded = ''; + audioRecorded:any = ""; + audioDownloaded:any = ""; + durationDisplay = ''; + duration = 0; + constructor( private menu: MenuController, private modalController: ModalController, @@ -132,6 +143,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy { this.wsChatMethodsService.getUserOfRoom(this.roomId).then((value) => { console.log('MEMBER', value) }) + VoiceRecorder.requestAudioRecordingPermission(); + this.loadFiles(); } setStatus(status: string) { @@ -197,6 +210,99 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy { this.currentPosition = scroll; } + calculateDuration() { + if (!this.recording) { + this.duration = 0; + this.durationDisplay = ''; + return; + } + this.duration += 1; + const minutes = Math.floor(this.duration / 60); + const seconds = (this.duration % 60).toString().padStart(2, '0'); + this.durationDisplay = `${minutes}:${seconds}`; + + setTimeout(() => { + this.calculateDuration(); + }, 1000) + } + + async getFile(fileName?:any){ + const audioFile = await Filesystem.readFile({ + path: fileName, + directory: Directory.Data + }) + //console.log(audioFile); + const base64sound = audioFile.data; + + //Converting base64 to blob + const base64 = await fetch(base64sound); + //console.log(base64); + + const base64Response = await fetch(`data:audio/ogg;base64,${base64sound}`); + //console.log(base64Response); + + this.audioRecorded = base64Response.url; + + console.log(this.audioRecorded); + + } + + async loadFiles() { + Filesystem.readdir({ + path: '', + directory: Directory.Data + }).then(result => { + console.log(result); + this.storedFileNames = result.files.reverse(); + this.lastAudioRecorded = this.storedFileNames[0]; + this.getFile(this.lastAudioRecorded); + }) + } + + startRecording() { + console.log('Recording'); + + if (this.recording) { + return; + } + this.recording = true; + VoiceRecorder.startRecording(); + this.calculateDuration(); + } + + stopRecording() { + this.allowTyping = false; + console.log('Stop'); + if (!this.recording) { + return; + } + this.recording = false; + VoiceRecorder.stopRecording().then(async (result: RecordingData) => { + this.recording = false; + if (result.value && result.value.recordDataBase64) { + const recordData = result.value.recordDataBase64; + const fileName = new Date().getTime() + ".wav"; + await Filesystem.writeFile({ + path: fileName, + directory: Directory.Data, + data: recordData, + }) + } + }) + setTimeout(async () => { + this.loadFiles(); + }, 500); + } + + async deleteRecording(fileName){ + await Filesystem.deleteFile({ + directory: Directory.Data, + path: fileName + }); + this.allowTyping = true; + this.lastAudioRecorded = ''; + this.loadFiles(); + } async goToEvent(eventId: any) { let classs; @@ -311,13 +417,43 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy { return i; } - - - sendMessage() { this.wsChatMethodsService.getGroupRoom(this.roomId).send({}) } + async sendAudio(fileName) { + const roomId = this.roomId + const audioFile = await Filesystem.readFile({ + path: fileName, + directory: Directory.Data + }) + const base64sound = audioFile.data; + const base64Response = await fetch(`data:audio/aac;base64,${base64sound}`); + const blob = await base64Response.blob(); + + const formData = new FormData(); + formData.append("blobFile", blob); + + this.wsChatMethodsService.getGroupRoom(roomId).send({ + file: { + "type": "aplication/audio", + /* "guid": '', */ + }, + attachments: [{ + "title": fileName , + "title_link": `data:audio/aac;base64,${base64sound}`, + "title_link_download": true, + "type": "file" + }], + temporaryData: formData + }) + + this.allowTyping = true; + this.lastAudioRecorded = ''; + + } + + async openOptions() { const modal = await this.popoverController.create({ component: ChatPopoverPage, diff --git a/src/app/pages/chat/messages/messages.page.html b/src/app/pages/chat/messages/messages.page.html index 712c8b7fe..992d740b5 100644 --- a/src/app/pages/chat/messages/messages.page.html +++ b/src/app/pages/chat/messages/messages.page.html @@ -176,23 +176,9 @@ fontFamily="Roboto"> está a escrever ...
- - - - - - -
{{durationDisplay}} -
@@ -208,10 +194,6 @@
- -
-
+
@@ -106,11 +106,14 @@ {{file.title}}
-
+
+ +
+
{{file.description}} - {{msg.displayType}} + {{msg.displayType}} - + @@ -238,30 +245,36 @@ + +
- - + -
+
+ - +
- - +
diff --git a/src/app/shared/chat/messages/messages.page.ts b/src/app/shared/chat/messages/messages.page.ts index 2bc888dd0..cf9219240 100644 --- a/src/app/shared/chat/messages/messages.page.ts +++ b/src/app/shared/chat/messages/messages.page.ts @@ -19,7 +19,6 @@ import { ThemeService } from 'src/app/services/theme.service' import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page'; import { SqliteService } from 'src/app/services/sqlite.service'; import { StorageService } from 'src/app/services/storage.service'; -import { Directory, Filesystem } from '@capacitor/filesystem'; import { ViewEventPage } from 'src/app/modals/view-event/view-event.page'; import { Storage } from '@ionic/storage'; import { WsChatMethodsService } from 'src/app/services/chat/ws-chat-methods.service' @@ -34,6 +33,8 @@ import { ProcessesService } from 'src/app/services/processes.service'; import { FileToBase64Service } from 'src/app/services/file/file-to-base64.service'; import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; import { DocumentViewer, DocumentViewerOptions } from '@ionic-native/document-viewer'; +import { VoiceRecorder, VoiceRecorderPlugin, RecordingData, GenericResponse, CurrentRecordingStatus } from 'capacitor-voice-recorder'; +import { Filesystem, Directory, Encoding } from '@capacitor/filesystem'; const IMAGE_DIR = 'stored-images'; @Component({ @@ -78,7 +79,16 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy downloadFile: any; massages: MessageService[] = [] - showAvatar = true + showAvatar = true; + + recording = false; + allowTyping = true; + storedFileNames = []; + lastAudioRecorded = ''; + audioRecorded:any = ""; + audioDownloaded:any = ""; + durationDisplay = ''; + duration = 0; constructor( public popoverController: PopoverController, @@ -136,7 +146,8 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy this.scrollToBottom(); this.getChatMembers(); - + VoiceRecorder.requestAudioRecordingPermission(); + this.loadFiles(); } @@ -209,6 +220,100 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy this.currentPosition = scroll; } + calculateDuration() { + if (!this.recording) { + this.duration = 0; + this.durationDisplay = ''; + return; + } + this.duration += 1; + const minutes = Math.floor(this.duration / 60); + const seconds = (this.duration % 60).toString().padStart(2, '0'); + this.durationDisplay = `${minutes}:${seconds}`; + + setTimeout(() => { + this.calculateDuration(); + }, 1000) + } + + async getFile(fileName?:any){ + const audioFile = await Filesystem.readFile({ + path: fileName, + directory: Directory.Data + }) + //console.log(audioFile); + const base64sound = audioFile.data; + + //Converting base64 to blob + const base64 = await fetch(base64sound); + //console.log(base64); + + const base64Response = await fetch(`data:audio/ogg;base64,${base64sound}`); + //console.log(base64Response); + + this.audioRecorded = base64Response.url; + + console.log(this.audioRecorded); + + } + + async loadFiles() { + Filesystem.readdir({ + path: '', + directory: Directory.Data + }).then(result => { + console.log(result); + this.storedFileNames = result.files.reverse(); + this.lastAudioRecorded = this.storedFileNames[0]; + this.getFile(this.lastAudioRecorded); + }) + } + + startRecording() { + console.log('Recording'); + + if (this.recording) { + return; + } + this.recording = true; + VoiceRecorder.startRecording(); + this.calculateDuration(); + } + + stopRecording() { + this.allowTyping = false; + console.log('Stop'); + if (!this.recording) { + return; + } + this.recording = false; + VoiceRecorder.stopRecording().then(async (result: RecordingData) => { + this.recording = false; + if (result.value && result.value.recordDataBase64) { + const recordData = result.value.recordDataBase64; + const fileName = new Date().getTime() + ".wav"; + await Filesystem.writeFile({ + path: fileName, + directory: Directory.Data, + data: recordData, + }) + } + }) + setTimeout(async () => { + this.loadFiles(); + }, 500); + } + + async deleteRecording(fileName){ + await Filesystem.deleteFile({ + directory: Directory.Data, + path: fileName + }); + this.allowTyping = true; + this.lastAudioRecorded = ''; + this.loadFiles(); + } + ngOnDestroy() { this.checktimeOut = false; window.removeEventListener('scroll', this.scrollChangeCallback, true); @@ -250,6 +355,38 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy this.wsChatMethodsService.getDmRoom(this.roomId).send({}) } + async sendAudio(fileName) { + const roomId = this.roomId + const audioFile = await Filesystem.readFile({ + path: fileName, + directory: Directory.Data + }) + const base64sound = audioFile.data; + const base64Response = await fetch(`data:audio/aac;base64,${base64sound}`); + const blob = await base64Response.blob(); + + const formData = new FormData(); + formData.append("blobFile", blob); + + this.wsChatMethodsService.getDmRoom(roomId).send({ + file: { + "type": "aplication/audio", + /* "guid": '', */ + }, + attachments: [{ + "title": fileName , + "title_link": `data:audio/aac;base64,${base64sound}`, + "title_link_download": true, + "type": "file" + }], + temporaryData: formData + }) + + this.allowTyping = true; + this.lastAudioRecorded = ''; + + } + deleteMessage(msgId: string) { const room = this.wsChatMethodsService.getDmRoom(this.roomId) this.alertService.confirmDeleteMessage(msgId, room);