feat(image-loader): update to angular-inviewport 4

BREAKING CHANGE: Updated to @thisissoon/angular-inviewport v4 which removes the need to manually
check inviewport status

Author: edoparearyee

README.md

@@ -28,16 +28,11 @@ import {
   ImageLoaderModule,
   VideoLoaderModule,
 } from '@thisissoon/angular-image-loader';
-import { InViewportModule, WindowRef } from '@thisissoon/angular-inviewport';
-
-// Provide window object for platform browser
-export const providers: Provider[] = [
-  { provide: WindowRef, useFactory: () => window },
-];
+import { InViewportModule } from '@thisissoon/angular-inviewport';
 
 @NgModule({
   imports: [
-    InViewportModule.forRoot(providers),
+    InViewportModule,
     ImageLoaderModule, // Only this import required if using just the image loader
     VideoLoaderModule, // Only this import required if using just the video loader
   ],
@@ -52,12 +47,7 @@ import { ImageLoaderModule } from '@thisissoon/angular-image-loader';
 import { InViewportModule, WindowRef } from '@thisissoon/angular-inviewport';
 
 @NgModule({
-  imports: [
-    // No need to provide WindowRef
-    InViewportModule.forRoot(),
-    ImageLoaderModule,
-    VideoLoaderModule,
-  ],
+  imports: [InViewportModule.forServer(), ImageLoaderModule, VideoLoaderModule],
 })
 export class AppModule {}
 ```
@@ -134,25 +124,10 @@ export class AppComponent {
 }
 
 .sn-image-loaded ::ng-deep .img {
-  filter: blur(0px);
+  filter: blur(0);
 }
 ```
 
-### Check inviewport status manually
-
-```html
-<sn-image-loader
-  [image]="image"
-  [sizes]="sizes"
-  imgClass="img"
-  alt="lorem ipsum"
-  #imgEl
->
-</sn-image-loader>
-
-<button (click)="imgEl.checkInViewportStatus()">Check status</button>
-```
-
 ## Video Loader Example
 
 ### `app.component.html`
@@ -208,27 +183,6 @@ 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.json

@@ -50,7 +50,7 @@
   "dependencies": {},
   "peerDependencies": {
     "@angular/core": ">=5.0.0 <8.0.0",
-    "@thisissoon/angular-inviewport": ">=3.0.0 <4.0.0",
+    "@thisissoon/angular-inviewport": ">=4.0.0 <5.0.0",
     "rxjs": ">=6.0.0 <7.0.0"
   },
   "devDependencies": {
@@ -67,7 +67,7 @@
     "@angular/platform-browser": "^7.0.4",
     "@angular/platform-browser-dynamic": "^7.0.4",
     "@angular/router": "^7.0.4",
-    "@thisissoon/angular-inviewport": "^3.0.0",
+    "@thisissoon/angular-inviewport": "^4.1.0",
     "@thisissoon/schematics": "^1.0.0-alpha.18",
     "@types/jasmine": "~3.3.0",
     "@types/jasminewd2": "~2.0.2",

src/app/app.component.html

@@ -22,7 +22,6 @@ <h3>Bottom image</h3>
   class="sn-image-loader sn-image-loader--bottom"
   #imgEl>
 </sn-image-loader>
-<button (click)="imgEl.checkInViewportStatus()">Check</button>
 <h3>Bottom image imageLoaded event count: <span class="image-loaded-count">{{ imageLoadedEventCount }}</span></h3>
 <div class="spacer"></div>
 
@@ -39,5 +38,3 @@ <h3>Bottom image imageLoaded event count: <span class="image-loaded-count">{{ im
   posterClass="img"
   #videoEl>
 </sn-video-loader>
-
-<button (click)="videoEl.checkInViewportStatus()">Check</button>

src/app/app.module.ts

@@ -1,21 +1,16 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, Provider } from '@angular/core';
-import { InViewportModule, WindowRef } from '@thisissoon/angular-inviewport';
+import { InViewportModule } from '@thisissoon/angular-inviewport';
 
 import { ImageLoaderModule } from './image-loader/image-loader.module';
 import { VideoLoaderModule } from './video-loader/video-loader.module';
 import { AppComponent } from './app.component';
 
-export const getWindow = () => window;
-export const providers: Provider[] = [
-  { provide: WindowRef, useFactory: getWindow },
-];
-
 @NgModule({
   declarations: [AppComponent],
   imports: [
     BrowserModule,
-    InViewportModule.forRoot(providers),
+    InViewportModule,
     ImageLoaderModule,
     VideoLoaderModule,
   ],

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

@@ -7,7 +7,6 @@
   [class]="imgClass"
   snInViewport
   (inViewportChange)="onInViewportChange($event)"
-  [debounce]="0"
   (load)="onImageLoad($event)">
 
 <img

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

@@ -7,7 +7,6 @@ import { InViewportModule } from '@thisissoon/angular-inviewport';
 import { ImageLoaderComponent } from './image-loader.component';
 import { ResponsiveImage } from '../shared/image.model';
 import { Breakpoint } from '../shared/breakpoint.model';
-import { ImageLoadedEvent } from '../shared/image-loaded-event.model';
 
 describe('ImageLoaderComponent', () => {
   let fixture: ComponentFixture<ImageLoaderComponent>;
@@ -45,7 +44,7 @@ describe('ImageLoaderComponent', () => {
     testBed = TestBed.configureTestingModule({
       schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
       declarations: [ImageLoaderComponent],
-      imports: [InViewportModule.forRoot()],
+      imports: [InViewportModule.forServer()],
     });
 
     testBed.compileComponents();
@@ -209,12 +208,6 @@ describe('ImageLoaderComponent', () => {
     expect(component.src).toEqual('');
   });
 
-  it('should check inviewport status', () => {
-    const spy = spyOn(component.snInViewport, 'calculateInViewportStatus');
-    component.checkInViewportStatus();
-    expect(spy).toHaveBeenCalled();
-  });
-
   it('should set placeholder on changes', () => {
     const spy = spyOn(component, 'setPlaceholder');
     component.ngOnChanges();

src/app/image-loader/image-loader/image-loader.component.ts

@@ -11,10 +11,11 @@ import {
   ElementRef,
   NgZone,
   OnChanges,
+  Inject,
 } from '@angular/core';
 import { Subject, fromEvent } from 'rxjs';
 import { takeUntil, debounceTime } from 'rxjs/operators';
-import { WindowRef, InViewportDirective } from '@thisissoon/angular-inviewport';
+import { InViewportDirective, WINDOW } from '@thisissoon/angular-inviewport';
 
 import * as classes from '../shared/classes';
 import * as events from '../shared/events';
@@ -178,14 +179,14 @@ export class ImageLoaderComponent
    *
    * @memberof ImageLoaderComponent
    */
-  constructor(private windowRef: WindowRef, private ngZone: NgZone) {}
+  constructor(@Inject(WINDOW) private window: Window, private ngZone: NgZone) {}
   /**
    * Set placeholder image as image on component init
    *
    * @memberof ImageLoaderComponent
    */
   public ngOnInit(): void {
-    this.onWidthChange(this.windowRef.innerWidth);
+    this.onWidthChange(this.window.innerWidth);
     this.setPlaceholder();
   }
   /**
@@ -197,7 +198,7 @@ export class ImageLoaderComponent
   public ngAfterViewInit(): void {
     // Listen for window scroll/resize events.
     this.ngZone.runOutsideAngular(() => {
-      fromEvent(this.windowRef as any, events.eventResize)
+      fromEvent(this.window, events.eventResize)
         .pipe(
           takeUntil(this.ngUnsubscribe$),
           debounceTime(this.debounce),
@@ -207,12 +208,6 @@ export class ImageLoaderComponent
         );
     });
   }
-  /**
-   * Checks if image element is in viewport
-   */
-  public checkInViewportStatus(): void {
-    this.snInViewport.calculateInViewportStatus();
-  }
   /**
    * If element is in viewport preload image by setting the src
    * of the dummy image element.

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

@@ -11,7 +11,7 @@ describe('VideoLoaderComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [InViewportModule.forRoot()],
+      imports: [InViewportModule.forServer()],
       schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
       declarations: [VideoLoaderComponent],
     }).compileComponents();
@@ -98,10 +98,4 @@ describe('VideoLoaderComponent', () => {
     component.onImageLoad(event as any);
     expect(component.poster).toEqual('foo');
   });
-
-  it('should check inviewport status', () => {
-    const spy = spyOn(component.snInViewport, 'calculateInViewportStatus');
-    component.checkInViewportStatus();
-    expect(spy).toHaveBeenCalled();
-  });
 });

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

@@ -9,10 +9,11 @@ import {
   OnDestroy,
   ChangeDetectorRef,
   ElementRef,
+  Inject,
 } from '@angular/core';
 import { Subject, fromEvent } from 'rxjs';
 import { takeUntil, debounceTime, startWith } from 'rxjs/operators';
-import { WindowRef, InViewportDirective } from '@thisissoon/angular-inviewport';
+import { WINDOW, InViewportDirective } from '@thisissoon/angular-inviewport';
 
 import { Size } from '../../image-loader/shared/image.model';
 import { Breakpoint } from '../../image-loader/shared/breakpoint.model';
@@ -188,7 +189,7 @@ export class VideoLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
    * @memberof VideoLoaderComponent
    */
   constructor(
-    private windowRef: WindowRef,
+    @Inject(WINDOW) private window: Window,
     private ngZone: NgZone,
     private cdRef: ChangeDetectorRef,
   ) {}
@@ -212,11 +213,11 @@ export class VideoLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
   public ngAfterViewInit(): void {
     // Listen for window scroll/resize events.
     this.ngZone.runOutsideAngular(() => {
-      fromEvent(this.windowRef as any, events.eventResize)
+      fromEvent(this.window, events.eventResize)
         .pipe(
           takeUntil(this.ngUnsubscribe$),
           debounceTime(this.debounce),
-          startWith({ target: { innerWidth: this.windowRef.innerWidth } }),
+          startWith({ target: { innerWidth: this.window.innerWidth } }),
         )
         .subscribe((event: any) =>
           this.ngZone.run(() => this.onWidthChange(event.target.innerWidth)),
@@ -233,14 +234,6 @@ export class VideoLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
     this.inViewport = inViewport;
     this.loadVideo();
   }
-  /**
-   * Checks if video element is in viewport
-   *
-   * @memberof VideoLoaderComponent
-   */
-  public checkInViewportStatus(): void {
-    this.snInViewport.calculateInViewportStatus();
-  }
   /**
    * On width change, determine if device has changed and
    * reset directive

yarn.lock

@@ -418,10 +418,10 @@
     semver "5.5.1"
     semver-intersect "1.4.0"
 
-"@thisissoon/angular-inviewport@^3.0.0":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@thisissoon/angular-inviewport/-/angular-inviewport-3.0.1.tgz#3f17ab5f25d694a0bdb7b0c7506e948fc6a99a30"
-  integrity sha512-twIb1S+K7EOffgZ6o6zGJVKdHl9kHqoA7bljN1scRv6OzlLj7M7tmVTmqAOePb+Ue+xMhCiaZ56sKyNySqArAA==
+"@thisissoon/angular-inviewport@^4.1.0":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@thisissoon/angular-inviewport/-/angular-inviewport-4.1.0.tgz#b37507e7b227a3e3239ba62749dfcd44fc95fc1f"
+  integrity sha512-27rbbIlhDc814za5Tvnjrshckje6hu9+cl1unpAb60LgyP8QjPf3kHjOuFRfqhHUREUXPWmbaQMVE+3caOEjrA==
   dependencies:
     tslib "^1.9.0"