10 files changed, 215 insertions, 59 deletions

diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index 3152a7003..de3274544 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -14,7 +14,7 @@ import { throwIfAlreadyLoaded } from './module-import-guard'
 import { Notifier } from './notification'
 import { HtmlRendererService, LinkifierService, MarkdownService } from './renderer'
 import { RestExtractor, RestService } from './rest'
-import { LoginGuard, RedirectService, UnloggedGuard, UserRightGuard } from './routing'
+import { LoginGuard, MetaGuard, MetaService, RedirectService, UnloggedGuard, UserRightGuard } from './routing'
 import { CanDeactivateGuard } from './routing/can-deactivate-guard.service'
 import { ServerConfigResolver } from './routing/server-config-resolver.service'
 import { ScopedTokensService } from './scoped-tokens'
@@ -77,7 +77,10 @@ import { LocalStorageService, ScreenService, SessionStorageService } from './wra
     MessageService,
     PeerTubeSocket,
     ServerConfigResolver,
-    CanDeactivateGuard
+    CanDeactivateGuard,
+
+    MetaService,
+    MetaGuard
   ]
 })
 export class CoreModule {
diff --git a/client/src/app/core/menu/menu.service.ts b/client/src/app/core/menu/menu.service.ts
index 502d3bb2f..77592cbb6 100644
--- a/client/src/app/core/menu/menu.service.ts
+++ b/client/src/app/core/menu/menu.service.ts
@@ -1,8 +1,19 @@
 import { fromEvent } from 'rxjs'
 import { debounceTime } from 'rxjs/operators'
 import { Injectable } from '@angular/core'
+import { GlobalIconName } from '@app/shared/shared-icons'
+import { sortObjectComparator } from '@shared/core-utils/miscs/miscs'
+import { ServerConfig } from '@shared/models/server'
 import { ScreenService } from '../wrappers'
 
+export type MenuLink = {
+  icon: GlobalIconName
+  label: string
+  menuLabel: string
+  path: string
+  priority: number
+}
+
 @Injectable()
 export class MenuService {
   isMenuDisplayed = true
@@ -48,6 +59,53 @@ export class MenuService {
     this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
   }
 
+  buildCommonLinks (config: ServerConfig) {
+    let entries: MenuLink[] = [
+      {
+        icon: 'globe' as 'globe',
+        label: $localize`Discover videos`,
+        menuLabel: $localize`Discover`,
+        path: '/videos/overview',
+        priority: 150
+      },
+      {
+        icon: 'trending' as 'trending',
+        label: $localize`Trending videos`,
+        menuLabel: $localize`Trending`,
+        path: '/videos/trending',
+        priority: 140
+      },
+      {
+        icon: 'recently-added' as 'recently-added',
+        label: $localize`Recently added videos`,
+        menuLabel: $localize`Recently added`,
+        path: '/videos/recently-added',
+        priority: 130
+      },
+      {
+        icon: 'octagon' as 'octagon',
+        label: $localize`Local videos`,
+        menuLabel: $localize`Local videos`,
+        path: '/videos/local',
+        priority: 120
+      }
+    ]
+
+    if (config.homepage.enabled) {
+      entries.push({
+        icon: 'home' as 'home',
+        label: $localize`Home`,
+        menuLabel: $localize`Home`,
+        path: '/home',
+        priority: 160
+      })
+    }
+
+    entries = entries.sort(sortObjectComparator('priority', 'desc'))
+
+    return entries
+  }
+
   private handleWindowResize () {
     // On touch screens, do not handle window resize event since opened menu is handled with a content overlay
     if (this.screenService.isInTouchScreen()) return
diff --git a/client/src/app/core/renderer/html-renderer.service.ts b/client/src/app/core/renderer/html-renderer.service.ts
index 3176cf6a4..418d8603e 100644
--- a/client/src/app/core/renderer/html-renderer.service.ts
+++ b/client/src/app/core/renderer/html-renderer.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core'
 import { LinkifierService } from './linkifier.service'
-import { SANITIZE_OPTIONS } from '@shared/core-utils/renderer/html'
+import { getCustomMarkupSanitizeOptions, getSanitizeOptions } from '@shared/core-utils/renderer/html'
 
 @Injectable()
 export class HtmlRendererService {
@@ -20,7 +20,7 @@ export class HtmlRendererService {
     })
   }
 
-  async toSafeHtml (text: string) {
+  async toSafeHtml (text: string, additionalAllowedTags: string[] = []) {
     const [ html ] = await Promise.all([
       // Convert possible markdown to html
       this.linkifier.linkify(text),
@@ -28,7 +28,11 @@ export class HtmlRendererService {
       this.loadSanitizeHtml()
     ])
 
-    return this.sanitizeHtml(html, SANITIZE_OPTIONS)
+    const options = additionalAllowedTags.length !== 0
+      ? getCustomMarkupSanitizeOptions(additionalAllowedTags)
+      : getSanitizeOptions()
+
+    return this.sanitizeHtml(html, options)
   }
 
   private async loadSanitizeHtml () {
diff --git a/client/src/app/core/renderer/markdown.service.ts b/client/src/app/core/renderer/markdown.service.ts
index edddb0a66..ca1bf4eb9 100644
--- a/client/src/app/core/renderer/markdown.service.ts
+++ b/client/src/app/core/renderer/markdown.service.ts
@@ -17,12 +17,15 @@ type MarkdownParsers = {
   enhancedMarkdownIt: MarkdownIt
   enhancedWithHTMLMarkdownIt: MarkdownIt
 
-  completeMarkdownIt: MarkdownIt
+  unsafeMarkdownIt: MarkdownIt
+
+  customPageMarkdownIt: MarkdownIt
 }
 
 type MarkdownConfig = {
   rules: string[]
   html: boolean
+  breaks: boolean
   escape?: boolean
 }
 
@@ -35,18 +38,24 @@ export class MarkdownService {
   private markdownParsers: MarkdownParsers = {
     textMarkdownIt: null,
     textWithHTMLMarkdownIt: null,
+
     enhancedMarkdownIt: null,
     enhancedWithHTMLMarkdownIt: null,
-    completeMarkdownIt: null
+
+    unsafeMarkdownIt: null,
+
+    customPageMarkdownIt: null
   }
   private parsersConfig: MarkdownParserConfigs = {
-    textMarkdownIt: { rules: TEXT_RULES, html: false },
-    textWithHTMLMarkdownIt: { rules: TEXT_WITH_HTML_RULES, html: true, escape: true },
+    textMarkdownIt: { rules: TEXT_RULES, breaks: true, html: false },
+    textWithHTMLMarkdownIt: { rules: TEXT_WITH_HTML_RULES, breaks: true, html: true, escape: true },
 
-    enhancedMarkdownIt: { rules: ENHANCED_RULES, html: false },
-    enhancedWithHTMLMarkdownIt: { rules: ENHANCED_WITH_HTML_RULES, html: true, escape: true },
+    enhancedMarkdownIt: { rules: ENHANCED_RULES, breaks: true, html: false },
+    enhancedWithHTMLMarkdownIt: { rules: ENHANCED_WITH_HTML_RULES, breaks: true, html: true, escape: true },
 
-    completeMarkdownIt: { rules: COMPLETE_RULES, html: true }
+    unsafeMarkdownIt: { rules: COMPLETE_RULES, breaks: true, html: true, escape: false },
+
+    customPageMarkdownIt: { rules: COMPLETE_RULES, breaks: false, html: true, escape: true }
   }
 
   private emojiModule: any
@@ -54,22 +63,26 @@ export class MarkdownService {
   constructor (private htmlRenderer: HtmlRendererService) {}
 
   textMarkdownToHTML (markdown: string, withHtml = false, withEmoji = false) {
-    if (withHtml) return this.render('textWithHTMLMarkdownIt', markdown, withEmoji)
+    if (withHtml) return this.render({ name: 'textWithHTMLMarkdownIt', markdown, withEmoji })
 
-    return this.render('textMarkdownIt', markdown, withEmoji)
+    return this.render({ name: 'textMarkdownIt', markdown, withEmoji })
   }
 
   enhancedMarkdownToHTML (markdown: string, withHtml = false, withEmoji = false) {
-    if (withHtml) return this.render('enhancedWithHTMLMarkdownIt', markdown, withEmoji)
+    if (withHtml) return this.render({ name: 'enhancedWithHTMLMarkdownIt', markdown, withEmoji })
+
+    return this.render({ name: 'enhancedMarkdownIt', markdown, withEmoji })
+  }
 
-    return this.render('enhancedMarkdownIt', markdown, withEmoji)
+  unsafeMarkdownToHTML (markdown: string, _trustedInput: true) {
+    return this.render({ name: 'unsafeMarkdownIt', markdown, withEmoji: true })
   }
 
-  completeMarkdownToHTML (markdown: string) {
-    return this.render('completeMarkdownIt', markdown, true)
+  customPageMarkdownToHTML (markdown: string, additionalAllowedTags: string[]) {
+    return this.render({ name: 'customPageMarkdownIt', markdown, withEmoji: true, additionalAllowedTags })
   }
 
-  async processVideoTimestamps (html: string) {
+  processVideoTimestamps (html: string) {
     return html.replace(/((\d{1,2}):)?(\d{1,2}):(\d{1,2})/g, function (str, _, h, m, s) {
       const t = (3600 * +(h || 0)) + (60 * +(m || 0)) + (+(s || 0))
       const url = buildVideoLink({ startTime: t })
@@ -77,7 +90,13 @@ export class MarkdownService {
     })
   }
 
-  private async render (name: keyof MarkdownParsers, markdown: string, withEmoji = false) {
+  private async render (options: {
+    name: keyof MarkdownParsers
+    markdown: string
+    withEmoji: boolean
+    additionalAllowedTags?: string[]
+  }) {
+    const { name, markdown, withEmoji, additionalAllowedTags } = options
     if (!markdown) return ''
 
     const config = this.parsersConfig[ name ]
@@ -96,7 +115,7 @@ export class MarkdownService {
     let html = this.markdownParsers[ name ].render(markdown)
     html = this.avoidTruncatedTags(html)
 
-    if (config.escape) return this.htmlRenderer.toSafeHtml(html)
+    if (config.escape) return this.htmlRenderer.toSafeHtml(html, additionalAllowedTags)
 
     return html
   }
@@ -105,7 +124,7 @@ export class MarkdownService {
     // FIXME: import('...') returns a struct module, containing a "default" field
     const MarkdownItClass: typeof import ('markdown-it') = (await import('markdown-it') as any).default
 
-    const markdownIt = new MarkdownItClass('zero', { linkify: true, breaks: true, html: config.html })
+    const markdownIt = new MarkdownItClass('zero', { linkify: true, breaks: config.breaks, html: config.html })
 
     for (const rule of config.rules) {
       markdownIt.enable(rule)
diff --git a/client/src/app/core/routing/index.ts b/client/src/app/core/routing/index.ts
index 239c27caf..4314ea475 100644
--- a/client/src/app/core/routing/index.ts
+++ b/client/src/app/core/routing/index.ts
@@ -3,6 +3,8 @@ export * from './custom-reuse-strategy'
 export * from './disable-for-reuse-hook'
 export * from './login-guard.service'
 export * from './menu-guard.service'
+export * from './meta-guard.service'
+export * from './meta.service'
 export * from './preload-selected-modules-list'
 export * from './redirect.service'
 export * from './server-config-resolver.service'
diff --git a/client/src/app/core/routing/meta-guard.service.ts b/client/src/app/core/routing/meta-guard.service.ts
new file mode 100644
index 000000000..bedb3450e
--- /dev/null
+++ b/client/src/app/core/routing/meta-guard.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core'
+import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, RouterStateSnapshot } from '@angular/router'
+import { MetaService } from './meta.service'
+
+@Injectable()
+export class MetaGuard implements CanActivate, CanActivateChild {
+
+  constructor (private meta: MetaService) { }
+
+  canActivate (route: ActivatedRouteSnapshot): boolean {
+    const metaSettings = route.data?.meta
+
+    if (metaSettings) {
+      this.meta.update(metaSettings)
+    }
+
+    return true
+  }
+
+  canActivateChild (route: ActivatedRouteSnapshot): boolean {
+    return this.canActivate(route)
+  }
+}
diff --git a/client/src/app/core/routing/meta.service.ts b/client/src/app/core/routing/meta.service.ts
new file mode 100644
index 000000000..a5ac778dc
--- /dev/null
+++ b/client/src/app/core/routing/meta.service.ts
@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core'
+import { Meta, Title } from '@angular/platform-browser'
+import { HTMLServerConfig } from '@shared/models/server'
+import { ServerService } from '../server'
+
+export interface MetaSettings {
+  title?: string
+}
+
+@Injectable()
+export class MetaService {
+  private config: HTMLServerConfig
+
+  constructor (
+    private titleService: Title,
+    private meta: Meta,
+    private server: ServerService
+  ) {
+    this.config = this.server.getTmpConfig()
+    this.server.getConfig()
+      .subscribe(config => this.config = config)
+  }
+
+  setTitle (subTitle?: string) {
+    let title = ''
+    if (subTitle) title += `${subTitle} - `
+
+    title += this.config.instance.name
+
+    this.titleService.setTitle(title)
+  }
+
+  setTag (name: string, value: string) {
+    this.meta.addTag({ name, content: value })
+  }
+
+  update (meta: MetaSettings) {
+    this.setTitle(meta.title)
+  }
+}
diff --git a/client/src/app/core/routing/redirect.service.ts b/client/src/app/core/routing/redirect.service.ts
index 6d26fb504..cf690a4d0 100644
--- a/client/src/app/core/routing/redirect.service.ts
+++ b/client/src/app/core/routing/redirect.service.ts
@@ -6,14 +6,14 @@ import { ServerService } from '../server'
 export class RedirectService {
   // Default route could change according to the instance configuration
   static INIT_DEFAULT_ROUTE = '/videos/trending'
-  static DEFAULT_ROUTE = RedirectService.INIT_DEFAULT_ROUTE
   static INIT_DEFAULT_TRENDING_ALGORITHM = 'most-viewed'
-  static DEFAULT_TRENDING_ALGORITHM = RedirectService.INIT_DEFAULT_TRENDING_ALGORITHM
 
   private previousUrl: string
   private currentUrl: string
 
   private redirectingToHomepage = false
+  private defaultTrendingAlgorithm = RedirectService.INIT_DEFAULT_TRENDING_ALGORITHM
+  private defaultRoute = RedirectService.INIT_DEFAULT_ROUTE
 
   constructor (
     private router: Router,
@@ -22,10 +22,10 @@ export class RedirectService {
     // The config is first loaded from the cache so try to get the default route
     const tmpConfig = this.serverService.getTmpConfig()
     if (tmpConfig?.instance?.defaultClientRoute) {
-      RedirectService.DEFAULT_ROUTE = tmpConfig.instance.defaultClientRoute
+      this.defaultRoute = tmpConfig.instance.defaultClientRoute
     }
     if (tmpConfig?.trending?.videos?.algorithms?.default) {
-      RedirectService.DEFAULT_TRENDING_ALGORITHM = tmpConfig.trending.videos.algorithms.default
+      this.defaultTrendingAlgorithm = tmpConfig.trending.videos.algorithms.default
     }
 
     // Load default route
@@ -34,13 +34,8 @@ export class RedirectService {
           const defaultRouteConfig = config.instance.defaultClientRoute
           const defaultTrendingConfig = config.trending.videos.algorithms.default
 
-          if (defaultRouteConfig) {
-            RedirectService.DEFAULT_ROUTE = defaultRouteConfig
-          }
-
-          if (defaultTrendingConfig) {
-            RedirectService.DEFAULT_TRENDING_ALGORITHM = defaultTrendingConfig
-          }
+          if (defaultRouteConfig) this.defaultRoute = defaultRouteConfig
+          if (defaultTrendingConfig) this.defaultTrendingAlgorithm = defaultTrendingConfig
         })
 
     // Track previous url
@@ -53,6 +48,14 @@ export class RedirectService {
     })
   }
 
+  getDefaultRoute () {
+    return this.defaultRoute
+  }
+
+  getDefaultTrendingAlgorithm () {
+    return this.defaultTrendingAlgorithm
+  }
+
   redirectToPreviousRoute () {
     const exceptions = [
       '/verify-account',
@@ -72,21 +75,21 @@ export class RedirectService {
 
     this.redirectingToHomepage = true
 
-    console.log('Redirecting to %s...', RedirectService.DEFAULT_ROUTE)
+    console.log('Redirecting to %s...', this.defaultRoute)
 
-    this.router.navigateByUrl(RedirectService.DEFAULT_ROUTE, { skipLocationChange })
+    this.router.navigateByUrl(this.defaultRoute, { skipLocationChange })
         .then(() => this.redirectingToHomepage = false)
         .catch(() => {
           this.redirectingToHomepage = false
 
           console.error(
             'Cannot navigate to %s, resetting default route to %s.',
-            RedirectService.DEFAULT_ROUTE,
+            this.defaultRoute,
             RedirectService.INIT_DEFAULT_ROUTE
           )
 
-          RedirectService.DEFAULT_ROUTE = RedirectService.INIT_DEFAULT_ROUTE
-          return this.router.navigateByUrl(RedirectService.DEFAULT_ROUTE, { skipLocationChange })
+          this.defaultRoute = RedirectService.INIT_DEFAULT_ROUTE
+          return this.router.navigateByUrl(this.defaultRoute, { skipLocationChange })
         })
 
   }
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index 906191ae1..5b1b7603f 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -3,7 +3,6 @@ import { first, map, share, shareReplay, switchMap, tap } from 'rxjs/operators'
 import { HttpClient } from '@angular/common/http'
 import { Inject, Injectable, LOCALE_ID } from '@angular/core'
 import { getDevLocale, isOnDevLocale, sortBy } from '@app/helpers'
-import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { getCompleteLocale, isDefaultLocale, peertubeTranslate } from '@shared/core-utils/i18n'
 import { SearchTargetType, ServerConfig, ServerStats, VideoConstant } from '@shared/models'
 import { environment } from '../../../environments/environment'
@@ -16,8 +15,6 @@ export class ServerService {
   private static BASE_LOCALE_URL = environment.apiUrl + '/client/locales/'
   private static BASE_STATS_URL = environment.apiUrl + '/api/v1/server/stats'
 
-  private static CONFIG_LOCAL_STORAGE_KEY = 'server-config'
-
   configReloaded = new Subject<ServerConfig>()
 
   private localeObservable: Observable<any>
@@ -176,6 +173,9 @@ export class ServerService {
         disableLocalSearch: false,
         isDefaultSearch: false
       }
+    },
+    homepage: {
+      enabled: false
     }
   }
 
@@ -201,9 +201,7 @@ export class ServerService {
     this.configReset = true
 
     // Notify config update
-    this.getConfig().subscribe(() => {
-      // empty, to fire a reset config event
-    })
+    return this.getConfig()
   }
 
   getConfig () {
@@ -212,7 +210,6 @@ export class ServerService {
     if (!this.configObservable) {
       this.configObservable = this.http.get<ServerConfig>(ServerService.BASE_CONFIG_URL)
                                   .pipe(
-                                    tap(config => this.saveConfigLocally(config)),
                                     tap(config => {
                                       this.config = config
                                       this.configLoaded = true
@@ -343,20 +340,15 @@ export class ServerService {
                )
   }
 
-  private saveConfigLocally (config: ServerConfig) {
-    peertubeLocalStorage.setItem(ServerService.CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config))
-  }
-
   private loadConfigLocally () {
-    const configString = peertubeLocalStorage.getItem(ServerService.CONFIG_LOCAL_STORAGE_KEY)
-
-    if (configString) {
-      try {
-        const parsed = JSON.parse(configString)
-        Object.assign(this.config, parsed)
-      } catch (err) {
-        console.error('Cannot parse config saved in local storage.', err)
-      }
+    const configString = window['PeerTubeServerConfig']
+    if (!configString) return
+
+    try {
+      const parsed = JSON.parse(configString)
+      Object.assign(this.config, parsed)
+    } catch (err) {
+      console.error('Cannot parse config saved in from index.html.', err)
     }
   }
 }
diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts
index 4c4611d01..e7a5ae17a 100644
--- a/client/src/app/core/theme/theme.service.ts
+++ b/client/src/app/core/theme/theme.service.ts
@@ -82,7 +82,19 @@ export class ThemeService {
       : this.userService.getAnonymousUser().theme
 
     if (theme !== 'instance-default') return theme
-    return this.serverConfig.theme.default
+
+    const instanceTheme = this.serverConfig.theme.default
+    if (instanceTheme !== 'default') return instanceTheme
+
+    // Default to dark theme if available and wanted by the user
+    if (
+      this.themes.find(t => t.name === 'dark') &&
+      window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    ) {
+      return 'dark'
+    }
+
+    return instanceTheme
   }
 
   private loadTheme (name: string) {