Alter getType to use Type if specified

projects/gallery-app/src/app/app.module.ts

@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import {NgxGalleryModule} from '@kolkov/ngx-gallery';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 
 @NgModule({
@@ -12,6 +13,7 @@ import {NgxGalleryModule} from '@kolkov/ngx-gallery';
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     NgxGalleryModule,
     AppRoutingModule
   ],

projects/gallery/src/lib/ngx-gallery-image/ngx-gallery-image.component.ts

@@ -400,8 +400,8 @@ export class NgxGalleryImageComponent implements OnInit, OnChanges {
     return this.sanitization.bypassSecurityTrustStyle(this.helperService.getBackgroundUrl(image));
   }
 
-  getFileType(fileSource: string) {
-    return this.helperService.getFileType(fileSource);
+  getFileType(fileSource: string, type: string) {
+    return this.helperService.getFileType(fileSource, type);
   }
 
   onStart(event: AnimationEvent) {

projects/gallery/src/lib/ngx-gallery-preview/ngx-gallery-preview.component.ts

@@ -17,6 +17,7 @@ import {
 import {DomSanitizer, SafeResourceUrl, SafeStyle, SafeUrl} from '@angular/platform-browser';
 import {NgxGalleryService} from '../ngx-gallery.service';
 import {NgxGalleryAction} from '../ngx-gallery-action';
+import { NgxGalleryOrderedImage } from '../../public-api';
 
 
 @Component({
@@ -39,7 +40,7 @@ export class NgxGalleryPreviewComponent implements OnInit, OnDestroy, OnChanges
   rotateValue = 0;
   index = 0;
 
-  @Input() images: string[] | SafeResourceUrl[];
+  @Input() images: NgxGalleryOrderedImage[];
   @Input() descriptions: string[];
   @Input() showDescription: boolean;
   @Input() arrows: boolean;
@@ -276,8 +277,8 @@ export class NgxGalleryPreviewComponent implements OnInit, OnDestroy, OnChanges
     return this.sanitization.bypassSecurityTrustUrl(image);
   }
 
-  getFileType (fileSource: string): string {
-    return this.helperService.getFileType(fileSource);
+  getFileType (fileSource: string, type: string): string {
+    return this.helperService.getFileType(fileSource, type);
   }
 
   zoomIn(): void {
@@ -434,8 +435,8 @@ export class NgxGalleryPreviewComponent implements OnInit, OnDestroy, OnChanges
     this.rotateValue = 0;
     this.resetPosition();
 
-    this.src = this.getSafeUrl(this.images[this.index] as string);
-    this.type = this.getFileType(this.images[this.index] as string);
+    this.src = this.getSafeUrl(this.images[this.index].src as string);
+    this.type = this.getFileType(this.images[this.index].src as string, this.images[this.index].type as string);
     this.srcIndex = this.index;
     this.description = this.descriptions[this.index];
     this.changeDetectorRef.markForCheck();

projects/gallery/src/lib/ngx-gallery-thumbnails/ngx-gallery-thumbnails.component.html

@@ -7,13 +7,13 @@
        [style.left]="getThumbnailLeft(i)" [style.top]="getThumbnailTop(i)"
        [ngClass]="{ 'ngx-gallery-active': i == selectedIndex, 'ngx-gallery-clickable': clickable }"
        [attr.aria-label]="labels[i]">
-       <div *ngIf="getFileType(image) == 'image'" [style.background-image]="getSafeUrl(image)" class="ngx-gallery-thumbnail"
+       <div *ngIf="getFileType(image.src, image.type) == 'image'" [style.background-image]="getSafeUrl(image.src)" class="ngx-gallery-thumbnail"
        [ngClass]="{ 'ngx-gallery-active': i == selectedIndex, 'ngx-gallery-clickable': clickable }"
        style="width: 100%; height: 100%; position:absolute;"></div>
-       <div *ngIf="getFileType(image) == 'video'" class="ngx-gallery-thumbnail-video">
-        <video  class="ngx-gallery-thumbnail" [ngClass]="{ 'ngx-gallery-active': i == selectedIndex, 'ngx-gallery-clickable': clickable }" 
+       <div *ngIf="getFileType(image.src, image.type) == 'video'" class="ngx-gallery-thumbnail-video">
+        <video  class="ngx-gallery-thumbnail" [ngClass]="{ 'ngx-gallery-active': i == selectedIndex, 'ngx-gallery-clickable': clickable }"
         style="width: 100%; height: 100%; position:absolute; left:0; background:#000;">
-        <source [src]="image">
+        <source [src]="image.src">
           Your browser does not support the video tag.
        </video>
       </div>

projects/gallery/src/lib/ngx-gallery-thumbnails/ngx-gallery-thumbnails.component.scss

@@ -43,9 +43,9 @@
       color: white;
       margin: 0;
       padding: 0;
-      font-family: fontawesome;
+      font-family: "Font Awesome 5 Free";
       text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
-    } 
+    }
     .img {
       /* background-position: center;
        background-repeat: no-repeat;

projects/gallery/src/lib/ngx-gallery-thumbnails/ngx-gallery-thumbnails.component.ts

@@ -257,8 +257,8 @@ export class NgxGalleryThumbnailsComponent implements OnInit, OnChanges {
     return this.sanitization.bypassSecurityTrustStyle(this.helperService.getBackgroundUrl(image));
   }
 
-  getFileType (fileSource: string): string {
-    return this.helperService.getFileType(fileSource);
+  getFileType (fileSource: string, type: string): string {
+    return this.helperService.getFileType(fileSource, type);
   }
 
   private getThumbnailPosition(index: number, count: number): SafeStyle {

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

@@ -42,9 +42,9 @@ export class NgxGalleryComponent implements OnInit, DoCheck, AfterViewInit {
   @Output() previewClose = new EventEmitter();
   @Output() previewChange = new EventEmitter<{ index: number; image: NgxGalleryImage; }>();
 
-  smallImages: string[] | SafeResourceUrl[];
+  smallImages: NgxGalleryOrderedImage[];
   mediumImages: NgxGalleryOrderedImage[];
-  bigImages: string[] | SafeResourceUrl[];
+  bigImages: NgxGalleryOrderedImage[];
   descriptions: string[];
   links: string[];
   labels: string[];
@@ -276,15 +276,23 @@ export class NgxGalleryComponent implements OnInit, DoCheck, AfterViewInit {
 
   private setImages(): void {
     this.images.forEach((img) =>
-        img.type = this.helperService.getFileType(img.url as string || img.big as string || img.medium as string || img.small as string || '')
+        img.type = this.helperService.getFileType(img.url as string || img.big as string || img.medium as string || img.small as string || '', img.type as string)
     );
-    this.smallImages = this.images.map((img) => img.small as string);
+    this.smallImages = this.images.map((img, i) => new NgxGalleryOrderedImage({
+      src: img.small,
+      type: img.type,
+      index: i
+    }));
     this.mediumImages = this.images.map((img, i) => new NgxGalleryOrderedImage({
       src: img.medium,
       type: img.type,
       index: i
     }));
-    this.bigImages = this.images.map((img) => img.big as string);
+    this.bigImages = this.images.map((img, i) => new NgxGalleryOrderedImage({
+      src: img.big,
+      type: img.type,
+      index: i
+    }));
     this.descriptions = this.images.map((img) => img.description as string);
     this.links = this.images.map((img) => img.url as string);
     this.labels = this.images.map((img) => img.label as string);

projects/gallery/src/lib/ngx-gallery.module.ts

@@ -8,7 +8,7 @@ import {NgxGalleryActionComponent} from './ngx-gallery-action/ngx-gallery-action
 import {NgxGalleryBulletsComponent} from './ngx-gallery-bullets/ngx-gallery-bullets.component';
 import {CommonModule} from '@angular/common';
 import {HAMMER_GESTURE_CONFIG, HammerGestureConfig} from '@angular/platform-browser';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @Injectable()
 export class CustomHammerConfig extends HammerGestureConfig  {
@@ -18,7 +18,6 @@ export class CustomHammerConfig extends HammerGestureConfig  {
   } as any;
 }
 
-
 @NgModule({
   declarations: [
     NgxGalleryComponent,

projects/gallery/src/lib/ngx-gallery.service.spec.ts

@@ -15,4 +15,21 @@ describe('NgxGalleryService', () => {
  it('should be created', inject([NgxGalleryService], (service: NgxGalleryService) => {
     expect(service).toBeTruthy();
   }));
+
+  it('getFileType should return image', inject([NgxGalleryService], (service: NgxGalleryService) => {
+    expect(service.getFileType('testingFile.jpg', '') === 'image').toBeTruthy();
+  }));
+
+  it('getFileType should return video', inject([NgxGalleryService], (service: NgxGalleryService) => {
+    expect(service.getFileType('testingFile.mkv', '') === 'video').toBeTruthy();
+  }));
+
+  it('getFileType should return image', inject([NgxGalleryService], (service: NgxGalleryService) => {
+    expect(service.getFileType('testingFile.mkv', 'image') === 'image').toBeTruthy();
+  }));
+
+  it('getFileType should return video', inject([NgxGalleryService], (service: NgxGalleryService) => {
+    expect(service.getFileType('testingFile.jpeg', 'video') === 'video').toBeTruthy();
+  }));
+
 });

projects/gallery/src/lib/ngx-gallery.service.ts

@@ -41,23 +41,28 @@ export class NgxGalleryService {
     return 'url(\'' + this.validateUrl(image) + '\')';
   }
 
-  getFileType (fileSource: string): string {
+  getFileType (fileSource: string, type: string): string {
+
+    if(type && type !== 'unknown'){
+      return type;
+    }
+
     if (fileSource.startsWith('data:')) {
       return fileSource.substr(5, Math.min(fileSource.indexOf(';'), fileSource.indexOf('/')) - 5);
     }
     if (fileSource.startsWith('blob:')) {
       return 'image';
     }
-    const fileExtension = fileSource.split('.').pop().toLowerCase();
+    const fileExtension = fileSource.split('.').pop().split(/\W|_/g).shift().toLowerCase();
     if (!fileExtension
       || fileExtension === 'jpeg' || fileExtension === 'jpg'
       || fileExtension === 'png' || fileExtension === 'bmp'
       || fileExtension === 'gif' || fileExtension === 'webp') {
       return 'image';
     }
     else if (fileExtension === 'avi' || fileExtension === 'flv'
-      || fileExtension === 'wmv' || fileExtension === 'mov'
-      || fileExtension === 'mp4') {
+      || fileExtension === 'wmv' || fileExtension === 'mov' || fileExtension === '3gp'
+      || fileExtension === 'mp4'|| fileExtension === 'mkv') {
       return 'video';
     }
     return 'unknown';