1 import * as express from 'express'
2 import { readFile } from 'fs-extra'
3 import { join } from 'path'
4 import validator from 'validator'
5 import { escapeHTML } from '@shared/core-utils/renderer'
6 import { HTMLServerConfig } from '@shared/models'
7 import { buildFileLocale, getDefaultLocale, is18nLocale, POSSIBLE_LOCALES } from '../../shared/core-utils/i18n/i18n'
8 import { HttpStatusCode } from '../../shared/core-utils/miscs/http-error-codes'
9 import { VideoPlaylistPrivacy, VideoPrivacy } from '../../shared/models/videos'
10 import { isTestInstance, sha256 } from '../helpers/core-utils'
11 import { logger } from '../helpers/logger'
12 import { mdToPlainText } from '../helpers/markdown'
13 import { CONFIG } from '../initializers/config'
17 CUSTOM_HTML_TAG_COMMENTS,
20 PLUGIN_GLOBAL_CSS_PATH,
22 } from '../initializers/constants'
23 import { AccountModel } from '../models/account/account'
24 import { getActivityStreamDuration } from '../models/video/formatter/video-format-utils'
25 import { VideoModel } from '../models/video/video'
26 import { VideoChannelModel } from '../models/video/video-channel'
27 import { VideoPlaylistModel } from '../models/video/video-playlist'
28 import { MAccountActor, MChannelActor } from '../types/models'
29 import { ServerConfigManager } from './server-config-manager'
33 twitterCard: 'player' | 'summary' | 'summary_large_image'
62 private static htmlCache: { [path: string]: string } = {}
64 static invalidCache () {
65 logger.info('Cleaning HTML cache.')
67 ClientHtml.htmlCache = {}
70 static async getDefaultHTMLPage (req: express.Request, res: express.Response, paramLang?: string) {
71 const html = paramLang
72 ? await ClientHtml.getIndexHTML(req, res, paramLang)
73 : await ClientHtml.getIndexHTML(req, res)
75 let customHtml = ClientHtml.addTitleTag(html)
76 customHtml = ClientHtml.addDescriptionTag(customHtml)
81 static async getWatchHTMLPage (videoId: string, req: express.Request, res: express.Response) {
82 // Let Angular application handle errors
83 if (!validator.isInt(videoId) && !validator.isUUID(videoId, 4)) {
84 res.status(HttpStatusCode.NOT_FOUND_404)
85 return ClientHtml.getIndexHTML(req, res)
88 const [ html, video ] = await Promise.all([
89 ClientHtml.getIndexHTML(req, res),
90 VideoModel.loadWithBlacklist(videoId)
93 // Let Angular application handle errors
94 if (!video || video.privacy === VideoPrivacy.PRIVATE || video.privacy === VideoPrivacy.INTERNAL || video.VideoBlacklist) {
95 res.status(HttpStatusCode.NOT_FOUND_404)
99 let customHtml = ClientHtml.addTitleTag(html, escapeHTML(video.name))
100 customHtml = ClientHtml.addDescriptionTag(customHtml, mdToPlainText(video.description))
102 const url = WEBSERVER.URL + video.getWatchStaticPath()
103 const originUrl = video.url
104 const title = escapeHTML(video.name)
105 const siteName = escapeHTML(CONFIG.INSTANCE.NAME)
106 const description = mdToPlainText(video.description)
109 url: WEBSERVER.URL + video.getPreviewStaticPath()
113 url: WEBSERVER.URL + video.getEmbedStaticPath(),
114 createdAt: video.createdAt.toISOString(),
115 duration: getActivityStreamDuration(video.duration),
119 const ogType = 'video'
120 const twitterCard = CONFIG.SERVICES.TWITTER.WHITELISTED ? 'player' : 'summary_large_image'
121 const schemaType = 'VideoObject'
123 customHtml = ClientHtml.addTags(customHtml, {
139 static async getWatchPlaylistHTMLPage (videoPlaylistId: string, req: express.Request, res: express.Response) {
140 // Let Angular application handle errors
141 if (!validator.isInt(videoPlaylistId) && !validator.isUUID(videoPlaylistId, 4)) {
142 res.status(HttpStatusCode.NOT_FOUND_404)
143 return ClientHtml.getIndexHTML(req, res)
146 const [ html, videoPlaylist ] = await Promise.all([
147 ClientHtml.getIndexHTML(req, res),
148 VideoPlaylistModel.loadWithAccountAndChannel(videoPlaylistId, null)
151 // Let Angular application handle errors
152 if (!videoPlaylist || videoPlaylist.privacy === VideoPlaylistPrivacy.PRIVATE) {
153 res.status(HttpStatusCode.NOT_FOUND_404)
157 let customHtml = ClientHtml.addTitleTag(html, escapeHTML(videoPlaylist.name))
158 customHtml = ClientHtml.addDescriptionTag(customHtml, mdToPlainText(videoPlaylist.description))
160 const url = videoPlaylist.getWatchUrl()
161 const originUrl = videoPlaylist.url
162 const title = escapeHTML(videoPlaylist.name)
163 const siteName = escapeHTML(CONFIG.INSTANCE.NAME)
164 const description = mdToPlainText(videoPlaylist.description)
167 url: videoPlaylist.getThumbnailUrl()
171 url: WEBSERVER.URL + videoPlaylist.getEmbedStaticPath(),
172 createdAt: videoPlaylist.createdAt.toISOString()
176 numberOfItems: videoPlaylist.get('videosLength') as number
179 const ogType = 'video'
180 const twitterCard = CONFIG.SERVICES.TWITTER.WHITELISTED ? 'player' : 'summary'
181 const schemaType = 'ItemList'
183 customHtml = ClientHtml.addTags(customHtml, {
200 static async getAccountHTMLPage (nameWithHost: string, req: express.Request, res: express.Response) {
201 const accountModelPromise = AccountModel.loadByNameWithHost(nameWithHost)
202 return this.getAccountOrChannelHTMLPage(() => accountModelPromise, req, res)
205 static async getVideoChannelHTMLPage (nameWithHost: string, req: express.Request, res: express.Response) {
206 const videoChannelModelPromise = VideoChannelModel.loadByNameWithHostAndPopulateAccount(nameWithHost)
207 return this.getAccountOrChannelHTMLPage(() => videoChannelModelPromise, req, res)
210 static async getActorHTMLPage (nameWithHost: string, req: express.Request, res: express.Response) {
211 const [ account, channel ] = await Promise.all([
212 AccountModel.loadByNameWithHost(nameWithHost),
213 VideoChannelModel.loadByNameWithHostAndPopulateAccount(nameWithHost)
216 return this.getAccountOrChannelHTMLPage(() => Promise.resolve(account || channel), req, res)
219 static async getEmbedHTML () {
220 const path = ClientHtml.getEmbedPath()
222 if (!isTestInstance() && ClientHtml.htmlCache[path]) return ClientHtml.htmlCache[path]
224 const buffer = await readFile(path)
225 const serverConfig = await ServerConfigManager.Instance.getHTMLServerConfig()
227 let html = buffer.toString()
228 html = await ClientHtml.addAsyncPluginCSS(html)
229 html = ClientHtml.addCustomCSS(html)
230 html = ClientHtml.addTitleTag(html)
231 html = ClientHtml.addDescriptionTag(html)
232 html = ClientHtml.addServerConfig(html, serverConfig)
234 ClientHtml.htmlCache[path] = html
239 private static async getAccountOrChannelHTMLPage (
240 loader: () => Promise<MAccountActor | MChannelActor>,
241 req: express.Request,
242 res: express.Response
244 const [ html, entity ] = await Promise.all([
245 ClientHtml.getIndexHTML(req, res),
249 // Let Angular application handle errors
251 res.status(HttpStatusCode.NOT_FOUND_404)
252 return ClientHtml.getIndexHTML(req, res)
255 let customHtml = ClientHtml.addTitleTag(html, escapeHTML(entity.getDisplayName()))
256 customHtml = ClientHtml.addDescriptionTag(customHtml, mdToPlainText(entity.description))
258 const url = entity.getLocalUrl()
259 const originUrl = entity.Actor.url
260 const siteName = escapeHTML(CONFIG.INSTANCE.NAME)
261 const title = escapeHTML(entity.getDisplayName())
262 const description = mdToPlainText(entity.description)
265 url: entity.Actor.getAvatarUrl(),
266 width: ACTOR_IMAGES_SIZE.AVATARS.width,
267 height: ACTOR_IMAGES_SIZE.AVATARS.height
270 const ogType = 'website'
271 const twitterCard = 'summary'
272 const schemaType = 'ProfilePage'
274 customHtml = ClientHtml.addTags(customHtml, {
289 private static async getIndexHTML (req: express.Request, res: express.Response, paramLang?: string) {
290 const path = ClientHtml.getIndexPath(req, res, paramLang)
291 if (!isTestInstance() && ClientHtml.htmlCache[path]) return ClientHtml.htmlCache[path]
293 const buffer = await readFile(path)
294 const serverConfig = await ServerConfigManager.Instance.getHTMLServerConfig()
296 let html = buffer.toString()
298 if (paramLang) html = ClientHtml.addHtmlLang(html, paramLang)
299 html = ClientHtml.addManifestContentHash(html)
300 html = ClientHtml.addFaviconContentHash(html)
301 html = ClientHtml.addLogoContentHash(html)
302 html = ClientHtml.addCustomCSS(html)
303 html = ClientHtml.addServerConfig(html, serverConfig)
304 html = await ClientHtml.addAsyncPluginCSS(html)
306 ClientHtml.htmlCache[path] = html
311 private static getIndexPath (req: express.Request, res: express.Response, paramLang: string) {
314 // Check param lang validity
315 if (paramLang && is18nLocale(paramLang)) {
318 // Save locale in cookies
319 res.cookie('clientLanguage', lang, {
320 secure: WEBSERVER.SCHEME === 'https',
322 maxAge: 1000 * 3600 * 24 * 90 // 3 months
325 } else if (req.cookies.clientLanguage && is18nLocale(req.cookies.clientLanguage)) {
326 lang = req.cookies.clientLanguage
328 lang = req.acceptsLanguages(POSSIBLE_LOCALES) || getDefaultLocale()
331 return join(__dirname, '../../../client/dist/' + buildFileLocale(lang) + '/index.html')
334 private static getEmbedPath () {
335 return join(__dirname, '../../../client/dist/standalone/videos/embed.html')
338 private static addHtmlLang (htmlStringPage: string, paramLang: string) {
339 return htmlStringPage.replace('<html>', `<html lang="${paramLang}">`)
342 private static addManifestContentHash (htmlStringPage: string) {
343 return htmlStringPage.replace('[manifestContentHash]', FILES_CONTENT_HASH.MANIFEST)
346 private static addFaviconContentHash (htmlStringPage: string) {
347 return htmlStringPage.replace('[faviconContentHash]', FILES_CONTENT_HASH.FAVICON)
350 private static addLogoContentHash (htmlStringPage: string) {
351 return htmlStringPage.replace('[logoContentHash]', FILES_CONTENT_HASH.LOGO)
354 private static addTitleTag (htmlStringPage: string, title?: string) {
355 let text = title || CONFIG.INSTANCE.NAME
356 if (title) text += ` - ${CONFIG.INSTANCE.NAME}`
358 const titleTag = `<title>${text}</title>`
360 return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.TITLE, titleTag)
363 private static addDescriptionTag (htmlStringPage: string, description?: string) {
364 const content = description || CONFIG.INSTANCE.SHORT_DESCRIPTION
365 const descriptionTag = `<meta name="description" content="${content}" />`
367 return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.DESCRIPTION, descriptionTag)
370 private static addCustomCSS (htmlStringPage: string) {
371 const styleTag = `<style class="custom-css-style">${CONFIG.INSTANCE.CUSTOMIZATIONS.CSS}</style>`
373 return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.CUSTOM_CSS, styleTag)
376 private static addServerConfig (htmlStringPage: string, serverConfig: HTMLServerConfig) {
377 const serverConfigString = JSON.stringify(serverConfig)
378 const configScriptTag = `<script type="application/javascript">window.PeerTubeServerConfig = '${serverConfigString}'</script>`
380 return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.SERVER_CONFIG, configScriptTag)
383 private static async addAsyncPluginCSS (htmlStringPage: string) {
384 const globalCSSContent = await readFile(PLUGIN_GLOBAL_CSS_PATH)
385 if (globalCSSContent.byteLength === 0) return htmlStringPage
387 const fileHash = sha256(globalCSSContent)
388 const linkTag = `<link rel="stylesheet" href="/plugins/global.css?hash=${fileHash}" />`
390 return htmlStringPage.replace('</head>', linkTag + '</head>')
393 private static generateOpenGraphMetaTags (tags: Tags) {
395 'og:type': tags.ogType,
396 'og:site_name': tags.siteName,
397 'og:title': tags.title,
398 'og:image': tags.image.url
401 if (tags.image.width && tags.image.height) {
402 metaTags['og:image:width'] = tags.image.width
403 metaTags['og:image:height'] = tags.image.height
406 metaTags['og:url'] = tags.url
407 metaTags['og:description'] = mdToPlainText(tags.description)
410 metaTags['og:video:url'] = tags.embed.url
411 metaTags['og:video:secure_url'] = tags.embed.url
412 metaTags['og:video:type'] = 'text/html'
413 metaTags['og:video:width'] = EMBED_SIZE.width
414 metaTags['og:video:height'] = EMBED_SIZE.height
420 private static generateStandardMetaTags (tags: Tags) {
423 description: mdToPlainText(tags.description),
424 image: tags.image.url
428 private static generateTwitterCardMetaTags (tags: Tags) {
430 'twitter:card': tags.twitterCard,
431 'twitter:site': CONFIG.SERVICES.TWITTER.USERNAME,
432 'twitter:title': tags.title,
433 'twitter:description': tags.description,
434 'twitter:image': tags.image.url
437 if (tags.image.width && tags.image.height) {
438 metaTags['twitter:image:width'] = tags.image.width
439 metaTags['twitter:image:height'] = tags.image.height
442 if (tags.twitterCard === 'player') {
443 metaTags['twitter:player'] = tags.embed.url
444 metaTags['twitter:player:width'] = EMBED_SIZE.width
445 metaTags['twitter:player:height'] = EMBED_SIZE.height
451 private static generateSchemaTags (tags: Tags) {
453 '@context': 'http://schema.org',
454 '@type': tags.schemaType,
456 'description': tags.description,
457 'image': tags.image.url,
462 schema['numberOfItems'] = tags.list.numberOfItems
463 schema['thumbnailUrl'] = tags.image.url
467 schema['embedUrl'] = tags.embed.url
468 schema['uploadDate'] = tags.embed.createdAt
470 if (tags.embed.duration) schema['duration'] = tags.embed.duration
471 if (tags.embed.views) schema['iterationCount'] = tags.embed.views
473 schema['thumbnailUrl'] = tags.image.url
474 schema['contentUrl'] = tags.url
480 private static addTags (htmlStringPage: string, tagsValues: Tags) {
481 const openGraphMetaTags = this.generateOpenGraphMetaTags(tagsValues)
482 const standardMetaTags = this.generateStandardMetaTags(tagsValues)
483 const twitterCardMetaTags = this.generateTwitterCardMetaTags(tagsValues)
484 const schemaTags = this.generateSchemaTags(tagsValues)
486 const { url, title, embed, originUrl } = tagsValues
488 const oembedLinkTags: { type: string, href: string, title: string }[] = []
491 oembedLinkTags.push({
492 type: 'application/json+oembed',
493 href: WEBSERVER.URL + '/services/oembed?url=' + encodeURIComponent(url),
501 Object.keys(openGraphMetaTags).forEach(tagName => {
502 const tagValue = openGraphMetaTags[tagName]
504 tagsString += `<meta property="${tagName}" content="${tagValue}" />`
508 Object.keys(standardMetaTags).forEach(tagName => {
509 const tagValue = standardMetaTags[tagName]
511 tagsString += `<meta property="${tagName}" content="${tagValue}" />`
515 Object.keys(twitterCardMetaTags).forEach(tagName => {
516 const tagValue = twitterCardMetaTags[tagName]
518 tagsString += `<meta property="${tagName}" content="${tagValue}" />`
522 for (const oembedLinkTag of oembedLinkTags) {
523 tagsString += `<link rel="alternate" type="${oembedLinkTag.type}" href="${oembedLinkTag.href}" title="${oembedLinkTag.title}" />`
528 tagsString += `<script type="application/ld+json">${JSON.stringify(schemaTags)}</script>`
531 // SEO, use origin URL
532 tagsString += `<link rel="canonical" href="${originUrl}" />`
534 return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.META_TAGS, tagsString)
538 function sendHTML (html: string, res: express.Response) {
539 res.set('Content-Type', 'text/html; charset=UTF-8')
541 return res.send(html)
544 async function serveIndexHTML (req: express.Request, res: express.Response) {
545 if (req.accepts(ACCEPT_HEADERS) === 'html' ||
546 !req.headers.accept) {
548 await generateHTMLPage(req, res, req.params.language)
551 logger.error('Cannot generate HTML page.', err)
552 return res.status(HttpStatusCode.INTERNAL_SERVER_ERROR_500).end()
556 return res.status(HttpStatusCode.NOT_ACCEPTABLE_406).end()
559 // ---------------------------------------------------------------------------
567 async function generateHTMLPage (req: express.Request, res: express.Response, paramLang?: string) {
568 const html = await ClientHtml.getDefaultHTMLPage(req, res, paramLang)
570 return sendHTML(html, res)