Lazy import some modules

pull/1642/head
Chocobozzz 2019-02-15 15:52:18 +01:00
parent 17036be5bc
commit 41d713446c
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
22 changed files with 132 additions and 82 deletions

View File

@ -93,6 +93,7 @@
"@types/jasminewd2": "^2.0.3",
"@types/jest": "^23.3.1",
"@types/jschannel": "^1.0.0",
"@types/linkifyjs": "^2.1.1",
"@types/lodash-es": "^4.17.0",
"@types/markdown-it": "^0.0.5",
"@types/node": "^10.9.2",
@ -154,7 +155,7 @@
"ts-jest": "^23.1.4",
"tslint": "^5.7.0",
"tslint-config-standard": "^8.0.1",
"typescript": "3.1.6",
"typescript": "3.2",
"video.js": "^7",
"videojs-contextmenu-ui": "^5.0.0",
"videojs-contrib-quality-levels": "^2.0.9",

View File

@ -44,10 +44,11 @@ export class AboutInstanceComponent implements OnInit {
ngOnInit () {
this.instanceService.getAbout()
.subscribe(
res => {
async res => {
this.shortDescription = res.instance.shortDescription
this.descriptionHTML = this.markdownService.textMarkdownToHTML(res.instance.description)
this.termsHTML = this.markdownService.textMarkdownToHTML(res.instance.terms)
this.descriptionHTML = await this.markdownService.textMarkdownToHTML(res.instance.description)
this.termsHTML = await this.markdownService.textMarkdownToHTML(res.instance.terms)
},
() => this.notifier.error(this.i18n('Cannot get about information from server'))

View File

@ -25,9 +25,9 @@ export class AccountAboutComponent implements OnInit, OnDestroy {
ngOnInit () {
// Parent get the account for us
this.accountSub = this.accountService.accountLoaded
.subscribe(account => {
.subscribe(async account => {
this.account = account
this.descriptionHTML = this.markdownService.textMarkdownToHTML(this.account.description)
this.descriptionHTML = await this.markdownService.textMarkdownToHTML(this.account.description)
})
}

View File

@ -51,11 +51,11 @@
<td class="moderation-expanded" colspan="6">
<div>
<span i18n class="moderation-expanded-label">Reason:</span>
<span class="moderation-expanded-text" [innerHTML]="toHtml(videoAbuse.reason)"></span>
<span class="moderation-expanded-text" [innerHTML]="videoAbuse.reasonHtml"></span>
</div>
<div *ngIf="videoAbuse.moderationComment">
<span i18n class="moderation-expanded-label">Moderation comment:</span>
<span class="moderation-expanded-text" [innerHTML]="toHtml(videoAbuse.moderationComment)"></span>
<span class="moderation-expanded-text" [innerHTML]="videoAbuse.moderationCommentHtml"></span>
</div>
</td>
</tr>

View File

@ -19,7 +19,7 @@ import { MarkdownService } from '@app/shared/renderer'
export class VideoAbuseListComponent extends RestTable implements OnInit {
@ViewChild('moderationCommentModal') moderationCommentModal: ModerationCommentModalComponent
videoAbuses: VideoAbuse[] = []
videoAbuses: (VideoAbuse & { moderationCommentHtml?: string, reasonHtml?: string })[] = []
totalRecords = 0
rowsPerPage = 10
sort: SortMeta = { field: 'createdAt', order: 1 }
@ -110,19 +110,28 @@ export class VideoAbuseListComponent extends RestTable implements OnInit {
}
toHtml (text: string) {
return this.markdownRenderer.textMarkdownToHTML(text)
}
protected loadData () {
return this.videoAbuseService.getVideoAbuses(this.pagination, this.sort)
.subscribe(
resultList => {
this.videoAbuses = resultList.data
async resultList => {
this.totalRecords = resultList.total
this.videoAbuses = resultList.data
for (const abuse of this.videoAbuses) {
Object.assign(abuse, {
reasonHtml: await this.toHtml(abuse.reason),
moderationCommentHtml: await this.toHtml(abuse.moderationComment)
})
}
},
err => this.notifier.error(err.message)
)
}
private toHtml (text: string) {
return this.markdownRenderer.textMarkdownToHTML(text)
}
}

View File

@ -41,7 +41,7 @@
<tr>
<td class="moderation-expanded" colspan="6">
<span i18n class="moderation-expanded-label">Blacklist reason:</span>
<span class="moderation-expanded-text" [innerHTML]="toHtml(videoBlacklist.reason)"></span>
<span class="moderation-expanded-text" [innerHTML]="videoBlacklist.reasonHtml"></span>
</td>
</tr>
</ng-template>

View File

@ -15,7 +15,7 @@ import { MarkdownService } from '@app/shared/renderer'
styleUrls: [ '../moderation.component.scss' ]
})
export class VideoBlacklistListComponent extends RestTable implements OnInit {
blacklist: VideoBlacklist[] = []
blacklist: (VideoBlacklist & { reasonHtml?: string })[] = []
totalRecords = 0
rowsPerPage = 10
sort: SortMeta = { field: 'createdAt', order: 1 }
@ -79,9 +79,14 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit {
protected loadData () {
this.videoBlacklistService.listBlacklist(this.pagination, this.sort)
.subscribe(
resultList => {
this.blacklist = resultList.data
async resultList => {
this.totalRecords = resultList.total
this.blacklist = resultList.data
for (const element of this.blacklist) {
Object.assign(element, { reasonHtml: await this.toHtml(element.reason) })
}
},
err => this.notifier.error(err.message)

View File

@ -26,11 +26,11 @@ export class VideoChannelAboutComponent implements OnInit, OnDestroy {
ngOnInit () {
// Parent get the video channel for us
this.videoChannelSub = this.videoChannelService.videoChannelLoaded
.subscribe(videoChannel => {
.subscribe(async videoChannel => {
this.videoChannel = videoChannel
this.descriptionHTML = this.markdownService.textMarkdownToHTML(this.videoChannel.description)
this.supportHTML = this.markdownService.enhancedMarkdownToHTML(this.videoChannel.support)
this.descriptionHTML = await this.markdownService.textMarkdownToHTML(this.videoChannel.description)
this.supportHTML = await this.markdownService.enhancedMarkdownToHTML(this.videoChannel.support)
})
}

View File

@ -21,21 +21,22 @@ export class UserNotificationSocket {
this.notificationSubject.next({ type, notification })
}
getMyNotificationsSocket () {
const socket = this.getSocket()
socket.on('new-notification', (n: UserNotificationServer) => this.dispatch('new', n))
async getMyNotificationsSocket () {
await this.initSocket()
return this.notificationSubject.asObservable()
}
private getSocket () {
if (this.socket) return this.socket
private async initSocket () {
if (this.socket) return
// FIXME: import('..') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
const io: typeof import ('socket.io-client') = (await import('socket.io-client') as any).default
this.socket = io(environment.apiUrl + '/user-notifications', {
query: { accessToken: this.auth.getAccessToken() }
})
return this.socket
this.socket.on('new-notification', (n: UserNotificationServer) => this.dispatch('new', n))
}
}

View File

@ -26,18 +26,19 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
private userNotificationSocket: UserNotificationSocket,
private notifier: Notifier,
private router: Router
) {}
) {
}
ngOnInit () {
this.userNotificationService.countUnreadNotifications()
.subscribe(
result => {
this.unreadNotifications = Math.min(result, 99) // Limit number to 99
this.subscribeToNotifications()
},
.subscribe(
result => {
this.unreadNotifications = Math.min(result, 99) // Limit number to 99
this.subscribeToNotifications()
},
err => this.notifier.error(err.message)
)
err => this.notifier.error(err.message)
)
this.routeSub = this.router.events
.pipe(filter(event => event instanceof NavigationEnd))
@ -53,13 +54,14 @@ export class AvatarNotificationComponent implements OnInit, OnDestroy {
this.popover.close()
}
private subscribeToNotifications () {
this.notificationSub = this.userNotificationSocket.getMyNotificationsSocket()
.subscribe(data => {
if (data.type === 'new') return this.unreadNotifications++
if (data.type === 'read') return this.unreadNotifications--
if (data.type === 'read-all') return this.unreadNotifications = 0
})
private async subscribeToNotifications () {
const obs = await this.userNotificationSocket.getMyNotificationsSocket()
this.notificationSub = obs.subscribe(data => {
if (data.type === 'new') return this.unreadNotifications++
if (data.type === 'read') return this.unreadNotifications--
if (data.type === 'read-all') return this.unreadNotifications = 0
})
}
}

View File

@ -82,11 +82,11 @@ export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
return this.screenService.isInSmallView() === false
}
private updatePreviews () {
private async updatePreviews () {
if (this.content === null || this.content === undefined) return
this.truncatedPreviewHTML = this.markdownRender(truncate(this.content, { length: this.truncate }))
this.previewHTML = this.markdownRender(this.content)
this.truncatedPreviewHTML = await this.markdownRender(truncate(this.content, { length: this.truncate }))
this.previewHTML = await this.markdownRender(this.content)
}
private markdownRender (text: string) {

View File

@ -1,6 +1,5 @@
import { Injectable } from '@angular/core'
import { LinkifierService } from '@app/shared/renderer/linkifier.service'
import * as sanitizeHtml from 'sanitize-html'
@Injectable()
export class HtmlRendererService {
@ -9,7 +8,10 @@ export class HtmlRendererService {
}
toSafeHtml (text: string) {
async toSafeHtml (text: string) {
// FIXME: import('..') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
const sanitizeHtml: typeof import ('sanitize-html') = (await import('sanitize-html') as any).default
// Convert possible markdown to html
const html = this.linkifier.linkify(text)

View File

@ -1,8 +1,7 @@
import { Injectable } from '@angular/core'
import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
// FIXME: use @types/linkify when https://github.com/DefinitelyTyped/DefinitelyTyped/pull/29682/files is merged?
const linkify = require('linkifyjs')
const linkifyHtml = require('linkifyjs/html')
import * as linkify from 'linkifyjs'
import linkifyHtml from 'linkifyjs/html'
@Injectable()
export class LinkifierService {

View File

@ -1,6 +1,6 @@
import { Injectable } from '@angular/core'
import * as MarkdownIt from 'markdown-it'
import { MarkdownIt } from 'markdown-it'
@Injectable()
export class MarkdownService {
@ -14,30 +14,36 @@ export class MarkdownService {
]
static ENHANCED_RULES = MarkdownService.TEXT_RULES.concat([ 'image' ])
private textMarkdownIt: MarkdownIt.MarkdownIt
private enhancedMarkdownIt: MarkdownIt.MarkdownIt
private textMarkdownIt: MarkdownIt
private enhancedMarkdownIt: MarkdownIt
constructor () {
this.textMarkdownIt = this.createMarkdownIt(MarkdownService.TEXT_RULES)
this.enhancedMarkdownIt = this.createMarkdownIt(MarkdownService.ENHANCED_RULES)
}
textMarkdownToHTML (markdown: string) {
async textMarkdownToHTML (markdown: string) {
if (!markdown) return ''
if (!this.textMarkdownIt) {
this.textMarkdownIt = await this.createMarkdownIt(MarkdownService.TEXT_RULES)
}
const html = this.textMarkdownIt.render(markdown)
return this.avoidTruncatedTags(html)
}
enhancedMarkdownToHTML (markdown: string) {
async enhancedMarkdownToHTML (markdown: string) {
if (!markdown) return ''
if (!this.enhancedMarkdownIt) {
this.enhancedMarkdownIt = await this.createMarkdownIt(MarkdownService.ENHANCED_RULES)
}
const html = this.enhancedMarkdownIt.render(markdown)
return this.avoidTruncatedTags(html)
}
private createMarkdownIt (rules: string[]) {
const markdownIt = new MarkdownIt('zero', { linkify: true, breaks: true })
private async createMarkdownIt (rules: string[]) {
// FIXME: import('..') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
const MarkdownItClass: typeof import ('markdown-it') = (await import('markdown-it') as any).default
const markdownIt = new MarkdownItClass('zero', { linkify: true, breaks: true })
for (let rule of rules) {
markdownIt.enable(rule)
@ -48,7 +54,7 @@ export class MarkdownService {
return markdownIt
}
private setTargetToLinks (markdownIt: MarkdownIt.MarkdownIt) {
private setTargetToLinks (markdownIt: MarkdownIt) {
// Snippet from markdown-it documentation: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
const defaultRender = markdownIt.renderer.rules.link_open || function (tokens, idx, options, env, self) {
return self.renderToken(tokens, idx, options)

View File

@ -7,7 +7,7 @@ import { ResultList, UserNotification as UserNotificationServer, UserNotificatio
import { UserNotification } from './user-notification.model'
import { AuthService } from '../../core'
import { ComponentPagination } from '../rest/component-pagination.model'
import { User } from '..'
import { User } from '../users/user.model'
import { UserNotificationSocket } from '@app/core/notification/user-notification-socket.service'
@Injectable()

View File

@ -85,8 +85,8 @@ export class VideoCommentComponent implements OnInit, OnChanges {
)
}
private init () {
this.sanitizedCommentHTML = this.htmlRenderer.toSafeHtml(this.comment.text)
private async init () {
this.sanitizedCommentHTML = await this.htmlRenderer.toSafeHtml(this.comment.text)
this.newParentComments = this.parentComments.concat([ this.comment ])
}

View File

@ -21,7 +21,9 @@ export class VideoSupportComponent {
) { }
show () {
this.videoHTMLSupport = this.markdownService.enhancedMarkdownToHTML(this.video.support)
this.modalService.open(this.modal)
this.markdownService.enhancedMarkdownToHTML(this.video.support)
.then(r => this.videoHTMLSupport = r)
}
}

View File

@ -325,8 +325,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
this.setVideoDescriptionHTML()
}
private setVideoDescriptionHTML () {
this.videoHTMLDescription = this.markdownService.textMarkdownToHTML(this.video.description)
private async setVideoDescriptionHTML () {
this.videoHTMLDescription = await this.markdownService.textMarkdownToHTML(this.video.description)
}
private setVideoLikesBarTooltipText () {

View File

@ -22,7 +22,6 @@ import {
const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
class PeerTubePlugin extends Plugin {
private readonly autoplay: boolean = false
private readonly startTime: number = 0
private readonly videoViewUrl: string
private readonly videoDuration: number

View File

@ -432,7 +432,7 @@
height: 160px;
display: flex;
flex-direction: column;
align-items: start;
align-items: flex-start;
.actor {
display: flex;

View File

@ -445,6 +445,13 @@
resolved "https://registry.yarnpkg.com/@types/jschannel/-/jschannel-1.0.1.tgz#79d582ccf42554c8457230526a3054d018d559f0"
integrity sha512-S34NuOoOOKXbft3f9GDeLKp777ABCGArZaqUWOuu1Xn+1S75Osmk8kCeqmw5x2TuASyjE082DwDAuoaXNIRCTw==
"@types/linkifyjs@^2.1.1":
version "2.1.1"
resolved "https://registry.yarnpkg.com/@types/linkifyjs/-/linkifyjs-2.1.1.tgz#d6902c165f7108ff9293f7145dfb703fee6814c7"
integrity sha512-rTXD/qsdI0aAf1tOtacWaE47K2QLz5C/g7rmB6kYyNuRKWMtStcQjVAM5R/T6kaiR8EVLMwPZ1RqX3aA/CS95g==
dependencies:
"@types/react" "*"
"@types/lodash-es@^4.17.0":
version "4.17.1"
resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.1.tgz#56745e5411558362aeca31def918f88f725dd29d"
@ -500,11 +507,24 @@
"@types/node" "*"
"@types/parse-torrent-file" "*"
"@types/prop-types@*":
version "15.5.9"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.9.tgz#f2d14df87b0739041bc53a7d75e3d77d726a3ec0"
integrity sha512-Nha5b+jmBI271jdTMwrHiNXM+DvThjHOfyZtMX9kj/c/LUj2xiLHsG/1L3tJ8DjAoQN48cHwUwtqBotjyXaSdQ==
"@types/q@^0.0.32":
version "0.0.32"
resolved "https://registry.yarnpkg.com/@types/q/-/q-0.0.32.tgz#bd284e57c84f1325da702babfc82a5328190c0c5"
integrity sha1-vShOV8hPEyXacCur/IKlMoGQwMU=
"@types/react@*":
version "16.8.3"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.3.tgz#7b67956f682bea30a5a09b3242c0784ff196c848"
integrity sha512-PjPocAxL9SNLjYMP4dfOShW/rj9FDBJGu3JFRt0zEYf77xfihB6fq8zfDpMrV6s82KnAi7F1OEe5OsQX25Ybdw==
dependencies:
"@types/prop-types" "*"
csstype "^2.2.0"
"@types/sanitize-html@1.18.0":
version "1.18.0"
resolved "https://registry.yarnpkg.com/@types/sanitize-html/-/sanitize-html-1.18.0.tgz#de5cb560a41308ea8474e93b9d10bbb4050692f5"
@ -2611,6 +2631,11 @@ cssstyle@^1.0.0:
dependencies:
cssom "0.3.x"
csstype@^2.2.0:
version "2.6.2"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.2.tgz#3043d5e065454579afc7478a18de41909c8a2f01"
integrity sha512-Rl7PvTae0pflc1YtxtKbiSqq20Ts6vpIYOD5WBafl4y123DyHUeLrRdQP66sQW8/6gmX8jrYJLXwNeMqYVJcow==
currently-unhandled@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@ -9927,12 +9952,7 @@ typedarray@^0.0.6:
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
typescript@3.1.6:
version "3.1.6"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.1.6.tgz#b6543a83cfc8c2befb3f4c8fba6896f5b0c9be68"
integrity sha512-tDMYfVtvpb96msS1lDX9MEdHrW4yOuZ4Kdc4Him9oU796XldPYF/t2+uKoX0BBa0hXXwDlqYQbXY5Rzjzc5hBA==
typescript@3.2.4:
typescript@3.2, typescript@3.2.4:
version "3.2.4"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.2.4.tgz#c585cb952912263d915b462726ce244ba510ef3d"
integrity sha512-0RNDbSdEokBeEAkgNbxJ+BLwSManFy9TeXz8uW+48j/xhEXv1ePME60olyzw2XzUqUBNAYFeJadIqAgNqIACwg==

View File

@ -147,10 +147,13 @@ class Notifier {
}
private async notifyOfCommentMention (comment: VideoCommentModel) {
const usernames = comment.extractMentions()
logger.debug('Extracted %d username from comment %s.', usernames.length, comment.url, { usernames, text: comment.text })
const extractedUsernames = comment.extractMentions()
logger.debug(
'Extracted %d username from comment %s.', extractedUsernames.length, comment.url,
{ usernames: extractedUsernames, text: comment.text }
)
let users = await UserModel.listByUsernames(usernames)
let users = await UserModel.listByUsernames(extractedUsernames)
if (comment.Video.isOwned()) {
const userException = await UserModel.loadByVideoId(comment.videoId)