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