Set last subtitle or subtitle in URL

[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..4a280b7efed111f6153011941697209e31705b09 100644 (file)
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -1,22 +1,28 @@
-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,
+  getStoredLastSubtitle,
   getStoredMute,
   getStoredVolume,
   getStoredWebTorrentEnabled,
   saveAverageBandwidth,
+  saveLastSubtitle,
   saveMuteInStore,
   saveVolumeInStore
 } from './peertube-player-local-storage'
 
+const CacheChunkStore = require('cache-chunk-store')
+
 type PlayOptions = {
   forcePlay?: boolean,
   seek?: number,
@@ -61,12 +67,13 @@ class PeerTubePlugin extends Plugin {
 
   private player: any
   private currentVideoFile: VideoFile
-  private torrent: any
+  private torrent: WebTorrent.Torrent
   private videoCaptions: VideoJSCaption[]
+  private defaultSubtitle: string
 
   private renderer: any
   private fakeRenderer: any
-  private destoyingFakeRenderer = false
+  private destroyingFakeRenderer = false
 
   private autoResolution = true
   private forbidAutoResolution = false
@@ -83,7 +90,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
@@ -102,11 +109,36 @@ class PeerTubePlugin extends Plugin {
     if (this.autoplay === true) this.player.addClass('vjs-has-autoplay')
 
     this.player.ready(() => {
+      const playerOptions = this.player.options_
+
       const volume = getStoredVolume()
       if (volume !== undefined) this.player.volume(volume)
-      const muted = getStoredMute()
+
+      const muted = playerOptions.muted !== undefined ? playerOptions.muted : getStoredMute()
       if (muted !== undefined) this.player.muted(muted)
 
+      this.defaultSubtitle = options.subtitle || getStoredLastSubtitle()
+
+      this.player.on('volumechange', () => {
+        saveVolumeInStore(this.player.volume())
+        saveMuteInStore(this.player.muted())
+      })
+
+      this.player.textTracks().on('change', () => {
+        const showing = this.player.textTracks().tracks_.find((t: { kind: string, mode: string }) => {
+          return t.kind === 'captions' && t.mode === 'showing'
+        })
+
+        if (!showing) {
+          saveLastSubtitle('off')
+          return
+        }
+
+        saveLastSubtitle(showing.language)
+      })
+
+      this.player.duration(options.videoDuration)
+
       this.initializePlayer()
       this.runTorrentInfoScheduler()
       this.runViewAdd()
@@ -118,11 +150,6 @@ class PeerTubePlugin extends Plugin {
         this.runAutoQualitySchedulerTimer = setTimeout(() => this.runAutoQualityScheduler(), this.CONSTANTS.AUTO_QUALITY_SCHEDULER)
       })
     })
-
-    this.player.on('volumechange', () => {
-      saveVolumeInStore(this.player.volume())
-      saveMuteInStore(this.player.muted())
-    })
   }
 
   dispose () {
@@ -273,7 +300,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 +325,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 +374,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,21 +671,21 @@ 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' ])
   }
 
   private renderFileInFakeElement (file: WebTorrent.TorrentFile, delay: number) {
-    this.destoyingFakeRenderer = false
+    this.destroyingFakeRenderer = false
 
     const fakeVideoElem = document.createElement('video')
     renderVideo(file, fakeVideoElem, { autoplay: false, controls: false }, (err, renderer) => {
       this.fakeRenderer = renderer
 
       // The renderer returns an error when we destroy it, so skip them
-      if (this.destoyingFakeRenderer === false && err) {
+      if (this.destroyingFakeRenderer === false && err) {
         console.error('Cannot render new torrent in fake video element.', err)
       }
 
@@ -666,7 +696,7 @@ class PeerTubePlugin extends Plugin {
 
   private destroyFakeRenderer () {
     if (this.fakeRenderer) {
-      this.destoyingFakeRenderer = true
+      this.destroyingFakeRenderer = true
 
       if (this.fakeRenderer.destroy) {
         try {
@@ -686,7 +716,8 @@ class PeerTubePlugin extends Plugin {
         label: caption.label,
         language: caption.language,
         id: caption.language,
-        src: caption.src
+        src: caption.src,
+        default: this.defaultSubtitle === caption.language
       }, false)
     }
   }