X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fassets%2Fplayer%2Fpeertube-videojs-plugin.ts;h=c35ce12cb038262790fa056785e760facf26d67a;hb=c6352f2c64f3c1ad54f8500f493587cdce3d33c9;hp=c99363fb52e65a90b6dfb99f9f0804cf6b76f335;hpb=09700934b90e2ac7b1b9ed1694d9d4d52735e2e1;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index c99363fb5..c35ce12cb 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -1,240 +1,40 @@
-// Big thanks to: https://github.com/kmoskwiak/videojs-resolution-switcher
-
 import * as videojs from 'video.js'
 import * as WebTorrent from 'webtorrent'
-import { VideoConstant, VideoResolution } from '../../../../shared/models/videos'
 import { VideoFile } from '../../../../shared/models/videos/video.model'
 import { renderVideo } from './video-renderer'
-
-declare module 'video.js' {
-  interface Player {
-    peertube (): PeerTubePlugin
-  }
-}
-
-interface VideoJSComponentInterface {
-  _player: videojs.Player
-
-  new (player: videojs.Player, options?: any)
-
-  registerComponent (name: string, obj: any)
-}
-
-type PeertubePluginOptions = {
-  videoFiles: VideoFile[]
-  playerElement: HTMLVideoElement
-  videoViewUrl: string
-  videoDuration: number
-}
-
-// https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts
-// Don't import all Angular stuff, just copy the code with shame
-const dictionaryBytes: Array<{max: number, type: string}> = [
-  { max: 1024, type: 'B' },
-  { max: 1048576, type: 'KB' },
-  { max: 1073741824, type: 'MB' },
-  { max: 1.0995116e12, type: 'GB' }
-]
-function bytes (value) {
-  const format = dictionaryBytes.find(d => value < d.max) || dictionaryBytes[dictionaryBytes.length - 1]
-  const calc = Math.floor(value / (format.max / 1024)).toString()
-
-  return [ calc, format.type ]
-}
-
-// videojs typings don't have some method we need
-const videojsUntyped = videojs as any
-const webtorrent = new WebTorrent({ dht: false })
-
-const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem')
-class ResolutionMenuItem extends MenuItem {
-
-  constructor (player: videojs.Player, options) {
-    options.selectable = true
-    super(player, options)
-
-    const currentResolutionId = this.player_.peertube().getCurrentResolutionId()
-    this.selected(this.options_.id === currentResolutionId)
-  }
-
-  handleClick (event) {
-    super.handleClick(event)
-
-    this.player_.peertube().updateResolution(this.options_.id)
-  }
-}
-MenuItem.registerComponent('ResolutionMenuItem', ResolutionMenuItem)
-
-const MenuButton: VideoJSComponentInterface = videojsUntyped.getComponent('MenuButton')
-class ResolutionMenuButton extends MenuButton {
-  label: HTMLElement
-
-  constructor (player: videojs.Player, options) {
-    options.label = 'Quality'
-    super(player, options)
-
-    this.label = document.createElement('span')
-
-    this.el().setAttribute('aria-label', 'Quality')
-    this.controlText('Quality')
-
-    videojsUntyped.dom.addClass(this.label, 'vjs-resolution-button-label')
-    this.el().appendChild(this.label)
-
-    player.peertube().on('videoFileUpdate', () => this.update())
-  }
-
-  createItems () {
-    const menuItems = []
-    for (const videoFile of this.player_.peertube().videoFiles) {
-      menuItems.push(new ResolutionMenuItem(
-        this.player_,
+import './settings-menu-button'
+import { PeertubePluginOptions, VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
+import { getStoredMute, getStoredVolume, saveMuteInStore, saveVolumeInStore } from './utils'
+
+const webtorrent = new WebTorrent({
+  tracker: {
+    rtcConfig: {
+      iceServers: [
+        {
+          urls: 'stun:stun.stunprotocol.org'
+        },
         {
-          id: videoFile.resolution.id,
-          label: videoFile.resolution.label,
-          src: videoFile.magnetUri,
-          selected: videoFile.resolution.id === this.currentSelectionId
-        })
-      )
+          urls: 'stun:stun.framasoft.org'
+        }
+      ]
     }
-
-    return menuItems
-  }
-
-  update () {
-    if (!this.label) return
-
-    this.label.innerHTML = this.player_.peertube().getCurrentResolutionLabel()
-    this.hide()
-    return super.update()
-  }
-
-  buildCSSClass () {
-    return super.buildCSSClass() + ' vjs-resolution-button'
-  }
-}
-MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)
-
-const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
-class PeerTubeLinkButton extends Button {
-
-  createEl () {
-    const link = document.createElement('a')
-    link.href = window.location.href.replace('embed', 'watch')
-    link.innerHTML = 'PeerTube'
-    link.title = 'Go to the video page'
-    link.className = 'vjs-peertube-link'
-    link.target = '_blank'
-
-    return link
-  }
-
-  handleClick () {
-    this.player_.pause()
-  }
-}
-Button.registerComponent('PeerTubeLinkButton', PeerTubeLinkButton)
-
-class WebTorrentButton extends Button {
-  createEl () {
-    const div = document.createElement('div')
-    const subDivWebtorrent = document.createElement('div')
-    div.appendChild(subDivWebtorrent)
-
-    const downloadIcon = document.createElement('span')
-    downloadIcon.classList.add('icon', 'icon-download')
-    subDivWebtorrent.appendChild(downloadIcon)
-
-    const downloadSpeedText = document.createElement('span')
-    downloadSpeedText.classList.add('download-speed-text')
-    const downloadSpeedNumber = document.createElement('span')
-    downloadSpeedNumber.classList.add('download-speed-number')
-    const downloadSpeedUnit = document.createElement('span')
-    downloadSpeedText.appendChild(downloadSpeedNumber)
-    downloadSpeedText.appendChild(downloadSpeedUnit)
-    subDivWebtorrent.appendChild(downloadSpeedText)
-
-    const uploadIcon = document.createElement('span')
-    uploadIcon.classList.add('icon', 'icon-upload')
-    subDivWebtorrent.appendChild(uploadIcon)
-
-    const uploadSpeedText = document.createElement('span')
-    uploadSpeedText.classList.add('upload-speed-text')
-    const uploadSpeedNumber = document.createElement('span')
-    uploadSpeedNumber.classList.add('upload-speed-number')
-    const uploadSpeedUnit = document.createElement('span')
-    uploadSpeedText.appendChild(uploadSpeedNumber)
-    uploadSpeedText.appendChild(uploadSpeedUnit)
-    subDivWebtorrent.appendChild(uploadSpeedText)
-
-    const peersText = document.createElement('span')
-    peersText.classList.add('peers-text')
-    const peersNumber = document.createElement('span')
-    peersNumber.classList.add('peers-number')
-    subDivWebtorrent.appendChild(peersNumber)
-    subDivWebtorrent.appendChild(peersText)
-
-    div.className = 'vjs-peertube'
-    // Hide the stats before we get the info
-    subDivWebtorrent.className = 'vjs-peertube-hidden'
-
-    const subDivHttp = document.createElement('div')
-    subDivHttp.className = 'vjs-peertube-hidden'
-    const subDivHttpText = document.createElement('span')
-    subDivHttpText.classList.add('peers-number')
-    subDivHttpText.textContent = 'HTTP'
-    const subDivFallbackText = document.createElement('span')
-    subDivFallbackText.classList.add('peers-text')
-    subDivFallbackText.textContent = ' fallback'
-
-    subDivHttp.appendChild(subDivHttpText)
-    subDivHttp.appendChild(subDivFallbackText)
-    div.appendChild(subDivHttp)
-
-    this.player_.peertube().on('torrentInfo', (event, data) => {
-      // We are in HTTP fallback
-      if (!data) {
-        subDivHttp.className = 'vjs-peertube-displayed'
-        subDivWebtorrent.className = 'vjs-peertube-hidden'
-
-        return
-      }
-
-      const downloadSpeed = bytes(data.downloadSpeed)
-      const uploadSpeed = bytes(data.uploadSpeed)
-      const numPeers = data.numPeers
-
-      downloadSpeedNumber.textContent = downloadSpeed[ 0 ]
-      downloadSpeedUnit.textContent = ' ' + downloadSpeed[ 1 ]
-
-      uploadSpeedNumber.textContent = uploadSpeed[ 0 ]
-      uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ]
-
-      peersNumber.textContent = numPeers
-      peersText.textContent = ' peers'
-
-      subDivHttp.className = 'vjs-peertube-hidden'
-      subDivWebtorrent.className = 'vjs-peertube-displayed'
-    })
-
-    return div
-  }
-}
-Button.registerComponent('WebTorrentButton', WebTorrentButton)
+  },
+  dht: false
+})
 
 const Plugin: VideoJSComponentInterface = videojsUntyped.getPlugin('plugin')
 class PeerTubePlugin extends Plugin {
+  private readonly playerElement: HTMLVideoElement
+  private readonly autoplay: boolean = false
+  private readonly savePlayerSrcFunction: Function
   private player: any
   private currentVideoFile: VideoFile
-  private playerElement: HTMLVideoElement
   private videoFiles: VideoFile[]
   private torrent: WebTorrent.Torrent
-  private autoplay = false
   private videoViewUrl: string
   private videoDuration: number
   private videoViewInterval
   private torrentInfoInterval
-  private savePlayerSrcFunction: Function
 
   constructor (player: videojs.Player, options: PeertubePluginOptions) {
     super(player, options)
@@ -256,10 +56,20 @@ class PeerTubePlugin extends Plugin {
     this.playerElement = options.playerElement
 
     this.player.ready(() => {
-      this.initializePlayer(options)
+      const volume = getStoredVolume()
+      if (volume !== undefined) this.player.volume(volume)
+      const muted = getStoredMute()
+      if (muted !== undefined) this.player.muted(muted)
+
+      this.initializePlayer()
       this.runTorrentInfoScheduler()
       this.runViewAdd()
     })
+
+    this.player.on('volumechange', () => {
+      saveVolumeInStore(this.player.volume())
+      saveMuteInStore(this.player.muted())
+    })
   }
 
   dispose () {
@@ -293,26 +103,37 @@ class PeerTubePlugin extends Plugin {
       return
     }
 
-    // Do not display error to user because we will have multiple fallbacks
+    // Do not display error to user because we will have multiple fallback
     this.disableErrorDisplay()
 
     this.player.src = () => true
-    this.player.playbackRate(1)
+    const oldPlaybackRate = this.player.playbackRate()
 
     const previousVideoFile = this.currentVideoFile
     this.currentVideoFile = videoFile
 
-    console.log('Adding ' + videoFile.magnetUri + '.')
-    this.torrent = webtorrent.add(videoFile.magnetUri, torrent => {
-      console.log('Added ' + videoFile.magnetUri + '.')
+    this.addTorrent(this.currentVideoFile.magnetUri, previousVideoFile, () => {
+      this.player.playbackRate(oldPlaybackRate)
+      return done()
+    })
+
+    this.trigger('videoFileUpdate')
+  }
+
+  addTorrent (magnetOrTorrentUrl: string, previousVideoFile: VideoFile, done: Function) {
+    console.log('Adding ' + magnetOrTorrentUrl + '.')
+
+    this.torrent = webtorrent.add(magnetOrTorrentUrl, torrent => {
+      console.log('Added ' + magnetOrTorrentUrl + '.')
 
       this.flushVideoFile(previousVideoFile)
 
       const options = { autoplay: true, controls: true }
       renderVideo(torrent.files[0], this.playerElement, options,(err, renderer) => {
-        if (err) return this.fallbackToHttp()
-
         this.renderer = renderer
+
+        if (err) return this.fallbackToHttp(done)
+
         if (!this.player.paused()) {
           const playPromise = this.player.play()
           if (playPromise !== undefined) return playPromise.then(done)
@@ -325,19 +146,25 @@ class PeerTubePlugin extends Plugin {
     })
 
     this.torrent.on('error', err => this.handleError(err))
+
     this.torrent.on('warning', (err: any) => {
       // We don't support HTTP tracker but we don't care -> we use the web socket tracker
       if (err.message.indexOf('Unsupported tracker protocol') !== -1) return
+
       // Users don't care about issues with WebRTC, but developers do so log it in the console
       if (err.message.indexOf('Ice connection failed') !== -1) {
         console.error(err)
         return
       }
 
+      // Magnet hash is not up to date with the torrent file, add directly the torrent file
+      if (err.message.indexOf('incorrect info hash') !== -1) {
+        console.error('Incorrect info hash detected, falling back to torrent file.')
+        return this.addTorrent(this.torrent['xs'], previousVideoFile, done)
+      }
+
       return this.handleError(err)
     })
-
-    this.trigger('videoFileUpdate')
   }
 
   updateResolution (resolutionId: number) {
@@ -379,14 +206,20 @@ class PeerTubePlugin extends Plugin {
     this.updateVideoFile(undefined, () => this.player.play())
   }
 
-  private initializePlayer (options: PeertubePluginOptions) {
+  private initializePlayer () {
+    this.initSmoothProgressBar()
+
+    this.alterInactivity()
+
     if (this.autoplay === true) {
       this.updateVideoFile(undefined, () => this.player.play())
     } else {
-      this.player.one('play', () => {
-        this.player.pause()
-        this.updateVideoFile(undefined, () => this.player.play())
-      })
+      // Proxify first play
+      const oldPlay = this.player.play.bind(this.player)
+      this.player.play = () => {
+        this.updateVideoFile(undefined, () => oldPlay)
+        this.player.play = oldPlay
+      }
     }
   }
 
@@ -439,7 +272,7 @@ class PeerTubePlugin extends Plugin {
     return fetch(this.videoViewUrl, { method: 'POST' })
   }
 
-  private fallbackToHttp () {
+  private fallbackToHttp (done: Function) {
     this.flushVideoFile(this.currentVideoFile, true)
     this.torrent = null
 
@@ -450,6 +283,8 @@ class PeerTubePlugin extends Plugin {
     this.player.src = this.savePlayerSrcFunction
     this.player.src(httpUrl)
     this.player.play()
+
+    return done()
   }
 
   private handleError (err: Error | string) {
@@ -463,5 +298,48 @@ class PeerTubePlugin extends Plugin {
   private disableErrorDisplay () {
     this.player.removeClass('vjs-error-display-enabled')
   }
+
+  private alterInactivity () {
+    let saveInactivityTimeout: number
+
+    const disableInactivity = () => {
+      saveInactivityTimeout = this.player.options_.inactivityTimeout
+      this.player.options_.inactivityTimeout = 0
+    }
+    const enableInactivity = () => {
+      // this.player.options_.inactivityTimeout = saveInactivityTimeout
+    }
+
+    const settingsDialog = this.player.children_.find(c => c.name_ === 'SettingsDialog')
+
+    this.player.controlBar.on('mouseenter', () => disableInactivity())
+    settingsDialog.on('mouseenter', () => disableInactivity())
+    this.player.controlBar.on('mouseleave', () => enableInactivity())
+    settingsDialog.on('mouseleave', () => enableInactivity())
+  }
+
+  // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
+  private initSmoothProgressBar () {
+    const SeekBar = videojsUntyped.getComponent('SeekBar')
+    SeekBar.prototype.getPercent = function getPercent () {
+      // Allows for smooth scrubbing, when player can't keep up.
+      // const time = (this.player_.scrubbing()) ?
+      //   this.player_.getCache().currentTime :
+      //   this.player_.currentTime()
+      const time = this.player_.currentTime()
+      const percent = time / this.player_.duration()
+      return percent >= 1 ? 1 : percent
+    }
+    SeekBar.prototype.handleMouseMove = function handleMouseMove (event) {
+      let newTime = this.calculateDistance(event) * this.player_.duration()
+      if (newTime === this.player_.duration()) {
+        newTime = newTime - 0.1
+      }
+      this.player_.currentTime(newTime)
+      this.update()
+    }
+  }
 }
+
 videojsUntyped.registerPlugin('peertube', PeerTubePlugin)
+export { PeerTubePlugin }