Browse Source

Fix embed api with playlists

develop
Chocobozzz 1 week ago
parent
commit
d91021548e
No known key found for this signature in database GPG Key ID: 583A612D890159BE
2 changed files with 44 additions and 7 deletions
  1. +39
    -7
      client/src/standalone/videos/embed-api.ts
  2. +5
    -0
      client/src/standalone/videos/embed.ts

+ 39
- 7
client/src/standalone/videos/embed-api.ts View File

@@ -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 => ({


+ 5
- 0
client/src/standalone/videos/embed.ts View File

@@ -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()
}


Loading…
Cancel
Save