@banta/sdk 5.6.4 → 5.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/chat-backend.mjs +13 -2
- package/esm2022/lib/comments/banta-comments/banta-comments.component.mjs +30 -9
- package/esm2022/lib/comments/comment-view/comment-view.component.mjs +27 -25
- package/fesm2022/banta-sdk.mjs +66 -33
- package/fesm2022/banta-sdk.mjs.map +1 -1
- package/lib/banta/banta.component.d.ts +1 -1
- package/lib/chat-backend.d.ts +1 -0
- package/lib/comments/comment-view/comment-view.component.d.ts +1 -0
- package/package.json +3 -2
package/fesm2022/banta-sdk.mjs
CHANGED
|
@@ -7601,6 +7601,7 @@ class CommentViewComponent {
|
|
|
7601
7601
|
this.isViewingMore = false;
|
|
7602
7602
|
this.isLoadingMore = false;
|
|
7603
7603
|
this.hasMore = false;
|
|
7604
|
+
this.messageClicked = false;
|
|
7604
7605
|
/**
|
|
7605
7606
|
* While this is called "new" messages, it really represents the messages that would be visible *at the beginning
|
|
7606
7607
|
* of the sort order*, which can be flipped by the newestLast feature (used for replies mode).
|
|
@@ -7714,6 +7715,8 @@ class CommentViewComponent {
|
|
|
7714
7715
|
console.log(`holding due to settings`);
|
|
7715
7716
|
return true;
|
|
7716
7717
|
}
|
|
7718
|
+
if (this.enableHoldOnClick && this.messageClicked)
|
|
7719
|
+
return true;
|
|
7717
7720
|
if (this.enableHoldOnScroll) {
|
|
7718
7721
|
let keyMessage;
|
|
7719
7722
|
if (this.newestLast)
|
|
@@ -7738,7 +7741,6 @@ class CommentViewComponent {
|
|
|
7738
7741
|
else {
|
|
7739
7742
|
console.log(`could not find key message`);
|
|
7740
7743
|
}
|
|
7741
|
-
return false;
|
|
7742
7744
|
}
|
|
7743
7745
|
return false;
|
|
7744
7746
|
}
|
|
@@ -7800,6 +7802,7 @@ class CommentViewComponent {
|
|
|
7800
7802
|
this.customSortEnabled = (value?.sortOrder ?? CommentsOrder.NEWEST) !== CommentsOrder.NEWEST;
|
|
7801
7803
|
this.newMessages = [];
|
|
7802
7804
|
this.olderMessages = [];
|
|
7805
|
+
this.heldMessages = [];
|
|
7803
7806
|
window.bantaSourceDebug = value;
|
|
7804
7807
|
if (this._sourceSubs) {
|
|
7805
7808
|
this._sourceSubs.unsubscribe();
|
|
@@ -7882,6 +7885,7 @@ class CommentViewComponent {
|
|
|
7882
7885
|
async showNewest(event) {
|
|
7883
7886
|
// Regardless of how we handle this, clear out our held messages
|
|
7884
7887
|
this.heldMessages = [];
|
|
7888
|
+
this.messageClicked = false;
|
|
7885
7889
|
// If the sort order is not already Newest, switch to Newest and stop.
|
|
7886
7890
|
// The act of changing the sort order will cause the newest content to be loaded.
|
|
7887
7891
|
let naturalOrder = CommentsOrder.NEWEST;
|
|
@@ -7946,8 +7950,6 @@ class CommentViewComponent {
|
|
|
7946
7950
|
// Load more from backend if needed
|
|
7947
7951
|
// Note: Backend only supports fetching more content in one direction.
|
|
7948
7952
|
let lastMessage = this.previousMessages[0] ?? this.messages[0];
|
|
7949
|
-
if (!lastMessage)
|
|
7950
|
-
this.hasMore = false;
|
|
7951
7953
|
if (nextPageSize > 0 && this.newestLast && lastMessage) {
|
|
7952
7954
|
this.isLoadingMore = true;
|
|
7953
7955
|
let messages = await this.source.loadAfter(lastMessage, nextPageSize);
|
|
@@ -8014,8 +8016,6 @@ class CommentViewComponent {
|
|
|
8014
8016
|
nextPageSize -= storedMessages.length;
|
|
8015
8017
|
}
|
|
8016
8018
|
const lastMessage = this.olderMessages[this.olderMessages.length - 1] ?? this.messages[this.messages.length - 1];
|
|
8017
|
-
if (!lastMessage)
|
|
8018
|
-
this.hasMore = false;
|
|
8019
8019
|
if (nextPageSize > 0 && !this.newestLast && lastMessage) {
|
|
8020
8020
|
// Load more from backend
|
|
8021
8021
|
this.isLoadingMore = true;
|
|
@@ -8056,16 +8056,16 @@ class CommentViewComponent {
|
|
|
8056
8056
|
nextPageSize -= storedMessages.length;
|
|
8057
8057
|
this.hasMore = this.olderMessages.length > 0;
|
|
8058
8058
|
}
|
|
8059
|
-
|
|
8059
|
+
let lastMessage;
|
|
8060
|
+
if (this.newestLast) {
|
|
8061
|
+
lastMessage = this.olderMessages[0] ?? this.messages[0];
|
|
8062
|
+
}
|
|
8063
|
+
else {
|
|
8064
|
+
lastMessage = this.olderMessages[this.olderMessages.length - 1] ?? this.messages[this.messages.length - 1];
|
|
8065
|
+
}
|
|
8066
|
+
if (nextPageSize > 0 && lastMessage) {
|
|
8060
8067
|
// Load more from backend
|
|
8061
8068
|
this.isLoadingMore = true;
|
|
8062
|
-
let lastMessage;
|
|
8063
|
-
if (this.newestLast) {
|
|
8064
|
-
lastMessage = this.olderMessages[0] ?? this.messages[0];
|
|
8065
|
-
}
|
|
8066
|
-
else {
|
|
8067
|
-
lastMessage = this.olderMessages[this.olderMessages.length - 1] ?? this.messages[this.messages.length - 1];
|
|
8068
|
-
}
|
|
8069
8069
|
if (!lastMessage) {
|
|
8070
8070
|
this.isLoadingMore = false;
|
|
8071
8071
|
this.hasMore = false;
|
|
@@ -8090,15 +8090,17 @@ class CommentViewComponent {
|
|
|
8090
8090
|
this.isLoadingMore = false;
|
|
8091
8091
|
}
|
|
8092
8092
|
// Extract the messages that do not fit in the maxVisibleMessages buffer.
|
|
8093
|
-
|
|
8094
|
-
|
|
8095
|
-
|
|
8096
|
-
|
|
8097
|
-
|
|
8098
|
-
|
|
8099
|
-
|
|
8100
|
-
|
|
8101
|
-
|
|
8093
|
+
if (this.messages.length > this.maxVisibleMessages) {
|
|
8094
|
+
let overflow = [];
|
|
8095
|
+
if (this.newestLast)
|
|
8096
|
+
overflow = this.messages.splice(this.maxVisibleMessages, this.messages.length);
|
|
8097
|
+
else
|
|
8098
|
+
overflow = this.messages.splice(0, this.messages.length - this.maxVisibleMessages);
|
|
8099
|
+
// Regardless of the order (newestLast), newMessages represents the direction that is being pushed, since it's definition
|
|
8100
|
+
// depends on that order. Move overflowing messages into newMessages.
|
|
8101
|
+
this.newMessages = overflow.concat(this.newMessages);
|
|
8102
|
+
this.newMessages.splice(this.maxMessages - this.maxVisibleMessages, this.newMessages.length);
|
|
8103
|
+
}
|
|
8102
8104
|
}
|
|
8103
8105
|
addMessage(message) {
|
|
8104
8106
|
if (!message.transientState)
|
|
@@ -8223,11 +8225,11 @@ class CommentViewComponent {
|
|
|
8223
8225
|
return false;
|
|
8224
8226
|
}
|
|
8225
8227
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CommentViewComponent, deps: [{ token: ChatBackendBase }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8226
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: CommentViewComponent, selector: "banta-comment-view", inputs: { source: "source", maxMessages: "maxMessages", maxVisibleMessages: "maxVisibleMessages", newestLast: "newestLast", holdNewMessages: "holdNewMessages", showEmptyState: "showEmptyState", allowReplies: "allowReplies", enableHoldOnClick: "enableHoldOnClick", enableHoldOnScroll: "enableHoldOnScroll", customMenuItems: "customMenuItems", fixedHeight: "fixedHeight", selectedMessage: "selectedMessage", genericAvatarUrl: "genericAvatarUrl" }, outputs: { userSelected: "userSelected", reported: "reported", liked: "liked", unliked: "unliked", usernameSelected: "usernameSelected", avatarSelected: "avatarSelected", shared: "shared", deleted: "deleted", selected: "selected", messageEdited: "messageEdited", sortOrderChanged: "sortOrderChanged", filterModeChanged: "filterModeChanged" }, host: { properties: { "class.fixed-height": "this.fixedHeight" } }, viewQueries: [{ propertyName: "messageContainer", first: true, predicate: ["messageContainer"], descendants: true }, { propertyName: "commentsQuery", predicate: CommentComponent, descendants: true }], ngImport: i0, template: "<div class=\"banta-message-container\" #messageContainer>\r\n <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n <div class=\"banta-top-sticky\">\r\n @if (!newestLast) {\r\n <button \r\n mat-button \r\n class=\"banta-nav\" \r\n [class.visible]=\"shouldShowNewMessageIndicator\" \r\n href=\"javascript:;\" \r\n (click)=\"showNewest($event)\"\r\n >\r\n <mat-icon>file_upload</mat-icon>\r\n Newest\r\n @if (heldMessages.length > 0) {\r\n <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n\r\n <button mat-button class=\"pager\" (click)=\"showPrevious()\" [class.visible]=\"shouldShowPrevious\" [disabled]=\"isLoadingMore\">\r\n <mat-icon>expand_less</mat-icon>\r\n {{ previousLabel }}\r\n </button>\r\n\r\n @for (message of messages; track message.id) {\r\n @if (!message.hidden) {\r\n <banta-comment\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 [readonly]=\"source?.readonly\"\r\n (click)=\"
|
|
8228
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: CommentViewComponent, selector: "banta-comment-view", inputs: { source: "source", maxMessages: "maxMessages", maxVisibleMessages: "maxVisibleMessages", newestLast: "newestLast", holdNewMessages: "holdNewMessages", showEmptyState: "showEmptyState", allowReplies: "allowReplies", enableHoldOnClick: "enableHoldOnClick", enableHoldOnScroll: "enableHoldOnScroll", customMenuItems: "customMenuItems", fixedHeight: "fixedHeight", selectedMessage: "selectedMessage", genericAvatarUrl: "genericAvatarUrl" }, outputs: { userSelected: "userSelected", reported: "reported", liked: "liked", unliked: "unliked", usernameSelected: "usernameSelected", avatarSelected: "avatarSelected", shared: "shared", deleted: "deleted", selected: "selected", messageEdited: "messageEdited", sortOrderChanged: "sortOrderChanged", filterModeChanged: "filterModeChanged" }, host: { properties: { "class.fixed-height": "this.fixedHeight" } }, viewQueries: [{ propertyName: "messageContainer", first: true, predicate: ["messageContainer"], descendants: true }, { propertyName: "commentsQuery", predicate: CommentComponent, descendants: true }], ngImport: i0, template: "<div class=\"banta-message-container\" #messageContainer>\r\n <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n <div class=\"banta-top-sticky\">\r\n @if (!newestLast) {\r\n <button \r\n mat-button \r\n class=\"banta-nav\" \r\n [class.visible]=\"shouldShowNewMessageIndicator\" \r\n href=\"javascript:;\" \r\n (click)=\"showNewest($event)\"\r\n >\r\n <mat-icon>file_upload</mat-icon>\r\n Newest\r\n @if (heldMessages.length > 0) {\r\n <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n\r\n <button mat-button class=\"pager\" (click)=\"showPrevious()\" [class.visible]=\"shouldShowPrevious\" [disabled]=\"isLoadingMore\">\r\n <mat-icon>expand_less</mat-icon>\r\n {{ previousLabel }}\r\n </button>\r\n\r\n @for (message of messages; track message.id) {\r\n @if (!message.hidden) {\r\n <banta-comment\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 [readonly]=\"source?.readonly\"\r\n (click)=\"messageClicked = 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 />\r\n <div class=\"banta-inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n <ng-content select=\".inline-replies\"></ng-content>\r\n </div>\r\n }\r\n } @empty {\r\n <div class=\"banta-empty-state\" *ngIf=\"showEmptyState\">\r\n Be the first to comment!\r\n </div>\r\n }\r\n\r\n <button mat-button class=\"pager\" (click)=\"showNext()\" [class.visible]=\"shouldShowNext\" [disabled]=\"isLoadingMore\">\r\n <mat-icon>expand_more</mat-icon>\r\n {{ nextLabel }}\r\n </button>\r\n\r\n <div class=\"banta-nav-point banta-bottom-sticky\">\r\n @if (newestLast) {\r\n <button \r\n [matBadge]=\"10\" matBadgeOverlap=\"false\"\r\n matBadgePosition=\"after\" matBadgeSize=\"large\" \r\n mat-button \r\n class=\"banta-nav\" \r\n [class.visible]=\"shouldShowNewMessageIndicator\" \r\n href=\"javascript:;\" \r\n (click)=\"showNewest($event)\"\r\n >\r\n <mat-icon>file_download</mat-icon>\r\n Newest\r\n @if (heldMessages.length > 0) {\r\n <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n\r\n <div class=\"banta-loading-more\" *ngIf=\"isLoadingMore\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n\r\n @if (showDebug) {\r\n <div style=\"color: #666\">\r\n ({{ previousMessages.length }} .. {{ messages.length }} .. {{ nextMessages.length }})\r\n\r\n dir={{newestLast ? '-1' : '1'}}\r\n v={{maxVisibleMessages}}, M={{maxMessages}}\r\n </div>\r\n }\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:.2s opacity ease-in}.banta-message-container{flex-grow:1;color:#111;background:#fff;padding:.5em 1em 3em .5em;opacity:1;transition:.5s opacity ease-in-out;position:relative}.banta-message-container.no-scroll{height:auto;overflow-y:visible}.banta-message-container.faded{opacity:.25}.banta-message-container .overlay{position:absolute;inset:0;z-index:10}:host.fixed-height .banta-message-container{overflow-y:auto}:host-context(.mat-dark-theme) .banta-message-container{color:#fff;background:#111}.banta-empty-state{text-align:center;margin:3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}button.banta-nav{position:absolute;right:.5em;z-index:10;text-align:center;opacity:0;transition:.4s opacity ease-in-out;pointer-events:none;border-radius:2em;background-color:#ddd}:host-context(.mat-dark-theme) button.banta-nav{background-color:#222;color:#fff}button.banta-nav span.count{background-color:#a93535;color:#fff;padding:4px 10px;border-radius:.5em;margin-left:.25em;font-size:90%}button.banta-nav.visible{opacity:1;pointer-events:initial}button.pager{appearance:none;border:none;width:100%;opacity:0;pointer-events:none;transition:.4s opacity ease-in-out}button.pager.visible{opacity:1;pointer-events:initial}.banta-top-sticky{position:sticky;top:.5em;z-index:10}.banta-bottom-sticky{position:sticky;bottom:3em;z-index:10}.banta-loading-more{padding:2em;text-align:center;margin:0 auto;width:fit-content}@media (max-width: 400px){.banta-message-container{padding:0 0 3em}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: CommentComponent, selector: "banta-comment", inputs: ["message", "customMenuItems", "showReplyAction", "maxLength", "permissions", "mine", "editing", "genericAvatarUrl", "readonly"], outputs: ["liked", "unliked", "selected", "edited", "deleted", "editStarted", "editEnded", "shared", "userSelected", "usernameSelected", "avatarSelected", "reported", "loaded"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] }); }
|
|
8227
8229
|
}
|
|
8228
8230
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CommentViewComponent, decorators: [{
|
|
8229
8231
|
type: Component,
|
|
8230
|
-
args: [{ selector: 'banta-comment-view', template: "<div class=\"banta-message-container\" #messageContainer>\r\n <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n <div class=\"banta-top-sticky\">\r\n @if (!newestLast) {\r\n <button \r\n mat-button \r\n class=\"banta-nav\" \r\n [class.visible]=\"shouldShowNewMessageIndicator\" \r\n href=\"javascript:;\" \r\n (click)=\"showNewest($event)\"\r\n >\r\n <mat-icon>file_upload</mat-icon>\r\n Newest\r\n @if (heldMessages.length > 0) {\r\n <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n\r\n <button mat-button class=\"pager\" (click)=\"showPrevious()\" [class.visible]=\"shouldShowPrevious\" [disabled]=\"isLoadingMore\">\r\n <mat-icon>expand_less</mat-icon>\r\n {{ previousLabel }}\r\n </button>\r\n\r\n @for (message of messages; track message.id) {\r\n @if (!message.hidden) {\r\n <banta-comment\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 [readonly]=\"source?.readonly\"\r\n (click)=\"
|
|
8232
|
+
args: [{ selector: 'banta-comment-view', template: "<div class=\"banta-message-container\" #messageContainer>\r\n <ng-content select=\"[data-before]\"></ng-content>\r\n\r\n <div class=\"banta-top-sticky\">\r\n @if (!newestLast) {\r\n <button \r\n mat-button \r\n class=\"banta-nav\" \r\n [class.visible]=\"shouldShowNewMessageIndicator\" \r\n href=\"javascript:;\" \r\n (click)=\"showNewest($event)\"\r\n >\r\n <mat-icon>file_upload</mat-icon>\r\n Newest\r\n @if (heldMessages.length > 0) {\r\n <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n\r\n <button mat-button class=\"pager\" (click)=\"showPrevious()\" [class.visible]=\"shouldShowPrevious\" [disabled]=\"isLoadingMore\">\r\n <mat-icon>expand_less</mat-icon>\r\n {{ previousLabel }}\r\n </button>\r\n\r\n @for (message of messages; track message.id) {\r\n @if (!message.hidden) {\r\n <banta-comment\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 [readonly]=\"source?.readonly\"\r\n (click)=\"messageClicked = 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 />\r\n <div class=\"banta-inline-replies-container\" *ngIf=\"selectedMessage === message\">\r\n <ng-content select=\".inline-replies\"></ng-content>\r\n </div>\r\n }\r\n } @empty {\r\n <div class=\"banta-empty-state\" *ngIf=\"showEmptyState\">\r\n Be the first to comment!\r\n </div>\r\n }\r\n\r\n <button mat-button class=\"pager\" (click)=\"showNext()\" [class.visible]=\"shouldShowNext\" [disabled]=\"isLoadingMore\">\r\n <mat-icon>expand_more</mat-icon>\r\n {{ nextLabel }}\r\n </button>\r\n\r\n <div class=\"banta-nav-point banta-bottom-sticky\">\r\n @if (newestLast) {\r\n <button \r\n [matBadge]=\"10\" matBadgeOverlap=\"false\"\r\n matBadgePosition=\"after\" matBadgeSize=\"large\" \r\n mat-button \r\n class=\"banta-nav\" \r\n [class.visible]=\"shouldShowNewMessageIndicator\" \r\n href=\"javascript:;\" \r\n (click)=\"showNewest($event)\"\r\n >\r\n <mat-icon>file_download</mat-icon>\r\n Newest\r\n @if (heldMessages.length > 0) {\r\n <span class=\"count\">{{ heldMessages.length | number }}</span>\r\n }\r\n </button>\r\n }\r\n </div>\r\n\r\n <div class=\"banta-loading-more\" *ngIf=\"isLoadingMore\">\r\n <mat-spinner></mat-spinner>\r\n </div>\r\n\r\n @if (showDebug) {\r\n <div style=\"color: #666\">\r\n ({{ previousMessages.length }} .. {{ messages.length }} .. {{ nextMessages.length }})\r\n\r\n dir={{newestLast ? '-1' : '1'}}\r\n v={{maxVisibleMessages}}, M={{maxMessages}}\r\n </div>\r\n }\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:.2s opacity ease-in}.banta-message-container{flex-grow:1;color:#111;background:#fff;padding:.5em 1em 3em .5em;opacity:1;transition:.5s opacity ease-in-out;position:relative}.banta-message-container.no-scroll{height:auto;overflow-y:visible}.banta-message-container.faded{opacity:.25}.banta-message-container .overlay{position:absolute;inset:0;z-index:10}:host.fixed-height .banta-message-container{overflow-y:auto}:host-context(.mat-dark-theme) .banta-message-container{color:#fff;background:#111}.banta-empty-state{text-align:center;margin:3em;color:#666}:host-context(.mat-dark-theme) .empty-state{color:#666}button.banta-nav{position:absolute;right:.5em;z-index:10;text-align:center;opacity:0;transition:.4s opacity ease-in-out;pointer-events:none;border-radius:2em;background-color:#ddd}:host-context(.mat-dark-theme) button.banta-nav{background-color:#222;color:#fff}button.banta-nav span.count{background-color:#a93535;color:#fff;padding:4px 10px;border-radius:.5em;margin-left:.25em;font-size:90%}button.banta-nav.visible{opacity:1;pointer-events:initial}button.pager{appearance:none;border:none;width:100%;opacity:0;pointer-events:none;transition:.4s opacity ease-in-out}button.pager.visible{opacity:1;pointer-events:initial}.banta-top-sticky{position:sticky;top:.5em;z-index:10}.banta-bottom-sticky{position:sticky;bottom:3em;z-index:10}.banta-loading-more{padding:2em;text-align:center;margin:0 auto;width:fit-content}@media (max-width: 400px){.banta-message-container{padding:0 0 3em}}\n"] }]
|
|
8231
8233
|
}], ctorParameters: () => [{ type: ChatBackendBase }, { type: i0.ElementRef }], propDecorators: { source: [{
|
|
8232
8234
|
type: Input
|
|
8233
8235
|
}], maxMessages: [{
|
|
@@ -9044,6 +9046,12 @@ class BantaCommentsComponent {
|
|
|
9044
9046
|
return;
|
|
9045
9047
|
setTimeout(async () => {
|
|
9046
9048
|
console.log(`[Banta/Comments] Subscribing to topic source '${topicID}'`);
|
|
9049
|
+
// If we are loading a shared comment, we must override the mode to be Newest/All
|
|
9050
|
+
// to ensure we can find the comment.
|
|
9051
|
+
if (this.sharedCommentID) {
|
|
9052
|
+
this._sortOrder = CommentsOrder.NEWEST;
|
|
9053
|
+
this._filterMode = FilterMode.ALL;
|
|
9054
|
+
}
|
|
9047
9055
|
this.source = await this.backend.getSourceForTopic(topicID, {
|
|
9048
9056
|
sortOrder: this.sortOrder,
|
|
9049
9057
|
filterMode: this.filterMode,
|
|
@@ -9197,8 +9205,18 @@ class BantaCommentsComponent {
|
|
|
9197
9205
|
get shared() { return this._shared.asObservable(); }
|
|
9198
9206
|
reloadSource() {
|
|
9199
9207
|
clearTimeout(this._reloadSourceTimeout);
|
|
9200
|
-
|
|
9201
|
-
|
|
9208
|
+
let showLoaderTimeout;
|
|
9209
|
+
showLoaderTimeout = setTimeout(() => {
|
|
9210
|
+
this.loading = true;
|
|
9211
|
+
this.loadingTitle = 'Applying filters...';
|
|
9212
|
+
this.loadingMessage = 'Applying your filters and sort order is taking more time than expected. Sit tight!';
|
|
9213
|
+
this.showLoadingScreen = true;
|
|
9214
|
+
}, 500);
|
|
9215
|
+
this._reloadSourceTimeout = setTimeout(async () => {
|
|
9216
|
+
await this.setSourceFromTopicID(this.topicID);
|
|
9217
|
+
clearTimeout(showLoaderTimeout);
|
|
9218
|
+
this.loading = false;
|
|
9219
|
+
this.showLoadingScreen = true;
|
|
9202
9220
|
});
|
|
9203
9221
|
}
|
|
9204
9222
|
get sortOrder() { return this._sortOrder; }
|
|
@@ -9304,16 +9322,21 @@ class BantaCommentsComponent {
|
|
|
9304
9322
|
await this.waitForThreadView();
|
|
9305
9323
|
await this.threadView.loadMessageInContext(message);
|
|
9306
9324
|
message = await thread.get(message.id);
|
|
9307
|
-
message
|
|
9308
|
-
|
|
9309
|
-
|
|
9310
|
-
|
|
9325
|
+
if (message) {
|
|
9326
|
+
message.transientState ??= {};
|
|
9327
|
+
message.transientState.highlighted = true;
|
|
9328
|
+
console.dir(message);
|
|
9329
|
+
await new Promise(r => setTimeout(r, 500));
|
|
9330
|
+
}
|
|
9311
9331
|
}
|
|
9312
9332
|
else {
|
|
9313
9333
|
// Make sure that this message is loaded and visible to the user
|
|
9314
9334
|
await this.commentView.loadMessageInContext(message);
|
|
9315
|
-
message
|
|
9316
|
-
message
|
|
9335
|
+
message = await source.get(message.id);
|
|
9336
|
+
if (message) {
|
|
9337
|
+
message.transientState ??= {};
|
|
9338
|
+
message.transientState.highlighted = true;
|
|
9339
|
+
}
|
|
9317
9340
|
}
|
|
9318
9341
|
this.loadingSharedComment = false;
|
|
9319
9342
|
await this.scrollToComment(id);
|
|
@@ -10895,12 +10918,22 @@ class ChatBackend extends ChatBackendBase {
|
|
|
10895
10918
|
super(...arguments);
|
|
10896
10919
|
this.options = inject(BANTA_SDK_OPTIONS);
|
|
10897
10920
|
this.platformId = inject(PLATFORM_ID);
|
|
10921
|
+
this.runId = v4();
|
|
10898
10922
|
}
|
|
10899
10923
|
get serviceUrl() {
|
|
10900
10924
|
return `${this.options?.serviceUrl ?? 'http://localhost:3422'}`;
|
|
10901
10925
|
}
|
|
10902
10926
|
async connectToService() {
|
|
10903
|
-
let
|
|
10927
|
+
let deviceId = v4();
|
|
10928
|
+
if (typeof localStorage !== 'undefined') {
|
|
10929
|
+
if (localStorage['banta-chat:deviceId']) {
|
|
10930
|
+
deviceId = localStorage['banta-chat:deviceId'];
|
|
10931
|
+
}
|
|
10932
|
+
else {
|
|
10933
|
+
localStorage['banta-chat:deviceId'] = deviceId;
|
|
10934
|
+
}
|
|
10935
|
+
}
|
|
10936
|
+
let socket = new DurableSocket(`${this.serviceUrl.replace(/^http/, 'ws')}/socket`, undefined, `${deviceId},${this.runId}`);
|
|
10904
10937
|
await new Promise((resolve, reject) => {
|
|
10905
10938
|
socket.onopen = () => {
|
|
10906
10939
|
resolve();
|