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 84d664654ad0a8b266757e791c8f7c5a13a03ad7..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,6 +32,11 @@ export class PeerTubeEmbedApi {
     this.notifyReady()
   }
 
+  reInit () {
+    this.disposeStateTracking()
+    this.setupStateTracking()
+  }
+
   private get element () {
     return this.embed.getPlayerElement()
   }
@@ -59,7 +70,7 @@ export class PeerTubeEmbedApi {
   }
 
   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
@@ -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 => ({