aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2022-11-14 10:26:41 +0100
committerChocobozzz <me@florianbigard.com>2022-11-14 10:26:41 +0100
commitd91021548ed0dd3acec28722d0166bf38c67e0da (patch)
tree715774ced0b3a7c8c0f5624cbdd6550881a02a5f
parent32f44a017c8037f212fc9a0a3f1c58a57eec1e4c (diff)
downloadPeerTube-d91021548ed0dd3acec28722d0166bf38c67e0da.tar.gz
PeerTube-d91021548ed0dd3acec28722d0166bf38c67e0da.tar.zst
PeerTube-d91021548ed0dd3acec28722d0166bf38c67e0da.zip
Fix embed api with playlists
-rw-r--r--client/src/standalone/videos/embed-api.ts46
-rw-r--r--client/src/standalone/videos/embed.ts5
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 {
13 private isReady = false 13 private isReady = false
14 private resolutions: PeerTubeResolution[] = [] 14 private resolutions: PeerTubeResolution[] = []
15 15
16 private oldVideoElement: HTMLVideoElement
17 private videoElPlayListener: () => void
18 private videoElPauseListener: () => void
19 private videoElEndedListener: () => void
20 private videoElInterval: any
21
16 constructor (private readonly embed: PeerTubeEmbed) { 22 constructor (private readonly embed: PeerTubeEmbed) {
17 23
18 } 24 }
@@ -26,6 +32,11 @@ export class PeerTubeEmbedApi {
26 this.notifyReady() 32 this.notifyReady()
27 } 33 }
28 34
35 reInit () {
36 this.disposeStateTracking()
37 this.setupStateTracking()
38 }
39
29 private get element () { 40 private get element () {
30 return this.embed.getPlayerElement() 41 return this.embed.getPlayerElement()
31 } 42 }
@@ -101,7 +112,7 @@ export class PeerTubeEmbedApi {
101 private setupStateTracking () { 112 private setupStateTracking () {
102 let currentState: 'playing' | 'paused' | 'unstarted' | 'ended' = 'unstarted' 113 let currentState: 'playing' | 'paused' | 'unstarted' | 'ended' = 'unstarted'
103 114
104 setInterval(() => { 115 this.videoElInterval = setInterval(() => {
105 const position = this.element.currentTime 116 const position = this.element.currentTime
106 const volume = this.element.volume 117 const volume = this.element.volume
107 118
@@ -116,20 +127,29 @@ export class PeerTubeEmbedApi {
116 }) 127 })
117 }, 500) 128 }, 500)
118 129
119 this.element.addEventListener('play', ev => { 130 // ---------------------------------------------------------------------------
131
132 this.videoElPlayListener = () => {
120 currentState = 'playing' 133 currentState = 'playing'
121 this.channel.notify({ method: 'playbackStatusChange', params: 'playing' }) 134 this.channel.notify({ method: 'playbackStatusChange', params: 'playing' })
122 }) 135 }
136 this.element.addEventListener('play', this.videoElPlayListener)
123 137
124 this.element.addEventListener('pause', ev => { 138 this.videoElPauseListener = () => {
125 currentState = 'paused' 139 currentState = 'paused'
126 this.channel.notify({ method: 'playbackStatusChange', params: 'paused' }) 140 this.channel.notify({ method: 'playbackStatusChange', params: 'paused' })
127 }) 141 }
142 this.element.addEventListener('pause', this.videoElPauseListener)
128 143
129 this.element.addEventListener('ended', ev => { 144 this.videoElEndedListener = () => {
130 currentState = 'ended' 145 currentState = 'ended'
131 this.channel.notify({ method: 'playbackStatusChange', params: 'ended' }) 146 this.channel.notify({ method: 'playbackStatusChange', params: 'ended' })
132 }) 147 }
148 this.element.addEventListener('ended', this.videoElEndedListener)
149
150 this.oldVideoElement = this.element
151
152 // ---------------------------------------------------------------------------
133 153
134 // PeerTube specific capabilities 154 // PeerTube specific capabilities
135 this.embed.player.peertubeResolutions().on('resolutionsAdded', () => this.loadResolutions()) 155 this.embed.player.peertubeResolutions().on('resolutionsAdded', () => this.loadResolutions())
@@ -145,6 +165,18 @@ export class PeerTubeEmbedApi {
145 }) 165 })
146 } 166 }
147 167
168 private disposeStateTracking () {
169 if (!this.oldVideoElement) return
170
171 this.oldVideoElement.removeEventListener('play', this.videoElPlayListener)
172 this.oldVideoElement.removeEventListener('pause', this.videoElPauseListener)
173 this.oldVideoElement.removeEventListener('ended', this.videoElEndedListener)
174
175 clearInterval(this.videoElInterval)
176
177 this.oldVideoElement = undefined
178 }
179
148 private loadResolutions () { 180 private loadResolutions () {
149 this.resolutions = this.embed.player.peertubeResolutions().getResolutions() 181 this.resolutions = this.embed.player.peertubeResolutions().getResolutions()
150 .map(r => ({ 182 .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 {
117 117
118 private initializeApi () { 118 private initializeApi () {
119 if (this.playerManagerOptions.hasAPIEnabled()) { 119 if (this.playerManagerOptions.hasAPIEnabled()) {
120 if (this.api) {
121 this.api.reInit()
122 return
123 }
124
120 this.api = new PeerTubeEmbedApi(this) 125 this.api = new PeerTubeEmbedApi(this)
121 this.api.initialize() 126 this.api.initialize()
122 } 127 }