1 import videojs from 'video.js'
2 import { timeToInt } from '@shared/core-utils'
11 } from './peertube-player-local-storage'
12 import { PeerTubePluginOptions, UserWatching, VideoJSCaption } from './peertube-videojs-typings'
13 import { isMobile } from './utils'
14 import { SettingsButton } from './videojs-components/settings-menu-button'
15 import debug from 'debug'
17 const logger = debug('peertube:player:peertube')
19 const Plugin = videojs.getPlugin('plugin')
21 class PeerTubePlugin extends Plugin {
22 private readonly videoViewUrl: string
23 private readonly videoDuration: number
24 private readonly CONSTANTS = {
25 USER_WATCHING_VIDEO_INTERVAL: 5000 // Every 5 seconds, notify the user is watching the video
28 private videoCaptions: VideoJSCaption[]
29 private defaultSubtitle: string
31 private videoViewInterval: any
32 private userWatchingVideoInterval: any
34 private isLive: boolean
36 private menuOpened = false
37 private mouseInControlBar = false
38 private mouseInSettings = false
39 private readonly initialInactivityTimeout: number
41 constructor (player: videojs.Player, options?: PeerTubePluginOptions) {
44 this.videoViewUrl = options.videoViewUrl
45 this.videoDuration = options.videoDuration
46 this.videoCaptions = options.videoCaptions
47 this.isLive = options.isLive
48 this.initialInactivityTimeout = this.player.options_.inactivityTimeout
50 if (options.autoplay) this.player.addClass('vjs-has-autoplay')
52 this.player.on('autoplay-failure', () => {
53 this.player.removeClass('vjs-has-autoplay')
56 this.player.ready(() => {
57 const playerOptions = this.player.options_
59 const volume = getStoredVolume()
60 if (volume !== undefined) this.player.volume(volume)
62 const muted = playerOptions.muted !== undefined ? playerOptions.muted : getStoredMute()
63 if (muted !== undefined) this.player.muted(muted)
65 this.defaultSubtitle = options.subtitle || getStoredLastSubtitle()
67 this.player.on('volumechange', () => {
68 saveVolumeInStore(this.player.volume())
69 saveMuteInStore(this.player.muted())
72 if (options.stopTime) {
73 const stopTime = timeToInt(options.stopTime)
76 this.player.on('timeupdate', function onTimeUpdate () {
77 if (self.player.currentTime() > stopTime) {
79 self.player.trigger('stopped')
81 self.player.off('timeupdate', onTimeUpdate)
86 this.player.textTracks().addEventListener('change', () => {
87 const showing = this.player.textTracks().tracks_.find(t => {
88 return t.kind === 'captions' && t.mode === 'showing'
92 saveLastSubtitle('off')
96 saveLastSubtitle(showing.language)
99 this.player.on('sourcechange', () => this.initCaptions())
101 this.player.duration(options.videoDuration)
103 this.initializePlayer()
106 this.runUserWatchVideo(options.userWatching, options.videoUUID)
111 if (this.videoViewInterval) clearInterval(this.videoViewInterval)
112 if (this.userWatchingVideoInterval) clearInterval(this.userWatchingVideoInterval)
116 this.menuOpened = true
117 this.alterInactivity()
121 this.menuOpened = false
122 this.alterInactivity()
125 private initializePlayer () {
126 if (isMobile()) this.player.addClass('vjs-is-mobile')
128 this.initSmoothProgressBar()
132 this.listenControlBarMouse()
134 this.listenFullScreenChange()
137 private runViewAdd () {
138 this.clearVideoViewInterval()
140 // After 30 seconds (or 3/4 of the video), add a view to the video
141 let minSecondsToView = 30
143 if (!this.isLive && this.videoDuration < minSecondsToView) {
144 minSecondsToView = (this.videoDuration * 3) / 4
147 let secondsViewed = 0
148 this.videoViewInterval = setInterval(() => {
149 if (this.player && !this.player.paused()) {
152 if (secondsViewed > minSecondsToView) {
153 // Restart the loop if this is a live
157 this.clearVideoViewInterval()
160 this.addViewToVideo().catch(err => console.error(err))
166 private runUserWatchVideo (options: UserWatching, videoUUID: string) {
167 let lastCurrentTime = 0
169 this.userWatchingVideoInterval = setInterval(() => {
170 const currentTime = Math.floor(this.player.currentTime())
172 if (currentTime - lastCurrentTime >= 1) {
173 lastCurrentTime = currentTime
176 this.notifyUserIsWatching(currentTime, options.url, options.authorizationHeader)
177 .catch(err => console.error('Cannot notify user is watching.', err))
179 saveVideoWatchHistory(videoUUID, currentTime)
182 }, this.CONSTANTS.USER_WATCHING_VIDEO_INTERVAL)
185 private clearVideoViewInterval () {
186 if (this.videoViewInterval !== undefined) {
187 clearInterval(this.videoViewInterval)
188 this.videoViewInterval = undefined
192 private addViewToVideo () {
193 if (!this.videoViewUrl) return Promise.resolve(undefined)
195 return fetch(this.videoViewUrl, { method: 'POST' })
198 private notifyUserIsWatching (currentTime: number, url: string, authorizationHeader: string) {
199 const body = new URLSearchParams()
200 body.append('currentTime', currentTime.toString())
202 const headers = new Headers({ Authorization: authorizationHeader })
204 return fetch(url, { method: 'PUT', body, headers })
207 private listenFullScreenChange () {
208 this.player.on('fullscreenchange', () => {
209 if (this.player.isFullscreen()) this.player.focus()
213 private listenControlBarMouse () {
214 const controlBar = this.player.controlBar
215 const settingsButton: SettingsButton = (controlBar as any).settingsButton
217 controlBar.on('mouseenter', () => {
218 this.mouseInControlBar = true
219 this.alterInactivity()
222 controlBar.on('mouseleave', () => {
223 this.mouseInControlBar = false
224 this.alterInactivity()
227 settingsButton.dialog.on('mouseenter', () => {
228 this.mouseInSettings = true
229 this.alterInactivity()
232 settingsButton.dialog.on('mouseleave', () => {
233 this.mouseInSettings = false
234 this.alterInactivity()
238 private alterInactivity () {
239 if (this.menuOpened || this.mouseInSettings || this.mouseInControlBar) {
240 this.setInactivityTimeout(0)
244 this.setInactivityTimeout(this.initialInactivityTimeout)
245 this.player.reportUserActivity(true)
248 private setInactivityTimeout (timeout: number) {
249 (this.player as any).cache_.inactivityTimeout = timeout
250 this.player.options_.inactivityTimeout = timeout
252 logger('Set player inactivity to ' + timeout)
255 private initCaptions () {
256 for (const caption of this.videoCaptions) {
257 this.player.addRemoteTextTrack({
259 label: caption.label,
260 language: caption.language,
261 id: caption.language,
263 default: this.defaultSubtitle === caption.language
267 this.player.trigger('captionsChanged')
270 // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
271 private initSmoothProgressBar () {
272 const SeekBar = videojs.getComponent('SeekBar') as any
273 SeekBar.prototype.getPercent = function getPercent () {
274 // Allows for smooth scrubbing, when player can't keep up.
275 // const time = (this.player_.scrubbing()) ?
276 // this.player_.getCache().currentTime :
277 // this.player_.currentTime()
278 const time = this.player_.currentTime()
279 const percent = time / this.player_.duration()
280 return percent >= 1 ? 1 : percent
282 SeekBar.prototype.handleMouseMove = function handleMouseMove (event: any) {
283 let newTime = this.calculateDistance(event) * this.player_.duration()
284 if (newTime === this.player_.duration()) {
285 newTime = newTime - 0.1
287 this.player_.currentTime(newTime)
293 videojs.registerPlugin('peertube', PeerTubePlugin)
294 export { PeerTubePlugin }