Add/update/delete/list my playlists

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

diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts
index 0bd607697fc43cc8b6f263b18aa028ede7ad0b3b..92ac57cf5020fe8dd6242c81939f93ac5f22d812 100644 (file)
--- a/client/src/assets/player/peertube-plugin.ts
+++ b/client/src/assets/player/peertube-plugin.ts
@@ -2,7 +2,14 @@
 // @ts-ignore
 import * as videojs from 'video.js'
 import './videojs-components/settings-menu-button'
-import { PeerTubePluginOptions, UserWatching, VideoJSCaption, VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
+import {
+  PeerTubePluginOptions,
+  ResolutionUpdateData,
+  UserWatching,
+  VideoJSCaption,
+  VideoJSComponentInterface,
+  videojsUntyped
+} from './peertube-videojs-typings'
 import { isMobile, timeToInt } from './utils'
 import {
   getStoredLastSubtitle,
@@ -15,7 +22,6 @@ import {
 
 const Plugin: VideoJSComponentInterface = 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
@@ -30,6 +36,7 @@ class PeerTubePlugin extends Plugin {
   private videoViewInterval: any
   private userWatchingVideoInterval: any
   private qualityObservationTimer: any
+  private lastResolutionChange: ResolutionUpdateData
 
   constructor (player: videojs.Player, options: PeerTubePluginOptions) {
     super(player, options)
@@ -39,11 +46,31 @@ class PeerTubePlugin extends Plugin {
     this.videoDuration = options.videoDuration
     this.videoCaptions = options.videoCaptions
 
-    if (this.autoplay === true) this.player.addClass('vjs-has-autoplay')
+    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_.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)
 
@@ -158,6 +185,21 @@ class PeerTubePlugin extends Plugin {
     return fetch(url, { method: 'PUT', body, headers })
   }
 
+  private handleResolutionChange (data: ResolutionUpdateData) {
+    this.lastResolutionChange = data
+
+    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
+      }
+    }
+
+    this.trigger('resolutionChange', data)
+  }
+
   private alterInactivity () {
     let saveInactivityTimeout: number