@hsaadawy/ngx-chat
Version:
31 lines • 6.92 kB
JavaScript
import { Component, Inject, Input } from '@angular/core';
import { of } from 'rxjs';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
import { Presence } from '../../core/presence';
import { UnreadMessageCountPlugin } from '../../services/adapters/xmpp/plugins/unread-message-count.plugin';
import { CHAT_SERVICE_TOKEN } from '../../services/chat-service';
export class RosterRecipientComponent {
constructor(chatService) {
this.chatService = chatService;
this.Presence = Presence;
}
ngOnInit() {
this.unreadCount$ = this.chatService.getPlugin(UnreadMessageCountPlugin).jidToUnreadCount$
.pipe(map(jidToUnreadCount => jidToUnreadCount.get(this.recipient.jidBare.toString()) || 0), distinctUntilChanged(), debounceTime(20));
this.presence$ = this.recipient.recipientType === 'contact' ? this.recipient.presence$ : of(Presence.unavailable);
}
}
RosterRecipientComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-chat-roster-recipient',
template: "<div class=\"roster-recipient\" [title]=\"recipient.name\">\r\n\r\n <div class=\"roster-recipient-avatar\">\r\n <ngx-chat-avatar [imageUrl]=\"recipient.avatar\"></ngx-chat-avatar>\r\n </div>\r\n\r\n <div class=\"roster-recipient-name\">\r\n {{recipient.name}}\r\n </div>\r\n\r\n <div class=\"roster-recipient-status\">\r\n <div class=\"unread-message-badge\" *ngIf=\"(unreadCount$ | async) > 0\">{{unreadCount$ | async}}</div>\r\n <ng-container *ngIf=\"presence$ | async as presence\">\r\n <div *ngIf=\"presence !== Presence.unavailable\"\r\n class=\"roster-presence\"\r\n [ngClass]=\"'roster-presence--' + presence\">\u25CF\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n</div>\r\n",
styles: ["@keyframes ngx-chat-message-in{0%{transform:translate(50px);opacity:0}to{transform:none;opacity:1}}@keyframes ngx-chat-message-out{0%{transform:translate(-50px);opacity:0}to{transform:none;opacity:1}}.messageItem{background-color:red;width:100%;border-radius:2px}*{box-sizing:border-box;margin:0;padding:0;font-family:\"Helvetica\",\"Arial\",serif}.roster-recipient{display:flex;justify-content:space-between}.roster-recipient-avatar{min-width:2em;width:2em;min-height:2em;height:2em}.roster-recipient-name{padding-left:.5em;padding-top:.5em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-grow:1}.roster-recipient-status{white-space:nowrap}.roster-presence{display:inline-block;padding-top:.5em;margin-left:.3em}.roster-presence.roster-presence--present{color:#69ca48}.roster-presence.roster-presence--away{color:#ffbe00}.roster-presence.roster-presence--unavailable{color:transparent}.unread-message-badge{display:inline-block;padding-top:.2em;background-color:#ff5940;color:#fff;border-radius:50%;align-self:center;margin-top:.25em;width:1.5em;height:1.5em;text-align:center}\n"]
},] }
];
RosterRecipientComponent.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Inject, args: [CHAT_SERVICE_TOKEN,] }] }
];
RosterRecipientComponent.propDecorators = {
recipient: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm9zdGVyLXJlY2lwaWVudC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9wYXp6bmV0d29yay9uZ3gtY2hhdC9zcmMvbGliL2NvbXBvbmVudHMvcm9zdGVyLXJlY2lwaWVudC9yb3N0ZXItcmVjaXBpZW50LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFDakUsT0FBTyxFQUFjLEVBQUUsRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUN0QyxPQUFPLEVBQUUsWUFBWSxFQUFFLG9CQUFvQixFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3pFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUUvQyxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSxrRUFBa0UsQ0FBQztBQUM1RyxPQUFPLEVBQUUsa0JBQWtCLEVBQWUsTUFBTSw2QkFBNkIsQ0FBQztBQU85RSxNQUFNLE9BQU8sd0JBQXdCO0lBVWpDLFlBQ3dDLFdBQXdCO1FBQXhCLGdCQUFXLEdBQVgsV0FBVyxDQUFhO1FBSGhFLGFBQVEsR0FBRyxRQUFRLENBQUM7SUFJakIsQ0FBQztJQUVKLFFBQVE7UUFDSixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsU0FBUyxDQUFDLHdCQUF3QixDQUFDLENBQUMsaUJBQWlCO2FBQ3JGLElBQUksQ0FDRCxHQUFHLENBQUMsZ0JBQWdCLENBQUMsRUFBRSxDQUFDLGdCQUFnQixDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLE9BQU8sQ0FBQyxRQUFRLEVBQUUsQ0FBQyxJQUFJLENBQUMsQ0FBQyxFQUNyRixvQkFBb0IsRUFBRSxFQUN0QixZQUFZLENBQUMsRUFBRSxDQUFDLENBQ25CLENBQUM7UUFDTixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsYUFBYSxLQUFLLFNBQVMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDdEgsQ0FBQzs7O1lBM0JKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsMkJBQTJCO2dCQUNyQyxteUJBQWdEOzthQUVuRDs7OzRDQVlRLE1BQU0sU0FBQyxrQkFBa0I7Ozt3QkFUN0IsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5qZWN0LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE9ic2VydmFibGUsIG9mIH0gZnJvbSAncnhqcyc7XHJcbmltcG9ydCB7IGRlYm91bmNlVGltZSwgZGlzdGluY3RVbnRpbENoYW5nZWQsIG1hcCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcclxuaW1wb3J0IHsgUHJlc2VuY2UgfSBmcm9tICcuLi8uLi9jb3JlL3ByZXNlbmNlJztcclxuaW1wb3J0IHsgUmVjaXBpZW50IH0gZnJvbSAnLi4vLi4vY29yZS9yZWNpcGllbnQnO1xyXG5pbXBvcnQgeyBVbnJlYWRNZXNzYWdlQ291bnRQbHVnaW4gfSBmcm9tICcuLi8uLi9zZXJ2aWNlcy9hZGFwdGVycy94bXBwL3BsdWdpbnMvdW5yZWFkLW1lc3NhZ2UtY291bnQucGx1Z2luJztcclxuaW1wb3J0IHsgQ0hBVF9TRVJWSUNFX1RPS0VOLCBDaGF0U2VydmljZSB9IGZyb20gJy4uLy4uL3NlcnZpY2VzL2NoYXQtc2VydmljZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnbmd4LWNoYXQtcm9zdGVyLXJlY2lwaWVudCcsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vcm9zdGVyLXJlY2lwaWVudC5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9yb3N0ZXItcmVjaXBpZW50LmNvbXBvbmVudC5sZXNzJ10sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBSb3N0ZXJSZWNpcGllbnRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG5cclxuICAgIEBJbnB1dCgpXHJcbiAgICByZWNpcGllbnQ6IFJlY2lwaWVudDtcclxuXHJcbiAgICB1bnJlYWRDb3VudCQ6IE9ic2VydmFibGU8bnVtYmVyPjtcclxuICAgIHByZXNlbmNlJDogT2JzZXJ2YWJsZTxQcmVzZW5jZT4gfCBudWxsO1xyXG5cclxuICAgIFByZXNlbmNlID0gUHJlc2VuY2U7XHJcblxyXG4gICAgY29uc3RydWN0b3IoXHJcbiAgICAgICAgQEluamVjdChDSEFUX1NFUlZJQ0VfVE9LRU4pIHByaXZhdGUgY2hhdFNlcnZpY2U6IENoYXRTZXJ2aWNlLFxyXG4gICAgKSB7fVxyXG5cclxuICAgIG5nT25Jbml0KCkge1xyXG4gICAgICAgIHRoaXMudW5yZWFkQ291bnQkID0gdGhpcy5jaGF0U2VydmljZS5nZXRQbHVnaW4oVW5yZWFkTWVzc2FnZUNvdW50UGx1Z2luKS5qaWRUb1VucmVhZENvdW50JFxyXG4gICAgICAgICAgICAucGlwZShcclxuICAgICAgICAgICAgICAgIG1hcChqaWRUb1VucmVhZENvdW50ID0+IGppZFRvVW5yZWFkQ291bnQuZ2V0KHRoaXMucmVjaXBpZW50LmppZEJhcmUudG9TdHJpbmcoKSkgfHwgMCksXHJcbiAgICAgICAgICAgICAgICBkaXN0aW5jdFVudGlsQ2hhbmdlZCgpLFxyXG4gICAgICAgICAgICAgICAgZGVib3VuY2VUaW1lKDIwKSxcclxuICAgICAgICAgICAgKTtcclxuICAgICAgICB0aGlzLnByZXNlbmNlJCA9IHRoaXMucmVjaXBpZW50LnJlY2lwaWVudFR5cGUgPT09ICdjb250YWN0JyA/IHRoaXMucmVjaXBpZW50LnByZXNlbmNlJCA6IG9mKFByZXNlbmNlLnVuYXZhaWxhYmxlKTtcclxuICAgIH1cclxuXHJcbn1cclxuIl19