X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fassets%2Fplayer%2Fpeertube-plugin.ts;h=19d1046769281f0738f084e9d0563b3574c41850;hb=bb3933ef370c46be6090e4e522c6e3f5b7144f4c;hp=0bd607697fc43cc8b6f263b18aa028ede7ad0b3b;hpb=2adfc7ea9a1f858db874df9fe322e7ae833db77c;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts
index 0bd607697..19d104676 100644
--- a/client/src/assets/player/peertube-plugin.ts
+++ b/client/src/assets/player/peertube-plugin.ts
@@ -1,8 +1,11 @@
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import * as videojs from 'video.js'
+import videojs, { VideoJsPlayer } from 'video.js'
 import './videojs-components/settings-menu-button'
-import { PeerTubePluginOptions, UserWatching, VideoJSCaption, VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
+import {
+  PeerTubePluginOptions,
+  ResolutionUpdateData,
+  UserWatching,
+  VideoJSCaption
+} from './peertube-videojs-typings'
 import { isMobile, timeToInt } from './utils'
 import {
   getStoredLastSubtitle,
@@ -13,37 +16,60 @@ import {
   saveVolumeInStore
 } from './peertube-player-local-storage'
 
-const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
+const Plugin = videojs.getPlugin('plugin')
+
 class PeerTubePlugin extends Plugin {
-  private readonly autoplay: boolean = false
-  private readonly startTime: number = 0
   private readonly videoViewUrl: string
   private readonly videoDuration: number
   private readonly CONSTANTS = {
     USER_WATCHING_VIDEO_INTERVAL: 5000 // Every 5 seconds, notify the user is watching the video
   }
 
-  private player: any
   private videoCaptions: VideoJSCaption[]
   private defaultSubtitle: string
 
   private videoViewInterval: any
   private userWatchingVideoInterval: any
-  private qualityObservationTimer: any
+  private lastResolutionChange: ResolutionUpdateData
+
+  private menuOpened = false
+  private mouseInControlBar = false
+  private readonly savedInactivityTimeout: number
 
-  constructor (player: videojs.Player, options: PeerTubePluginOptions) {
-    super(player, options)
+  constructor (player: VideoJsPlayer, options?: PeerTubePluginOptions) {
+    super(player)
 
-    this.startTime = timeToInt(options.startTime)
     this.videoViewUrl = options.videoViewUrl
     this.videoDuration = options.videoDuration
     this.videoCaptions = options.videoCaptions
 
-    if (this.autoplay === true) this.player.addClass('vjs-has-autoplay')
+    this.savedInactivityTimeout = player.options_.inactivityTimeout
+
+    if (options.autoplay === true) this.player.addClass('vjs-has-autoplay')
+
+    this.player.on('autoplay-failure', () => {
+      this.player.removeClass('vjs-has-autoplay')
+    })
 
     this.player.ready(() => {
       const playerOptions = this.player.options_
 
+      if (options.mode === 'webtorrent') {
+        this.player.webtorrent().on('resolutionChange', (_: any, d: any) => this.handleResolutionChange(d))
+        this.player.webtorrent().on('autoResolutionChange', (_: any, d: any) => this.trigger('autoResolutionChange', d))
+      }
+
+      if (options.mode === 'p2p-media-loader') {
+        this.player.p2pMediaLoader().on('resolutionChange', (_: any, d: any) => this.handleResolutionChange(d))
+      }
+
+      this.player.tech(true).on('loadedqualitydata', () => {
+        setTimeout(() => {
+          // Replay a resolution change, now we loaded all quality data
+          if (this.lastResolutionChange) this.handleResolutionChange(this.lastResolutionChange)
+        }, 0)
+      })
+
       const volume = getStoredVolume()
       if (volume !== undefined) this.player.volume(volume)
 
@@ -57,8 +83,22 @@ class PeerTubePlugin extends Plugin {
         saveMuteInStore(this.player.muted())
       })
 
+      if (options.stopTime) {
+        const stopTime = timeToInt(options.stopTime)
+        const self = this
+
+        this.player.on('timeupdate', function onTimeUpdate () {
+          if (self.player.currentTime() > stopTime) {
+            self.player.pause()
+            self.player.trigger('stopped')
+
+            self.player.off('timeupdate', onTimeUpdate)
+          }
+        })
+      }
+
       this.player.textTracks().on('change', () => {
-        const showing = this.player.textTracks().tracks_.find((t: { kind: string, mode: string }) => {
+        const showing = this.player.textTracks().tracks_.find(t => {
           return t.kind === 'captions' && t.mode === 'showing'
         })
 
@@ -82,11 +122,18 @@ class PeerTubePlugin extends Plugin {
   }
 
   dispose () {
-    clearTimeout(this.qualityObservationTimer)
+    if (this.videoViewInterval) clearInterval(this.videoViewInterval)
+    if (this.userWatchingVideoInterval) clearInterval(this.userWatchingVideoInterval)
+  }
 
-    clearInterval(this.videoViewInterval)
+  onMenuOpen () {
+    this.menuOpened = false
+    this.alterInactivity()
+  }
 
-    if (this.userWatchingVideoInterval) clearInterval(this.userWatchingVideoInterval)
+  onMenuClosed () {
+    this.menuOpened = true
+    this.alterInactivity()
   }
 
   private initializePlayer () {
@@ -96,7 +143,7 @@ class PeerTubePlugin extends Plugin {
 
     this.initCaptions()
 
-    this.alterInactivity()
+    this.listenControlBarMouse()
   }
 
   private runViewAdd () {
@@ -158,23 +205,40 @@ class PeerTubePlugin extends Plugin {
     return fetch(url, { method: 'PUT', body, headers })
   }
 
-  private alterInactivity () {
-    let saveInactivityTimeout: number
+  private handleResolutionChange (data: ResolutionUpdateData) {
+    this.lastResolutionChange = data
 
-    const disableInactivity = () => {
-      saveInactivityTimeout = this.player.options_.inactivityTimeout
-      this.player.options_.inactivityTimeout = 0
-    }
-    const enableInactivity = () => {
-      this.player.options_.inactivityTimeout = saveInactivityTimeout
+    const qualityLevels = this.player.qualityLevels()
+
+    for (let i = 0; i < qualityLevels.length; i++) {
+      if (qualityLevels[i].height === data.resolutionId) {
+        data.id = qualityLevels[i].id
+        break
+      }
     }
 
-    const settingsDialog = this.player.children_.find((c: any) => c.name_ === 'SettingsDialog')
+    this.trigger('resolutionChange', data)
+  }
+
+  private listenControlBarMouse () {
+    this.player.controlBar.on('mouseenter', () => {
+      this.mouseInControlBar = true
+      this.alterInactivity()
+    })
+
+    this.player.controlBar.on('mouseleave', () => {
+      this.mouseInControlBar = false
+      this.alterInactivity()
+    })
+  }
+
+  private alterInactivity () {
+    if (this.menuOpened || this.mouseInControlBar) {
+      this.player.options_.inactivityTimeout = this.savedInactivityTimeout
+      return
+    }
 
-    this.player.controlBar.on('mouseenter', () => disableInactivity())
-    settingsDialog.on('mouseenter', () => disableInactivity())
-    this.player.controlBar.on('mouseleave', () => enableInactivity())
-    settingsDialog.on('mouseleave', () => enableInactivity())
+    this.player.options_.inactivityTimeout = 1
   }
 
   private initCaptions () {
@@ -194,7 +258,7 @@ class PeerTubePlugin extends Plugin {
 
   // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
   private initSmoothProgressBar () {
-    const SeekBar = videojsUntyped.getComponent('SeekBar')
+    const SeekBar = videojs.getComponent('SeekBar') as any
     SeekBar.prototype.getPercent = function getPercent () {
       // Allows for smooth scrubbing, when player can't keep up.
       // const time = (this.player_.scrubbing()) ?