feat: add plyr-driver

projects/ngx-plyr/src/lib/plyr-driver/default-plyr-driver.spec.ts

@@ -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();
+    });
+  });
+
+});

projects/ngx-plyr/src/lib/plyr-driver/default-plyr-driver.ts

@@ -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();
+  }
+
+}

projects/ngx-plyr/src/lib/plyr-driver/plyr-driver.ts

@@ -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;
+}

projects/ngx-plyr/src/lib/plyr/plyr.component.html

@@ -1 +1 @@
-<video playsinline controls #v></video>
+<video controls crossorigin playsinline #v></video>

projects/ngx-plyr/src/lib/plyr/plyr.component.ts

@@ -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,
+      });
     }
   }
 

projects/ngx-plyr/src/public_api.ts

@@ -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';

typings/plyr/index.d.ts

@@ -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 {