7 files changed, 122 insertions, 8 deletions

diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 56310c4e9..413ec2b80 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 = () => {
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/manager-options/control-bar-options-builder.ts b/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts
index 27f366732..df1e8eabe 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: {},
 
@@ -90,7 +87,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 {