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     const subDiv = document.createElement('div')
 121     div.appendChild(subDiv)
 122
 123     const downloadIcon = document.createElement('span')
 124     downloadIcon.classList.add('icon', 'icon-download')
 125     subDiv.appendChild(downloadIcon)
 126
 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)
 135
 136     const uploadIcon = document.createElement('span')
 137     uploadIcon.classList.add('icon', 'icon-upload')
 138     subDiv.appendChild(uploadIcon)
 139
 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)
 148
 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)
 156
 157     div.className = 'vjs-webtorrent'
 158     // Hide the stats before we get the info
 159     subDiv.style.display = 'none'
 160
 161     this.player_.on('torrentInfo', (event, data) => {
 162       const downloadSpeed = bytes(data.downloadSpeed)
 163       const uploadSpeed = bytes(data.uploadSpeed)
 164       const numPeers = data.numPeers
 165
 166       downloadSpeedNumber.textContent = downloadSpeed[0]
 167       downloadSpeedUnit.textContent = ' ' + downloadSpeed[1]
 168
 169       uploadSpeedNumber.textContent = uploadSpeed[0]
 170       uploadSpeedUnit.textContent = ' ' + uploadSpeed[1]
 171
 172       peersNumber.textContent = numPeers
 173
 174       subDiv.style.display = 'block'
 175     })
 176
 177     return div
 178   }
 179 })
 180 Button.registerComponent('WebTorrentButton', WebTorrentButton)
 181
 182 type PeertubePluginOptions = {
 183   videoFiles: VideoFile[]
 184   playerElement: HTMLVideoElement
 185   autoplay: boolean
 186   peerTubeLink: boolean
 187 }
 188 const peertubePlugin = function (options: PeertubePluginOptions) {
 189   const player = this
 190   let currentVideoFile: VideoFile = undefined
 191   const playerElement = options.playerElement
 192   player.videoFiles = options.videoFiles
 193
 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 () {
 198     return true
 199   }
 200
 201   player.getCurrentResolution = function () {
 202     return currentVideoFile ? currentVideoFile.resolution : -1
 203   }
 204
 205   player.getCurrentResolutionLabel = function () {
 206     return currentVideoFile ? currentVideoFile.resolutionLabel : ''
 207   }
 208
 209   player.updateVideoFile = function (videoFile: VideoFile, done: () => void) {
 210     if (done === undefined) {
 211       done = () => { /* empty */ }
 212     }
 213
 214     // Pick the first one
 215     if (videoFile === undefined) {
 216       videoFile = player.videoFiles[0]
 217     }
 218
 219     // Don't add the same video file once again
 220     if (currentVideoFile !== undefined && currentVideoFile.magnetUri === videoFile.magnetUri) {
 221       return
 222     }
 223
 224     const previousVideoFile = currentVideoFile
 225     currentVideoFile = videoFile
 226
 227     console.log('Adding ' + videoFile.magnetUri + '.')
 228     player.torrent = webtorrent.add(videoFile.magnetUri, torrent => {
 229       console.log('Added ' + videoFile.magnetUri + '.')
 230
 231       this.flushVideoFile(previousVideoFile)
 232
 233       const options = { autoplay: true, controls: true }
 234       renderVideo(torrent.files[0], playerElement, options,(err, renderer) => {
 235         if (err) return handleError(err)
 236
 237         this.renderer = renderer
 238         player.play()
 239
 240         return done()
 241       })
 242     })
 243
 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) {
 250         console.error(err)
 251         return
 252       }
 253
 254       return handleError(err)
 255     })
 256
 257     player.trigger('videoFileUpdate')
 258
 259     return player
 260   }
 261
 262   player.updateResolution = function (resolution) {
 263     // Remember player state
 264     const currentTime = player.currentTime()
 265     const isPaused = player.paused()
 266
 267     // Hide bigPlayButton
 268     if (!isPaused && this.player_.options_.bigPlayButton) {
 269       this.player_.bigPlayButton.hide()
 270     }
 271
 272     const newVideoFile = player.videoFiles.find(f => f.resolution === resolution)
 273     player.updateVideoFile(newVideoFile, () => {
 274       player.currentTime(currentTime)
 275       player.handleTechSeeked_()
 276     })
 277   }
 278
 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)
 283     }
 284   }
 285
 286   player.ready(function () {
 287     const controlBar = player.controlBar
 288
 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)
 294     }
 295
 296     player.dispose = function () {
 297       // Don't need to destroy renderer, video player will be destroyed
 298       player.flushVideoFile(currentVideoFile, false)
 299     }
 300
 301     if (options.peerTubeLink === true) {
 302       const peerTubeLinkButton = new PeertubeLinkButton(player)
 303       controlBar.peerTubeLink = controlBar.el().insertBefore(peerTubeLinkButton.el(), fullscreenElement)
 304
 305       controlBar.peerTubeLink.dispose = function () {
 306         this.parentNode.removeChild(this)
 307       }
 308     }
 309
 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)
 314     }
 315
 316     if (options.autoplay === true) {
 317       player.updateVideoFile()
 318     } else {
 319       player.one('play', () => {
 320         // Pause, we wait the video to load before
 321         player.pause()
 322
 323         player.updateVideoFile(undefined, () => player.play())
 324       })
 325     }
 326
 327     setInterval(() => {
 328       if (player.torrent !== undefined) {
 329         player.trigger('torrentInfo', {
 330           downloadSpeed: player.torrent.downloadSpeed,
 331           numPeers: player.torrent.numPeers,
 332           uploadSpeed: player.torrent.uploadSpeed
 333         })
 334       }
 335     }, 1000)
 336   })
 337
 338   function handleError (err: Error | string) {
 339     return player.trigger('customError', { err })
 340   }
 341 }
 342
 343 videojsUntyped.registerPlugin('peertube', peertubePlugin)