feat(VideoLoader): add ability to manually check inviewport status

Author: edoparearyee

README.md

@@ -186,6 +186,27 @@ export class AppComponent {
 ```
 
 
+### Check inviewport status manually
+
+```html
+<sn-video-loader
+  [sizes]="sizes"
+  [video]="video"
+  [loop]="true"
+  [muted]="true"
+  [autoplay]="true"
+  [controls]="true"
+  [playsInline]="true"
+  type="video/mp4"
+  videoClass="video"
+  posterClass="img"
+  #videoEl>
+</sn-video-loader>
+
+<button (click)="videoEl.checkInViewportStatus()">Check status</button>
+```
+
+
 ## Development server
 
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

package-lock.json

@@ -47,7 +47,7 @@
   "dependencies": {},
   "peerDependencies": {
     "@angular/core": ">=5.0.0 <6.0.0 || >=5.0.0-beta <6.0.0",
-    "@thisissoon/angular-inviewport": ">=2.1.1 <3.0.0",
+    "@thisissoon/angular-inviewport": ">=2.2.0 <3.0.0",
     "rxjs": ">=5.0.0 <6.0.0"
   },
   "devDependencies": {
@@ -63,7 +63,7 @@
     "@angular/platform-browser": "^5.2.5",
     "@angular/platform-browser-dynamic": "^5.2.5",
     "@angular/router": "^5.2.5",
-    "@thisissoon/angular-inviewport": "^2.1.1",
+    "@thisissoon/angular-inviewport": "^2.2.0",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",

package.json

@@ -34,5 +34,8 @@ <h3>Bottom image imageLoaded event count: <span class="image-loaded-count">{{ im
   [playsInline]="true"
   type="video/mp4"
   videoClass="video"
-  posterClass="img">
+  posterClass="img"
+  #videoEl>
 </sn-video-loader>
+
+<button (click)="videoEl.checkInViewportStatus()">Check</button>

src/app/app.component.html

@@ -11,6 +11,7 @@
   [attr.playsinline]="playsInline"
   (loadeddata)="onVideoLoad()"
   (inViewportChange)="onInViewportChange($event)"
+  #videoEl="snInViewport"
   snInViewport>
 
   <sn-image-loader

src/app/video-loader/video-loader/video-loader.component.html

@@ -1,6 +1,6 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { WindowRef } from '@thisissoon/angular-inviewport';
+import { InViewportModule } from '@thisissoon/angular-inviewport';
 
 import { VideoLoaderComponent } from './video-loader.component';
 import { video, sizes } from '../../app-data';
@@ -11,7 +11,7 @@ describe('VideoLoaderComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      providers: [WindowRef],
+      imports: [InViewportModule.forRoot()],
       schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
       declarations: [ VideoLoaderComponent ]
     })
@@ -100,4 +100,10 @@ describe('VideoLoaderComponent', () => {
     expect(component.poster).toEqual('foo');
   });
 
+  it('should check inviewport status', () => {
+    const spy = spyOn(component.videoEl, 'calculateInViewportStatus');
+    component.checkInViewportStatus();
+    expect(spy).toHaveBeenCalled();
+  });
+
 });

src/app/video-loader/video-loader/video-loader.component.spec.ts

@@ -3,14 +3,15 @@ import {
   Input,
   HostBinding,
   NgZone,
+  ViewChild,
   AfterViewInit,
   OnDestroy,
   ChangeDetectorRef
 } from '@angular/core';
 import { Subject } from 'rxjs/Subject';
 import { fromEvent } from 'rxjs/observable/fromEvent';
 import { takeUntil, debounceTime, startWith } from 'rxjs/operators';
-import { WindowRef } from '@thisissoon/angular-inviewport';
+import { WindowRef, InViewportDirective } from '@thisissoon/angular-inviewport';
 
 import { ResponsiveImage, Size } from '../../image-loader/shared/image.model';
 import { Breakpoint } from '../../image-loader/shared/breakpoint.model';
@@ -100,6 +101,14 @@ export class VideoLoaderComponent implements AfterViewInit, OnDestroy {
    */
   @Input()
   public playsInline: boolean;
+  /**
+   * Reference to inviewport directive instance
+   *
+   * @type {InViewportDirective}
+   * @memberof VideoLoaderComponent
+   */
+  @ViewChild('videoEl')
+  public videoEl: InViewportDirective;
   /**
    * List of breakpoints to select video from
    *
@@ -220,6 +229,14 @@ export class VideoLoaderComponent implements AfterViewInit, OnDestroy {
     this.inViewport = inViewport;
     this.loadVideo();
   }
+  /**
+   * Checks if video element is in viewport
+   *
+   * @memberof VideoLoaderComponent
+   */
+  public checkInViewportStatus(): void {
+    this.videoEl.calculateInViewportStatus();
+  }
   /**
    * On width change, determine if device has changed and
    * reset directive