1 import * as express from 'express'
2 import { buildFileLocale, getDefaultLocale, is18nLocale, POSSIBLE_LOCALES } from '../../shared/models/i18n/i18n'
5 CUSTOM_HTML_TAG_COMMENTS,
7 PLUGIN_GLOBAL_CSS_PATH,
10 } from '../initializers/constants'
11 import { join } from 'path'
12 import { escapeHTML, sha256 } from '../helpers/core-utils'
13 import { VideoModel } from '../models/video/video'
14 import { VideoPlaylistModel } from '../models/video/video-playlist'
15 import validator from 'validator'
16 import { VideoPrivacy, VideoPlaylistPrivacy } from '../../shared/models/videos'
17 import { readFile } from 'fs-extra'
18 import { getActivityStreamDuration } from '../models/video/video-format-utils'
19 import { AccountModel } from '../models/account/account'
20 import { VideoChannelModel } from '../models/video/video-channel'
21 import * as Bluebird from 'bluebird'
22 import { CONFIG } from '../initializers/config'
23 import { logger } from '../helpers/logger'
24 import { MAccountActor, MChannelActor } from '../types/models'
26 export class ClientHtml {
28 private static htmlCache: { [path: string]: string } = {}
30 static invalidCache () {
31 logger.info('Cleaning HTML cache.')
33 ClientHtml.htmlCache = {}
36 static async getDefaultHTMLPage (req: express.Request, res: express.Response, paramLang?: string) {
37 const html = paramLang
38 ? await ClientHtml.getIndexHTML(req, res, paramLang)
39 : await ClientHtml.getIndexHTML(req, res)
41 let customHtml = ClientHtml.addTitleTag(html)
42 customHtml = ClientHtml.addDescriptionTag(customHtml)
47 static async getWatchHTMLPage (videoId: string, req: express.Request, res: express.Response) {
48 // Let Angular application handle errors
49 if (!validator.isInt(videoId) && !validator.isUUID(videoId, 4)) {
51 return ClientHtml.getIndexHTML(req, res)
54 const [ html, video ] = await Promise.all([
55 ClientHtml.getIndexHTML(req, res),
56 VideoModel.loadWithBlacklist(videoId)
59 // Let Angular application handle errors
60 if (!video || video.privacy === VideoPrivacy.PRIVATE || video.privacy === VideoPrivacy.INTERNAL || video.VideoBlacklist) {
65 let customHtml = ClientHtml.addTitleTag(html, escapeHTML(video.name))
66 customHtml = ClientHtml.addDescriptionTag(customHtml, escapeHTML(video.description))
68 const url = WEBSERVER.URL + video.getWatchStaticPath()
69 const title = escapeHTML(video.name)
70 const description = escapeHTML(video.description)
73 url: WEBSERVER.URL + video.getPreviewStaticPath()
77 url: WEBSERVER.URL + video.getEmbedStaticPath(),
78 createdAt: video.createdAt.toISOString(),
79 duration: getActivityStreamDuration(video.duration),
83 const ogType = 'video'
84 const twitterCard = CONFIG.SERVICES.TWITTER.WHITELISTED ? 'player' : 'summary_large_image'
85 const schemaType = 'VideoObject'
87 customHtml = ClientHtml.addTags(customHtml, { url, title, description, image, embed, ogType, twitterCard, schemaType })
92 static async getWatchPlaylistHTMLPage (videoPlaylistId: string, req: express.Request, res: express.Response) {
93 // Let Angular application handle errors
94 if (!validator.isInt(videoPlaylistId) && !validator.isUUID(videoPlaylistId, 4)) {
96 return ClientHtml.getIndexHTML(req, res)
99 const [ html, videoPlaylist ] = await Promise.all([
100 ClientHtml.getIndexHTML(req, res),
101 VideoPlaylistModel.loadWithAccountAndChannel(videoPlaylistId, null)
104 // Let Angular application handle errors
105 if (!videoPlaylist || videoPlaylist.privacy === VideoPlaylistPrivacy.PRIVATE) {
110 let customHtml = ClientHtml.addTitleTag(html, escapeHTML(videoPlaylist.name))
111 customHtml = ClientHtml.addDescriptionTag(customHtml, escapeHTML(videoPlaylist.description))
113 const url = videoPlaylist.getWatchUrl()
114 const title = escapeHTML(videoPlaylist.name)
115 const description = escapeHTML(videoPlaylist.description)
118 url: videoPlaylist.getThumbnailUrl()
122 numberOfItems: videoPlaylist.get('videosLength')
125 const ogType = 'video'
126 const twitterCard = 'summary'
127 const schemaType = 'ItemList'
129 customHtml = ClientHtml.addTags(customHtml, { url, title, description, image, list, ogType, twitterCard, schemaType })
134 static async getAccountHTMLPage (nameWithHost: string, req: express.Request, res: express.Response) {
135 return this.getAccountOrChannelHTMLPage(() => AccountModel.loadByNameWithHost(nameWithHost), req, res)
138 static async getVideoChannelHTMLPage (nameWithHost: string, req: express.Request, res: express.Response) {
139 return this.getAccountOrChannelHTMLPage(() => VideoChannelModel.loadByNameWithHostAndPopulateAccount(nameWithHost), req, res)
142 private static async getAccountOrChannelHTMLPage (
143 loader: () => Bluebird<MAccountActor | MChannelActor>,
144 req: express.Request,
145 res: express.Response
147 const [ html, entity ] = await Promise.all([
148 ClientHtml.getIndexHTML(req, res),
152 // Let Angular application handle errors
155 return ClientHtml.getIndexHTML(req, res)
158 let customHtml = ClientHtml.addTitleTag(html, escapeHTML(entity.getDisplayName()))
159 customHtml = ClientHtml.addDescriptionTag(customHtml, escapeHTML(entity.description))
161 const url = entity.Actor.url
162 const title = escapeHTML(entity.getDisplayName())
163 const description = escapeHTML(entity.description)
166 url: entity.Actor.getAvatarUrl(),
167 width: AVATARS_SIZE.width,
168 height: AVATARS_SIZE.height
171 const ogType = 'website'
172 const twitterCard = 'summary'
173 const schemaType = 'ProfilePage'
175 customHtml = ClientHtml.addTags(customHtml, { url, title, description, image, ogType, twitterCard, schemaType })
180 private static async getIndexHTML (req: express.Request, res: express.Response, paramLang?: string) {
181 const path = ClientHtml.getIndexPath(req, res, paramLang)
182 if (ClientHtml.htmlCache[path]) return ClientHtml.htmlCache[path]
184 const buffer = await readFile(path)
186 let html = buffer.toString()
188 if (paramLang) html = ClientHtml.addHtmlLang(html, paramLang)
189 html = ClientHtml.addManifestContentHash(html)
190 html = ClientHtml.addFaviconContentHash(html)
191 html = ClientHtml.addLogoContentHash(html)
192 html = ClientHtml.addCustomCSS(html)
193 html = await ClientHtml.addAsyncPluginCSS(html)
195 ClientHtml.htmlCache[path] = html
200 private static getIndexPath (req: express.Request, res: express.Response, paramLang: string) {
203 // Check param lang validity
204 if (paramLang && is18nLocale(paramLang)) {
207 // Save locale in cookies
208 res.cookie('clientLanguage', lang, {
209 secure: WEBSERVER.SCHEME === 'https',
211 maxAge: 1000 * 3600 * 24 * 90 // 3 months
214 } else if (req.cookies.clientLanguage && is18nLocale(req.cookies.clientLanguage)) {
215 lang = req.cookies.clientLanguage
217 lang = req.acceptsLanguages(POSSIBLE_LOCALES) || getDefaultLocale()
220 return join(__dirname, '../../../client/dist/' + buildFileLocale(lang) + '/index.html')
223 private static addHtmlLang (htmlStringPage: string, paramLang: string) {
224 return htmlStringPage.replace('<html>', `<html lang="${paramLang}">`)
227 private static addManifestContentHash (htmlStringPage: string) {
228 return htmlStringPage.replace('[manifestContentHash]', FILES_CONTENT_HASH.MANIFEST)
231 private static addFaviconContentHash (htmlStringPage: string) {
232 return htmlStringPage.replace('[faviconContentHash]', FILES_CONTENT_HASH.FAVICON)
235 private static addLogoContentHash (htmlStringPage: string) {
236 return htmlStringPage.replace('[logoContentHash]', FILES_CONTENT_HASH.LOGO)
239 private static addTitleTag (htmlStringPage: string, title?: string) {
240 let text = title || CONFIG.INSTANCE.NAME
241 if (title) text += ` - ${CONFIG.INSTANCE.NAME}`
243 const titleTag = `<title>${text}</title>`
245 return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.TITLE, titleTag)
248 private static addDescriptionTag (htmlStringPage: string, description?: string) {
249 const content = description || CONFIG.INSTANCE.SHORT_DESCRIPTION
250 const descriptionTag = `<meta name="description" content="${content}" />`
252 return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.DESCRIPTION, descriptionTag)
255 private static addCustomCSS (htmlStringPage: string) {
256 const styleTag = `<style class="custom-css-style">${CONFIG.INSTANCE.CUSTOMIZATIONS.CSS}</style>`
258 return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.CUSTOM_CSS, styleTag)
261 private static async addAsyncPluginCSS (htmlStringPage: string) {
262 const globalCSSContent = await readFile(PLUGIN_GLOBAL_CSS_PATH)
263 if (globalCSSContent.byteLength === 0) return htmlStringPage
265 const fileHash = sha256(globalCSSContent)
266 const linkTag = `<link rel="stylesheet" href="/plugins/global.css?hash=${fileHash}" />`
268 return htmlStringPage.replace('</head>', linkTag + '</head>')
271 private static generateOpenGraphMetaTags (tags) {
273 'og:type': tags.ogType,
274 'og:title': tags.title,
275 'og:image': tags.image.url
278 if (tags.image.width && tags.image.height) {
279 metaTags['og:image:width'] = tags.image.width
280 metaTags['og:image:height'] = tags.image.height
283 metaTags['og:url'] = tags.url
284 metaTags['og:description'] = tags.description
287 metaTags['og:video:url'] = tags.embed.url
288 metaTags['og:video:secure_url'] = tags.embed.url
289 metaTags['og:video:type'] = 'text/html'
290 metaTags['og:video:width'] = EMBED_SIZE.width
291 metaTags['og:video:height'] = EMBED_SIZE.height
297 private static generateStandardMetaTags (tags) {
300 description: tags.description,
301 image: tags.image.url
305 private static generateTwitterCardMetaTags (tags) {
307 'twitter:card': tags.twitterCard,
308 'twitter:site': CONFIG.SERVICES.TWITTER.USERNAME,
309 'twitter:title': tags.title,
310 'twitter:description': tags.description,
311 'twitter:image': tags.image.url
314 if (tags.image.width && tags.image.height) {
315 metaTags['twitter:image:width'] = tags.image.width
316 metaTags['twitter:image:height'] = tags.image.height
322 private static generateSchemaTags (tags) {
324 '@context': 'http://schema.org',
325 '@type': tags.schemaType,
327 'description': tags.description,
328 'image': tags.image.url,
333 schema['numberOfItems'] = tags.list.numberOfItems
334 schema['thumbnailUrl'] = tags.image.url
338 schema['embedUrl'] = tags.embed.url
339 schema['uploadDate'] = tags.embed.createdAt
340 schema['duration'] = tags.embed.duration
341 schema['iterationCount'] = tags.embed.views
342 schema['thumbnailUrl'] = tags.image.url
343 schema['contentUrl'] = tags.url
349 private static addTags (htmlStringPage: string, tagsValues: any) {
350 const openGraphMetaTags = this.generateOpenGraphMetaTags(tagsValues)
351 const standardMetaTags = this.generateStandardMetaTags(tagsValues)
352 const twitterCardMetaTags = this.generateTwitterCardMetaTags(tagsValues)
353 const schemaTags = this.generateSchemaTags(tagsValues)
355 const { url, title, embed } = tagsValues
357 const oembedLinkTags = []
360 oembedLinkTags.push({
361 type: 'application/json+oembed',
362 href: WEBSERVER.URL + '/services/oembed?url=' + encodeURIComponent(url),
370 Object.keys(openGraphMetaTags).forEach(tagName => {
371 const tagValue = openGraphMetaTags[tagName]
373 tagsString += `<meta property="${tagName}" content="${tagValue}" />`
377 Object.keys(standardMetaTags).forEach(tagName => {
378 const tagValue = standardMetaTags[tagName]
380 tagsString += `<meta property="${tagName}" content="${tagValue}" />`
384 Object.keys(twitterCardMetaTags).forEach(tagName => {
385 const tagValue = twitterCardMetaTags[tagName]
387 tagsString += `<meta property="${tagName}" content="${tagValue}" />`
391 for (const oembedLinkTag of oembedLinkTags) {
392 tagsString += `<link rel="alternate" type="${oembedLinkTag.type}" href="${oembedLinkTag.href}" title="${oembedLinkTag.title}" />`
397 tagsString += `<script type="application/ld+json">${JSON.stringify(schemaTags)}</script>`
400 // SEO, use origin URL
401 tagsString += `<link rel="canonical" href="${url}" />`
403 return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.META_TAGS, tagsString)