Fix player play exception on chromium

[github/Chocobozzz/PeerTube.git] / client / src / assets / player / peertube-videojs-plugin.ts

diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index 977455bffb599f8848901b5239c4a4a8e63c9f64..8c131c9e9db9888f0299188983bfb048309fa5b7 100644 (file)
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -1,8 +1,8 @@
 // Big thanks to: https://github.com/kmoskwiak/videojs-resolution-switcher
 
-import videojs, { Player } from 'video.js'
+import * as videojs from 'video.js'
 import * as WebTorrent from 'webtorrent'
-import { VideoFile } from '../../../../shared'
+import { VideoFile } from '../../../../shared/models/videos/video.model'
 
 import { renderVideo } from './video-renderer'
 
@@ -27,7 +27,7 @@ const webtorrent = new WebTorrent({ dht: false })
 
 const MenuItem = videojsUntyped.getComponent('MenuItem')
 const ResolutionMenuItem = videojsUntyped.extend(MenuItem, {
-  constructor: function (player: Player, options) {
+  constructor: function (player: videojs.Player, options) {
     options.selectable = true
     MenuItem.call(this, player, options)
 
@@ -117,10 +117,12 @@ const WebTorrentButton = videojsUntyped.extend(Button, {
 
   createEl: function () {
     const div = document.createElement('div')
+    const subDiv = document.createElement('div')
+    div.appendChild(subDiv)
 
     const downloadIcon = document.createElement('span')
     downloadIcon.classList.add('icon', 'icon-download')
-    div.appendChild(downloadIcon)
+    subDiv.appendChild(downloadIcon)
 
     const downloadSpeedText = document.createElement('span')
     downloadSpeedText.classList.add('download-speed-text')
@@ -129,11 +131,11 @@ const WebTorrentButton = videojsUntyped.extend(Button, {
     const downloadSpeedUnit = document.createElement('span')
     downloadSpeedText.appendChild(downloadSpeedNumber)
     downloadSpeedText.appendChild(downloadSpeedUnit)
-    div.appendChild(downloadSpeedText)
+    subDiv.appendChild(downloadSpeedText)
 
     const uploadIcon = document.createElement('span')
     uploadIcon.classList.add('icon', 'icon-upload')
-    div.appendChild(uploadIcon)
+    subDiv.appendChild(uploadIcon)
 
     const uploadSpeedText = document.createElement('span')
     uploadSpeedText.classList.add('upload-speed-text')
@@ -142,19 +144,19 @@ const WebTorrentButton = videojsUntyped.extend(Button, {
     const uploadSpeedUnit = document.createElement('span')
     uploadSpeedText.appendChild(uploadSpeedNumber)
     uploadSpeedText.appendChild(uploadSpeedUnit)
-    div.appendChild(uploadSpeedText)
+    subDiv.appendChild(uploadSpeedText)
 
     const peersText = document.createElement('span')
     peersText.textContent = ' peers'
     peersText.classList.add('peers-text')
     const peersNumber = document.createElement('span')
     peersNumber.classList.add('peers-number')
-    div.appendChild(peersNumber)
-    div.appendChild(peersText)
+    subDiv.appendChild(peersNumber)
+    subDiv.appendChild(peersText)
 
     div.className = 'vjs-webtorrent'
     // Hide the stats before we get the info
-    div.style.display = 'none'
+    subDiv.className = 'vjs-webtorrent-hidden'
 
     this.player_.on('torrentInfo', (event, data) => {
       const downloadSpeed = bytes(data.downloadSpeed)
@@ -169,7 +171,7 @@ const WebTorrentButton = videojsUntyped.extend(Button, {
 
       peersNumber.textContent = numPeers
 
-      div.style.display = 'block'
+      subDiv.className = 'vjs-webtorrent-displayed'
     })
 
     return div
@@ -233,9 +235,7 @@ const peertubePlugin = function (options: PeertubePluginOptions) {
         if (err) return handleError(err)
 
         this.renderer = renderer
-        player.play()
-
-        return done()
+        player.play().then(done)
       })
     })
 
@@ -281,6 +281,12 @@ const peertubePlugin = function (options: PeertubePluginOptions) {
     }
   }
 
+  player.setVideoFiles = function (files: VideoFile[]) {
+    player.videoFiles = files
+
+    player.updateVideoFile(undefined, () => player.play())
+  }
+
   player.ready(function () {
     const controlBar = player.controlBar
 
@@ -315,10 +321,14 @@ const peertubePlugin = function (options: PeertubePluginOptions) {
       player.updateVideoFile()
     } else {
       player.one('play', () => {
-        // Pause, we wait the video to load before
-        player.pause()
-
-        player.updateVideoFile(undefined, () => player.play())
+        // On firefox, we need to wait to load the video before playing
+        if (navigator.userAgent.toLowerCase().indexOf('firefox') !== -1) {
+          player.pause()
+          player.updateVideoFile(undefined, () => player.play())
+          return
+        }
+
+        player.updateVideoFile(undefined)
       })
     }