Merge branch 'release/4.3.0' into develop

[github/Chocobozzz/PeerTube.git] / client / src / standalone / videos / embed-api.ts

diff --git a/client/src/standalone/videos/embed-api.ts b/client/src/standalone/videos/embed-api.ts
index 8443cb7e9dfb1ff2177aeb3ed0f8da2629bba86e..a99f1edae8e15245abfc3bcd360e6e4405fb7b48 100644 (file)
--- a/client/src/standalone/videos/embed-api.ts
+++ b/client/src/standalone/videos/embed-api.ts
@@ -1,6 +1,6 @@
 import './embed.scss'
-
 import * as Channel from 'jschannel'
+import { logger } from '../../root-helpers'
 import { PeerTubeResolution, PeerTubeTextTrack } from '../player/definitions'
 import { PeerTubeEmbed } from './embed'
 
@@ -13,6 +13,12 @@ export class PeerTubeEmbedApi {
   private isReady = false
   private resolutions: PeerTubeResolution[] = []
 
+  private oldVideoElement: HTMLVideoElement
+  private videoElPlayListener: () => void
+  private videoElPauseListener: () => void
+  private videoElEndedListener: () => void
+  private videoElInterval: any
+
   constructor (private readonly embed: PeerTubeEmbed) {
 
   }
@@ -26,12 +32,17 @@ export class PeerTubeEmbedApi {
     this.notifyReady()
   }
 
+  reInit () {
+    this.disposeStateTracking()
+    this.setupStateTracking()
+  }
+
   private get element () {
-    return this.embed.playerElement
+    return this.embed.getPlayerElement()
   }
 
   private constructChannel () {
-    const channel = Channel.build({ window: window.parent, origin: '*', scope: this.embed.scope })
+    const channel = Channel.build({ window: window.parent, origin: '*', scope: this.embed.getScope() })
 
     channel.bind('play', (txn, params) => this.embed.player.play())
     channel.bind('pause', (txn, params) => this.embed.player.pause())
@@ -52,31 +63,24 @@ export class PeerTubeEmbedApi {
     channel.bind('getPlaybackRate', (txn, params) => this.embed.player.playbackRate())
     channel.bind('getPlaybackRates', (txn, params) => this.embed.player.options_.playbackRates)
 
-    channel.bind('playNextVideo', (txn, params) => this.embed.playNextVideo())
-    channel.bind('playPreviousVideo', (txn, params) => this.embed.playPreviousVideo())
-    channel.bind('getCurrentPosition', (txn, params) => this.embed.getCurrentPosition())
+    channel.bind('playNextVideo', (txn, params) => this.embed.playNextPlaylistVideo())
+    channel.bind('playPreviousVideo', (txn, params) => this.embed.playPreviousPlaylistVideo())
+    channel.bind('getCurrentPosition', (txn, params) => this.embed.getCurrentPlaylistPosition())
     this.channel = channel
   }
 
   private setResolution (resolutionId: number) {
-    console.log('set resolution %d', resolutionId)
+    logger.info(`Set resolution ${resolutionId}`)
 
     if (this.isWebtorrent()) {
       if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionPossible() === false) return
 
-      // Auto resolution
-      if (resolutionId === -1) {
-        this.embed.player.webtorrent().enableAutoResolution()
-        return
-      }
-
-      this.embed.player.webtorrent().disableAutoResolution()
-      this.embed.player.webtorrent().updateResolution(resolutionId)
+      this.embed.player.webtorrent().changeQuality(resolutionId)
 
       return
     }
 
-    this.embed.player.p2pMediaLoader().getHLSJS().nextLevel = resolutionId
+    this.embed.player.p2pMediaLoader().getHLSJS().currentLevel = resolutionId
   }
 
   private getCaptions (): PeerTubeTextTrack[] {
@@ -108,7 +112,7 @@ export class PeerTubeEmbedApi {
   private setupStateTracking () {
     let currentState: 'playing' | 'paused' | 'unstarted' | 'ended' = 'unstarted'
 
-    setInterval(() => {
+    this.videoElInterval = setInterval(() => {
       const position = this.element.currentTime
       const volume = this.element.volume
 
@@ -123,25 +127,36 @@ export class PeerTubeEmbedApi {
       })
     }, 500)
 
-    this.element.addEventListener('play', ev => {
+    // ---------------------------------------------------------------------------
+
+    this.videoElPlayListener = () => {
       currentState = 'playing'
       this.channel.notify({ method: 'playbackStatusChange', params: 'playing' })
-    })
+    }
+    this.element.addEventListener('play', this.videoElPlayListener)
 
-    this.element.addEventListener('pause', ev => {
+    this.videoElPauseListener = () => {
       currentState = 'paused'
       this.channel.notify({ method: 'playbackStatusChange', params: 'paused' })
-    })
+    }
+    this.element.addEventListener('pause', this.videoElPauseListener)
 
-    this.element.addEventListener('ended', ev => {
+    this.videoElEndedListener = () => {
       currentState = 'ended'
       this.channel.notify({ method: 'playbackStatusChange', params: 'ended' })
-    })
+    }
+    this.element.addEventListener('ended', this.videoElEndedListener)
+
+    this.oldVideoElement = this.element
+
+    // ---------------------------------------------------------------------------
 
     // PeerTube specific capabilities
     this.embed.player.peertubeResolutions().on('resolutionsAdded', () => this.loadResolutions())
     this.embed.player.peertubeResolutions().on('resolutionChanged', () => this.loadResolutions())
 
+    this.loadResolutions()
+
     this.embed.player.on('volumechange', () => {
       this.channel.notify({
         method: 'volumeChange',
@@ -150,37 +165,23 @@ export class PeerTubeEmbedApi {
     })
   }
 
-  private loadWebTorrentResolutions () {
-    this.resolutions = []
+  private disposeStateTracking () {
+    if (!this.oldVideoElement) return
 
-    const currentResolutionId = this.embed.player.webtorrent().getCurrentResolutionId()
+    this.oldVideoElement.removeEventListener('play', this.videoElPlayListener)
+    this.oldVideoElement.removeEventListener('pause', this.videoElPauseListener)
+    this.oldVideoElement.removeEventListener('ended', this.videoElEndedListener)
 
-    for (const videoFile of this.embed.player.webtorrent().videoFiles) {
-      let label = videoFile.resolution.label
-      if (videoFile.fps && videoFile.fps >= 50) {
-        label += videoFile.fps
-      }
+    clearInterval(this.videoElInterval)
 
-      this.resolutions.push({
-        id: videoFile.resolution.id,
-        label,
-        src: videoFile.magnetUri,
-        active: videoFile.resolution.id === currentResolutionId,
-        height: videoFile.resolution.id
-      })
-    }
-
-    this.channel.notify({
-      method: 'resolutionUpdate',
-      params: this.resolutions
-    })
+    this.oldVideoElement = undefined
   }
 
   private loadResolutions () {
     this.resolutions = this.embed.player.peertubeResolutions().getResolutions()
       .map(r => ({
         id: r.id,
-        label: r.height + 'p',
+        label: r.label,
         active: r.selected,
         width: r.width,
         height: r.height