@banta/sdk 4.7.9 → 4.7.11

package/fesm2015/banta-sdk.mjs

@@ -2,6 +2,8 @@ import { Observable, Subject, BehaviorSubject, Subscription } from 'rxjs';
 import { publish, take } from 'rxjs/operators';
 import * as i0 from '@angular/core';
 import { Component, Input, ViewChild, Pipe, Inject, Optional, Output, HostBinding, NgModule, ViewChildren, Directive, TemplateRef, ContentChild, Injectable } from '@angular/core';
+import * as i1 from 'projects/sdk/src/lib/common/timer-pool.service';
+import { TimerPool } from 'projects/sdk/src/lib/common/timer-pool.service';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/material/icon';
@@ -9,7 +11,7 @@ import { MatIconModule } from '@angular/material/icon';
 import * as marked from 'marked';
 import createDOMPurify from 'dompurify';
 import twemoji$1 from 'twemoji';
-import * as i1 from '@angular/platform-browser';
+import * as i1$1 from '@angular/platform-browser';
 import * as i3 from '@angular/cdk/bidi';
 import * as i4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
@@ -21,7 +23,7 @@ import * as i6$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i7 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i1$1 from '@angular/cdk/overlay';
+import * as i1$2 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i4$2 from '@angular/cdk/portal';
 import { PortalModule } from '@angular/cdk/portal';
@@ -32,7 +34,7 @@ import * as i7$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i11 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1$2 from '@banta/common';
+import * as i1$3 from '@banta/common';
 import { CommentsOrder, SocketRPC, RpcEvent, DurableSocket } from '@banta/common';
 import * as i2$3 from '@angular/router';
 import * as i3$3 from '@angular/material/snack-bar';
@@ -57,20 +59,26 @@ function lazyConnection(options) {
 }
 
 class TimestampComponent {
-    constructor() {
+    constructor(timerPool) {
+        this.timerPool = timerPool;
         this.relative = '';
         this.tooltip = '';
-        this.updateInterval = null;
+        this.timerInterval = 0;
+        this._destroyed = false;
         this.showAbsolute = false;
     }
     ngOnDestroy() {
-        if (this.updateInterval)
-            clearInterval(this.updateInterval);
+        var _a;
+        this._destroyed = true;
+        (_a = this.timerUnsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
     }
     get value() {
         return this._value;
     }
     update() {
+        var _a;
+        if (this._destroyed)
+            return;
         let now = Date.now();
         let diff = now - this.value;
         let minute = 1000 * 60;
@@ -132,18 +140,23 @@ class TimestampComponent {
             updateTime = 1000 * 30;
         }
         if (typeof window !== 'undefined') {
-            clearInterval(this.updateInterval);
-            if (updateTime > 0) {
-                this.updateInterval = setInterval(() => this.update());
+            if (this.timerInterval !== updateTime) {
+                this.timerInterval = updateTime;
+                (_a = this.timerUnsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+                if (updateTime > 0) {
+                    this.timerUnsubscribe = this.timerPool.addTimer(updateTime, () => this.update());
+                }
             }
         }
     }
     set value(v) {
-        this._value = v;
-        this.update();
+        if (this._value !== v) {
+            this._value = v;
+            this.update();
+        }
     }
 }
-TimestampComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TimestampComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TimestampComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TimestampComponent, deps: [{ token: i1.TimerPool }], target: i0.ɵɵFactoryTarget.Component });
 TimestampComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TimestampComponent, selector: "banta-timestamp", inputs: { value: "value" }, ngImport: i0, template: `
         <span *ngIf="showAbsolute" [title]="value | date : 'short'">
             {{value | date : 'shortDate'}}
@@ -162,7 +175,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             {{relative}}
         </span>
     ` }]
-        }], propDecorators: { value: [{
+        }], ctorParameters: function () { return [{ type: i1.TimerPool }]; }, propDecorators: { value: [{
                 type: Input
             }] } });
 
@@ -265,7 +278,7 @@ class BantaMarkdownToHtmlPipe {
         }));
     }
 }
-BantaMarkdownToHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaMarkdownToHtmlPipe, deps: [{ token: i1.DomSanitizer }, { token: BANTA_SDK_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
+BantaMarkdownToHtmlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaMarkdownToHtmlPipe, deps: [{ token: i1$1.DomSanitizer }, { token: BANTA_SDK_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
 BantaMarkdownToHtmlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: BantaMarkdownToHtmlPipe, name: "markdownToHtml" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaMarkdownToHtmlPipe, decorators: [{
             type: Pipe,
@@ -273,7 +286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     name: 'markdownToHtml'
                 }]
         }], ctorParameters: function () {
-        return [{ type: i1.DomSanitizer }, { type: undefined, decorators: [{
+        return [{ type: i1$1.DomSanitizer }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [BANTA_SDK_OPTIONS]
                     }, {
@@ -291,14 +304,14 @@ class BantaTrustResourceUrlPipe {
         return this.sanitizer.bypassSecurityTrustResourceUrl(value);
     }
 }
-BantaTrustResourceUrlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaTrustResourceUrlPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+BantaTrustResourceUrlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaTrustResourceUrlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
 BantaTrustResourceUrlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: BantaTrustResourceUrlPipe, name: "trustResourceUrl" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaTrustResourceUrlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'trustResourceUrl'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; } });
 
 class BantaMentionLinkerPipe {
     transform(value, links) {
@@ -393,15 +406,15 @@ class BantaAttachmentComponent {
             || !this.attachment.url);
     }
     get isImageAttachment() {
-        if (this.attachment.type.startsWith('image/'))
-            return true;
-        return false;
+        var _a, _b;
+        return (_b = (_a = this.attachment) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.startsWith('image/');
     }
     get hasFrame() {
+        var _a;
         if (!this.attachment)
             return false;
         return this.attachment.type === 'iframe' || (this.attachment.type === 'card'
-            && this.attachment.card.player);
+            && ((_a = this.attachment.card) === null || _a === void 0 ? void 0 : _a.player));
     }
     get frameUrl() {
         if (!this.attachment)
@@ -480,11 +493,14 @@ class BantaAttachmentsComponent {
             .filter(x => x.type === 'image/png')
             .map(x => x.url));
     }
+    get validAttachments() {
+        return this.attachments.filter(x => x.type);
+    }
     get inlineAttachments() {
-        return this.attachments.filter(x => x.type !== 'card' && (x.style === 'inline' || !x.style));
+        return this.validAttachments.filter(x => x.type !== 'card' && (x.style === 'inline' || !x.style));
     }
     get blockAttachments() {
-        return this.attachments.filter(x => x.style === 'block' || x.type === 'card');
+        return this.validAttachments.filter(x => x.style === 'block' || x.type === 'card');
     }
     attachmentId(index, attachment) {
         return attachment.url;
@@ -518,6 +534,14 @@ const COMPONENTS$3 = [
     BantaAttachmentsComponent
 ];
 class BantaCommonModule {
+    static forRoot() {
+        return {
+            ngModule: BantaCommonModule,
+            providers: [
+                TimerPool
+            ]
+        };
+    }
 }
 BantaCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 BantaCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: BantaCommonModule, declarations: [TimestampComponent,
@@ -7135,13 +7159,13 @@ class EmojiSelectorPanelComponent {
         this.categories = this.pairs(cats).map(pair => pair[1]);
     }
 }
-EmojiSelectorPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EmojiSelectorPanelComponent, deps: [{ token: i1.DomSanitizer }, { token: BANTA_SDK_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+EmojiSelectorPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EmojiSelectorPanelComponent, deps: [{ token: i1$1.DomSanitizer }, { token: BANTA_SDK_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 EmojiSelectorPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: EmojiSelectorPanelComponent, selector: "emoji-selector-panel", outputs: { selected: "selected" }, ngImport: i0, template: "<div class=\"search-box\" *ngIf=\"searchVisible\">\r\n\t<a mat-icon-button href=\"javascript:;\" (click)=\"hideSearch()\">\r\n\t\t<mat-icon>arrow_back</mat-icon>\r\n\t</a>\r\n\t<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n\t\t<mat-label>Search for emoji</mat-label>\r\n\t\t<input name=\"search\" type=\"text\" matInput placeholder=\"Start typing\" [(ngModel)]=\"searchQuery\" />\r\n\t</mat-form-field>\r\n</div>\r\n\r\n<div class=\"selector\">\r\n\t<ng-container *ngIf=\"searchVisible\">\r\n\t\t<div class=\"emoji-list\">\r\n\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t*ngFor=\"let emoji of searchResults\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t</a>\r\n\t\t</div>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t<div class=\"categories\">\r\n\t\t\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t\t\t<a [title]=\"humanize(category.name)\" [class.active]=\"activeCategory === category.name\" mat-icon-button *ngFor=\"let category of categories\" (click)=\"activeCategory = category.name\">\r\n\t\t\t\t\t<mat-icon>{{category.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\r\n\t\t\t\t<a title=\"Search\" [class.active] mat-icon-button (click)=\"showSearch()\">\r\n\t\t\t\t\t<mat-icon>search</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngFor=\"let category of categories\">\r\n\t\t\t<div class=\"emoji-list\" *ngIf=\"activeCategory && activeCategory == category.name\">\r\n\t\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t\t*ngFor=\"let emoji of category.emojis\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t\t</a>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</div>", styles: [":host{background:#111;color:#fff;border:1px solid #333;border-radius:5px;padding:.5em;width:calc(9*(32px + 1em));max-width:calc(100vw - 1.5em - 5px)}.selector{display:flex;flex-direction:column}.categories a{opacity:.25;transition:.4s opacity ease-in-out}.categories a:hover{opacity:.5}.categories a.active{opacity:1}.emoji-list{flex-grow:1;overflow-y:auto;height:20em}.emoji-list a{display:inline-block;padding:2px;margin:4px;background-color:#111}.emoji-list a ::ng-deep .emoji{width:32px;height:32px}.emoji-list a:hover{background-color:#333}.search-box{display:flex;align-items:baseline}.search-box mat-form-field{flex-grow:1}@media (max-width: 500px){.selector{flex-direction:row;height:27em}.emoji-list{height:auto}}:host-context(.banta-mobile) .selector{flex-direction:row;height:27em}:host-context(.banta-mobile) .emoji-list{height:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EmojiSelectorPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'emoji-selector-panel', template: "<div class=\"search-box\" *ngIf=\"searchVisible\">\r\n\t<a mat-icon-button href=\"javascript:;\" (click)=\"hideSearch()\">\r\n\t\t<mat-icon>arrow_back</mat-icon>\r\n\t</a>\r\n\t<mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n\t\t<mat-label>Search for emoji</mat-label>\r\n\t\t<input name=\"search\" type=\"text\" matInput placeholder=\"Start typing\" [(ngModel)]=\"searchQuery\" />\r\n\t</mat-form-field>\r\n</div>\r\n\r\n<div class=\"selector\">\r\n\t<ng-container *ngIf=\"searchVisible\">\r\n\t\t<div class=\"emoji-list\">\r\n\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t*ngFor=\"let emoji of searchResults\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t</a>\r\n\t\t</div>\r\n\t</ng-container>\r\n\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t<div class=\"categories\">\r\n\t\t\t<ng-container *ngIf=\"!searchVisible\">\r\n\t\t\t\t<a [title]=\"humanize(category.name)\" [class.active]=\"activeCategory === category.name\" mat-icon-button *ngFor=\"let category of categories\" (click)=\"activeCategory = category.name\">\r\n\t\t\t\t\t<mat-icon>{{category.icon}}</mat-icon>\r\n\t\t\t\t</a>\r\n\r\n\t\t\t\t<a title=\"Search\" [class.active] mat-icon-button (click)=\"showSearch()\">\r\n\t\t\t\t\t<mat-icon>search</mat-icon>\r\n\t\t\t\t</a>\r\n\t\t\t</ng-container>\r\n\t\t</div>\r\n\t\t<ng-container *ngFor=\"let category of categories\">\r\n\t\t\t<div class=\"emoji-list\" *ngIf=\"activeCategory && activeCategory == category.name\">\r\n\t\t\t\t<a href=\"javascript:;\" (click)=\"select(emoji.char)\" \r\n\t\t\t\t\t*ngFor=\"let emoji of category.emojis\" [innerHtml]=\"emoji.html || ''\">\r\n\t\t\t\t</a>\r\n\t\t\t</div>\r\n\t\t</ng-container>\r\n\t</ng-container>\r\n</div>", styles: [":host{background:#111;color:#fff;border:1px solid #333;border-radius:5px;padding:.5em;width:calc(9*(32px + 1em));max-width:calc(100vw - 1.5em - 5px)}.selector{display:flex;flex-direction:column}.categories a{opacity:.25;transition:.4s opacity ease-in-out}.categories a:hover{opacity:.5}.categories a.active{opacity:1}.emoji-list{flex-grow:1;overflow-y:auto;height:20em}.emoji-list a{display:inline-block;padding:2px;margin:4px;background-color:#111}.emoji-list a ::ng-deep .emoji{width:32px;height:32px}.emoji-list a:hover{background-color:#333}.search-box{display:flex;align-items:baseline}.search-box mat-form-field{flex-grow:1}@media (max-width: 500px){.selector{flex-direction:row;height:27em}.emoji-list{height:auto}}:host-context(.banta-mobile) .selector{flex-direction:row;height:27em}:host-context(.banta-mobile) .emoji-list{height:auto}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i1.DomSanitizer }, { type: undefined, decorators: [{
+        return [{ type: i1$1.DomSanitizer }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [BANTA_SDK_OPTIONS]
                     }, {
@@ -7216,7 +7240,7 @@ class EmojiSelectorButtonComponent {
         this.overlayRef.attach(this.selectorPanelTemplate);
     }
 }
-EmojiSelectorButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EmojiSelectorButtonComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+EmojiSelectorButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: EmojiSelectorButtonComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
 EmojiSelectorButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: EmojiSelectorButtonComponent, selector: "emoji-selector-button", inputs: { overlayX: "overlayX", overlayY: "overlayY", originX: "originX", originY: "originY" }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "selectorPanelTemplate", first: true, predicate: ["selectorPanelTemplate"], descendants: true }], ngImport: i0, template: `
         <button #button type="button" mat-icon-button (click)="show()">
             <mat-icon>emoji_emotions</mat-icon>
@@ -7241,7 +7265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 ></emoji-selector-panel>
         </ng-template>
     `, styles: [":host{display:block;position:relative}button{color:#666}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.Overlay }]; }, propDecorators: { selectorPanelTemplate: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.Overlay }]; }, propDecorators: { selectorPanelTemplate: [{
                 type: ViewChild,
                 args: ['selectorPanelTemplate']
             }], selected: [{
@@ -7975,12 +7999,12 @@ class AttachmentButtonComponent {
         });
     }
 }
-AttachmentButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AttachmentButtonComponent, deps: [{ token: i1$2.CDNProvider }], target: i0.ɵɵFactoryTarget.Component });
+AttachmentButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AttachmentButtonComponent, deps: [{ token: i1$3.CDNProvider }], target: i0.ɵɵFactoryTarget.Component });
 AttachmentButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: AttachmentButtonComponent, selector: "banta-attachment-button", outputs: { addedAttachment: "addedAttachment", attachmentError: "attachmentError" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileUpload"], descendants: true }], ngImport: i0, template: "<button matTooltip=\"Add an image or gif\" #button type=\"button\" mat-icon-button (click)=\"show()\">\r\n\t<mat-icon>image</mat-icon>\r\n</button>\r\n<input style=\"display: none;\" #fileUpload [multiple]=\"false\"  (change)=\"fileChange($event)\" type=\"file\" >", styles: ["button{color:#666}\n"], dependencies: [{ kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AttachmentButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'banta-attachment-button', template: "<button matTooltip=\"Add an image or gif\" #button type=\"button\" mat-icon-button (click)=\"show()\">\r\n\t<mat-icon>image</mat-icon>\r\n</button>\r\n<input style=\"display: none;\" #fileUpload [multiple]=\"false\"  (change)=\"fileChange($event)\" type=\"file\" >", styles: ["button{color:#666}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.CDNProvider }]; }, propDecorators: { fileInput: [{
+        }], ctorParameters: function () { return [{ type: i1$3.CDNProvider }]; }, propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileUpload', { static: false }]
             }], addedAttachment: [{
@@ -8135,7 +8159,10 @@ class CommentFieldComponent {
                 if (this._source.connectionStateChanged) {
                     this._subs.add(this._source.connectionStateChanged.subscribe(state => {
                         if (state === 'lost') {
-                            this.transientMessage = `Reconnecting...`;
+                            if (this._source.errorState === 'server-issue')
+                                this.transientMessage = `Error occurred, trying again...`;
+                            else
+                                this.transientMessage = `Reconnecting...`;
                         }
                         else if (state === 'restored') {
                             this.transientMessage = undefined;
@@ -8744,7 +8771,7 @@ class BantaCommentsComponent {
     }
     updateLoading() {
         var _a, _b;
-        if (((_a = this.source) === null || _a === void 0 ? void 0 : _a.state) && ((_b = this.source) === null || _b === void 0 ? void 0 : _b.state) !== 'connecting') {
+        if (((_a = this.source) === null || _a === void 0 ? void 0 : _a.state) && !['connecting', 'lost'].includes((_b = this.source) === null || _b === void 0 ? void 0 : _b.state)) {
             clearInterval(this._loadingTimer);
             this.loadingMessage = `Here we go!`;
             setTimeout(() => {
@@ -10170,6 +10197,8 @@ class ChatSource extends SocketRPC {
         this.subscription = new Subscription();
         this._state = 'connecting';
         this._connectionStateChanged = new Subject();
+        this.wasRestored = false;
+        this.subscribeAttempt = 0;
         this.messageMap = new Map();
         this._messageReceived = new Subject();
         this._messageUpdated = new Subject();
@@ -10194,21 +10223,19 @@ class ChatSource extends SocketRPC {
         });
         return __awaiter(this, void 0, void 0, function* () {
             _super.bind.call(this, socket);
-            this.state = 'connected';
-            this.markReady();
-            yield this.subscribeToTopic();
             this.subscription.add(this.backend.userChanged.subscribe(() => this.authenticate()));
             socket.addEventListener('open', () => __awaiter(this, void 0, void 0, function* () {
-                this.state = 'connected';
+                console.log(`[Banta/${this.identifier}] Socket is open`);
             }));
             socket.addEventListener('lost', () => __awaiter(this, void 0, void 0, function* () {
                 this.state = 'lost';
             }));
             socket.addEventListener('restore', () => __awaiter(this, void 0, void 0, function* () {
-                this.state = 'restored';
+                this.wasRestored = true;
                 yield this.authenticate();
                 yield this.subscribeToTopic();
             }));
+            yield this.subscribeToTopic();
             return this;
         });
     }
@@ -10228,9 +10255,16 @@ class ChatSource extends SocketRPC {
     }
     getExistingMessages() {
         return __awaiter(this, void 0, void 0, function* () {
-            let messages = yield this.peer.getExistingMessages();
-            messages = this.mapOrUpdateMessages(messages);
-            return messages;
+            try {
+                let messages = yield this.peer.getExistingMessages();
+                messages = this.mapOrUpdateMessages(messages);
+                return messages;
+            }
+            catch (e) {
+                console.error(`[Banta/${this.identifier}] Error occurred while trying to get existing messages:`);
+                console.error(e);
+                return [];
+            }
         });
     }
     ensureConnection(errorMessage) {
@@ -10250,9 +10284,31 @@ class ChatSource extends SocketRPC {
             yield this.peer.editMessage(messageId, text);
         });
     }
+    get errorState() {
+        return this._errorState;
+    }
     subscribeToTopic() {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.peer.subscribe(this.identifier, this.parentIdentifier, this.sortOrder);
+            try {
+                yield this.peer.subscribe(this.identifier, this.parentIdentifier, this.sortOrder);
+                this.subscribeAttempt = 0;
+                this._errorState = undefined;
+                this.state = this.wasRestored ? 'restored' : 'connected';
+                this.markReady();
+            }
+            catch (e) {
+                console.error(`[Banta/${this.identifier}] Error while subscribing to topic`);
+                console.error(e);
+                this.state = 'lost';
+                this._errorState = 'server-issue';
+                this.subscribeAttempt += 1;
+                let delay = Math.min(30 * 1000, (3 * 1000 * this.subscribeAttempt) * (1 + Math.random()));
+                console.error(`[Banta/${this.identifier}] Waiting ${delay}ms before attempting to reconnect...`);
+                setTimeout(() => {
+                    console.info(`Attempting reconnection after error in subscribeToTopic...`);
+                    this.reconnect();
+                }, delay);
+            }
         });
     }
     authenticate() {
@@ -10395,13 +10451,25 @@ class ChatBackend extends ChatBackendBase {
                 .bind(yield this.connectToService());
         });
     }
+    /**
+     * Get the count of the given topic
+     * @param topicId
+     * @returns
+     */
     getSourceCountForTopic(topicId) {
         return __awaiter(this, void 0, void 0, function* () {
-            let response = yield fetch(`${this.serviceUrl}/topics/${topicId}`);
-            if (response.status >= 400)
-                return 0;
-            let topic = yield response.json();
-            return topic.messageCount || 0;
+            try {
+                let response = yield fetch(`${this.serviceUrl}/topics/${topicId}`);
+                if (response.status >= 400)
+                    return 0;
+                let topic = yield response.json();
+                return topic.messageCount || 0;
+            }
+            catch (e) {
+                console.error(`[Banta/${topicId}] Failed to get message count for topic:`);
+                console.error(e);
+                return undefined;
+            }
         });
     }
     refreshMessage(message) {
@@ -10586,9 +10654,7 @@ BantaSdkModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
 BantaSdkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: BantaSdkModule, declarations: [BantaComponent,
         BantaLogoComponent,
         LiveMessageComponent], imports: [CommonModule,
-        FormsModule,
-        BantaCommonModule,
-        CommentsModule,
+        FormsModule, BantaCommonModule, CommentsModule,
         ChatModule,
         EmojiModule,
         MatIconModule,
@@ -10610,7 +10676,7 @@ BantaSdkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         EmojiModule] });
 BantaSdkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: BantaSdkModule, imports: [CommonModule,
         FormsModule,
-        BantaCommonModule,
+        BantaCommonModule.forRoot(),
         CommentsModule,
         ChatModule,
         EmojiModule,
@@ -10634,7 +10700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     imports: [
                         CommonModule,
                         FormsModule,
-                        BantaCommonModule,
+                        BantaCommonModule.forRoot(),
                         CommentsModule,
                         ChatModule,
                         EmojiModule,