diff --git a/client/src/assets/player/shared/control-bar/chapters-plugin.ts b/client/src/assets/player/shared/control-bar/chapters-plugin.ts index 5be081694..a17b53c72 100644 --- a/client/src/assets/player/shared/control-bar/chapters-plugin.ts +++ b/client/src/assets/player/shared/control-bar/chapters-plugin.ts @@ -17,16 +17,14 @@ class ChaptersPlugin extends Plugin { this.player.ready(() => { player.addClass('vjs-chapters') - this.player.one('durationchange', () => { - for (const chapter of this.chapters) { - if (chapter.timecode === 0) continue + for (const chapter of this.chapters) { + if (chapter.timecode === 0) continue - const marker = new ProgressBarMarkerComponent(player, { timecode: chapter.timecode }) + const marker = new ProgressBarMarkerComponent(player, { timecode: chapter.timecode }) - this.markers.push(marker) - this.getSeekBar().addChild(marker) - } - }) + this.markers.push(marker) + this.getSeekBar().addChild(marker) + } }) } @@ -34,6 +32,8 @@ class ChaptersPlugin extends Plugin { for (const marker of this.markers) { this.getSeekBar().removeChild(marker) } + + super.dispose() } getChapter (timecode: number) { diff --git a/client/src/assets/player/shared/control-bar/progress-bar-marker-component.ts b/client/src/assets/player/shared/control-bar/progress-bar-marker-component.ts index 50965ec71..5dcd17440 100644 --- a/client/src/assets/player/shared/control-bar/progress-bar-marker-component.ts +++ b/client/src/assets/player/shared/control-bar/progress-bar-marker-component.ts @@ -9,16 +9,25 @@ export class ProgressBarMarkerComponent extends Component { // eslint-disable-next-line @typescript-eslint/no-useless-constructor constructor (player: videojs.Player, options?: ProgressBarMarkerComponentOptions & videojs.ComponentOptions) { super(player, options) + + const updateMarker = () => { + (this.el() as HTMLElement).style.setProperty('left', this.buildLeftStyle()) + } + this.player().on('durationchange', updateMarker) + + this.one('dispose', () => this.player().off('durationchange', updateMarker)) } createEl () { - const left = (this.options_.timecode / this.player().duration()) * 100 - return videojs.dom.createEl('span', { className: 'vjs-marker', - style: `left: ${left}%` + style: `left: ${this.buildLeftStyle()}` }) as HTMLButtonElement } + + private buildLeftStyle () { + return `${(this.options_.timecode / this.player().duration()) * 100}%` + } } videojs.registerComponent('ProgressBarMarkerComponent', ProgressBarMarkerComponent)