client/src/assets/player/peertube-videojs-plugin.ts

   1 // Big thanks to: https://github.com/kmoskwiak/videojs-resolution-switcher
   2
   3 import videojs, { Player } from 'video.js'
   4 import * as WebTorrent from 'webtorrent'
   5 import { VideoFile } from '../../../../shared'
   6
   7 import { renderVideo } from './video-renderer'
   8
   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' }
  16 ]
  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()
  20
  21   return [ calc, format.type ]
  22 }
  23
  24 // videojs typings don't have some method we need
  25 const videojsUntyped = videojs as any
  26 const webtorrent = new WebTorrent({ dht: false })
  27
  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)
  33
  34     const currentResolution = this.player_.getCurrentResolution()
  35     this.selected(this.options_.id === currentResolution)
  36   },
  37
  38   handleClick: function (event) {
  39     MenuItem.prototype.handleClick.call(this, event)
  40     this.player_.updateResolution(this.options_.id)
  41   }
  42 })
  43 MenuItem.registerComponent('ResolutionMenuItem', ResolutionMenuItem)
  44
  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'
  50
  51     MenuButton.call(this, player, options)
  52     this.el().setAttribute('aria-label', 'Quality')
  53     this.controlText('Quality')
  54
  55     videojsUntyped.dom.addClass(this.label, 'vjs-resolution-button-label')
  56     this.el().appendChild(this.label)
  57
  58     player.on('videoFileUpdate', videojs.bind(this, this.update))
  59   },
  60
  61   createItems: function () {
  62     const menuItems = []
  63     for (const videoFile of this.player_.videoFiles) {
  64       menuItems.push(new ResolutionMenuItem(
  65         this.player_,
  66         {
  67           id: videoFile.resolution,
  68           label: videoFile.resolutionLabel,
  69           src: videoFile.magnetUri,
  70           selected: videoFile.resolution === this.currentSelection
  71         })
  72       )
  73     }
  74
  75     return menuItems
  76   },
  77
  78   update: function () {
  79     this.label.innerHTML = this.player_.getCurrentResolutionLabel()
  80     this.hide()
  81     return MenuButton.prototype.update.call(this)
  82   },
  83
  84   buildCSSClass: function () {
  85     return MenuButton.prototype.buildCSSClass.call(this) + ' vjs-resolution-button'
  86   }
  87 })
  88 MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)
  89
  90 const Button = videojsUntyped.getComponent('Button')
  91 const PeertubeLinkButton = videojsUntyped.extend(Button, {
  92   constructor: function (player) {
  93     Button.call(this, player)
  94   },
  95
  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'
 103
 104     return link
 105   },
 106
 107   handleClick: function () {
 108     this.player_.pause()
 109   }
 110 })
 111 Button.registerComponent('PeerTubeLinkButton', PeertubeLinkButton)
 112
 113 const WebTorrentButton = videojsUntyped.extend(Button, {
 114   constructor: function (player) {
 115     Button.call(this, player)
 116   },
 117
 118   createEl: function () {
 119     const div = document.createElement('div')
 120
 121     const downloadIcon = document.createElement('span')
 122     downloadIcon.classList.add('icon', 'icon-download')
 123     div.appendChild(downloadIcon)
 124
 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)
 133
 134     const uploadIcon = document.createElement('span')
 135     uploadIcon.classList.add('icon', 'icon-upload')
 136     div.appendChild(uploadIcon)
 137
 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)
 146
 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)
 154
 155     div.className = 'vjs-webtorrent'
 156     // Hide the stats before we get the info
 157     div.style.display = 'none'
 158
 159     this.player_.on('torrentInfo', (event, data) => {
 160       const downloadSpeed = bytes(data.downloadSpeed)
 161       const uploadSpeed = bytes(data.uploadSpeed)
 162       const numPeers = data.numPeers
 163
 164       downloadSpeedNumber.textContent = downloadSpeed[0]
 165       downloadSpeedUnit.textContent = ' ' + downloadSpeed[1]
 166
 167       uploadSpeedNumber.textContent = uploadSpeed[0]
 168       uploadSpeedUnit.textContent = ' ' + uploadSpeed[1]
 169
 170       peersNumber.textContent = numPeers
 171
 172       div.style.display = 'block'
 173     })
 174
 175     return div
 176   }
 177 })
 178 Button.registerComponent('WebTorrentButton', WebTorrentButton)
 179
 180 type PeertubePluginOptions = {
 181   videoFiles: VideoFile[]
 182   playerElement: HTMLVideoElement
 183   autoplay: boolean
 184   peerTubeLink: boolean
 185 }
 186 const peertubePlugin = function (options: PeertubePluginOptions) {
 187   const player = this
 188   let currentVideoFile: VideoFile = undefined
 189   const playerElement = options.playerElement
 190   player.videoFiles = options.videoFiles
 191
 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 () {
 196     return true
 197   }
 198
 199   player.getCurrentResolution = function () {
 200     return currentVideoFile ? currentVideoFile.resolution : -1
 201   }
 202
 203   player.getCurrentResolutionLabel = function () {
 204     return currentVideoFile ? currentVideoFile.resolutionLabel : ''
 205   }
 206
 207   player.updateVideoFile = function (videoFile: VideoFile, done: () => void) {
 208     if (done === undefined) {
 209       done = () => { /* empty */ }
 210     }
 211
 212     // Pick the first one
 213     if (videoFile === undefined) {
 214       videoFile = player.videoFiles[0]
 215     }
 216
 217     // Don't add the same video file once again
 218     if (currentVideoFile !== undefined && currentVideoFile.magnetUri === videoFile.magnetUri) {
 219       return
 220     }
 221
 222     const previousVideoFile = currentVideoFile
 223     currentVideoFile = videoFile
 224
 225     console.log('Adding ' + videoFile.magnetUri + '.')
 226     player.torrent = webtorrent.add(videoFile.magnetUri, torrent => {
 227       console.log('Added ' + videoFile.magnetUri + '.')
 228
 229       this.flushVideoFile(previousVideoFile)
 230
 231       const options = { autoplay: true, controls: true }
 232       renderVideo(torrent.files[0], playerElement, options,(err, renderer) => {
 233         if (err) return handleError(err)
 234
 235         this.renderer = renderer
 236         player.play()
 237
 238         return done()
 239       })
 240     })
 241
 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) {
 248         console.error(err)
 249         return
 250       }
 251
 252       return handleError(err)
 253     })
 254
 255     player.trigger('videoFileUpdate')
 256
 257     return player
 258   }
 259
 260   player.updateResolution = function (resolution) {
 261     // Remember player state
 262     const currentTime = player.currentTime()
 263     const isPaused = player.paused()
 264
 265     // Hide bigPlayButton
 266     if (!isPaused && this.player_.options_.bigPlayButton) {
 267       this.player_.bigPlayButton.hide()
 268     }
 269
 270     const newVideoFile = player.videoFiles.find(f => f.resolution === resolution)
 271     player.updateVideoFile(newVideoFile, () => {
 272       player.currentTime(currentTime)
 273       player.handleTechSeeked_()
 274     })
 275   }
 276
 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)
 281     }
 282   }
 283
 284   player.ready(function () {
 285     const controlBar = player.controlBar
 286
 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)
 292     }
 293
 294     player.dispose = function () {
 295       // Don't need to destroy renderer, video player will be destroyed
 296       player.flushVideoFile(currentVideoFile, false)
 297     }
 298
 299     if (options.peerTubeLink === true) {
 300       const peerTubeLinkButton = new PeertubeLinkButton(player)
 301       controlBar.peerTubeLink = controlBar.el().insertBefore(peerTubeLinkButton.el(), fullscreenElement)
 302
 303       controlBar.peerTubeLink.dispose = function () {
 304         this.parentNode.removeChild(this)
 305       }
 306     }
 307
 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)
 312     }
 313
 314     if (options.autoplay === true) {
 315       player.updateVideoFile()
 316     } else {
 317       player.one('play', () => {
 318         // Pause, we wait the video to load before
 319         player.pause()
 320
 321         player.updateVideoFile(undefined, () => player.play())
 322       })
 323     }
 324
 325     setInterval(() => {
 326       if (player.torrent !== undefined) {
 327         player.trigger('torrentInfo', {
 328           downloadSpeed: player.torrent.downloadSpeed,
 329           numPeers: player.torrent.numPeers,
 330           uploadSpeed: player.torrent.uploadSpeed
 331         })
 332       }
 333     }, 1000)
 334   })
 335
 336   function handleError (err: Error | string) {
 337     return player.trigger('customError', { err })
 338   }
 339 }
 340
 341 videojsUntyped.registerPlugin('peertube', peertubePlugin)