Fix player progress bar when changing resolution

[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 03def186e57b4e3fd5d48346c229a31ae354042c..4fd5a9be22d5fa04a4e98e814849cb7e0468029c 100644 (file)
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -1,11 +1,13 @@
-const videojs = require('video.js')
+// FIXME: something weird with our path definition in tsconfig and typings
+// @ts-ignore
+import * as videojs from 'video.js'
+
 import * as WebTorrent from 'webtorrent'
 import { VideoFile } from '../../../../shared/models/videos/video.model'
 import { renderVideo } from './video-renderer'
 import './settings-menu-button'
 import { PeertubePluginOptions, UserWatching, VideoJSCaption, VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
 import { isMobile, timeToInt, videoFileMaxByResolution, videoFileMinByResolution } from './utils'
-const CacheChunkStore = require('cache-chunk-store')
 import { PeertubeChunkStore } from './peertube-chunk-store'
 import {
   getAverageBandwidthInStore,
@@ -17,6 +19,8 @@ import {
   saveVolumeInStore
 } from './peertube-player-local-storage'
 
+const CacheChunkStore = require('cache-chunk-store')
+
 type PlayOptions = {
   forcePlay?: boolean,
   seek?: number,
@@ -61,7 +65,7 @@ class PeerTubePlugin extends Plugin {
 
   private player: any
   private currentVideoFile: VideoFile
-  private torrent: any
+  private torrent: WebTorrent.Torrent
   private videoCaptions: VideoJSCaption[]
 
   private renderer: any
@@ -83,7 +87,7 @@ class PeerTubePlugin extends Plugin {
 
   private downloadSpeeds: number[] = []
 
-  constructor (player: any, options: PeertubePluginOptions) {
+  constructor (player: videojs.Player, options: PeertubePluginOptions) {
     super(player, options)
 
     // Disable auto play on iOS
@@ -107,6 +111,8 @@ class PeerTubePlugin extends Plugin {
       const muted = getStoredMute()
       if (muted !== undefined) this.player.muted(muted)
 
+      this.player.duration(options.videoDuration)
+
       this.initializePlayer()
       this.runTorrentInfoScheduler()
       this.runViewAdd()
@@ -273,7 +279,7 @@ class PeerTubePlugin extends Plugin {
 
     const oldTorrent = this.torrent
     const torrentOptions = {
-      store: (chunkLength: any, storeOpts: any) => new CacheChunkStore(new PeertubeChunkStore(chunkLength, storeOpts), {
+      store: (chunkLength: number, storeOpts: any) => new CacheChunkStore(new PeertubeChunkStore(chunkLength, storeOpts), {
         max: 100
       })
     }
@@ -298,13 +304,16 @@ class PeerTubePlugin extends Plugin {
 
         this.flushVideoFile(previousVideoFile)
 
+        // Update progress bar (just for the UI), do not wait rendering
+        if (options.seek) this.player.currentTime(options.seek)
+
         const renderVideoOptions = { autoplay: false, controls: true }
         renderVideo(torrent.files[ 0 ], this.playerElement, renderVideoOptions, (err, renderer) => {
           this.renderer = renderer
 
           if (err) return this.fallbackToHttp(options, done)
 
-          return this.tryToPlay((err: Error) => {
+          return this.tryToPlay(err => {
             if (err) return done(err)
 
             if (options.seek) this.seek(options.seek)
@@ -344,7 +353,7 @@ class PeerTubePlugin extends Plugin {
     })
   }
 
-  private tryToPlay (done?: Function) {
+  private tryToPlay (done?: (err?: Error) => void) {
     if (!done) done = function () { /* empty */ }
 
     const playPromise = this.player.play()
@@ -641,7 +650,7 @@ class PeerTubePlugin extends Plugin {
     return this.videoFiles[Math.floor(this.videoFiles.length / 2)]
   }
 
-  private stopTorrent (torrent: any) {
+  private stopTorrent (torrent: WebTorrent.Torrent) {
     torrent.pause()
     // Pause does not remove actual peers (in particular the webseed peer)
     torrent.removePeer(torrent[ 'ws' ])