Skip to content
Permalink
Browse files

feat: add plyrPlayerInit event

  • Loading branch information...
smnbbrv committed Dec 18, 2018
1 parent f14b3c9 commit f73042424aaa6c7c0960c34d5f697e2c6a7557e1
Showing with 62 additions and 50 deletions.
  1. +47 −41 README.md
  2. +8 −6 projects/ngx-plyr/src/lib/plyr/plyr.component.ts
  3. +1 −1 src/app/app.component.html
  4. +6 −2 src/app/app.component.ts
@@ -36,25 +36,29 @@ imports: [
Finally use `plyr` in your components as attribute:

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

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

or tag:
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" (plyrPlay)="played($event)"></plyr>
<plyr style="display: block; width: 640px;" plyrTitle="Video 1" [plyrSources]="videoSources" (plyrPlayerInit)="player = $event" (plyrPlay)="played($event)"></plyr>

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

and the component file would have

```ts
// get the component instance to have access to plyr instance
@ViewChild(PlyrComponent)
plyr: PlyrComponent;
// or get it from plyrPlayerInit event
player: Plyr;
videoSources: Plyr.Source[] = [
{
src: 'bTqVqk7FSmY',
@@ -67,7 +71,7 @@ played(event: Plyr.PlyrEvent) {
}
play(): void {
this.plyr.player.play();
this.player.play(); // or this.plyr.player.play()
}
```

@@ -77,46 +81,48 @@ 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
* **plyrTitle**: string
* **plyrPoster**: poster URL
* **plyrSources**: array of sources
* **plyrTracks**: array of tracks

### Events

* plyrProgress: replicates original 'progress' event;
* plyrPlaying: replicates original 'playing' event;
* plyrPlay: replicates original 'play' event;
* plyrPause: replicates original 'pause' event;
* plyrTimeUpdate: replicates original 'timeupdate' event;
* plyrVolumeChange: replicates original 'volumechange' event;
* plyrSeeking: replicates original 'seeking' event;
* plyrSeeked: replicates original 'seeked' event;
* plyrRateChange: replicates original 'ratechange' event;
* plyrEnded: replicates original 'ended' event;
* plyrEnterFullScreen: replicates original 'enterfullscreen' event;
* plyrExitFullScreen: replicates original 'exitfullscreen' event;
* plyrCaptionsEnabled: replicates original 'captionsenabled' event;
* plyrCaptionsDisabled: replicates original 'captionsdisabled' event;
* plyrLanguageChange: replicates original 'languagechange' event;
* plyrControlsHidden: replicates original 'controlshidden' event;
* plyrControlsShown: replicates original 'controlsshown' event;
* plyrReady: replicates original 'ready' event;

* plyrLoadStart: replicates original 'loadstart' event;
* plyrLoadedData: replicates original 'loadeddata' event;
* plyrLoadedMetadata: replicates original 'loadedmetadata' event;
* plyrQualityChange: replicates original 'qualitychange' event;
* plyrCanPlay: replicates original 'canplay' event;
* plyrCanPlayThrough: replicates original 'canplaythrough' event;
* plyrStalled: replicates original 'stalled' event;
* plyrWaiting: replicates original 'waiting' event;
* plyrEmptied: replicates original 'emptied' event;
* plyrCueChange: replicates original 'cuechange' event;
* plyrError: replicates original 'error' event;

* plyrStateChange: replicates original 'statechange' event;
* **plyrPlayerInit**: emits a plyr instance when it gets created

* **plyrProgress**: replicates original *progress* event
* **plyrPlaying**: replicates original *playing* event
* **plyrPlay**: replicates original *play* event
* **plyrPause**: replicates original *pause* event
* **plyrTimeUpdate**: replicates original *timeupdate* event
* **plyrVolumeChange**: replicates original *volumechange* event
* **plyrSeeking**: replicates original *seeking* event
* **plyrSeeked**: replicates original *seeked* event
* **plyrRateChange**: replicates original *ratechange* event
* **plyrEnded**: replicates original *ended* event
* **plyrEnterFullScreen**: replicates original *enterfullscreen* event
* **plyrExitFullScreen**: replicates original *exitfullscreen* event
* **plyrCaptionsEnabled**: replicates original *captionsenabled* event
* **plyrCaptionsDisabled**: replicates original *captionsdisabled* event
* **plyrLanguageChange**: replicates original *languagechange* event
* **plyrControlsHidden**: replicates original *controlshidden* event
* **plyrControlsShown**: replicates original *controlsshown* event
* **plyrReady**: replicates original *ready* event

* **plyrLoadStart**: replicates original *loadstart* event
* **plyrLoadedData**: replicates original *loadeddata* event
* **plyrLoadedMetadata**: replicates original *loadedmetadata* event
* **plyrQualityChange**: replicates original *qualitychange* event
* **plyrCanPlay**: replicates original *canplay* event
* **plyrCanPlayThrough**: replicates original *canplaythrough* event
* **plyrStalled**: replicates original *stalled* event
* **plyrWaiting**: replicates original *waiting* event
* **plyrEmptied**: replicates original *emptied* event
* **plyrCueChange**: replicates original *cuechange* event
* **plyrError**: replicates original *error* event

* **plyrStateChange: replicates original *statechange* event
## License
@@ -11,7 +11,7 @@ import { filter, switchMap } from 'rxjs/operators';
})
export class PlyrComponent implements AfterViewInit, OnDestroy {

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

get player(): Plyr {
return this.playerChange.getValue();
@@ -31,7 +31,10 @@ export class PlyrComponent implements AfterViewInit, OnDestroy {

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

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

// standard media events
@Output() plyrProgress = this.createLazyEvent('progress');
@Output() plyrPlaying = this.createLazyEvent('playing');
@Output() plyrPlay = this.createLazyEvent('play');
@@ -51,7 +54,7 @@ export class PlyrComponent implements AfterViewInit, OnDestroy {
@Output() plyrControlsShown = this.createLazyEvent('controlsshown');
@Output() plyrReady = this.createLazyEvent('ready');

// HTML5 only
// HTML5 events
@Output() plyrLoadStart = this.createLazyEvent('loadstart');
@Output() plyrLoadedData = this.createLazyEvent('loadeddata');
@Output() plyrLoadedMetadata = this.createLazyEvent('loadedmetadata');
@@ -64,7 +67,7 @@ export class PlyrComponent implements AfterViewInit, OnDestroy {
@Output() plyrCueChange = this.createLazyEvent('cuechange');
@Output() plyrError = this.createLazyEvent('error');

// YouTube only
// YouTube events
@Output() plyrStateChange = this.createLazyEvent('statechange');

constructor(private ngZone: NgZone) { }
@@ -96,8 +99,7 @@ export class PlyrComponent implements AfterViewInit, OnDestroy {

// see https://stackoverflow.com/a/53704102/1990451
private createLazyEvent<T extends Plyr.PlyrEvent>(name: Plyr.StandardEvent | Plyr.Html5Event | Plyr.YoutubeEvent): EventEmitter<T> {
return this.playerChange.pipe(
filter(player => !!player),
return this.plyrPlayerInit.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" (plyrPlay)="played($event)"></div>
<div plyr style="width: 640px;" plyrTitle="Video 1" [plyrSources]="videoSources" (plyrPlayerInit)="player = $event" (plyrPlay)="played($event)"></div>

<button (click)="play()">Play</button>
@@ -9,10 +9,14 @@ import { PlyrComponent } from '../../projects/ngx-plyr/src/lib/plyr/plyr.compone
})
export class AppComponent {

title = 'ngx-plyr example';

// get the component instance to have access to plyr instance
@ViewChild(PlyrComponent)
plyr: PlyrComponent;

title = 'ngx-plyr example';
// or get it from plyrPlayerInit event
player: Plyr;

videoSources: Plyr.Source[] = [
{
@@ -26,7 +30,7 @@ export class AppComponent {
}

play(): void {
this.plyr.player.play();
this.player.play(); // or this.plyr.player.play()
}

}

0 comments on commit f730424

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