@banta/sdk 4.7.10 → 4.7.12

package/fesm2015/banta-sdk.mjs

@@ -1,7 +1,9 @@
 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 { Component, Input, ViewChild, Pipe, Inject, Optional, Output, HostBinding, NgModule, ViewChildren, Directive, TemplateRef, ContentChild, Injectable as Injectable$1 } from '@angular/core';
+import * as i1 from 'projects/sdk/src/lib/common/timer-pool.service';
+import { TimerPool as TimerPool$1 } 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,31 +11,31 @@ 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';
 import * as i6 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import { __decorate, __awaiter } from 'tslib';
+import * as i1$3 from '@banta/common';
+import { Injectable, CommentsOrder, SocketRPC, RpcEvent, DurableSocket } from '@banta/common';
 import * as i4$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 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';
-import { __awaiter, __decorate } from 'tslib';
 import * as i2$4 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
 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 { CommentsOrder, SocketRPC, RpcEvent, DurableSocket } from '@banta/common';
 import * as i2$3 from '@angular/router';
 import * as i3$3 from '@angular/material/snack-bar';
 import { MatSnackBarModule } 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) {
@@ -511,6 +524,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Provides a way to hook in to a shared set of timers, instead of creating a timer per instance.
+ * This is very useful for cases where the update is not extremely time-sensitive, but happens at scale.
+ * The principal use case is the TimestampComponent. When several hundred (or several thousand) comments are
+ * being displayed, we do not want to trigger thousands of independent relative timestamp updates, because over
+ * time the updates will saturate the CPU since they don't perfectly align.
+ */
+let TimerPool = class TimerPool {
+    constructor() {
+        this.subscriptions = new Map();
+        this.newSubscriptions = new Map();
+        this.removedSubscriptions = new Map();
+    }
+    addTimer(interval, callback) {
+        var _a;
+        if (interval <= 0) {
+            console.warn(`Refusing to set timer with interval of ${interval}!`);
+            return () => { };
+        }
+        let state;
+        let sizeWas = this.subscriptions.size;
+        if (!this.subscriptions.has(interval)) {
+            state = { subscribers: [] };
+            state.handle = setInterval(() => {
+                console.debug(`[Banta/TimerPool] Notifying ${state.subscribers.length} subs [${interval}ms]`);
+                state.subscribers.forEach(sub => sub());
+            }, interval);
+            this.subscriptions.set(interval, state);
+        }
+        else {
+            state = this.subscriptions.get(interval);
+        }
+        state.subscribers.push(callback);
+        // Debug information //////////////////////////
+        //
+        if (!this.newSubscriptions.has(interval))
+            this.newSubscriptions.set(interval, 0);
+        this.newSubscriptions.set(interval, ((_a = this.newSubscriptions.get(interval)) !== null && _a !== void 0 ? _a : 0) + 1);
+        clearTimeout(this.newSubscriptionsNotice);
+        this.newSubscriptionsNotice = setTimeout(() => {
+            for (let [interval, count] of this.newSubscriptions) {
+                console.debug(`[Banta/TimerPool] ${count} new subscriptions to ${interval}ms [${state.subscribers.length} total]`);
+            }
+            this.newSubscriptions.clear();
+        });
+        //
+        ///////////////////////////////////////////////
+        if (sizeWas === 0) {
+            console.debug(`[Banta/TimerPool] No longer idle.`);
+        }
+        // Unsubscribe function 
+        return () => {
+            var _a;
+            let state = this.subscriptions.get(interval);
+            let index = state.subscribers.indexOf(callback);
+            if (index >= 0)
+                state.subscribers.splice(index, 1);
+            if (state.subscribers.length === 0) {
+                clearInterval(state.handle);
+                this.subscriptions.delete(interval);
+            }
+            if (!this.removedSubscriptions.has(interval))
+                this.removedSubscriptions.set(interval, 0);
+            this.removedSubscriptions.set(interval, ((_a = this.removedSubscriptions.get(interval)) !== null && _a !== void 0 ? _a : 0) + 1);
+            // Debug information ////////////////////////////////////////////////////////////////////
+            clearTimeout(this.removedSubscriptionsNotice);
+            this.removedSubscriptionsNotice = setTimeout(() => {
+                var _a, _b;
+                for (let [interval, count] of this.removedSubscriptions) {
+                    let state = this.subscriptions.get(interval);
+                    console.debug(`[Banta/TimerPool] ${count} unsubscribed from ${interval}ms [${(_b = (_a = state === null || state === void 0 ? void 0 : state.subscribers) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0} remain]`);
+                }
+                if (this.subscriptions.size === 0)
+                    console.debug(`[Banta/TimerPool] All subscriptions have been removed. Now idle.`);
+                this.removedSubscriptions.clear();
+            });
+        };
+    }
+};
+TimerPool = __decorate([
+    Injectable()
+], TimerPool);
+
 const COMPONENTS$3 = [
     TimestampComponent,
     LightboxComponent,
@@ -521,6 +617,14 @@ const COMPONENTS$3 = [
     BantaAttachmentsComponent
 ];
 class BantaCommonModule {
+    static forRoot() {
+        return {
+            ngModule: BantaCommonModule,
+            providers: [
+                TimerPool$1
+            ]
+        };
+    }
 }
 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,
@@ -7138,13 +7242,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]
                     }, {
@@ -7219,7 +7323,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>
@@ -7244,7 +7348,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: [{
@@ -7978,12 +8082,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: [{
@@ -8138,7 +8242,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;
@@ -8747,7 +8854,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(() => {
@@ -10173,6 +10280,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();
@@ -10197,21 +10306,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;
         });
     }
@@ -10231,9 +10338,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) {
@@ -10253,9 +10367,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() {
@@ -10398,13 +10534,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) {
@@ -10441,7 +10589,7 @@ class ChatBackend extends ChatBackendBase {
 ChatBackend.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ChatBackend, deps: [{ token: BANTA_SDK_OPTIONS }], target: i0.ɵɵFactoryTarget.Injectable });
 ChatBackend.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ChatBackend });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ChatBackend, decorators: [{
-            type: Injectable
+            type: Injectable$1
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -10488,7 +10636,7 @@ class UrlAttachmentResolver {
 UrlAttachmentResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UrlAttachmentResolver, deps: [{ token: ChatBackendBase }], target: i0.ɵɵFactoryTarget.Injectable });
 UrlAttachmentResolver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UrlAttachmentResolver });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: UrlAttachmentResolver, decorators: [{
-            type: Injectable
+            type: Injectable$1
         }], ctorParameters: function () { return [{ type: ChatBackendBase }]; } });
 
 class YouTubeAttachmentResolver {
@@ -10589,9 +10737,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,
@@ -10613,7 +10759,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,
@@ -10637,7 +10783,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     imports: [
                         CommonModule,
                         FormsModule,
-                        BantaCommonModule,
+                        BantaCommonModule.forRoot(),
                         CommentsModule,
                         ChatModule,
                         EmojiModule,
@@ -10678,5 +10824,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AttachmentButtonComponent, AttachmentScraperDirective, BANTA_SDK_OPTIONS, BantaAttachmentComponent, BantaAttachmentsComponent, BantaChatComponent, BantaCommentsComponent, BantaCommonModule, BantaComponent, BantaLogoComponent, BantaMarkdownToHtmlPipe, BantaMentionLinkerPipe, BantaReplySendOptionsDirective, BantaSdkModule, BantaTrustResourceUrlPipe, ChatBackend, ChatBackendBase, ChatMessageComponent, ChatModule, ChatSource, ChatViewComponent, CommentComponent, CommentFieldComponent, CommentSortComponent, CommentViewComponent, CommentsModule, EMOJIS, EmojiModule, EmojiSelectorButtonComponent, EmojiSelectorPanelComponent, GiphyAttachmentResolver, LightboxComponent, LiveChatMessageComponent, LiveCommentComponent, LiveMessageComponent, TimestampComponent, TweetAttachmentResolver, UrlAttachmentResolver, UrlAttachmentScraper, YouTubeAttachmentResolver, lazyConnection };
+export { AttachmentButtonComponent, AttachmentScraperDirective, BANTA_SDK_OPTIONS, BantaAttachmentComponent, BantaAttachmentsComponent, BantaChatComponent, BantaCommentsComponent, BantaCommonModule, BantaComponent, BantaLogoComponent, BantaMarkdownToHtmlPipe, BantaMentionLinkerPipe, BantaReplySendOptionsDirective, BantaSdkModule, BantaTrustResourceUrlPipe, ChatBackend, ChatBackendBase, ChatMessageComponent, ChatModule, ChatSource, ChatViewComponent, CommentComponent, CommentFieldComponent, CommentSortComponent, CommentViewComponent, CommentsModule, EMOJIS, EmojiModule, EmojiSelectorButtonComponent, EmojiSelectorPanelComponent, GiphyAttachmentResolver, LightboxComponent, LiveChatMessageComponent, LiveCommentComponent, LiveMessageComponent, TimerPool, TimestampComponent, TweetAttachmentResolver, UrlAttachmentResolver, UrlAttachmentScraper, YouTubeAttachmentResolver, lazyConnection };
 //# sourceMappingURL=banta-sdk.mjs.map