This commit is contained in:
tiago.kayaya
2022-03-04 18:46:56 +01:00
parent 0c9d5275a6
commit 9fcd6f67c5
8 changed files with 60 additions and 34 deletions
+22 -26
View File
@@ -174,49 +174,45 @@
está a escrever ...
</div>
<ion-list>
<span (click)="playFile(lastAudioRecorded)">{{lastAudioRecorded}}</span>
<ion-button *ngIf="lastAudioRecorded" slot="end" (click)="deleteRecording(lastAudioRecorded)" fill="clear" color="danger">
<ion-icon name="trash-outline" slot="icon-only"></ion-icon>
</ion-button>
<!-- <ion-item *ngFor="let audio of storedFileNames" (click)="playFile(audio)">
{{audio}}
<ion-button slot="end" (click)="deleteRecording(audio)" fill="clear" color="danger">
<ion-icon name="trash-outline" slot="icon-only"></ion-icon>
</ion-button>
</ion-item> -->
</ion-list>
<!-- <audio controls>
<source src="https://www.tabularium.pt/file-upload/5g6DkyMC4MHcuaDyp/Audio%20record.mp3" type="audio/mpeg">
</audio> -->
<button hidden (click)="startRecording()">Start Recording</button>
<button hidden (click)="stopRecording()">Stop Recording</button>
<div class="width-100">
<span *ngIf="!lastAudioRecorded">{{durationDisplay}}</span>
<span *ngIf="lastAudioRecorded" (click)="playFile(lastAudioRecorded)">{{lastAudioRecorded}}</span>
</div>
<div class="container width-100 d-flex">
<div>
<button *ngIf="!lastAudioRecorded" 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="lastAudioRecorded" class="btn-no-color" (click)="deleteRecording(lastAudioRecorded)">
<button *ngIf="recording || lastAudioRecorded || !allowTyping" class="btn-no-color" (click)="deleteRecording(lastAudioRecorded)">
<fa-icon icon="trash" class="word-icon"></fa-icon>
</button>
</div>
<div class="width-70">
<ion-item *ngIf="!lastAudioRecorded" 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 #recordbtn class="btn-no-color">
<div class="d-flex align-items-center justify-center width-70">
<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>
<!-- <ion-textarea hidden autocomplete="on" spellcheck="true" *ngIf="recording" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="durationDisplay"></ion-textarea> -->
<!-- <button #recordbtn class="btn-no-color">
<ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
</button>
</ion-item>
</button> -->
</div>
<button *ngIf="recording" (click)="stopRecording()" class="btn-no-color">
<ion-icon name="stop-circle-outline" color="danger"></ion-icon>
</button>
</div>
<div>
<button *ngIf="wsChatMethodsService.getDmRoom(roomId).message" class="btn-no-color" (click)="sendMessage()">
<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 #recordbtn *ngIf="!wsChatMethodsService.getDmRoom(roomId).message && !lastAudioRecorded" (click)="startRecording()">
<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 && !lastAudioRecorded" class="btn-no-color">
<button *ngIf="wsChatMethodsService.getDmRoom(roomId).message" class="btn-no-color" (click)="sendMessage()">
<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>
@@ -228,7 +228,7 @@
justify-content: center;
justify-content: space-evenly;
align-items: center;
border: 1px solid red;
}
.chat-icon-options{
@@ -251,6 +251,7 @@
padding-left: 15px;
align-items: center;
overflow: auto;
border: 1px solid red;
ion-textarea{
margin: 0 !important;
@@ -319,4 +320,4 @@ display: block;
.typing ngx-letters-avatar {
padding-right: 5px;
}
}
+12 -5
View File
@@ -83,6 +83,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
LoadedDocument: any = null;
recording = false;
allowTyping = true;
storedFileNames = [];
lastAudioRecorded = '';
durationDisplay = '';
@@ -162,14 +163,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(() => {
/* setTimeout(() => {
this.loadFiles();
}, 500);
}, 500); */
}
}, true);
longpress.enable();
@@ -210,9 +211,11 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
}
this.recording = true;
VoiceRecorder.startRecording();
this.calculateDuration();
}
stopRecording() {
this.allowTyping = false;
console.log('Stop');
if (!this.recording) {
return;
@@ -232,6 +235,9 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
})
}
})
setTimeout(() => {
this.loadFiles();
}, 500);
}
async deleteRecording(fileName){
@@ -239,6 +245,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
directory: Directory.Data,
path: fileName
});
this.allowTyping = true;
this.lastAudioRecorded = '';
this.loadFiles();
}
@@ -421,11 +428,11 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
this.wsChatMethodsService.getDmRoom(roomId).send({
file: {
"type": "audio/aac",
"guid": '',
/* "guid": '', */
},
attachments: [{
"title": fileName ,
"title_link": audioRef,
"title_link": base64Response.url,
"title_link_download": true,
"type": "file"
}],