@banta/sdk 4.7.10 → 4.7.12

package/fesm2020/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,19 +11,22 @@ 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 } 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';
@@ -31,8 +36,6 @@ 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';
@@ -41,7 +44,6 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import * as i2$2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i3$2 from '@angular/material/core';
-import { __decorate } from 'tslib';
 
 function lazyConnection(options) {
     let obs = new Observable(observer => {
@@ -57,20 +59,24 @@ 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);
+        this._destroyed = true;
+        this.timerUnsubscribe?.();
     }
     get value() {
         return this._value;
     }
     update() {
+        if (this._destroyed)
+            return;
         let now = Date.now();
         let diff = now - this.value;
         let minute = 1000 * 60;
@@ -132,18 +138,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;
+                this.timerUnsubscribe?.();
+                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 +173,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
             }] } });
 
@@ -264,14 +275,14 @@ 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,
             args: [{
                     name: 'markdownToHtml'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BANTA_SDK_OPTIONS]
                 }, {
@@ -288,14 +299,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) {
@@ -502,6 +513,86 @@ 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) {
+        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, (this.newSubscriptions.get(interval) ?? 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 () => {
+            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, (this.removedSubscriptions.get(interval) ?? 0) + 1);
+            // Debug information ////////////////////////////////////////////////////////////////////
+            clearTimeout(this.removedSubscriptionsNotice);
+            this.removedSubscriptionsNotice = setTimeout(() => {
+                for (let [interval, count] of this.removedSubscriptions) {
+                    let state = this.subscriptions.get(interval);
+                    console.debug(`[Banta/TimerPool] ${count} unsubscribed from ${interval}ms [${state?.subscribers?.length ?? 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,
@@ -512,6 +603,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,
@@ -7128,12 +7227,12 @@ 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: [{
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BANTA_SDK_OPTIONS]
                 }, {
@@ -7207,7 +7306,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>
@@ -7232,7 +7331,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: [{
@@ -7947,12 +8046,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: [{
@@ -8105,7 +8204,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;
@@ -8696,7 +8798,7 @@ class BantaCommentsComponent {
         return this.threadView;
     }
     updateLoading() {
-        if (this.source?.state && this.source?.state !== 'connecting') {
+        if (this.source?.state && !['connecting', 'lost'].includes(this.source?.state)) {
             clearInterval(this._loadingTimer);
             this.loadingMessage = `Here we go!`;
             setTimeout(() => {
@@ -10064,6 +10166,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();
@@ -10084,21 +10188,19 @@ class ChatSource extends SocketRPC {
     }
     async bind(socket) {
         super.bind(socket);
-        this.state = 'connected';
-        this.markReady();
-        await this.subscribeToTopic();
         this.subscription.add(this.backend.userChanged.subscribe(() => this.authenticate()));
         socket.addEventListener('open', async () => {
-            this.state = 'connected';
+            console.log(`[Banta/${this.identifier}] Socket is open`);
         });
         socket.addEventListener('lost', async () => {
             this.state = 'lost';
         });
         socket.addEventListener('restore', async () => {
-            this.state = 'restored';
+            this.wasRestored = true;
             await this.authenticate();
             await this.subscribeToTopic();
         });
+        await this.subscribeToTopic();
         return this;
     }
     mapOrUpdateMessages(messages) {
@@ -10116,9 +10218,16 @@ class ChatSource extends SocketRPC {
         return message;
     }
     async getExistingMessages() {
-        let messages = await this.peer.getExistingMessages();
-        messages = this.mapOrUpdateMessages(messages);
-        return messages;
+        try {
+            let messages = await 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 [];
+        }
     }
     async ensureConnection(errorMessage) {
         let reason = `Connection to chat services is not currently available.`;
@@ -10133,8 +10242,30 @@ class ChatSource extends SocketRPC {
         await this.ensureConnection();
         await this.peer.editMessage(messageId, text);
     }
+    get errorState() {
+        return this._errorState;
+    }
     async subscribeToTopic() {
-        await this.peer.subscribe(this.identifier, this.parentIdentifier, this.sortOrder);
+        try {
+            await 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);
+        }
     }
     async authenticate() {
         if (this.backend.user) {
@@ -10252,12 +10383,24 @@ class ChatBackend extends ChatBackendBase {
         return await new ChatSource(this, topicId, messageId, options?.sortOrder || CommentsOrder.NEWEST)
             .bind(await this.connectToService());
     }
+    /**
+     * Get the count of the given topic
+     * @param topicId
+     * @returns
+     */
     async getSourceCountForTopic(topicId) {
-        let response = await fetch(`${this.serviceUrl}/topics/${topicId}`);
-        if (response.status >= 400)
-            return 0;
-        let topic = await response.json();
-        return topic.messageCount || 0;
+        try {
+            let response = await fetch(`${this.serviceUrl}/topics/${topicId}`);
+            if (response.status >= 400)
+                return 0;
+            let topic = await 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) {
         throw new Error("Method not implemented.");
@@ -10291,7 +10434,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,
                     args: [BANTA_SDK_OPTIONS]
@@ -10333,7 +10476,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 {
@@ -10427,9 +10570,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,
@@ -10451,7 +10592,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,
@@ -10475,7 +10616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                     imports: [
                         CommonModule,
                         FormsModule,
-                        BantaCommonModule,
+                        BantaCommonModule.forRoot(),
                         CommentsModule,
                         ChatModule,
                         EmojiModule,
@@ -10516,5 +10657,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