Skip to content
Permalink
Browse files

fix: plyr is recreated properly after options change, fix #12

  • Loading branch information...
smnbbrv committed May 6, 2019
1 parent a882108 commit 4f81dfcaed733bbf9e147d9a2faf2dfd067ea653
@@ -1,5 +1,5 @@
import Plyr from 'plyr';
import { PlyrDriver, PlyrDriverCreateParams, PlyrDriverUpdateSourceParams, PlyrDriverDestroyParams } from './plyr-driver';
import { PlyrDriver, PlyrDriverCreateParams, PlyrDriverDestroyParams, PlyrDriverUpdateSourceParams } from './plyr-driver';

export class DefaultPlyrDriver implements PlyrDriver {

@@ -1 +0,0 @@
<video controls crossorigin playsinline #v></video>
@@ -1,4 +1,4 @@
import { AfterViewInit, Component, ElementRef, EventEmitter, Input, NgZone, OnChanges, OnDestroy, Output, SimpleChange, SimpleChanges, ViewChild } from '@angular/core';
import { AfterViewInit, Component, ElementRef, EventEmitter, Input, NgZone, OnChanges, OnDestroy, Output, Renderer2, SimpleChange, SimpleChanges, ViewChild } from '@angular/core';
import Plyr from 'plyr';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { filter, first, switchMap } from 'rxjs/operators';
@@ -89,8 +89,12 @@ export class PlyrComponent implements AfterViewInit, OnChanges, OnDestroy {

private driver: PlyrDriver;

private videoElement: HTMLVideoElement;

constructor(
private elementRef: ElementRef<HTMLDivElement>,
private ngZone: NgZone,
private renderer: Renderer2,
) {
}

@@ -122,6 +126,8 @@ export class PlyrComponent implements AfterViewInit, OnChanges, OnDestroy {

this.driver = this.plyrDriver || new DefaultPlyrDriver();

this.ensureVideoElement();

const newPlayer = this.driver.create({
videoElement: this.videoElement,
options: this.plyrOptions,
@@ -134,10 +140,6 @@ export class PlyrComponent implements AfterViewInit, OnChanges, OnDestroy {
}
}

private get videoElement() {
return this.vr.nativeElement;
}

private updatePlyrSource(plyr: Plyr) {
this.driver.updateSource({
videoElement: this.videoElement,
@@ -162,9 +164,32 @@ export class PlyrComponent implements AfterViewInit, OnChanges, OnDestroy {
private destroyPlayer() {
if (this.player) {
Array.from(this.events.keys()).forEach(name => this.off(name));

this.driver.destroy({
plyr: this.player,
});

this.videoElement = null;
}
}

private get hostElement() {
return this.elementRef.nativeElement;
}

// this method is required because the plyr inserts clone of the original element on destroy
// so we catch the clone element right here and reuse it
private ensureVideoElement() {
const videoElement = this.hostElement.querySelector('video');

if (videoElement) {
this.videoElement = videoElement;
} else {
this.videoElement = this.renderer.createElement('video');
this.videoElement.controls = true;
this.videoElement.setAttribute('crossorigin', '');
this.videoElement.setAttribute('playsinline', '');
this.renderer.appendChild(this.hostElement, this.videoElement);
}
}

@@ -11,8 +11,8 @@ <h1>ngx-plyr: plyr for angular</h1>
<mat-card-title>Video</mat-card-title>
<mat-card-subtitle>Plyr with custom video as a source</mat-card-subtitle>

<div mat-card-image plyr plyrTitle="Custom video" [plyrPoster]="poster" [plyrSources]="videoSources" [plyrTracks]="tracks"
(plyrInit)="player = $event" (plyrPlay)="played($event)"></div>
<div mat-card-image plyr plyrTitle="Custom video" [plyrPoster]="poster" [plyrSources]="videoSources"
[plyrTracks]="tracks" (plyrInit)="player = $event" (plyrPlay)="played($event)"></div>
<mat-card-actions>
<button mat-raised-button color="accent" (click)="play()">
<mat-icon>play_arrow</mat-icon>
@@ -29,7 +29,9 @@ <h1>ngx-plyr: plyr for angular</h1>
Stop
</button>

<a mat-raised-button color="primary" href="https://github.com/smnbbrv/ngx-plyr/tree/master/src/app">Source code</a>
<a mat-raised-button color="primary" href="https://github.com/smnbbrv/ngx-plyr/tree/master/src/app">
Source code
</a>
</mat-card-actions>
</mat-card>

@@ -40,7 +42,8 @@ <h1>ngx-plyr: plyr for angular</h1>
<div mat-card-image plyr plyrTitle="Audio" plyrType="audio" [plyrSources]="audioSources"></div>

<mat-card-actions>
<a mat-raised-button color="primary" href="https://github.com/smnbbrv/ngx-plyr/tree/master/src/app">Source code</a>
<a mat-raised-button color="primary" href="https://github.com/smnbbrv/ngx-plyr/tree/master/src/app">Source
code</a>
</mat-card-actions>
</mat-card>

@@ -56,7 +59,8 @@ <h2>Youtube and Vimeo</h2>
<div mat-card-image plyr plyrTitle="Video from Youtube" [plyrSources]="youtubeSources"></div>

<mat-card-actions>
<a mat-raised-button color="primary" href="https://github.com/smnbbrv/ngx-plyr/tree/master/src/app">Source code</a>
<a mat-raised-button color="primary" href="https://github.com/smnbbrv/ngx-plyr/tree/master/src/app">Source
code</a>
</mat-card-actions>
</mat-card>

@@ -67,7 +71,8 @@ <h2>Youtube and Vimeo</h2>
<div mat-card-image plyr plyrTitle="Video from Vimeo" [plyrSources]="vimeoSources"></div>

<mat-card-actions>
<a mat-raised-button color="primary" href="https://github.com/smnbbrv/ngx-plyr/tree/master/src/app">Source code</a>
<a mat-raised-button color="primary" href="https://github.com/smnbbrv/ngx-plyr/tree/master/src/app">Source
code</a>
</mat-card-actions>
</mat-card>
</div>

0 comments on commit 4f81dfc

Please sign in to comment.
You can’t perform that action at this time.