27 files changed, 353 insertions, 126 deletions

diff --git a/client/package.json b/client/package.json
index 115a4a199..6f88d4fb9 100644
--- a/client/package.json
+++ b/client/package.json
@@ -52,8 +52,8 @@
     "@ngx-loading-bar/core": "^6.0.0",
     "@ngx-loading-bar/http-client": "^6.0.0",
     "@ngx-loading-bar/router": "^6.0.0",
-    "@peertube/p2p-media-loader-core": "^1.0.13",
-    "@peertube/p2p-media-loader-hlsjs": "^1.0.13",
+    "@peertube/p2p-media-loader-core": "^1.0.14",
+    "@peertube/p2p-media-loader-hlsjs": "^1.0.14",
     "@peertube/videojs-contextmenu": "^5.5.0",
     "@peertube/xliffmerge": "^2.0.3",
     "@popperjs/core": "^2.11.5",
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
index 43f1438e0..174f5d29c 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html
@@ -44,9 +44,13 @@
 
             <div class="peertube-select-container">
               <select id="trendingVideosAlgorithmsDefault" formControlName="default" class="form-control">
+                <option i18n value="publishedAt">Recently added videos</option>
+                <option i18n value="originallyPublishedAt">Original publication date</option>
+                <option i18n value="name">Name</option>
                 <option i18n value="hot">Hot videos</option>
-                <option i18n value="most-viewed">Most viewed videos</option>
+                <option i18n value="most-viewed">Recent views</option>
                 <option i18n value="most-liked">Most liked videos</option>
+                <option i18n value="views">Global views</option>
               </select>
             </div>
 
diff --git a/client/src/app/+login/login.component.ts b/client/src/app/+login/login.component.ts
index c1705807f..5f6aa842e 100644
--- a/client/src/app/+login/login.component.ts
+++ b/client/src/app/+login/login.component.ts
@@ -1,3 +1,4 @@
+import { environment } from 'src/environments/environment'
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, Notifier, RedirectService, SessionStorageService, UserService } from '@app/core'
@@ -7,7 +8,7 @@ import { USER_OTP_TOKEN_VALIDATOR } from '@app/shared/form-validators/user-valid
 import { FormReactive, FormReactiveService, InputTextComponent } from '@app/shared/shared-forms'
 import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance'
 import { NgbAccordion, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
-import { PluginsManager } from '@root-helpers/plugins-manager'
+import { getExternalAuthHref } from '@shared/core-utils'
 import { RegisteredExternalAuthConfig, ServerConfig } from '@shared/models'
 
 @Component({
@@ -119,7 +120,7 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
   }
 
   getAuthHref (auth: RegisteredExternalAuthConfig) {
-    return PluginsManager.getExternalAuthHref(auth)
+    return getExternalAuthHref(environment.apiUrl, auth)
   }
 
   login () {
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index 94853423b..84548de97 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -133,8 +133,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.loadRouteParams()
     this.loadRouteQuery()
 
-    this.initHotkeys()
-
     this.theaterEnabled = getStoredTheater()
 
     this.hooks.runAction('action:video-watch.init', 'video-watch')
@@ -295,6 +293,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
           subtitle: queryParams.subtitle,
 
           playerMode: queryParams.mode,
+          playbackRate: queryParams.playbackRate,
           peertubeLink: false
         }
 
@@ -406,6 +405,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       if (res === false) return this.location.back()
     }
 
+    this.buildHotkeysHelp(video)
+
     this.buildPlayer({ urlOptions, loggedInOrAnonymousUser, forceAutoplay })
       .catch(err => logger.error('Cannot build the player', err))
 
@@ -657,6 +658,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
         muted: urlOptions.muted,
         loop: urlOptions.loop,
         subtitle: urlOptions.subtitle,
+        playbackRate: urlOptions.playbackRate,
 
         peertubeLink: urlOptions.peertubeLink,
 
@@ -785,33 +787,43 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.video.viewers = newViewers
   }
 
-  private initHotkeys () {
+  private buildHotkeysHelp (video: Video) {
+    if (this.hotkeys.length !== 0) {
+      this.hotkeysService.remove(this.hotkeys)
+    }
+
     this.hotkeys = [
       // These hotkeys are managed by the player
       new Hotkey('f', e => e, undefined, $localize`Enter/exit fullscreen`),
       new Hotkey('space', e => e, undefined, $localize`Play/Pause the video`),
       new Hotkey('m', e => e, undefined, $localize`Mute/unmute the video`),
 
-      new Hotkey('0-9', e => e, undefined, $localize`Skip to a percentage of the video: 0 is 0% and 9 is 90%`),
-
       new Hotkey('up', e => e, undefined, $localize`Increase the volume`),
       new Hotkey('down', e => e, undefined, $localize`Decrease the volume`),
 
-      new Hotkey('right', e => e, undefined, $localize`Seek the video forward`),
-      new Hotkey('left', e => e, undefined, $localize`Seek the video backward`),
-
-      new Hotkey('>', e => e, undefined, $localize`Increase playback rate`),
-      new Hotkey('<', e => e, undefined, $localize`Decrease playback rate`),
-
-      new Hotkey(',', e => e, undefined, $localize`Navigate in the video to the previous frame`),
-      new Hotkey('.', e => e, undefined, $localize`Navigate in the video to the next frame`),
-
       new Hotkey('t', e => {
         this.theaterEnabled = !this.theaterEnabled
         return false
       }, undefined, $localize`Toggle theater mode`)
     ]
 
+    if (!video.isLive) {
+      this.hotkeys = this.hotkeys.concat([
+        // These hotkeys are also managed by the player but only for VOD
+
+        new Hotkey('0-9', e => e, undefined, $localize`Skip to a percentage of the video: 0 is 0% and 9 is 90%`),
+
+        new Hotkey('right', e => e, undefined, $localize`Seek the video forward`),
+        new Hotkey('left', e => e, undefined, $localize`Seek the video backward`),
+
+        new Hotkey('>', e => e, undefined, $localize`Increase playback rate`),
+        new Hotkey('<', e => e, undefined, $localize`Decrease playback rate`),
+
+        new Hotkey(',', e => e, undefined, $localize`Navigate in the video to the previous frame`),
+        new Hotkey('.', e => e, undefined, $localize`Navigate in the video to the next frame`)
+      ])
+    }
+
     if (this.isUserLoggedIn()) {
       this.hotkeys = this.hotkeys.concat([
         new Hotkey('shift+s', () => {
diff --git a/client/src/app/+videos/video-list/videos-list-common-page.component.ts b/client/src/app/+videos/video-list/videos-list-common-page.component.ts
index c8fa8ef30..bafe30fd7 100644
--- a/client/src/app/+videos/video-list/videos-list-common-page.component.ts
+++ b/client/src/app/+videos/video-list/videos-list-common-page.component.ts
@@ -177,6 +177,9 @@ export class VideosListCommonPageComponent implements OnInit, OnDestroy, Disable
       case 'best':
         return '-hot'
 
+      case 'name':
+        return 'name'
+
       default:
         return '-' + algorithm as VideoSortField
     }
diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index 4de28e51e..ed7eabb76 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -5,10 +5,11 @@ import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular
 import { Injectable } from '@angular/core'
 import { Router } from '@angular/router'
 import { Notifier } from '@app/core/notification/notifier.service'
-import { logger, OAuthUserTokens, objectToUrlEncoded, peertubeLocalStorage } from '@root-helpers/index'
+import { logger, OAuthUserTokens, objectToUrlEncoded, peertubeLocalStorage, PluginsManager } from '@root-helpers/index'
 import { HttpStatusCode, MyUser as UserServerModel, OAuthClientLocal, User, UserLogin, UserRefreshToken } from '@shared/models'
 import { environment } from '../../../environments/environment'
 import { RestExtractor } from '../rest/rest-extractor.service'
+import { ServerService } from '../server'
 import { AuthStatus } from './auth-status.model'
 import { AuthUser } from './auth-user.model'
 
@@ -44,6 +45,7 @@ export class AuthService {
   private refreshingTokenObservable: Observable<any>
 
   constructor (
+    private serverService: ServerService,
     private http: HttpClient,
     private notifier: Notifier,
     private hotkeysService: HotkeysService,
@@ -213,25 +215,28 @@ Ensure you have correctly configured PeerTube (config/ directory), in particular
     const headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
 
     this.refreshingTokenObservable = this.http.post<UserRefreshToken>(AuthService.BASE_TOKEN_URL, body, { headers })
-                                         .pipe(
-                                           map(res => this.handleRefreshToken(res)),
-                                           tap(() => {
-                                             this.refreshingTokenObservable = null
-                                           }),
-                                           catchError(err => {
-                                             this.refreshingTokenObservable = null
-
-                                             logger.error(err)
-                                             logger.info('Cannot refresh token -> logout...')
-                                             this.logout()
-                                             this.router.navigate([ '/login' ])
-
-                                             return observableThrowError(() => ({
-                                               error: $localize`You need to reconnect.`
-                                             }))
-                                           }),
-                                           share()
-                                         )
+      .pipe(
+        map(res => this.handleRefreshToken(res)),
+        tap(() => {
+          this.refreshingTokenObservable = null
+        }),
+        catchError(err => {
+          this.refreshingTokenObservable = null
+
+          logger.error(err)
+          logger.info('Cannot refresh token -> logout...')
+          this.logout()
+
+          const externalLoginUrl = PluginsManager.getDefaultLoginHref(environment.apiUrl, this.serverService.getHTMLConfig())
+          if (externalLoginUrl) window.location.href = externalLoginUrl
+          else this.router.navigate([ '/login' ])
+
+          return observableThrowError(() => ({
+            error: $localize`You need to reconnect.`
+          }))
+        }),
+        share()
+      )
 
     return this.refreshingTokenObservable
   }
diff --git a/client/src/app/core/rest/rest-extractor.service.ts b/client/src/app/core/rest/rest-extractor.service.ts
index de3f2bfff..daed7f178 100644
--- a/client/src/app/core/rest/rest-extractor.service.ts
+++ b/client/src/app/core/rest/rest-extractor.service.ts
@@ -87,7 +87,11 @@ export class RestExtractor {
 
     if (err.status !== undefined) {
       const errorMessage = this.buildServerErrorMessage(err)
-      logger.error(`Backend returned code ${err.status}, errorMessage is: ${errorMessage}`)
+
+      const message = `Backend returned code ${err.status}, errorMessage is: ${errorMessage}`
+
+      if (err.status === HttpStatusCode.NOT_FOUND_404) logger.clientError(message)
+      else logger.error(message)
 
       return errorMessage
     }
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index 63f01df92..568cb98bb 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -1,6 +1,7 @@
 import { HotkeysService } from 'angular2-hotkeys'
 import * as debug from 'debug'
 import { switchMap } from 'rxjs/operators'
+import { environment } from 'src/environments/environment'
 import { ViewportScroller } from '@angular/common'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { Router } from '@angular/router'
@@ -131,12 +132,7 @@ export class MenuComponent implements OnInit {
   }
 
   getExternalLoginHref () {
-    if (!this.serverConfig || this.serverConfig.client.menu.login.redirectOnSingleExternalAuth !== true) return undefined
-
-    const externalAuths = this.serverConfig.plugin.registeredExternalAuths
-    if (externalAuths.length !== 1) return undefined
-
-    return PluginsManager.getExternalAuthHref(externalAuths[0])
+    return PluginsManager.getDefaultLoginHref(environment.apiUrl, this.serverConfig)
   }
 
   isRegistrationAllowed () {
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index 85c63c173..706227e66 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -314,6 +314,6 @@ export class VideoMiniatureComponent implements OnInit {
           this.cd.markForCheck()
         })
 
-    this.videoPlaylistService.runPlaylistCheck(this.video.id)
+    this.videoPlaylistService.runVideoExistsInPlaylistCheck(this.video.id)
   }
 }
diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.ts b/client/src/app/shared/shared-video-miniature/videos-list.component.ts
index d5cdd958e..a423377de 100644
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.ts
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.ts
@@ -1,6 +1,6 @@
 import * as debug from 'debug'
 import { fromEvent, Observable, Subject, Subscription } from 'rxjs'
-import { debounceTime, switchMap } from 'rxjs/operators'
+import { concatMap, debounceTime, map, switchMap } from 'rxjs/operators'
 import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import {
@@ -111,6 +111,8 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
 
   private lastQueryLength: number
 
+  private videoRequests = new Subject<{ reset: boolean, obs: Observable<ResultList<Video>> }>()
+
   constructor (
     private notifier: Notifier,
     private authService: AuthService,
@@ -124,6 +126,8 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   ngOnInit () {
+    this.subscribeToVideoRequests()
+
     const hiddenFilters = this.hideScopeFilter
       ? [ 'scope' ]
       : []
@@ -228,30 +232,12 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   loadMoreVideos (reset = false) {
-    if (reset) this.hasDoneFirstQuery = false
-
-    this.getVideosObservableFunction(this.pagination, this.filters)
-      .subscribe({
-        next: ({ data }) => {
-          this.hasDoneFirstQuery = true
-          this.lastQueryLength = data.length
-
-          if (reset) this.videos = []
-          this.videos = this.videos.concat(data)
-
-          if (this.groupByDate) this.buildGroupedDateLabels()
-
-          this.onDataSubject.next(data)
-          this.videosLoaded.emit(this.videos)
-        },
-
-        error: err => {
-          const message = $localize`Cannot load more videos. Try again later.`
+    if (reset) {
+      this.hasDoneFirstQuery = false
+      this.videos = []
+    }
 
-          logger.error(message, err)
-          this.notifier.error(message)
-        }
-      })
+    this.videoRequests.next({ reset, obs: this.getVideosObservableFunction(this.pagination, this.filters) })
   }
 
   reloadVideos () {
@@ -423,4 +409,32 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
       this.onFiltersChanged(true)
     })
   }
+
+  private subscribeToVideoRequests () {
+    this.videoRequests
+      .pipe(concatMap(({ reset, obs }) => obs.pipe(map(({ data }) => ({ data, reset })))))
+      .subscribe({
+        next: ({ data, reset }) => {
+          console.log(data[0].name)
+
+          this.hasDoneFirstQuery = true
+          this.lastQueryLength = data.length
+
+          if (reset) this.videos = []
+          this.videos = this.videos.concat(data)
+
+          if (this.groupByDate) this.buildGroupedDateLabels()
+
+          this.onDataSubject.next(data)
+          this.videosLoaded.emit(this.videos)
+        },
+
+        error: err => {
+          const message = $localize`Cannot load more videos. Try again later.`
+
+          logger.error(message, err)
+          this.notifier.error(message)
+        }
+      })
+  }
 }
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
index 2fc39fc75..f802416a4 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
@@ -81,7 +81,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
         .subscribe(result => {
           this.playlistsData = result.data
 
-          this.videoPlaylistService.runPlaylistCheck(this.video.id)
+          this.videoPlaylistService.runVideoExistsInPlaylistCheck(this.video.id)
         })
 
     this.videoPlaylistSearchChanged
@@ -129,7 +129,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
         .subscribe(playlistsResult => {
           this.playlistsData = playlistsResult.data
 
-          this.videoPlaylistService.runPlaylistCheck(this.video.id)
+          this.videoPlaylistService.runVideoExistsInPlaylistCheck(this.video.id)
         })
   }
 
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
index 330a51f91..bc9fb0d74 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
@@ -206,7 +206,15 @@ export class VideoPlaylistService {
                      stopTimestamp: body.stopTimestamp
                    })
 
-                   this.runPlaylistCheck(body.videoId)
+                   this.runVideoExistsInPlaylistCheck(body.videoId)
+
+                   if (this.myAccountPlaylistCache) {
+                     const playlist = this.myAccountPlaylistCache.data.find(p => p.id === playlistId)
+                     if (!playlist) return
+
+                     const otherPlaylists = this.myAccountPlaylistCache.data.filter(p => p !== playlist)
+                     this.myAccountPlaylistCache.data = [ playlist, ...otherPlaylists ]
+                   }
                  }),
                  catchError(err => this.restExtractor.handleError(err))
                )
@@ -225,7 +233,7 @@ export class VideoPlaylistService {
                      elem.stopTimestamp = body.stopTimestamp
                    }
 
-                   this.runPlaylistCheck(videoId)
+                   this.runVideoExistsInPlaylistCheck(videoId)
                  }),
                  catchError(err => this.restExtractor.handleError(err))
                )
@@ -242,7 +250,7 @@ export class VideoPlaylistService {
                        .filter(e => e.playlistElementId !== playlistElementId)
                    }
 
-                   this.runPlaylistCheck(videoId)
+                   this.runVideoExistsInPlaylistCheck(videoId)
                  }),
                  catchError(err => this.restExtractor.handleError(err))
                )
@@ -296,7 +304,7 @@ export class VideoPlaylistService {
     return obs
   }
 
-  runPlaylistCheck (videoId: number) {
+  runVideoExistsInPlaylistCheck (videoId: number) {
     debugLogger('Running playlist check.')
 
     if (this.videoExistsCache[videoId]) {
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 56310c4e9..2781850b9 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -11,6 +11,7 @@ import './shared/control-bar/p2p-info-button'
 import './shared/control-bar/peertube-link-button'
 import './shared/control-bar/peertube-load-progress-bar'
 import './shared/control-bar/theater-button'
+import './shared/control-bar/peertube-live-display'
 import './shared/settings/resolution-menu-button'
 import './shared/settings/resolution-menu-item'
 import './shared/settings/settings-dialog'
@@ -96,6 +97,10 @@ export class PeertubePlayerManager {
       videojs(options.common.playerElement, videojsOptions, function (this: videojs.Player) {
         const player = this
 
+        if (!isNaN(+options.common.playbackRate)) {
+          player.playbackRate(+options.common.playbackRate)
+        }
+
         let alreadyFallback = false
 
         const handleError = () => {
@@ -118,7 +123,7 @@ export class PeertubePlayerManager {
         self.addContextMenu(videojsOptionsBuilder, player, options.common)
 
         if (isMobile()) player.peertubeMobile()
-        if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin()
+        if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin({ isLive: options.common.isLive })
         if (options.common.controlBar === false) player.controlBar.addClass('control-bar-hidden')
 
         player.bezels()
diff --git a/client/src/assets/player/shared/control-bar/index.ts b/client/src/assets/player/shared/control-bar/index.ts
index db5b8938d..e71e90713 100644
--- a/client/src/assets/player/shared/control-bar/index.ts
+++ b/client/src/assets/player/shared/control-bar/index.ts
@@ -1,5 +1,6 @@
 export * from './next-previous-video-button'
 export * from './p2p-info-button'
 export * from './peertube-link-button'
+export * from './peertube-live-display'
 export * from './peertube-load-progress-bar'
 export * from './theater-button'
diff --git a/client/src/assets/player/shared/control-bar/peertube-live-display.ts b/client/src/assets/player/shared/control-bar/peertube-live-display.ts
new file mode 100644
index 000000000..649eb0b00
--- /dev/null
+++ b/client/src/assets/player/shared/control-bar/peertube-live-display.ts
@@ -0,0 +1,93 @@
+import videojs from 'video.js'
+import { PeerTubeLinkButtonOptions } from '../../types'
+
+const ClickableComponent = videojs.getComponent('ClickableComponent')
+
+class PeerTubeLiveDisplay extends ClickableComponent {
+  private interval: any
+
+  private contentEl_: any
+
+  constructor (player: videojs.Player, options?: PeerTubeLinkButtonOptions) {
+    super(player, options as any)
+
+    this.interval = this.setInterval(() => this.updateClass(), 1000)
+
+    this.show()
+    this.updateSync(true)
+  }
+
+  dispose () {
+    if (this.interval) {
+      this.clearInterval(this.interval)
+      this.interval = undefined
+    }
+
+    this.contentEl_ = null
+
+    super.dispose()
+  }
+
+  createEl () {
+    const el = super.createEl('div', {
+      className: 'vjs-live-control vjs-control'
+    })
+
+    this.contentEl_ = videojs.dom.createEl('div', {
+      className: 'vjs-live-display'
+    }, {
+      'aria-live': 'off'
+    })
+
+    this.contentEl_.appendChild(videojs.dom.createEl('span', {
+      className: 'vjs-control-text',
+      textContent: `${this.localize('Stream Type')}\u00a0`
+    }))
+
+    this.contentEl_.appendChild(document.createTextNode(this.localize('LIVE')))
+
+    el.appendChild(this.contentEl_)
+    return el
+  }
+
+  handleClick () {
+    const hlsjs = this.getHLSJS()
+    if (!hlsjs) return
+
+    this.player().currentTime(hlsjs.liveSyncPosition)
+    this.player().play()
+    this.updateSync(true)
+  }
+
+  private updateClass () {
+    const hlsjs = this.getHLSJS()
+    if (!hlsjs) return
+
+    // Not loaded yet
+    if (this.player().currentTime() === 0) return
+
+    const isSync = Math.abs(this.player().currentTime() - hlsjs.liveSyncPosition) < 10
+    this.updateSync(isSync)
+  }
+
+  private updateSync (isSync: boolean) {
+    if (isSync) {
+      this.addClass('synced-with-live-edge')
+      this.removeAttribute('title')
+      this.disable()
+    } else {
+      this.removeClass('synced-with-live-edge')
+      this.setAttribute('title', this.localize('Go back to the live'))
+      this.enable()
+    }
+  }
+
+  private getHLSJS () {
+    const p2pMediaLoader = this.player()?.p2pMediaLoader
+    if (!p2pMediaLoader) return undefined
+
+    return p2pMediaLoader().getHLSJS()
+  }
+}
+
+videojs.registerComponent('PeerTubeLiveDisplay', PeerTubeLiveDisplay)
diff --git a/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts b/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts
index ec1e1038b..f5b4b3919 100644
--- a/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts
+++ b/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts
@@ -4,6 +4,10 @@ type KeyHandler = { accept: (event: KeyboardEvent) => boolean, cb: (e: KeyboardE
 
 const Plugin = videojs.getPlugin('plugin')
 
+export type HotkeysOptions = {
+  isLive: boolean
+}
+
 class PeerTubeHotkeysPlugin extends Plugin {
   private static readonly VOLUME_STEP = 0.1
   private static readonly SEEK_STEP = 5
@@ -12,9 +16,13 @@ class PeerTubeHotkeysPlugin extends Plugin {
 
   private readonly handlers: KeyHandler[]
 
-  constructor (player: videojs.Player, options: videojs.PlayerOptions) {
+  private readonly isLive: boolean
+
+  constructor (player: videojs.Player, options: videojs.PlayerOptions & HotkeysOptions) {
     super(player, options)
 
+    this.isLive = options.isLive
+
     this.handlers = this.buildHandlers()
 
     this.handleKeyFunction = (event: KeyboardEvent) => this.onKeyDown(event)
@@ -68,28 +76,6 @@ class PeerTubeHotkeysPlugin extends Plugin {
         }
       },
 
-      // Rewind
-      {
-        accept: e => this.isNaked(e, 'ArrowLeft') || this.isNaked(e, 'MediaRewind'),
-        cb: e => {
-          e.preventDefault()
-
-          const target = Math.max(0, this.player.currentTime() - PeerTubeHotkeysPlugin.SEEK_STEP)
-          this.player.currentTime(target)
-        }
-      },
-
-      // Forward
-      {
-        accept: e => this.isNaked(e, 'ArrowRight') || this.isNaked(e, 'MediaForward'),
-        cb: e => {
-          e.preventDefault()
-
-          const target = Math.min(this.player.duration(), this.player.currentTime() + PeerTubeHotkeysPlugin.SEEK_STEP)
-          this.player.currentTime(target)
-        }
-      },
-
       // Fullscreen
       {
         // f key or Ctrl + Enter
@@ -116,6 +102,8 @@ class PeerTubeHotkeysPlugin extends Plugin {
       {
         accept: e => e.key === '>',
         cb: () => {
+          if (this.isLive) return
+
           const target = Math.min(this.player.playbackRate() + 0.1, 5)
 
           this.player.playbackRate(parseFloat(target.toFixed(2)))
@@ -126,6 +114,8 @@ class PeerTubeHotkeysPlugin extends Plugin {
       {
         accept: e => e.key === '<',
         cb: () => {
+          if (this.isLive) return
+
           const target = Math.max(this.player.playbackRate() - 0.1, 0.10)
 
           this.player.playbackRate(parseFloat(target.toFixed(2)))
@@ -136,6 +126,8 @@ class PeerTubeHotkeysPlugin extends Plugin {
       {
         accept: e => e.key === ',',
         cb: () => {
+          if (this.isLive) return
+
           this.player.pause()
 
           // Calculate movement distance (assuming 30 fps)
@@ -148,6 +140,8 @@ class PeerTubeHotkeysPlugin extends Plugin {
       {
         accept: e => e.key === '.',
         cb: () => {
+          if (this.isLive) return
+
           this.player.pause()
 
           // Calculate movement distance (assuming 30 fps)
@@ -157,11 +151,47 @@ class PeerTubeHotkeysPlugin extends Plugin {
       }
     ]
 
+    if (this.isLive) return handlers
+
+    return handlers.concat(this.buildVODHandlers())
+  }
+
+  private buildVODHandlers () {
+    const handlers: KeyHandler[] = [
+      // Rewind
+      {
+        accept: e => this.isNaked(e, 'ArrowLeft') || this.isNaked(e, 'MediaRewind'),
+        cb: e => {
+          if (this.isLive) return
+
+          e.preventDefault()
+
+          const target = Math.max(0, this.player.currentTime() - PeerTubeHotkeysPlugin.SEEK_STEP)
+          this.player.currentTime(target)
+        }
+      },
+
+      // Forward
+      {
+        accept: e => this.isNaked(e, 'ArrowRight') || this.isNaked(e, 'MediaForward'),
+        cb: e => {
+          if (this.isLive) return
+
+          e.preventDefault()
+
+          const target = Math.min(this.player.duration(), this.player.currentTime() + PeerTubeHotkeysPlugin.SEEK_STEP)
+          this.player.currentTime(target)
+        }
+      }
+    ]
+
     // 0-9 key handlers
     for (let i = 0; i < 10; i++) {
       handlers.push({
         accept: e => this.isNakedOrShift(e, i + ''),
         cb: e => {
+          if (this.isLive) return
+
           e.preventDefault()
 
           this.player.currentTime(this.player.duration() * i * 0.1)
diff --git a/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts b/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts
index 27f366732..26f923e92 100644
--- a/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts
+++ b/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts
@@ -30,10 +30,7 @@ export class ControlBarOptionsBuilder {
     }
 
     Object.assign(children, {
-      currentTimeDisplay: {},
-      timeDivider: {},
-      durationDisplay: {},
-      liveDisplay: {},
+      ...this.getTimeControls(),
 
       flexibleWidthSpacer: {},
 
@@ -74,7 +71,9 @@ export class ControlBarOptionsBuilder {
   private getSettingsButton () {
     const settingEntries: string[] = []
 
-    settingEntries.push('playbackRateMenuButton')
+    if (!this.options.isLive) {
+      settingEntries.push('playbackRateMenuButton')
+    }
 
     if (this.options.captions === true) settingEntries.push('captionsButton')
 
@@ -90,7 +89,23 @@ export class ControlBarOptionsBuilder {
     }
   }
 
+  private getTimeControls () {
+    if (this.options.isLive) {
+      return {
+        peerTubeLiveDisplay: {}
+      }
+    }
+
+    return {
+      currentTimeDisplay: {},
+      timeDivider: {},
+      durationDisplay: {}
+    }
+  }
+
   private getProgressControl () {
+    if (this.options.isLive) return {}
+
     const loadProgressBar = this.mode === 'webtorrent'
       ? 'peerTubeLoadProgressBar'
       : 'loadProgressBar'
diff --git a/client/src/assets/player/shared/p2p-media-loader/hls-plugin.ts b/client/src/assets/player/shared/p2p-media-loader/hls-plugin.ts
index a14beb347..7f7d90ab9 100644
--- a/client/src/assets/player/shared/p2p-media-loader/hls-plugin.ts
+++ b/client/src/assets/player/shared/p2p-media-loader/hls-plugin.ts
@@ -281,8 +281,8 @@ class Html5Hlsjs {
     if (this.errorCounts[data.type]) this.errorCounts[data.type] += 1
     else this.errorCounts[data.type] = 1
 
-    if (data.fatal) logger.warn(error.message)
-    else logger.error(error.message, { data })
+    if (data.fatal) logger.error(error.message, { currentTime: this.player.currentTime(), data })
+    else logger.warn(error.message)
 
     if (data.type === Hlsjs.ErrorTypes.NETWORK_ERROR) {
       error.code = 2
diff --git a/client/src/assets/player/shared/stats/stats-card.ts b/client/src/assets/player/shared/stats/stats-card.ts
index f23ae48be..471a5e46c 100644
--- a/client/src/assets/player/shared/stats/stats-card.ts
+++ b/client/src/assets/player/shared/stats/stats-card.ts
@@ -182,7 +182,7 @@ class StatsCard extends Component {
     let colorSpace = 'unknown'
     let codecs = 'unknown'
 
-    if (metadata?.streams[0]) {
+    if (metadata?.streams?.[0]) {
       const stream = metadata.streams[0]
 
       colorSpace = stream['color_space'] !== 'unknown'
@@ -193,7 +193,7 @@ class StatsCard extends Component {
     }
 
     const resolution = videoFile?.resolution.label + videoFile?.fps
-    const buffer = this.timeRangesToString(this.player().buffered())
+    const buffer = this.timeRangesToString(this.player_.buffered())
     const progress = this.player_.webtorrent().getTorrent()?.progress
 
     return {
diff --git a/client/src/assets/player/types/manager-options.ts b/client/src/assets/player/types/manager-options.ts
index 3057a5adb..3fbcec29c 100644
--- a/client/src/assets/player/types/manager-options.ts
+++ b/client/src/assets/player/types/manager-options.ts
@@ -29,6 +29,8 @@ export interface CustomizationOptions {
   resume?: string
 
   peertubeLink: boolean
+
+  playbackRate?: number | string
 }
 
 export interface CommonOptions extends CustomizationOptions {
diff --git a/client/src/assets/player/types/peertube-videojs-typings.ts b/client/src/assets/player/types/peertube-videojs-typings.ts
index c60154f3b..5674f78cb 100644
--- a/client/src/assets/player/types/peertube-videojs-typings.ts
+++ b/client/src/assets/player/types/peertube-videojs-typings.ts
@@ -3,6 +3,7 @@ import videojs from 'video.js'
 import { Engine } from '@peertube/p2p-media-loader-hlsjs'
 import { VideoFile, VideoPlaylist, VideoPlaylistElement } from '@shared/models'
 import { PeerTubeDockPluginOptions } from '../shared/dock/peertube-dock-plugin'
+import { HotkeysOptions } from '../shared/hotkeys/peertube-hotkeys-plugin'
 import { Html5Hlsjs } from '../shared/p2p-media-loader/hls-plugin'
 import { P2pMediaLoaderPlugin } from '../shared/p2p-media-loader/p2p-media-loader-plugin'
 import { RedundancyUrlManager } from '../shared/p2p-media-loader/redundancy-url-manager'
@@ -44,7 +45,7 @@ declare module 'video.js' {
 
     bezels (): void
     peertubeMobile (): void
-    peerTubeHotkeysPlugin (): void
+    peerTubeHotkeysPlugin (options?: HotkeysOptions): void
 
     stats (options?: StatsCardOptions): StatsForNerdsPlugin
 
diff --git a/client/src/root-helpers/logger.ts b/client/src/root-helpers/logger.ts
index d1fdf73aa..618be62cd 100644
--- a/client/src/root-helpers/logger.ts
+++ b/client/src/root-helpers/logger.ts
@@ -27,6 +27,10 @@ class Logger {
   warn (message: LoggerMessage, meta?: LoggerMeta) {
     this.runHooks('warn', message, meta)
 
+    this.clientWarn(message, meta)
+  }
+
+  clientWarn (message: LoggerMessage, meta?: LoggerMeta) {
     if (meta) console.warn(message, meta)
     else console.warn(message)
   }
@@ -34,6 +38,10 @@ class Logger {
   error (message: LoggerMessage, meta?: LoggerMeta) {
     this.runHooks('error', message, meta)
 
+    this.clientError(message, meta)
+  }
+
+  clientError (message: LoggerMessage, meta?: LoggerMeta) {
     if (meta) console.error(message, meta)
     else console.error(message)
   }
diff --git a/client/src/root-helpers/plugins-manager.ts b/client/src/root-helpers/plugins-manager.ts
index 6c64e2b01..e5b06a94c 100644
--- a/client/src/root-helpers/plugins-manager.ts
+++ b/client/src/root-helpers/plugins-manager.ts
@@ -3,7 +3,7 @@ import * as debug from 'debug'
 import { firstValueFrom, ReplaySubject } from 'rxjs'
 import { first, shareReplay } from 'rxjs/operators'
 import { RegisterClientHelpers } from 'src/types/register-client-option.model'
-import { getHookType, internalRunHook } from '@shared/core-utils/plugins/hooks'
+import { getExternalAuthHref, getHookType, internalRunHook } from '@shared/core-utils/plugins/hooks'
 import {
   ClientHookName,
   clientHookObject,
@@ -16,7 +16,6 @@ import {
   RegisterClientRouteOptions,
   RegisterClientSettingsScriptOptions,
   RegisterClientVideoFieldOptions,
-  RegisteredExternalAuthConfig,
   ServerConfigPlugin
 } from '@shared/models'
 import { environment } from '../environments/environment'
@@ -94,9 +93,13 @@ class PluginsManager {
     return isTheme ? '/themes' : '/plugins'
   }
 
-  static getExternalAuthHref (auth: RegisteredExternalAuthConfig) {
-    return environment.apiUrl + `/plugins/${auth.name}/${auth.version}/auth/${auth.authName}`
+  static getDefaultLoginHref (apiUrl: string, serverConfig: HTMLServerConfig) {
+    if (!serverConfig || serverConfig.client.menu.login.redirectOnSingleExternalAuth !== true) return undefined
 
+    const externalAuths = serverConfig.plugin.registeredExternalAuths
+    if (externalAuths.length !== 1) return undefined
+
+    return getExternalAuthHref(apiUrl, externalAuths[0])
   }
 
   loadPluginsList (config: HTMLServerConfig) {
diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss
index 0082378e4..96b3adf66 100644
--- a/client/src/sass/player/control-bar.scss
+++ b/client/src/sass/player/control-bar.scss
@@ -153,8 +153,25 @@
   }
 
   .vjs-live-control {
-    line-height: $control-bar-height;
-    min-width: 4em;
+    padding: 5px 7px;
+    border-radius: 3px;
+    height: fit-content;
+    margin: auto 10px;
+    font-weight: bold;
+    max-width: fit-content;
+    opacity: 1 !important;
+    line-height: normal;
+    position: relative;
+    top: -1px;
+
+    &.synced-with-live-edge {
+      background: #d7281c;
+    }
+
+    &:not(.synced-with-live-edge) {
+      cursor: pointer;
+      background: #80807f;
+    }
   }
 
   .vjs-peertube {
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 88f6efb6a..ee66a9db3 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -294,6 +294,7 @@ body .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
 body .p-datepicker table {
   font-size: 14px;
   margin: 0.857em 0 0 0;
+  table-layout: fixed;
 }
 body .p-datepicker table th {
   padding: 0.5em;
diff --git a/client/src/standalone/videos/shared/player-manager-options.ts b/client/src/standalone/videos/shared/player-manager-options.ts
index b0bdb2dd9..f09c86d14 100644
--- a/client/src/standalone/videos/shared/player-manager-options.ts
+++ b/client/src/standalone/videos/shared/player-manager-options.ts
@@ -38,6 +38,7 @@ export class PlayerManagerOptions {
   private enableApi = false
   private startTime: number | string = 0
   private stopTime: number | string
+  private playbackRate: number | string
 
   private title: boolean
   private warningTitle: boolean
@@ -130,6 +131,7 @@ export class PlayerManagerOptions {
       this.subtitle = getParamString(params, 'subtitle')
       this.startTime = getParamString(params, 'start')
       this.stopTime = getParamString(params, 'stop')
+      this.playbackRate = getParamString(params, 'playbackRate')
 
       this.bigPlayBackgroundColor = getParamString(params, 'bigPlayBackgroundColor')
       this.foregroundColor = getParamString(params, 'foregroundColor')
@@ -210,6 +212,8 @@ export class PlayerManagerOptions {
           ? playlistTracker.getCurrentElement().stopTimestamp
           : this.stopTime,
 
+        playbackRate: this.playbackRate,
+
         videoCaptions,
         inactivityTimeout: 2500,
         videoViewUrl: this.videoFetcher.getVideoViewsUrl(video.uuid),
diff --git a/client/yarn.lock b/client/yarn.lock
index b680bfdfb..6a5456283 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1789,10 +1789,10 @@
     read-package-json-fast "^2.0.3"
     which "^2.0.2"
 
-"@peertube/p2p-media-loader-core@^1.0.13", "@peertube/p2p-media-loader-core@^1.0.8":
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/@peertube/p2p-media-loader-core/-/p2p-media-loader-core-1.0.13.tgz#36744a291b69c001b2562c1a93017979f8534ff8"
-  integrity sha512-ArSAaeuxwwBAG0Xd3Gj0TzKObLfJFYzHz9+fREvmUf+GZQEG6qGwWmrdVWL6xjPiEuo6LdFeCOnHSQzAbj/ptg==
+"@peertube/p2p-media-loader-core@^1.0.14":
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/@peertube/p2p-media-loader-core/-/p2p-media-loader-core-1.0.14.tgz#b4442dd343d6b30a51502e1240275eb98ef2c788"
+  integrity sha512-tjQv1CNziNY+zYzcL1h4q6AA2WuBUZnBIeVyjWR/EsO1EEC1VMdvPsL02cqYLz9yvIxgycjeTsWCm6XDqNgXRw==
   dependencies:
     bittorrent-tracker "^9.19.0"
     debug "^4.3.4"
@@ -1800,12 +1800,12 @@
     sha.js "^2.4.11"
     simple-peer "^9.11.1"
 
-"@peertube/p2p-media-loader-hlsjs@^1.0.13":
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/@peertube/p2p-media-loader-hlsjs/-/p2p-media-loader-hlsjs-1.0.13.tgz#5305e2008041d01850802544d1c49298f79dd67a"
-  integrity sha512-2BO2oaRsSHEhLkgi2iw1r4n1Yqq1EnyoOgOZccPDqjmHUsZSV/wNrno8WYr6LsleudrHA26Imu57hVD1jDx7lg==
+"@peertube/p2p-media-loader-hlsjs@^1.0.14":
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/@peertube/p2p-media-loader-hlsjs/-/p2p-media-loader-hlsjs-1.0.14.tgz#829629a57608b0e30f4b50bc98578e6bee9f8b9b"
+  integrity sha512-ySUVgUvAFXCE5E94xxjfywQ8xzk3jy9UGVkgi5Oqq+QeY7uG+o7CZ+LsQ/RjXgWBD70tEnyyfADHtL+9FCnwyQ==
   dependencies:
-    "@peertube/p2p-media-loader-core" "^1.0.8"
+    "@peertube/p2p-media-loader-core" "^1.0.14"
     debug "^4.3.4"
     events "^3.3.0"
     m3u8-parser "^4.7.1"