aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-11-19 16:23:19 +0100
committerChocobozzz <me@florianbigard.com>2020-11-19 16:23:19 +0100
commitb355b394083aa4ea67a17e5c60e1d3e40f2defd9 (patch)
treecf3943b0463681b7846f0e852c78337dc7b9e570 /client
parentc4f7fe09cd014b0ec5c0d64fd320780c45461c06 (diff)
downloadPeerTube-b355b394083aa4ea67a17e5c60e1d3e40f2defd9.tar.gz
PeerTube-b355b394083aa4ea67a17e5c60e1d3e40f2defd9.tar.zst
PeerTube-b355b394083aa4ea67a17e5c60e1d3e40f2defd9.zip
Lazy load linkifier
Diffstat (limited to 'client')
-rw-r--r--client/angular.json6
-rw-r--r--client/src/app/core/renderer/html-renderer.service.ts8
-rw-r--r--client/src/app/core/renderer/linkifier.service.ts35
3 files changed, 31 insertions, 18 deletions
diff --git a/client/angular.json b/client/angular.json
index e453ce273..5ecc335cb 100644
--- a/client/angular.json
+++ b/client/angular.json
@@ -168,7 +168,11 @@
168 "@babel/runtime/helpers/possibleConstructorReturn", 168 "@babel/runtime/helpers/possibleConstructorReturn",
169 "@babel/runtime/helpers/inherits", 169 "@babel/runtime/helpers/inherits",
170 "@babel/runtime/helpers/construct", 170 "@babel/runtime/helpers/construct",
171 "@videojs/xhr" 171 "@videojs/xhr",
172 "htmlparser2",
173 "url",
174 "parse-srcset",
175 "postcss"
172 ], 176 ],
173 "scripts": [] 177 "scripts": []
174 }, 178 },
diff --git a/client/src/app/core/renderer/html-renderer.service.ts b/client/src/app/core/renderer/html-renderer.service.ts
index 1fe91b96b..3176cf6a4 100644
--- a/client/src/app/core/renderer/html-renderer.service.ts
+++ b/client/src/app/core/renderer/html-renderer.service.ts
@@ -21,10 +21,12 @@ export class HtmlRendererService {
21 } 21 }
22 22
23 async toSafeHtml (text: string) { 23 async toSafeHtml (text: string) {
24 await this.loadSanitizeHtml() 24 const [ html ] = await Promise.all([
25 // Convert possible markdown to html
26 this.linkifier.linkify(text),
25 27
26 // Convert possible markdown to html 28 this.loadSanitizeHtml()
27 const html = this.linkifier.linkify(text) 29 ])
28 30
29 return this.sanitizeHtml(html, SANITIZE_OPTIONS) 31 return this.sanitizeHtml(html, SANITIZE_OPTIONS)
30 } 32 }
diff --git a/client/src/app/core/renderer/linkifier.service.ts b/client/src/app/core/renderer/linkifier.service.ts
index 46d5b0089..db9326d63 100644
--- a/client/src/app/core/renderer/linkifier.service.ts
+++ b/client/src/app/core/renderer/linkifier.service.ts
@@ -1,13 +1,13 @@
1import { Injectable } from '@angular/core' 1import { Injectable } from '@angular/core'
2import { getAbsoluteAPIUrl } from '@app/helpers/utils' 2import { getAbsoluteAPIUrl } from '@app/helpers/utils'
3import * as linkify from 'linkifyjs'
4import linkifyHtml from 'linkifyjs/html'
5 3
6@Injectable() 4@Injectable()
7export class LinkifierService { 5export class LinkifierService {
8
9 static CLASSNAME = 'linkified' 6 static CLASSNAME = 'linkified'
10 7
8 private linkifyModule: any
9 private linkifyHtmlModule: any
10
11 private linkifyOptions = { 11 private linkifyOptions = {
12 className: { 12 className: {
13 mention: LinkifierService.CLASSNAME + '-mention', 13 mention: LinkifierService.CLASSNAME + '-mention',
@@ -15,20 +15,27 @@ export class LinkifierService {
15 } 15 }
16 } 16 }
17 17
18 constructor () { 18 async linkify (text: string) {
19 // Apply plugin 19 if (!this.linkifyModule) {
20 this.mentionWithDomainPlugin(linkify) 20 const result = await Promise.all([
21 } 21 import('linkifyjs'), // ES module
22 import('linkifyjs/html').then(m => m.default)
23 ])
24
25 this.linkifyModule = result[0]
26 this.linkifyHtmlModule = result[1]
27
28 this.mentionWithDomainPlugin()
29 }
22 30
23 linkify (text: string) { 31 return this.linkifyHtmlModule(text, this.linkifyOptions)
24 return linkifyHtml(text, this.linkifyOptions)
25 } 32 }
26 33
27 private mentionWithDomainPlugin (linkify: any) { 34 private mentionWithDomainPlugin () {
28 const TT = linkify.scanner.TOKENS // Text tokens 35 const TT = this.linkifyModule.scanner.TOKENS // Text tokens
29 const { TOKENS: MT, State } = linkify.parser // Multi tokens, state 36 const { TOKENS: MT, State } = this.linkifyModule.parser // Multi tokens, state
30 const MultiToken = MT.Base 37 const MultiToken = MT.Base
31 const S_START = linkify.parser.start 38 const S_START = this.linkifyModule.parser.start
32 39
33 const TT_AT = TT.AT 40 const TT_AT = TT.AT
34 const TT_DOMAIN = TT.DOMAIN 41 const TT_DOMAIN = TT.DOMAIN
@@ -44,7 +51,7 @@ export class LinkifierService {
44 this.v = value 51 this.v = value
45 } 52 }
46 53
47 linkify.inherits(MultiToken, MENTION, { 54 this.linkifyModule.inherits(MultiToken, MENTION, {
48 type: 'mentionWithDomain', 55 type: 'mentionWithDomain',
49 isLink: true, 56 isLink: true,
50 toHref () { 57 toHref () {