Preview image on chat solved

This commit is contained in:
Eudes Inácio
2022-07-06 17:02:42 +01:00
parent 1dc0aa5c53
commit 9dde6d6fd3
4 changed files with 203 additions and 136 deletions
@@ -31,6 +31,7 @@ import { MessageService } from 'src/app/services/chat/message.service';
import { File } from '@awesome-cordova-plugins/file/ngx';
import { FileOpener } from '@awesome-cordova-plugins/file-opener/ngx';
import { SessionStore } from 'src/app/store/session.service';
import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
@Component({
selector: 'app-group-messages',
@@ -1054,7 +1055,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
return blob;
}
openFile(pdfString, filename) {
openFile(pdfString, filename, type) {
const blob = this.b64toBlob(pdfString, 'application/pdf')
let pathFile = ''
const fileName = filename
@@ -1105,21 +1106,38 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
this.downloadFileFromBrowser(msg.attachments[0].name, str)
/* const modal = await this.modalController.create({
component: ViewMediaPage,
cssClass: 'modal modal-desktop',
componentProps: {
image: str,
type: msg.file.type,
username: msg.u.name,
_updatedAt: msg._updatedAt
}
});
modal.present(); */
if (msg.file.type == "application/img") {
const modal = await this.modalController.create({
component: ViewMediaPage,
cssClass: 'modal modal-desktop',
componentProps: {
image: msg.attachments[0].image_url,
type: msg.file.type,
username: msg.u.name,
_updatedAt: msg._updatedAt
}
});
modal.present();
} else {
this.downloadFileFromBrowser(msg.attachments[0].name, str)
}
} else {
this.openFile(str, msg.attachments[0].name);
if (msg.file.type == "application/img") {
const modal = await this.modalController.create({
component: ViewMediaPage,
cssClass: 'modal modal-desktop',
componentProps: {
image: msg.attachments[0].image_url,
type: msg.file.type,
username: msg.u.name,
_updatedAt: msg._updatedAt
}
});
modal.present();
} else {
this.openFile(str, msg.attachments[0].name, msg.file.type);
}
}
}
}
+98 -76
View File
@@ -19,7 +19,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 { VoiceRecorder, RecordingData, GenericResponse} from 'capacitor-voice-recorder';
import { VoiceRecorder, RecordingData, GenericResponse } from 'capacitor-voice-recorder';
import { Haptics, ImpactStyle } from '@capacitor/haptics';
import { SqliteService } from 'src/app/services/sqlite.service';
import { ViewEventPage } from 'src/app/modals/view-event/view-event.page';
@@ -37,6 +37,9 @@ import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
import { DomSanitizer } from '@angular/platform-browser';
import { SessionStore } from 'src/app/store/session.service';
import { HttpErrorResponse } from '@angular/common/http';
import { File } from '@awesome-cordova-plugins/file/ngx';
import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
import { FileOpener } from '@awesome-cordova-plugins/file-opener/ngx';
const IMAGE_DIR = 'stored-images';
@@ -100,7 +103,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
downloadProgess: number;
downloadLoader: boolean;
audioPermissionStatus: 'granted'| 'denied' | 'prompt' | null = null
audioPermissionStatus: 'granted' | 'denied' | 'prompt' | null = null
sessionStore = SessionStore
constructor(
@@ -132,10 +135,12 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
private sanitiser: DomSanitizer,
private alertController: AlertController,
// private document: DocumentViewer
private file: File,
private fileOpener: FileOpener,
) {
this.loggedUser = authService.ValidatedUserChat['data'];
this.roomId = this.navParams.get('roomId');
window.onresize = (event) => {
if (window.innerWidth > 701) {
@@ -143,7 +148,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
}
}
this.wsChatMethodsService.getDmRoom(this.roomId).loadHistory({})
this.wsChatMethodsService.getDmRoom(this.roomId).scrollDown = this.scrollToBottomClicked
@@ -159,9 +164,9 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
ngOnInit() {
this.chatService.refreshtoken();
this.wsChatMethodsService.getUserOfRoom(this.roomId).then((value) => {
})
this.getChatMembers();
}
@@ -210,11 +215,11 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
try {
this.storage.get('recordData').then((recordData) => {
if (recordData?.value?.recordDataBase64.includes('data:audio')) {
this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(recordData?.value?.recordDataBase64);
}
else if(recordData?.value?.mimeType && recordData?.value?.recordDataBase64) {
else if (recordData?.value?.mimeType && recordData?.value?.recordDataBase64) {
this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(`data:${recordData.value.mimeType};base64,${recordData?.value?.recordDataBase64}`);
}
});
@@ -225,22 +230,22 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
async startRecording() {
VoiceRecorder.requestAudioRecordingPermission();
if(await VoiceRecorder.canDeviceVoiceRecord().then((result: GenericResponse) =>{return result.value})){
if(await VoiceRecorder.requestAudioRecordingPermission().then((result: GenericResponse) => {return result.value})){
if (await VoiceRecorder.canDeviceVoiceRecord().then((result: GenericResponse) => { return result.value })) {
if (await VoiceRecorder.requestAudioRecordingPermission().then((result: GenericResponse) => { return result.value })) {
//if(await this.hasAudioRecordingPermission()){
if (this.recording) {
return;
}
this.recording = true;
VoiceRecorder.startRecording();
this.calculateDuration();
if (this.recording) {
return;
}
this.recording = true;
VoiceRecorder.startRecording();
this.calculateDuration();
//}
}
else{
else {
this.toastService._badRequest('Para gravar uma mensagem de voz, permita o acesso do Gabinete Digital ao seu microfone.');
}
}
else{
else {
this.toastService._badRequest('Este dispositivo não tem capacidade para gravação de áudio!');
}
}
@@ -248,13 +253,13 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
stopRecording() {
this.deleteRecording();
this.allowTyping = false;
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;
@@ -263,7 +268,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
//Save file
this.storage.set('fileName', fileName);
this.storage.set('recordData', result).then(() => {
})
}
})
@@ -348,7 +353,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
});
await modal.present();
modal.onDidDismiss().then((res) => {
});
}
@@ -412,16 +417,16 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
if (recordData?.value?.recordDataBase64.includes('data:audio')) {
this.audioRecorded = recordData?.value?.recordDataBase64;
}
else if(recordData?.value?.mimeType && recordData?.value?.recordDataBase64) {
else if (recordData?.value?.mimeType && recordData?.value?.recordDataBase64) {
this.audioRecorded = `data:${recordData.value.mimeType};base64,${recordData?.value?.recordDataBase64}`;
}
//Converting base64 to blob
const encodedData = btoa(this.audioRecorded);
const blob = this.base64toBlob(encodedData, recordData.value.mimeType)
const formData = new FormData();
formData.append("blobFile", blob);
@@ -444,7 +449,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
}
viewDocument(file: any, url?: string) {
if (file.type == "application/webtrix") {
this.openViewDocumentModal(file);
}
@@ -595,7 +600,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
IsRequired: "true",
}
});
this.popoverController.dismiss();
if (window.innerWidth <= 1024) {
const modal = await this.modalController.create({
@@ -629,7 +634,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
const blob = await base64.blob();
const formData = new FormData();
formData.append("blobFile", blob);
this.wsChatMethodsService.getDmRoom(roomId).send({
file: {
@@ -709,7 +714,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
resultType: CameraResultType.Base64,
source: CameraSource.Photos
});
//const imageData = await this.fileToBase64Service.convert(file)
//
@@ -746,17 +751,17 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
const file: any = await this.fileService.getFileFromDevice(types);
if (file.type != "application/img" && file.type != "image/png" && file.type != "image/jpeg" && file.type != "image/gif") {
const encodedData = btoa(JSON.stringify(await this.getBase64(file)));
const blob = this.base64toBlob(encodedData, file.type)
const formData = new FormData();
formData.append('blobFile', blob);
this.wsChatMethodsService.getDmRoom(roomId).send({
file: {
@@ -772,7 +777,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
temporaryData: formData
});
} else {
}
@@ -787,7 +792,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
resolve(reader.result)
};
reader.onerror = function (error) {
};
});
@@ -795,7 +800,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
async openChatOptions(ev?: any) {
const roomId = this.roomId
const popover = await this.popoverController.create({
component: ChatOptionsPopoverPage,
@@ -810,7 +815,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
});
await popover.present();
popover.onDidDismiss().then(async (res) => {
if (res['data'] == 'meeting') {
this.bookMeeting();
}
@@ -837,11 +842,11 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
} else {
this.sqlservice.getAllChatMSG(roomId).then((msg: any) => {
let chatmsgArray = [];
let array = []
msg.forEach(element => {
let msgChat = {
_id: element.Id,
@@ -861,7 +866,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
});
})
}
}
@@ -943,27 +948,27 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
}
openFile(pdfString, filename, type) {
// const blob = this.b64toBlob(pdfString, type)
// let pathFile = ''
// const fileName = filename
// const contentFile = blob
// if (this.platform.is('ios')) {
// pathFile = this.file.documentsDirectory
// } else {
// pathFile = this.file.externalRootDirectory
// }
//
//
//
// this.file
// .writeFile(pathFile, fileName, contentFile, { replace: true })
// .then(success => {
// this.fileOpener
// .open(pathFile + fileName, type)
// .then(() =>
// .catch(e =>
// })
// .catch(e =>
const blob = this.b64toBlob(pdfString, type)
let pathFile = ''
const fileName = filename
const contentFile = blob
if (this.platform.is('ios')) {
pathFile = this.file.documentsDirectory
} else {
pathFile = this.file.externalRootDirectory
}
this.file
.writeFile(pathFile, fileName, contentFile, { replace: true })
.then(success => {
this.fileOpener
.open(pathFile + fileName, type)
.then(() => console.log())
.catch(e => console.error(e))
})
.catch(e => console.error(e))
}
downloadFileFromBrowser(fileName: string, data: any): void {
@@ -976,9 +981,9 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
async openPreview(msg) {
if(msg.file.type === "application/webtrix") {
if (msg.file.type === "application/webtrix") {
this.viewDocument(msg.file, msg.attachments.image_url)
} else {
@@ -992,21 +997,38 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
this.downloadFileFromBrowser(msg.attachments[0].name, str)
/* const modal = await this.modalController.create({
component: ViewMediaPage,
cssClass: 'modal modal-desktop',
componentProps: {
image: str,
type: msg.file.type,
username: msg.u.name,
_updatedAt: msg._updatedAt
}
});
modal.present(); */
if (msg.file.type == "application/img") {
const modal = await this.modalController.create({
component: ViewMediaPage,
cssClass: 'modal modal-desktop',
componentProps: {
image: msg.attachments[0].image_url,
type: msg.file.type,
username: msg.u.name,
_updatedAt: msg._updatedAt
}
});
modal.present();
} else {
this.downloadFileFromBrowser(msg.attachments[0].name, str)
}
} else {
this.openFile(str, msg.attachments[0].name, msg.file.type);
if (msg.file.type == "application/img") {
const modal = await this.modalController.create({
component: ViewMediaPage,
cssClass: 'modal modal-desktop',
componentProps: {
image: msg.attachments[0].image_url,
type: msg.file.type,
username: msg.u.name,
_updatedAt: msg._updatedAt
}
});
modal.present();
} else {
this.openFile(str, msg.attachments[0].name, msg.file.type);
}
}
}
@@ -1015,7 +1037,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
}
async audioPreview(msg) {
if (!msg.attachments[0].title_link || msg.attachments[0].title_link === null || msg.attachments[0].title_link === '') {
this.downloadFileMsg(msg)
} else { }