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')
121 const downloadIcon = document.createElement('span')
122 downloadIcon.classList.add('icon', 'icon-download')
123 div.appendChild(downloadIcon)
125 const downloadSpeedText = document.createElement('span')
126 downloadSpeedText.classList.add('download-speed-text')
127 const downloadSpeedNumber = document.createElement('span')
128 downloadSpeedNumber.classList.add('download-speed-number')
129 const downloadSpeedUnit = document.createElement('span')
130 downloadSpeedText.appendChild(downloadSpeedNumber)
131 downloadSpeedText.appendChild(downloadSpeedUnit)
132 div.appendChild(downloadSpeedText)
134 const uploadIcon = document.createElement('span')
135 uploadIcon.classList.add('icon', 'icon-upload')
136 div.appendChild(uploadIcon)
138 const uploadSpeedText = document.createElement('span')
139 uploadSpeedText.classList.add('upload-speed-text')
140 const uploadSpeedNumber = document.createElement('span')
141 uploadSpeedNumber.classList.add('upload-speed-number')
142 const uploadSpeedUnit = document.createElement('span')
143 uploadSpeedText.appendChild(uploadSpeedNumber)
144 uploadSpeedText.appendChild(uploadSpeedUnit)
145 div.appendChild(uploadSpeedText)
147 const peersText = document.createElement('span')
148 peersText.textContent = ' peers'
149 peersText.classList.add('peers-text')
150 const peersNumber = document.createElement('span')
151 peersNumber.classList.add('peers-number')
152 div.appendChild(peersNumber)
153 div.appendChild(peersText)
155 div.className = 'vjs-webtorrent'
156 // Hide the stats before we get the info
157 div.style.display = 'none'
159 this.player_.on('torrentInfo', (event, data) => {
160 const downloadSpeed = bytes(data.downloadSpeed)
161 const uploadSpeed = bytes(data.uploadSpeed)
162 const numPeers = data.numPeers
164 downloadSpeedNumber.textContent = downloadSpeed[0]
165 downloadSpeedUnit.textContent = ' ' + downloadSpeed[1]
167 uploadSpeedNumber.textContent = uploadSpeed[0]
168 uploadSpeedUnit.textContent = ' ' + uploadSpeed[1]
170 peersNumber.textContent = numPeers
172 div.style.display = 'block'
178 Button.registerComponent('WebTorrentButton', WebTorrentButton)
180 type PeertubePluginOptions = {
181 videoFiles: VideoFile[]
182 playerElement: HTMLVideoElement
184 peerTubeLink: boolean
186 const peertubePlugin = function (options: PeertubePluginOptions) {
188 let currentVideoFile: VideoFile = undefined
189 const playerElement = options.playerElement
190 player.videoFiles = options.videoFiles
192 // Hack to "simulate" src link in video.js >= 6
193 // Without this, we can't play the video after pausing it
194 // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
195 player.src = function () {
199 player.getCurrentResolution = function () {
200 return currentVideoFile ? currentVideoFile.resolution : -1
203 player.getCurrentResolutionLabel = function () {
204 return currentVideoFile ? currentVideoFile.resolutionLabel : ''
207 player.updateVideoFile = function (videoFile: VideoFile, done: () => void) {
208 if (done === undefined) {
209 done = () => { /* empty */ }
212 // Pick the first one
213 if (videoFile === undefined) {
214 videoFile = player.videoFiles[0]
217 // Don't add the same video file once again
218 if (currentVideoFile !== undefined && currentVideoFile.magnetUri === videoFile.magnetUri) {
222 const previousVideoFile = currentVideoFile
223 currentVideoFile = videoFile
225 console.log('Adding ' + videoFile.magnetUri + '.')
226 player.torrent = webtorrent.add(videoFile.magnetUri, torrent => {
227 console.log('Added ' + videoFile.magnetUri + '.')
229 this.flushVideoFile(previousVideoFile)
231 const options = { autoplay: true, controls: true }
232 renderVideo(torrent.files[0], playerElement, options,(err, renderer) => {
233 if (err) return handleError(err)
235 this.renderer = renderer
242 player.torrent.on('error', err => handleError(err))
243 player.torrent.on('warning', err => {
244 // We don't support HTTP tracker but we don't care -> we use the web socket tracker
245 if (err.message.indexOf('Unsupported tracker protocol: http') !== -1) return
246 // Users don't care about issues with WebRTC, but developers do so log it in the console
247 if (err.message.indexOf('Ice connection failed') !== -1) {
252 return handleError(err)
255 player.trigger('videoFileUpdate')
260 player.updateResolution = function (resolution) {
261 // Remember player state
262 const currentTime = player.currentTime()
263 const isPaused = player.paused()
265 // Hide bigPlayButton
266 if (!isPaused && this.player_.options_.bigPlayButton) {
267 this.player_.bigPlayButton.hide()
270 const newVideoFile = player.videoFiles.find(f => f.resolution === resolution)
271 player.updateVideoFile(newVideoFile, () => {
272 player.currentTime(currentTime)
273 player.handleTechSeeked_()
277 player.flushVideoFile = function (videoFile: VideoFile, destroyRenderer = true) {
278 if (videoFile !== undefined && webtorrent.get(videoFile.magnetUri)) {
279 if (destroyRenderer === true) this.renderer.destroy()
280 webtorrent.remove(videoFile.magnetUri)
284 player.ready(function () {
285 const controlBar = player.controlBar
287 const menuButton = new ResolutionMenuButton(player, options)
288 const fullscreenElement = controlBar.fullscreenToggle.el()
289 controlBar.resolutionSwitcher = controlBar.el().insertBefore(menuButton.el(), fullscreenElement)
290 controlBar.resolutionSwitcher.dispose = function () {
291 this.parentNode.removeChild(this)
294 player.dispose = function () {
295 // Don't need to destroy renderer, video player will be destroyed
296 player.flushVideoFile(currentVideoFile, false)
299 if (options.peerTubeLink === true) {
300 const peerTubeLinkButton = new PeertubeLinkButton(player)
301 controlBar.peerTubeLink = controlBar.el().insertBefore(peerTubeLinkButton.el(), fullscreenElement)
303 controlBar.peerTubeLink.dispose = function () {
304 this.parentNode.removeChild(this)
308 const webTorrentButton = new WebTorrentButton(player)
309 controlBar.webTorrent = controlBar.el().insertBefore(webTorrentButton.el(), controlBar.progressControl.el())
310 controlBar.webTorrent.dispose = function () {
311 this.parentNode.removeChild(this)
314 if (options.autoplay === true) {
315 player.updateVideoFile()
317 player.one('play', () => {
318 // Pause, we wait the video to load before
321 player.updateVideoFile(undefined, () => player.play())
326 if (player.torrent !== undefined) {
327 player.trigger('torrentInfo', {
328 downloadSpeed: player.torrent.downloadSpeed,
329 numPeers: player.torrent.numPeers,
330 uploadSpeed: player.torrent.uploadSpeed
336 function handleError (err: Error | string) {
337 return player.trigger('customError', { err })
341 videojsUntyped.registerPlugin('peertube', peertubePlugin)