aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/assets/player/peertube-videojs-plugin.ts
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-10-06 10:40:09 +0200
committerChocobozzz <florian.bigard@gmail.com>2017-10-06 11:03:09 +0200
commitaa8b6df4a51c82eb91e6fd71a090b2128098af6b (patch)
treeb2d6292ceb34ad71a1ce9b671f0d87923f6c7c21 /client/src/assets/player/peertube-videojs-plugin.ts
parent127d96b969891a73d76e257581e5fd81cd867480 (diff)
downloadPeerTube-aa8b6df4a51c82eb91e6fd71a090b2128098af6b.tar.gz
PeerTube-aa8b6df4a51c82eb91e6fd71a090b2128098af6b.tar.zst
PeerTube-aa8b6df4a51c82eb91e6fd71a090b2128098af6b.zip
Client: handle multiple file resolutions
Diffstat (limited to 'client/src/assets/player/peertube-videojs-plugin.ts')
-rw-r--r--client/src/assets/player/peertube-videojs-plugin.ts238
1 files changed, 238 insertions, 0 deletions
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
new file mode 100644
index 000000000..090cc53ba
--- /dev/null
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -0,0 +1,238 @@
1// Big thanks to: https://github.com/kmoskwiak/videojs-resolution-switcher
2
3import videojs, { Player } from 'video.js'
4import * as WebTorrent from 'webtorrent'
5
6import { renderVideo } from './video-renderer'
7import { VideoFile } from '../../../../shared'
8
9// videojs typings don't have some method we need
10const videojsUntyped = videojs as any
11const webtorrent = new WebTorrent({ dht: false })
12
13const MenuItem = videojsUntyped.getComponent('MenuItem')
14const ResolutionMenuItem = videojsUntyped.extend(MenuItem, {
15 constructor: function (player: Player, options) {
16 options.selectable = true
17 MenuItem.call(this, player, options)
18
19 const currentResolution = this.player_.getCurrentResolution()
20 this.selected(this.options_.id === currentResolution)
21 },
22
23 handleClick: function (event) {
24 MenuItem.prototype.handleClick.call(this, event)
25 this.player_.updateResolution(this.options_.id)
26 }
27})
28MenuItem.registerComponent('ResolutionMenuItem', ResolutionMenuItem)
29
30const MenuButton = videojsUntyped.getComponent('MenuButton')
31const ResolutionMenuButton = videojsUntyped.extend(MenuButton, {
32 constructor: function (player, options) {
33 this.label = document.createElement('span')
34 options.label = 'Quality'
35
36 MenuButton.call(this, player, options)
37 this.el().setAttribute('aria-label', 'Quality')
38 this.controlText('Quality')
39
40 videojsUntyped.dom.addClass(this.label, 'vjs-resolution-button-label')
41 this.el().appendChild(this.label)
42
43 player.on('videoFileUpdate', videojs.bind(this, this.update))
44 },
45
46 createItems: function () {
47 const menuItems = []
48 for (const videoFile of this.player_.videoFiles) {
49 menuItems.push(new ResolutionMenuItem(
50 this.player_,
51 {
52 id: videoFile.resolution,
53 label: videoFile.resolutionLabel,
54 src: videoFile.magnetUri,
55 selected: videoFile.resolution === this.currentSelection
56 })
57 )
58 }
59
60 return menuItems
61 },
62
63 update: function () {
64 this.label.innerHTML = this.player_.getCurrentResolutionLabel()
65 return MenuButton.prototype.update.call(this)
66 },
67
68 buildCSSClass: function () {
69 return MenuButton.prototype.buildCSSClass.call(this) + ' vjs-resolution-button'
70 }
71})
72MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)
73
74const Button = videojsUntyped.getComponent('Button')
75const PeertubeLinkButton = videojsUntyped.extend(Button, {
76 constructor: function (player) {
77 Button.apply(this, arguments)
78 this.player = player
79 },
80
81 createEl: function () {
82 const link = document.createElement('a')
83 link.href = window.location.href.replace('embed', 'watch')
84 link.innerHTML = 'PeerTube'
85 link.title = 'Go to the video page'
86 link.className = 'vjs-peertube-link'
87 link.target = '_blank'
88
89 return link
90 },
91
92 handleClick: function () {
93 this.player.pause()
94 }
95})
96Button.registerComponent('PeerTubeLinkButton', PeertubeLinkButton)
97
98type PeertubePluginOptions = {
99 videoFiles: VideoFile[]
100 playerElement: HTMLVideoElement
101 autoplay: boolean
102 peerTubeLink: boolean
103}
104const peertubePlugin = function (options: PeertubePluginOptions) {
105 const player = this
106 let currentVideoFile: VideoFile = undefined
107 const playerElement = options.playerElement
108 player.videoFiles = options.videoFiles
109
110 // Hack to "simulate" src link in video.js >= 6
111 // Without this, we can't play the video after pausing it
112 // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
113 player.src = function () {
114 return true
115 }
116
117 player.getCurrentResolution = function () {
118 return currentVideoFile ? currentVideoFile.resolution : -1
119 }
120
121 player.getCurrentResolutionLabel = function () {
122 return currentVideoFile ? currentVideoFile.resolutionLabel : ''
123 }
124
125 player.updateVideoFile = function (videoFile: VideoFile, done: () => void) {
126 if (done === undefined) {
127 done = () => { /* empty */ }
128 }
129
130 // Pick the first one
131 if (videoFile === undefined) {
132 videoFile = player.videoFiles[0]
133 }
134
135 // Don't add the same video file once again
136 if (currentVideoFile !== undefined && currentVideoFile.magnetUri === videoFile.magnetUri) {
137 return
138 }
139
140 const previousVideoFile = currentVideoFile
141 currentVideoFile = videoFile
142
143 console.log('Adding ' + videoFile.magnetUri + '.')
144 player.torrent = webtorrent.add(videoFile.magnetUri, torrent => {
145 console.log('Added ' + videoFile.magnetUri + '.')
146
147 this.flushVideoFile(previousVideoFile)
148
149 const options = { autoplay: true, controls: true }
150 renderVideo(torrent.files[0], playerElement, options,(err, renderer) => {
151 if (err) return handleError(err)
152
153 this.renderer = renderer
154 player.play()
155
156 return done()
157 })
158 })
159
160 player.torrent.on('error', err => handleError(err))
161 player.torrent.on('warning', err => handleError(err))
162
163 player.trigger('videoFileUpdate')
164
165 return player
166 }
167
168 player.updateResolution = function (resolution) {
169 // Remember player state
170 const currentTime = player.currentTime()
171 const isPaused = player.paused()
172
173 // Hide bigPlayButton
174 if (!isPaused && this.player_.options_.bigPlayButton) {
175 this.player_.bigPlayButton.hide()
176 }
177
178 const newVideoFile = player.videoFiles.find(f => f.resolution === resolution)
179 player.updateVideoFile(newVideoFile, () => {
180 player.currentTime(currentTime)
181 player.handleTechSeeked_()
182 })
183 }
184
185 player.flushVideoFile = function (videoFile: VideoFile, destroyRenderer = true) {
186 if (videoFile !== undefined && webtorrent.get(videoFile.magnetUri)) {
187 if (destroyRenderer === true) this.renderer.destroy()
188 webtorrent.remove(videoFile.magnetUri)
189 }
190 }
191
192 player.ready(function () {
193 const controlBar = player.controlBar
194
195 const menuButton = new ResolutionMenuButton(player, options)
196 const fullscreenElement = controlBar.fullscreenToggle.el()
197 controlBar.resolutionSwitcher = controlBar.el().insertBefore(menuButton.el(), fullscreenElement)
198 controlBar.resolutionSwitcher.dispose = function () {
199 this.parentNode.removeChild(this)
200 }
201
202 player.dispose = function () {
203 // Don't need to destroy renderer, video player will be destroyed
204 player.flushVideoFile(currentVideoFile, false)
205 }
206
207 if (options.peerTubeLink === true) {
208 const peerTubeLinkButton = new PeertubeLinkButton(player)
209 controlBar.peerTubeLink = controlBar.el().insertBefore(peerTubeLinkButton.el(), fullscreenElement)
210
211 controlBar.peerTubeLink.dispose = function () {
212 this.parentNode.removeChild(this)
213 }
214 }
215
216 if (options.autoplay === true) {
217 player.updateVideoFile()
218 } else {
219 player.one('play', () => player.updateVideoFile())
220 }
221
222 setInterval(() => {
223 if (player.torrent !== undefined) {
224 player.trigger('torrentInfo', {
225 downloadSpeed: player.torrent.downloadSpeed,
226 numPeers: player.torrent.numPeers,
227 uploadSpeed: player.torrent.uploadSpeed
228 })
229 }
230 }, 1000)
231 })
232
233 function handleError (err: Error|string) {
234 return player.trigger('customError', { err })
235 }
236}
237
238videojsUntyped.registerPlugin('peertube', peertubePlugin)