aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/assets/player/peertube-plugin.ts
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/assets/player/peertube-plugin.ts')
-rw-r--r--client/src/assets/player/peertube-plugin.ts262
1 files changed, 262 insertions, 0 deletions
diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts
new file mode 100644
index 000000000..7ea4a06d4
--- /dev/null
+++ b/client/src/assets/player/peertube-plugin.ts
@@ -0,0 +1,262 @@
1// FIXME: something weird with our path definition in tsconfig and typings
2// @ts-ignore
3import * as videojs from 'video.js'
4import './videojs-components/settings-menu-button'
5import {
6 PeerTubePluginOptions,
7 ResolutionUpdateData,
8 UserWatching,
9 VideoJSCaption,
10 VideoJSComponentInterface,
11 videojsUntyped
12} from './peertube-videojs-typings'
13import { isMobile, timeToInt } from './utils'
14import {
15 getStoredLastSubtitle,
16 getStoredMute,
17 getStoredVolume,
18 saveLastSubtitle,
19 saveMuteInStore,
20 saveVolumeInStore
21} from './peertube-player-local-storage'
22
23const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
24class PeerTubePlugin extends Plugin {
25 private readonly autoplay: boolean = false
26 private readonly startTime: number = 0
27 private readonly videoViewUrl: string
28 private readonly videoDuration: number
29 private readonly CONSTANTS = {
30 USER_WATCHING_VIDEO_INTERVAL: 5000 // Every 5 seconds, notify the user is watching the video
31 }
32
33 private player: any
34 private videoCaptions: VideoJSCaption[]
35 private defaultSubtitle: string
36
37 private videoViewInterval: any
38 private userWatchingVideoInterval: any
39 private qualityObservationTimer: any
40 private lastResolutionChange: ResolutionUpdateData
41
42 constructor (player: videojs.Player, options: PeerTubePluginOptions) {
43 super(player, options)
44
45 this.startTime = timeToInt(options.startTime)
46 this.videoViewUrl = options.videoViewUrl
47 this.videoDuration = options.videoDuration
48 this.videoCaptions = options.videoCaptions
49
50 if (options.autoplay === true) this.player.addClass('vjs-has-autoplay')
51
52 this.player.on('autoplay-failure', () => {
53 this.player.removeClass('vjs-has-autoplay')
54 })
55
56 this.player.ready(() => {
57 const playerOptions = this.player.options_
58
59 if (options.mode === 'webtorrent') {
60 this.player.webtorrent().on('resolutionChange', (_: any, d: any) => this.handleResolutionChange(d))
61 this.player.webtorrent().on('autoResolutionChange', (_: any, d: any) => this.trigger('autoResolutionChange', d))
62 }
63
64 if (options.mode === 'p2p-media-loader') {
65 this.player.p2pMediaLoader().on('resolutionChange', (_: any, d: any) => this.handleResolutionChange(d))
66 }
67
68 this.player.tech_.on('loadedqualitydata', () => {
69 setTimeout(() => {
70 // Replay a resolution change, now we loaded all quality data
71 if (this.lastResolutionChange) this.handleResolutionChange(this.lastResolutionChange)
72 }, 0)
73 })
74
75 const volume = getStoredVolume()
76 if (volume !== undefined) this.player.volume(volume)
77
78 const muted = playerOptions.muted !== undefined ? playerOptions.muted : getStoredMute()
79 if (muted !== undefined) this.player.muted(muted)
80
81 this.defaultSubtitle = options.subtitle || getStoredLastSubtitle()
82
83 this.player.on('volumechange', () => {
84 saveVolumeInStore(this.player.volume())
85 saveMuteInStore(this.player.muted())
86 })
87
88 this.player.textTracks().on('change', () => {
89 const showing = this.player.textTracks().tracks_.find((t: { kind: string, mode: string }) => {
90 return t.kind === 'captions' && t.mode === 'showing'
91 })
92
93 if (!showing) {
94 saveLastSubtitle('off')
95 return
96 }
97
98 saveLastSubtitle(showing.language)
99 })
100
101 this.player.on('sourcechange', () => this.initCaptions())
102
103 this.player.duration(options.videoDuration)
104
105 this.initializePlayer()
106 this.runViewAdd()
107
108 if (options.userWatching) this.runUserWatchVideo(options.userWatching)
109 })
110 }
111
112 dispose () {
113 clearTimeout(this.qualityObservationTimer)
114
115 clearInterval(this.videoViewInterval)
116
117 if (this.userWatchingVideoInterval) clearInterval(this.userWatchingVideoInterval)
118 }
119
120 private initializePlayer () {
121 if (isMobile()) this.player.addClass('vjs-is-mobile')
122
123 this.initSmoothProgressBar()
124
125 this.initCaptions()
126
127 this.alterInactivity()
128 }
129
130 private runViewAdd () {
131 this.clearVideoViewInterval()
132
133 // After 30 seconds (or 3/4 of the video), add a view to the video
134 let minSecondsToView = 30
135
136 if (this.videoDuration < minSecondsToView) minSecondsToView = (this.videoDuration * 3) / 4
137
138 let secondsViewed = 0
139 this.videoViewInterval = setInterval(() => {
140 if (this.player && !this.player.paused()) {
141 secondsViewed += 1
142
143 if (secondsViewed > minSecondsToView) {
144 this.clearVideoViewInterval()
145
146 this.addViewToVideo().catch(err => console.error(err))
147 }
148 }
149 }, 1000)
150 }
151
152 private runUserWatchVideo (options: UserWatching) {
153 let lastCurrentTime = 0
154
155 this.userWatchingVideoInterval = setInterval(() => {
156 const currentTime = Math.floor(this.player.currentTime())
157
158 if (currentTime - lastCurrentTime >= 1) {
159 lastCurrentTime = currentTime
160
161 this.notifyUserIsWatching(currentTime, options.url, options.authorizationHeader)
162 .catch(err => console.error('Cannot notify user is watching.', err))
163 }
164 }, this.CONSTANTS.USER_WATCHING_VIDEO_INTERVAL)
165 }
166
167 private clearVideoViewInterval () {
168 if (this.videoViewInterval !== undefined) {
169 clearInterval(this.videoViewInterval)
170 this.videoViewInterval = undefined
171 }
172 }
173
174 private addViewToVideo () {
175 if (!this.videoViewUrl) return Promise.resolve(undefined)
176
177 return fetch(this.videoViewUrl, { method: 'POST' })
178 }
179
180 private notifyUserIsWatching (currentTime: number, url: string, authorizationHeader: string) {
181 const body = new URLSearchParams()
182 body.append('currentTime', currentTime.toString())
183
184 const headers = new Headers({ 'Authorization': authorizationHeader })
185
186 return fetch(url, { method: 'PUT', body, headers })
187 }
188
189 private handleResolutionChange (data: ResolutionUpdateData) {
190 this.lastResolutionChange = data
191
192 const qualityLevels = this.player.qualityLevels()
193
194 for (let i = 0; i < qualityLevels.length; i++) {
195 if (qualityLevels[i].height === data.resolutionId) {
196 data.id = qualityLevels[i].id
197 break
198 }
199 }
200
201 this.trigger('resolutionChange', data)
202 }
203
204 private alterInactivity () {
205 let saveInactivityTimeout: number
206
207 const disableInactivity = () => {
208 saveInactivityTimeout = this.player.options_.inactivityTimeout
209 this.player.options_.inactivityTimeout = 0
210 }
211 const enableInactivity = () => {
212 this.player.options_.inactivityTimeout = saveInactivityTimeout
213 }
214
215 const settingsDialog = this.player.children_.find((c: any) => c.name_ === 'SettingsDialog')
216
217 this.player.controlBar.on('mouseenter', () => disableInactivity())
218 settingsDialog.on('mouseenter', () => disableInactivity())
219 this.player.controlBar.on('mouseleave', () => enableInactivity())
220 settingsDialog.on('mouseleave', () => enableInactivity())
221 }
222
223 private initCaptions () {
224 for (const caption of this.videoCaptions) {
225 this.player.addRemoteTextTrack({
226 kind: 'captions',
227 label: caption.label,
228 language: caption.language,
229 id: caption.language,
230 src: caption.src,
231 default: this.defaultSubtitle === caption.language
232 }, false)
233 }
234
235 this.player.trigger('captionsChanged')
236 }
237
238 // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
239 private initSmoothProgressBar () {
240 const SeekBar = videojsUntyped.getComponent('SeekBar')
241 SeekBar.prototype.getPercent = function getPercent () {
242 // Allows for smooth scrubbing, when player can't keep up.
243 // const time = (this.player_.scrubbing()) ?
244 // this.player_.getCache().currentTime :
245 // this.player_.currentTime()
246 const time = this.player_.currentTime()
247 const percent = time / this.player_.duration()
248 return percent >= 1 ? 1 : percent
249 }
250 SeekBar.prototype.handleMouseMove = function handleMouseMove (event: any) {
251 let newTime = this.calculateDistance(event) * this.player_.duration()
252 if (newTime === this.player_.duration()) {
253 newTime = newTime - 0.1
254 }
255 this.player_.currentTime(newTime)
256 this.update()
257 }
258 }
259}
260
261videojs.registerPlugin('peertube', PeerTubePlugin)
262export { PeerTubePlugin }