1 // Big thanks to: https://github.com/kmoskwiak/videojs-resolution-switcher
3 import videojs, { Player } from 'video.js'
4 import * as WebTorrent from 'webtorrent'
5 import { VideoFile } from '../../../../shared'
7 import { renderVideo } from './video-renderer'
9 // https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts
10 // Don't import all Angular stuff, just copy the code with shame
11 const dictionaryBytes: Array<{max: number, type: string}> = [
12 { max: 1024, type: 'B' },
13 { max: 1048576, type: 'KB' },
14 { max: 1073741824, type: 'MB' },
15 { max: 1.0995116e12, type: 'GB' }
17 function bytes (value) {
18 const format = dictionaryBytes.find(d => value < d.max) || dictionaryBytes[dictionaryBytes.length - 1]
19 const calc = Math.floor(value / (format.max / 1024)).toString()
21 return [ calc, format.type ]
24 // videojs typings don't have some method we need
25 const videojsUntyped = videojs as any
26 const webtorrent = new WebTorrent({ dht: false })
28 const MenuItem = videojsUntyped.getComponent('MenuItem')
29 const ResolutionMenuItem = videojsUntyped.extend(MenuItem, {
30 constructor: function (player: Player, options) {
31 options.selectable = true
32 MenuItem.call(this, player, options)
34 const currentResolution = this.player_.getCurrentResolution()
35 this.selected(this.options_.id === currentResolution)
38 handleClick: function (event) {
39 MenuItem.prototype.handleClick.call(this, event)
40 this.player_.updateResolution(this.options_.id)
43 MenuItem.registerComponent('ResolutionMenuItem', ResolutionMenuItem)
45 const MenuButton = videojsUntyped.getComponent('MenuButton')
46 const ResolutionMenuButton = videojsUntyped.extend(MenuButton, {
47 constructor: function (player, options) {
48 this.label = document.createElement('span')
49 options.label = 'Quality'
51 MenuButton.call(this, player, options)
52 this.el().setAttribute('aria-label', 'Quality')
53 this.controlText('Quality')
55 videojsUntyped.dom.addClass(this.label, 'vjs-resolution-button-label')
56 this.el().appendChild(this.label)
58 player.on('videoFileUpdate', videojs.bind(this, this.update))
61 createItems: function () {
63 for (const videoFile of this.player_.videoFiles) {
64 menuItems.push(new ResolutionMenuItem(
67 id: videoFile.resolution,
68 label: videoFile.resolutionLabel,
69 src: videoFile.magnetUri,
70 selected: videoFile.resolution === this.currentSelection
79 this.label.innerHTML = this.player_.getCurrentResolutionLabel()
81 return MenuButton.prototype.update.call(this)
84 buildCSSClass: function () {
85 return MenuButton.prototype.buildCSSClass.call(this) + ' vjs-resolution-button'
88 MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)
90 const Button = videojsUntyped.getComponent('Button')
91 const PeertubeLinkButton = videojsUntyped.extend(Button, {
92 constructor: function (player) {
93 Button.call(this, player)
96 createEl: function () {
97 const link = document.createElement('a')
98 link.href = window.location.href.replace('embed', 'watch')
99 link.innerHTML = 'PeerTube'
100 link.title = 'Go to the video page'
101 link.className = 'vjs-peertube-link'
102 link.target = '_blank'
107 handleClick: function () {
111 Button.registerComponent('PeerTubeLinkButton', PeertubeLinkButton)
113 const WebTorrentButton = videojsUntyped.extend(Button, {
114 constructor: function (player) {
115 Button.call(this, player)
118 createEl: function () {
119 const div = document.createElement('div')
120 const subDiv = document.createElement('div')
121 div.appendChild(subDiv)
123 const downloadIcon = document.createElement('span')
124 downloadIcon.classList.add('icon', 'icon-download')
125 subDiv.appendChild(downloadIcon)
127 const downloadSpeedText = document.createElement('span')
128 downloadSpeedText.classList.add('download-speed-text')
129 const downloadSpeedNumber = document.createElement('span')
130 downloadSpeedNumber.classList.add('download-speed-number')
131 const downloadSpeedUnit = document.createElement('span')
132 downloadSpeedText.appendChild(downloadSpeedNumber)
133 downloadSpeedText.appendChild(downloadSpeedUnit)
134 subDiv.appendChild(downloadSpeedText)
136 const uploadIcon = document.createElement('span')
137 uploadIcon.classList.add('icon', 'icon-upload')
138 subDiv.appendChild(uploadIcon)
140 const uploadSpeedText = document.createElement('span')
141 uploadSpeedText.classList.add('upload-speed-text')
142 const uploadSpeedNumber = document.createElement('span')
143 uploadSpeedNumber.classList.add('upload-speed-number')
144 const uploadSpeedUnit = document.createElement('span')
145 uploadSpeedText.appendChild(uploadSpeedNumber)
146 uploadSpeedText.appendChild(uploadSpeedUnit)
147 subDiv.appendChild(uploadSpeedText)
149 const peersText = document.createElement('span')
150 peersText.textContent = ' peers'
151 peersText.classList.add('peers-text')
152 const peersNumber = document.createElement('span')
153 peersNumber.classList.add('peers-number')
154 subDiv.appendChild(peersNumber)
155 subDiv.appendChild(peersText)
157 div.className = 'vjs-webtorrent'
158 // Hide the stats before we get the info
159 subDiv.style.display = 'none'
161 this.player_.on('torrentInfo', (event, data) => {
162 const downloadSpeed = bytes(data.downloadSpeed)
163 const uploadSpeed = bytes(data.uploadSpeed)
164 const numPeers = data.numPeers
166 downloadSpeedNumber.textContent = downloadSpeed[0]
167 downloadSpeedUnit.textContent = ' ' + downloadSpeed[1]
169 uploadSpeedNumber.textContent = uploadSpeed[0]
170 uploadSpeedUnit.textContent = ' ' + uploadSpeed[1]
172 peersNumber.textContent = numPeers
174 subDiv.style.display = 'block'
180 Button.registerComponent('WebTorrentButton', WebTorrentButton)
182 type PeertubePluginOptions = {
183 videoFiles: VideoFile[]
184 playerElement: HTMLVideoElement
186 peerTubeLink: boolean
188 const peertubePlugin = function (options: PeertubePluginOptions) {
190 let currentVideoFile: VideoFile = undefined
191 const playerElement = options.playerElement
192 player.videoFiles = options.videoFiles
194 // Hack to "simulate" src link in video.js >= 6
195 // Without this, we can't play the video after pausing it
196 // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
197 player.src = function () {
201 player.getCurrentResolution = function () {
202 return currentVideoFile ? currentVideoFile.resolution : -1
205 player.getCurrentResolutionLabel = function () {
206 return currentVideoFile ? currentVideoFile.resolutionLabel : ''
209 player.updateVideoFile = function (videoFile: VideoFile, done: () => void) {
210 if (done === undefined) {
211 done = () => { /* empty */ }
214 // Pick the first one
215 if (videoFile === undefined) {
216 videoFile = player.videoFiles[0]
219 // Don't add the same video file once again
220 if (currentVideoFile !== undefined && currentVideoFile.magnetUri === videoFile.magnetUri) {
224 const previousVideoFile = currentVideoFile
225 currentVideoFile = videoFile
227 console.log('Adding ' + videoFile.magnetUri + '.')
228 player.torrent = webtorrent.add(videoFile.magnetUri, torrent => {
229 console.log('Added ' + videoFile.magnetUri + '.')
231 this.flushVideoFile(previousVideoFile)
233 const options = { autoplay: true, controls: true }
234 renderVideo(torrent.files[0], playerElement, options,(err, renderer) => {
235 if (err) return handleError(err)
237 this.renderer = renderer
244 player.torrent.on('error', err => handleError(err))
245 player.torrent.on('warning', err => {
246 // We don't support HTTP tracker but we don't care -> we use the web socket tracker
247 if (err.message.indexOf('Unsupported tracker protocol: http') !== -1) return
248 // Users don't care about issues with WebRTC, but developers do so log it in the console
249 if (err.message.indexOf('Ice connection failed') !== -1) {
254 return handleError(err)
257 player.trigger('videoFileUpdate')
262 player.updateResolution = function (resolution) {
263 // Remember player state
264 const currentTime = player.currentTime()
265 const isPaused = player.paused()
267 // Hide bigPlayButton
268 if (!isPaused && this.player_.options_.bigPlayButton) {
269 this.player_.bigPlayButton.hide()
272 const newVideoFile = player.videoFiles.find(f => f.resolution === resolution)
273 player.updateVideoFile(newVideoFile, () => {
274 player.currentTime(currentTime)
275 player.handleTechSeeked_()
279 player.flushVideoFile = function (videoFile: VideoFile, destroyRenderer = true) {
280 if (videoFile !== undefined && webtorrent.get(videoFile.magnetUri)) {
281 if (destroyRenderer === true) this.renderer.destroy()
282 webtorrent.remove(videoFile.magnetUri)
286 player.ready(function () {
287 const controlBar = player.controlBar
289 const menuButton = new ResolutionMenuButton(player, options)
290 const fullscreenElement = controlBar.fullscreenToggle.el()
291 controlBar.resolutionSwitcher = controlBar.el().insertBefore(menuButton.el(), fullscreenElement)
292 controlBar.resolutionSwitcher.dispose = function () {
293 this.parentNode.removeChild(this)
296 player.dispose = function () {
297 // Don't need to destroy renderer, video player will be destroyed
298 player.flushVideoFile(currentVideoFile, false)
301 if (options.peerTubeLink === true) {
302 const peerTubeLinkButton = new PeertubeLinkButton(player)
303 controlBar.peerTubeLink = controlBar.el().insertBefore(peerTubeLinkButton.el(), fullscreenElement)
305 controlBar.peerTubeLink.dispose = function () {
306 this.parentNode.removeChild(this)
310 const webTorrentButton = new WebTorrentButton(player)
311 controlBar.webTorrent = controlBar.el().insertBefore(webTorrentButton.el(), controlBar.progressControl.el())
312 controlBar.webTorrent.dispose = function () {
313 this.parentNode.removeChild(this)
316 if (options.autoplay === true) {
317 player.updateVideoFile()
319 player.one('play', () => {
320 // Pause, we wait the video to load before
323 player.updateVideoFile(undefined, () => player.play())
328 if (player.torrent !== undefined) {
329 player.trigger('torrentInfo', {
330 downloadSpeed: player.torrent.downloadSpeed,
331 numPeers: player.torrent.numPeers,
332 uploadSpeed: player.torrent.uploadSpeed
338 function handleError (err: Error | string) {
339 return player.trigger('customError', { err })
343 videojsUntyped.registerPlugin('peertube', peertubePlugin)