+
+
{{nick}}
{{message.datetime | date:chatService.translations.timeFormat}}
diff --git a/projects/pazznetwork/ngx-chat/src/lib/components/chat-message/chat-message.component.less b/projects/pazznetwork/ngx-chat/src/lib/components/chat-message/chat-message.component.less
index 87255318..61022128 100644
--- a/projects/pazznetwork/ngx-chat/src/lib/components/chat-message/chat-message.component.less
+++ b/projects/pazznetwork/ngx-chat/src/lib/components/chat-message/chat-message.component.less
@@ -42,6 +42,16 @@
}
}
+.chat-message-image-wrapper {
+ max-width: 100%;
+ height: auto;
+ margin-top: 1em;
+
+ img {
+ width: 100%;
+ }
+}
+
.chat-message-footer {
font-size: 0.75em;
text-align: right;
diff --git a/projects/pazznetwork/ngx-chat/src/lib/components/chat-message/chat-message.component.ts b/projects/pazznetwork/ngx-chat/src/lib/components/chat-message/chat-message.component.ts
index 2f7f67f8..599f2eba 100644
--- a/projects/pazznetwork/ngx-chat/src/lib/components/chat-message/chat-message.component.ts
+++ b/projects/pazznetwork/ngx-chat/src/lib/components/chat-message/chat-message.component.ts
@@ -1,7 +1,12 @@
+import { HttpClient } from '@angular/common/http';
import { Component, Inject, Input, OnInit } from '@angular/core';
import { Message } from '../../core';
+import { extractUrls } from '../../core/utils-links';
+import { XmppChatAdapter } from '../../services/adapters/xmpp/xmpp-chat-adapter.service';
import { ChatService, ChatServiceToken } from '../../services/chat-service';
+export const MAX_IMAGE_SIZE = 250 * 1024;
+
@Component({
selector: 'ngx-chat-message',
templateUrl: './chat-message.component.html',
@@ -21,9 +26,32 @@ export class ChatMessageComponent implements OnInit {
@Input()
nick: string;
- constructor(@Inject(ChatServiceToken) public chatService: ChatService) {}
+ imageLink: string;
+
+ constructor(
+ @Inject(ChatServiceToken) public chatService: ChatService,
+ private httpClient: HttpClient,
+ ) {}
ngOnInit() {
+ this.tryFindImageLink();
}
+ private async tryFindImageLink() {
+ if (this.chatService instanceof XmppChatAdapter) {
+ for (const url of extractUrls(this.message.body)) {
+ try {
+ const headRequest = await this.httpClient.head(url, {observe: 'response'}).toPromise();
+ const contentType = headRequest.headers.get('Content-Type');
+ const isImage = contentType && contentType.startsWith('image');
+ const contentLength = headRequest.headers.get('Content-Length');
+ if (isImage && parseInt(contentLength, 10) < MAX_IMAGE_SIZE) {
+ this.imageLink = url;
+ break;
+ }
+ } catch (e) {
+ }
+ }
+ }
+ }
}
diff --git a/projects/pazznetwork/ngx-chat/src/lib/components/chat-room-messages/chat-room-messages.component.html b/projects/pazznetwork/ngx-chat/src/lib/components/chat-room-messages/chat-room-messages.component.html
index dc99fa78..e042c2af 100644
--- a/projects/pazznetwork/ngx-chat/src/lib/components/chat-room-messages/chat-room-messages.component.html
+++ b/projects/pazznetwork/ngx-chat/src/lib/components/chat-room-messages/chat-room-messages.component.html
@@ -1,5 +1,4 @@
-
-
- ();
- constructor(private chatListService: ChatListStateService) {
- }
+ constructor(
+ @Inject(ChatServiceToken) public chatService: ChatService,
+ private chatListService: ChatListStateService,
+ ) {}
ngOnInit() {
this.chatWindowState.contact.messages$
@@ -43,4 +47,8 @@ export class ChatWindowComponent implements OnInit, OnDestroy {
this.chatListService.closeChat(this.chatWindowState.contact);
}
+ async onFileUpload(file: File) {
+ const url = await this.chatService.getPlugin(HttpFileUploadPlugin).upload(file);
+ this.chatService.sendMessage(this.chatWindowState.contact.jidBare.toString(), url);
+ }
}
diff --git a/projects/pazznetwork/ngx-chat/src/lib/components/chat.component.ts b/projects/pazznetwork/ngx-chat/src/lib/components/chat.component.ts
index fb9c58d6..7a09dbd0 100644
--- a/projects/pazznetwork/ngx-chat/src/lib/components/chat.component.ts
+++ b/projects/pazznetwork/ngx-chat/src/lib/components/chat.component.ts
@@ -84,7 +84,8 @@ export class ChatComponent implements OnInit, OnChanges {
'denySubscriptionRequest': 'Deny',
'timeFormat': 'shortTime',
'dateFormat': 'EEEE, MM/dd/yyyy',
- 'locale': undefined
+ 'locale': undefined,
+ 'dropMessage': 'Drop your file to send it',
};
constructor(@Inject(ChatServiceToken) private chatService: ChatService) {
diff --git a/projects/pazznetwork/ngx-chat/src/lib/core/translations.ts b/projects/pazznetwork/ngx-chat/src/lib/core/translations.ts
index 1e66a32a..c8b80ebc 100644
--- a/projects/pazznetwork/ngx-chat/src/lib/core/translations.ts
+++ b/projects/pazznetwork/ngx-chat/src/lib/core/translations.ts
@@ -12,4 +12,5 @@ export interface Translations {
timeFormat: string;
dateFormat: string;
locale: string;
+ dropMessage: string;
}
diff --git a/projects/pazznetwork/ngx-chat/src/lib/core/utils-links.ts b/projects/pazznetwork/ngx-chat/src/lib/core/utils-links.ts
new file mode 100644
index 00000000..4f4b1718
--- /dev/null
+++ b/projects/pazznetwork/ngx-chat/src/lib/core/utils-links.ts
@@ -0,0 +1,5 @@
+export const urlRegex = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
+
+export function extractUrls(message: string) {
+ return message.match(urlRegex) || [];
+}
diff --git a/projects/pazznetwork/ngx-chat/src/lib/directives/links.directive.ts b/projects/pazznetwork/ngx-chat/src/lib/directives/links.directive.ts
index 4d1ba96f..c8a247da 100644
--- a/projects/pazznetwork/ngx-chat/src/lib/directives/links.directive.ts
+++ b/projects/pazznetwork/ngx-chat/src/lib/directives/links.directive.ts
@@ -1,6 +1,7 @@
import { ComponentFactoryResolver, Directive, Input, OnChanges, ViewContainerRef } from '@angular/core';
import { ChatMessageLinkComponent } from '../components/chat-message-link/chat-message-link.component';
import { ChatMessageTextComponent } from '../components/chat-message-text/chat-message-text.component';
+import { extractUrls } from '../core/utils-links';
@Directive({
selector: '[ngxChatLinks]'
@@ -17,8 +18,7 @@ export class LinksDirective implements OnChanges {
const message: string = this.ngxChatLinks;
if (message) {
- const urlRegex = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
- const links = message.match(urlRegex) || [];
+ const links = extractUrls(message);
const chatMessageTextFactory = this.resolver.resolveComponentFactory(ChatMessageTextComponent);
const chatMessageLinkFactory = this.resolver.resolveComponentFactory(ChatMessageLinkComponent);
diff --git a/projects/pazznetwork/ngx-chat/src/lib/ngx-chat.module.ts b/projects/pazznetwork/ngx-chat/src/lib/ngx-chat.module.ts
index 52d37f2c..24073173 100644
--- a/projects/pazznetwork/ngx-chat/src/lib/ngx-chat.module.ts
+++ b/projects/pazznetwork/ngx-chat/src/lib/ngx-chat.module.ts
@@ -1,4 +1,5 @@
import { CommonModule } from '@angular/common';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
import { APP_INITIALIZER, Injector, ModuleWithProviders, NgModule, NgZone } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Client } from '@xmpp/client-core';
@@ -7,6 +8,7 @@ import reconnect from '@xmpp/plugins/reconnect';
import plain from '@xmpp/plugins/sasl-plain';
import sessionEstablishment from '@xmpp/plugins/session-establishment';
import websocket from '@xmpp/plugins/websocket';
+import { FileDropComponent } from './components/chat-filedrop/file-drop.component';
import { ChatMessageInputComponent } from './components/chat-message-input/chat-message-input.component';
import { ChatMessageLinkComponent } from './components/chat-message-link/chat-message-link.component';
import { ChatMessageListComponent } from './components/chat-message-list/chat-message-list.component';
@@ -32,6 +34,7 @@ import {
ServiceDiscoveryPlugin,
UnreadMessageCountPlugin
} from './services/adapters/xmpp/plugins';
+import { HttpFileUploadPlugin } from './services/adapters/xmpp/plugins/http-file-upload.plugin';
import { MessageCarbonsPlugin } from './services/adapters/xmpp/plugins/message-carbons.plugin';
import { XmppChatAdapter } from './services/adapters/xmpp/xmpp-chat-adapter.service';
import { XmppChatConnectionService, XmppClientToken } from './services/adapters/xmpp/xmpp-chat-connection.service';
@@ -46,6 +49,7 @@ import { LogService } from './services/log.service';
imports: [
CommonModule,
FormsModule,
+ HttpClientModule,
],
declarations: [
ChatComponent,
@@ -60,12 +64,14 @@ import { LogService } from './services/log.service';
LinksDirective,
RosterContactComponent,
RosterListComponent,
+ FileDropComponent,
],
exports: [
ChatComponent,
ChatMessageInputComponent,
ChatMessageListComponent,
ChatRoomMessagesComponent,
+ FileDropComponent,
],
entryComponents: [
ChatMessageLinkComponent,
@@ -122,6 +128,7 @@ export class NgxChatModule {
const chatMessageListRegistryService = injector.get(ChatMessageListRegistryService);
const unreadMessageCountPlugin = new UnreadMessageCountPlugin(
xmppChatAdapter, chatMessageListRegistryService, publishSubscribePlugin);
+ const serviceDiscoveryPlugin = new ServiceDiscoveryPlugin(xmppChatAdapter);
xmppChatAdapter.addPlugins([
new BookmarkPlugin(xmppChatAdapter),
@@ -131,12 +138,13 @@ export class NgxChatModule {
new MultiUserChatPlugin(xmppChatAdapter, logService),
publishSubscribePlugin,
new RosterPlugin(xmppChatAdapter, logService),
- new ServiceDiscoveryPlugin(xmppChatAdapter),
+ serviceDiscoveryPlugin,
new PushPlugin(xmppChatAdapter),
// new PingPlugin(xmppChatAdapter, logService, ngZone),
new RegistrationPlugin(logService, ngZone),
new MessageCarbonsPlugin(xmppChatAdapter),
unreadMessageCountPlugin,
+ new HttpFileUploadPlugin(injector.get(HttpClient), serviceDiscoveryPlugin, xmppChatAdapter),
]);
};
return initializer;
diff --git a/projects/pazznetwork/ngx-chat/src/lib/services/adapters/xmpp/plugins/http-file-upload.plugin.ts b/projects/pazznetwork/ngx-chat/src/lib/services/adapters/xmpp/plugins/http-file-upload.plugin.ts
new file mode 100644
index 00000000..1b456cc8
--- /dev/null
+++ b/projects/pazznetwork/ngx-chat/src/lib/services/adapters/xmpp/plugins/http-file-upload.plugin.ts
@@ -0,0 +1,51 @@
+import { HttpClient } from '@angular/common/http';
+import { x as xml } from '@xmpp/xml';
+import { XmppChatAdapter } from '../xmpp-chat-adapter.service';
+import { AbstractXmppPlugin } from './abstract-xmpp-plugin';
+import { Service, ServiceDiscoveryPlugin } from './service-discovery.plugin';
+
+/**
+ * XEP-0363 http file upload
+ */
+export class HttpFileUploadPlugin extends AbstractXmppPlugin {
+
+ private uploadService: Promise;
+
+ constructor(
+ private httpClient: HttpClient,
+ private serviceDiscoveryPlugin: ServiceDiscoveryPlugin,
+ private xmppChatAdapter: XmppChatAdapter,
+ ) {
+ super();
+ }
+
+ onBeforeOnline(): PromiseLike {
+ this.uploadService = this.serviceDiscoveryPlugin.findService('store', 'file');
+ return Promise.resolve();
+ }
+
+ onOffline() {
+ this.uploadService = null;
+ }
+
+ async upload(file: File) {
+ await this.uploadService;
+ const {name, size, type} = file;
+ const slotUrl = await this.requestSlot(name, size.toString(), type);
+ return this.uploadToSlot(slotUrl, file);
+ }
+
+ private async requestSlot(filename: string, size: string, contentType: string) {
+ const to = (await this.uploadService).jid;
+ const slotResponse = await this.xmppChatAdapter.chatConnectionService.sendIq(
+ xml('iq', {to, type: 'get'},
+ xml('request', {xmlns: 'urn:xmpp:http:upload:0', filename, size, 'content-type': contentType})));
+ return slotResponse.getChild('slot').getChild('put').attrs.url;
+ }
+
+ private async uploadToSlot(slot: string, file: File): Promise {
+ await this.httpClient.put(slot, file, {responseType: 'blob'}).toPromise();
+ return slot;
+ }
+
+}
- ![]()
+
+
-
+
-
+ ![]()
+
+
+ {{chatWindowState.contact.name}}
+
+
+ ×
+
- {{chatWindowState.contact.name}}
-
-
- ×
-
-
+
diff --git a/projects/pazznetwork/ngx-chat/src/lib/components/chat-window/chat-window.component.ts b/projects/pazznetwork/ngx-chat/src/lib/components/chat-window/chat-window.component.ts
index 0f2f5f14..c7415ff8 100644
--- a/projects/pazznetwork/ngx-chat/src/lib/components/chat-window/chat-window.component.ts
+++ b/projects/pazznetwork/ngx-chat/src/lib/components/chat-window/chat-window.component.ts
@@ -1,8 +1,10 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Inject, Input, OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
import { Direction } from '../../core';
+import { HttpFileUploadPlugin } from '../../services/adapters/xmpp/plugins/http-file-upload.plugin';
import { ChatListStateService, ChatWindowState } from '../../services/chat-list-state.service';
+import { ChatService, ChatServiceToken } from '../../services/chat-service';
@Component({
selector: 'ngx-chat-window',
@@ -16,8 +18,10 @@ export class ChatWindowComponent implements OnInit, OnDestroy {
private ngDestroy = new Subject
-
+
-
-
+