@banta/sdk 3.2.2 → 3.3.0

package/fesm2015/banta-sdk.js

@@ -1,4 +1,4 @@
-import { Observable, Subject, BehaviorSubject } from 'rxjs';
+import { Observable, Subject, BehaviorSubject, Subscription } from 'rxjs';
 import { publish } from 'rxjs/operators';
 import { Injectable, Component, Input, NgModule, Output, ViewChild, ElementRef, HostBinding } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -9,12 +9,14 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
 import { __awaiter } from 'tslib';
-import { SubSink } from 'subsink';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { ActivatedRoute } from '@angular/router';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { TextFieldModule } from '@angular/cdk/text-field';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { CommentsOrder } from '@banta/common';
+import { MatSelectModule } from '@angular/material/select';
 
 function lazyConnection(options) {
     let obs = new Observable(observer => {
@@ -7037,7 +7039,7 @@ LiveChatMessageComponent.propDecorators = {
 class ChatViewComponent {
     constructor(elementRef) {
         this.elementRef = elementRef;
-        this._sourceSubs = new SubSink();
+        this._sourceSubs = new Subscription();
         this._selected = new Subject();
         this._reported = new Subject();
         this._upvoted = new Subject();
@@ -7068,15 +7070,14 @@ class ChatViewComponent {
         this._source = value;
         this.messages = [];
         if (value) {
-            this._sourceSubs = new SubSink();
+            this._sourceSubs = new Subscription();
             this.messages = value.messages.slice();
             console.log(`Source set:`);
             console.dir(value);
             console.log(`Messages loaded:`);
             console.dir(this.messages);
-            this._sourceSubs.add(this._source.messageReceived
-                .subscribe(msg => this.messageReceived(msg)), this._source.messageSent
-                .subscribe(msg => this.messageSent(msg)));
+            this._sourceSubs.add(this._source.messageReceived.subscribe(msg => this.messageReceived(msg)));
+            this._sourceSubs.add(this._source.messageSent.subscribe(msg => this.messageSent(msg)));
             if (this._source.currentUserChanged) {
                 this._sourceSubs.add(this._source.currentUserChanged
                     .subscribe(user => this.currentUser = user));
@@ -7186,7 +7187,7 @@ class BantaChatComponent {
         this.banta = banta;
         this.backend = backend;
         this.elementRef = elementRef;
-        this._subs = new SubSink();
+        this._subs = new Subscription();
         this.user = null;
         this.signInLabel = 'Sign In';
         this.sendLabel = 'Send';
@@ -7365,7 +7366,7 @@ class BantaComponent {
         this.banta = banta;
         this.backend = backend;
         this.matDialog = matDialog;
-        this._subs = new SubSink();
+        this._subs = new Subscription();
         this.auxOpen = false;
         this.auxTitle = 'Notifications';
         this.auxMode = 'notifications';
@@ -7380,7 +7381,9 @@ class BantaComponent {
         this.genericAvatarUrl = 'https://gravatar.com/avatar/915c804e0be607a4ad766ddadea5c48a?s=512&d=https://codepen.io/assets/avatars/user-avatar-512x512-6e240cf350d2f1cc07c2bed234c3a3bb5f1b237023c204c782622e80d6b212ba.png';
     }
     ngOnInit() {
-        this._subs.add(this.banta.userChanged.subscribe(user => this.currentUser = user), this.backend.notificationsChanged.subscribe(notifs => this.notifications = notifs), this.backend.newNotification.subscribe(notif => {
+        this._subs.add(this.banta.userChanged.subscribe(user => this.currentUser = user));
+        this._subs.add(this.backend.notificationsChanged.subscribe(notifs => this.notifications = notifs));
+        this._subs.add(this.backend.newNotification.subscribe(notif => {
             this.newNotifications = true;
         }));
     }
@@ -7643,7 +7646,10 @@ class CommentComponent {
         this._reported = new Subject();
         this._selected = new Subject();
         this._upvoted = new Subject();
+        this._shared = new Subject();
         this._userSelected = new Subject();
+        this._avatarSelected = new Subject();
+        this._usernameSelected = new Subject();
         this.isNew = false;
         this.visible = false;
         this.showReplyAction = true;
@@ -7659,32 +7665,52 @@ class CommentComponent {
         }, randomTime);
     }
     get userSelected() {
-        return this._userSelected;
+        return this._userSelected.asObservable();
+    }
+    get usernameSelected() {
+        return this._usernameSelected.asObservable();
+    }
+    get avatarSelected() {
+        return this._avatarSelected.asObservable();
     }
     get reported() {
-        return this._reported;
+        return this._reported.asObservable();
     }
     get upvoted() {
-        return this._upvoted;
+        return this._upvoted.asObservable();
     }
     get selected() {
-        return this._selected;
+        return this._selected.asObservable();
     }
     get commentId() {
         var _a;
         return (_a = this.message) === null || _a === void 0 ? void 0 : _a.id;
     }
+    get shared() {
+        return this._shared.asObservable();
+    }
     report() {
         this._reported.next();
     }
     upvote() {
         this._upvoted.next();
     }
+    share() {
+        this._shared.next(this.message);
+    }
     select() {
         this._selected.next();
     }
     selectUser() {
-        return this._userSelected.next();
+        this._userSelected.next();
+    }
+    selectUsername(user) {
+        this._usernameSelected.next(user);
+        this.selectUser();
+    }
+    selectAvatar(user) {
+        this._avatarSelected.next(user);
+        this.selectUser();
     }
     avatarForUser(user) {
         if (user && user.avatarUrl) {
@@ -7697,7 +7723,7 @@ class CommentComponent {
 CommentComponent.decorators = [
     { type: Component, args: [{
                 selector: 'banta-comment',
-                template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n    <button mat-menu-item (click)=\"report()\">Report</button>\r\n    <button mat-menu-item>Help</button>\r\n</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n    <div class=\"user\">\r\n        <a \r\n            href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"selectUser()\"\r\n            [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n        <a href=\"javascript:;\" class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n        <a href=\"javascript:;\" class=\"username\" (click)=\"selectUser()\">@{{message.user.username}}</a>\r\n    </div>\r\n    <div class=\"content\">\r\n        {{message.message}}\r\n    </div>\r\n    \r\n    <div class=\"actions\">\r\n        <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"counted-action\" *ngIf=\"showReplyAction\">\r\n            <div class=\"count-indicator\">\r\n                {{message.submessages?.length || 0}}\r\n            </div>\r\n            <button mat-icon-button matTooltip=\"Comment\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n                <mat-icon [inline]=\"true\">comment</mat-icon>\r\n            </button>\r\n        </div>\r\n        <div class=\"counted-action\">\r\n            <div class=\"count-indicator\">  \r\n                {{message.upvotes}}\r\n            </div>\r\n            <button mat-icon-button matTooltip=\"Upvote\" matTooltipPosition=\"below\" (click)=\"upvote()\">\r\n                <mat-icon [inline]=\"true\">thumb_up</mat-icon>\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)=\"report()\">Report</button>\r\n    <button mat-menu-item>Help</button>\r\n</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n    <div class=\"user\">\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        <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 class=\"content\">\r\n        {{message.message}}\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n        <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"counted-action\" *ngIf=\"showReplyAction\">\r\n            <div class=\"count-indicator\">\r\n                {{message.submessages?.length || 0}}\r\n            </div>\r\n            <button mat-icon-button matTooltip=\"Comment\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n                <mat-icon [inline]=\"true\">comment</mat-icon>\r\n            </button>\r\n        </div>\r\n        <div class=\"counted-action\">\r\n            <div class=\"count-indicator\">\r\n                {{message.upvotes}}\r\n            </div>\r\n            <button mat-icon-button matTooltip=\"Upvote\" matTooltipPosition=\"below\" (click)=\"upvote()\">\r\n                <mat-icon [inline]=\"true\">thumb_up</mat-icon>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"counted-action\">\r\n            <button mat-icon-button matTooltip=\"Share this comment\" matTooltipPosition=\"below\" (click)=\"share()\">\r\n                <mat-icon [inline]=\"true\" >share</mat-icon>\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(100vw)}to{transform:translate(0)}}@keyframes comment-appear{0%{transform:translate(100vw)}to{transform:translate(0)}}:host{display:flex;flex-direction:column;padding:.5em;position:relative;visibility:hidden}:host.new{-webkit-animation-duration:.4s;-webkit-animation-fill-mode:both;-webkit-animation-name:comment-appear;animation-duration:.4s;animation-fill-mode:both;animation-name:comment-appear}:host.new,:host.visible{visibility:visible}:host:hover{background:#eee}:host .message-content .content{margin-left:60px;margin-right:.5em}:host.abbreviated .message-content .content{max-height:8.5em;overflow-y:hidden;text-overflow:ellipsis}:host .actions{align-items:center;display:flex;margin-left:60px;padding-right:10px}:host .actions button{color:#666}:host .actions banta-timestamp{color:#666;font-size:10pt}.user{align-items:center;display:flex;margin:1em 0 0;position:relative}.user .display-name,.user .username{color:#000;display:block;flex-grow:0;flex-shrink:1;font-size:10pt;margin:0 auto 0 0;max-width:100%;overflow:hidden;padding:0 0 0 1em;position:relative;text-overflow:ellipsis;white-space:nowrap;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:1}.user .display-name.username,.user .username.username{color:#666;flex-grow:1;flex-shrink:0}.avatar{background-color:#333;background-position:50%;background-size:cover;border-radius:100%;flex-grow:0;flex-shrink:0;height:48px;width:48px}.counted-action{align-items:center;display:flex}.count-indicator{color:#666;font-size:9pt;padding:0 0 0 3px}:host-context(.mat-dark-theme) .count-indicator{border-color:#333}:host-context(.mat-dark-theme):hover{background:#060606}:host-context(.mat-dark-theme) .user .display-name,:host-context(.mat-dark-theme) .user .username{color:#fff}@media (max-width:400px){.avatar{height:32px;width:32px}:host .actions{margin-left:44px}:host .message-content .content{margin-left:44px;margin-right:.5em}}"]
             },] }
 ];
@@ -7707,20 +7733,26 @@ CommentComponent.propDecorators = {
     message: [{ type: Input }],
     showReplyAction: [{ type: Input }],
     userSelected: [{ type: Output }],
+    usernameSelected: [{ type: Output }],
+    avatarSelected: [{ type: Output }],
     reported: [{ type: Output }],
     upvoted: [{ type: Output }],
     selected: [{ type: Output }],
-    commentId: [{ type: HostBinding, args: ['attr.data-comment-id',] }]
+    commentId: [{ type: HostBinding, args: ['attr.data-comment-id',] }],
+    shared: [{ type: Output }]
 };
 
 class CommentViewComponent {
     constructor(backend) {
         this.backend = backend;
-        this._sourceSubs = new SubSink();
+        this._sourceSubs = new Subscription();
         this._selected = new Subject();
         this._upvoted = new Subject();
         this._reported = new Subject();
         this._userSelected = new Subject();
+        this._usernameSelected = new Subject();
+        this._avatarSelected = new Subject();
+        this._shared = new Subject();
         this.showEmptyState = true;
         this.allowReplies = true;
         this.menuMessage = null;
@@ -7746,6 +7778,15 @@ class CommentViewComponent {
     get upvoted() {
         return this._upvoted;
     }
+    get usernameSelected() {
+        return this._usernameSelected;
+    }
+    get avatarSelected() {
+        return this._avatarSelected;
+    }
+    get shared() {
+        return this._shared;
+    }
     get source() {
         return this._source;
     }
@@ -7756,13 +7797,20 @@ class CommentViewComponent {
         this._reported.next(message);
     }
     selectMessage(message) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this._selected.next(message);
-        });
+        this._selected.next(message);
     }
     selectMessageUser(message) {
         this._userSelected.next(message);
     }
+    selectUsername(user) {
+        this._usernameSelected.next(user);
+    }
+    selectAvatar(user) {
+        this._avatarSelected.next(user);
+    }
+    sharedMessage(message) {
+        this._shared.next(message);
+    }
     set source(value) {
         if (this._sourceSubs) {
             this._sourceSubs.unsubscribe();
@@ -7770,14 +7818,14 @@ class CommentViewComponent {
         }
         this._source = value;
         if (value) {
-            let messages = (value.messages || []).slice();
+            console.log(`[banta-comment-view] Subscribing to source...`);
+            const messages = (value.messages || []).slice();
             this.messages = messages;
             this.olderMessages = messages.splice(this.maxVisibleMessages, messages.length);
             this.hasMore = this.olderMessages.length > 0;
-            this._sourceSubs = new SubSink();
-            this._sourceSubs.add(this._source.messageReceived
-                .subscribe(msg => this.messageReceived(msg)), this._source.messageSent
-                .subscribe(msg => this.messageSent(msg)));
+            this._sourceSubs = new Subscription();
+            this._sourceSubs.add(this._source.messageReceived.subscribe(msg => this.messageReceived(msg)));
+            this._sourceSubs.add(this._source.messageSent.subscribe(msg => this.messageSent(msg)));
             if (this._source.currentUserChanged) {
                 this._sourceSubs.add(this._source.currentUserChanged.subscribe(user => this.currentUser = user));
             }
@@ -7846,9 +7894,9 @@ class CommentViewComponent {
     isScrolledToLatest() {
         if (!this.messageContainer)
             return false;
-        let el = this.messageContainer.nativeElement;
-        let currentScroll = el.scrollTop;
-        let currentTotal = el.scrollHeight - el.offsetHeight;
+        const el = this.messageContainer.nativeElement;
+        const currentScroll = el.scrollTop;
+        const currentTotal = el.scrollHeight - el.offsetHeight;
         return currentScroll > currentTotal - 10;
     }
     messageSent(message) {
@@ -7860,7 +7908,7 @@ class CommentViewComponent {
     scrollToLatest() {
         if (!this.messageContainer)
             return;
-        let el = this.messageContainer.nativeElement;
+        const el = this.messageContainer.nativeElement;
         el.scrollTop = el.scrollHeight;
     }
     mentionsMe(message) {
@@ -7880,7 +7928,7 @@ class CommentViewComponent {
 CommentViewComponent.decorators = [
     { type: Component, args: [{
                 selector: 'banta-comment-view',
-                template: "<div class=\"message-container\">\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n    \r\n    <a mat-button class=\"nav\" [class.visible]=\"isViewingMore\" href=\"javascript:;\" (click)=\"showNew()\">\r\n        <mat-icon>file_upload</mat-icon>\r\n        New\r\n        <ng-container *ngIf=\"newMessages.length >= 1\">\r\n            ({{newMessages.length}})\r\n        </ng-container>\r\n    </a>\r\n\r\n    <ng-container *ngIf=\"messages.length === 0\">\r\n        <div class=\"empty-state\" *ngIf=\"showEmptyState\">\r\n            Be the first to comment!\r\n        </div>\r\n    </ng-container>\r\n    <banta-comment \r\n        *ngFor=\"let message of messages; trackBy: messageIdentity\"\r\n        class=\"abbreviated\"\r\n        [message]=\"message\"\r\n        (click)=\"isViewingMore = true\"\r\n        [showReplyAction]=\"allowReplies\"\r\n        (userSelected)=\"selectMessageUser(message)\"\r\n        (upvoted)=\"upvoteMessage(message)\"\r\n        (reported)=\"reportMessage(message)\"\r\n        (selected)=\"selectMessage(message)\"\r\n        ></banta-comment>\r\n\r\n    <a mat-button class=\"nav\" [class.visible]=\"hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show more</a>\r\n\r\n    <div class=\"loading-more\" *ngIf=\"isLoadingMore\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n\r\n    <!-- <div style=\"color: #666\">\r\n        n={{newMessages.length}}, m={{messages.length}}, o={{olderMessages.length}},\r\n        v={{maxVisibleMessages}}, M={{maxMessages}}\r\n    </div> -->\r\n\r\n    <ng-content select=\":not([data-before])\"></ng-content>\r\n</div>",
+                template: "<div class=\"message-container\">\r\n    <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n    <a mat-button class=\"nav\" [class.visible]=\"isViewingMore\" href=\"javascript:;\" (click)=\"showNew()\">\r\n        <mat-icon>file_upload</mat-icon>\r\n        New\r\n        <ng-container *ngIf=\"newMessages.length >= 1\">\r\n            ({{newMessages.length}})\r\n        </ng-container>\r\n    </a>\r\n\r\n    <ng-container *ngIf=\"messages.length === 0\">\r\n        <div class=\"empty-state\" *ngIf=\"showEmptyState\">\r\n            Be the first to comment!\r\n        </div>\r\n    </ng-container>\r\n    <banta-comment\r\n        *ngFor=\"let message of messages; trackBy: messageIdentity\"\r\n        class=\"abbreviated\"\r\n        [message]=\"message\"\r\n        (click)=\"isViewingMore = true\"\r\n        [showReplyAction]=\"allowReplies\"\r\n\t\t(userSelected)=\"selectMessageUser(message)\"\r\n        (avatarSelected)=\"selectAvatar($event)\"\r\n\t\t(usernameSelected)=\"selectUsername($event)\"\r\n        (upvoted)=\"upvoteMessage(message)\"\r\n        (reported)=\"reportMessage(message)\"\r\n        (selected)=\"selectMessage(message)\"\r\n        (shared)=\"sharedMessage($event)\"\r\n        ></banta-comment>\r\n\r\n    <a mat-button class=\"nav\" [class.visible]=\"hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show more</a>\r\n\r\n    <div class=\"loading-more\" *ngIf=\"isLoadingMore\">\r\n        <mat-spinner></mat-spinner>\r\n    </div>\r\n\r\n    <!-- <div style=\"color: #666\">\r\n        n={{newMessages.length}}, m={{messages.length}}, o={{olderMessages.length}},\r\n        v={{maxVisibleMessages}}, M={{maxMessages}}\r\n    </div> -->\r\n\r\n    <ng-content select=\":not([data-before])\"></ng-content>\r\n</div>\r\n",
                 styles: [":host{display:flex;flex-direction:column;flex-grow:1;opacity:1;transition:opacity .2s ease-in}.message-container{background:#fff;color:#111;flex-grow:1;opacity:1;overflow-x:hidden;padding:.5em 1em 3em .5em;position:relative;transition:opacity .5s ease-in-out}.message-container.no-scroll{height:auto;overflow-y:visible}.message-container.faded{opacity:.25}.message-container .overlay{bottom:0;left:0;position:absolute;right:0;top:0;z-index:10}:host.fixed-height .message-container{overflow-y:auto}:host-context(.mat-dark-theme) .message-container{background:#111;color:#fff}.empty-state{color:#666;margin:3em;text-align:center}:host-context(.mat-dark-theme) .empty-state{color:#666}a.nav{background:#222;border-radius:2em;opacity:0;pointer-events:none;position:absolute;right:.5em;text-align:center;transition:opacity .4s ease-in-out;z-index:10}a.nav.visible{opacity:1;pointer-events:auto}.loading-more{margin:0 auto;padding:2em;text-align:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (max-width:400px){.message-container{padding:0 0 3em}}"]
             },] }
 ];
@@ -7895,6 +7943,9 @@ CommentViewComponent.propDecorators = {
     userSelected: [{ type: Output }],
     reported: [{ type: Output }],
     upvoted: [{ type: Output }],
+    usernameSelected: [{ type: Output }],
+    avatarSelected: [{ type: Output }],
+    shared: [{ type: Output }],
     source: [{ type: Input }],
     genericAvatarUrl: [{ type: Input }],
     messageContainer: [{ type: ViewChild, args: ['messageContainer',] }],
@@ -7907,15 +7958,19 @@ CommentViewComponent.propDecorators = {
  * Comments component
  */
 class BantaCommentsComponent {
-    constructor(banta, backend, elementRef) {
+    constructor(banta, backend, elementRef, activatedRoute) {
         this.banta = banta;
         this.backend = backend;
         this.elementRef = elementRef;
+        this.activatedRoute = activatedRoute;
         this._upvoted = new Subject();
         this._reported = new Subject();
         this._selected = new Subject();
         this._userSelected = new Subject();
-        this._subs = new SubSink();
+        this._shared = new Subject();
+        this._usernameSelected = new Subject();
+        this._avatarSelected = new Subject();
+        this._subs = new Subscription();
         this.hashtags = [
             { hashtag: 'error', description: 'Cause an error' },
             { hashtag: 'timeout', description: 'Cause a slow timeout error' },
@@ -7936,9 +7991,39 @@ class BantaCommentsComponent {
         this.expandError = false;
         this.selectedMessageVisible = false;
     }
+    get sortOrder() {
+        return this._sortOrder;
+    }
+    set sortOrder(value) {
+        if (this._sortOrder !== value) {
+            this._sortOrder = value;
+            setTimeout(() => {
+                this.setSourceFromTopicID(this.topicID);
+            });
+        }
+    }
     ngOnInit() {
         this._subs.add(this.banta.userChanged.subscribe(user => this.user = user));
     }
+    ngAfterViewInit() {
+        if (typeof window !== 'undefined')
+            this.checkForSharedComment();
+    }
+    scrollToComment(commentId) {
+        setTimeout(() => {
+            const comment = document.querySelectorAll(`[data-comment-id="${commentId}"]`);
+            console.log(comment);
+            if (comment.length > 0) {
+                // comment.item(0).scroll({behavior: 'smooth'});
+                comment.item(0).scrollIntoView();
+            }
+        }, 1000);
+    }
+    checkForSharedComment() {
+        const commentID = this.activatedRoute.snapshot.queryParamMap.get('comment');
+        if (commentID)
+            this.scrollToComment(commentID);
+    }
     ngOnDestroy() {
         this._subs.unsubscribe();
     }
@@ -7949,20 +8034,26 @@ class BantaCommentsComponent {
         this._source = value;
     }
     get topicID() {
-        return this._source.identifier;
+        return this._topicID;
     }
     set topicID(value) {
-        this.setSourceFromTopicID(value);
+        if (this._topicID !== value) {
+            this._topicID = value;
+            setTimeout(() => this.setSourceFromTopicID(value));
+        }
     }
     setSourceFromTopicID(topicID) {
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
-            if (this._source && this._source.close)
-                this._source.close();
+            (_b = (_a = this._source) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
             this._source = null;
-            this._source = yield this.backend.getSourceForTopic(topicID);
-            this._source.messageReceived.subscribe(m => this.addParticipant(m));
-            this._source.messageSent.subscribe(m => this.addParticipant(m));
-            this._source.messages.forEach(m => this.addParticipant(m));
+            setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+                this._source = yield this.backend.getSourceForTopic(topicID, { sortOrder: this.sortOrder });
+                console.log(`[banta-comments] Subscribing to source for topic '${topicID}'`);
+                this._source.messageReceived.subscribe(m => this.addParticipant(m));
+                this._source.messageSent.subscribe(m => this.addParticipant(m));
+                this._source.messages.forEach(m => this.addParticipant(m));
+            }));
         });
     }
     addParticipant(message) {
@@ -8010,16 +8101,25 @@ class BantaCommentsComponent {
         return (_a = this.user.permissions) === null || _a === void 0 ? void 0 : _a.canComment(this.source);
     }
     get upvoted() {
-        return this._upvoted;
+        return this._upvoted.asObservable();
     }
     get reported() {
-        return this._reported;
+        return this._reported.asObservable();
     }
     get selected() {
-        return this._selected;
+        return this._selected.asObservable();
     }
     get userSelected() {
-        return this._userSelected;
+        return this._userSelected.asObservable();
+    }
+    get usernameSelected() {
+        return this._usernameSelected.asObservable();
+    }
+    get avatarSelected() {
+        return this._avatarSelected.asObservable();
+    }
+    get shared() {
+        return this._shared.asObservable();
     }
     onKeyDown(event) {
     }
@@ -8076,6 +8176,15 @@ class BantaCommentsComponent {
     selectMessageUser(message) {
         this._userSelected.next(message);
     }
+    selectUsername(user) {
+        this._usernameSelected.next(user);
+    }
+    selectAvatar(user) {
+        this._avatarSelected.next(user);
+    }
+    shareMessage(message) {
+        this._shared.next(message);
+    }
     sendReply() {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.selectedMessageThread.send({
@@ -8101,14 +8210,15 @@ class BantaCommentsComponent {
 BantaCommentsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'banta-comments',
-                template: "\r\n<div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\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        ></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                [source]=\"selectedMessageThread\"\r\n                [allowReplies]=\"false\"\r\n                [fixedHeight]=\"false\"\r\n                [showEmptyState]=\"false\"\r\n                [newestLast]=\"true\"\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                [canComment]=\"canComment\"\r\n                [signInLabel]=\"signInLabel\"\r\n                [permissionDeniedLabel]=\"permissionDeniedLabel\"\r\n                (permissionDeniedError)=\"showPermissionDenied()\"\r\n                [user]=\"user\"\r\n                [label]=\"postReplyLabel\"\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\">\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]=\"canComment\"\r\n        [hashtags]=\"hashtags\"\r\n        [participants]=\"participants\"\r\n        [label]=\"postCommentLabel\"\r\n        (editAvatarSelected)=\"showEditAvatar()\"\r\n        (signInSelected)=\"showSignIn()\"\r\n        [permissionDeniedLabel]=\"permissionDeniedLabel\"\r\n        (permissionDeniedError)=\"showPermissionDenied()\"\r\n        ></banta-comment-field>\r\n\r\n    <banta-comment-view \r\n        [class.faded]=\"selectedMessage\"\r\n        [source]=\"source\"\r\n        [fixedHeight]=\"fixedHeight\"\r\n        [maxMessages]=\"maxMessages\"\r\n        [maxVisibleMessages]=\"maxVisibleMessages\"\r\n        [genericAvatarUrl]=\"genericAvatarUrl\"\r\n        (userSelected)=\"selectMessageUser($event)\"\r\n        (selected)=\"selectMessage($event)\"\r\n        (upvoted)=\"upvoteMessage($event)\"\r\n        (reported)=\"reportMessage($event)\"\r\n        ></banta-comment-view>\r\n</div>",
+                template: "\r\n<div class=\"focused\" [class.visible]=\"selectedMessageVisible\" *ngIf=\"selectedMessage\">\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        ></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                [source]=\"selectedMessageThread\"\r\n                [allowReplies]=\"false\"\r\n                [fixedHeight]=\"false\"\r\n                [showEmptyState]=\"false\"\r\n                [newestLast]=\"true\"\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                [canComment]=\"canComment\"\r\n                [signInLabel]=\"signInLabel\"\r\n                [permissionDeniedLabel]=\"permissionDeniedLabel\"\r\n                (permissionDeniedError)=\"showPermissionDenied()\"\r\n                [user]=\"user\"\r\n                [label]=\"postReplyLabel\"\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\">\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]=\"canComment\"\r\n        [hashtags]=\"hashtags\"\r\n        [participants]=\"participants\"\r\n        [label]=\"postCommentLabel\"\r\n        (editAvatarSelected)=\"showEditAvatar()\"\r\n        (signInSelected)=\"showSignIn()\"\r\n        [permissionDeniedLabel]=\"permissionDeniedLabel\"\r\n        (permissionDeniedError)=\"showPermissionDenied()\"\r\n        ></banta-comment-field>\r\n\r\n    <banta-comment-sort\r\n        [(sort)]=\"sortOrder\"></banta-comment-sort>\r\n\r\n    <banta-comment-view\r\n        [class.faded]=\"selectedMessage\"\r\n        [source]=\"source\"\r\n        [fixedHeight]=\"fixedHeight\"\r\n        [maxMessages]=\"maxMessages\"\r\n        [maxVisibleMessages]=\"maxVisibleMessages\"\r\n        [genericAvatarUrl]=\"genericAvatarUrl\"\r\n        (userSelected)=\"selectMessageUser($event)\"\r\n        (selected)=\"selectMessage($event)\"\r\n        (upvoted)=\"upvoteMessage($event)\"\r\n        (reported)=\"reportMessage($event)\"\r\n        (usernameSelected)=\"selectUsername($event)\"\r\n        (avatarSelected)=\"selectAvatar($event)\"\r\n        (shared)=\"shareMessage($event)\"\r\n        ></banta-comment-view>\r\n</div>\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-duration:.4s;-webkit-animation-fill-mode:both;-webkit-animation-name:select-comment;animation-duration:.4s;animation-fill-mode:both;animation-name:select-comment}.focused .replies{margin-left:4em;margin-top:1em}banta-comment-view{opacity:1;transition:opacity .4s ease-in-out}banta-comment-view.faded{opacity:.25}.loading{display:block;margin:0 auto;min-height:16em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.main.hidden{display:none}@media (max-width:500px){.focused .replies{margin-left:0}}"]
             },] }
 ];
 BantaCommentsComponent.ctorParameters = () => [
     { type: BantaService },
     { type: ChatBackendService },
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: ActivatedRoute }
 ];
 BantaCommentsComponent.propDecorators = {
     hashtags: [{ type: Input }],
@@ -8132,7 +8242,10 @@ BantaCommentsComponent.propDecorators = {
     upvoted: [{ type: Output }],
     reported: [{ type: Output }],
     selected: [{ type: Output }],
-    userSelected: [{ type: Output }]
+    userSelected: [{ type: Output }],
+    usernameSelected: [{ type: Output }],
+    avatarSelected: [{ type: Output }],
+    shared: [{ type: Output }]
 };
 
 class LiveCommentComponent {
@@ -8445,12 +8558,44 @@ CommentFieldComponent.propDecorators = {
     permissionDeniedError: [{ type: Output }]
 };
 
+class CommentSortComponent {
+    constructor() {
+        this.commentsOrder = CommentsOrder;
+        this._sortChange = new Subject();
+        this._sort = CommentsOrder.LIKES;
+    }
+    get sort() {
+        return this._sort;
+    }
+    set sort(value) {
+        if (this._sort !== value) {
+            this._sort = value;
+            setTimeout(() => this._sortChange.next(value));
+        }
+    }
+    get sortChange() {
+        return this._sortChange.asObservable();
+    }
+}
+CommentSortComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'banta-comment-sort',
+                template: "<div class=\"sort-row\">\r\n  <mat-form-field>\r\n    <mat-label>Sort by</mat-label>\r\n    <mat-select [(value)]=\"sort\" >\r\n      <mat-option [value]=\"commentsOrder.NEWEST\">Newest</mat-option>\r\n      <mat-option [value]=\"commentsOrder.OLDEST\">Oldest</mat-option>\r\n      <mat-option [value]=\"commentsOrder.LIKES\">Likes</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n</div>\r\n",
+                styles: [".sort-row{display:flex;justify-content:end;padding-right:3em}"]
+            },] }
+];
+CommentSortComponent.propDecorators = {
+    sort: [{ type: Input }],
+    sortChange: [{ type: Output }]
+};
+
 const COMPONENTS$3 = [
     CommentComponent,
     CommentViewComponent,
     BantaCommentsComponent,
     LiveCommentComponent,
-    CommentFieldComponent
+    CommentFieldComponent,
+    CommentSortComponent
 ];
 class CommentsModule {
 }
@@ -8468,7 +8613,9 @@ CommentsModule.decorators = [
                     MatMenuModule,
                     MatProgressSpinnerModule,
                     BantaCommonModule,
-                    EmojiModule
+                    EmojiModule,
+                    MatTooltipModule,
+                    MatSelectModule
                 ],
                 exports: COMPONENTS$3
             },] }