aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/assets/player/shared/control-bar/peertube-live-display.ts
blob: 649eb0b00623e97833e46a411498ccdb2fc324db (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
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)