Fix embed api with playlists

2 files changed, 44 insertions, 7 deletions

diff --git a/client/src/standalone/videos/embed-api.ts b/client/src/standalone/videos/embed-api.ts
index 2124b4711..a99f1edae 100644
--- a/client/src/standalone/videos/embed-api.ts
+++ b/client/src/standalone/videos/embed-api.ts
@@ -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,6 +32,11 @@ export class PeerTubeEmbedApi {
     this.notifyReady()
   }
 
+  reInit () {
+    this.disposeStateTracking()
+    this.setupStateTracking()
+  }
+
   private get element () {
     return this.embed.getPlayerElement()
   }
@@ -101,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
 
@@ -116,20 +127,29 @@ 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())
@@ -145,6 +165,18 @@ export class PeerTubeEmbedApi {
     })
   }
 
+  private disposeStateTracking () {
+    if (!this.oldVideoElement) return
+
+    this.oldVideoElement.removeEventListener('play', this.videoElPlayListener)
+    this.oldVideoElement.removeEventListener('pause', this.videoElPauseListener)
+    this.oldVideoElement.removeEventListener('ended', this.videoElEndedListener)
+
+    clearInterval(this.videoElInterval)
+
+    this.oldVideoElement = undefined
+  }
+
   private loadResolutions () {
     this.resolutions = this.embed.player.peertubeResolutions().getResolutions()
       .map(r => ({
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index b89c901f1..356f149c0 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -117,6 +117,11 @@ export class PeerTubeEmbed {
 
   private initializeApi () {
     if (this.playerManagerOptions.hasAPIEnabled()) {
+      if (this.api) {
+        this.api.reInit()
+        return
+      }
+
       this.api = new PeerTubeEmbedApi(this)
       this.api.initialize()
     }