@banta/sdk 4.5.1 → 4.5.2

package/bundles/banta-sdk.umd.js

@@ -8758,13 +8758,14 @@
         CommentViewComponent.prototype.getInitialMessages = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var messages;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0: return [4 /*yield*/, this._source.getExistingMessages()];
                         case 1:
-                            messages = (_b.sent());
+                            messages = (_c.sent());
                             messages.forEach(function (m) { var _a; return (_a = m.transientState) !== null && _a !== void 0 ? _a : (m.transientState = {}); });
-                            this.messages = messages;
+                            this.messages = this.newestLast ? messages.slice().reverse() : messages;
+                            this.sortMessages();
                             return [2 /*return*/];
                     }
                 });
@@ -8775,14 +8776,18 @@
         };
         CommentViewComponent.prototype.showNew = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var overflow;
-                return __generator(this, function (_b) {
-                    if (this.source && this.source.sortOrder !== common$1.CommentsOrder.NEWEST) {
-                        this.sortOrderChanged.next(common$1.CommentsOrder.NEWEST);
+                var naturalOrder, overflow;
+                return __generator(this, function (_c) {
+                    naturalOrder = common$1.CommentsOrder.NEWEST;
+                    if (this.source && this.source.sortOrder !== naturalOrder) {
+                        this.sortOrderChanged.next(naturalOrder);
                         return [2 /*return*/];
                     }
                     this.isViewingMore = false;
-                    this.messages = this.newMessages.splice(0, this.newMessages.length).concat(this.messages);
+                    if (this.newestLast)
+                        this.messages = this.messages.concat(this.newMessages.splice(0, this.newMessages.length));
+                    else
+                        this.messages = this.newMessages.splice(0, this.newMessages.length).concat(this.messages);
                     overflow = this.messages.splice(this.maxVisibleMessages, this.messages.length);
                     this.olderMessages = overflow.concat(this.olderMessages);
                     this.olderMessages.splice(this.maxMessages - this.maxVisibleMessages, this.olderMessages.length);
@@ -8791,38 +8796,45 @@
             });
         };
         CommentViewComponent.prototype.showMore = function () {
+            var _a, _b;
             return __awaiter(this, void 0, void 0, function () {
                 var nextPageSize, lastMessage, messages;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             this.isViewingMore = true;
-                            if (!(this.olderMessages.length > 0)) return [3 /*break*/, 1];
-                            this.isLoadingMore = false;
-                            this.messages = this.messages.concat(this.olderMessages.splice(0, 50));
-                            return [3 /*break*/, 3];
-                        case 1:
+                            if (this.olderMessages.length > 0) {
+                                this.isLoadingMore = false;
+                                this.messages = this.messages.concat(this.olderMessages.splice(0, 50));
+                            }
                             this.isLoadingMore = true;
                             nextPageSize = 20;
-                            lastMessage = void 0;
-                            lastMessage = this.messages[this.messages.length - 1];
+                            if (this.newestLast) {
+                                lastMessage = (_a = this.olderMessages[0]) !== null && _a !== void 0 ? _a : this.messages[0];
+                            }
+                            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;
                                 return [2 /*return*/];
                             }
                             return [4 /*yield*/, this.source.loadAfter(lastMessage, nextPageSize)];
-                        case 2:
-                            messages = _b.sent();
+                        case 1:
+                            messages = _c.sent();
                             messages.forEach(function (m) { var _a; return (_a = m.transientState) !== null && _a !== void 0 ? _a : (m.transientState = {}); });
-                            this.messages = this.messages.concat(messages);
+                            if (this.newestLast)
+                                this.messages = messages.concat(this.messages);
+                            else
+                                this.messages = this.messages.concat(messages);
                             this.isLoadingMore = false;
                             if (messages.length === 0) {
                                 console.log("Reached the end of the list.");
                                 this.hasMore = false;
                             }
-                            _b.label = 3;
-                        case 3: return [2 /*return*/];
+                            return [2 /*return*/];
                     }
                 });
             });
@@ -8833,11 +8845,11 @@
                 (_a = message.transientState) !== null && _a !== void 0 ? _a : (message.transientState = {});
             var destination = this.messages;
             var bucket = this.olderMessages;
+            var newestLast = this.newestLast;
             if (this.isViewingMore) {
                 destination = this.newMessages;
                 bucket = null;
             }
-            var newestLast = this.newestLast;
             if (newestLast) {
                 destination.push(message);
                 var overflow = destination.splice(this.maxVisibleMessages, destination.length);
@@ -8850,6 +8862,51 @@
             }
             if ((bucket === null || bucket === void 0 ? void 0 : bucket.length) > 0)
                 this.hasMore = true;
+            message.pagingCursor = String(this.incrementPagingCursors());
+            this.sortMessages();
+        };
+        CommentViewComponent.prototype.incrementPagingCursors = function () {
+            var e_1, _c, e_2, _d;
+            if (this.source.sortOrder !== common$1.CommentsOrder.NEWEST)
+                return;
+            var maxPagingCursor = 0;
+            try {
+                for (var _e = __values([this.messages, this.olderMessages, this.newMessages]), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var group = _f.value;
+                    try {
+                        for (var group_1 = (e_2 = void 0, __values(group)), group_1_1 = group_1.next(); !group_1_1.done; group_1_1 = group_1.next()) {
+                            var message = group_1_1.value;
+                            if (message.pagingCursor) {
+                                var pagingCursor = Number(message.pagingCursor) + 1;
+                                if (pagingCursor > maxPagingCursor)
+                                    maxPagingCursor = pagingCursor;
+                                message.pagingCursor = String(pagingCursor);
+                            }
+                        }
+                    }
+                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                    finally {
+                        try {
+                            if (group_1_1 && !group_1_1.done && (_d = group_1.return)) _d.call(group_1);
+                        }
+                        finally { if (e_2) throw e_2.error; }
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_f && !_f.done && (_c = _e.return)) _c.call(_e);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            return maxPagingCursor;
+        };
+        CommentViewComponent.prototype.sortMessages = function () {
+            var _this = this;
+            this.messages.sort(function (a, b) { return (a.sentAt - b.sentAt) * (_this.newestLast ? 1 : -1); });
+            this.olderMessages.sort(function (a, b) { return (a.sentAt - b.sentAt) * (_this.newestLast ? 1 : -1); });
+            this.newMessages.sort(function (a, b) { return (a.sentAt - b.sentAt) * (_this.newestLast ? 1 : -1); });
         };
         CommentViewComponent.prototype.messageReceived = function (message) {
             var _this = this;
@@ -8889,7 +8946,7 @@
     CommentViewComponent.decorators = [
         { type: core.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 || customSortEnabled\" 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    <ng-container *ngFor=\"let message of messages; trackBy: messageIdentity\">\r\n        <banta-comment\r\n            *ngIf=\"!message.hidden\"\r\n            class=\"abbreviated\"\r\n            \r\n            [customMenuItems]=\"customMenuItems\"\r\n            [message]=\"message\"\r\n            [mine]=\"currentUser?.id === message.user?.id\"\r\n            [permissions]=\"source?.permissions\"\r\n            [showReplyAction]=\"allowReplies\"\r\n            [editing]=\"message.transientState.editing\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            (click)=\"isViewingMore = true\"\r\n            (editStarted)=\"startEditing(message)\"\r\n            (deleted)=\"deleteMessage(message)\"\r\n            (editEnded)=\"message.transientState.editing = false\"\r\n            (edited)=\"saveEdit(message, $event)\"\r\n            (userSelected)=\"selectMessageUser(message)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (liked)=\"likeMessage(message)\"\r\n            (unliked)=\"unlikeMessage(message)\"\r\n            (reported)=\"reportMessage(message)\"\r\n            (selected)=\"selectMessage(message)\"\r\n            (shared)=\"sharedMessage($event)\"\r\n            ></banta-comment>\r\n        <div class=\"inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n            <ng-content select=\".inline-replies\"></ng-content>\r\n        </div>\r\n    </ng-container>\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]):not(.inline-replies)\"></ng-content>\r\n</div>\r\n",
+                    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]=\"!newestLast && (isViewingMore || customSortEnabled)\" 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    <a mat-button class=\"nav\" [class.visible]=\"newestLast && hasMore && !isLoadingMore\" href=\"javascript:;\" (click)=\"showMore()\">Show earlier</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    <ng-container *ngFor=\"let message of messages; trackBy: messageIdentity\">\r\n        <banta-comment\r\n            *ngIf=\"!message.hidden\"\r\n            class=\"abbreviated\"\r\n            \r\n            [customMenuItems]=\"customMenuItems\"\r\n            [message]=\"message\"\r\n            [mine]=\"currentUser?.id === message.user?.id\"\r\n            [permissions]=\"source?.permissions\"\r\n            [showReplyAction]=\"allowReplies\"\r\n            [editing]=\"message.transientState.editing\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            (click)=\"isViewingMore = true\"\r\n            (editStarted)=\"startEditing(message)\"\r\n            (deleted)=\"deleteMessage(message)\"\r\n            (editEnded)=\"message.transientState.editing = false\"\r\n            (edited)=\"saveEdit(message, $event)\"\r\n            (userSelected)=\"selectMessageUser(message)\"\r\n            (avatarSelected)=\"selectAvatar($event)\"\r\n            (usernameSelected)=\"selectUsername($event)\"\r\n            (liked)=\"likeMessage(message)\"\r\n            (unliked)=\"unlikeMessage(message)\"\r\n            (reported)=\"reportMessage(message)\"\r\n            (selected)=\"selectMessage(message)\"\r\n            (shared)=\"sharedMessage($event)\"\r\n            ></banta-comment>\r\n        <div class=\"inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n            <ng-content select=\".inline-replies\"></ng-content>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <a mat-button class=\"nav\" [class.visible]=\"newestLast && (isViewingMore || customSortEnabled)\" href=\"javascript:;\" (click)=\"showNew()\">\r\n        <mat-icon>file_download</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    <a mat-button class=\"nav\" [class.visible]=\"!newestLast && 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]):not(.inline-replies)\"></ng-content>\r\n</div>\r\n",
                     styles: [":host{flex-grow:1;display:flex;flex-direction:column;opacity:1;transition:opacity .2s ease-in}.message-container{flex-grow:1;overflow-x:hidden;color:#111;background:#fff;padding:.5em 1em 3em .5em;opacity:1;transition:opacity .5s ease-in-out;position:relative}.message-container.no-scroll{height:auto;overflow-y:visible}.message-container.faded{opacity:.25}.message-container .overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:10}:host.fixed-height .message-container{overflow-y:auto}:host-context(.mat-dark-theme) .message-container{color:#fff;background:#111}.empty-state{text-align:center;margin:3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}a.nav{position:absolute;right:.5em;z-index:10;text-align:center;opacity:0;transition:opacity .4s ease-in-out;pointer-events:none;border-radius:2em;background:#222}a.nav.visible{opacity:1;pointer-events:auto}.loading-more{padding:2em;text-align:center;margin:0 auto;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media (max-width:400px){.message-container{padding:0 0 3em}}"]
                 },] }
     ];
@@ -10638,23 +10695,27 @@
                 });
             });
         };
+        ChatSource.prototype.mapOrUpdateMessages = function (messages) {
+            var _this = this;
+            return messages.map(function (message) { return _this.mapOrUpdateMessage(message); });
+        };
+        ChatSource.prototype.mapOrUpdateMessage = function (message) {
+            var existingMessage = this.messageMap.get(message.id);
+            if (existingMessage)
+                message = Object.assign(existingMessage, message);
+            else
+                this.messageMap.set(message.id, message);
+            return message;
+        };
         ChatSource.prototype.getExistingMessages = function () {
             return __awaiter(this, void 0, void 0, function () {
                 var messages;
-                var _this = this;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0: return [4 /*yield*/, this.peer.getExistingMessages()];
                         case 1:
                             messages = _b.sent();
-                            messages = messages.map(function (message) {
-                                var existingMessage = _this.messageMap.get(message.id);
-                                if (existingMessage)
-                                    message = Object.assign(existingMessage, message);
-                                else
-                                    _this.messageMap.set(message.id, message);
-                                return message;
-                            });
+                            messages = this.mapOrUpdateMessages(messages);
                             return [2 /*return*/, messages];
                     }
                 });
@@ -10737,8 +10798,7 @@
         };
         ChatSource.prototype.onChatMessage = function (message) {
             if (this.messageMap.has(message.id)) {
-                Object.assign(this.messageMap.get(message.id), message);
-                this._messageUpdated.next(message);
+                return this.mapOrUpdateMessage(message);
             }
             else if (!message.hidden) {
                 // Only process non-hidden messages through here. 
@@ -10778,12 +10838,18 @@
         };
         ChatSource.prototype.loadAfter = function (message, count) {
             return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_b) {
-                    if (!message)
-                        return [2 /*return*/];
-                    if (!message.pagingCursor)
-                        return [2 /*return*/, []];
-                    return [2 /*return*/, this.peer.loadAfter(Number(message.pagingCursor), count)];
+                var _b;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            if (!message)
+                                return [2 /*return*/];
+                            if (!message.pagingCursor)
+                                return [2 /*return*/, []];
+                            _b = this.mapOrUpdateMessages;
+                            return [4 /*yield*/, this.peer.loadAfter(Number(message.pagingCursor), count)];
+                        case 1: return [2 /*return*/, _b.apply(this, [_c.sent()])];
+                    }
                 });
             });
         };