Merge pull request #311 from MurhafSousli/fix-image-loader

regret: Remove mode=determinate feature

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 5.0.0-beta.0
+
+- regret: Remove `mode=intermediate` option, closes [#309](https://github.com/MurhafSousli/ngx-gallery/issues/309) and [#297](https://github.com/MurhafSousli/ngx-gallery/issues/297) in [b1df18c](https://github.com/MurhafSousli/ngx-gallery/pull/311/commits/b1df18c6069ddabe02c0bee1e0653dd97692a96e).
+
+### Breaking changes (There could be more breaking changes until version 5 is released which will make it compatible with Angular 9 and ivy)
+
+- The `loadingMode` option has been removed from the gallery component's input and from the global options.
+
 ## 4.0.3
 
 - fix(core): Fix universal error, closes [#262](https://github.com/MurhafSousli/ngx-gallery/issues/262) in [fc6c3f7](https://github.com/MurhafSousli/ngx-gallery/pull/282/commits/fc6c3f76730f90721bee99a2404a39310cccd0db).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-gallery",
-  "version": "4.0.3",
+  "version": "5.0.0-beta.0",
   "description": "Angular gallery directive that hooks the lightbox with the images automatically.",
   "homepage": "http://github.com/murhafsousli/ngx-gallery",
   "author": {

projects/core/src/lib/components/gallery-item.component.ts

@@ -11,7 +11,6 @@ import { LoadingStrategy, GalleryItemType } from '../models/constants';
       <ng-container *ngSwitchCase="Types.Image">
 
         <gallery-image [src]="data.src"
-                       [mode]="config.loadingMode"
                        [loadingIcon]="config.loadingIcon"
                        [loadingError]="config.loadingError"
                        (error)="error.emit($event)"></gallery-image>

projects/core/src/lib/components/gallery.component.ts

@@ -56,7 +56,6 @@ export class GalleryComponent implements OnInit, OnChanges, OnDestroy {
   @Input() dotsPosition: 'top' | 'bottom' = this._gallery.config.dotsPosition;
   @Input() counterPosition: 'top' | 'bottom' = this._gallery.config.counterPosition;
   @Input() slidingDirection: 'horizontal' | 'vertical' = this._gallery.config.slidingDirection;
-  @Input() loadingMode: 'determinate' | 'indeterminate' = this._gallery.config.loadingMode;
   @Input() loadingStrategy: 'preload' | 'lazy' | 'default' = this._gallery.config.loadingStrategy;
   @Input() thumbPosition: 'top' | 'left' | 'right' | 'bottom' = this._gallery.config.thumbPosition;
 
@@ -100,7 +99,6 @@ export class GalleryComponent implements OnInit, OnChanges, OnDestroy {
       thumbMode: this.thumbMode,
       thumbWidth: this.thumbWidth,
       thumbHeight: this.thumbHeight,
-      loadingMode: this.loadingMode,
       disableThumb: this.disableThumb,
       dotsPosition: this.dotsPosition,
       itemTemplate: this.itemTemplate,

projects/core/src/lib/components/templates/gallery-image.component.ts

@@ -16,7 +16,6 @@ import { BehaviorSubject } from 'rxjs';
   ],
   template: `
     <ng-container [lazyImage]="src"
-                  [mode]="mode"
                   (progress)="onProgress($event)"
                   (loaded)="onLoaded($event)"
                   (error)="onError($event)"
@@ -49,14 +48,8 @@ import { BehaviorSubject } from 'rxjs';
              [innerHTML]="loaderTemplate">
         </div>
         <ng-template #defaultLoader>
-
-          <div *ngIf="isThumbnail; else progressLoader" class="g-thumb-loading"></div>
-
-          <ng-template #progressLoader>
-            <radial-progress [value]="progress" [mode]="mode"></radial-progress>
-          </ng-template>
-
-          </ng-template>
+          <div *ngIf="isThumbnail" class="g-thumb-loading"></div>
+        </ng-template>
       </ng-container>
     </ng-container>
   `
@@ -71,9 +64,6 @@ export class GalleryImageComponent implements OnInit, OnDestroy {
   /** Progress value */
   progress = 0;
 
-  /** Image loader mode */
-  @Input() mode: 'determinate' | 'indeterminate' = 'determinate';
-
   /** Is thumbnail */
   @Input() isThumbnail: boolean;
 

projects/core/src/lib/directives/lazy-image.ts

@@ -1,7 +1,6 @@
 import { Directive, Input, Output, OnDestroy, SimpleChanges, OnChanges, EventEmitter, Inject } from '@angular/core';
-import { HttpClient, HttpEventType, HttpRequest, HttpEvent, HttpHeaders } from '@angular/common/http';
-import { Subject, Observable, Subscription, zip, fromEvent, EMPTY } from 'rxjs';
-import { tap, switchMap, catchError } from 'rxjs/operators';
+import { Subject, Observable, Subscription, zip, fromEvent } from 'rxjs';
+import { tap, switchMap } from 'rxjs/operators';
 import { DOCUMENT } from '@angular/common';
 
 @Directive({
@@ -14,18 +13,12 @@ export class LazyImage implements OnChanges, OnDestroy {
 
   @Input('lazyImage') src: string;
 
-  @Input() mode: 'determinate' | 'indeterminate';
-
-  @Output() progress = new EventEmitter<{ loaded: number, total: number }>();
   @Output() loaded = new EventEmitter<string>();
   @Output() error = new EventEmitter<Error>();
 
-  constructor(
-    private http: HttpClient,
-    @Inject(DOCUMENT) private document: any
-  ) {
+  constructor(@Inject(DOCUMENT) private document: any) {
     this._loaderSub$ = this._imageLoader$.pipe(
-      switchMap((imageSrc: string) => this.mode === 'determinate' ? this.progressiveLoader(imageSrc) : this.nativeLoader(imageSrc))
+      switchMap((imageSrc: string) => this.nativeLoader(imageSrc))
     ).subscribe();
   }
 
@@ -44,35 +37,6 @@ export class LazyImage implements OnChanges, OnDestroy {
     this._imageLoader$.next(imagePath);
   }
 
-  /**
-   * Load image using HttpClient, This requires XHR access to the URL
-   * @param url
-   */
-  progressiveLoader(url: string): Observable<any> {
-    const downloadImage = new HttpRequest('GET', url, {
-      reportProgress: true,
-      responseType: 'blob',
-      headers: new HttpHeaders({ 'CACHE_GALLERY_IMAGE': 'true' })
-    });
-    return this.http.request(downloadImage).pipe(
-      tap((event: HttpEvent<string>) => {
-
-        if (event.type === HttpEventType.DownloadProgress) {
-          this.progress.emit({ loaded: event.loaded, total: event.total });
-        }
-
-        if (event.type === HttpEventType.Response) {
-          this.loaded.emit(URL.createObjectURL(event.body));
-        }
-
-      }),
-      catchError((err: Error) => {
-        this.error.emit(err);
-        return EMPTY;
-      })
-    );
-  }
-
   /**
    * Native image loader, does not emit progress
    * @param url

projects/core/src/lib/gallery.module.ts

@@ -17,22 +17,15 @@ import { GalleryThumbComponent } from './components/gallery-thumb.component';
 import { GalleryImageComponent } from './components/templates/gallery-image.component';
 import { GalleryVideoComponent } from './components/templates/gallery-video.component';
 import { GalleryIframeComponent } from './components/templates/gallery-iframe.component';
-import { RadialProgressComponent } from './components/templates/radial-progress.component';
 
 import { LazyImage } from './directives/lazy-image';
 import { TapClick } from './directives/tap-click';
-import { CachingInterceptor } from './services/cache.interceptor';
-import { RequestCache, RequestCacheWithMap } from './services/cache.service';
 
 @NgModule({
   imports: [
     CommonModule,
     HttpClientModule
   ],
-  providers: [
-    {provide: RequestCache, useClass: RequestCacheWithMap},
-    {provide: HTTP_INTERCEPTORS, useClass: CachingInterceptor, multi: true}
-  ],
   declarations: [
     GalleryComponent,
     GalleryNavComponent,
@@ -46,7 +39,6 @@ import { RequestCache, RequestCacheWithMap } from './services/cache.service';
     GalleryImageComponent,
     GalleryVideoComponent,
     GalleryIframeComponent,
-    RadialProgressComponent,
     LazyImage,
     TapClick
   ],

projects/core/src/lib/models/config.model.ts

@@ -29,7 +29,6 @@ export interface GalleryConfig {
   dotsPosition?: 'top' | 'bottom';
   counterPosition?: 'top' | 'bottom';
   slidingDirection?: 'horizontal' | 'vertical';
-  loadingMode?: 'determinate' | 'indeterminate';
   loadingStrategy?: 'preload' | 'lazy' | 'default';
   thumbPosition?: 'top' | 'left' | 'right' | 'bottom';
 }

projects/core/src/lib/styles/gallery.scss

@@ -5,4 +5,3 @@
 @import 'counter';
 @import 'templates';
 @import 'core';
-@import 'radial-progress';