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 videoViewIntervalMs: number
32 private videoCaptions: VideoJSCaption[]
33 private defaultSubtitle: string
35 private videoViewInterval: any
37 private menuOpened = false
38 private mouseInControlBar = false
39 private mouseInSettings = false
40 private readonly initialInactivityTimeout: number
42 constructor (player: videojs.Player, options?: PeerTubePluginOptions) {
45 this.videoViewUrl = options.videoViewUrl
46 this.authorizationHeader = options.authorizationHeader
47 this.videoUUID = options.videoUUID
48 this.startTime = timeToInt(options.startTime)
49 this.videoViewIntervalMs = options.videoViewIntervalMs
51 this.videoCaptions = options.videoCaptions
52 this.initialInactivityTimeout = this.player.options_.inactivityTimeout
54 if (options.autoplay !== false) this.player.addClass('vjs-has-autoplay')
56 this.player.on('autoplay-failure', () => {
57 this.player.removeClass('vjs-has-autoplay')
60 this.player.ready(() => {
61 const playerOptions = this.player.options_
63 const volume = getStoredVolume()
64 if (volume !== undefined) this.player.volume(volume)
66 const muted = playerOptions.muted !== undefined ? playerOptions.muted : getStoredMute()
67 if (muted !== undefined) this.player.muted(muted)
69 this.defaultSubtitle = options.subtitle || getStoredLastSubtitle()
71 this.player.on('volumechange', () => {
72 saveVolumeInStore(this.player.volume())
73 saveMuteInStore(this.player.muted())
76 if (options.stopTime) {
77 const stopTime = timeToInt(options.stopTime)
80 this.player.on('timeupdate', function onTimeUpdate () {
81 if (self.player.currentTime() > stopTime) {
83 self.player.trigger('stopped')
85 self.player.off('timeupdate', onTimeUpdate)
90 this.player.textTracks().addEventListener('change', () => {
91 const showing = this.player.textTracks().tracks_.find(t => {
92 return t.kind === 'captions' && t.mode === 'showing'
96 saveLastSubtitle('off')
100 saveLastSubtitle(showing.language)
103 this.player.on('sourcechange', () => this.initCaptions())
105 this.player.duration(options.videoDuration)
107 this.initializePlayer()
108 this.runUserViewing()
113 if (this.videoViewInterval) clearInterval(this.videoViewInterval)
117 this.menuOpened = true
118 this.alterInactivity()
122 this.menuOpened = false
123 this.alterInactivity()
126 displayFatalError () {
127 this.player.loadingSpinner.hide()
129 const buildModal = (error: MediaError) => {
130 const localize = this.player.localize.bind(this.player)
132 const wrapper = document.createElement('div')
133 const header = document.createElement('h1')
134 header.innerText = localize('Failed to play video')
135 wrapper.appendChild(header)
136 const desc = document.createElement('div')
137 desc.innerText = localize('The video failed to play due to technical issues.')
138 wrapper.appendChild(desc)
139 const details = document.createElement('p')
140 details.classList.add('error-details')
141 details.innerText = error.message
142 wrapper.appendChild(details)
147 const modal = this.player.createModal(buildModal(this.player.error()), {
151 modal.addClass('vjs-custom-error-display')
153 this.player.addClass('vjs-error-display-enabled')
157 this.player.removeClass('vjs-error-display-enabled')
160 private initializePlayer () {
161 if (isMobile()) this.player.addClass('vjs-is-mobile')
163 this.initSmoothProgressBar()
167 this.listenControlBarMouse()
169 this.listenFullScreenChange()
172 // ---------------------------------------------------------------------------
174 private runUserViewing () {
175 let lastCurrentTime = this.startTime
176 let lastViewEvent: VideoViewEvent
178 this.player.one('play', () => {
179 this.notifyUserIsWatching(this.startTime, lastViewEvent)
182 this.player.on('seeked', () => {
183 // Don't take into account small seek events
184 if (Math.abs(this.player.currentTime() - lastCurrentTime) < 3) return
186 lastViewEvent = 'seek'
189 this.player.one('ended', () => {
190 const currentTime = Math.floor(this.player.duration())
191 lastCurrentTime = currentTime
193 this.notifyUserIsWatching(currentTime, lastViewEvent)
195 lastViewEvent = undefined
198 this.videoViewInterval = setInterval(() => {
199 const currentTime = Math.floor(this.player.currentTime())
202 if (currentTime === lastCurrentTime) return
204 lastCurrentTime = currentTime
206 this.notifyUserIsWatching(currentTime, lastViewEvent)
207 .catch(err => logger.error('Cannot notify user is watching.', err))
209 lastViewEvent = undefined
210 }, this.videoViewIntervalMs)
213 private notifyUserIsWatching (currentTime: number, viewEvent: VideoViewEvent) {
214 // Server won't save history, so save the video position in local storage
215 if (!this.authorizationHeader()) {
216 saveVideoWatchHistory(this.videoUUID, currentTime)
219 if (!this.videoViewUrl) return
221 const body: VideoView = { currentTime, viewEvent }
223 const headers = new Headers({ 'Content-type': 'application/json; charset=UTF-8' })
224 if (this.authorizationHeader()) headers.set('Authorization', this.authorizationHeader())
226 return fetch(this.videoViewUrl, { method: 'POST', body: JSON.stringify(body), headers })
229 // ---------------------------------------------------------------------------
231 private listenFullScreenChange () {
232 this.player.on('fullscreenchange', () => {
233 if (this.player.isFullscreen()) this.player.focus()
237 private listenControlBarMouse () {
238 const controlBar = this.player.controlBar
239 const settingsButton: SettingsButton = (controlBar as any).settingsButton
241 controlBar.on('mouseenter', () => {
242 this.mouseInControlBar = true
243 this.alterInactivity()
246 controlBar.on('mouseleave', () => {
247 this.mouseInControlBar = false
248 this.alterInactivity()
251 settingsButton.dialog.on('mouseenter', () => {
252 this.mouseInSettings = true
253 this.alterInactivity()
256 settingsButton.dialog.on('mouseleave', () => {
257 this.mouseInSettings = false
258 this.alterInactivity()
262 private alterInactivity () {
263 if (this.menuOpened || this.mouseInSettings || this.mouseInControlBar) {
264 this.setInactivityTimeout(0)
268 this.setInactivityTimeout(this.initialInactivityTimeout)
269 this.player.reportUserActivity(true)
272 private setInactivityTimeout (timeout: number) {
273 (this.player as any).cache_.inactivityTimeout = timeout
274 this.player.options_.inactivityTimeout = timeout
276 debugLogger('Set player inactivity to ' + timeout)
279 private initCaptions () {
280 for (const caption of this.videoCaptions) {
281 this.player.addRemoteTextTrack({
283 label: caption.label,
284 language: caption.language,
285 id: caption.language,
287 default: this.defaultSubtitle === caption.language
291 this.player.trigger('captionsChanged')
294 // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
295 private initSmoothProgressBar () {
296 const SeekBar = videojs.getComponent('SeekBar') as any
297 SeekBar.prototype.getPercent = function getPercent () {
298 // Allows for smooth scrubbing, when player can't keep up.
299 // const time = (this.player_.scrubbing()) ?
300 // this.player_.getCache().currentTime :
301 // this.player_.currentTime()
302 const time = this.player_.currentTime()
303 const percent = time / this.player_.duration()
304 return percent >= 1 ? 1 : percent
306 SeekBar.prototype.handleMouseMove = function handleMouseMove (event: any) {
307 let newTime = this.calculateDistance(event) * this.player_.duration()
308 if (newTime === this.player_.duration()) {
309 newTime = newTime - 0.1
311 this.player_.currentTime(newTime)
317 videojs.registerPlugin('peertube', PeerTubePlugin)
318 export { PeerTubePlugin }