mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-19 04:57:52 +00:00
Merge branch 'developer' of https://bitbucket.org/equilibriumito/gabinete-digital into developer
This commit is contained in:
Eudes Inácio
@@ -75,10 +75,12 @@
|
||||
</ion-label> -->
|
||||
|
||||
<div *ngIf="room.lastMessage.file">
|
||||
<fa-icon *ngIf="room.lastMessage.file.type != 'application/meeting' && room.lastMessage.file.type != 'application/img'" icon="file-alt" class="file-icon" [class.set-active-item-font-to-white]="room.id == idSelected"></fa-icon>
|
||||
<fa-icon *ngIf="room.lastMessage.file.type != 'application/meeting' && room.lastMessage.file.type != 'application/img' && room.lastMessage.file.type != 'application/audio'" icon="file-alt" class="file-icon" [class.set-active-item-font-to-white]="room.id == idSelected"></fa-icon>
|
||||
<fa-icon *ngIf="room.lastMessage.file.type == 'application/audio'" icon="file-audio" class="file-icon" [class.set-active-item-font-to-white]="room.id == idSelected"></fa-icon>
|
||||
<span *ngIf="room.lastMessage.file.type == 'application/audio'"> audio </span>
|
||||
|
||||
<fa-icon *ngIf="room.lastMessage.file.type == 'application/meeting'" icon="calendar-alt" class="file-icon" [class.set-active-item-font-to-white]="room.id == idSelected"></fa-icon>
|
||||
<span> {{room.lastMessage.file.name || room.lastMessage.file.subject }}</span>
|
||||
<span> {{room.lastMessage.file.name || room.lastMessage.file.subject}}</span>
|
||||
</div>
|
||||
|
||||
<ion-label *ngIf="room.lastMessage.attachments">
|
||||
@@ -120,8 +122,7 @@
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' && group.id != idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-group-chat-40.svg"></ion-icon>
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' && group.id == idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-group-chat-40-hover.svg"></ion-icon>
|
||||
</div>
|
||||
<div
|
||||
(click)="openGroupMessagesPage(group.id)" class="item-content flex-grow-1 cursor-pointer">
|
||||
<div (click)="openGroupMessagesPage(group.id)" class="item-content flex-grow-1 cursor-pointer">
|
||||
<div class="item-title-time">
|
||||
<div class="item-title" [class.item-title-active]="group.id ==idSelected">
|
||||
<ion-label>{{group.name.split('-').join(' ')}}</ion-label>
|
||||
@@ -132,11 +133,12 @@
|
||||
<div *ngIf="group.lastMessage" class="item-description d-flex align-items-center" [class.item-description-active]="group.id ==idSelected">
|
||||
<div class="item-message" *ngIf="group.otherUserType == false">{{group.lastMessage.u.name}}: {{group.lastMessage.msg}} </div>
|
||||
<div *ngIf="group.otherUserType == true">{{group.userThatIsTyping}} está escrever ...</div>
|
||||
|
||||
<div class="item-files add-ellipsis" *ngIf="group.file">
|
||||
<fa-icon *ngIf="group.lastMessage.file.type != 'application/meeting'" icon="file-alt" class="file-icon" [class.set-active-item-font-to-white]="group.id == idSelected"></fa-icon>
|
||||
<div class="item-files add-ellipsis" *ngIf="group.lastMessage.file">
|
||||
<fa-icon *ngIf="group.lastMessage.file.type != 'application/meeting' && group.lastMessage.file.type != 'application/audio'" icon="file-alt" class="file-icon" [class.set-active-item-font-to-white]="group.id == idSelected"></fa-icon>
|
||||
<fa-icon *ngIf="group.lastMessage.file.type == 'application/audio'" icon="file-audio" class="file-icon" [class.set-active-item-font-to-white]="group.id == idSelected"></fa-icon>
|
||||
<span *ngIf="group.lastMessage.file.type == 'application/audio'" class="item-files-title"> audio </span>
|
||||
<fa-icon *ngIf="group.lastMessage.file.type == 'application/meeting'" icon="calendar-alt" class="file-icon" [class.set-active-item-font-to-white]="group.id == idSelected"></fa-icon>
|
||||
<span class="item-files-title"> {{group.lastMessage.file.name || group.file.subject}}</span>
|
||||
<span *ngIf="group.lastMessage.file.type != 'application/audio'" class="item-files-title"> {{ group.lastMessage.attachments[0].title }}</span>
|
||||
</div>
|
||||
<div class="item-files" *ngIf="group.attachments">
|
||||
<div *ngIf="group.value.lastMessage.attachments[0].image_url">
|
||||
|
||||
@@ -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 */
|
||||
|
||||
|
||||
@@ -106,7 +106,7 @@
|
||||
<ion-icon *ngIf="msg.attachments[0].image_url == null" name="download-outline"></ion-icon>
|
||||
</div>
|
||||
<div *ngIf="msg.file.type != 'application/img'">
|
||||
<div class="file">
|
||||
<div class="file add-attachment-bg-color" *ngIf="msg.file.type != 'application/audio'">
|
||||
<div (click)="openPreview(msg)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file">
|
||||
<span *ngIf="msg.file.type">
|
||||
<fa-icon *ngIf="msg.file.type == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
|
||||
@@ -117,11 +117,14 @@
|
||||
<ion-label class="file-title">{{file.title}}</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-details-optional">
|
||||
<ion-label *ngIf="msg.file">
|
||||
<div *ngIf="msg.file.type == 'application/audio'">
|
||||
<audio [src]="file.title_link|safehtml" preload="metadata" class="d-flex width-100" controls controlsList="nodownload noplaybackrate"></audio>
|
||||
</div>
|
||||
<div class="file-details-optional add-attachment-bg-color">
|
||||
<ion-label *ngIf="msg.file && msg.file != ''">
|
||||
<span *ngIf="file.description">{{file.description}}</span>
|
||||
<span *ngIf="file.description && msg.file.type != 'application/webtrix'"> • </span>
|
||||
<span *ngIf="msg.file.type != 'application/webtrix'">{{msg.displayType}}</span>
|
||||
<span *ngIf="msg.file.type != 'application/webtrix' && msg.file.type != 'application/audio'">{{msg.displayType}}</span>
|
||||
</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -190,32 +193,47 @@
|
||||
<div class="typing" >
|
||||
<ngx-letters-avatar
|
||||
[avatarName]= "wsChatMethodsService.getGroupRoom(roomId).name"
|
||||
[width]="30"
|
||||
[width]="30"
|
||||
[circular]="true"
|
||||
fontFamily="Roboto"></ngx-letters-avatar>
|
||||
{{ wsChatMethodsService.getGroupRoom(roomId).userThatIsTyping }} está a escrever...
|
||||
</div>
|
||||
|
||||
<div class="width-100 pl-20 pr-20">
|
||||
<span *ngIf="!lastAudioRecorded">{{durationDisplay}}</span>
|
||||
<audio [src]="audioRecorded" class="d-flex width-100 mt-10 mb-10" *ngIf="lastAudioRecorded" controls controlsList="nodownload noplaybackrate"></audio>
|
||||
</div>
|
||||
|
||||
<div class="container width-100 d-flex">
|
||||
<div>
|
||||
<button class="btn-no-color" (click)="openChatOptions()">
|
||||
<button *ngIf="!recording && !lastAudioRecorded && allowTyping" class="btn-no-color" (click)="openChatOptions()">
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-options" src="assets/images/icons-add.svg"></ion-icon>
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-options" src="assets/images/theme/gov/icons-add.svg"></ion-icon>
|
||||
</button>
|
||||
<button *ngIf="recording || lastAudioRecorded || !allowTyping" class="btn-no-color" (click)="deleteRecording()">
|
||||
<fa-icon class="icon-size-27" icon="trash"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="message-box width-80">
|
||||
<ion-item class="ion-no-padding type-message" lines="none">
|
||||
<ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="wsChatMethodsService.getGroupRoom(roomId).message" (ionChange)="wsChatMethodsService.getGroupRoom(roomId).sendTyping()"></ion-textarea>
|
||||
<button hidden class="btn-no-color">
|
||||
<ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
|
||||
<div *ngIf="!recording && !lastAudioRecorded" class="type-message">
|
||||
<ion-textarea *ngIf="allowTyping" autocomplete="on" autocorrect="on" spellcheck="true" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="wsChatMethodsService.getGroupRoom(roomId).message" (ionChange)="wsChatMethodsService.getGroupRoom(roomId).sendTyping()"></ion-textarea>
|
||||
</div>
|
||||
<div *ngIf="recording" class="d-flex align-items-center justify-content-center">
|
||||
<button (click)="stopRecording()" class="btn-no-color d-flex align-items-center justify-content-center">
|
||||
<ion-icon class="icon-size-45" name="stop-circle-outline" color="danger"></ion-icon>
|
||||
</button>
|
||||
</ion-item>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button #recordbtn *ngIf="!wsChatMethodsService.getGroupRoom(roomId).message && !lastAudioRecorded" (click)="startRecording()" class="btn-no-color">
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/default/icons-chat-record-audio.svg"></ion-icon>
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-record-audio.svg"></ion-icon>
|
||||
</button>
|
||||
<button *ngIf="wsChatMethodsService.getGroupRoom(roomId).message" class="btn-no-color" (click)="sendMessage()">
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
|
||||
</button>
|
||||
<button *ngIf="!wsChatMethodsService.getGroupRoom(roomId).message" class="btn-no-color">
|
||||
<button *ngIf="!wsChatMethodsService.getGroupRoom(roomId).message && lastAudioRecorded" class="btn-no-color" (click)="sendAudio(lastAudioRecorded)">
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
|
||||
</button>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,6 +32,9 @@ 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';
|
||||
import { DomSanitizer } from '@angular/platform-browser';
|
||||
|
||||
@Component({
|
||||
selector: 'app-group-messages',
|
||||
@@ -74,6 +77,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,
|
||||
@@ -97,8 +109,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
|
||||
private AttachmentsService: AttachmentsService,
|
||||
private storage: Storage,
|
||||
private processesService: ProcessesService,
|
||||
|
||||
private CameraService: CameraService,
|
||||
private sanitiser: DomSanitizer,
|
||||
) {
|
||||
this.loggedUserChat = authService.ValidatedUserChat['data'];
|
||||
this.isGroupCreated = true;
|
||||
@@ -132,6 +144,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) {
|
||||
@@ -145,19 +159,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
|
||||
}
|
||||
|
||||
deleteMessage(msgId: string) {
|
||||
let body = {
|
||||
"roomId": this.roomId,
|
||||
"msgId": msgId,
|
||||
"asUser": false,
|
||||
}
|
||||
if (msgId) {
|
||||
//this.alertService.confirmDeleteMessage(body);
|
||||
}
|
||||
else {
|
||||
this.toastService.badRequest('Não foi possível apagar');
|
||||
}
|
||||
this.showMessageOptions = false;
|
||||
this.selectedMsgId = "";
|
||||
const room = this.wsChatMethodsService.getGroupRoom(this.roomId)
|
||||
this.alertService.confirmDeleteMessage(msgId, room);
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
@@ -197,6 +200,106 @@ 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() {
|
||||
|
||||
this.storage.get('fileName').then((fileName) => {
|
||||
this.lastAudioRecorded = fileName;
|
||||
})
|
||||
|
||||
this.storage.get('recordData').then((recordData) => {
|
||||
console.log(recordData);
|
||||
if(recordData.value.recordDataBase64.includes('data:audio')){
|
||||
this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(recordData.value.recordDataBase64);
|
||||
}
|
||||
else{
|
||||
this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(`data:${recordData.value.mimeType};base64,${recordData.value.recordDataBase64}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
startRecording() {
|
||||
console.log('Recording');
|
||||
|
||||
if (this.recording) {
|
||||
return;
|
||||
}
|
||||
this.recording = true;
|
||||
VoiceRecorder.startRecording();
|
||||
this.calculateDuration();
|
||||
}
|
||||
|
||||
stopRecording() {
|
||||
this.deleteRecording();
|
||||
this.allowTyping = false;
|
||||
console.log('Stop');
|
||||
if (!this.recording) {
|
||||
return;
|
||||
}
|
||||
this.recording = false;
|
||||
VoiceRecorder.stopRecording().then(async (result: RecordingData) => {
|
||||
console.log(result);
|
||||
this.recording = false;
|
||||
if (result.value && result.value.recordDataBase64) {
|
||||
const recordData = result.value.recordDataBase64;
|
||||
//console.log(recordData);
|
||||
const fileName = new Date().getTime() + ".mp3";
|
||||
//Save file
|
||||
this.storage.set('fileName',fileName);
|
||||
this.storage.set('recordData',result).then(() => {
|
||||
console.log('Audio recorded saved');
|
||||
})
|
||||
}
|
||||
})
|
||||
setTimeout(async () => {
|
||||
this.loadFiles();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
async deleteRecording(){
|
||||
this.storage.remove('fileName');
|
||||
this.storage.remove('recordData');
|
||||
|
||||
this.allowTyping = true;
|
||||
this.lastAudioRecorded = '';
|
||||
this.loadFiles();
|
||||
}
|
||||
|
||||
async goToEvent(eventId: any) {
|
||||
let classs;
|
||||
@@ -268,6 +371,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
|
||||
|
||||
close() {
|
||||
this.modalController.dismiss();
|
||||
this.deleteRecording();
|
||||
}
|
||||
|
||||
doRefresh(ev: any) {
|
||||
@@ -311,13 +415,48 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
|
||||
return i;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
sendMessage() {
|
||||
this.wsChatMethodsService.getGroupRoom(this.roomId).send({})
|
||||
}
|
||||
|
||||
async sendAudio(fileName) {
|
||||
|
||||
const roomId = this.roomId
|
||||
this.storage.get('recordData').then((recordData) => {
|
||||
console.log(recordData);
|
||||
if(recordData.value.recordDataBase64.includes('data:audio')){
|
||||
this.audioRecorded = recordData.value.recordDataBase64;
|
||||
}
|
||||
else{
|
||||
this.audioRecorded = `data:${recordData.value.mimeType};base64,${recordData.value.recordDataBase64}`;
|
||||
}
|
||||
});
|
||||
|
||||
//Converting base64 to blob
|
||||
const base64Response = await fetch(this.audioRecorded);
|
||||
const blob = await base64Response.blob();
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("blobFile", blob);
|
||||
|
||||
this.wsChatMethodsService.getGroupRoom(roomId).send({
|
||||
file: {
|
||||
"type": "application/audio",
|
||||
/* "guid": '', */
|
||||
},
|
||||
attachments: [{
|
||||
"title": fileName ,
|
||||
"title_link": this.audioRecorded,
|
||||
"title_link_download": true,
|
||||
"type": "file"
|
||||
}],
|
||||
temporaryData: formData
|
||||
})
|
||||
this.deleteRecording();
|
||||
|
||||
}
|
||||
|
||||
|
||||
async openOptions() {
|
||||
const modal = await this.popoverController.create({
|
||||
component: ChatPopoverPage,
|
||||
|
||||
@@ -12,6 +12,7 @@ import { BtnModalDismissPage } from 'src/app/shared/btn-modal-dismiss/btn-modal-
|
||||
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { LettersAvatarModule } from "ngx-letters-avatar";
|
||||
import { PipesModule } from 'src/app/pipes/pipes.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
@@ -21,7 +22,8 @@ import { LettersAvatarModule } from "ngx-letters-avatar";
|
||||
FontAwesomeModule,
|
||||
MessagesPageRoutingModule,
|
||||
MatMenuModule,
|
||||
LettersAvatarModule
|
||||
LettersAvatarModule,
|
||||
PipesModule,
|
||||
],
|
||||
declarations: [MessagesPage]
|
||||
})
|
||||
|
||||
@@ -87,8 +87,8 @@
|
||||
<ion-icon *ngIf="msg.attachments[0].image_url == null" name="download-outline"></ion-icon>
|
||||
</div>
|
||||
<div *ngIf="msg.file.type != 'application/img'">
|
||||
<div class="file">
|
||||
<div (click)="docIndex(i); openPreview(msg)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file">
|
||||
<div class="file add-attachment-bg-color" *ngIf="msg.file.type != 'application/audio'">
|
||||
<div (click)="docIndex(i); viewDocument(msg, file.title_link)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file">
|
||||
<span *ngIf="msg.file.type">
|
||||
<fa-icon *ngIf="msg.file.type == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
|
||||
<fa-icon *ngIf="msg.file.type == 'application/word'" icon="file-word" class="word-icon"></fa-icon>
|
||||
@@ -98,11 +98,14 @@
|
||||
<ion-label class="file-title">{{file.title}}</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="file-details-optional">
|
||||
<div *ngIf="msg.file.type == 'application/audio'">
|
||||
<audio [src]="file.title_link|safehtml" preload="metadata" class="d-flex width-100" controls controlsList="nodownload noplaybackrate"></audio>
|
||||
</div>
|
||||
<div class="file-details-optional add-attachment-bg-color">
|
||||
<ion-label *ngIf="msg.file && msg.file != ''">
|
||||
<span *ngIf="file.description">{{file.description}}</span>
|
||||
<span *ngIf="file.description && msg.file.type != 'application/webtrix'"> • </span>
|
||||
<span *ngIf="msg.file.type != 'application/webtrix'">{{msg.displayType}}</span>
|
||||
<span *ngIf="msg.file.type != 'application/webtrix' && msg.file.type != 'application/audio'">{{msg.displayType}}</span>
|
||||
</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -173,43 +176,41 @@
|
||||
fontFamily="Roboto"></ngx-letters-avatar>
|
||||
está a escrever ...
|
||||
</div>
|
||||
<div class="width-100 pl-20 pr-20">
|
||||
<span *ngIf="!lastAudioRecorded">{{durationDisplay}}</span>
|
||||
<audio [src]="audioRecorded" class="d-flex width-100 mt-10 mb-10" *ngIf="lastAudioRecorded" controls controlsList="nodownload noplaybackrate"></audio>
|
||||
</div>
|
||||
|
||||
<ion-list hidden>
|
||||
<ion-item (click)="playFile(storedFileNames)">
|
||||
{{storedFileNames}}
|
||||
</ion-item>
|
||||
<ion-item (click)="playFile(storedFileNames)">
|
||||
{{storedFileNames}}
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<audio hidden controls>
|
||||
<!-- <source src="https://www.tabularium.pt/file-upload/5g6DkyMC4MHcuaDyp/Audio%20record.mp3" type="audio/mpeg"> -->
|
||||
</audio>
|
||||
<!-- <button (click)="startRecording()">Start Recording</button>
|
||||
<button (click)="stopRecording()">Stop Recording</button> -->
|
||||
<div class="container width-100 d-flex">
|
||||
<div>
|
||||
|
||||
<button class="btn-no-color" (click)="openChatOptions()">
|
||||
<button *ngIf="!recording && !lastAudioRecorded && allowTyping" class="btn-no-color" (click)="openChatOptions()">
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-options" src="assets/images/icons-add.svg"></ion-icon>
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-options" src="assets/images/theme/gov/icons-add.svg"></ion-icon>
|
||||
</button>
|
||||
<button *ngIf="recording || lastAudioRecorded || !allowTyping" class="btn-no-color" (click)="deleteRecording()">
|
||||
<fa-icon class="icon-size-27" icon="trash"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="width-70">
|
||||
<ion-item class="ion-no-padding ion-no-margin type-message" lines="none">
|
||||
<ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" *ngIf="!recording" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="wsChatMethodsService.getDmRoom(roomId).message" (ionChange)="wsChatMethodsService.getDmRoom(roomId).sendTyping()"></ion-textarea>
|
||||
<ion-textarea autocomplete="on" spellcheck="true" *ngIf="recording" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="durationDisplay"></ion-textarea>
|
||||
<button hidden #recordbtn class="btn-no-color" (click)="notImplemented()">
|
||||
<ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
|
||||
<div class="width-70 message-container">
|
||||
<div *ngIf="!recording && !lastAudioRecorded" class="type-message">
|
||||
<ion-textarea *ngIf="allowTyping" autocomplete="on" autocorrect="on" spellcheck="true" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="wsChatMethodsService.getDmRoom(roomId).message" (ionChange)="wsChatMethodsService.getDmRoom(roomId).sendTyping()"></ion-textarea>
|
||||
</div>
|
||||
<div *ngIf="recording" class="d-flex align-items-center justify-content-center">
|
||||
<button (click)="stopRecording()" class="btn-no-color d-flex align-items-center justify-content-center">
|
||||
<ion-icon class="icon-size-45" name="stop-circle-outline" color="danger"></ion-icon>
|
||||
</button>
|
||||
</ion-item>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button *ngIf="wsChatMethodsService.getDmRoom(roomId).message" class="btn-no-color" (click)="sendMessage()">
|
||||
<button #recordbtn *ngIf="!wsChatMethodsService.getDmRoom(roomId).message && !lastAudioRecorded" (click)="startRecording()" class="btn-no-color">
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/default/icons-chat-record-audio.svg"></ion-icon>
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-record-audio.svg"></ion-icon>
|
||||
</button>
|
||||
<button *ngIf="wsChatMethodsService.getDmRoom(roomId).message" class="btn-no-color" (click)="sendMessage()" class="btn-no-color">
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
|
||||
</button>
|
||||
<button *ngIf="!wsChatMethodsService.getDmRoom(roomId).message" class="btn-no-color">
|
||||
<button *ngIf="!wsChatMethodsService.getDmRoom(roomId).message && lastAudioRecorded" (click)="sendAudio(lastAudioRecorded)" class="btn-no-color">
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
|
||||
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
|
||||
</button>
|
||||
|
||||
@@ -56,9 +56,6 @@
|
||||
width: calc(100% - 25px);
|
||||
text-align: right;
|
||||
|
||||
/* ion-icon{
|
||||
font-size: 25px;
|
||||
} */
|
||||
.middle-container-options-icons{
|
||||
color: #0782c9;
|
||||
font-size: 23px;
|
||||
@@ -117,6 +114,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-content{
|
||||
.welcome-text{
|
||||
/* width: 322px; */
|
||||
@@ -148,7 +146,7 @@
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.messages-list-item-wrapper{
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.messages-list-item-wrapper-active{
|
||||
background: #e6f6ff75 !important;
|
||||
@@ -228,7 +226,6 @@
|
||||
justify-content: center;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.chat-icon-options{
|
||||
@@ -319,4 +316,15 @@ display: block;
|
||||
|
||||
.typing ngx-letters-avatar {
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
button{
|
||||
padding: 0px;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
padding: 0px;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@ import { ChatUserStorage } from 'src/app/store/chat/chat-user.service';
|
||||
import { environment } from 'src/environments/environment';
|
||||
import { ThemeService } from 'src/app/services/theme.service'
|
||||
|
||||
import { Directory, Encoding, FilesystemDirectory } from '@capacitor/filesystem';
|
||||
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
|
||||
import { VoiceRecorder, VoiceRecorderPlugin, RecordingData, GenericResponse, CurrentRecordingStatus } from 'capacitor-voice-recorder';
|
||||
import { Haptics, ImpactStyle } from '@capacitor/haptics';
|
||||
import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
|
||||
@@ -40,13 +40,10 @@ import { SearchPage } from 'src/app/pages/search/search.page';
|
||||
import { Storage } from '@ionic/storage';
|
||||
import { FileToBase64Service } from 'src/app/services/file/file-to-base64.service';
|
||||
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
|
||||
import { Plugins } from '@capacitor/core';
|
||||
import { fromByteArray } from 'base64-js';
|
||||
import { DomSanitizer } from '@angular/platform-browser';
|
||||
/* import {Plugins} from '@capacitor/core';
|
||||
|
||||
const { Filesystem } = Plugins;
|
||||
|
||||
|
||||
const IMAGE_DIR = 'stored-images';
|
||||
const { Filesystem } = Plugins; */
|
||||
|
||||
@Component({
|
||||
selector: 'app-messages',
|
||||
@@ -87,7 +84,11 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
|
||||
LoadedDocument: any = null;
|
||||
|
||||
recording = false;
|
||||
allowTyping = true;
|
||||
storedFileNames = [];
|
||||
lastAudioRecorded = '';
|
||||
audioRecorded:any = "";
|
||||
audioDownloaded:any = "";
|
||||
durationDisplay = '';
|
||||
duration = 0;
|
||||
@ViewChild('recordbtn', { read: ElementRef }) recordBtn: ElementRef;
|
||||
@@ -120,6 +121,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
|
||||
private processesService: ProcessesService,
|
||||
private storage: Storage,
|
||||
private fileToBase64Service: FileToBase64Service,
|
||||
private sanitiser: DomSanitizer,
|
||||
) {
|
||||
this.loggedUser = authService.ValidatedUserChat['data'];
|
||||
this.roomId = this.navParams.get('roomId');
|
||||
@@ -131,6 +133,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
|
||||
}
|
||||
};
|
||||
|
||||
console.log(this.wsChatMethodsService.getDmRoom(this.roomId).loadHistory({}));
|
||||
|
||||
this.wsChatMethodsService.getDmRoom(this.roomId).loadHistory({})
|
||||
this.wsChatMethodsService.getDmRoom(this.roomId).scrollDown = this.scrollToBottomClicked
|
||||
this.wsChatMethodsService.openRoom(this.roomId)
|
||||
@@ -145,15 +149,14 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
|
||||
this.wsChatMethodsService.getUserOfRoom(this.roomId).then((value) => {
|
||||
console.log('MEMBER', value)
|
||||
})
|
||||
|
||||
//this.loadFiles();
|
||||
VoiceRecorder.requestAudioRecordingPermission();
|
||||
this.getChatMembers();
|
||||
Filesystem.mkdir({
|
||||
/* Filesystem.mkdir({
|
||||
path: IMAGE_DIR,
|
||||
directory: Directory.Data,
|
||||
recursive: true
|
||||
});
|
||||
}); */
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
@@ -167,11 +170,14 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
|
||||
onStart: ev => {
|
||||
Haptics.impact({ style: ImpactStyle.Light })
|
||||
this.startRecording();
|
||||
this.calculateDuration();
|
||||
//this.calculateDuration();
|
||||
},
|
||||
onEnd: ev => {
|
||||
Haptics.impact({ style: ImpactStyle.Light })
|
||||
this.stopRecording();
|
||||
/* setTimeout(() => {
|
||||
this.loadFiles();
|
||||
}, 500); */
|
||||
}
|
||||
}, true);
|
||||
longpress.enable();
|
||||
@@ -194,61 +200,73 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
|
||||
}
|
||||
|
||||
async loadFiles() {
|
||||
Filesystem.readdir({
|
||||
path: '',
|
||||
directory: Directory.Data
|
||||
}).then(result => {
|
||||
console.log(result);
|
||||
const temp: any[] = result.files.reverse();
|
||||
this.storedFileNames = temp[0];
|
||||
console.log(this.storedFileNames);
|
||||
|
||||
this.storage.get('fileName').then((fileName) => {
|
||||
this.lastAudioRecorded = fileName;
|
||||
})
|
||||
|
||||
this.storage.get('recordData').then((recordData) => {
|
||||
console.log(recordData);
|
||||
if(recordData.value.recordDataBase64.includes('data:audio')){
|
||||
this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(recordData.value.recordDataBase64);
|
||||
}
|
||||
else{
|
||||
this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(`data:${recordData.value.mimeType};base64,${recordData.value.recordDataBase64}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
startRecording() {
|
||||
console.log('Recording');
|
||||
|
||||
if (this.recording) {
|
||||
return;
|
||||
}
|
||||
this.recording = true;
|
||||
VoiceRecorder.startRecording();
|
||||
VoiceRecorder.startRecording()
|
||||
.then((result: GenericResponse) => console.log(result.value))
|
||||
.catch(error => console.log(error));
|
||||
this.calculateDuration();
|
||||
}
|
||||
|
||||
stopRecording() {
|
||||
this.deleteRecording();
|
||||
this.allowTyping = false;
|
||||
console.log('Stop');
|
||||
if (!this.recording) {
|
||||
return;
|
||||
}
|
||||
this.recording = false;
|
||||
VoiceRecorder.stopRecording().then(async (result: RecordingData) => {
|
||||
console.log(result);
|
||||
this.recording = false;
|
||||
if (result.value && result.value.recordDataBase64) {
|
||||
const recordData = result.value.recordDataBase64;
|
||||
console.log(recordData);
|
||||
this.myAudio = recordData;
|
||||
const fileName = new Date().getTime() + ".wav";
|
||||
await Filesystem.writeFile({
|
||||
path: fileName,
|
||||
directory: Directory.Data,
|
||||
data: recordData,
|
||||
//console.log(recordData);
|
||||
const fileName = new Date().getTime() + ".mp3";
|
||||
//Save file
|
||||
this.storage.set('fileName',fileName);
|
||||
this.storage.set('recordData',result).then(() => {
|
||||
console.log('Audio recorded saved');
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
setTimeout(async () => {
|
||||
this.loadFiles();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
async playFile(fileName?: any) {
|
||||
const audioFile = await Filesystem.readFile({
|
||||
path: fileName,
|
||||
directory: Directory.Data
|
||||
})
|
||||
console.log(audioFile);
|
||||
const base64sound = audioFile.data;
|
||||
|
||||
const audioRef = new Audio(`data:audio/aac;base64,${base64sound}`)
|
||||
audioRef.oncanplaythrough = () => audioRef.play();
|
||||
audioRef.load();
|
||||
async deleteRecording(){
|
||||
this.storage.remove('fileName');
|
||||
this.storage.remove('recordData');
|
||||
|
||||
this.allowTyping = true;
|
||||
this.lastAudioRecorded = '';
|
||||
this.loadFiles();
|
||||
}
|
||||
|
||||
|
||||
|
||||
handlePress(id?: string) {
|
||||
this.selectedMsgId = id;
|
||||
this.showMessageOptions = true;
|
||||
@@ -260,19 +278,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
|
||||
}
|
||||
|
||||
deleteMessage(msgId: string) {
|
||||
let body = {
|
||||
"roomId": this.roomId,
|
||||
"msgId": msgId,
|
||||
"asUser": false,
|
||||
}
|
||||
if (msgId) {
|
||||
//this.alertService.confirmDeleteMessage(body);
|
||||
}
|
||||
else {
|
||||
this.toastService.badRequest('Não foi possível apagar');
|
||||
}
|
||||
this.showMessageOptions = false;
|
||||
this.selectedMsgId = "";
|
||||
const room = this.wsChatMethodsService.getDmRoom(this.roomId)
|
||||
this.alertService.confirmDeleteMessage(msgId, room);
|
||||
}
|
||||
|
||||
|
||||
@@ -282,6 +289,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
|
||||
|
||||
close() {
|
||||
this.modalController.dismiss();
|
||||
this.deleteRecording();
|
||||
}
|
||||
|
||||
load() {
|
||||
@@ -358,6 +366,53 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
|
||||
this.wsChatMethodsService.getDmRoom(this.roomId).send({})
|
||||
}
|
||||
|
||||
async sendAudio(fileName) {
|
||||
|
||||
const roomId = this.roomId
|
||||
this.storage.get('recordData').then((recordData) => {
|
||||
console.log(recordData);
|
||||
if(recordData.value.recordDataBase64.includes('data:audio')){
|
||||
this.audioRecorded = recordData.value.recordDataBase64;
|
||||
}
|
||||
else{
|
||||
this.audioRecorded = `data:${recordData.value.mimeType};base64,${recordData.value.recordDataBase64}`;
|
||||
}
|
||||
});
|
||||
|
||||
//Converting base64 to blob
|
||||
const base64Response = await fetch(this.audioRecorded);
|
||||
const blob = await base64Response.blob();
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("blobFile", blob);
|
||||
|
||||
this.wsChatMethodsService.getDmRoom(roomId).send({
|
||||
file: {
|
||||
"type": "application/audio",
|
||||
/* "guid": '', */
|
||||
},
|
||||
attachments: [{
|
||||
"title": fileName ,
|
||||
"title_link": this.audioRecorded,
|
||||
"title_link_download": true,
|
||||
"type": "file"
|
||||
}],
|
||||
temporaryData: formData
|
||||
})
|
||||
this.deleteRecording();
|
||||
|
||||
}
|
||||
|
||||
blobToBase64 = blob => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(blob);
|
||||
return new Promise(resolve => {
|
||||
reader.onloadend = () => {
|
||||
resolve(reader.result);
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
viewDocument(msg: any, url?: string) {
|
||||
console.log(msg)
|
||||
if (msg.attachments.type == "application/webtrix") {
|
||||
@@ -396,6 +451,13 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
|
||||
}
|
||||
}
|
||||
|
||||
/* playSound(url?:any){
|
||||
alert('here')
|
||||
console.log(url);
|
||||
//this.audioDownloaded = this.sanitiser.bypassSecurityTrustResourceUrl(url);
|
||||
this.audioDownloaded = url;
|
||||
} */
|
||||
|
||||
docIndex(index: number) {
|
||||
this.dicIndex = index
|
||||
}
|
||||
@@ -840,7 +902,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
|
||||
if (msg.file.type == "application/img") {
|
||||
this.downloadFile = 'data:image/jpeg;base64,' + btoa(new Uint8Array(event.body).reduce((data, byte) => data + String.fromCharCode(byte), ''));
|
||||
} else {
|
||||
//console.log('TRY THIS LIBRARY ',fromByteArray(event.body));
|
||||
//console.log('TRY THIS LIBRARY ',fromByteArray(event.body));
|
||||
this.downloadFile = event.body;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user