]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - server/lib/client-html.ts
Bumped to version v5.2.1
[github/Chocobozzz/PeerTube.git] / server / lib / client-html.ts
1 import express from 'express'
2 import { pathExists, readFile } from 'fs-extra'
3 import { join } from 'path'
4 import validator from 'validator'
5 import { isTestOrDevInstance } from '@server/helpers/core-utils'
6 import { toCompleteUUID } from '@server/helpers/custom-validators/misc'
7 import { mdToOneLinePlainText } from '@server/helpers/markdown'
8 import { ActorImageModel } from '@server/models/actor/actor-image'
9 import { root } from '@shared/core-utils'
10 import { escapeHTML } from '@shared/core-utils/renderer'
11 import { sha256 } from '@shared/extra-utils'
12 import { HTMLServerConfig } from '@shared/models'
13 import { buildFileLocale, getDefaultLocale, is18nLocale, POSSIBLE_LOCALES } from '../../shared/core-utils/i18n/i18n'
14 import { HttpStatusCode } from '../../shared/models/http/http-error-codes'
15 import { VideoPlaylistPrivacy, VideoPrivacy } from '../../shared/models/videos'
16 import { logger } from '../helpers/logger'
17 import { CONFIG } from '../initializers/config'
18 import {
19 ACCEPT_HEADERS,
20 CUSTOM_HTML_TAG_COMMENTS,
21 EMBED_SIZE,
22 FILES_CONTENT_HASH,
23 PLUGIN_GLOBAL_CSS_PATH,
24 WEBSERVER
25 } from '../initializers/constants'
26 import { AccountModel } from '../models/account/account'
27 import { VideoModel } from '../models/video/video'
28 import { VideoChannelModel } from '../models/video/video-channel'
29 import { VideoPlaylistModel } from '../models/video/video-playlist'
30 import { MAccountHost, MChannelHost, MVideo, MVideoPlaylist } from '../types/models'
31 import { getActivityStreamDuration } from './activitypub/activity'
32 import { getBiggestActorImage } from './actor-image'
33 import { Hooks } from './plugins/hooks'
34 import { ServerConfigManager } from './server-config-manager'
35
36 type Tags = {
37 ogType: string
38 twitterCard: 'player' | 'summary' | 'summary_large_image'
39 schemaType: string
40
41 list?: {
42 numberOfItems: number
43 }
44
45 escapedSiteName: string
46 escapedTitle: string
47 escapedDescription: string
48
49 url: string
50 originUrl: string
51
52 disallowIndexation?: boolean
53
54 embed?: {
55 url: string
56 createdAt: string
57 duration?: string
58 views?: number
59 }
60
61 image: {
62 url: string
63 width?: number
64 height?: number
65 }
66 }
67
68 type HookContext = {
69 video?: MVideo
70 playlist?: MVideoPlaylist
71 }
72
73 class ClientHtml {
74
75 private static htmlCache: { [path: string]: string } = {}
76
77 static invalidCache () {
78 logger.info('Cleaning HTML cache.')
79
80 ClientHtml.htmlCache = {}
81 }
82
83 static async getDefaultHTMLPage (req: express.Request, res: express.Response, paramLang?: string) {
84 const html = paramLang
85 ? await ClientHtml.getIndexHTML(req, res, paramLang)
86 : await ClientHtml.getIndexHTML(req, res)
87
88 let customHtml = ClientHtml.addTitleTag(html)
89 customHtml = ClientHtml.addDescriptionTag(customHtml)
90
91 return customHtml
92 }
93
94 static async getWatchHTMLPage (videoIdArg: string, req: express.Request, res: express.Response) {
95 const videoId = toCompleteUUID(videoIdArg)
96
97 // Let Angular application handle errors
98 if (!validator.isInt(videoId) && !validator.isUUID(videoId, 4)) {
99 res.status(HttpStatusCode.NOT_FOUND_404)
100 return ClientHtml.getIndexHTML(req, res)
101 }
102
103 const [ html, video ] = await Promise.all([
104 ClientHtml.getIndexHTML(req, res),
105 VideoModel.loadWithBlacklist(videoId)
106 ])
107
108 // Let Angular application handle errors
109 if (!video || video.privacy === VideoPrivacy.PRIVATE || video.privacy === VideoPrivacy.INTERNAL || video.VideoBlacklist) {
110 res.status(HttpStatusCode.NOT_FOUND_404)
111 return html
112 }
113 const description = mdToOneLinePlainText(video.description)
114
115 let customHtml = ClientHtml.addTitleTag(html, video.name)
116 customHtml = ClientHtml.addDescriptionTag(customHtml, description)
117
118 const url = WEBSERVER.URL + video.getWatchStaticPath()
119 const originUrl = video.url
120 const title = video.name
121 const siteName = CONFIG.INSTANCE.NAME
122
123 const image = {
124 url: WEBSERVER.URL + video.getPreviewStaticPath()
125 }
126
127 const embed = {
128 url: WEBSERVER.URL + video.getEmbedStaticPath(),
129 createdAt: video.createdAt.toISOString(),
130 duration: getActivityStreamDuration(video.duration),
131 views: video.views
132 }
133
134 const ogType = 'video'
135 const twitterCard = CONFIG.SERVICES.TWITTER.WHITELISTED ? 'player' : 'summary_large_image'
136 const schemaType = 'VideoObject'
137
138 customHtml = await ClientHtml.addTags(customHtml, {
139 url,
140 originUrl,
141 escapedSiteName: escapeHTML(siteName),
142 escapedTitle: escapeHTML(title),
143 escapedDescription: escapeHTML(description),
144 disallowIndexation: video.privacy !== VideoPrivacy.PUBLIC,
145 image,
146 embed,
147 ogType,
148 twitterCard,
149 schemaType
150 }, { video })
151
152 return customHtml
153 }
154
155 static async getWatchPlaylistHTMLPage (videoPlaylistIdArg: string, req: express.Request, res: express.Response) {
156 const videoPlaylistId = toCompleteUUID(videoPlaylistIdArg)
157
158 // Let Angular application handle errors
159 if (!validator.isInt(videoPlaylistId) && !validator.isUUID(videoPlaylistId, 4)) {
160 res.status(HttpStatusCode.NOT_FOUND_404)
161 return ClientHtml.getIndexHTML(req, res)
162 }
163
164 const [ html, videoPlaylist ] = await Promise.all([
165 ClientHtml.getIndexHTML(req, res),
166 VideoPlaylistModel.loadWithAccountAndChannel(videoPlaylistId, null)
167 ])
168
169 // Let Angular application handle errors
170 if (!videoPlaylist || videoPlaylist.privacy === VideoPlaylistPrivacy.PRIVATE) {
171 res.status(HttpStatusCode.NOT_FOUND_404)
172 return html
173 }
174
175 const description = mdToOneLinePlainText(videoPlaylist.description)
176
177 let customHtml = ClientHtml.addTitleTag(html, videoPlaylist.name)
178 customHtml = ClientHtml.addDescriptionTag(customHtml, description)
179
180 const url = WEBSERVER.URL + videoPlaylist.getWatchStaticPath()
181 const originUrl = videoPlaylist.url
182 const title = videoPlaylist.name
183 const siteName = CONFIG.INSTANCE.NAME
184
185 const image = {
186 url: videoPlaylist.getThumbnailUrl()
187 }
188
189 const embed = {
190 url: WEBSERVER.URL + videoPlaylist.getEmbedStaticPath(),
191 createdAt: videoPlaylist.createdAt.toISOString()
192 }
193
194 const list = {
195 numberOfItems: videoPlaylist.get('videosLength') as number
196 }
197
198 const ogType = 'video'
199 const twitterCard = CONFIG.SERVICES.TWITTER.WHITELISTED ? 'player' : 'summary'
200 const schemaType = 'ItemList'
201
202 customHtml = await ClientHtml.addTags(customHtml, {
203 url,
204 originUrl,
205 escapedSiteName: escapeHTML(siteName),
206 escapedTitle: escapeHTML(title),
207 escapedDescription: escapeHTML(description),
208 disallowIndexation: videoPlaylist.privacy !== VideoPlaylistPrivacy.PUBLIC,
209 embed,
210 image,
211 list,
212 ogType,
213 twitterCard,
214 schemaType
215 }, { playlist: videoPlaylist })
216
217 return customHtml
218 }
219
220 static async getAccountHTMLPage (nameWithHost: string, req: express.Request, res: express.Response) {
221 const accountModelPromise = AccountModel.loadByNameWithHost(nameWithHost)
222 return this.getAccountOrChannelHTMLPage(() => accountModelPromise, req, res)
223 }
224
225 static async getVideoChannelHTMLPage (nameWithHost: string, req: express.Request, res: express.Response) {
226 const videoChannelModelPromise = VideoChannelModel.loadByNameWithHostAndPopulateAccount(nameWithHost)
227 return this.getAccountOrChannelHTMLPage(() => videoChannelModelPromise, req, res)
228 }
229
230 static async getActorHTMLPage (nameWithHost: string, req: express.Request, res: express.Response) {
231 const [ account, channel ] = await Promise.all([
232 AccountModel.loadByNameWithHost(nameWithHost),
233 VideoChannelModel.loadByNameWithHostAndPopulateAccount(nameWithHost)
234 ])
235
236 return this.getAccountOrChannelHTMLPage(() => Promise.resolve(account || channel), req, res)
237 }
238
239 static async getEmbedHTML () {
240 const path = ClientHtml.getEmbedPath()
241
242 // Disable HTML cache in dev mode because webpack can regenerate JS files
243 if (!isTestOrDevInstance() && ClientHtml.htmlCache[path]) {
244 return ClientHtml.htmlCache[path]
245 }
246
247 const buffer = await readFile(path)
248 const serverConfig = await ServerConfigManager.Instance.getHTMLServerConfig()
249
250 let html = buffer.toString()
251 html = await ClientHtml.addAsyncPluginCSS(html)
252 html = ClientHtml.addCustomCSS(html)
253 html = ClientHtml.addTitleTag(html)
254 html = ClientHtml.addDescriptionTag(html)
255 html = ClientHtml.addServerConfig(html, serverConfig)
256
257 ClientHtml.htmlCache[path] = html
258
259 return html
260 }
261
262 private static async getAccountOrChannelHTMLPage (
263 loader: () => Promise<MAccountHost | MChannelHost>,
264 req: express.Request,
265 res: express.Response
266 ) {
267 const [ html, entity ] = await Promise.all([
268 ClientHtml.getIndexHTML(req, res),
269 loader()
270 ])
271
272 // Let Angular application handle errors
273 if (!entity) {
274 res.status(HttpStatusCode.NOT_FOUND_404)
275 return ClientHtml.getIndexHTML(req, res)
276 }
277
278 const description = mdToOneLinePlainText(entity.description)
279
280 let customHtml = ClientHtml.addTitleTag(html, entity.getDisplayName())
281 customHtml = ClientHtml.addDescriptionTag(customHtml, description)
282
283 const url = entity.getClientUrl()
284 const originUrl = entity.Actor.url
285 const siteName = CONFIG.INSTANCE.NAME
286 const title = entity.getDisplayName()
287
288 const avatar = getBiggestActorImage(entity.Actor.Avatars)
289 const image = {
290 url: ActorImageModel.getImageUrl(avatar),
291 width: avatar?.width,
292 height: avatar?.height
293 }
294
295 const ogType = 'website'
296 const twitterCard = 'summary'
297 const schemaType = 'ProfilePage'
298
299 customHtml = await ClientHtml.addTags(customHtml, {
300 url,
301 originUrl,
302 escapedTitle: escapeHTML(title),
303 escapedSiteName: escapeHTML(siteName),
304 escapedDescription: escapeHTML(description),
305 image,
306 ogType,
307 twitterCard,
308 schemaType,
309 disallowIndexation: !entity.Actor.isOwned()
310 }, {})
311
312 return customHtml
313 }
314
315 private static async getIndexHTML (req: express.Request, res: express.Response, paramLang?: string) {
316 const path = ClientHtml.getIndexPath(req, res, paramLang)
317 if (ClientHtml.htmlCache[path]) return ClientHtml.htmlCache[path]
318
319 const buffer = await readFile(path)
320 const serverConfig = await ServerConfigManager.Instance.getHTMLServerConfig()
321
322 let html = buffer.toString()
323
324 html = ClientHtml.addManifestContentHash(html)
325 html = ClientHtml.addFaviconContentHash(html)
326 html = ClientHtml.addLogoContentHash(html)
327 html = ClientHtml.addCustomCSS(html)
328 html = ClientHtml.addServerConfig(html, serverConfig)
329 html = await ClientHtml.addAsyncPluginCSS(html)
330
331 ClientHtml.htmlCache[path] = html
332
333 return html
334 }
335
336 private static getIndexPath (req: express.Request, res: express.Response, paramLang: string) {
337 let lang: string
338
339 // Check param lang validity
340 if (paramLang && is18nLocale(paramLang)) {
341 lang = paramLang
342
343 // Save locale in cookies
344 res.cookie('clientLanguage', lang, {
345 secure: WEBSERVER.SCHEME === 'https',
346 sameSite: 'none',
347 maxAge: 1000 * 3600 * 24 * 90 // 3 months
348 })
349
350 } else if (req.cookies.clientLanguage && is18nLocale(req.cookies.clientLanguage)) {
351 lang = req.cookies.clientLanguage
352 } else {
353 lang = req.acceptsLanguages(POSSIBLE_LOCALES) || getDefaultLocale()
354 }
355
356 logger.debug(
357 'Serving %s HTML language', buildFileLocale(lang),
358 { cookie: req.cookies?.clientLanguage, paramLang, acceptLanguage: req.headers['accept-language'] }
359 )
360
361 return join(root(), 'client', 'dist', buildFileLocale(lang), 'index.html')
362 }
363
364 private static getEmbedPath () {
365 return join(root(), 'client', 'dist', 'standalone', 'videos', 'embed.html')
366 }
367
368 private static addManifestContentHash (htmlStringPage: string) {
369 return htmlStringPage.replace('[manifestContentHash]', FILES_CONTENT_HASH.MANIFEST)
370 }
371
372 private static addFaviconContentHash (htmlStringPage: string) {
373 return htmlStringPage.replace('[faviconContentHash]', FILES_CONTENT_HASH.FAVICON)
374 }
375
376 private static addLogoContentHash (htmlStringPage: string) {
377 return htmlStringPage.replace('[logoContentHash]', FILES_CONTENT_HASH.LOGO)
378 }
379
380 private static addTitleTag (htmlStringPage: string, title?: string) {
381 let text = title || CONFIG.INSTANCE.NAME
382 if (title) text += ` - ${CONFIG.INSTANCE.NAME}`
383
384 const titleTag = `<title>${escapeHTML(text)}</title>`
385
386 return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.TITLE, titleTag)
387 }
388
389 private static addDescriptionTag (htmlStringPage: string, description?: string) {
390 const content = description || CONFIG.INSTANCE.SHORT_DESCRIPTION
391 const descriptionTag = `<meta name="description" content="${escapeHTML(content)}" />`
392
393 return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.DESCRIPTION, descriptionTag)
394 }
395
396 private static addCustomCSS (htmlStringPage: string) {
397 const styleTag = `<style class="custom-css-style">${CONFIG.INSTANCE.CUSTOMIZATIONS.CSS}</style>`
398
399 return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.CUSTOM_CSS, styleTag)
400 }
401
402 private static addServerConfig (htmlStringPage: string, serverConfig: HTMLServerConfig) {
403 // Stringify the JSON object, and then stringify the string object so we can inject it into the HTML
404 const serverConfigString = JSON.stringify(JSON.stringify(serverConfig))
405 const configScriptTag = `<script type="application/javascript">window.PeerTubeServerConfig = ${serverConfigString}</script>`
406
407 return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.SERVER_CONFIG, configScriptTag)
408 }
409
410 private static async addAsyncPluginCSS (htmlStringPage: string) {
411 if (!pathExists(PLUGIN_GLOBAL_CSS_PATH)) {
412 logger.info('Plugin Global CSS file is not available (generation may still be in progress), ignoring it.')
413 return htmlStringPage
414 }
415
416 let globalCSSContent: Buffer
417
418 try {
419 globalCSSContent = await readFile(PLUGIN_GLOBAL_CSS_PATH)
420 } catch (err) {
421 logger.error('Error retrieving the Plugin Global CSS file, ignoring it.', { err })
422 return htmlStringPage
423 }
424
425 if (globalCSSContent.byteLength === 0) return htmlStringPage
426
427 const fileHash = sha256(globalCSSContent)
428 const linkTag = `<link rel="stylesheet" href="/plugins/global.css?hash=${fileHash}" />`
429
430 return htmlStringPage.replace('</head>', linkTag + '</head>')
431 }
432
433 private static generateOpenGraphMetaTags (tags: Tags) {
434 const metaTags = {
435 'og:type': tags.ogType,
436 'og:site_name': tags.escapedSiteName,
437 'og:title': tags.escapedTitle,
438 'og:image': tags.image.url
439 }
440
441 if (tags.image.width && tags.image.height) {
442 metaTags['og:image:width'] = tags.image.width
443 metaTags['og:image:height'] = tags.image.height
444 }
445
446 metaTags['og:url'] = tags.url
447 metaTags['og:description'] = tags.escapedDescription
448
449 if (tags.embed) {
450 metaTags['og:video:url'] = tags.embed.url
451 metaTags['og:video:secure_url'] = tags.embed.url
452 metaTags['og:video:type'] = 'text/html'
453 metaTags['og:video:width'] = EMBED_SIZE.width
454 metaTags['og:video:height'] = EMBED_SIZE.height
455 }
456
457 return metaTags
458 }
459
460 private static generateStandardMetaTags (tags: Tags) {
461 return {
462 name: tags.escapedTitle,
463 description: tags.escapedDescription,
464 image: tags.image.url
465 }
466 }
467
468 private static generateTwitterCardMetaTags (tags: Tags) {
469 const metaTags = {
470 'twitter:card': tags.twitterCard,
471 'twitter:site': CONFIG.SERVICES.TWITTER.USERNAME,
472 'twitter:title': tags.escapedTitle,
473 'twitter:description': tags.escapedDescription,
474 'twitter:image': tags.image.url
475 }
476
477 if (tags.image.width && tags.image.height) {
478 metaTags['twitter:image:width'] = tags.image.width
479 metaTags['twitter:image:height'] = tags.image.height
480 }
481
482 if (tags.twitterCard === 'player') {
483 metaTags['twitter:player'] = tags.embed.url
484 metaTags['twitter:player:width'] = EMBED_SIZE.width
485 metaTags['twitter:player:height'] = EMBED_SIZE.height
486 }
487
488 return metaTags
489 }
490
491 private static async generateSchemaTags (tags: Tags, context: HookContext) {
492 const schema = {
493 '@context': 'http://schema.org',
494 '@type': tags.schemaType,
495 'name': tags.escapedTitle,
496 'description': tags.escapedDescription,
497 'image': tags.image.url,
498 'url': tags.url
499 }
500
501 if (tags.list) {
502 schema['numberOfItems'] = tags.list.numberOfItems
503 schema['thumbnailUrl'] = tags.image.url
504 }
505
506 if (tags.embed) {
507 schema['embedUrl'] = tags.embed.url
508 schema['uploadDate'] = tags.embed.createdAt
509
510 if (tags.embed.duration) schema['duration'] = tags.embed.duration
511
512 schema['thumbnailUrl'] = tags.image.url
513 schema['contentUrl'] = tags.url
514 }
515
516 return Hooks.wrapObject(schema, 'filter:html.client.json-ld.result', context)
517 }
518
519 private static async addTags (htmlStringPage: string, tagsValues: Tags, context: HookContext) {
520 const openGraphMetaTags = this.generateOpenGraphMetaTags(tagsValues)
521 const standardMetaTags = this.generateStandardMetaTags(tagsValues)
522 const twitterCardMetaTags = this.generateTwitterCardMetaTags(tagsValues)
523 const schemaTags = await this.generateSchemaTags(tagsValues, context)
524
525 const { url, escapedTitle, embed, originUrl, disallowIndexation } = tagsValues
526
527 const oembedLinkTags: { type: string, href: string, escapedTitle: string }[] = []
528
529 if (embed) {
530 oembedLinkTags.push({
531 type: 'application/json+oembed',
532 href: WEBSERVER.URL + '/services/oembed?url=' + encodeURIComponent(url),
533 escapedTitle
534 })
535 }
536
537 let tagsStr = ''
538
539 // Opengraph
540 Object.keys(openGraphMetaTags).forEach(tagName => {
541 const tagValue = openGraphMetaTags[tagName]
542
543 tagsStr += `<meta property="${tagName}" content="${tagValue}" />`
544 })
545
546 // Standard
547 Object.keys(standardMetaTags).forEach(tagName => {
548 const tagValue = standardMetaTags[tagName]
549
550 tagsStr += `<meta property="${tagName}" content="${tagValue}" />`
551 })
552
553 // Twitter card
554 Object.keys(twitterCardMetaTags).forEach(tagName => {
555 const tagValue = twitterCardMetaTags[tagName]
556
557 tagsStr += `<meta property="${tagName}" content="${tagValue}" />`
558 })
559
560 // OEmbed
561 for (const oembedLinkTag of oembedLinkTags) {
562 tagsStr += `<link rel="alternate" type="${oembedLinkTag.type}" href="${oembedLinkTag.href}" title="${oembedLinkTag.escapedTitle}" />`
563 }
564
565 // Schema.org
566 if (schemaTags) {
567 tagsStr += `<script type="application/ld+json">${JSON.stringify(schemaTags)}</script>`
568 }
569
570 // SEO, use origin URL
571 tagsStr += `<link rel="canonical" href="${originUrl}" />`
572
573 if (disallowIndexation) {
574 tagsStr += `<meta name="robots" content="noindex" />`
575 }
576
577 return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.META_TAGS, tagsStr)
578 }
579 }
580
581 function sendHTML (html: string, res: express.Response, localizedHTML: boolean = false) {
582 res.set('Content-Type', 'text/html; charset=UTF-8')
583
584 if (localizedHTML) {
585 res.set('Vary', 'Accept-Language')
586 }
587
588 return res.send(html)
589 }
590
591 async function serveIndexHTML (req: express.Request, res: express.Response) {
592 if (req.accepts(ACCEPT_HEADERS) === 'html' || !req.headers.accept) {
593 try {
594 await generateHTMLPage(req, res, req.params.language)
595 return
596 } catch (err) {
597 logger.error('Cannot generate HTML page.', { err })
598 return res.status(HttpStatusCode.INTERNAL_SERVER_ERROR_500).end()
599 }
600 }
601
602 return res.status(HttpStatusCode.NOT_ACCEPTABLE_406).end()
603 }
604
605 // ---------------------------------------------------------------------------
606
607 export {
608 ClientHtml,
609 sendHTML,
610 serveIndexHTML
611 }
612
613 async function generateHTMLPage (req: express.Request, res: express.Response, paramLang?: string) {
614 const html = await ClientHtml.getDefaultHTMLPage(req, res, paramLang)
615
616 return sendHTML(html, res, true)
617 }