Skip to content
Permalink
Browse files

feat: add support for plyr initial options

  • Loading branch information...
smnbbrv committed Dec 18, 2018
1 parent f730424 commit bdf5c6e9a77974c63c3e35a583a9887ab8e97fb8
Showing with 79 additions and 30 deletions.
  1. +24 −9 README.md
  2. +49 −18 projects/ngx-plyr/src/lib/plyr/plyr.component.ts
  3. +1 −1 src/app/app.component.html
  4. +1 −1 src/app/app.component.ts
  5. +4 −1 tslint.json
@@ -36,15 +36,15 @@ imports: [
Finally use `plyr` in your components as attribute:

```html
<div plyr style="width: 640px;" plyrTitle="Video 1" [plyrSources]="videoSources" (plyrPlayerInit)="player = $event" (plyrPlay)="played($event)"></div>
<div plyr style="width: 640px;" plyrTitle="Video 1" [plyrSources]="videoSources" (plyrInit)="player = $event" (plyrPlay)="played($event)"></div>

<button (click)="play()">Play</button>
```

or tag (remember that in this case `plyr` tag has `dipslay: inline` which cannot accept width, so you need to care of this):

```html
<plyr style="display: block; width: 640px;" plyrTitle="Video 1" [plyrSources]="videoSources" (plyrPlayerInit)="player = $event" (plyrPlay)="played($event)"></plyr>
<plyr style="display: block; width: 640px;" plyrTitle="Video 1" [plyrSources]="videoSources" (plyrInit)="player = $event" (plyrPlay)="played($event)"></plyr>

<button (click)="play()">Play</button>
```
@@ -56,7 +56,7 @@ and the component file would have
@ViewChild(PlyrComponent)
plyr: PlyrComponent;
// or get it from plyrPlayerInit event
// or get it from plyrInit event
player: Plyr;
videoSources: Plyr.Source[] = [
@@ -81,15 +81,22 @@ The API mostly replicates the original Plyr API. See https://github.com/sampotts

### Inputs

* **plyrType**: video or audio
* **plyrTitle**: string
* **plyrPoster**: poster URL
* **plyrSources**: array of sources
* **plyrTracks**: array of tracks
* **plyrType**: video or audio, see [source setters](https://github.com/sampotts/plyr#the-source-setter)
* **plyrTitle**: string, see [source setters](https://github.com/sampotts/plyr#the-source-setter)
* **plyrPoster**: poster URL, see [source setters](https://github.com/sampotts/plyr#the-source-setter)
* **plyrSources**: array of sources, see [source setters](https://github.com/sampotts/plyr#the-source-setter)
* **plyrTracks**: array of tracks, see [source setters](https://github.com/sampotts/plyr#the-source-setter)
* **plyrOptions**: [initial Plyr options](https://github.com/sampotts/plyr#options)

> **Important**: changing `plyrOptions` will trigger the `Plyr` reinitialization, since these options cannot be changed on-the-fly (limitation of Plyr itself)
### Events

* **plyrPlayerInit**: emits a plyr instance when it gets created
ngx-plyr events:

* **plyrInit**: emits a plyr instance when it gets created

[plyr events:](https://github.com/sampotts/plyr#events)

* **plyrProgress**: replicates original *progress* event
* **plyrPlaying**: replicates original *playing* event
@@ -124,6 +131,14 @@ The API mostly replicates the original Plyr API. See https://github.com/sampotts

* **plyrStateChange: replicates original *statechange* event
## Getters and setters / Methods
You can use standard [getters and setters](https://github.com/sampotts/plyr#getters-and-setters) and [methods](https://github.com/sampotts/plyr#methods) by getting `Plyr` instance from `plyrInit`.
## Changelog
[CHANGELOG.md](CHANGELOG.md)
## License
MIT
@@ -1,15 +1,24 @@
import { AfterViewInit, Component, ElementRef, EventEmitter, Input, NgZone, OnDestroy, Output, ViewChild } from '@angular/core';
import { AfterViewInit, Component, ElementRef, EventEmitter, Input, NgZone, OnChanges, OnDestroy, Output, ViewChild, SimpleChange, SimpleChanges } from '@angular/core';
import Plyr from 'plyr';
import { BehaviorSubject, Observable } from 'rxjs';
import { filter, switchMap } from 'rxjs/operators';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { filter, switchMap, first } from 'rxjs/operators';

interface PlyrSimpleChanges extends SimpleChanges {
plyrType: SimpleChange;
plyrTitle: SimpleChange;
plyrPoster: SimpleChange;
plyrSources: SimpleChange;
plyrTracks: SimpleChange;
plyrOptions: SimpleChange;
}

@Component({
selector: 'plyr, [plyr]', // tslint:disable-line
templateUrl: './plyr.component.html',
styleUrls: ['./plyr.component.css'],
exportAs: 'plyr'
})
export class PlyrComponent implements AfterViewInit, OnDestroy {
export class PlyrComponent implements AfterViewInit, OnChanges, OnDestroy {

private playerChange = new BehaviorSubject<Plyr>(null);

@@ -29,10 +38,12 @@ export class PlyrComponent implements AfterViewInit, OnDestroy {

@Input() private plyrTracks: Plyr.Track[];

@Input() private plyrOptions: Plyr.Options;

@ViewChild('v') private vr: ElementRef;

// ngx-plyr events
@Output() plyrPlayerInit = this.playerChange.pipe(filter(player => !!player)) as EventEmitter<Plyr>;
@Output() plyrInit = this.playerChange.pipe(filter(player => !!player)) as EventEmitter<Plyr>;

// standard media events
@Output() plyrProgress = this.createLazyEvent('progress');
@@ -70,16 +81,45 @@ export class PlyrComponent implements AfterViewInit, OnDestroy {
// YouTube events
@Output() plyrStateChange = this.createLazyEvent('statechange');

private subscriptions: Subscription[] = [];

constructor(private ngZone: NgZone) { }

ngOnDestroy(): void {
ngOnChanges(changes: PlyrSimpleChanges) {
this.subscriptions.push(this.plyrInit.pipe(first()).subscribe((player: Plyr) => {
if (changes.plyrOptions) {
this.initPlyr(true);
} else {
this.updatePlyrSource(player);
}
}));
}

ngOnDestroy() {
this.destroyPlayer();
this.subscriptions.forEach(s => s.unsubscribe());
}

ngAfterViewInit() {
this.initLib();
this.initPlyr();
}

private initPlyr(force = false) {
if (force || !this.player) {
this.ngZone.runOutsideAngular(() => {
this.destroyPlayer();

const newPlayer = new Plyr(this.vr.nativeElement, this.plyrOptions);

this.updatePlyrSource(newPlayer);

this.player.source = {
this.playerChange.next(newPlayer);
});
}
}

private updatePlyrSource(player: Plyr) {
player.source = {
type: this.plyrType,
title: this.plyrTitle,
sources: this.plyrSources,
@@ -88,18 +128,9 @@ export class PlyrComponent implements AfterViewInit, OnDestroy {
};
}

private initLib() {
if (!this.player) {
this.ngZone.runOutsideAngular(() => {
this.destroyPlayer();
this.playerChange.next(new Plyr(this.vr.nativeElement));
});
}
}

// see https://stackoverflow.com/a/53704102/1990451
private createLazyEvent<T extends Plyr.PlyrEvent>(name: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent): EventEmitter<T> {
return this.plyrPlayerInit.pipe(
return this.plyrInit.pipe(
switchMap(() => new Observable(observer => this.on(name, (data: T) => this.ngZone.run(() => observer.next(data)))))
) as EventEmitter<T>;
}
@@ -1,5 +1,5 @@
<h1>{{ title }}</h1>

<div plyr style="width: 640px;" plyrTitle="Video 1" [plyrSources]="videoSources" (plyrPlayerInit)="player = $event" (plyrPlay)="played($event)"></div>
<div plyr style="width: 640px;" plyrTitle="Video 1" [plyrSources]="videoSources" (plyrInit)="player = $event" (plyrPlay)="played($event)"></div>

<button (click)="play()">Play</button>
@@ -15,7 +15,7 @@ export class AppComponent {
@ViewChild(PlyrComponent)
plyr: PlyrComponent;

// or get it from plyrPlayerInit event
// or get it from plyrInit event
player: Plyr;

videoSources: Plyr.Source[] = [
@@ -29,7 +29,10 @@
"label-position": true,
"max-line-length": [
true,
140
{
"limit": 140,
"ignore-pattern": "^import |^export {(.*?)}"
}
],
"member-access": false,
"member-ordering": [

0 comments on commit bdf5c6e

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