@banta/sdk 4.6.3 → 4.6.5

package/bundles/banta-sdk.umd.js

@@ -230,7 +230,8 @@
     ]; };
 
     var BantaAttachmentComponent = /** @class */ (function () {
-        function BantaAttachmentComponent() {
+        function BantaAttachmentComponent(elementRef) {
+            this.elementRef = elementRef;
             this.loading = false;
             this.editing = false;
             this.loadingMessage = 'Please wait...';
@@ -238,7 +239,18 @@
             this.errorMessage = 'An error has occurred';
             this.removed = new rxjs.Subject();
             this.activated = new rxjs.Subject();
+            this.loaded = new rxjs.Subject();
+            this._viewLoaded = false;
         }
+        Object.defineProperty(BantaAttachmentComponent.prototype, "attachment", {
+            get: function () { return this._attachment; },
+            set: function (value) {
+                this._attachment = value;
+                this.checkLoad();
+            },
+            enumerable: false,
+            configurable: true
+        });
         BantaAttachmentComponent.prototype.ngOnInit = function () {
             if (typeof window !== 'undefined') {
                 setTimeout(function () {
@@ -248,6 +260,20 @@
                 }, 100);
             }
         };
+        BantaAttachmentComponent.prototype.ngAfterViewInit = function () {
+            this._viewLoaded = true;
+            this.checkLoad();
+        };
+        BantaAttachmentComponent.prototype.checkLoad = function () {
+            var _this = this;
+            var _a;
+            if (!this._attachment || !this._viewLoaded || !((_a = this.elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement))
+                return;
+            if (typeof window === 'undefined')
+                this.loaded.next();
+            else
+                setTimeout(function () { return _this.loaded.next(); }, 250);
+        };
         BantaAttachmentComponent.prototype.activate = function () {
             this.activated.next();
         };
@@ -320,7 +346,9 @@
                     styles: [":host{position:relative;display:block}:host.loading{outline:1px solid #333;padding:1em 0;width:300px;text-align:center}:host.loading mat-spinner{display:block;margin:0 auto .5em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}a.card-attachment{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:1em;box-sizing:border-box;background-color:#191919;margin:1em 0}a.card-attachment img{width:250px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}a.card-attachment.has-image h1{font-size:22px}a.card-attachment h1{min-width:0;margin:0 0 .5em;font-size:26px}a.card-attachment cite{min-width:0;opacity:.75;margin-top:1em;display:block;font-size:80%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}a.card-attachment .description{min-width:0;width:100%}a.card-attachment .summary{overflow-x:hidden;text-overflow:ellipsis}.remove-button{position:absolute;right:10px;top:10px;margin:0;z-index:1}a.image-attachment{width:300px;position:relative;text-align:center}a.image-attachment.with-border{outline:1px solid #333;padding:1em 0}a.image-attachment mat-spinner{display:block;margin:0 auto .5em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}a.image-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}a.image-attachment .error{color:#b76363}a.image-attachment img{width:300px;border-radius:10px;max-width:100%;max-height:20em;-o-object-fit:cover;object-fit:cover}iframe{border:none;width:100%;aspect-ratio:16/9}@media (max-width:700px){a.card-attachment{flex-direction:column}a.card-attachment img{width:100%}}"]
                 },] }
     ];
-    BantaAttachmentComponent.ctorParameters = function () { return []; };
+    BantaAttachmentComponent.ctorParameters = function () { return [
+        { type: core.ElementRef }
+    ]; };
     BantaAttachmentComponent.propDecorators = {
         attachment: [{ type: core.Input }],
         loading: [{ type: core.Input }],
@@ -330,6 +358,7 @@
         errorMessage: [{ type: core.Input }],
         removed: [{ type: core.Output }],
         activated: [{ type: core.Output }],
+        loaded: [{ type: core.Output }],
         isLoading: [{ type: core.HostBinding, args: ['class.loading',] }]
     };
 
@@ -337,7 +366,27 @@
         function BantaAttachmentsComponent() {
             this.editing = false;
             this.remove = new rxjs.Subject();
+            this.loaded = new rxjs.Subject();
+            this.loadedAttachments = new WeakMap();
         }
+        BantaAttachmentsComponent.prototype.ngAfterViewInit = function () {
+        };
+        BantaAttachmentsComponent.prototype.markAttachmentLoaded = function (attachment) {
+            this.loadedAttachments.set(attachment, true);
+            if (this.allAttachmentsLoaded)
+                this.loaded.next();
+        };
+        BantaAttachmentsComponent.prototype.isAttachmentLoaded = function (attachment) {
+            return this.loadedAttachments.has(attachment);
+        };
+        Object.defineProperty(BantaAttachmentsComponent.prototype, "allAttachmentsLoaded", {
+            get: function () {
+                var _this = this;
+                return this.attachments.every(function (x) { return _this.isAttachmentLoaded(x); });
+            },
+            enumerable: false,
+            configurable: true
+        });
         BantaAttachmentsComponent.prototype.removeAttachment = function (attachment) {
             this.remove.next(attachment);
         };
@@ -370,12 +419,15 @@
             enumerable: false,
             configurable: true
         });
+        BantaAttachmentsComponent.prototype.attachmentId = function (index, attachment) {
+            return attachment.url;
+        };
         return BantaAttachmentsComponent;
     }());
     BantaAttachmentsComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-attachments',
-                    template: "<ng-container *ngIf=\"attachments?.length > 0\">\r\n    <banta-lightbox #lightbox></banta-lightbox>\r\n    <div class=\"block-attachments\">\r\n        <ng-container *ngFor=\"let attachment of blockAttachments\">\r\n            <banta-attachment \r\n                [attachment]=\"attachment\"\r\n                [editing]=\"editing\"\r\n                (removed)=\"removeAttachment(attachment)\"\r\n                (activated)=\"showLightbox(attachment)\"\r\n                ></banta-attachment>\r\n        </ng-container>\r\n    </div>\r\n\r\n    <div \r\n        class=\"inline-attachments\" \r\n        [class.single]=\"attachments?.length === 1\" \r\n        *ngIf=\"attachments && attachments?.length > 0\"\r\n        >\r\n        <ng-container *ngFor=\"let attachment of inlineAttachments\">\r\n            <banta-attachment \r\n                [attachment]=\"attachment\"\r\n                [editing]=\"editing\"\r\n                (removed)=\"removeAttachment(attachment)\"\r\n                (activated)=\"showLightbox(attachment)\"\r\n                ></banta-attachment>\r\n        </ng-container>\r\n    </div>\r\n</ng-container>",
+                    template: "<ng-container *ngIf=\"attachments?.length > 0\">\r\n    <banta-lightbox #lightbox></banta-lightbox>\r\n    <div class=\"block-attachments\">\r\n        <ng-container *ngFor=\"let attachment of blockAttachments; trackBy: attachmentId\">\r\n            <banta-attachment \r\n                [attachment]=\"attachment\"\r\n                [editing]=\"editing\"\r\n                (loaded)=\"markAttachmentLoaded(attachment)\"\r\n                (removed)=\"removeAttachment(attachment)\"\r\n                (activated)=\"showLightbox(attachment)\"\r\n                ></banta-attachment>\r\n        </ng-container>\r\n    </div>\r\n\r\n    <div \r\n        class=\"inline-attachments\" \r\n        [class.single]=\"attachments?.length === 1\" \r\n        *ngIf=\"attachments && attachments?.length > 0\"\r\n        >\r\n        <ng-container *ngFor=\"let attachment of inlineAttachments; trackBy: attachmentId\">\r\n            <banta-attachment \r\n                [attachment]=\"attachment\"\r\n                [editing]=\"editing\"\r\n                (loaded)=\"markAttachmentLoaded(attachment)\"\r\n                (removed)=\"removeAttachment(attachment)\"\r\n                (activated)=\"showLightbox(attachment)\"\r\n                ></banta-attachment>\r\n        </ng-container>\r\n    </div>\r\n</ng-container>",
                     styles: [".block-attachments{display:flex;flex-direction:column}.block-attachments banta-attachment{width:100%}.inline-attachments{flex-direction:row;margin-top:15px;display:flex;gap:20px;flex-wrap:wrap}"]
                 },] }
     ];
@@ -383,7 +435,8 @@
         attachments: [{ type: core.Input }],
         editing: [{ type: core.Input }],
         lightbox: [{ type: core.ViewChild, args: ['lightbox',] }],
-        remove: [{ type: core.Output }]
+        remove: [{ type: core.Output }],
+        loaded: [{ type: core.Output }]
     };
 
     var COMPONENTS = [
@@ -8413,6 +8466,8 @@
             this.isNew = false;
             this.visible = false;
             this.showReplyAction = true;
+            this.loaded = new rxjs.Subject();
+            this.isLoaded = false;
             this.mine = false;
             this.editing = false;
             this._editStarted = new rxjs.Subject();
@@ -8438,6 +8493,10 @@
                 setTimeout(function () { return _this.isNew = false; }, 1000);
             }, randomTime);
         };
+        CommentComponent.prototype.markAttachmentsLoaded = function () {
+            this.isLoaded = true;
+            this.loaded.next();
+        };
         Object.defineProperty(CommentComponent.prototype, "isHighlighted", {
             get: function () {
                 var _a, _b, _c;
@@ -8446,6 +8505,39 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(CommentComponent.prototype, "message", {
+            get: function () {
+                return this._message;
+            },
+            set: function (value) {
+                var _a;
+                this._message = value;
+                if (((_a = this._message.attachments) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    this.isLoaded = false;
+                }
+                else {
+                    this.isLoaded = true;
+                    this.loaded.next();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CommentComponent.prototype.waitForLoad = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            if (this.isLoaded)
+                                return [2 /*return*/, true];
+                            return [4 /*yield*/, this.loaded.pipe(operators.take(1)).toPromise()];
+                        case 1:
+                            _d.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         Object.defineProperty(CommentComponent.prototype, "userSelected", {
             get: function () {
                 return this._userSelected.asObservable();
@@ -8584,7 +8676,7 @@
     CommentComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-comment',
-                    template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n    <button mat-menu-item (click)=\"share()\">\r\n        <mat-icon>share</mat-icon>\r\n        Share\r\n    </button>\r\n    <button *ngIf=\"!mine\" mat-menu-item (click)=\"report()\">\r\n        <mat-icon>warning</mat-icon>\r\n        Report\r\n    </button>\r\n    <button *ngIf=\"mine\" [disabled]=\"!permissions?.canEdit\" mat-menu-item (click)=\"startEdit()\">\r\n        <mat-icon>edit</mat-icon>\r\n        Edit\r\n    </button>\r\n    <button *ngIf=\"mine\" [disabled]=\"!permissions?.canDelete\" mat-menu-item (click)=\"delete()\">\r\n        <mat-icon>delete</mat-icon>\r\n        Delete\r\n    </button>\r\n\r\n    <button *ngFor=\"let menuItem of customMenuItems\" mat-menu-item (click)=\"menuItem.action(message)\">\r\n        <mat-icon>{{menuItem.icon}}</mat-icon>\r\n        {{menuItem.label}}\r\n    </button>\r\n\r\n</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n    <div class=\"user\">\r\n        <div class=\"user-1\">\r\n            <a\r\n                href=\"javascript:;\"\r\n                class=\"avatar\"\r\n                (click)=\"selectAvatar(message.user)\"\r\n                [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n            <div class=\"user-identity\">\r\n                <a href=\"javascript:;\" class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n                <a href=\"javascript:;\" class=\"username\" (click)=\"selectUsername(message.user)\">@{{message.user.username}}</a>\r\n            </div>\r\n        </div>\r\n        <div class=\"user-2\">\r\n            <span class=\"user-tag\" *ngIf=\"message.user.tag\">{{message.user.tag}}</span>\r\n            <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n            <span class=\"spacer\"></span>\r\n        </div>\r\n    </div>\r\n    <div class=\"content\" *ngIf=\"!editing\">\r\n        <span class=\"banta-message-content\" [innerHTML]=\"message.message | markdownToHtml\"></span>\r\n        <banta-attachments [attachments]=\"message.attachments\"></banta-attachments>\r\n        <ul class=\"message-facts\">\r\n            <li *ngIf=\"message.edits?.length > 0\">(Edited)</li>\r\n        </ul>\r\n    </div>\r\n    <div class=\"content\" *ngIf=\"editing\" style=\"padding-bottom: 2em;\">\r\n        <div>\r\n            <mat-form-field floatLabel=\"always\" appearance=\"outline\" style=\"width: 100%;\">\r\n                <mat-label>Edit Message</mat-label>\r\n                <textarea matInput [(ngModel)]=\"editedMessage\" [maxlength]=\"maxLength\"></textarea>\r\n            </mat-form-field>\r\n        </div>\r\n        <button mat-raised-button (click)=\"saveEdit()\">Save</button> &nbsp;\r\n        <button mat-button (click)=\"endEditing()\">Cancel</button>\r\n    </div>\r\n\r\n\r\n    <div class=\"actions\">\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"counted-action\" *ngIf=\"showReplyAction\">\r\n            <button mat-button [matTooltip]=\"replyCount > 0 ? 'Replies' : 'Reply'\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n                <mat-icon [inline]=\"true\">comment</mat-icon>\r\n                <span class=\"count-indicator\">\r\n                    {{replyCount > 0 ? 'Replies' : 'Reply'}}\r\n                    {{replyCount > 0 ? '(' + replyCount + ')' : ''}}\r\n                </span>\r\n            </button>\r\n        </div>\r\n        <div class=\"counted-action\" [class.active]=\"message.userState?.liked\">\r\n            <button \r\n                *ngIf=\"message.transientState?.liking\"\r\n                mat-icon-button \r\n                [disabled]=\"true\" \r\n                [matTooltip]=\"upvoting ? 'Please wait...' : message.userState?.liked ? 'Unlike' : 'Like'\" \r\n                matTooltipPosition=\"below\" \r\n                >\r\n                <mat-spinner [diameter]=\"15\" style=\"margin-left: 1em;\"></mat-spinner>\r\n            </button>\r\n            <button \r\n                *ngIf=\"!message.transientState?.liking\"\r\n                mat-button \r\n                [matTooltip]=\"permissions?.canLike ? upvoting ? 'Please wait...' : 'Like' : permissions?.canLikeErrorMessage\" \r\n                matTooltipPosition=\"below\" \r\n                (click)=\"message.userState?.liked ? unlike() : like()\" \r\n                >\r\n                <mat-icon [inline]=\"true\">thumb_up</mat-icon>\r\n                <span class=\"count-indicator\" *ngIf=\"message.likes > 0\">\r\n                    {{message.likes}}\r\n                </span>\r\n            </button>\r\n        </div>\r\n\r\n        <button mat-icon-button [matMenuTriggerFor]=\"pointItemMenu\">\r\n            <mat-icon [inline]=\"true\">more_vert</mat-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n",
+                    template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n    <button mat-menu-item (click)=\"share()\">\r\n        <mat-icon>share</mat-icon>\r\n        Share\r\n    </button>\r\n    <button *ngIf=\"!mine\" mat-menu-item (click)=\"report()\">\r\n        <mat-icon>warning</mat-icon>\r\n        Report\r\n    </button>\r\n    <button *ngIf=\"mine\" [disabled]=\"!permissions?.canEdit\" mat-menu-item (click)=\"startEdit()\">\r\n        <mat-icon>edit</mat-icon>\r\n        Edit\r\n    </button>\r\n    <button *ngIf=\"mine\" [disabled]=\"!permissions?.canDelete\" mat-menu-item (click)=\"delete()\">\r\n        <mat-icon>delete</mat-icon>\r\n        Delete\r\n    </button>\r\n\r\n    <button *ngFor=\"let menuItem of customMenuItems\" mat-menu-item (click)=\"menuItem.action(message)\">\r\n        <mat-icon>{{menuItem.icon}}</mat-icon>\r\n        {{menuItem.label}}\r\n    </button>\r\n\r\n</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n    <div class=\"user\">\r\n        <div class=\"user-1\">\r\n            <a\r\n                href=\"javascript:;\"\r\n                class=\"avatar\"\r\n                (click)=\"selectAvatar(message.user)\"\r\n                [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n            <div class=\"user-identity\">\r\n                <a href=\"javascript:;\" class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n                <a href=\"javascript:;\" class=\"username\" (click)=\"selectUsername(message.user)\">@{{message.user.username}}</a>\r\n            </div>\r\n        </div>\r\n        <div class=\"user-2\">\r\n            <span class=\"user-tag\" *ngIf=\"message.user.tag\">{{message.user.tag}}</span>\r\n            <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n            <span class=\"spacer\"></span>\r\n        </div>\r\n    </div>\r\n    <div class=\"content\" *ngIf=\"!editing\">\r\n        <span class=\"banta-message-content\" [innerHTML]=\"message.message | markdownToHtml\"></span>\r\n        <banta-attachments \r\n            [attachments]=\"message.attachments\"\r\n            (loaded)=\"markAttachmentsLoaded()\"\r\n            ></banta-attachments>\r\n        <ul class=\"message-facts\">\r\n            <li *ngIf=\"message.edits?.length > 0\">(Edited)</li>\r\n        </ul>\r\n    </div>\r\n    <div class=\"content\" *ngIf=\"editing\" style=\"padding-bottom: 2em;\">\r\n        <div>\r\n            <mat-form-field floatLabel=\"always\" appearance=\"outline\" style=\"width: 100%;\">\r\n                <mat-label>Edit Message</mat-label>\r\n                <textarea matInput [(ngModel)]=\"editedMessage\" [maxlength]=\"maxLength\"></textarea>\r\n            </mat-form-field>\r\n        </div>\r\n        <button mat-raised-button (click)=\"saveEdit()\">Save</button> &nbsp;\r\n        <button mat-button (click)=\"endEditing()\">Cancel</button>\r\n    </div>\r\n\r\n\r\n    <div class=\"actions\">\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"counted-action\" *ngIf=\"showReplyAction\">\r\n            <button mat-button [matTooltip]=\"replyCount > 0 ? 'Replies' : 'Reply'\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n                <mat-icon [inline]=\"true\">comment</mat-icon>\r\n                <span class=\"count-indicator\">\r\n                    {{replyCount > 0 ? 'Replies' : 'Reply'}}\r\n                    {{replyCount > 0 ? '(' + replyCount + ')' : ''}}\r\n                </span>\r\n            </button>\r\n        </div>\r\n        <div class=\"counted-action\" [class.active]=\"message.userState?.liked\">\r\n            <button \r\n                *ngIf=\"message.transientState?.liking\"\r\n                mat-icon-button \r\n                [disabled]=\"true\" \r\n                [matTooltip]=\"upvoting ? 'Please wait...' : message.userState?.liked ? 'Unlike' : 'Like'\" \r\n                matTooltipPosition=\"below\" \r\n                >\r\n                <mat-spinner [diameter]=\"15\" style=\"margin-left: 1em;\"></mat-spinner>\r\n            </button>\r\n            <button \r\n                *ngIf=\"!message.transientState?.liking\"\r\n                mat-button \r\n                [matTooltip]=\"permissions?.canLike ? upvoting ? 'Please wait...' : 'Like' : permissions?.canLikeErrorMessage\" \r\n                matTooltipPosition=\"below\" \r\n                (click)=\"message.userState?.liked ? unlike() : like()\" \r\n                >\r\n                <mat-icon [inline]=\"true\">thumb_up</mat-icon>\r\n                <span class=\"count-indicator\" *ngIf=\"message.likes > 0\">\r\n                    {{message.likes}}\r\n                </span>\r\n            </button>\r\n        </div>\r\n\r\n        <button mat-icon-button [matMenuTriggerFor]=\"pointItemMenu\">\r\n            <mat-icon [inline]=\"true\">more_vert</mat-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n",
                     styles: ["@-webkit-keyframes comment-appear{0%{transform:translate(6em)}to{transform:translate(0)}}@keyframes comment-appear{0%{transform:translate(6em)}to{transform:translate(0)}}:host{display:flex;flex-direction:column;position:relative;padding:.5em;visibility:hidden}:host.new{visibility:visible;-webkit-animation-name:comment-appear;animation-name:comment-appear;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:both;animation-fill-mode:both}:host.highlighted{background:#00223a;outline:2px solid #003277}:host.visible{visibility:visible}:host:hover{background:#eee}:host .message-content .content{margin-left:60px;margin-right:.5em}:host .message-content .attachments-row{margin-top:15px;display:flex;gap:10px}:host .message-content .attachments-row img{border-radius:10px;width:300px;max-width:100%;max-height:20em;-o-object-fit:cover;object-fit:cover}:host.abbreviated .message-content .content{text-overflow:ellipsis;overflow-y:hidden}:host .actions{display:flex;padding-right:10px;margin-left:60px;align-items:center}:host .actions button,banta-timestamp{color:#666;flex-shrink:0}banta-timestamp{font-size:10pt;margin-left:1em;text-align:right}.user{position:relative;margin:1em 0 0;display:flex;align-items:center;flex-wrap:wrap}.user .user-1,.user .user-2{display:flex;flex-wrap:nowrap;align-items:center;min-width:0}.user .user-2{margin:1em 0}.user .user-identity{display:flex;flex-direction:column;min-width:0}.user .display-name,.user .username{z-index:1;position:relative;padding:0 0 0 1em;font-size:10pt;color:#000;margin:0 auto 0 0;display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:1;flex-grow:0;min-width:0}.user .display-name.username.username.username,.user .username.username.username.username{color:#666}.avatar{height:48px;width:48px;background-position:50%;background-size:cover;background-color:#333;border-radius:100%;flex-shrink:0;flex-grow:0}.counted-action{display:flex;align-items:center}.counted-action.active .count-indicator,.counted-action.active button{color:#00a5ff}.counted-action button .count-indicator{margin-left:.5em}.count-indicator{font-size:9pt;padding:0 0 0 3px;color:#666}:host-context(.mat-dark-theme) .count-indicator{border-color:#333}:host-context(.mat-dark-theme):hover{background:#060606}.user-tag,:host-context(.mat-dark-theme) .user .display-name,:host-context(.mat-dark-theme) .user .username{color:#fff}.user-tag{text-transform:uppercase;font-size:12px;border:1px solid #b27373;background:#7a412b;padding:3px 5px;margin:0 .5em 0 1em;border-radius:3px}.spacer{flex-shrink:1;flex-grow:1}ul.message-facts{margin:0;padding:0;color:#666}ul.message-facts li{list-style-type:none;border-left:1px solid #666;font-size:10pt;padding-left:.5em;margin-left:.5em;margin-top:.5em}ul.message-facts li:first-child{border-left:1px solid transparent;margin-left:0;padding-left:0}@media (max-width:400px){.avatar{height:32px;width:32px}:host .actions{margin-left:0;margin-top:.5em}:host .message-content .content{margin-left:44px;margin-right:.5em}}:host-context(.banta-mobile) .avatar{height:32px;width:32px}:host-context(.banta-mobile) :host .actions{margin-left:0;margin-top:.5em}:host-context(.banta-mobile) :host .message-content .content{margin-left:44px;margin-right:.5em}.card-attachment a{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:1em;box-sizing:border-box;background-color:#191919}.card-attachment a img{width:300px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}.card-attachment a h1{margin:0;font-size:30px}"]
                 },] }
     ];
@@ -8599,6 +8691,7 @@
         message: [{ type: core.Input }],
         customMenuItems: [{ type: core.Input }],
         showReplyAction: [{ type: core.Input }],
+        loaded: [{ type: core.Output }],
         userSelected: [{ type: core.Output }],
         usernameSelected: [{ type: core.Output }],
         avatarSelected: [{ type: core.Output }],
@@ -8684,7 +8777,6 @@
                             _c.sent();
                             return [3 /*break*/, 2];
                         case 4:
-                            console.log("Finished loading comments, hasMore=" + this.hasMore);
                             if (!this.isMessageLoadedInContext(message)) {
                                 console.error("Error while loading message in context: Failed to find message " + message.id + ", maybe it was deleted!");
                                 return [2 /*return*/, false];
@@ -8696,17 +8788,11 @@
                                 console.error("Error while loading message in context: Message was not present in message list!");
                                 return [2 /*return*/, false];
                             }
-                            console.log("Total messages: " + items.length);
-                            console.log("Page size: " + pageSize);
-                            console.log("Message index: " + index);
                             startIndex = Math.max(0, index - pageSize / 2);
-                            console.log("Start index: " + index);
                             this.newMessages = items.splice(0, startIndex);
                             this.messages = items.splice(0, pageSize);
                             this.olderMessages = items;
-                            console.log(this.olderMessages.length + " older messages");
-                            console.log(this.messages.length + " current messages");
-                            console.log(this.newMessages.length + " newer messages");
+                            this.isViewingMore = true;
                             return [2 /*return*/];
                     }
                 });
@@ -8905,7 +8991,6 @@
                             else {
                                 lastMessage = (_b = this.olderMessages[this.olderMessages.length - 1]) !== null && _b !== void 0 ? _b : this.messages[this.messages.length - 1];
                             }
-                            console.dir(lastMessage);
                             if (!lastMessage) {
                                 this.isLoadingMore = false;
                                 this.hasMore = false;
@@ -8992,6 +9077,28 @@
             }
             return maxPagingCursor;
         };
+        /**
+         * Wait for all currently visible comments to be fully loaded, including all attachments.
+         * Doing this will prevent layout shift when scrolling to a specific comment.
+         */
+        CommentViewComponent.prototype.waitForAllCommentsToLoad = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0: return [4 /*yield*/, new Promise(function (r) { return setTimeout(r, 100); })];
+                        case 1:
+                            _c.sent();
+                            return [4 /*yield*/, this.sourceLoaded];
+                        case 2:
+                            _c.sent();
+                            return [4 /*yield*/, Promise.all(this.comments.map(function (x) { return x.waitForLoad(); }))];
+                        case 3:
+                            _c.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         CommentViewComponent.prototype.sortMessages = function () {
             var _this = this;
             if (!this.source)
@@ -9156,6 +9263,7 @@
                 { hashtag: 'slow', description: 'Be slow when this message is posted' },
             ];
             this.loadingSharedComment = false;
+            this.sharedCommentMissing = false;
             this.sendMessage = function (message) { return __awaiter(_this, void 0, void 0, function () {
                 var _a, intercept, e_1;
                 return __generator(this, function (_e) {
@@ -9263,10 +9371,6 @@
         });
         BantaCommentsComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
-            this.threadViewQuery.changes.subscribe(function (changes) {
-                console.log("i see changes...");
-                console.dir(changes);
-            });
             if (typeof window !== 'undefined') {
                 var callback = function () {
                     var size = _this.elementRef.nativeElement.getBoundingClientRect();
@@ -9438,11 +9542,13 @@
                 if (value) {
                     if (this.sharedCommentID) {
                         this.navigateToSharedComment(this.sharedCommentID);
+                        this.lastSharedCommentID = this.sharedCommentID;
                         this.sharedCommentID = null;
                     }
                     this._source.messages.forEach(function (m) { return _this.addParticipant(m); });
                     this._sourceSubscription.add(this._source.messageReceived.subscribe(function (m) { return _this.addParticipant(m); }));
                     this._sourceSubscription.add(this._source.messageSent.subscribe(function (m) { return _this.addParticipant(m); }));
+                    this._sourceSubscription.add(this._source.messageObserved.subscribe(function (m) { return _this.addParticipant(m); }));
                     this._sourceSubscription.add(this._source.messageUpdated.subscribe(function (msg) {
                         var _a;
                         console.log("comments received message: ", msg);
@@ -9537,94 +9643,120 @@
         });
         // UI Interactions
         BantaCommentsComponent.prototype.scrollToComment = function (commentId) {
-            if (typeof window === 'undefined')
-                return;
-            setTimeout(function () {
-                var comment = document.querySelectorAll("[data-comment-id=\"" + commentId + "\"]");
-                if (comment.length > 0) {
-                    // comment.item(0).scroll({behavior: 'smooth'});
-                    comment.item(0).scrollIntoView({
-                        inline: 'center',
-                        block: 'center'
-                    });
-                }
-            }, 1000);
+            return __awaiter(this, void 0, void 0, function () {
+                var comment;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0:
+                            if (typeof window === 'undefined')
+                                return [2 /*return*/];
+                            return [4 /*yield*/, this.commentView.waitForAllCommentsToLoad()];
+                        case 1:
+                            _e.sent();
+                            comment = document.querySelector("[data-comment-id=\"" + commentId + "\"]");
+                            if (comment) {
+                                comment.scrollIntoView({
+                                    inline: 'center',
+                                    block: 'center'
+                                });
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
         };
         BantaCommentsComponent.prototype.navigateToSharedComment = function (id) {
             var _a, _b, _c, _d;
             return __awaiter(this, void 0, void 0, function () {
                 var source, message, e_3, parentMessage, thread;
+                var _this = this;
                 return __generator(this, function (_e) {
                     switch (_e.label) {
                         case 0:
                             this.loadingSharedComment = true;
+                            return [4 /*yield*/, new Promise(function (r) { return setTimeout(r, 10); })];
+                        case 1:
+                            _e.sent();
+                            this.sharedCommentMissing = false;
                             source = this.source;
                             return [4 /*yield*/, source.ready];
-                        case 1:
+                        case 2:
                             _e.sent();
                             return [4 /*yield*/, this.viewReady];
-                        case 2:
+                        case 3:
                             _e.sent();
                             return [4 /*yield*/, this.loaded];
-                        case 3:
+                        case 4:
                             _e.sent();
                             console.log("Navigating to shared comment with ID '" + id + "'...");
-                            _e.label = 4;
-                        case 4:
-                            _e.trys.push([4, 6, , 7]);
-                            return [4 /*yield*/, this.source.get(id)];
+                            _e.label = 5;
                         case 5:
-                            message = _e.sent();
-                            return [3 /*break*/, 7];
+                            _e.trys.push([5, 7, , 8]);
+                            return [4 /*yield*/, this.source.get(id)];
                         case 6:
+                            message = _e.sent();
+                            return [3 /*break*/, 8];
+                        case 7:
                             e_3 = _e.sent();
                             console.error("Failed to find comment from URL: " + e_3.message);
-                            alert("Could not load desired comment. It may have been removed.");
+                            this.sharedCommentMissing = true;
+                            this.loadingSharedComment = false;
+                            if (typeof window !== 'undefined') {
+                                setTimeout(function () {
+                                    var notice = _this.element.querySelector('.loading-comment');
+                                    notice.scrollIntoView({
+                                        block: 'center',
+                                        inline: 'center'
+                                    });
+                                }, 200);
+                            }
                             return [2 /*return*/];
-                        case 7:
+                        case 8:
                             (_a = message.transientState) !== null && _a !== void 0 ? _a : (message.transientState = {});
-                            if (!message.parentMessageId) return [3 /*break*/, 14];
+                            if (!message.parentMessageId) return [3 /*break*/, 15];
                             return [4 /*yield*/, this.source.get(message.parentMessageId)];
-                        case 8:
+                        case 9:
                             parentMessage = _e.sent();
                             (_b = parentMessage.transientState) !== null && _b !== void 0 ? _b : (parentMessage.transientState = {});
                             // Make sure that this message is loaded and visible to the user
                             return [4 /*yield*/, this.commentView.loadMessageInContext(parentMessage)];
-                        case 9:
+                        case 10:
                             // Make sure that this message is loaded and visible to the user
                             _e.sent();
                             return [4 /*yield*/, this.selectMessage(parentMessage)];
-                        case 10:
+                        case 11:
                             thread = _e.sent();
                             // Need to re-retrieve the message within the new chat source to affect its
                             // transient state.
                             return [4 /*yield*/, thread.ready];
-                        case 11:
+                        case 12:
                             // Need to re-retrieve the message within the new chat source to affect its
                             // transient state.
                             _e.sent();
                             return [4 /*yield*/, thread.get(message.id)];
-                        case 12:
+                        case 13:
                             message = _e.sent();
                             (_c = message.transientState) !== null && _c !== void 0 ? _c : (message.transientState = {});
                             message.transientState.highlighted = true;
                             console.dir(message);
                             return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 500); })];
-                        case 13:
+                        case 14:
                             _e.sent();
-                            return [3 /*break*/, 16];
-                        case 14: 
+                            return [3 /*break*/, 17];
+                        case 15: 
                         // Make sure that this message is loaded and visible to the user
                         return [4 /*yield*/, this.commentView.loadMessageInContext(message)];
-                        case 15:
+                        case 16:
                             // Make sure that this message is loaded and visible to the user
                             _e.sent();
                             (_d = message.transientState) !== null && _d !== void 0 ? _d : (message.transientState = {});
                             message.transientState.highlighted = true;
-                            _e.label = 16;
-                        case 16:
-                            this.scrollToComment(id);
+                            _e.label = 17;
+                        case 17:
                             this.loadingSharedComment = false;
+                            return [4 /*yield*/, this.scrollToComment(id)];
+                        case 18:
+                            _e.sent();
                             return [2 /*return*/];
                     }
                 });
@@ -9936,8 +10068,8 @@
     BantaCommentsComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-comments',
-                    template: "<ng-container *ngIf=\"loading\">\r\n    <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n        <h1>Loading...</h1>\r\n        <div>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n        </div>\r\n\r\n        <p class=\"loading-message\" [class.visible]=\"loadingMessageVisible\">{{loadingMessage}}</p>\r\n    </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!loading\">\r\n    <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage && !useInlineReplies\">\r\n\r\n        <div>\r\n            <a mat-button href=\"javascript:;\" (click)=\"unselectMessage()\">\r\n                <mat-icon>arrow_back</mat-icon>\r\n                Latest Comments\r\n            </a>\r\n        </div>\r\n\r\n        <banta-comment\r\n            [message]=\"selectedMessage\"\r\n            [liking]=\"selectedMessage.transientState.liking\"\r\n            [mine]=\"user?.id === selectedMessage.user?.id\"\r\n            [permissions]=\"source?.permissions\"\r\n            [showReplyAction]=\"false\"\r\n            [editing]=\"selectedMessage.transientState.editing\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            (editStarted)=\"startEditing(selectedMessage)\"\r\n            (editEnded)=\"selectedMessage.transientState.editing = false\"\r\n            (edited)=\"saveEdit(selectedMessage, $event)\"\r\n            (userSelected)=\"selectMessageUser(selectedMessage)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (liked)=\"likeMessage(source, selectedMessage)\"\r\n            (unliked)=\"unlikeMessage(source, selectedMessage)\"\r\n            (reported)=\"reportMessage(selectedMessage)\"\r\n            (selected)=\"selectMessage(selectedMessage)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            (deleted)=\"deleteMessage(selectedMessage)\"\r\n            ></banta-comment>\r\n\r\n        <div class=\"replies\">\r\n\r\n            <ng-container *ngIf=\"!selectedMessageThread\">\r\n                <div class=\"loading\">\r\n                    <mat-spinner></mat-spinner>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"selectedMessageThread\">\r\n                <banta-comment-view\r\n                    class=\"replies\"\r\n                    #threadView\r\n                    [source]=\"selectedMessageThread\"\r\n                    [allowReplies]=\"false\"\r\n                    [fixedHeight]=\"false\"\r\n                    [showEmptyState]=\"false\"\r\n                    [newestLast]=\"true\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                    (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                    (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                    (reported)=\"reportMessage($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (shared)=\"shareMessage($event)\"\r\n                    (deleted)=\"deleteMessage($event)\"\r\n                    [customMenuItems]=\"customMenuItems\"\r\n                    ></banta-comment-view>\r\n\r\n                <banta-comment-field\r\n                    [sendLabel]=\"replyLabel\"\r\n                    [sendingLabel]=\"sendingLabel\"\r\n                    [hashtags]=\"hashtags\"\r\n                    [participants]=\"participants\"\r\n                    (signInSelected)=\"showSignIn()\"\r\n                    (editAvatarSelected)=\"showEditAvatar()\"\r\n                    [source]=\"selectedMessageThread\"\r\n                    [maxLength]=\"maxCommentLength\"\r\n                    [canComment]=\"source?.permissions?.canPost\"\r\n                    [signInLabel]=\"signInLabel\"\r\n                    [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                    (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                    [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                    [user]=\"user\"\r\n                    [label]=\"postReplyLabel\"\r\n                    [submit]=\"sendReply\"\r\n                    [allowAttachments]=\"allowAttachments\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    >\r\n                    <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                </banta-comment-field>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"main\" [class.hidden]=\"selectedMessage && !useInlineReplies\">\r\n        <banta-comment-field\r\n            [source]=\"source\"\r\n            [user]=\"user\"\r\n            [sendLabel]=\"sendLabel\"\r\n            [sendingLabel]=\"sendingLabel\"\r\n            [signInLabel]=\"signInLabel\"\r\n            [canComment]=\"source?.permissions?.canPost\"\r\n            [hashtags]=\"hashtags\"\r\n            [participants]=\"participants\"\r\n            [label]=\"postCommentLabel\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            (editAvatarSelected)=\"showEditAvatar()\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n            (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n            [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n            [submit]=\"sendMessage\"\r\n            [allowAttachments]=\"allowAttachments\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            >\r\n        \r\n        </banta-comment-field>\r\n\r\n        <banta-comment-sort\r\n            [(sort)]=\"sortOrder\"></banta-comment-sort>\r\n\r\n        <div class=\"loading-comment\" *ngIf=\"loadingSharedComment\">\r\n            <h1>Loading desired comment...</h1>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n            <p>\r\n                If there are a lot of comments, this might take awhile!\r\n            </p>\r\n        </div>\r\n        <banta-comment-view\r\n            #commentView\r\n            [class.faded]=\"selectedMessage && !useInlineReplies\"\r\n            [source]=\"source\"\r\n            [fixedHeight]=\"fixedHeight\"\r\n            [maxMessages]=\"maxMessages\"\r\n            [maxVisibleMessages]=\"maxVisibleMessages\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [customMenuItems]=\"customMenuItems\"\r\n            (userSelected)=\"selectMessageUser($event)\"\r\n            (sortOrderChanged)=\"sortOrder = $event\"\r\n            (selected)=\"selectMessage($event)\"\r\n            (liked)=\"likeMessage(source, $event)\"\r\n            (unliked)=\"unlikeMessage(source, $event)\"\r\n            (messageEdited)=\"editMessage(source, $event.message, $event.newMessage)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            [selectedMessage]=\"selectedMessage\"\r\n            (deleted)=\"deleteMessage($event)\"\r\n            >\r\n            <div class=\"inline-replies\">\r\n                <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\r\n                    <div class=\"replies\">\r\n            \r\n                        <ng-container *ngIf=\"!selectedMessageThread\">\r\n                            <div class=\"loading\">\r\n                                <mat-spinner></mat-spinner>\r\n                            </div>\r\n                        </ng-container>\r\n            \r\n                        <ng-container *ngIf=\"selectedMessageThread\">\r\n                            <banta-comment-view\r\n                                [source]=\"selectedMessageThread\"\r\n                                [allowReplies]=\"false\"\r\n                                [fixedHeight]=\"false\"\r\n                                [showEmptyState]=\"false\"\r\n                                [newestLast]=\"true\"\r\n                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                                (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                                (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                                (reported)=\"reportMessage($event)\"\r\n                                (usernameSelected)=\"selectUsername($event)\"\r\n                                (avatarSelected)=\"selectAvatar($event)\"\r\n                                (shared)=\"shareMessage($event)\"\r\n                                (deleted)=\"deleteMessage($event)\"\r\n                                ></banta-comment-view>\r\n            \r\n                            <banta-comment-field\r\n                                [sendLabel]=\"replyLabel\"\r\n                                [sendingLabel]=\"sendingLabel\"\r\n                                [hashtags]=\"hashtags\"\r\n                                [participants]=\"participants\"\r\n                                (signInSelected)=\"showSignIn()\"\r\n                                [maxLength]=\"maxCommentLength\"\r\n                                (editAvatarSelected)=\"showEditAvatar()\"\r\n                                [source]=\"selectedMessageThread\"\r\n                                [canComment]=\"source?.permissions?.canPost\"\r\n                                [signInLabel]=\"signInLabel\"\r\n                                [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                                (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                                [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                                [user]=\"user\"\r\n                                [label]=\"postReplyLabel\"\r\n                                [submit]=\"sendReply\"\r\n                                [allowAttachments]=\"allowAttachments\"\r\n                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                >\r\n                                <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                            </banta-comment-field>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>            \r\n            </div>\r\n        </banta-comment-view>\r\n    </div>\r\n</ng-container>\r\n",
-                    styles: [":host{display:flex;flex-direction:column}@-webkit-keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{-webkit-animation-name:select-comment;animation-name:select-comment;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.focused .replies{margin-top:1em;margin-left:2em;border-left:2px solid #333;padding-left:2em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;min-height:16em}.main.hidden{display:none}.loading-screen{text-align:center;opacity:0;transition:opacity .25s ease-in-out}.loading-screen.visible{opacity:1}.loading-screen h1{font-weight:100}.loading-screen mat-spinner{margin:5em auto}.loading-screen .loading-message{opacity:0;transition:opacity .25s ease-in-out;width:500px;max-width:100%;margin:0 auto}.loading-screen .loading-message.visible{opacity:1}banta-comment-sort{margin:0 0 0 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;display:block}.inline-replies{margin-left:4em}@media (max-width:500px){.focused .replies{margin-left:0}.inline-replies{margin-left:1em}.focused .replies{padding-left:.5em}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) .inline-replies{margin-left:1em}:host-context(.banta-mobile) .focused .replies{padding-left:.5em}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}.loading-comment{z-index:100;border:1px solid #333;background:#000;color:#fff;padding:1em;border-radius:4px;text-align:center}.loading-comment h1{font-weight:100;text-align:center}.loading-comment mat-spinner{margin:0 auto}"]
+                    template: "<ng-container *ngIf=\"loading\">\r\n    <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n        <h1>Loading...</h1>\r\n        <div>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n        </div>\r\n\r\n        <p class=\"loading-message\" [class.visible]=\"loadingMessageVisible\">{{loadingMessage}}</p>\r\n    </div>\r\n</ng-container>\r\n<ng-container *ngIf=\"!loading\">\r\n    <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage && !useInlineReplies\">\r\n\r\n        <div>\r\n            <a mat-button href=\"javascript:;\" (click)=\"unselectMessage()\">\r\n                <mat-icon>arrow_back</mat-icon>\r\n                Latest Comments\r\n            </a>\r\n        </div>\r\n\r\n        <banta-comment\r\n            [message]=\"selectedMessage\"\r\n            [liking]=\"selectedMessage.transientState.liking\"\r\n            [mine]=\"user?.id === selectedMessage.user?.id\"\r\n            [permissions]=\"source?.permissions\"\r\n            [showReplyAction]=\"false\"\r\n            [editing]=\"selectedMessage.transientState.editing\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            (editStarted)=\"startEditing(selectedMessage)\"\r\n            (editEnded)=\"selectedMessage.transientState.editing = false\"\r\n            (edited)=\"saveEdit(selectedMessage, $event)\"\r\n            (userSelected)=\"selectMessageUser(selectedMessage)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (liked)=\"likeMessage(source, selectedMessage)\"\r\n            (unliked)=\"unlikeMessage(source, selectedMessage)\"\r\n            (reported)=\"reportMessage(selectedMessage)\"\r\n            (selected)=\"selectMessage(selectedMessage)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            (deleted)=\"deleteMessage(selectedMessage)\"\r\n            ></banta-comment>\r\n\r\n        <div class=\"replies\">\r\n\r\n            <ng-container *ngIf=\"!selectedMessageThread\">\r\n                <div class=\"loading\">\r\n                    <mat-spinner></mat-spinner>\r\n                </div>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"selectedMessageThread\">\r\n                <banta-comment-view\r\n                    class=\"replies\"\r\n                    #threadView\r\n                    [source]=\"selectedMessageThread\"\r\n                    [allowReplies]=\"false\"\r\n                    [fixedHeight]=\"false\"\r\n                    [showEmptyState]=\"false\"\r\n                    [newestLast]=\"true\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                    (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                    (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                    (reported)=\"reportMessage($event)\"\r\n                    (usernameSelected)=\"selectUsername($event)\"\r\n                    (avatarSelected)=\"selectAvatar($event)\"\r\n                    (shared)=\"shareMessage($event)\"\r\n                    (deleted)=\"deleteMessage($event)\"\r\n                    [customMenuItems]=\"customMenuItems\"\r\n                    ></banta-comment-view>\r\n\r\n                <banta-comment-field\r\n                    [sendLabel]=\"replyLabel\"\r\n                    [sendingLabel]=\"sendingLabel\"\r\n                    [hashtags]=\"hashtags\"\r\n                    [participants]=\"participants\"\r\n                    (signInSelected)=\"showSignIn()\"\r\n                    (editAvatarSelected)=\"showEditAvatar()\"\r\n                    [source]=\"selectedMessageThread\"\r\n                    [maxLength]=\"maxCommentLength\"\r\n                    [canComment]=\"source?.permissions?.canPost\"\r\n                    [signInLabel]=\"signInLabel\"\r\n                    [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                    (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                    [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                    [user]=\"user\"\r\n                    [label]=\"postReplyLabel\"\r\n                    [submit]=\"sendReply\"\r\n                    [allowAttachments]=\"allowAttachments\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    >\r\n                    <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                </banta-comment-field>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"main\" [class.hidden]=\"selectedMessage && !useInlineReplies\">\r\n        <banta-comment-field\r\n            [source]=\"source\"\r\n            [user]=\"user\"\r\n            [sendLabel]=\"sendLabel\"\r\n            [sendingLabel]=\"sendingLabel\"\r\n            [signInLabel]=\"signInLabel\"\r\n            [canComment]=\"source?.permissions?.canPost\"\r\n            [hashtags]=\"hashtags\"\r\n            [participants]=\"participants\"\r\n            [label]=\"postCommentLabel\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            (editAvatarSelected)=\"showEditAvatar()\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n            (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n            [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n            [submit]=\"sendMessage\"\r\n            [allowAttachments]=\"allowAttachments\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            >\r\n        \r\n        </banta-comment-field>\r\n\r\n        <banta-comment-sort\r\n            [(sort)]=\"sortOrder\"></banta-comment-sort>\r\n\r\n        <div class=\"loading-comment\" *ngIf=\"loadingSharedComment\">\r\n            <h1>Loading the comment you linked to...</h1>\r\n            <mat-spinner [diameter]=\"300\" [strokeWidth]=\"2\"></mat-spinner>\r\n            <p>\r\n                If there are a lot of comments, this might take awhile!\r\n            </p>\r\n        </div>\r\n        <div class=\"loading-comment\" *ngIf=\"!loadingSharedComment && lastSharedCommentID\">\r\n            <ng-container *ngIf=\"sharedCommentMissing\">\r\n\r\n                <a class=\"close\" mat-icon-button matTooltip=\"Close this notice\" href=\"javascript:;\" (click)=\"lastSharedCommentID = null\">\r\n                    <mat-icon>close</mat-icon>\r\n                </a>\r\n\r\n                <h1>\r\n                    <mat-icon>error</mat-icon>\r\n                    Uh oh!\r\n                </h1>\r\n\r\n                <p>The comment you linked to can't be found! It may have been removed.</p>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!sharedCommentMissing\">\r\n                <a class=\"close\" mat-icon-button matTooltip=\"Close this notice\" href=\"javascript:;\" (click)=\"lastSharedCommentID = null\">\r\n                    <mat-icon>close</mat-icon>\r\n                </a>\r\n                <button mat-button (click)=\"navigateToSharedComment(lastSharedCommentID)\">\r\n                    <mat-icon>move_down</mat-icon> Jump to shared comment\r\n                </button>\r\n            </ng-container>\r\n        </div>\r\n\r\n        <banta-comment-view\r\n            #commentView\r\n            [class.faded]=\"selectedMessage && !useInlineReplies\"\r\n            [source]=\"source\"\r\n            [fixedHeight]=\"fixedHeight\"\r\n            [maxMessages]=\"maxMessages\"\r\n            [maxVisibleMessages]=\"maxVisibleMessages\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            [customMenuItems]=\"customMenuItems\"\r\n            (userSelected)=\"selectMessageUser($event)\"\r\n            (sortOrderChanged)=\"sortOrder = $event\"\r\n            (selected)=\"selectMessage($event)\"\r\n            (liked)=\"likeMessage(source, $event)\"\r\n            (unliked)=\"unlikeMessage(source, $event)\"\r\n            (messageEdited)=\"editMessage(source, $event.message, $event.newMessage)\"\r\n            (reported)=\"reportMessage($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (shared)=\"shareMessage($event)\"\r\n            [selectedMessage]=\"selectedMessage\"\r\n            (deleted)=\"deleteMessage($event)\"\r\n            >\r\n            <div class=\"inline-replies\">\r\n                <div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\r\n                    <div class=\"replies\">\r\n            \r\n                        <ng-container *ngIf=\"!selectedMessageThread\">\r\n                            <div class=\"loading\">\r\n                                <mat-spinner></mat-spinner>\r\n                            </div>\r\n                        </ng-container>\r\n            \r\n                        <ng-container *ngIf=\"selectedMessageThread\">\r\n                            <banta-comment-view\r\n                                [source]=\"selectedMessageThread\"\r\n                                [allowReplies]=\"false\"\r\n                                [fixedHeight]=\"false\"\r\n                                [showEmptyState]=\"false\"\r\n                                [newestLast]=\"true\"\r\n                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                (liked)=\"likeMessage(selectedMessageThread, $event)\"\r\n                                (unliked)=\"unlikeMessage(selectedMessageThread, $event)\"\r\n                                (messageEdited)=\"editMessage(selectedMessageThread, $event.message, $event.newMessage)\"\r\n                                (reported)=\"reportMessage($event)\"\r\n                                (usernameSelected)=\"selectUsername($event)\"\r\n                                (avatarSelected)=\"selectAvatar($event)\"\r\n                                (shared)=\"shareMessage($event)\"\r\n                                (deleted)=\"deleteMessage($event)\"\r\n                                ></banta-comment-view>\r\n            \r\n                            <banta-comment-field\r\n                                [sendLabel]=\"replyLabel\"\r\n                                [sendingLabel]=\"sendingLabel\"\r\n                                [hashtags]=\"hashtags\"\r\n                                [participants]=\"participants\"\r\n                                (signInSelected)=\"showSignIn()\"\r\n                                [maxLength]=\"maxCommentLength\"\r\n                                (editAvatarSelected)=\"showEditAvatar()\"\r\n                                [source]=\"selectedMessageThread\"\r\n                                [canComment]=\"source?.permissions?.canPost\"\r\n                                [signInLabel]=\"signInLabel\"\r\n                                [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                                (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                                [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                                [user]=\"user\"\r\n                                [label]=\"postReplyLabel\"\r\n                                [submit]=\"sendReply\"\r\n                                [allowAttachments]=\"allowAttachments\"\r\n                                [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                                >\r\n                                <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                            </banta-comment-field>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>            \r\n            </div>\r\n        </banta-comment-view>\r\n    </div>\r\n</ng-container>\r\n",
+                    styles: [":host{display:flex;flex-direction:column}@-webkit-keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes select-comment{0%{transform:scale(1.15)}to{transform:scale(1)}}.focused{-webkit-animation-name:select-comment;animation-name:select-comment;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.focused .replies{margin-top:1em;margin-left:2em;border-left:2px solid #333;padding-left:2em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;min-height:16em}.main.hidden{display:none}.loading-screen{text-align:center;opacity:0;transition:opacity .25s ease-in-out}.loading-screen.visible{opacity:1}.loading-screen h1{font-weight:100}.loading-screen mat-spinner{margin:5em auto}.loading-screen .loading-message{opacity:0;transition:opacity .25s ease-in-out;width:500px;max-width:100%;margin:0 auto}.loading-screen .loading-message.visible{opacity:1}banta-comment-sort{margin:0 0 0 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;display:block}.inline-replies{margin-left:4em}@media (max-width:500px){.focused .replies{margin-left:0}.inline-replies{margin-left:1em}.focused .replies{padding-left:.5em}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) .inline-replies{margin-left:1em}:host-context(.banta-mobile) .focused .replies{padding-left:.5em}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}.loading-comment{z-index:100;border:1px solid #333;background:#000;color:#fff;padding:1em;border-radius:4px;text-align:center;position:relative}.loading-comment a.close{position:absolute;top:1em;right:1em}.loading-comment h1{font-weight:100;text-align:center}.loading-comment mat-spinner{margin:0 auto}"]
                 },] }
     ];
     BantaCommentsComponent.ctorParameters = function () { return [
@@ -10413,10 +10545,12 @@
                                     return [2 /*return*/];
                                 }
                                 if (event.key === 'Enter') {
-                                    this.activateAutoComplete(this.autocompleteOptions[this.autoCompleteSelected]);
-                                    event.stopPropagation();
-                                    event.preventDefault();
-                                    return [2 /*return*/];
+                                    if (this.autocompleteOptions[this.autoCompleteSelected]) {
+                                        this.activateAutoComplete(this.autocompleteOptions[this.autoCompleteSelected]);
+                                        event.stopPropagation();
+                                        event.preventDefault();
+                                        return [2 /*return*/];
+                                    }
                                 }
                                 if (event.key === 'ArrowUp') {
                                     if (this.autoCompleteSelected === 0)
@@ -10808,6 +10942,7 @@
             _this._messageReceived = new rxjs.Subject();
             _this._messageUpdated = new rxjs.Subject();
             _this._messageSent = new rxjs.Subject();
+            _this._messageObserved = new rxjs.Subject();
             _this.messages = [];
             _this.ready = new Promise(function (resolve) { return _this.markReady = resolve; });
             return _this;
@@ -10885,10 +11020,13 @@
         };
         ChatSource.prototype.mapOrUpdateMessage = function (message) {
             var existingMessage = this.messageMap.get(message.id);
-            if (existingMessage)
+            if (existingMessage) {
                 message = Object.assign(existingMessage, message);
-            else
+            }
+            else {
                 this.messageMap.set(message.id, message);
+                this._messageObserved.next(message);
+            }
             return message;
         };
         ChatSource.prototype.getExistingMessages = function () {
@@ -11007,6 +11145,11 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(ChatSource.prototype, "messageObserved", {
+            get: function () { return this._messageObserved.asObservable(); },
+            enumerable: false,
+            configurable: true
+        });
         ChatSource.prototype.send = function (message) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_b) {