1 import debug from 'debug'
2 import videojs from 'video.js'
3 import { logger } from '@root-helpers/logger'
4 import { isMobile } from '@root-helpers/web-browser'
5 import { timeToInt } from '@shared/core-utils'
6 import { VideoView, VideoViewEvent } from '@shared/models/videos'
13 saveVideoWatchHistory,
15 } from '../../peertube-player-local-storage'
16 import { PeerTubePluginOptions, VideoJSCaption } from '../../types'
17 import { SettingsButton } from '../settings/settings-menu-button'
19 const debugLogger = debug('peertube:player:peertube')
21 const Plugin = videojs.getPlugin('plugin')
23 class PeerTubePlugin extends Plugin {
24 private readonly videoViewUrl: string
25 private readonly authorizationHeader: string
27 private readonly videoUUID: string
28 private readonly startTime: number
30 private readonly CONSTANTS = {
31 USER_VIEW_VIDEO_INTERVAL: 5000 // Every 5 seconds, notify the user is watching the video
34 private videoCaptions: VideoJSCaption[]
35 private defaultSubtitle: string
37 private videoViewInterval: any
39 private menuOpened = false
40 private mouseInControlBar = false
41 private mouseInSettings = false
42 private readonly initialInactivityTimeout: number
44 constructor (player: videojs.Player, options?: PeerTubePluginOptions) {
47 this.videoViewUrl = options.videoViewUrl
48 this.authorizationHeader = options.authorizationHeader
49 this.videoUUID = options.videoUUID
50 this.startTime = timeToInt(options.startTime)
52 this.videoCaptions = options.videoCaptions
53 this.initialInactivityTimeout = this.player.options_.inactivityTimeout
55 if (options.autoplay) this.player.addClass('vjs-has-autoplay')
57 this.player.on('autoplay-failure', () => {
58 this.player.removeClass('vjs-has-autoplay')
61 this.player.ready(() => {
62 const playerOptions = this.player.options_
64 const volume = getStoredVolume()
65 if (volume !== undefined) this.player.volume(volume)
67 const muted = playerOptions.muted !== undefined ? playerOptions.muted : getStoredMute()
68 if (muted !== undefined) this.player.muted(muted)
70 this.defaultSubtitle = options.subtitle || getStoredLastSubtitle()
72 this.player.on('volumechange', () => {
73 saveVolumeInStore(this.player.volume())
74 saveMuteInStore(this.player.muted())
77 if (options.stopTime) {
78 const stopTime = timeToInt(options.stopTime)
81 this.player.on('timeupdate', function onTimeUpdate () {
82 if (self.player.currentTime() > stopTime) {
84 self.player.trigger('stopped')
86 self.player.off('timeupdate', onTimeUpdate)
91 this.player.textTracks().addEventListener('change', () => {
92 const showing = this.player.textTracks().tracks_.find(t => {
93 return t.kind === 'captions' && t.mode === 'showing'
97 saveLastSubtitle('off')
101 saveLastSubtitle(showing.language)
104 this.player.on('sourcechange', () => this.initCaptions())
106 this.player.duration(options.videoDuration)
108 this.initializePlayer()
109 this.runUserViewing()
114 if (this.videoViewInterval) clearInterval(this.videoViewInterval)
118 this.menuOpened = true
119 this.alterInactivity()
123 this.menuOpened = false
124 this.alterInactivity()
127 displayFatalError () {
128 this.player.addClass('vjs-error-display-enabled')
132 this.player.removeClass('vjs-error-display-enabled')
135 private initializePlayer () {
136 if (isMobile()) this.player.addClass('vjs-is-mobile')
138 this.initSmoothProgressBar()
142 this.listenControlBarMouse()
144 this.listenFullScreenChange()
147 private runUserViewing () {
148 let lastCurrentTime = this.startTime
149 let lastViewEvent: VideoViewEvent
151 this.player.one('play', () => {
152 this.notifyUserIsWatching(this.startTime, lastViewEvent)
155 this.player.on('seeked', () => {
156 // Don't take into account small seek events
157 if (Math.abs(this.player.currentTime() - lastCurrentTime) < 3) return
159 lastViewEvent = 'seek'
162 this.player.one('ended', () => {
163 const currentTime = Math.round(this.player.duration())
164 lastCurrentTime = currentTime
166 this.notifyUserIsWatching(currentTime, lastViewEvent)
168 lastViewEvent = undefined
171 this.videoViewInterval = setInterval(() => {
172 const currentTime = Math.round(this.player.currentTime())
175 if (currentTime === lastCurrentTime) return
177 lastCurrentTime = currentTime
179 this.notifyUserIsWatching(currentTime, lastViewEvent)
180 .catch(err => logger.error('Cannot notify user is watching.', err))
182 lastViewEvent = undefined
184 // Server won't save history, so save the video position in local storage
185 if (!this.authorizationHeader) {
186 saveVideoWatchHistory(this.videoUUID, currentTime)
188 }, this.CONSTANTS.USER_VIEW_VIDEO_INTERVAL)
191 private notifyUserIsWatching (currentTime: number, viewEvent: VideoViewEvent) {
192 if (!this.videoViewUrl) return Promise.resolve(undefined)
194 const body: VideoView = {
199 const headers = new Headers({
200 'Content-type': 'application/json; charset=UTF-8'
203 if (this.authorizationHeader) headers.set('Authorization', this.authorizationHeader)
205 return fetch(this.videoViewUrl, { method: 'POST', body: JSON.stringify(body), headers })
208 private listenFullScreenChange () {
209 this.player.on('fullscreenchange', () => {
210 if (this.player.isFullscreen()) this.player.focus()
214 private listenControlBarMouse () {
215 const controlBar = this.player.controlBar
216 const settingsButton: SettingsButton = (controlBar as any).settingsButton
218 controlBar.on('mouseenter', () => {
219 this.mouseInControlBar = true
220 this.alterInactivity()
223 controlBar.on('mouseleave', () => {
224 this.mouseInControlBar = false
225 this.alterInactivity()
228 settingsButton.dialog.on('mouseenter', () => {
229 this.mouseInSettings = true
230 this.alterInactivity()
233 settingsButton.dialog.on('mouseleave', () => {
234 this.mouseInSettings = false
235 this.alterInactivity()
239 private alterInactivity () {
240 if (this.menuOpened || this.mouseInSettings || this.mouseInControlBar) {
241 this.setInactivityTimeout(0)
245 this.setInactivityTimeout(this.initialInactivityTimeout)
246 this.player.reportUserActivity(true)
249 private setInactivityTimeout (timeout: number) {
250 (this.player as any).cache_.inactivityTimeout = timeout
251 this.player.options_.inactivityTimeout = timeout
253 debugLogger('Set player inactivity to ' + timeout)
256 private initCaptions () {
257 for (const caption of this.videoCaptions) {
258 this.player.addRemoteTextTrack({
260 label: caption.label,
261 language: caption.language,
262 id: caption.language,
264 default: this.defaultSubtitle === caption.language
268 this.player.trigger('captionsChanged')
271 // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
272 private initSmoothProgressBar () {
273 const SeekBar = videojs.getComponent('SeekBar') as any
274 SeekBar.prototype.getPercent = function getPercent () {
275 // Allows for smooth scrubbing, when player can't keep up.
276 // const time = (this.player_.scrubbing()) ?
277 // this.player_.getCache().currentTime :
278 // this.player_.currentTime()
279 const time = this.player_.currentTime()
280 const percent = time / this.player_.duration()
281 return percent >= 1 ? 1 : percent
283 SeekBar.prototype.handleMouseMove = function handleMouseMove (event: any) {
284 let newTime = this.calculateDistance(event) * this.player_.duration()
285 if (newTime === this.player_.duration()) {
286 newTime = newTime - 0.1
288 this.player_.currentTime(newTime)
294 videojs.registerPlugin('peertube', PeerTubePlugin)
295 export { PeerTubePlugin }