Skip to content
Permalink
Browse files

feat: add plyr-driver

  • Loading branch information...
smnbbrv committed Dec 21, 2018
1 parent fb50a96 commit 8f6053f251f9b5d35a9acfed196c0b5560803ad5
@@ -0,0 +1,58 @@
import { TestBed } from '@angular/core/testing';
import Plyr from 'plyr';
import { DefaultPlyrDriver } from './default-plyr-driver';

describe('DefaultPlyrDriver', () => {
beforeEach(() => TestBed.configureTestingModule({}));

it('should be created', () => {
const driver: DefaultPlyrDriver = TestBed.get(DefaultPlyrDriver);
expect(driver).toBeTruthy();
});

function createVideo() {
const video = document.createElement('video');

document.body.appendChild(video);

return video;
}

describe('create', () => {
it('should created Plyr by a given video tag', () => {
const driver: DefaultPlyrDriver = TestBed.get(DefaultPlyrDriver);
expect(driver.create({ videoElement: createVideo(), options: {} })).toBeTruthy();
expect(driver.create({ videoElement: createVideo(), options: {} }) instanceof Plyr).toBeTruthy();
});
});

describe('updateSource', () => {
it('should assign Plyr source settings', () => {
const driver: DefaultPlyrDriver = TestBed.get(DefaultPlyrDriver);
const videoElement = createVideo();
const plyr = driver.create({ videoElement: createVideo(), options: {} });

expect(() => driver.updateSource({
videoElement,
plyr,
source: {
title: 'test title',
poster: '',
sources: [],
tracks: [],
type: 'video'
}
})).not.toThrow();
});
});

describe('destroy', () => {
it('should destroy Plyr instance', () => {
const driver: DefaultPlyrDriver = TestBed.get(DefaultPlyrDriver);
const plyr = driver.create({ videoElement: createVideo(), options: {} });

expect(() => driver.destroy({ plyr })).not.toThrow();
});
});

});
@@ -0,0 +1,18 @@
import Plyr from 'plyr';
import { PlyrDriver, PlyrDriverCreateParams, PlyrDriverUpdateSourceParams, PlyrDriverDestroyParams } from './plyr-driver';

export class DefaultPlyrDriver implements PlyrDriver {

create(params: PlyrDriverCreateParams) {
return new Plyr(params.videoElement, params.options);
}

updateSource(params: PlyrDriverUpdateSourceParams) {
params.plyr.source = params.source;
}

destroy(params: PlyrDriverDestroyParams) {
params.plyr.destroy();
}

}
@@ -0,0 +1,22 @@
import Plyr from 'plyr';

export interface PlyrDriverCreateParams {
options: Plyr.Options;
videoElement: HTMLVideoElement;
}

export interface PlyrDriverUpdateSourceParams {
plyr: Plyr;
source: Plyr.SourceInfo;
videoElement: HTMLVideoElement;
}

export interface PlyrDriverDestroyParams {
plyr: Plyr;
}

export interface PlyrDriver {
create(params: PlyrDriverCreateParams): Plyr;
updateSource(params: PlyrDriverUpdateSourceParams): void;
destroy(params: PlyrDriverDestroyParams): void;
}
@@ -1 +1 @@
<video playsinline controls #v></video>
<video controls crossorigin playsinline #v></video>
@@ -1,7 +1,9 @@
import { AfterViewInit, Component, ElementRef, EventEmitter, Input, NgZone, OnChanges, OnDestroy, Output, ViewChild, SimpleChange, SimpleChanges } from '@angular/core';
import { AfterViewInit, Component, ElementRef, EventEmitter, Input, NgZone, OnChanges, OnDestroy, Output, SimpleChange, SimpleChanges, ViewChild } from '@angular/core';
import Plyr from 'plyr';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { filter, switchMap, first } from 'rxjs/operators';
import { filter, first, switchMap } from 'rxjs/operators';
import { DefaultPlyrDriver } from '../plyr-driver/default-plyr-driver';
import { PlyrDriver } from '../plyr-driver/plyr-driver';

interface PlyrSimpleChanges extends SimpleChanges {
plyrType: SimpleChange;
@@ -28,6 +30,8 @@ export class PlyrComponent implements AfterViewInit, OnChanges, OnDestroy {

private events = new Map();

@Input() private plyrDriver: PlyrDriver;

@Input() private plyrType: Plyr.MediaType = 'video';

@Input() private plyrTitle: string;
@@ -83,12 +87,19 @@ export class PlyrComponent implements AfterViewInit, OnChanges, OnDestroy {

private subscriptions: Subscription[] = [];

constructor(private ngZone: NgZone) { }
private driver: PlyrDriver;

constructor(
private ngZone: NgZone,
) {
}

ngOnChanges(changes: PlyrSimpleChanges) {
this.subscriptions.push(this.plyrInit.pipe(first()).subscribe((player: Plyr) => {
if (changes.plyrOptions) {
this.initPlyr(true);
if (!changes.plyrOptions.firstChange) {
this.initPlyr(true);
}
} else {
this.updatePlyrSource(player);
}
@@ -109,7 +120,12 @@ export class PlyrComponent implements AfterViewInit, OnChanges, OnDestroy {
this.ngZone.runOutsideAngular(() => {
this.destroyPlayer();

const newPlayer = new Plyr(this.vr.nativeElement, this.plyrOptions);
this.driver = this.plyrDriver || new DefaultPlyrDriver();

const newPlayer = this.driver.create({
videoElement: this.videoElement,
options: this.plyrOptions,
});

this.updatePlyrSource(newPlayer);

@@ -118,14 +134,22 @@ export class PlyrComponent implements AfterViewInit, OnChanges, OnDestroy {
}
}

private updatePlyrSource(player: Plyr) {
player.source = {
type: this.plyrType,
title: this.plyrTitle,
sources: this.plyrSources,
poster: this.plyrPoster,
tracks: this.plyrTracks,
};
private get videoElement() {
return this.vr.nativeElement;
}

private updatePlyrSource(plyr: Plyr) {
this.driver.updateSource({
videoElement: this.videoElement,
plyr,
source: {
type: this.plyrType,
title: this.plyrTitle,
sources: this.plyrSources,
poster: this.plyrPoster,
tracks: this.plyrTracks,
},
});
}

// see https://stackoverflow.com/a/53704102/1990451
@@ -138,7 +162,9 @@ export class PlyrComponent implements AfterViewInit, OnChanges, OnDestroy {
private destroyPlayer() {
if (this.player) {
Array.from(this.events.keys()).forEach(name => this.off(name));
this.player.destroy();
this.driver.destroy({
plyr: this.player,
});
}
}

@@ -1,6 +1,4 @@
/*
* Public API Surface of ngx-plyr
*/

export * from './lib/plyr-driver/plyr-driver';
export * from './lib/plyr-driver/default-plyr-driver';
export * from './lib/plyr/plyr.component';
export * from './lib/ngx-plyr.module';
@@ -19,10 +19,7 @@ declare module 'plyr' {
*/
static supported(mediaType?: Plyr.MediaType, provider?: Plyr.Provider, playsInline?: boolean): Plyr.Support;

constructor(targets: NodeList, options?: Plyr.Options);
constructor(targets: HTMLElement, options?: Plyr.Options);
constructor(targets: HTMLElement[], options?: Plyr.Options);
constructor(targets: string, options?: Plyr.Options);
constructor(targets: NodeList | HTMLElement | HTMLElement[] | string, options?: Plyr.Options);

/**
* Indicates if the current player is HTML5.
@@ -463,7 +460,9 @@ declare module 'plyr' {
}

export interface CaptionOptions {
defaultActive?: boolean;
active?: boolean;
language?: string;
update?: boolean;
}

export interface StorageOptions {

0 comments on commit 8f6053f

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