@hsaadawy/ngx-chat
Version:
30 lines • 7.51 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { MessageState } from '../../core/message';
export class ChatMessageSimpleComponent {
constructor() {
this.avatarClickHandler = new EventEmitter();
this.footerHidden = false;
this.MessageState = MessageState;
}
}
ChatMessageSimpleComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-chat-message-simple',
template: "<div class=\"chat-message\" [class.chat-message--in]=\"direction === 'in'\" [class.chat-message--out]=\"direction === 'out'\">\r\n <div class=\"chat-message-text-wrapper\">\r\n <div *ngIf=\"avatar\" class=\"chat-message-avatar\">\r\n <ngx-chat-avatar [class.has-click-handler]=\"avatarInteractive\" (click)=\"avatarClickHandler.emit()\"\r\n [imageUrl]=\"avatar\"></ngx-chat-avatar>\r\n </div>\r\n <div class=\"chat-message-text\">\r\n \r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n\r\n <div class=\"chat-message-image-wrapper\"\r\n *ngIf=\"imageLink && !imageLink.includes('mp3') && !imageLink.includes('ogg') && !imageLink.includes('mp4')\">\r\n <a [href]=\"imageLink\" target=\"_blank\">\r\n <img style=\"width: 200px; height: 200px;\" class=\"chat-message-image\" [src]=\"imageLink\" />\r\n </a>\r\n </div>\r\n\r\n <audio class=\"audio-custome\" controls *ngIf=\"imageLink && imageLink.includes('mp3')\">\r\n <source [src]=\"imageLink\" type=\"audio/mpeg\">\r\n </audio>\r\n\r\n <div class=\"chat-message-image-wrapper\" *ngIf=\"\r\n imageLink && imageLink.includes('mp4') ||\r\n imageLink && imageLink.includes('ogg') ||\r\n imageLink && imageLink.includes('MOV') ||\r\n imageLink && imageLink.includes('WMV') ||\r\n imageLink && imageLink.includes('AVI') ||\r\n imageLink && imageLink.includes('AVCHD') ||\r\n imageLink && imageLink.includes('FLV') ||\r\n imageLink && imageLink.includes('F4V') ||\r\n imageLink && imageLink.includes('SWF') ||\r\n imageLink && imageLink.includes('MKV') \">\r\n <video style=\"width: 100% ;\" class=\"chat-message-image\" controls>\r\n <source [src]=\"imageLink\">\r\n </video>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"chat-message-footer\" *ngIf=\"!footerHidden\">\r\n <small title=\"{{nick}}\" class=\"chat-message-name\">\r\n {{nick}}\r\n <ng-container *ngIf=\"direction === 'out'\" [ngSwitch]=\"messageState\">\r\n <ng-container *ngSwitchCase=\"MessageState.SENT\">\u2713</ng-container>\r\n <ng-container *ngSwitchCase=\"MessageState.RECIPIENT_RECEIVED\">\u2713\u2713</ng-container>\r\n <ng-container *ngSwitchCase=\"MessageState.RECIPIENT_SEEN\"><span class=\"state--seen\">\u2713\u2713</span>\r\n </ng-container>\r\n </ng-container>\r\n </small>\r\n <small class=\"chat-message-datetime\">{{formattedDate}}</small>\r\n </div>\r\n</div>\r\n",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [".chat-message-avatar{flex-shrink:0;width:2em;height:2em;padding:.5em}.chat-message--in .chat-message-avatar{padding-right:0}.chat-message--out .chat-message-avatar{padding-left:0}.has-click-handler:hover{cursor:pointer}.chat-message-text{min-width:0;padding:.5em;word-break:break-word}.chat-message{border-radius:.5em;margin:calc(.5em / 2) 0}.chat-message--out{background-color:#e6ffd1}.chat-message--in{background-color:#dbedff}.chat-message-text-wrapper{display:flex;flex-direction:row}.chat-message--out .chat-message-text-wrapper{flex-direction:row-reverse}.chat-message-image-wrapper{max-width:100%;max-height:150px;overflow:hidden;height:auto;margin:0 .5em;display:flex;justify-content:center}.chat-message-image-wrapper.chat-message-image-wrapper--placeholder{height:150px}.chat-message-image-wrapper img{-o-object-fit:contain;object-fit:contain;min-width:0}.chat-message-footer{font-size:.75em;text-align:right;color:#999;padding:0 .5em .5em;clear:both}.chat-message-datetime{display:inline-block;vertical-align:bottom}.chat-message-name{display:inline-block;max-width:9em;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;vertical-align:bottom;margin-right:.5em}.state--seen{color:#00c5d2}.audio-custome{width:210px;height:40px}audio::-webkit-media-controls-current-time-display{font-size:14px!important}audio::-webkit-media-controls-time-remaining-display{display:none}\n"]
},] }
];
ChatMessageSimpleComponent.propDecorators = {
avatar: [{ type: Input }],
avatarClickHandler: [{ type: Output }],
avatarInteractive: [{ type: Input }],
direction: [{ type: Input }],
formattedDate: [{ type: Input }],
footerHidden: [{ type: Input }],
imageLink: [{ type: Input }],
showImagePlaceholder: [{ type: Input }],
messageState: [{ type: Input }],
nick: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdC1tZXNzYWdlLXNpbXBsZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9wYXp6bmV0d29yay9uZ3gtY2hhdC9zcmMvbGliL2NvbXBvbmVudHMvY2hhdC1tZXNzYWdlLXNpbXBsZS9jaGF0LW1lc3NhZ2Utc2ltcGxlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2hHLE9BQU8sRUFBYSxZQUFZLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQVE3RCxNQUFNLE9BQU8sMEJBQTBCO0lBTnZDO1FBWUksdUJBQWtCLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQVk5QyxpQkFBWSxHQUFHLEtBQUssQ0FBQztRQWNyQixpQkFBWSxHQUFHLFlBQVksQ0FBQztJQUdoQyxDQUFDOzs7WUF6Q0EsU0FBUyxTQUFDO2dCQUNQLFFBQVEsRUFBRSx5QkFBeUI7Z0JBQ25DLGduRkFBbUQ7Z0JBRW5ELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNOzthQUNsRDs7O3FCQUdJLEtBQUs7aUNBR0wsTUFBTTtnQ0FHTixLQUFLO3dCQUdMLEtBQUs7NEJBR0wsS0FBSzsyQkFHTCxLQUFLO3dCQUdMLEtBQUs7bUNBR0wsS0FBSzsyQkFHTCxLQUFLO21CQUdMLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgRGlyZWN0aW9uLCBNZXNzYWdlU3RhdGUgfSBmcm9tICcuLi8uLi9jb3JlL21lc3NhZ2UnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ25neC1jaGF0LW1lc3NhZ2Utc2ltcGxlJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9jaGF0LW1lc3NhZ2Utc2ltcGxlLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL2NoYXQtbWVzc2FnZS1zaW1wbGUuY29tcG9uZW50Lmxlc3MnXSxcclxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDaGF0TWVzc2FnZVNpbXBsZUNvbXBvbmVudCB7XHJcblxyXG4gICAgQElucHV0KClcclxuICAgIGF2YXRhcj86IHN0cmluZztcclxuXHJcbiAgICBAT3V0cHV0KClcclxuICAgIGF2YXRhckNsaWNrSGFuZGxlciA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcclxuXHJcbiAgICBASW5wdXQoKVxyXG4gICAgYXZhdGFySW50ZXJhY3RpdmU6IGJvb2xlYW47XHJcblxyXG4gICAgQElucHV0KClcclxuICAgIGRpcmVjdGlvbjogRGlyZWN0aW9uO1xyXG5cclxuICAgIEBJbnB1dCgpXHJcbiAgICBmb3JtYXR0ZWREYXRlOiBzdHJpbmc7XHJcblxyXG4gICAgQElucHV0KClcclxuICAgIGZvb3RlckhpZGRlbiA9IGZhbHNlO1xyXG5cclxuICAgIEBJbnB1dCgpXHJcbiAgICBpbWFnZUxpbms6IHN0cmluZztcclxuXHJcbiAgICBASW5wdXQoKVxyXG4gICAgc2hvd0ltYWdlUGxhY2Vob2xkZXI6IGJvb2xlYW47XHJcblxyXG4gICAgQElucHV0KClcclxuICAgIG1lc3NhZ2VTdGF0ZTogTWVzc2FnZVN0YXRlO1xyXG5cclxuICAgIEBJbnB1dCgpXHJcbiAgICBuaWNrPzogc3RyaW5nO1xyXG5cclxuICAgIE1lc3NhZ2VTdGF0ZSA9IE1lc3NhZ2VTdGF0ZTtcclxuICAgIFxyXG5cclxufVxyXG4iXX0=