1 import express from 'express'
2 import { readFile } from 'fs-extra'
3 import memoizee from 'memoizee'
4 import { join } from 'path'
5 import validator from 'validator'
6 import { toCompleteUUID } from '@server/helpers/custom-validators/misc'
7 import { ActorImageModel } from '@server/models/actor/actor-image'
8 import { root } from '@shared/core-utils'
9 import { escapeHTML } from '@shared/core-utils/renderer'
10 import { sha256 } from '@shared/extra-utils'
11 import { HTMLServerConfig } from '@shared/models'
12 import { buildFileLocale, getDefaultLocale, is18nLocale, POSSIBLE_LOCALES } from '../../shared/core-utils/i18n/i18n'
13 import { HttpStatusCode } from '../../shared/models/http/http-error-codes'
14 import { VideoPlaylistPrivacy, VideoPrivacy } from '../../shared/models/videos'
15 import { isTestInstance } from '../helpers/core-utils'
16 import { logger } from '../helpers/logger'
17 import { mdToOneLinePlainText } from '../helpers/markdown'
18 import { CONFIG } from '../initializers/config'
21 CUSTOM_HTML_TAG_COMMENTS,
26 PLUGIN_GLOBAL_CSS_PATH,
28 } from '../initializers/constants'
29 import { AccountModel } from '../models/account/account'
30 import { getActivityStreamDuration } from '../models/video/formatter/video-format-utils'
31 import { VideoModel } from '../models/video/video'
32 import { VideoChannelModel } from '../models/video/video-channel'
33 import { VideoPlaylistModel } from '../models/video/video-playlist'
34 import { MAccountActor, MChannelActor } from '../types/models'
35 import { getBiggestActorImage } from './actor-image'
36 import { ServerConfigManager } from './server-config-manager'
38 const getPlainTextDescriptionCached = memoizee(mdToOneLinePlainText, {
39 maxAge: MEMOIZE_TTL.MD_TO_PLAIN_TEXT_CLIENT_HTML,
40 max: MEMOIZE_LENGTH.MD_TO_PLAIN_TEXT_CLIENT_HTML
45 twitterCard: 'player' | 'summary' | 'summary_large_image'
52 escapedSiteName: string
54 escapedDescription: string
59 disallowIndexation?: boolean
77 private static htmlCache: { [path: string]: string } = {}
79 static invalidCache () {
80 logger.info('Cleaning HTML cache.')
82 ClientHtml.htmlCache = {}
85 static async getDefaultHTMLPage (req: express.Request, res: express.Response, paramLang?: string) {
86 const html = paramLang
87 ? await ClientHtml.getIndexHTML(req, res, paramLang)
88 : await ClientHtml.getIndexHTML(req, res)
90 let customHtml = ClientHtml.addTitleTag(html)
91 customHtml = ClientHtml.addDescriptionTag(customHtml)
96 static async getWatchHTMLPage (videoIdArg: string, req: express.Request, res: express.Response) {
97 const videoId = toCompleteUUID(videoIdArg)
99 // Let Angular application handle errors
100 if (!validator.isInt(videoId) && !validator.isUUID(videoId, 4)) {
101 res.status(HttpStatusCode.NOT_FOUND_404)
102 return ClientHtml.getIndexHTML(req, res)
105 const [ html, video ] = await Promise.all([
106 ClientHtml.getIndexHTML(req, res),
107 VideoModel.loadWithBlacklist(videoId)
110 // Let Angular application handle errors
111 if (!video || video.privacy === VideoPrivacy.PRIVATE || video.privacy === VideoPrivacy.INTERNAL || video.VideoBlacklist) {
112 res.status(HttpStatusCode.NOT_FOUND_404)
115 const description = getPlainTextDescriptionCached(video.description)
117 let customHtml = ClientHtml.addTitleTag(html, video.name)
118 customHtml = ClientHtml.addDescriptionTag(customHtml, description)
120 const url = WEBSERVER.URL + video.getWatchStaticPath()
121 const originUrl = video.url
122 const title = video.name
123 const siteName = CONFIG.INSTANCE.NAME
126 url: WEBSERVER.URL + video.getPreviewStaticPath()
130 url: WEBSERVER.URL + video.getEmbedStaticPath(),
131 createdAt: video.createdAt.toISOString(),
132 duration: getActivityStreamDuration(video.duration),
136 const ogType = 'video'
137 const twitterCard = CONFIG.SERVICES.TWITTER.WHITELISTED ? 'player' : 'summary_large_image'
138 const schemaType = 'VideoObject'
140 customHtml = ClientHtml.addTags(customHtml, {
143 escapedSiteName: escapeHTML(siteName),
144 escapedTitle: escapeHTML(title),
145 escapedDescription: escapeHTML(description),
156 static async getWatchPlaylistHTMLPage (videoPlaylistIdArg: string, req: express.Request, res: express.Response) {
157 const videoPlaylistId = toCompleteUUID(videoPlaylistIdArg)
159 // Let Angular application handle errors
160 if (!validator.isInt(videoPlaylistId) && !validator.isUUID(videoPlaylistId, 4)) {
161 res.status(HttpStatusCode.NOT_FOUND_404)
162 return ClientHtml.getIndexHTML(req, res)
165 const [ html, videoPlaylist ] = await Promise.all([
166 ClientHtml.getIndexHTML(req, res),
167 VideoPlaylistModel.loadWithAccountAndChannel(videoPlaylistId, null)
170 // Let Angular application handle errors
171 if (!videoPlaylist || videoPlaylist.privacy === VideoPlaylistPrivacy.PRIVATE) {
172 res.status(HttpStatusCode.NOT_FOUND_404)
176 const description = getPlainTextDescriptionCached(videoPlaylist.description)
178 let customHtml = ClientHtml.addTitleTag(html, videoPlaylist.name)
179 customHtml = ClientHtml.addDescriptionTag(customHtml, description)
181 const url = WEBSERVER.URL + videoPlaylist.getWatchStaticPath()
182 const originUrl = videoPlaylist.url
183 const title = videoPlaylist.name
184 const siteName = CONFIG.INSTANCE.NAME
187 url: videoPlaylist.getThumbnailUrl()
191 url: WEBSERVER.URL + videoPlaylist.getEmbedStaticPath(),
192 createdAt: videoPlaylist.createdAt.toISOString()
196 numberOfItems: videoPlaylist.get('videosLength') as number
199 const ogType = 'video'
200 const twitterCard = CONFIG.SERVICES.TWITTER.WHITELISTED ? 'player' : 'summary'
201 const schemaType = 'ItemList'
203 customHtml = ClientHtml.addTags(customHtml, {
206 escapedSiteName: escapeHTML(siteName),
207 escapedTitle: escapeHTML(title),
208 escapedDescription: escapeHTML(description),
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)
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)
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)
236 return this.getAccountOrChannelHTMLPage(() => Promise.resolve(account || channel), req, res)
239 static async getEmbedHTML () {
240 const path = ClientHtml.getEmbedPath()
242 if (!isTestInstance() && ClientHtml.htmlCache[path]) return ClientHtml.htmlCache[path]
244 const buffer = await readFile(path)
245 const serverConfig = await ServerConfigManager.Instance.getHTMLServerConfig()
247 let html = buffer.toString()
248 html = await ClientHtml.addAsyncPluginCSS(html)
249 html = ClientHtml.addCustomCSS(html)
250 html = ClientHtml.addTitleTag(html)
251 html = ClientHtml.addDescriptionTag(html)
252 html = ClientHtml.addServerConfig(html, serverConfig)
254 ClientHtml.htmlCache[path] = html
259 private static async getAccountOrChannelHTMLPage (
260 loader: () => Promise<MAccountActor | MChannelActor>,
261 req: express.Request,
262 res: express.Response
264 const [ html, entity ] = await Promise.all([
265 ClientHtml.getIndexHTML(req, res),
269 // Let Angular application handle errors
271 res.status(HttpStatusCode.NOT_FOUND_404)
272 return ClientHtml.getIndexHTML(req, res)
275 const description = getPlainTextDescriptionCached(entity.description)
277 let customHtml = ClientHtml.addTitleTag(html, entity.getDisplayName())
278 customHtml = ClientHtml.addDescriptionTag(customHtml, description)
280 const url = entity.getLocalUrl()
281 const originUrl = entity.Actor.url
282 const siteName = CONFIG.INSTANCE.NAME
283 const title = entity.getDisplayName()
285 const avatar = getBiggestActorImage(entity.Actor.Avatars)
287 url: ActorImageModel.getImageUrl(avatar),
288 width: avatar?.width,
289 height: avatar?.height
292 const ogType = 'website'
293 const twitterCard = 'summary'
294 const schemaType = 'ProfilePage'
296 customHtml = ClientHtml.addTags(customHtml, {
299 escapedTitle: escapeHTML(title),
300 escapedSiteName: escapeHTML(siteName),
301 escapedDescription: escapeHTML(description),
306 disallowIndexation: !entity.Actor.isOwned()
312 private static async getIndexHTML (req: express.Request, res: express.Response, paramLang?: string) {
313 const path = ClientHtml.getIndexPath(req, res, paramLang)
314 if (!isTestInstance() && ClientHtml.htmlCache[path]) return ClientHtml.htmlCache[path]
316 const buffer = await readFile(path)
317 const serverConfig = await ServerConfigManager.Instance.getHTMLServerConfig()
319 let html = buffer.toString()
321 html = ClientHtml.addManifestContentHash(html)
322 html = ClientHtml.addFaviconContentHash(html)
323 html = ClientHtml.addLogoContentHash(html)
324 html = ClientHtml.addCustomCSS(html)
325 html = ClientHtml.addServerConfig(html, serverConfig)
326 html = await ClientHtml.addAsyncPluginCSS(html)
328 ClientHtml.htmlCache[path] = html
333 private static getIndexPath (req: express.Request, res: express.Response, paramLang: string) {
336 // Check param lang validity
337 if (paramLang && is18nLocale(paramLang)) {
340 // Save locale in cookies
341 res.cookie('clientLanguage', lang, {
342 secure: WEBSERVER.SCHEME === 'https',
344 maxAge: 1000 * 3600 * 24 * 90 // 3 months
347 } else if (req.cookies.clientLanguage && is18nLocale(req.cookies.clientLanguage)) {
348 lang = req.cookies.clientLanguage
350 lang = req.acceptsLanguages(POSSIBLE_LOCALES) || getDefaultLocale()
354 'Serving %s HTML language', buildFileLocale(lang),
355 { cookie: req.cookies?.clientLanguage, paramLang, acceptLanguage: req.headers['accept-language'] }
358 return join(root(), 'client', 'dist', buildFileLocale(lang), 'index.html')
361 private static getEmbedPath () {
362 return join(root(), 'client', 'dist', 'standalone', 'videos', 'embed.html')
365 private static addManifestContentHash (htmlStringPage: string) {
366 return htmlStringPage.replace('[manifestContentHash]', FILES_CONTENT_HASH.MANIFEST)
369 private static addFaviconContentHash (htmlStringPage: string) {
370 return htmlStringPage.replace('[faviconContentHash]', FILES_CONTENT_HASH.FAVICON)
373 private static addLogoContentHash (htmlStringPage: string) {
374 return htmlStringPage.replace('[logoContentHash]', FILES_CONTENT_HASH.LOGO)
377 private static addTitleTag (htmlStringPage: string, title?: string) {
378 let text = title || CONFIG.INSTANCE.NAME
379 if (title) text += ` - ${CONFIG.INSTANCE.NAME}`
381 const titleTag = `<title>${escapeHTML(text)}</title>`
383 return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.TITLE, titleTag)
386 private static addDescriptionTag (htmlStringPage: string, description?: string) {
387 const content = description || CONFIG.INSTANCE.SHORT_DESCRIPTION
388 const descriptionTag = `<meta name="description" content="${escapeHTML(content)}" />`
390 return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.DESCRIPTION, descriptionTag)
393 private static addCustomCSS (htmlStringPage: string) {
394 const styleTag = `<style class="custom-css-style">${CONFIG.INSTANCE.CUSTOMIZATIONS.CSS}</style>`
396 return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.CUSTOM_CSS, styleTag)
399 private static addServerConfig (htmlStringPage: string, serverConfig: HTMLServerConfig) {
400 // Stringify the JSON object, and then stringify the string object so we can inject it into the HTML
401 const serverConfigString = JSON.stringify(JSON.stringify(serverConfig))
402 const configScriptTag = `<script type="application/javascript">window.PeerTubeServerConfig = ${serverConfigString}</script>`
404 return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.SERVER_CONFIG, configScriptTag)
407 private static async addAsyncPluginCSS (htmlStringPage: string) {
408 const globalCSSContent = await readFile(PLUGIN_GLOBAL_CSS_PATH)
409 if (globalCSSContent.byteLength === 0) return htmlStringPage
411 const fileHash = sha256(globalCSSContent)
412 const linkTag = `<link rel="stylesheet" href="/plugins/global.css?hash=${fileHash}" />`
414 return htmlStringPage.replace('</head>', linkTag + '</head>')
417 private static generateOpenGraphMetaTags (tags: Tags) {
419 'og:type': tags.ogType,
420 'og:site_name': tags.escapedSiteName,
421 'og:title': tags.escapedTitle,
422 'og:image': tags.image.url
425 if (tags.image.width && tags.image.height) {
426 metaTags['og:image:width'] = tags.image.width
427 metaTags['og:image:height'] = tags.image.height
430 metaTags['og:url'] = tags.url
431 metaTags['og:description'] = tags.escapedDescription
434 metaTags['og:video:url'] = tags.embed.url
435 metaTags['og:video:secure_url'] = tags.embed.url
436 metaTags['og:video:type'] = 'text/html'
437 metaTags['og:video:width'] = EMBED_SIZE.width
438 metaTags['og:video:height'] = EMBED_SIZE.height
444 private static generateStandardMetaTags (tags: Tags) {
446 name: tags.escapedTitle,
447 description: tags.escapedDescription,
448 image: tags.image.url
452 private static generateTwitterCardMetaTags (tags: Tags) {
454 'twitter:card': tags.twitterCard,
455 'twitter:site': CONFIG.SERVICES.TWITTER.USERNAME,
456 'twitter:title': tags.escapedTitle,
457 'twitter:description': tags.escapedDescription,
458 'twitter:image': tags.image.url
461 if (tags.image.width && tags.image.height) {
462 metaTags['twitter:image:width'] = tags.image.width
463 metaTags['twitter:image:height'] = tags.image.height
466 if (tags.twitterCard === 'player') {
467 metaTags['twitter:player'] = tags.embed.url
468 metaTags['twitter:player:width'] = EMBED_SIZE.width
469 metaTags['twitter:player:height'] = EMBED_SIZE.height
475 private static generateSchemaTags (tags: Tags) {
477 '@context': 'http://schema.org',
478 '@type': tags.schemaType,
479 'name': tags.escapedTitle,
480 'description': tags.escapedDescription,
481 'image': tags.image.url,
486 schema['numberOfItems'] = tags.list.numberOfItems
487 schema['thumbnailUrl'] = tags.image.url
491 schema['embedUrl'] = tags.embed.url
492 schema['uploadDate'] = tags.embed.createdAt
494 if (tags.embed.duration) schema['duration'] = tags.embed.duration
495 if (tags.embed.views) schema['iterationCount'] = tags.embed.views
497 schema['thumbnailUrl'] = tags.image.url
498 schema['contentUrl'] = tags.url
504 private static addTags (htmlStringPage: string, tagsValues: Tags) {
505 const openGraphMetaTags = this.generateOpenGraphMetaTags(tagsValues)
506 const standardMetaTags = this.generateStandardMetaTags(tagsValues)
507 const twitterCardMetaTags = this.generateTwitterCardMetaTags(tagsValues)
508 const schemaTags = this.generateSchemaTags(tagsValues)
510 const { url, escapedTitle, embed, originUrl, disallowIndexation } = tagsValues
512 const oembedLinkTags: { type: string, href: string, escapedTitle: string }[] = []
515 oembedLinkTags.push({
516 type: 'application/json+oembed',
517 href: WEBSERVER.URL + '/services/oembed?url=' + encodeURIComponent(url),
525 Object.keys(openGraphMetaTags).forEach(tagName => {
526 const tagValue = openGraphMetaTags[tagName]
528 tagsStr += `<meta property="${tagName}" content="${tagValue}" />`
532 Object.keys(standardMetaTags).forEach(tagName => {
533 const tagValue = standardMetaTags[tagName]
535 tagsStr += `<meta property="${tagName}" content="${tagValue}" />`
539 Object.keys(twitterCardMetaTags).forEach(tagName => {
540 const tagValue = twitterCardMetaTags[tagName]
542 tagsStr += `<meta property="${tagName}" content="${tagValue}" />`
546 for (const oembedLinkTag of oembedLinkTags) {
547 tagsStr += `<link rel="alternate" type="${oembedLinkTag.type}" href="${oembedLinkTag.href}" title="${oembedLinkTag.escapedTitle}" />`
552 tagsStr += `<script type="application/ld+json">${JSON.stringify(schemaTags)}</script>`
555 // SEO, use origin URL
556 tagsStr += `<link rel="canonical" href="${originUrl}" />`
558 if (disallowIndexation) {
559 tagsStr += `<meta name="robots" content="noindex" />`
562 return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.META_TAGS, tagsStr)
566 function sendHTML (html: string, res: express.Response, localizedHTML: boolean = false) {
567 res.set('Content-Type', 'text/html; charset=UTF-8')
570 res.set('Vary', 'Accept-Language')
573 return res.send(html)
576 async function serveIndexHTML (req: express.Request, res: express.Response) {
577 if (req.accepts(ACCEPT_HEADERS) === 'html' || !req.headers.accept) {
579 await generateHTMLPage(req, res, req.params.language)
582 logger.error('Cannot generate HTML page.', err)
583 return res.status(HttpStatusCode.INTERNAL_SERVER_ERROR_500).end()
587 return res.status(HttpStatusCode.NOT_ACCEPTABLE_406).end()
590 // ---------------------------------------------------------------------------
598 async function generateHTMLPage (req: express.Request, res: express.Response, paramLang?: string) {
599 const html = await ClientHtml.getDefaultHTMLPage(req, res, paramLang)
601 return sendHTML(html, res, true)