1 import videojs from 'video.js'
2 import './videojs-components/settings-menu-button'
8 } from './peertube-videojs-typings'
9 import { isMobile, timeToInt } from './utils'
11 getStoredLastSubtitle,
17 } from './peertube-player-local-storage'
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
33 private lastResolutionChange: ResolutionUpdateData
35 private isLive: boolean
37 private menuOpened = false
38 private mouseInControlBar = false
39 private readonly savedInactivityTimeout: 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
49 this.savedInactivityTimeout = player.options_.inactivityTimeout
51 if (options.autoplay) this.player.addClass('vjs-has-autoplay')
53 this.player.on('autoplay-failure', () => {
54 this.player.removeClass('vjs-has-autoplay')
57 this.player.ready(() => {
58 const playerOptions = this.player.options_
60 if (options.mode === 'webtorrent') {
61 this.player.webtorrent().on('resolutionChange', (_: any, d: any) => this.handleResolutionChange(d))
62 this.player.webtorrent().on('autoResolutionChange', (_: any, d: any) => this.trigger('autoResolutionChange', d))
65 if (options.mode === 'p2p-media-loader') {
66 this.player.p2pMediaLoader().on('resolutionChange', (_: any, d: any) => this.handleResolutionChange(d))
69 this.player.tech(true).on('loadedqualitydata', () => {
71 // Replay a resolution change, now we loaded all quality data
72 if (this.lastResolutionChange) this.handleResolutionChange(this.lastResolutionChange)
76 const volume = getStoredVolume()
77 if (volume !== undefined) this.player.volume(volume)
79 const muted = playerOptions.muted !== undefined ? playerOptions.muted : getStoredMute()
80 if (muted !== undefined) this.player.muted(muted)
82 this.defaultSubtitle = options.subtitle || getStoredLastSubtitle()
84 this.player.on('volumechange', () => {
85 saveVolumeInStore(this.player.volume())
86 saveMuteInStore(this.player.muted())
89 if (options.stopTime) {
90 const stopTime = timeToInt(options.stopTime)
93 this.player.on('timeupdate', function onTimeUpdate () {
94 if (self.player.currentTime() > stopTime) {
96 self.player.trigger('stopped')
98 self.player.off('timeupdate', onTimeUpdate)
103 this.player.textTracks().on('change', () => {
104 const showing = this.player.textTracks().tracks_.find(t => {
105 return t.kind === 'captions' && t.mode === 'showing'
109 saveLastSubtitle('off')
113 saveLastSubtitle(showing.language)
116 this.player.on('sourcechange', () => this.initCaptions())
118 this.player.duration(options.videoDuration)
120 this.initializePlayer()
123 if (options.userWatching) this.runUserWatchVideo(options.userWatching)
128 if (this.videoViewInterval) clearInterval(this.videoViewInterval)
129 if (this.userWatchingVideoInterval) clearInterval(this.userWatchingVideoInterval)
133 this.menuOpened = false
134 this.alterInactivity()
138 this.menuOpened = true
139 this.alterInactivity()
142 private initializePlayer () {
143 if (isMobile()) this.player.addClass('vjs-is-mobile')
145 this.initSmoothProgressBar()
149 this.listenControlBarMouse()
152 private runViewAdd () {
153 this.clearVideoViewInterval()
155 // After 30 seconds (or 3/4 of the video), add a view to the video
156 let minSecondsToView = 30
158 if (!this.isLive && this.videoDuration < minSecondsToView) {
159 minSecondsToView = (this.videoDuration * 3) / 4
162 let secondsViewed = 0
163 this.videoViewInterval = setInterval(() => {
164 if (this.player && !this.player.paused()) {
167 if (secondsViewed > minSecondsToView) {
168 // Restart the loop if this is a live
172 this.clearVideoViewInterval()
175 this.addViewToVideo().catch(err => console.error(err))
181 private runUserWatchVideo (options: UserWatching) {
182 let lastCurrentTime = 0
184 this.userWatchingVideoInterval = setInterval(() => {
185 const currentTime = Math.floor(this.player.currentTime())
187 if (currentTime - lastCurrentTime >= 1) {
188 lastCurrentTime = currentTime
190 this.notifyUserIsWatching(currentTime, options.url, options.authorizationHeader)
191 .catch(err => console.error('Cannot notify user is watching.', err))
193 }, this.CONSTANTS.USER_WATCHING_VIDEO_INTERVAL)
196 private clearVideoViewInterval () {
197 if (this.videoViewInterval !== undefined) {
198 clearInterval(this.videoViewInterval)
199 this.videoViewInterval = undefined
203 private addViewToVideo () {
204 if (!this.videoViewUrl) return Promise.resolve(undefined)
206 return fetch(this.videoViewUrl, { method: 'POST' })
209 private notifyUserIsWatching (currentTime: number, url: string, authorizationHeader: string) {
210 const body = new URLSearchParams()
211 body.append('currentTime', currentTime.toString())
213 const headers = new Headers({ 'Authorization': authorizationHeader })
215 return fetch(url, { method: 'PUT', body, headers })
218 private handleResolutionChange (data: ResolutionUpdateData) {
219 this.lastResolutionChange = data
221 const qualityLevels = this.player.qualityLevels()
223 for (let i = 0; i < qualityLevels.length; i++) {
224 if (qualityLevels[i].height === data.resolutionId) {
225 data.id = qualityLevels[i].id
230 this.trigger('resolutionChange', data)
233 private listenControlBarMouse () {
234 this.player.controlBar.on('mouseenter', () => {
235 this.mouseInControlBar = true
236 this.alterInactivity()
239 this.player.controlBar.on('mouseleave', () => {
240 this.mouseInControlBar = false
241 this.alterInactivity()
245 private alterInactivity () {
246 if (this.menuOpened) {
247 this.player.options_.inactivityTimeout = this.savedInactivityTimeout
251 if (!this.mouseInControlBar && !this.isTouchEnabled()) {
252 this.player.options_.inactivityTimeout = 1
256 private isTouchEnabled () {
257 return ('ontouchstart' in window) ||
258 navigator.maxTouchPoints > 0 ||
259 navigator.msMaxTouchPoints > 0
262 private initCaptions () {
263 for (const caption of this.videoCaptions) {
264 this.player.addRemoteTextTrack({
266 label: caption.label,
267 language: caption.language,
268 id: caption.language,
270 default: this.defaultSubtitle === caption.language
274 this.player.trigger('captionsChanged')
277 // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
278 private initSmoothProgressBar () {
279 const SeekBar = videojs.getComponent('SeekBar') as any
280 SeekBar.prototype.getPercent = function getPercent () {
281 // Allows for smooth scrubbing, when player can't keep up.
282 // const time = (this.player_.scrubbing()) ?
283 // this.player_.getCache().currentTime :
284 // this.player_.currentTime()
285 const time = this.player_.currentTime()
286 const percent = time / this.player_.duration()
287 return percent >= 1 ? 1 : percent
289 SeekBar.prototype.handleMouseMove = function handleMouseMove (event: any) {
290 let newTime = this.calculateDistance(event) * this.player_.duration()
291 if (newTime === this.player_.duration()) {
292 newTime = newTime - 0.1
294 this.player_.currentTime(newTime)
300 videojs.registerPlugin('peertube', PeerTubePlugin)
301 export { PeerTubePlugin }