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