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
211 // Server won't save history, so save the video position in local storage
212 if (!this.authorizationHeader()) {
213 saveVideoWatchHistory(this.videoUUID, currentTime)
215 }, this.videoViewIntervalMs)
218 private notifyUserIsWatching (currentTime: number, viewEvent: VideoViewEvent) {
219 if (!this.videoViewUrl) return Promise.resolve(undefined)
221 const body: VideoView = {
226 const headers = new Headers({
227 'Content-type': 'application/json; charset=UTF-8'
230 if (this.authorizationHeader()) headers.set('Authorization', this.authorizationHeader())
232 return fetch(this.videoViewUrl, { method: 'POST', body: JSON.stringify(body), headers })
235 // ---------------------------------------------------------------------------
237 private listenFullScreenChange () {
238 this.player.on('fullscreenchange', () => {
239 if (this.player.isFullscreen()) this.player.focus()
243 private listenControlBarMouse () {
244 const controlBar = this.player.controlBar
245 const settingsButton: SettingsButton = (controlBar as any).settingsButton
247 controlBar.on('mouseenter', () => {
248 this.mouseInControlBar = true
249 this.alterInactivity()
252 controlBar.on('mouseleave', () => {
253 this.mouseInControlBar = false
254 this.alterInactivity()
257 settingsButton.dialog.on('mouseenter', () => {
258 this.mouseInSettings = true
259 this.alterInactivity()
262 settingsButton.dialog.on('mouseleave', () => {
263 this.mouseInSettings = false
264 this.alterInactivity()
268 private alterInactivity () {
269 if (this.menuOpened || this.mouseInSettings || this.mouseInControlBar) {
270 this.setInactivityTimeout(0)
274 this.setInactivityTimeout(this.initialInactivityTimeout)
275 this.player.reportUserActivity(true)
278 private setInactivityTimeout (timeout: number) {
279 (this.player as any).cache_.inactivityTimeout = timeout
280 this.player.options_.inactivityTimeout = timeout
282 debugLogger('Set player inactivity to ' + timeout)
285 private initCaptions () {
286 for (const caption of this.videoCaptions) {
287 this.player.addRemoteTextTrack({
289 label: caption.label,
290 language: caption.language,
291 id: caption.language,
293 default: this.defaultSubtitle === caption.language
297 this.player.trigger('captionsChanged')
300 // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
301 private initSmoothProgressBar () {
302 const SeekBar = videojs.getComponent('SeekBar') as any
303 SeekBar.prototype.getPercent = function getPercent () {
304 // Allows for smooth scrubbing, when player can't keep up.
305 // const time = (this.player_.scrubbing()) ?
306 // this.player_.getCache().currentTime :
307 // this.player_.currentTime()
308 const time = this.player_.currentTime()
309 const percent = time / this.player_.duration()
310 return percent >= 1 ? 1 : percent
312 SeekBar.prototype.handleMouseMove = function handleMouseMove (event: any) {
313 let newTime = this.calculateDistance(event) * this.player_.duration()
314 if (newTime === this.player_.duration()) {
315 newTime = newTime - 0.1
317 this.player_.currentTime(newTime)
323 videojs.registerPlugin('peertube', PeerTubePlugin)
324 export { PeerTubePlugin }