@banta/sdk 4.0.10 → 4.0.13
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/bundles/banta-sdk.umd.js +87 -52
- package/bundles/banta-sdk.umd.js.map +1 -1
- package/bundles/banta-sdk.umd.min.js +1 -1
- package/bundles/banta-sdk.umd.min.js.map +1 -1
- package/esm2015/lib/banta-sdk.module.js +4 -2
- package/esm2015/lib/chat-source-base.js +1 -1
- package/esm2015/lib/chat-source.js +4 -1
- package/esm2015/lib/comments/attachment-button/attachment-button.component.js +1 -1
- package/esm2015/lib/comments/banta-comments/banta-comments.component.js +44 -20
- package/esm2015/lib/comments/comment/comment.component.js +5 -4
- package/esm2015/lib/comments/comment-field/comment-field.component.js +8 -3
- package/esm2015/lib/comments/comment-view/comment-view.component.js +2 -8
- package/fesm2015/banta-sdk.js +61 -33
- package/fesm2015/banta-sdk.js.map +1 -1
- package/lib/chat-source-base.d.ts +1 -0
- package/lib/chat-source.d.ts +2 -0
- package/lib/comments/banta-comments/banta-comments.component.d.ts +10 -1
- package/lib/comments/comment/comment.component.d.ts +1 -0
- package/lib/comments/comment-field/comment-field.component.d.ts +2 -0
- package/lib/comments/comment-view/comment-view.component.d.ts +0 -1
- package/package.json +1 -1
package/fesm2015/banta-sdk.js
CHANGED
|
@@ -12,6 +12,7 @@ import { __awaiter, __decorate, __metadata } from 'tslib';
|
|
|
12
12
|
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
|
|
13
13
|
import { CommentsOrder, CDNProvider, SocketRPC, RpcEvent, DurableSocket } from '@banta/common';
|
|
14
14
|
import { ActivatedRoute } from '@angular/router';
|
|
15
|
+
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
|
|
15
16
|
import { MatMenuModule } from '@angular/material/menu';
|
|
16
17
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
17
18
|
import { TextFieldModule } from '@angular/cdk/text-field';
|
|
@@ -7764,11 +7765,11 @@ class CommentComponent {
|
|
|
7764
7765
|
.map(x => x.url));
|
|
7765
7766
|
}
|
|
7766
7767
|
avatarForUser(user) {
|
|
7768
|
+
let url = this.genericAvatarUrl;
|
|
7767
7769
|
if (user && user.avatarUrl) {
|
|
7768
|
-
|
|
7769
|
-
return `url(${url})`;
|
|
7770
|
+
url = user.avatarUrl;
|
|
7770
7771
|
}
|
|
7771
|
-
return
|
|
7772
|
+
return `url(${url})`;
|
|
7772
7773
|
}
|
|
7773
7774
|
}
|
|
7774
7775
|
CommentComponent.decorators = [
|
|
@@ -7799,6 +7800,7 @@ CommentComponent.propDecorators = {
|
|
|
7799
7800
|
editStarted: [{ type: Output }],
|
|
7800
7801
|
editEnded: [{ type: Output }],
|
|
7801
7802
|
shared: [{ type: Output }],
|
|
7803
|
+
genericAvatarUrl: [{ type: Input }],
|
|
7802
7804
|
commentId: [{ type: HostBinding, args: ['attr.data-comment-id',] }],
|
|
7803
7805
|
lightbox: [{ type: ViewChild, args: ['lightbox',] }]
|
|
7804
7806
|
};
|
|
@@ -8012,17 +8014,11 @@ class CommentViewComponent {
|
|
|
8012
8014
|
return true;
|
|
8013
8015
|
return false;
|
|
8014
8016
|
}
|
|
8015
|
-
avatarForUser(user) {
|
|
8016
|
-
let url = this.genericAvatarUrl;
|
|
8017
|
-
if (user && user.avatarUrl)
|
|
8018
|
-
url = user.avatarUrl;
|
|
8019
|
-
return `url(${url})`;
|
|
8020
|
-
}
|
|
8021
8017
|
}
|
|
8022
8018
|
CommentViewComponent.decorators = [
|
|
8023
8019
|
{ type: Component, args: [{
|
|
8024
8020
|
selector: 'banta-comment-view',
|
|
8025
|
-
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 [message]=\"message\"\r\n [mine]=\"currentUser?.id === message.user?.id\"\r\n [permissions]=\"source?.permissions\"\r\n
|
|
8021
|
+
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 [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 </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])\"></ng-content>\r\n</div>\r\n",
|
|
8026
8022
|
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}}"]
|
|
8027
8023
|
},] }
|
|
8028
8024
|
];
|
|
@@ -8056,10 +8052,11 @@ CommentViewComponent.propDecorators = {
|
|
|
8056
8052
|
* Comments component
|
|
8057
8053
|
*/
|
|
8058
8054
|
class BantaCommentsComponent {
|
|
8059
|
-
constructor(backend, elementRef, activatedRoute) {
|
|
8055
|
+
constructor(backend, elementRef, activatedRoute, matSnackBar) {
|
|
8060
8056
|
this.backend = backend;
|
|
8061
8057
|
this.elementRef = elementRef;
|
|
8062
8058
|
this.activatedRoute = activatedRoute;
|
|
8059
|
+
this.matSnackBar = matSnackBar;
|
|
8063
8060
|
// Loading Screen
|
|
8064
8061
|
this._loadingMessage = '';
|
|
8065
8062
|
this.loadingMessageVisible = false;
|
|
@@ -8088,6 +8085,12 @@ class BantaCommentsComponent {
|
|
|
8088
8085
|
this._shared = new Subject();
|
|
8089
8086
|
this._usernameSelected = new Subject();
|
|
8090
8087
|
this._avatarSelected = new Subject();
|
|
8088
|
+
/**
|
|
8089
|
+
* Track whether we created this source. If we did not (ie it was passed in from the caller),
|
|
8090
|
+
* then we are not responsible for calling close(). If we do own it though, we will call close()
|
|
8091
|
+
* when we are done with it.
|
|
8092
|
+
*/
|
|
8093
|
+
this._sourceIsOwned = false;
|
|
8091
8094
|
this._subs = new Subscription();
|
|
8092
8095
|
this._sortOrder = CommentsOrder.NEWEST;
|
|
8093
8096
|
this.selectedMessageVisible = false;
|
|
@@ -8099,7 +8102,8 @@ class BantaCommentsComponent {
|
|
|
8099
8102
|
this.permissionDeniedLabel = 'Send';
|
|
8100
8103
|
this.postCommentLabel = 'Post a comment';
|
|
8101
8104
|
this.postReplyLabel = 'Post a reply';
|
|
8102
|
-
this.allowAttachments =
|
|
8105
|
+
this.allowAttachments = true;
|
|
8106
|
+
this.genericAvatarUrl = `https://gravatar.com/avatar/${Date.now().toString(16)}?s=512&d=robohash`;
|
|
8103
8107
|
this.participants = [];
|
|
8104
8108
|
this.hashtags = [
|
|
8105
8109
|
{ hashtag: 'error', description: 'Cause an error' },
|
|
@@ -8177,20 +8181,10 @@ class BantaCommentsComponent {
|
|
|
8177
8181
|
}
|
|
8178
8182
|
setSourceFromTopicID(topicID) {
|
|
8179
8183
|
return __awaiter(this, void 0, void 0, function* () {
|
|
8180
|
-
if (this._source) {
|
|
8181
|
-
this._source.close();
|
|
8182
|
-
this._source = null;
|
|
8183
|
-
}
|
|
8184
8184
|
setTimeout(() => __awaiter(this, void 0, void 0, function* () {
|
|
8185
8185
|
console.log(`[banta-comments] Subscribing to topic source '${topicID}'`);
|
|
8186
|
-
this.
|
|
8187
|
-
|
|
8188
|
-
this.navigateToSharedComment(this.sharedCommentID);
|
|
8189
|
-
this.sharedCommentID = null;
|
|
8190
|
-
}
|
|
8191
|
-
this._source.messageReceived.subscribe(m => this.addParticipant(m));
|
|
8192
|
-
this._source.messageSent.subscribe(m => this.addParticipant(m));
|
|
8193
|
-
this._source.messages.forEach(m => this.addParticipant(m));
|
|
8186
|
+
this.source = yield this.backend.getSourceForTopic(topicID, { sortOrder: this.sortOrder });
|
|
8187
|
+
this._sourceIsOwned = true;
|
|
8194
8188
|
}));
|
|
8195
8189
|
});
|
|
8196
8190
|
}
|
|
@@ -8248,10 +8242,34 @@ class BantaCommentsComponent {
|
|
|
8248
8242
|
}
|
|
8249
8243
|
get source() { return this._source; }
|
|
8250
8244
|
set source(value) {
|
|
8245
|
+
var _a;
|
|
8246
|
+
if (this._source && this._sourceIsOwned) {
|
|
8247
|
+
this._source.close();
|
|
8248
|
+
(_a = this._sourceSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
8249
|
+
this._source = null;
|
|
8250
|
+
this.participants = [];
|
|
8251
|
+
}
|
|
8251
8252
|
this._source = value;
|
|
8252
|
-
|
|
8253
|
-
|
|
8254
|
-
|
|
8253
|
+
this._sourceIsOwned = false; // Assume we don't own this source.
|
|
8254
|
+
this._sourceSubscription = new Subscription();
|
|
8255
|
+
if (value) {
|
|
8256
|
+
if (this.sharedCommentID) {
|
|
8257
|
+
this.navigateToSharedComment(this.sharedCommentID);
|
|
8258
|
+
this.sharedCommentID = null;
|
|
8259
|
+
}
|
|
8260
|
+
this._source.messages.forEach(m => this.addParticipant(m));
|
|
8261
|
+
this._sourceSubscription.add(this._source.messageReceived.subscribe(m => this.addParticipant(m)));
|
|
8262
|
+
this._sourceSubscription.add(this._source.messageSent.subscribe(m => this.addParticipant(m)));
|
|
8263
|
+
this._sourceSubscription.add(this._source.messageUpdated.subscribe(msg => {
|
|
8264
|
+
var _a;
|
|
8265
|
+
console.log(`comments received message: `, msg);
|
|
8266
|
+
if (msg.id === ((_a = this.selectedMessage) === null || _a === void 0 ? void 0 : _a.id) && msg.hidden) {
|
|
8267
|
+
this.unselectMessage();
|
|
8268
|
+
this.matSnackBar.open("The thread you were viewing was removed.", undefined, {
|
|
8269
|
+
duration: 2500
|
|
8270
|
+
});
|
|
8271
|
+
}
|
|
8272
|
+
}));
|
|
8255
8273
|
}
|
|
8256
8274
|
}
|
|
8257
8275
|
get topicID() { return this._topicID; }
|
|
@@ -8496,14 +8514,15 @@ class BantaCommentsComponent {
|
|
|
8496
8514
|
BantaCommentsComponent.decorators = [
|
|
8497
8515
|
{ type: Component, args: [{
|
|
8498
8516
|
selector: 'banta-comments',
|
|
8499
|
-
template: "<ng-container *ngIf=\"loading\">\r\n <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n <h1>Loading Comments</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\">\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 (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 [source]=\"selectedMessageThread\"\r\n [allowReplies]=\"false\"\r\n [fixedHeight]=\"false\"\r\n [showEmptyState]=\"false\"\r\n [newestLast]=\"true\"\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 (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 >\r\n <ng-content select=\".reply-send-options\"></ng-content>\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]=\"source?.permissions?.canPost\"\r\n [hashtags]=\"hashtags\"\r\n [participants]=\"participants\"\r\n [label]=\"postCommentLabel\"\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 >\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 <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 (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 (deleted)=\"deleteMessage($event)\"\r\n ></banta-comment-view>\r\n </div>\r\n</ng-container>\r\n",
|
|
8517
|
+
template: "<ng-container *ngIf=\"loading\">\r\n <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n <h1>Loading Comments</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\">\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 [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 [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 (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-content select=\".reply-send-options\"></ng-content>\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]=\"source?.permissions?.canPost\"\r\n [hashtags]=\"hashtags\"\r\n [participants]=\"participants\"\r\n [label]=\"postCommentLabel\"\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 <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 (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 (deleted)=\"deleteMessage($event)\"\r\n ></banta-comment-view>\r\n </div>\r\n</ng-container>\r\n",
|
|
8500
8518
|
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:4em}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}@media (max-width:500px){.focused .replies{margin-left:0}}.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}@media (max-width:450px){banta-comment-sort{margin:0;width:100%}}"]
|
|
8501
8519
|
},] }
|
|
8502
8520
|
];
|
|
8503
8521
|
BantaCommentsComponent.ctorParameters = () => [
|
|
8504
8522
|
{ type: ChatBackendBase },
|
|
8505
8523
|
{ type: ElementRef },
|
|
8506
|
-
{ type: ActivatedRoute }
|
|
8524
|
+
{ type: ActivatedRoute },
|
|
8525
|
+
{ type: MatSnackBar }
|
|
8507
8526
|
];
|
|
8508
8527
|
BantaCommentsComponent.propDecorators = {
|
|
8509
8528
|
loadingMessages: [{ type: Input }],
|
|
@@ -8627,6 +8646,10 @@ class CommentFieldComponent {
|
|
|
8627
8646
|
this.autoCompleteSelected = 0;
|
|
8628
8647
|
this.chatMessageAttachments = [];
|
|
8629
8648
|
}
|
|
8649
|
+
get userAvatarUrl() {
|
|
8650
|
+
var _a;
|
|
8651
|
+
return ((_a = this.user) === null || _a === void 0 ? void 0 : _a.avatarUrl) || this.genericAvatarUrl;
|
|
8652
|
+
}
|
|
8630
8653
|
get permissionDeniedError() {
|
|
8631
8654
|
return this._permissionDeniedError;
|
|
8632
8655
|
}
|
|
@@ -8840,8 +8863,8 @@ class CommentFieldComponent {
|
|
|
8840
8863
|
CommentFieldComponent.decorators = [
|
|
8841
8864
|
{ type: Component, args: [{
|
|
8842
8865
|
selector: 'banta-comment-field',
|
|
8843
|
-
template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n <div class=\"avatar-container\">\r\n <a href=\"javascript:;\"\r\n class=\"avatar\"\r\n (click)=\"showEditAvatar()\"\r\n [style.background-image]=\"'url(' +
|
|
8844
|
-
styles: ["@-webkit-keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}:host{margin:0 2em 0 0;display:block;-webkit-animation-name:comment-field-appear;animation-name:comment-field-appear;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end;flex-shrink:0}.avatar-container .avatar{width:48px;height:48px;background
|
|
8866
|
+
template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n <div class=\"avatar-container\">\r\n <a href=\"javascript:;\"\r\n class=\"avatar\"\r\n (click)=\"showEditAvatar()\"\r\n [style.background-image]=\"'url(' + userAvatarUrl + ')'\"\r\n ></a>\r\n </div>\r\n <div class=\"text-container\">\r\n <div class=\"field-container\">\r\n <div class=\"field-row\">\r\n <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n <mat-label>{{label}}</mat-label>\r\n <textarea\r\n #textarea\r\n name=\"message\"\r\n [placeholder]=\"placeholder\"\r\n matInput\r\n cdkTextareaAutosize\r\n (keydown)=\"onKeyDown($event)\"\r\n (blur)=\"onBlur()\"\r\n [disabled]=\"sending\"\r\n [(ngModel)]=\"text\"></textarea>\r\n </mat-form-field>\r\n <div class=\"options-line\">\r\n <mat-spinner *ngIf=\"sending\" class=\"icon loading\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n <div *ngIf=\"sendError\" class=\"error-message\" [class.expanded]=\"expandError\" [matTooltip]=\"sendError.message\" (click)=\"alertError()\">\r\n <mat-icon *ngIf=\"sendError\">error</mat-icon>\r\n {{sendError.message}}\r\n </div>\r\n <div class=\"spacer\"></div>\r\n <div class=\"custom\">\r\n <ng-content></ng-content>\r\n </div>\r\n <banta-attachment-button (addedAttachment)=\"addedAttachment($event)\" *ngIf=\"allowAttachments\"></banta-attachment-button>\r\n <emoji-selector-button (selected)=\"insertEmoji($event)\"></emoji-selector-button>\r\n </div>\r\n \r\n </div>\r\n <div #autocompleteContainer class=\"autocomplete-container\">\r\n <div #autocomplete class=\"autocomplete\" [class.visible]=\"autocompleteVisible\">\r\n\r\n <div>\r\n <strong>{{completionPrefix}}</strong>...\r\n </div>\r\n <a\r\n mat-button\r\n *ngFor=\"let option of autocompleteOptions; index as index\"\r\n (click)=\"activateAutoComplete(option)\"\r\n [class.active]=\"autoCompleteSelected === index\"\r\n >\r\n {{option.label}}\r\n </a>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"chatMessageAttachments && chatMessageAttachments.length\" class=\"message-attachments-container\">\r\n <div *ngFor=\"let attachment of chatMessageAttachments; index as attachmentIndex\"\r\n class=\"message-attachment\">\r\n <button (click)=\"removeAttachment(attachmentIndex)\" mat-mini-fab color=\"primary\" class=\"remove-img\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <img [src]=\"attachment.url\" alt=\"Message Attachment\">\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n <ng-container *ngIf=\"!user\">\r\n <button\r\n mat-raised-button\r\n color=\"primary\"\r\n type=\"button\"\r\n (click)=\"showSignIn()\"\r\n >{{signInLabel}}</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"user\">\r\n <button\r\n mat-raised-button\r\n class=\"send\"\r\n color=\"primary\"\r\n [disabled]=\"canComment && ((!text && !chatMessageAttachments.length) || sending)\"\r\n >\r\n <ng-container *ngIf=\"canComment\">\r\n <mat-icon *ngIf=\"!sending\">chevron_right</mat-icon>\r\n <mat-spinner *ngIf=\"sending\" class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n </ng-container>\r\n <span class=\"label\">\r\n <ng-container *ngIf=\"!canComment\">\r\n {{permissionDeniedLabel}}\r\n </ng-container>\r\n <ng-container *ngIf=\"canComment\">\r\n <ng-container *ngIf=\"!sending\">\r\n {{sendLabel}}\r\n </ng-container>\r\n <ng-container *ngIf=\"sending\">\r\n {{sendingLabel}}\r\n </ng-container>\r\n </ng-container>\r\n </span>\r\n </button>\r\n </ng-container>\r\n </div>\r\n</form>",
|
|
8867
|
+
styles: ["@-webkit-keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}:host{margin:0 2em 0 0;display:block;-webkit-animation-name:comment-field-appear;animation-name:comment-field-appear;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end;flex-shrink:0}.avatar-container .avatar{width:48px;height:48px;background:#000;border-radius:100%;background-size:cover;background-repeat:no-repeat;background-position:50%;margin-top:.75em;margin-right:.75em}form{display:flex;padding:.5em;align-items:center}form .text-container{position:relative;display:flex;flex-grow:1;min-width:0}form .text-container textarea{font-size:14pt;width:100%}form .text-container textarea[disabled]{opacity:.5}form .text-container mat-spinner.loading{position:absolute;left:.5em;bottom:.5em}form .text-container .options-line{display:flex;align-items:center}form .text-container .options-line>*{flex-shrink:0}form .text-container .options-line .error-message{left:.5em;bottom:.5em;color:#683333;overflow-x:hidden;max-width:1.5em;white-space:nowrap;transition:max-width 2s ease-in-out;text-overflow:ellipsis;overflow:hidden;flex-shrink:1}form .text-container .options-line .error-message.expanded,form .text-container .options-line .error-message:hover{max-width:100%}form .text-container .options-line .error-message mat-icon{vertical-align:middle}form input[type=text]{background:#000;color:#fff;border:1px solid #333;width:100%;height:1em}form .actions{margin-left:1em;flex-shrink:0}form button{display:block;margin:0 0 0 auto}form.new-message{display:flex;align-items:flex-start;min-width:0}form.new-message .field-container{flex-grow:1;display:flex;flex-direction:column;min-width:0}form.new-message mat-form-field{width:100%}form.new-message mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}form.new-message button{margin:1.25em 0 0}button.send{min-width:9em}textarea{max-height:7em}.autocomplete-container{width:calc(100% - 2em);position:relative;pointer-events:none;top:-2em}.autocomplete{visibility:hidden;pointer-events:none;position:absolute;background:#333;padding:.5em;display:flex;flex-direction:column;z-index:100}.autocomplete.visible{visibility:visible;pointer-events:auto}.autocomplete a{width:100%;text-align:left}.autocomplete a.active{background:#555}@media (max-width:500px){:host{margin:0}.avatar-container{width:auto;flex-shrink:0}.avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}button.send{min-width:auto;margin-top:1.5em}button.send .label{display:none}}.message-attachments-container{display:flex;gap:20px}.message-attachments-container .message-attachment{width:300px;position:relative}.message-attachments-container .message-attachment img{width:300px;border-radius:10px}.message-attachments-container .message-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}.field-row{position:relative}"]
|
|
8845
8868
|
},] }
|
|
8846
8869
|
];
|
|
8847
8870
|
CommentFieldComponent.propDecorators = {
|
|
@@ -8864,6 +8887,7 @@ CommentFieldComponent.propDecorators = {
|
|
|
8864
8887
|
textareaEl: [{ type: ViewChild, args: ['textarea',] }],
|
|
8865
8888
|
hashtags: [{ type: Input }],
|
|
8866
8889
|
participants: [{ type: Input }],
|
|
8890
|
+
genericAvatarUrl: [{ type: Input }],
|
|
8867
8891
|
permissionDeniedError: [{ type: Output }],
|
|
8868
8892
|
submit: [{ type: Input }]
|
|
8869
8893
|
};
|
|
@@ -8942,7 +8966,7 @@ AttachmentButtonComponent.decorators = [
|
|
|
8942
8966
|
{ type: Component, args: [{
|
|
8943
8967
|
selector: 'banta-attachment-button',
|
|
8944
8968
|
template: "<button matTooltip=\"Add an image or gif\" #button type=\"button\" mat-icon-button (click)=\"show()\">\r\n\t<mat-icon>image</mat-icon>\r\n</button>\r\n<input style=\"display: none;\" #fileUpload [multiple]=\"false\" (change)=\"fileChange($event)\" type=\"file\" >",
|
|
8945
|
-
styles: [""]
|
|
8969
|
+
styles: ["button{color:#666}"]
|
|
8946
8970
|
},] }
|
|
8947
8971
|
];
|
|
8948
8972
|
AttachmentButtonComponent.ctorParameters = () => [
|
|
@@ -8997,6 +9021,7 @@ class ChatSource extends SocketRPC {
|
|
|
8997
9021
|
this.state = 'connecting';
|
|
8998
9022
|
this.messageMap = new Map();
|
|
8999
9023
|
this._messageReceived = new Subject();
|
|
9024
|
+
this._messageUpdated = new Subject();
|
|
9000
9025
|
this._messageSent = new Subject();
|
|
9001
9026
|
this.messages = [];
|
|
9002
9027
|
this.ready = new Promise(resolve => this.markReady = resolve);
|
|
@@ -9067,6 +9092,7 @@ class ChatSource extends SocketRPC {
|
|
|
9067
9092
|
onChatMessage(message) {
|
|
9068
9093
|
if (this.messageMap.has(message.id)) {
|
|
9069
9094
|
Object.assign(this.messageMap.get(message.id), message);
|
|
9095
|
+
this._messageUpdated.next(message);
|
|
9070
9096
|
}
|
|
9071
9097
|
else if (!message.hidden) {
|
|
9072
9098
|
// Only process non-hidden messages through here.
|
|
@@ -9077,6 +9103,7 @@ class ChatSource extends SocketRPC {
|
|
|
9077
9103
|
}
|
|
9078
9104
|
}
|
|
9079
9105
|
get messageReceived() { return this._messageReceived.asObservable(); }
|
|
9106
|
+
get messageUpdated() { return this._messageUpdated.asObservable(); }
|
|
9080
9107
|
get messageSent() { return this._messageSent.asObservable(); }
|
|
9081
9108
|
send(message) {
|
|
9082
9109
|
return __awaiter(this, void 0, void 0, function* () {
|
|
@@ -9235,7 +9262,8 @@ BantaSdkModule.decorators = [
|
|
|
9235
9262
|
MatDialogModule,
|
|
9236
9263
|
MatFormFieldModule,
|
|
9237
9264
|
MatInputModule,
|
|
9238
|
-
MatProgressSpinnerModule
|
|
9265
|
+
MatProgressSpinnerModule,
|
|
9266
|
+
MatSnackBarModule
|
|
9239
9267
|
],
|
|
9240
9268
|
declarations: [
|
|
9241
9269
|
BantaComponent,
|