server/lib/client-html.ts

   1 import * as express from 'express'
   2 import { buildFileLocale, getDefaultLocale, is18nLocale, POSSIBLE_LOCALES } from '../../shared/core-utils/i18n/i18n'
   3 import {
   4   AVATARS_SIZE,
   5   CUSTOM_HTML_TAG_COMMENTS,
   6   EMBED_SIZE,
   7   PLUGIN_GLOBAL_CSS_PATH,
   8   WEBSERVER,
   9   FILES_CONTENT_HASH
  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'
  25
  26 export class ClientHtml {
  27
  28   private static htmlCache: { [path: string]: string } = {}
  29
  30   static invalidCache () {
  31     logger.info('Cleaning HTML cache.')
  32
  33     ClientHtml.htmlCache = {}
  34   }
  35
  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)
  40
  41     let customHtml = ClientHtml.addTitleTag(html)
  42     customHtml = ClientHtml.addDescriptionTag(customHtml)
  43
  44     return customHtml
  45   }
  46
  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)) {
  50       res.status(404)
  51       return ClientHtml.getIndexHTML(req, res)
  52     }
  53
  54     const [ html, video ] = await Promise.all([
  55       ClientHtml.getIndexHTML(req, res),
  56       VideoModel.loadWithBlacklist(videoId)
  57     ])
  58
  59     // Let Angular application handle errors
  60     if (!video || video.privacy === VideoPrivacy.PRIVATE || video.privacy === VideoPrivacy.INTERNAL || video.VideoBlacklist) {
  61       res.status(404)
  62       return html
  63     }
  64
  65     let customHtml = ClientHtml.addTitleTag(html, escapeHTML(video.name))
  66     customHtml = ClientHtml.addDescriptionTag(customHtml, escapeHTML(video.description))
  67
  68     const url = WEBSERVER.URL + video.getWatchStaticPath()
  69     const title = escapeHTML(video.name)
  70     const description = escapeHTML(video.description)
  71
  72     const image = {
  73       url: WEBSERVER.URL + video.getPreviewStaticPath()
  74     }
  75
  76     const embed = {
  77       url: WEBSERVER.URL + video.getEmbedStaticPath(),
  78       createdAt: video.createdAt.toISOString(),
  79       duration: getActivityStreamDuration(video.duration),
  80       views: video.views
  81     }
  82
  83     const ogType = 'video'
  84     const twitterCard = CONFIG.SERVICES.TWITTER.WHITELISTED ? 'player' : 'summary_large_image'
  85     const schemaType = 'VideoObject'
  86
  87     customHtml = ClientHtml.addTags(customHtml, { url, title, description, image, embed, ogType, twitterCard, schemaType })
  88
  89     return customHtml
  90   }
  91
  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)) {
  95       res.status(404)
  96       return ClientHtml.getIndexHTML(req, res)
  97     }
  98
  99     const [ html, videoPlaylist ] = await Promise.all([
 100       ClientHtml.getIndexHTML(req, res),
 101       VideoPlaylistModel.loadWithAccountAndChannel(videoPlaylistId, null)
 102     ])
 103
 104     // Let Angular application handle errors
 105     if (!videoPlaylist || videoPlaylist.privacy === VideoPlaylistPrivacy.PRIVATE) {
 106       res.status(404)
 107       return html
 108     }
 109
 110     let customHtml = ClientHtml.addTitleTag(html, escapeHTML(videoPlaylist.name))
 111     customHtml = ClientHtml.addDescriptionTag(customHtml, escapeHTML(videoPlaylist.description))
 112
 113     const url = videoPlaylist.getWatchUrl()
 114     const title = escapeHTML(videoPlaylist.name)
 115     const description = escapeHTML(videoPlaylist.description)
 116
 117     const image = {
 118       url: videoPlaylist.getThumbnailUrl()
 119     }
 120
 121     const list = {
 122       numberOfItems: videoPlaylist.get('videosLength')
 123     }
 124
 125     const ogType = 'video'
 126     const twitterCard = 'summary'
 127     const schemaType = 'ItemList'
 128
 129     customHtml = ClientHtml.addTags(customHtml, { url, title, description, image, list, ogType, twitterCard, schemaType })
 130
 131     return customHtml
 132   }
 133
 134   static async getAccountHTMLPage (nameWithHost: string, req: express.Request, res: express.Response) {
 135     return this.getAccountOrChannelHTMLPage(() => AccountModel.loadByNameWithHost(nameWithHost), req, res)
 136   }
 137
 138   static async getVideoChannelHTMLPage (nameWithHost: string, req: express.Request, res: express.Response) {
 139     return this.getAccountOrChannelHTMLPage(() => VideoChannelModel.loadByNameWithHostAndPopulateAccount(nameWithHost), req, res)
 140   }
 141
 142   private static async getAccountOrChannelHTMLPage (
 143     loader: () => Bluebird<MAccountActor | MChannelActor>,
 144     req: express.Request,
 145     res: express.Response
 146   ) {
 147     const [ html, entity ] = await Promise.all([
 148       ClientHtml.getIndexHTML(req, res),
 149       loader()
 150     ])
 151
 152     // Let Angular application handle errors
 153     if (!entity) {
 154       res.status(404)
 155       return ClientHtml.getIndexHTML(req, res)
 156     }
 157
 158     let customHtml = ClientHtml.addTitleTag(html, escapeHTML(entity.getDisplayName()))
 159     customHtml = ClientHtml.addDescriptionTag(customHtml, escapeHTML(entity.description))
 160
 161     const url = entity.Actor.url
 162     const title = escapeHTML(entity.getDisplayName())
 163     const description = escapeHTML(entity.description)
 164
 165     const image = {
 166       url: entity.Actor.getAvatarUrl(),
 167       width: AVATARS_SIZE.width,
 168       height: AVATARS_SIZE.height
 169     }
 170
 171     const ogType = 'website'
 172     const twitterCard = 'summary'
 173     const schemaType = 'ProfilePage'
 174
 175     customHtml = ClientHtml.addTags(customHtml, { url, title, description, image, ogType, twitterCard, schemaType })
 176
 177     return customHtml
 178   }
 179
 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]
 183
 184     const buffer = await readFile(path)
 185
 186     let html = buffer.toString()
 187
 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)
 194
 195     ClientHtml.htmlCache[path] = html
 196
 197     return html
 198   }
 199
 200   private static getIndexPath (req: express.Request, res: express.Response, paramLang: string) {
 201     let lang: string
 202
 203     // Check param lang validity
 204     if (paramLang && is18nLocale(paramLang)) {
 205       lang = paramLang
 206
 207       // Save locale in cookies
 208       res.cookie('clientLanguage', lang, {
 209         secure: WEBSERVER.SCHEME === 'https',
 210         sameSite: 'none',
 211         maxAge: 1000 * 3600 * 24 * 90 // 3 months
 212       })
 213
 214     } else if (req.cookies.clientLanguage && is18nLocale(req.cookies.clientLanguage)) {
 215       lang = req.cookies.clientLanguage
 216     } else {
 217       lang = req.acceptsLanguages(POSSIBLE_LOCALES) || getDefaultLocale()
 218     }
 219
 220     return join(__dirname, '../../../client/dist/' + buildFileLocale(lang) + '/index.html')
 221   }
 222
 223   private static addHtmlLang (htmlStringPage: string, paramLang: string) {
 224     return htmlStringPage.replace('<html>', `<html lang="${paramLang}">`)
 225   }
 226
 227   private static addManifestContentHash (htmlStringPage: string) {
 228     return htmlStringPage.replace('[manifestContentHash]', FILES_CONTENT_HASH.MANIFEST)
 229   }
 230
 231   private static addFaviconContentHash (htmlStringPage: string) {
 232     return htmlStringPage.replace('[faviconContentHash]', FILES_CONTENT_HASH.FAVICON)
 233   }
 234
 235   private static addLogoContentHash (htmlStringPage: string) {
 236     return htmlStringPage.replace('[logoContentHash]', FILES_CONTENT_HASH.LOGO)
 237   }
 238
 239   private static addTitleTag (htmlStringPage: string, title?: string) {
 240     let text = title || CONFIG.INSTANCE.NAME
 241     if (title) text += ` - ${CONFIG.INSTANCE.NAME}`
 242
 243     const titleTag = `<title>${text}</title>`
 244
 245     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.TITLE, titleTag)
 246   }
 247
 248   private static addDescriptionTag (htmlStringPage: string, description?: string) {
 249     const content = description || CONFIG.INSTANCE.SHORT_DESCRIPTION
 250     const descriptionTag = `<meta name="description" content="${content}" />`
 251
 252     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.DESCRIPTION, descriptionTag)
 253   }
 254
 255   private static addCustomCSS (htmlStringPage: string) {
 256     const styleTag = `<style class="custom-css-style">${CONFIG.INSTANCE.CUSTOMIZATIONS.CSS}</style>`
 257
 258     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.CUSTOM_CSS, styleTag)
 259   }
 260
 261   private static async addAsyncPluginCSS (htmlStringPage: string) {
 262     const globalCSSContent = await readFile(PLUGIN_GLOBAL_CSS_PATH)
 263     if (globalCSSContent.byteLength === 0) return htmlStringPage
 264
 265     const fileHash = sha256(globalCSSContent)
 266     const linkTag = `<link rel="stylesheet" href="/plugins/global.css?hash=${fileHash}" />`
 267
 268     return htmlStringPage.replace('</head>', linkTag + '</head>')
 269   }
 270
 271   private static generateOpenGraphMetaTags (tags) {
 272     const metaTags = {
 273       'og:type': tags.ogType,
 274       'og:title': tags.title,
 275       'og:image': tags.image.url
 276     }
 277
 278     if (tags.image.width && tags.image.height) {
 279       metaTags['og:image:width'] = tags.image.width
 280       metaTags['og:image:height'] = tags.image.height
 281     }
 282
 283     metaTags['og:url'] = tags.url
 284     metaTags['og:description'] = tags.description
 285
 286     if (tags.embed) {
 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
 292     }
 293
 294     return metaTags
 295   }
 296
 297   private static generateStandardMetaTags (tags) {
 298     return {
 299       name: tags.title,
 300       description: tags.description,
 301       image: tags.image.url
 302     }
 303   }
 304
 305   private static generateTwitterCardMetaTags (tags) {
 306     const metaTags = {
 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
 312     }
 313
 314     if (tags.image.width && tags.image.height) {
 315       metaTags['twitter:image:width'] = tags.image.width
 316       metaTags['twitter:image:height'] = tags.image.height
 317     }
 318
 319     return metaTags
 320   }
 321
 322   private static generateSchemaTags (tags) {
 323     const schema = {
 324       '@context': 'http://schema.org',
 325       '@type': tags.schemaType,
 326       'name': tags.title,
 327       'description': tags.description,
 328       'image': tags.image.url,
 329       'url': tags.url
 330     }
 331
 332     if (tags.list) {
 333       schema['numberOfItems'] = tags.list.numberOfItems
 334       schema['thumbnailUrl'] = tags.image.url
 335     }
 336
 337     if (tags.embed) {
 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
 344     }
 345
 346     return schema
 347   }
 348
 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)
 354
 355     const { url, title, embed } = tagsValues
 356
 357     const oembedLinkTags = []
 358
 359     if (embed) {
 360       oembedLinkTags.push({
 361         type: 'application/json+oembed',
 362         href: WEBSERVER.URL + '/services/oembed?url=' + encodeURIComponent(url),
 363         title
 364       })
 365     }
 366
 367     let tagsString = ''
 368
 369     // Opengraph
 370     Object.keys(openGraphMetaTags).forEach(tagName => {
 371       const tagValue = openGraphMetaTags[tagName]
 372
 373       tagsString += `<meta property="${tagName}" content="${tagValue}" />`
 374     })
 375
 376     // Standard
 377     Object.keys(standardMetaTags).forEach(tagName => {
 378       const tagValue = standardMetaTags[tagName]
 379
 380       tagsString += `<meta property="${tagName}" content="${tagValue}" />`
 381     })
 382
 383     // Twitter card
 384     Object.keys(twitterCardMetaTags).forEach(tagName => {
 385       const tagValue = twitterCardMetaTags[tagName]
 386
 387       tagsString += `<meta property="${tagName}" content="${tagValue}" />`
 388     })
 389
 390     // OEmbed
 391     for (const oembedLinkTag of oembedLinkTags) {
 392       tagsString += `<link rel="alternate" type="${oembedLinkTag.type}" href="${oembedLinkTag.href}" title="${oembedLinkTag.title}" />`
 393     }
 394
 395     // Schema.org
 396     if (schemaTags) {
 397       tagsString += `<script type="application/ld+json">${JSON.stringify(schemaTags)}</script>`
 398     }
 399
 400     // SEO, use origin URL
 401     tagsString += `<link rel="canonical" href="${url}" />`
 402
 403     return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.META_TAGS, tagsString)
 404   }
 405 }