@banta/sdk 4.4.1 → 4.4.2

package/fesm2015/banta-sdk.js

@@ -1,6 +1,6 @@
 import { Observable, Subject, BehaviorSubject, Subscription } from 'rxjs';
 import { publish } from 'rxjs/operators';
-import { Component, Input, ViewChild, Pipe, Output, HostBinding, NgModule, ElementRef, Injectable, Directive, NgZone, ContentChild, TemplateRef, Inject } from '@angular/core';
+import { Component, Input, ViewChild, Pipe, Output, HostBinding, NgModule, ElementRef, Directive, NgZone, ContentChild, TemplateRef, Injectable, Inject } from '@angular/core';
 import { marked, Renderer } from 'marked';
 import { sanitize } from 'dompurify';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -251,6 +251,15 @@ class BantaAttachmentComponent {
         this.removed = new Subject();
         this.activated = new Subject();
     }
+    ngOnInit() {
+        if (typeof window !== 'undefined') {
+            setTimeout(() => {
+                if (!window['twttr'])
+                    return;
+                window['twttr'].widgets.load();
+            }, 100);
+        }
+    }
     activate() {
         this.activated.next();
     }
@@ -274,14 +283,31 @@ class BantaAttachmentComponent {
             return true;
         return false;
     }
+    get hasFrame() {
+        if (!this.attachment)
+            return false;
+        return this.attachment.type === 'iframe' || (this.attachment.type === 'card'
+            && this.attachment.card.player);
+    }
+    get frameUrl() {
+        if (!this.attachment)
+            return undefined;
+        if (this.attachment.type === 'iframe') {
+            return this.attachment.url;
+        }
+        else if (this.attachment.type === 'card') {
+            return this.attachment.card.player;
+        }
+    }
 }
 BantaAttachmentComponent.decorators = [
     { type: Component, args: [{
                 selector: 'banta-attachment',
-                template: "<button type=\"button\" (click)=\"remove()\" mat-mini-fab color=\"primary\" class=\"remove-button\" *ngIf=\"editing\">\r\n    <mat-icon>close</mat-icon>\r\n</button>\r\n\r\n<ng-container *ngIf=\"isError\">\r\n    <mat-icon class=\"error\">close</mat-icon>\r\n    <em class=\"error\">{{theErrorMessage}}</em>\r\n</ng-container>\r\n<ng-container *ngIf=\"!isError\">\r\n    <ng-container *ngIf=\"isLoading\">\r\n        <mat-spinner></mat-spinner>\r\n        <em>{{loadingMessage}}</em>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!isLoading\">\r\n        <iframe \r\n            *ngIf=\"attachment.type === 'iframe'\"  \r\n            sandbox=\"allow-scripts allow-popups allow-same-origin allow-presentation\" \r\n            [src]=\"attachment.url | trustResourceUrl\"></iframe>\r\n        <a *ngIf=\"attachment.type === 'card'\" class=\"card\" [href]=\"attachment.url\" target=\"_blank\">\r\n            <img \r\n                *ngIf=\"attachment.card.image\"\r\n                class=\"thumbnail\" \r\n                [src]=\"attachment.card.image\"\r\n                />\r\n            <div class=\"description\">\r\n                <h1>{{attachment.card.title}}</h1>\r\n                {{attachment.card.description}}\r\n            </div>\r\n        </a>\r\n        <a class=\"image-attachment\" *ngIf=\"isImageAttachment\" href=\"javascript:;\" (click)=\"activate()\">\r\n            <img [src]=\"attachment.url\" alt=\"Image Attachment\">\r\n        </a>\r\n    </ng-container>\r\n</ng-container>",
-                styles: [":host{position:relative;display:block}:host.loading{outline:1px solid #333;padding:1em 0;width:300px;text-align:center}:host.loading mat-spinner{display:block;margin:0 auto .5em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}a.card{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:1em;box-sizing:border-box;background-color:#191919}a.card img{width:300px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}a.card h1{margin:0;font-size:30px}.remove-button{position:absolute;right:10px;top:10px;margin:0;z-index:1}a.image-attachment{width:300px;position:relative;text-align:center}a.image-attachment.with-border{outline:1px solid #333;padding:1em 0}a.image-attachment mat-spinner{display:block;margin:0 auto .5em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}a.image-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}a.image-attachment .error{color:#b76363}a.image-attachment img{width:300px;border-radius:10px;max-width:100%;max-height:20em;-o-object-fit:cover;object-fit:cover}iframe{border:none;width:100%;aspect-ratio:16/9}"]
+                template: "<button type=\"button\" (click)=\"remove()\" mat-mini-fab color=\"primary\" class=\"remove-button\" *ngIf=\"editing\">\r\n    <mat-icon>close</mat-icon>\r\n</button>\r\n\r\n<ng-container *ngIf=\"isError\">\r\n    <mat-icon class=\"error\">close</mat-icon>\r\n    <em class=\"error\">{{theErrorMessage}}</em>\r\n</ng-container>\r\n<ng-container *ngIf=\"!isError\">\r\n    <ng-container *ngIf=\"isLoading\">\r\n        <mat-spinner></mat-spinner>\r\n        <em>{{loadingMessage}}</em>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!isLoading\">\r\n        <iframe *ngIf=\"hasFrame\"\r\n            sandbox=\"allow-scripts allow-popups allow-same-origin allow-presentation\" \r\n            [src]=\"frameUrl | trustResourceUrl\"></iframe>\r\n        <a *ngIf=\"attachment.type === 'card'\" class=\"card\" [href]=\"attachment.url\" target=\"_blank\" [class.has-image]=\"attachment.card.image\">\r\n            <img \r\n                *ngIf=\"attachment.card.image\"\r\n                class=\"thumbnail\" \r\n                [src]=\"attachment.card.image\"\r\n                />\r\n            <div class=\"description\">\r\n                <h1>{{attachment.card.title}}</h1>\r\n                <div>\r\n                    {{attachment.card.description}}\r\n                </div>\r\n                <cite>{{attachment.card.url}}</cite>\r\n            </div>\r\n        </a>\r\n        <a class=\"image-attachment\" *ngIf=\"isImageAttachment\" href=\"javascript:;\" (click)=\"activate()\">\r\n            <img [src]=\"attachment.url\" alt=\"Image Attachment\">\r\n        </a>\r\n        <blockquote *ngIf=\"attachment.type === 'tweet'\" \r\n            class=\"twitter-tweet\">\r\n                <p lang=\"en\" dir=\"ltr\"></p>\r\n                <a href=\"https://twitter.com/seldo/status/1562553608083714050?ref_src=twsrc%5Etfw\"></a>\r\n        </blockquote>\r\n    </ng-container>\r\n</ng-container>",
+                styles: [":host{position:relative;display:block}:host.loading{outline:1px solid #333;padding:1em 0;width:300px;text-align:center}:host.loading mat-spinner{display:block;margin:0 auto .5em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}a.card{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:1em;box-sizing:border-box;background-color:#191919;margin:1em 0}a.card img{width:250px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}a.card.has-image h1{font-size:22px}a.card h1{min-width:0;margin:0 0 .5em;font-size:26px}a.card cite{min-width:0;opacity:.75;margin-top:1em;display:block;font-size:90%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}a.card .description{min-width:0}.remove-button{position:absolute;right:10px;top:10px;margin:0;z-index:1}a.image-attachment{width:300px;position:relative;text-align:center}a.image-attachment.with-border{outline:1px solid #333;padding:1em 0}a.image-attachment mat-spinner{display:block;margin:0 auto .5em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}a.image-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}a.image-attachment .error{color:#b76363}a.image-attachment img{width:300px;border-radius:10px;max-width:100%;max-height:20em;-o-object-fit:cover;object-fit:cover}iframe{border:none;width:100%;aspect-ratio:16/9}"]
             },] }
 ];
+BantaAttachmentComponent.ctorParameters = () => [];
 BantaAttachmentComponent.propDecorators = {
     attachment: [{ type: Input }],
     loading: [{ type: Input }],
@@ -7124,99 +7150,11 @@ ChatMessageComponent.propDecorators = {
     upvoted: [{ type: Output }]
 };
 
-const URL_REGEX = new RegExp('(?!mailto:)(?:(?:http|https|ftp)://)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?', 'ig');
-class UrlAttachmentScraper {
-    findFragments(message) {
-        var _a;
-        // If a message already has a URL attachment, don't add another one.
-        if (message.attachments && message.attachments.filter(x => x.type === 'url').length > 0)
-            return null;
-        return (Array.from((_a = message.message.match(URL_REGEX)) !== null && _a !== void 0 ? _a : []))
-            .reduce((a, item) => (a.includes(item) ? undefined : a.push(item), a), [])
-            .map(url => ({
-            text: url,
-            offset: message.message.indexOf(url),
-            type: 'url'
-        }));
-    }
-}
-class GiphyAttachmentResolver {
-    resolveFragment(message, fragment) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            if (fragment.type === 'url' && fragment.text.startsWith('https://giphy.com/gifs')) {
-                let gifId = (_a = /[^-\/]+$/.exec(fragment.text)) === null || _a === void 0 ? void 0 : _a.toString();
-                if (!gifId)
-                    return null;
-                return {
-                    type: 'iframe',
-                    url: `https://giphy.com/embed/${gifId}`,
-                    style: 'inline'
-                };
-            }
-            return null;
-        });
-    }
-}
-class YouTubeAttachmentResolver {
-    resolveFragment(message, fragment) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (fragment.type !== 'url')
-                return null;
-            let videoId;
-            if (fragment.text.match(/https?:\/\/(www\.)?youtube.com\/watch\?v=/)) {
-                let match = /watch\?v=([^&]+)/.exec(fragment.text);
-                if (match) {
-                    videoId = match[1];
-                }
-            }
-            if (videoId) {
-                return {
-                    type: 'iframe',
-                    url: `https://www.youtube.com/embed/${videoId}`,
-                    style: 'block'
-                };
-            }
-            return null;
-        });
-    }
-}
-class UrlAttachmentResolver {
-    constructor(backend) {
-        this.backend = backend;
-    }
-    resolveFragment(message, fragment) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (fragment.type !== 'url')
-                return null;
-            let urlCard = yield this.backend.getCardForUrl(fragment.text);
-            if (urlCard) {
-                return {
-                    type: 'card',
-                    url: fragment.text,
-                    card: urlCard,
-                    style: 'block'
-                };
-            }
-        });
-    }
-}
-UrlAttachmentResolver.decorators = [
-    { type: Injectable }
-];
-UrlAttachmentResolver.ctorParameters = () => [
-    { type: ChatBackendBase }
-];
-
 class ChatBackendBase {
     constructor() {
         this._userChanged = new BehaviorSubject(null);
         this._attachmentScrapers = [];
         this._attachmentResolvers = [];
-        this.registerAttachmentScraper(new UrlAttachmentScraper());
-        this.registerAttachmentResolver(new GiphyAttachmentResolver());
-        this.registerAttachmentResolver(new YouTubeAttachmentResolver());
-        this.registerAttachmentResolver(new UrlAttachmentResolver(this));
     }
     get userChanged() {
         return this._userChanged;
@@ -9664,7 +9602,123 @@ ChatBackend.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Inject, args: [BANTA_SDK_OPTIONS,] }] }
 ];
 
+const URL_REGEX = new RegExp('(?!mailto:)(?:(?:http|https|ftp)://)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?', 'ig');
+class UrlAttachmentScraper {
+    findFragments(message) {
+        var _a;
+        // If a message already has a URL attachment, don't add another one.
+        if (message.attachments && message.attachments.filter(x => x.type === 'url').length > 0)
+            return null;
+        return (Array.from((_a = message.message.match(URL_REGEX)) !== null && _a !== void 0 ? _a : []))
+            .reduce((a, item) => (a.includes(item) ? undefined : a.push(item), a), [])
+            .map(url => ({
+            text: url,
+            offset: message.message.indexOf(url),
+            type: 'url'
+        }));
+    }
+}
+class UrlAttachmentResolver {
+    constructor(backend) {
+        this.backend = backend;
+    }
+    resolveFragment(message, fragment) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (fragment.type !== 'url')
+                return null;
+            let urlCard = yield this.backend.getCardForUrl(fragment.text);
+            if (urlCard) {
+                return {
+                    type: 'card',
+                    url: fragment.text,
+                    card: urlCard,
+                    style: 'block'
+                };
+            }
+        });
+    }
+}
+UrlAttachmentResolver.decorators = [
+    { type: Injectable }
+];
+UrlAttachmentResolver.ctorParameters = () => [
+    { type: ChatBackendBase }
+];
+
+class YouTubeAttachmentResolver {
+    resolveFragment(message, fragment) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (fragment.type !== 'url')
+                return null;
+            let videoId;
+            if (fragment.text.match(/https?:\/\/(www\.)?youtube.com\/watch\?v=/)) {
+                let match = /watch\?v=([^&]+)/.exec(fragment.text);
+                if (match) {
+                    videoId = match[1];
+                }
+            }
+            if (videoId) {
+                return {
+                    type: 'iframe',
+                    url: `https://www.youtube.com/embed/${videoId}`,
+                    style: 'block'
+                };
+            }
+            return null;
+        });
+    }
+}
+
+class GiphyAttachmentResolver {
+    resolveFragment(message, fragment) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (fragment.type === 'url' && fragment.text.startsWith('https://giphy.com/gifs')) {
+                let gifId = (_a = /[^-\/]+$/.exec(fragment.text)) === null || _a === void 0 ? void 0 : _a.toString();
+                if (!gifId)
+                    return null;
+                return {
+                    type: 'iframe',
+                    url: `https://giphy.com/embed/${gifId}`,
+                    style: 'inline'
+                };
+            }
+            return null;
+        });
+    }
+}
+
+class TweetAttachmentResolver {
+    resolveFragment(message, fragment) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (fragment.type === 'url' && fragment.text.startsWith('https://twitter.com/')) {
+                return {
+                    type: 'tweet',
+                    url: fragment.text,
+                    style: 'block'
+                };
+            }
+            return null;
+        });
+    }
+}
+
 class BantaSdkModule {
+    constructor(chatBackend) {
+        if (typeof window !== 'undefined') {
+            if (!document.querySelector('script[src="https://platform.twitter.com/widgets.js"]')) {
+                let script = document.createElement('script');
+                script.src = 'https://platform.twitter.com/widgets.js';
+                script.async = true;
+                document.body.appendChild(script);
+            }
+        }
+        chatBackend.registerAttachmentScraper(new UrlAttachmentScraper());
+        chatBackend.registerAttachmentResolver(new GiphyAttachmentResolver());
+        chatBackend.registerAttachmentResolver(new YouTubeAttachmentResolver());
+        chatBackend.registerAttachmentResolver(new TweetAttachmentResolver());
+        chatBackend.registerAttachmentResolver(new UrlAttachmentResolver(chatBackend));
+    }
     static configure(options) {
         return {
             ngModule: BantaSdkModule,
@@ -9712,6 +9766,9 @@ BantaSdkModule.decorators = [
                     CommentsModule
                 ]
             },] }
+];
+BantaSdkModule.ctorParameters = () => [
+    { type: ChatBackendBase }
 ];
 
 /*
@@ -9722,5 +9779,5 @@ BantaSdkModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { AttachmentButtonComponent, BANTA_SDK_OPTIONS, BantaAttachmentComponent, BantaAttachmentsComponent, BantaChatComponent, BantaCommentsComponent, BantaCommonModule, BantaComponent, BantaLogoComponent, BantaMarkdownToHtmlPipe, BantaReplySendOptionsDirective, BantaSdkModule, BantaTrustResourceUrlPipe, ChatBackend, ChatBackendBase, ChatMessageComponent, ChatModule, ChatSource, ChatViewComponent, CommentComponent, CommentFieldComponent, CommentSortComponent, CommentViewComponent, CommentsModule, EMOJIS, EmojiModule, EmojiSelectorButtonComponent, EmojiSelectorPanelComponent, LightboxComponent, LiveChatMessageComponent, LiveCommentComponent, LiveMessageComponent, TimestampComponent, lazyConnection };
+export { AttachmentButtonComponent, BANTA_SDK_OPTIONS, BantaAttachmentComponent, BantaAttachmentsComponent, BantaChatComponent, BantaCommentsComponent, BantaCommonModule, BantaComponent, BantaLogoComponent, BantaMarkdownToHtmlPipe, BantaReplySendOptionsDirective, BantaSdkModule, BantaTrustResourceUrlPipe, ChatBackend, ChatBackendBase, ChatMessageComponent, ChatModule, ChatSource, ChatViewComponent, CommentComponent, CommentFieldComponent, CommentSortComponent, CommentViewComponent, CommentsModule, EMOJIS, EmojiModule, EmojiSelectorButtonComponent, EmojiSelectorPanelComponent, GiphyAttachmentResolver, LightboxComponent, LiveChatMessageComponent, LiveCommentComponent, LiveMessageComponent, TimestampComponent, TweetAttachmentResolver, UrlAttachmentResolver, UrlAttachmentScraper, YouTubeAttachmentResolver, lazyConnection };
 //# sourceMappingURL=banta-sdk.js.map