This commit is contained in:
Peter Maquiran
2022-03-22 16:11:30 +01:00
19 changed files with 478 additions and 315 deletions
@@ -118,7 +118,15 @@
<ion-label class="file-title">{{file.title}}</ion-label>
</div>
</div>
<div *ngIf="msg.file.type == 'application/audio'">
<div class="audio-contentainer" *ngIf="msg.file.type == 'application/audio' && !file.title_link">
<ion-item class="add-attachment-bg-color" shape="round" lines="none" type="button">
<ion-icon name="mic-outline" class="file-icon"></ion-icon>
<ion-label>{{file.title}}</ion-label>
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon-download" src="assets/icon/theme/default/icons-download.svg" slot="end"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon-download" src="assets/icon/theme/gov/icons-download.svg" slot="end"></ion-icon>
</ion-item>
</div>
<div class="audio-contentainer" *ngIf="msg.file.type == 'application/audio' && file.title_link">
<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">
@@ -193,7 +201,7 @@
</ion-content>
<ion-footer>
<div class="typing" *ngIf="wsChatMethodsService.getGroupRoom(roomId).otherUserType == true">
<ngx-letters-avatar *ngIf="showAvatar"
[avatarName]= "wsChatMethodsService.getGroupRoom(roomId).name"
@@ -35,6 +35,7 @@ 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';
import { MessageService } from 'src/app/services/chat/message.service';
@Component({
selector: 'app-group-messages',
@@ -43,8 +44,6 @@ import { DomSanitizer } from '@angular/platform-browser';
})
export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
showLoader: boolean;
isGroupCreated: boolean;
loggedUser: any;
@@ -368,7 +367,6 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
}
async getChatMembers() {
//return await this.chatService.getMembers(roomId).toPromise();
this.chatService.getAllUsers().subscribe(res => {
console.log(res);
@@ -432,46 +430,64 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
this.wsChatMethodsService.getGroupRoom(this.roomId).send({})
}
base64toBlob(base64Data, contentType) {
contentType = contentType || '';
var sliceSize = 1024;
var byteCharacters = atob(base64Data);
var bytesLength = byteCharacters.length;
var slicesCount = Math.ceil(bytesLength / sliceSize);
var byteArrays = new Array(slicesCount);
for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
var begin = sliceIndex * sliceSize;
var end = Math.min(begin + sliceSize, bytesLength);
var bytes = new Array(end - begin);
for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
bytes[i] = byteCharacters[offset].charCodeAt(0);
}
byteArrays[sliceIndex] = new Uint8Array(bytes);
}
return new Blob(byteArrays, { type: contentType });
}
async sendAudio(fileName) {
const roomId = this.roomId
try {
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}`;
}
});
} catch (error) {}
let audioFile;
this.storage.get('recordData').then((recordData) => {
console.log(recordData);
audioFile = 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 encodedData = btoa(this.audioRecorded);
const blob = this.base64toBlob(encodedData, recordData.value.mimeType)
console.log(blob)
const formData = new FormData();
formData.append("blobFile", blob);
this.wsChatMethodsService.getGroupRoom(roomId).send({
file: {
"type": "application/audio",
/* "guid": '', */
"msDuration":audioFile.value.msDuration,
"mimeType":audioFile.value.mimeType,
},
attachments: [{
"title": fileName ,
"title_link": this.audioRecorded,
"title_link_download": true,
"type": "file"
"type": "audio"
}],
temporaryData: formData
})
this.deleteRecording();
});
this.deleteRecording();
}
@@ -959,40 +975,11 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
card.el.style['z-index'] = 11;
}
downloadFileMsg(msg) {
console.log('FILE TYPE', msg.file.type)
this.downloadFile = "";
// if (msg.file.type == "application/img") {
this.AttachmentsService.downloadFile(msg.file.guid).subscribe(async (event) => {
console.log('FILE TYPE 22', msg.file.guid)
var name = msg.file.guid;
if (event.type === HttpEventType.DownloadProgress) {
//this.downloadProgess = Math.round((100 * event.loaded) / event.total);
console.log('FILE TYPE 33', msg.file.type)
} else if (event.type === HttpEventType.Response) {
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 {
this.downloadFile = event.body;
}
msg.attachments[0] = {
image_url: this.downloadFile,
name: msg.attachments[0].name,
title: msg.attachments[0].title,
title_link_download: msg.attachments[0].title_link_download,
ts: msg.attachments[0].ts
}
this.sqlservice.updateChatMsg(msg._id, this.downloadFile);
}
});
console.log('FILE TYPE 44', this.downloadFile)
//}
downloadFileMsg(msg: MessageService) {
msg.downloadFileMsg()
}
async openPreview(msg) {
async openPreview(msg: MessageService) {
if (!msg.attachments[0].image_url ||msg.attachments[0].image_url === null || msg.attachments[0].image_url === '') {
this.downloadFileMsg(msg)
@@ -1012,5 +999,12 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
}
}
async audioPreview(msg) {
console.log(msg);
if (!msg.attachments[0].title_link || msg.attachments[0].title_link === null || msg.attachments[0].title_link === '') {
this.downloadFileMsg(msg)
} else {}
}
}
+91 -44
View File
@@ -1,4 +1,4 @@
<ion-header class="ion-no-border">
<ion-header class="ion-no-border">
<ion-toolbar class="header-toolbar">
<!-- <div #rectangle class="rectangle" (press)="handlePress()">
Double click me to change the color
@@ -26,14 +26,15 @@
<div hidden class="right">
<button class="btn-no-color" (click)="openMessagesOptions()">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-menu.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-menu.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-menu.svg">
</ion-icon>
</button>
</div>
</div>
<div hidden class="header-bottom" (click)="addContacts()">
<div class="header-bottom-icon">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/icon/icons-user.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/icon/theme/gov/icons-user.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/icon/icons-user.svg"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/icon/theme/gov/icons-user.svg"></ion-icon>
</div>
<div class="header-bottom-contacts">
<ion-label class="text-color-blue">Adicionar contacto</ion-label>
@@ -51,8 +52,11 @@
</ion-refresher-content>
</ion-refresher> -->
<div (click)="handleClick()" class="messages" #scrollMe>
<div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of wsChatMethodsService.getDmRoom(this.roomId).messages; let last = last" [class.messages-list-item-wrapper-active]="msg._id == selectedMsgId" >
<div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' (click)="downloadFileMsg(msg)" *ngIf="msg.msg !=''">
<div class="messages-list-item-wrapper container-width-100"
*ngFor="let msg of wsChatMethodsService.getDmRoom(this.roomId).messages; let last = last"
[class.messages-list-item-wrapper-active]="msg._id == selectedMsgId">
<div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}'
*ngIf="msg.msg !=''">
<div class="title">
<ion-label (click)="hkellor()">{{msg.u.name}}</ion-label>
<span class="time">{{msg.duration}}</span>
@@ -80,47 +84,78 @@
</div>
<div *ngIf="msg.file.type != 'application/img'">
<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">
<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>
<fa-icon *ngIf="msg.file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'" icon="file-word" class="excel-icon"></fa-icon>
<ion-icon *ngIf="msg.file.type == 'application/webtrix'" src="assets/icon/webtrix.svg"></ion-icon>
<fa-icon *ngIf="msg.file.type == 'application/word'" icon="file-word" class="word-icon">
</fa-icon>
<fa-icon
*ngIf="msg.file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"
icon="file-word" class="excel-icon"></fa-icon>
<ion-icon *ngIf="msg.file.type == 'application/webtrix'" src="assets/icon/webtrix.svg">
</ion-icon>
</span>
<ion-label class="file-title">{{file.title}}</ion-label>
</div>
</div>
<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 class="audio-contentainer" *ngIf="msg.file.type == 'application/audio' && !file.title_link">
<ion-item class="add-attachment-bg-color" shape="round" lines="none" type="button">
<ion-icon name="mic-outline" class="file-icon"></ion-icon>
<ion-label>{{file.title}}</ion-label>
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon-download" src="assets/icon/theme/default/icons-download.svg" slot="end"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon-download" src="assets/icon/theme/gov/icons-download.svg" slot="end"></ion-icon>
</ion-item>
</div>
<div class="audio-contentainer" *ngIf="msg.file.type == 'application/audio' && file.title_link">
<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.file.type != 'application/audio'">{{msg.displayType}}</span>
<span
*ngIf="msg.file.type != 'application/webtrix' && msg.file.type != 'application/audio'">{{msg.displayType}}</span>
</ion-label>
</div>
</div>
</div>
</div>
{{last ? scrollToBottom() : ''}}
</div>
{{last ? scrollToBottom() : ''}}
</div>
</div>
<div *ngIf="msg.file.type == 'application/meeting'" class="info-meeting">
<ion-label class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br />
<button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal"><ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label></button><br />
<ion-label class="info-meeting-medium"><ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a {{showDateDuration(msg.file.end_date)}}</ion-label><br />
<ion-label class="info-meeting-medium"><ion-icon></ion-icon><ion-icon name="location-outline"></ion-icon> {{msg.file.venue}}</ion-label><br />
</div>
<div *ngIf="msg.file.type == 'application/meeting'" class="info-meeting">
<ion-label class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br />
<button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal">
<ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label>
</button><br />
<ion-label class="info-meeting-medium">
<ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a
{{showDateDuration(msg.file.end_date)}}
</ion-label><br />
<ion-label class="info-meeting-medium">
<ion-icon></ion-icon>
<ion-icon name="location-outline"></ion-icon> {{msg.file.venue}}
</ion-label><br />
</div>
</div>
<div *ngIf="msg.file && msg.delate == false">
<div *ngIf="msg.file.type == 'application/meeting'" class="info-meeting">
<ion-label class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br />
<button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal"><ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label></button><br />
<ion-label class="info-meeting-medium"><ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a {{showDateDuration(msg.file.end_date)}}</ion-label><br />
<ion-label class="info-meeting-medium"><ion-icon></ion-icon><ion-icon name="location-outline"></ion-icon> {{msg.file.venue}}</ion-label><br />
<button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal">
<ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label>
</button><br />
<ion-label class="info-meeting-medium">
<ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a
{{showDateDuration(msg.file.end_date)}}
</ion-label><br />
<ion-label class="info-meeting-medium">
<ion-icon></ion-icon>
<ion-icon name="location-outline"></ion-icon> {{msg.file.venue}}
</ion-label><br />
</div>
{{last ? scrollToBottom() : ''}}
</div>
@@ -164,24 +199,24 @@
<ion-footer >
<div class="typing" *ngIf="wsChatMethodsService.getDmRoom(roomId).otherUserType == true">
<ngx-letters-avatar
[avatarName]= "wsChatMethodsService.getGroupRoom(roomId).name"
[width]="30"
[circular]="true"
fontFamily="Roboto"></ngx-letters-avatar>
<div class="typing" *ngIf="wsChatMethodsService.getDmRoom(roomId).otherUserType == true">
<ngx-letters-avatar [avatarName]="wsChatMethodsService.getGroupRoom(roomId).name" [width]="30" [circular]="true"
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>
<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 *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>
<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>
@@ -189,26 +224,38 @@
</div>
<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>
<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>
<ion-icon class="icon-size-45" name="stop-circle-outline" color="danger"></ion-icon>
</button>
</div>
</div>
<div>
<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 #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 *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 && 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 *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>
</div>
</div>
+51 -61
View File
@@ -370,45 +370,63 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
this.wsChatMethodsService.getDmRoom(this.roomId).send({})
}
base64toBlob(base64Data, contentType) {
contentType = contentType || '';
var sliceSize = 1024;
var byteCharacters = atob(base64Data);
var bytesLength = byteCharacters.length;
var slicesCount = Math.ceil(bytesLength / sliceSize);
var byteArrays = new Array(slicesCount);
for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
var begin = sliceIndex * sliceSize;
var end = Math.min(begin + sliceSize, bytesLength);
var bytes = new Array(end - begin);
for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
bytes[i] = byteCharacters[offset].charCodeAt(0);
}
byteArrays[sliceIndex] = new Uint8Array(bytes);
}
return new Blob(byteArrays, { type: contentType });
}
async sendAudio(fileName) {
const roomId = this.roomId
try {
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}`;
}
});
} catch (error) {}
let audioFile;
this.storage.get('recordData').then((recordData) => {
console.log(recordData);
audioFile = 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 encodedData = btoa(this.audioRecorded);
const blob = this.base64toBlob(encodedData, recordData.value.mimeType)
console.log(blob)
const formData = new FormData();
formData.append("blobFile", blob);
this.wsChatMethodsService.getDmRoom(roomId).send({
file: {
"type": "application/audio",
/* "guid": '', */
"msDuration":audioFile.value.msDuration,
"mimeType":audioFile.value.mimeType,
},
attachments: [{
"title": fileName ,
"title_link": this.audioRecorded,
"title_link_download": true,
"type": "file"
"type": "audio"
}],
temporaryData: formData
})
this.deleteRecording();
});
this.deleteRecording();
}
blobToBase64 = blob => {
@@ -749,14 +767,11 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
/* const imageData = await this.fileToBase64Service.convert(file).then((filee) => {
console.log('Add file', filee)
}) */
const response = await fetch(file);
const blob = await response.blob();
const blob2 = new Blob([blob])
console.log('Add file base64', file)
console.log('Add file blob', blob)
const blob = new Blob(file, { type: file.type })
console.log('Add file', blob)
const formData = new FormData();
formData.append("blobFile", blob2);
formData.append("blobFile", blob);
this.wsChatMethodsService.getDmRoom(roomId).send({
file: {
@@ -896,39 +911,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
downloadFileMsg(msg: MessageService) {
console.log('FILE TYPE', msg.file.type)
this.downloadFile = "";
//if (msg.file.type == "application/img") {
this.AttachmentsService.downloadFile(msg.file.guid).subscribe(async (event) => {
console.log('FILE TYPE 22', msg.file.guid)
var name = msg.file.guid;
if (event.type === HttpEventType.DownloadProgress) {
this.downloadProgess = Math.round((100 * event.loaded) / event.total);
console.log(this.downloadProgess)
console.log('FILE TYPE 33', msg.file.type)
} else if (event.type === HttpEventType.Response) {
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));
this.downloadFile = event.body;
}
msg.attachments[0] = {
image_url: this.downloadFile,
name: msg.attachments[0].name,
title: msg.attachments[0].title,
title_link_download: msg.attachments[0].title_link_download,
ts: msg.attachments[0].ts
}
this.sqlservice.updateChatMsg(msg._id, this.downloadFile);
}
});
//}
msg.downloadFileMsg()
}
testDownlod(msg: MessageService) {
@@ -938,7 +921,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
async openPreview(msg) {
console.log(msg);
if (!msg.attachments[0].image_url || msg.attachments[0].image_url === null || msg.attachments[0].image_url === '') {
if (!msg.attachments[0].image_url || msg.attachments[0].image_url === null || msg.attachments[0].image_url === '' || !msg.attachments[0].title_link || msg.attachments[0].title_link === null || msg.attachments[0].title_link === '') {
this.downloadFile(msg)
//this.testDownlod(msg)
@@ -958,6 +941,13 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
}
async audioPreview(msg) {
console.log(msg);
if (!msg.attachments[0].title_link || msg.attachments[0].title_link === null || msg.attachments[0].title_link === '') {
this.downloadFileMsg(msg)
} else {}
}
imageSize(img) {
var canvas = document.createElement('canvas');
+2
View File
@@ -174,6 +174,8 @@ export class AuthService {
// // message.getFileFromDb()
// });
message.downloadFileMsg()
return true
} catch(e) {
console.log('failed to upload to server', e)
+43 -19
View File
@@ -10,6 +10,8 @@ import { ChatStorageService } from './chat-storage.service'
import { ChatMethodsService } from './chat-methods.service'
import { MessageModel, DeleteMessageModel } from '../../models/beast-orm'
import { AESEncrypt } from '../aesencrypt.service'
import { HttpClient, HttpEventType } from '@angular/common/http';
import { AttachmentsService } from 'src/app/services/attachments.service';
@Injectable({
providedIn: 'root'
@@ -59,7 +61,8 @@ export class MessageService {
private WsChatService: WsChatService,
private ChatStorageService: ChatStorageService,
private ChatMethodsService: ChatMethodsService,
private AESEncrypt: AESEncrypt) {
private AESEncrypt: AESEncrypt,
private AttachmentsService: AttachmentsService,) {
}
setData({customFields = {}, channels, mentions, msg ,rid ,ts, u, t, _id, id, _updatedAt, file, attachments, temporaryData, localReference , viewed = [], received = [], delate = false, delateRequest =false, }:Message) {
@@ -102,10 +105,13 @@ export class MessageService {
}
if(this.hasFile) {
// this.getFileFromDb()
if(this.file.type != 'application/webtrix') {
this.displayType = this.file.type.replace('application/','').toUpperCase()
}
this.downloadFileMsg()
}
this.calDateDuration()
@@ -118,19 +124,6 @@ export class MessageService {
return firstName + ' ' + lastName
}
// getFileFromDb() {
// if(this.hasFile) {
// if (this.file.guid) {
// this.storage.get(this.file.guid).then((image) => {
// if(image != null) {
// this.file.image_url = image
// }
// });
// }
// }
// }
async send(): Promise<any> {
this.sendAttempt++;
@@ -186,6 +179,11 @@ export class MessageService {
}
async sendRequest(params) {
if(params?.attachments?.image_url) {
delete params?.attachments?.image_url
}
this.ChatMethodsService.send(params).subscribe(
(response: any) => {
const ChatMessage = response.message
@@ -222,11 +220,37 @@ export class MessageService {
await this.save()
}
async downloadFileMsg() {
const result = await this.NfService.beforeSendAttachment(this)
if(result) {
downloadFileMsg() {
}
let downloadFile = "";
this.AttachmentsService.downloadFile(this.file.guid).subscribe(async (event) => {
if (event.type === HttpEventType.DownloadProgress) {
console.log('FILE TYPE 33', this.file.type)
} else if (event.type === HttpEventType.Response) {
if (this.file.type == "application/img") {
downloadFile = 'data:image/jpeg;base64,' + btoa(new Uint8Array(event.body).reduce((data, byte) => data + String.fromCharCode(byte), ''));
} else if (this.file.type === 'application/pdf') {
downloadFile = event.body as any;
} else if (this.file.type == 'application/audio') {
downloadFile = new Uint8Array(event.body).reduce((data, byte) => data + String.fromCharCode(byte), '');
}
this.attachments[0] = {
image_url: downloadFile,
name: this.attachments[0].name,
title: this.attachments[0].title,
title_link: downloadFile,
title_link_download: this.attachments[0].title_link_download,
ts: this.attachments[0].ts
}
// save the changes to the storage
this.save()
}
});
}
+7 -7
View File
@@ -21,6 +21,7 @@ import { ChatMethodsService } from './chat-methods.service'
import { DeleteMessageModel, MessageModel } from '../../models/beast-orm'
import { AESEncrypt } from '../aesencrypt.service'
import { IncomingChatMessage, ChatMessageInterface, falseTypingMethod } from 'src/app/models/message.model';
import { AttachmentsService } from 'src/app/services/attachments.service';
@Injectable({
providedIn: 'root'
@@ -75,7 +76,8 @@ export class RoomService {
private NfService: NfService,
private ChatStorageService: ChatStorageService,
private ChatMethodsService: ChatMethodsService,
private AESEncrypt: AESEncrypt
private AESEncrypt: AESEncrypt,
private AttachmentsService: AttachmentsService
) {
this.NativeNotificationService.askForPermission()
@@ -143,7 +145,7 @@ export class RoomService {
}
}
setData({members, u, customFields = {}, id, name, t, lastMessage = new MessageService(this.storage, this.NfService, this.WsChatService, this.ChatStorageService, this.ChatMethodsService, this.AESEncrypt), _updatedAt }) {
setData({members, u, customFields = {}, id, name, t, lastMessage = new MessageService(this.storage, this.NfService, this.WsChatService, this.ChatStorageService, this.ChatMethodsService, this.AESEncrypt, this.AttachmentsService), _updatedAt }) {
this.customFields = customFields
this.id = id
this.name = name
@@ -670,7 +672,7 @@ export class RoomService {
message = this.fix_updatedAt(message)
const wewMessage = new MessageService(this.storage, this.NfService, this.WsChatService, this.ChatStorageService, this.ChatMethodsService, this.AESEncrypt)
const wewMessage = new MessageService(this.storage, this.NfService, this.WsChatService, this.ChatStorageService, this.ChatMethodsService, this.AESEncrypt, this.AttachmentsService)
wewMessage.setData(message)
wewMessage.loadHistory = this.hasLoadHistory
@@ -698,8 +700,6 @@ export class RoomService {
}
async ChatMessageIsPresentInTheView(ChatMessage:ChatMessageInterface) {
let foundIndex;
@@ -729,7 +729,7 @@ export class RoomService {
async prepareCreate({message, save = true}): Promise<MessageService> {
message = this.fix_updatedAt(message)
const wewMessage = new MessageService(this.storage, this.NfService, this.WsChatService, this.ChatStorageService, this.ChatMethodsService, this.AESEncrypt)
const wewMessage = new MessageService(this.storage, this.NfService, this.WsChatService, this.ChatStorageService, this.ChatMethodsService, this.AESEncrypt, this.AttachmentsService)
wewMessage.setData(message)
wewMessage.loadHistory = this.hasLoadHistory
@@ -741,7 +741,7 @@ export class RoomService {
simplePrepareMessage(message) {
message = this.fix_updatedAt(message)
const wewMessage = new MessageService(this.storage, this.NfService, this.WsChatService, this.ChatStorageService, this.ChatMethodsService, this.AESEncrypt)
const wewMessage = new MessageService(this.storage, this.NfService, this.WsChatService, this.ChatStorageService, this.ChatMethodsService, this.AESEncrypt, this.AttachmentsService)
wewMessage.setData(message)
wewMessage.loadHistory = this.hasLoadHistory
@@ -19,6 +19,7 @@ import { AuthService } from '../auth.service';
import { ChatStorageService } from './chat-storage.service'
import { ChatMethodsService } from './chat-methods.service'
import { AESEncrypt } from '../aesencrypt.service'
import { AttachmentsService } from 'src/app/services/attachments.service';
@Injectable({
providedIn: 'root'
@@ -55,7 +56,8 @@ export class WsChatMethodsService {
private authService: AuthService,
private ChatStorageService: ChatStorageService,
private ChatMethodsService:ChatMethodsService,
private AESEncrypt: AESEncrypt
private AESEncrypt: AESEncrypt,
private AttachmentsService:AttachmentsService
) {
this.loggedUser = authService.ValidatedUserChat['data'];
@@ -305,7 +307,7 @@ export class WsChatMethodsService {
// create room
if(!this.roomExist(roomId)) {
let room:RoomService = new RoomService(this.WsChatService, new MessageService(this.storage, this.NfService, this.WsChatService, this.ChatStorageService, this.ChatMethodsService, this.AESEncrypt), this.storage, this.platform, this.sqlservice, this.NativeNotificationService, this.sortService, this.ChatService, this.NfService , this.ChatStorageService, this.ChatMethodsService, this.AESEncrypt)
let room:RoomService = new RoomService(this.WsChatService, new MessageService(this.storage, this.NfService, this.WsChatService, this.ChatStorageService, this.ChatMethodsService, this.AESEncrypt, this.AttachmentsService), this.storage, this.platform, this.sqlservice, this.NativeNotificationService, this.sortService, this.ChatService, this.NfService , this.ChatStorageService, this.ChatMethodsService, this.AESEncrypt, this.AttachmentsService)
room.setData(setData)
room.receiveMessage()
room.getAllUsers = this.getUsers
@@ -92,7 +92,15 @@
<ion-label class="file-title">{{file.title}}</ion-label>
</div>
</div>
<div class="audio-contentainer" *ngIf="msg.file.type == 'application/audio'">
<div (click)="audioPreview(msg)" class="audio-contentainer" *ngIf="msg.file.type == 'application/audio' && !file.title_link">
<ion-item class="add-attachment-bg-color" shape="round" lines="none" type="button">
<ion-icon name="mic-outline" class="file-icon"></ion-icon>
<ion-label>{{file.title}}</ion-label>
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon-download" src="assets/icon/theme/default/icons-download.svg" slot="end"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon-download" src="assets/icon/theme/gov/icons-download.svg" slot="end"></ion-icon>
</ion-item>
</div>
<div class="audio-contentainer" *ngIf="msg.file.type == 'application/audio' && file.title_link">
<audio [src]="file.title_link|safehtml" preload="metadata" controls controlsList="nodownload noplaybackrate"></audio>
</div>
<div class="file-details-optional add-attachment-bg-color">
@@ -420,46 +420,64 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
this.wsChatMethodsService.getGroupRoom(this.roomId).send({})
}
base64toBlob(base64Data, contentType) {
contentType = contentType || '';
var sliceSize = 1024;
var byteCharacters = atob(base64Data);
var bytesLength = byteCharacters.length;
var slicesCount = Math.ceil(bytesLength / sliceSize);
var byteArrays = new Array(slicesCount);
for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
var begin = sliceIndex * sliceSize;
var end = Math.min(begin + sliceSize, bytesLength);
var bytes = new Array(end - begin);
for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
bytes[i] = byteCharacters[offset].charCodeAt(0);
}
byteArrays[sliceIndex] = new Uint8Array(bytes);
}
return new Blob(byteArrays, { type: contentType });
}
async sendAudio(fileName) {
const roomId = this.roomId
try {
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}`;
}
});
} catch (error) {}
let audioFile;
this.storage.get('recordData').then((recordData) => {
console.log(recordData);
audioFile = 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 encodedData = btoa(this.audioRecorded);
const blob = this.base64toBlob(encodedData, recordData.value.mimeType)
console.log(blob)
const formData = new FormData();
formData.append("blobFile", blob);
this.wsChatMethodsService.getGroupRoom(roomId).send({
file: {
"type": "application/audio",
/* "guid": '', */
"msDuration":audioFile.value.msDuration,
"mimeType":audioFile.value.mimeType,
},
attachments: [{
"title": fileName ,
"title_link": this.audioRecorded,
"title_link_download": true,
"type": "file"
"type": "audio"
}],
temporaryData: formData
})
this.deleteRecording();
});
this.deleteRecording();
}
deleteMessage(msgId: string) {
@@ -979,41 +997,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
downloadFileMsg(msg: MessageService) {
console.log('FILE TYPE', msg.file.type)
this.downloadFile = "";
if (msg.file.type == "application/img") {
this.AttachmentsService.downloadFile(msg.file.guid).subscribe(async (event) => {
console.log('FILE TYPE 22', msg.file.guid)
var name = msg.file.guid;
if (event.type === HttpEventType.DownloadProgress) {
//this.downloadProgess = Math.round((100 * event.loaded) / event.total);
console.log('FILE TYPE 33', msg.file.type)
} else if (event.type === HttpEventType.Response) {
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 if (msg.file.type === 'application/pdf') {
this.downloadFile = event.body;
}
msg.attachments[0] = {
image_url: this.downloadFile,
name: msg.attachments[0].name,
title: msg.attachments[0].title,
title_link_download: msg.attachments[0].title_link_download,
ts: msg.attachments[0].ts
}
await this.storage.set(msg.file.guid, this.downloadFile).then(() => {
console.log('IMAGE SAVED')
});
}
});
}
msg.downloadFileMsg()
}
async openPreview(msg) {
@@ -1037,5 +1021,12 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
}
async audioPreview(msg) {
console.log(msg);
if (!msg.attachments[0].title_link || msg.attachments[0].title_link === null || msg.attachments[0].title_link === '') {
this.downloadFileMsg(msg)
} else {}
}
}
@@ -109,7 +109,15 @@
<ion-label class="file-title">{{file.title}}</ion-label>
</div>
</div>
<div class="audio-contentainer" *ngIf="msg.file.type == 'application/audio'">
<div (click)="audioPreview(msg)" class="audio-contentainer" *ngIf="msg.file.type == 'application/audio' && !file.title_link">
<ion-item class="add-attachment-bg-color" shape="round" lines="none" type="button">
<ion-icon name="mic-outline" class="file-icon"></ion-icon>
<ion-label>{{file.title}}</ion-label>
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon-download" src="assets/icon/theme/default/icons-download.svg" slot="end"></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon-download" src="assets/icon/theme/gov/icons-download.svg" slot="end"></ion-icon>
</ion-item>
</div>
<div class="audio-contentainer" *ngIf="msg.file.type == 'application/audio' && file.title_link">
<audio [src]="file.title_link|safehtml" preload="metadata" class="flex-grow-1" controls controlsList="nodownload noplaybackrate"></audio>
</div>
<div class="file-details-optional add-attachment-bg-color">
@@ -227,6 +227,13 @@
margin-top: 4px;
}
.chat-icon-download{
font-size: 95px;
margin: 0 auto;
margin-top: 4px;
border: 1px solid red;
}
.type-message{
display: flex;
border: 1px solid #ebebeb;
@@ -329,3 +336,8 @@ display: block;
.typing ngx-letters-avatar {
padding-right: 5px;
}
.div-do-audio{
border: 1px solid red !important;
overflow: auto;
}
+45 -62
View File
@@ -25,7 +25,6 @@ import { WsChatMethodsService } from 'src/app/services/chat/ws-chat-methods.serv
import { WsChatService } from 'src/app/services/chat/ws-chat.service'
import { MessageService } from 'src/app/services/chat/message.service';
import { AttachmentsService } from 'src/app/services/attachments.service';
import { CameraService } from 'src/app/services/camera.service';
import { FileType } from 'src/app/models/fileType';
import { SearchPage } from 'src/app/pages/search/search.page';
@@ -270,7 +269,6 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
}
startRecording() {
console.log('Recording');
if (this.recording) {
return;
@@ -357,56 +355,69 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
this.wsChatMethodsService.getDmRoom(this.roomId).send({})
}
base64toBlob(base64Data, contentType) {
contentType = contentType || '';
var sliceSize = 1024;
var byteCharacters = atob(base64Data);
var bytesLength = byteCharacters.length;
var slicesCount = Math.ceil(bytesLength / sliceSize);
var byteArrays = new Array(slicesCount);
for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
var begin = sliceIndex * sliceSize;
var end = Math.min(begin + sliceSize, bytesLength);
var bytes = new Array(end - begin);
for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
bytes[i] = byteCharacters[offset].charCodeAt(0);
}
byteArrays[sliceIndex] = new Uint8Array(bytes);
}
return new Blob(byteArrays, { type: contentType });
}
async sendAudio(fileName) {
const roomId = this.roomId
let audioFile;
try {
this.storage.get('recordData').then((recordData) => {
// console.log(recordData);
audioFile = recordData;
if(recordData.value.recordDataBase64.includes('data:audio')){
this.audioRecorded = recordData.value.recordDataBase64;
}
else{
this.audioRecorded = `data:${recordData.value.mimeType};base64,${recordData.value.recordDataBase64}`;
}
});
} catch (error) {}
this.storage.get('recordData').then((recordData) => {
console.log(recordData);
audioFile = 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 encodedData = btoa(this.audioRecorded);
const blob = this.base64toBlob(encodedData, recordData.value.mimeType)
console.log(blob)
const formData = new FormData();
formData.append("blobFile", blob);
this.wsChatMethodsService.getDmRoom(roomId).send({
file: {
"type": "application/audio",
/* "guid": '', */
"msDuration":audioFile.value.msDuration,
"mimeType":audioFile.value.mimeType,
},
attachments: [{
"title": fileName ,
"title_link": this.audioRecorded,
"title_link_download": true,
"type": "audio"
}],
temporaryData: formData
})
this.deleteRecording();
});
this.deleteRecording();
}
deleteMessage(msgId: string, msg:MessageService) {
deleteMessage(msgId: string, msg:MessageService) {
msg.delateStatusFalse()
this.wsChatMethodsService.getDmRoom(this.roomId).sendDeleteRequest(msgId)
}
async viewDocument(msg: any, url?: string) {
@@ -753,7 +764,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
const roomId = this.roomId
const file: any = await this.fileService.getFileFromDevice(types);
console.log('Add file', file)
/* const imageData = await this.fileToBase64Service.convert(file).then((filee) => {
console.log('Add file', filee)
@@ -889,42 +900,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
downloadFileMsg(msg: MessageService) {
console.log('FILE TYPE', msg.file.type)
this.downloadFile = "";
//if (msg.file.type == "application/img") {
this.AttachmentsService.downloadFile(msg.file.guid).subscribe(async (event) => {
console.log('FILE TYPE 22', msg.file.guid)
var name = msg.file.guid;
if (event.type === HttpEventType.DownloadProgress) {
//this.downloadProgess = Math.round((100 * event.loaded) / event.total);
console.log('FILE TYPE 33', msg.file.type)
} else if (event.type === HttpEventType.Response) {
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 if (msg.file.type === 'application/pdf') {
this.downloadFile = event.body;
}
msg.attachments[0] = {
image_url: this.downloadFile,
name: msg.attachments[0].name,
title: msg.attachments[0].title,
title_link_download: msg.attachments[0].title_link_download,
ts: msg.attachments[0].ts
}
// save the changes to the storage
msg.save()
}
});
// }
msg.downloadFileMsg()
}
_arrayBufferToBase64( buffer ) {
@@ -944,6 +920,13 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
DocumentViewer.viewDocument
}
async audioPreview(msg) {
console.log(msg);
if (!msg.attachments[0].title_link || msg.attachments[0].title_link === null || msg.attachments[0].title_link === '') {
this.downloadFileMsg(msg)
} else {}
}
async openPreview(msg) {
console.log(msg);