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 // ---------------------------------------------------------------------------
149 private runUserViewing () {
150 let lastCurrentTime = this.startTime
151 let lastViewEvent: VideoViewEvent
153 this.player.one('play', () => {
154 this.notifyUserIsWatching(this.startTime, lastViewEvent)
157 this.player.on('seeked', () => {
158 // Don't take into account small seek events
159 if (Math.abs(this.player.currentTime() - lastCurrentTime) < 3) return
161 lastViewEvent = 'seek'
164 this.player.one('ended', () => {
165 const currentTime = Math.round(this.player.duration())
166 lastCurrentTime = currentTime
168 this.notifyUserIsWatching(currentTime, lastViewEvent)
170 lastViewEvent = undefined
173 this.videoViewInterval = setInterval(() => {
174 const currentTime = Math.round(this.player.currentTime())
177 if (currentTime === lastCurrentTime) return
179 lastCurrentTime = currentTime
181 this.notifyUserIsWatching(currentTime, lastViewEvent)
182 .catch(err => logger.error('Cannot notify user is watching.', err))
184 lastViewEvent = undefined
186 // Server won't save history, so save the video position in local storage
187 if (!this.authorizationHeader) {
188 saveVideoWatchHistory(this.videoUUID, currentTime)
190 }, this.CONSTANTS.USER_VIEW_VIDEO_INTERVAL)
193 private notifyUserIsWatching (currentTime: number, viewEvent: VideoViewEvent) {
194 if (!this.videoViewUrl) return Promise.resolve(undefined)
196 const body: VideoView = {
201 const headers = new Headers({
202 'Content-type': 'application/json; charset=UTF-8'
205 if (this.authorizationHeader) headers.set('Authorization', this.authorizationHeader)
207 return fetch(this.videoViewUrl, { method: 'POST', body: JSON.stringify(body), headers })
210 // ---------------------------------------------------------------------------
212 private listenFullScreenChange () {
213 this.player.on('fullscreenchange', () => {
214 if (this.player.isFullscreen()) this.player.focus()
218 private listenControlBarMouse () {
219 const controlBar = this.player.controlBar
220 const settingsButton: SettingsButton = (controlBar as any).settingsButton
222 controlBar.on('mouseenter', () => {
223 this.mouseInControlBar = true
224 this.alterInactivity()
227 controlBar.on('mouseleave', () => {
228 this.mouseInControlBar = false
229 this.alterInactivity()
232 settingsButton.dialog.on('mouseenter', () => {
233 this.mouseInSettings = true
234 this.alterInactivity()
237 settingsButton.dialog.on('mouseleave', () => {
238 this.mouseInSettings = false
239 this.alterInactivity()
243 private alterInactivity () {
244 if (this.menuOpened || this.mouseInSettings || this.mouseInControlBar) {
245 this.setInactivityTimeout(0)
249 this.setInactivityTimeout(this.initialInactivityTimeout)
250 this.player.reportUserActivity(true)
253 private setInactivityTimeout (timeout: number) {
254 (this.player as any).cache_.inactivityTimeout = timeout
255 this.player.options_.inactivityTimeout = timeout
257 debugLogger('Set player inactivity to ' + timeout)
260 private initCaptions () {
261 for (const caption of this.videoCaptions) {
262 this.player.addRemoteTextTrack({
264 label: caption.label,
265 language: caption.language,
266 id: caption.language,
268 default: this.defaultSubtitle === caption.language
272 this.player.trigger('captionsChanged')
275 // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
276 private initSmoothProgressBar () {
277 const SeekBar = videojs.getComponent('SeekBar') as any
278 SeekBar.prototype.getPercent = function getPercent () {
279 // Allows for smooth scrubbing, when player can't keep up.
280 // const time = (this.player_.scrubbing()) ?
281 // this.player_.getCache().currentTime :
282 // this.player_.currentTime()
283 const time = this.player_.currentTime()
284 const percent = time / this.player_.duration()
285 return percent >= 1 ? 1 : percent
287 SeekBar.prototype.handleMouseMove = function handleMouseMove (event: any) {
288 let newTime = this.calculateDistance(event) * this.player_.duration()
289 if (newTime === this.player_.duration()) {
290 newTime = newTime - 0.1
292 this.player_.currentTime(newTime)
298 videojs.registerPlugin('peertube', PeerTubePlugin)
299 export { PeerTubePlugin }