Merge pull request #23 from Simbaclaws/master

Changed left positioning for images to translateX (update): added video support
kolkov · Apr 17, 2020 · 9e91e81 · 9e91e81
2 parents dc749b5 + df8543e
commit 9e91e81
Show file tree

Hide file tree

Showing 14 changed files with 129 additions and 26 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/projects/gallery-app/src/app/app.component.ts b/projects/gallery-app/src/app/app.component.ts
@@ -62,9 +62,9 @@ export class AppComponent implements OnInit{
         big: 'assets/img/gallery/4-big.jpeg'
       },
       {
-        small: 'assets/img/gallery/5-small.jpeg',
-        medium: 'assets/img/gallery/5-medium.jpeg',
-        big: 'assets/img/gallery/5-big.jpeg'
+        small: 'https://html5box.com/html5gallery/images/BigBuckBunny_1.mp4',
+        medium: 'https://html5box.com/html5gallery/images/BigBuckBunny_1.mp4',
+        big: 'https://html5box.com/html5gallery/images/BigBuckBunny_1.mp4'
       }
     ];
   }

diff --git a/projects/gallery/src/lib/ngx-gallery-image.ts b/projects/gallery/src/lib/ngx-gallery-image.ts
@@ -6,6 +6,7 @@ export interface INgxGalleryImage {
     big?: string | SafeResourceUrl;
     description?: string;
     url?: string;
+    type?: string;
     label?: string;
 }
 
@@ -15,6 +16,7 @@ export class NgxGalleryImage implements INgxGalleryImage {
     big?: string | SafeResourceUrl;
     description?: string;
     url?: string;
+    type?: string;
     label?: string;
 
     constructor(obj: INgxGalleryImage) {
@@ -23,6 +25,7 @@ export class NgxGalleryImage implements INgxGalleryImage {
         this.big = obj.big;
         this.description = obj.description;
         this.url = obj.url;
+        this.type = obj.type;
         this.label = obj.label;
     }
 }
diff --git a/projects/gallery/src/lib/ngx-gallery-image/ngx-gallery-image.component.html b/projects/gallery/src/lib/ngx-gallery-image/ngx-gallery-image.component.html
@@ -1,19 +1,43 @@
 <div class="ngx-gallery-image-wrapper ngx-gallery-animation-{{animation}} ngx-gallery-image-size-{{size}}">
-  <div class="ngx-gallery-image" *ngFor="let image of getImages(); let i = index;"
-       [ngClass]="{ 'ngx-gallery-active': selectedIndex == image.index,
-        'ngx-gallery-inactive-left': selectedIndex > image.index,
-         'ngx-gallery-inactive-right': selectedIndex < image.index,
-          'ngx-gallery-clickable': clickable }"
-       [style.background-image]="getSafeUrl(image.src)" (click)="handleClick($event, image.index)">
-    <div class="ngx-gallery-icons-wrapper">
+  <div *ngFor="let image of getImages(); let i = index;">
+
+
+    <div *ngIf="image.type === 'image'" class="ngx-gallery-image"
+        [ngClass]="{ 'ngx-gallery-active': selectedIndex == image.index,
+          'ngx-gallery-inactive-left': selectedIndex > image.index,
+          'ngx-gallery-inactive-right': selectedIndex < image.index,
+            'ngx-gallery-clickable': clickable }"
+        [style.background-image]="getSafeUrl(image.src)" (click)="handleClick($event, image.index)">
+      <div class="ngx-gallery-icons-wrapper">
+        <ngx-gallery-action *ngFor="let action of actions" [icon]="action.icon" [disabled]="action.disabled"
+                            [titleText]="action.titleText"
+                            (closeClick)="action.onClick($event, image.index)"></ngx-gallery-action>
+      </div>
+      <div class="ngx-gallery-image-text" *ngIf="showDescription && descriptions[image.index]"
+          [innerHTML]="descriptions[image.index]" (click)="$event.stopPropagation()"></div>
+    </div>
+  </div>
+  <div *ngFor="let image of getImages(); let i = index;">
+    <div *ngIf="image.type === 'video'" class="ngx-gallery-image" 
+    [ngClass]="{ 'ngx-gallery-active': selectedIndex == image.index,
+    'ngx-gallery-inactive-left': selectedIndex > image.index,
+      'ngx-gallery-inactive-right': selectedIndex < image.index,
+      'ngx-gallery-clickable': clickable }"
+    (click)="handleClick($event, image.index)">
+      <video controls style="width:100%; height:100%; background: #000;">
+        <source [src]="image.src">
+          Your browser does not support the video tag.
+      </video>
+      <div class="ngx-gallery-icons-wrapper">
       <ngx-gallery-action *ngFor="let action of actions" [icon]="action.icon" [disabled]="action.disabled"
                           [titleText]="action.titleText"
                           (closeClick)="action.onClick($event, image.index)"></ngx-gallery-action>
+      </div>
+      <div class="ngx-gallery-image-text" *ngIf="showDescription && descriptions[image.index]"
+          [innerHTML]="descriptions[image.index]" (click)="$event.stopPropagation()"></div>
+      </div>
     </div>
-    <div class="ngx-gallery-image-text" *ngIf="showDescription && descriptions[image.index]"
-         [innerHTML]="descriptions[image.index]" (click)="$event.stopPropagation()"></div>
   </div>
-</div>
 <ngx-gallery-bullets *ngIf="bullets" [count]="images.length" [active]="selectedIndex"
                      (bulletChange)="show($event)"></ngx-gallery-bullets>
 <ngx-gallery-arrows class="ngx-gallery-image-size-{{size}}" *ngIf="arrows" (prevClick)="showPrev()"

diff --git a/projects/gallery/src/lib/ngx-gallery-image/ngx-gallery-image.component.scss b/projects/gallery/src/lib/ngx-gallery-image/ngx-gallery-image.component.scss
@@ -52,15 +52,15 @@
     transition: 0.5s ease-in-out;
 
     &.ngx-gallery-active {
-      left: 0;
+      transform:translateX(0);
     }
 
     &.ngx-gallery-inactive-left {
-      left: -100%;
+      transform:translateX(-100%);
     }
 
     &.ngx-gallery-inactive-right {
-      left: 100%;
+      transform:translateX(100%);
     }
   }
 }

diff --git a/projects/gallery/src/lib/ngx-gallery-image/ngx-gallery-image.component.ts b/projects/gallery/src/lib/ngx-gallery-image/ngx-gallery-image.component.ts
@@ -221,4 +221,8 @@ export class NgxGalleryImageComponent implements OnInit, OnChanges {
   getSafeUrl(image: string): SafeStyle {
     return this.sanitization.bypassSecurityTrustStyle(this.helperService.getBackgroundUrl(image));
   }
+
+  getFileType(fileSource: string) {
+    return this.helperService.getFileType(fileSource);
+  }
 }
diff --git a/projects/gallery/src/lib/ngx-gallery-ordered-image.ts b/projects/gallery/src/lib/ngx-gallery-ordered-image.ts
@@ -2,15 +2,18 @@ import {SafeResourceUrl} from '@angular/platform-browser';
 
 export interface INgxGalleryOrderedImage {
   src: string | SafeResourceUrl;
+  type: string;
   index: number;
 }
 
 export class NgxGalleryOrderedImage implements INgxGalleryOrderedImage {
   src: string | SafeResourceUrl;
+  type: string;
   index: number;
 
   constructor(obj: INgxGalleryOrderedImage) {
     this.src = obj.src;
+    this.type = obj.type;
     this.index = obj.index;
   }
 }
diff --git a/projects/gallery/src/lib/ngx-gallery-preview/ngx-gallery-preview.component.html b/projects/gallery/src/lib/ngx-gallery-preview/ngx-gallery-preview.component.html
@@ -25,11 +25,18 @@
 <div class="ngx-gallery-preview-wrapper" (click)="closeOnClick && close()" (mouseup)="mouseUpHandler($event)"
      (mousemove)="mouseMoveHandler($event)" (touchend)="mouseUpHandler($event)" (touchmove)="mouseMoveHandler($event)">
   <div class="ngx-gallery-preview-img-wrapper">
-    <img *ngIf="src" #previewImage class="ngx-gallery-preview-img ngx-gallery-center" [src]="src"
+    <img *ngIf="src && type == 'image'" #previewImage class="ngx-gallery-preview-img ngx-gallery-center" [src]="src"
          (click)="$event.stopPropagation()" (mouseenter)="imageMouseEnter()" (mouseleave)="imageMouseLeave()"
          (mousedown)="mouseDownHandler($event)" (touchstart)="mouseDownHandler($event)"
          [class.ngx-gallery-active]="!loading" [class.animation]="animation" [class.ngx-gallery-grab]="canDragOnZoom()"
          [style.transform]="getTransform()" [style.left]="positionLeft + 'px'" [style.top]="positionTop + 'px'"/>
+    <video *ngIf="src && type == 'video'"  #previewImage controls style="width: 100%; height: 100%;"
+    class="ngx-gallery-preview-img ngx-gallery-center"
+    (click)="$event.stopPropagation()" (mouseenter)="imageMouseEnter()" (mouseleave)="imageMouseLeave()" (mousedown)="mouseDownHandler($event)" (touchstart)="mouseDownHandler($event)"
+    [class.ngx-gallery-active]="!loading" [class.animation]="animation" [class.ngx-gallery-grab]="canDragOnZoom()" [style.transform]="getTransform()" [style.left]="positionLeft + 'px'" [style.top]="positionTop + 'px'">
+      <source [src]="src">
+      Your browser does not support the video tag.
+    </video>
     <ngx-gallery-bullets *ngIf="bullets" [count]="images.length" [active]="index"
                          (bulletChange)="showAtIndex($event)"></ngx-gallery-bullets>
   </div>

diff --git a/projects/gallery/src/lib/ngx-gallery-preview/ngx-gallery-preview.component.ts b/projects/gallery/src/lib/ngx-gallery-preview/ngx-gallery-preview.component.ts
@@ -30,6 +30,7 @@ export class NgxGalleryPreviewComponent implements OnInit, OnDestroy, OnChanges
   src: SafeUrl;
   srcIndex: number;
   description: string;
+  type: string;
   showSpinner = false;
   positionLeft = 0;
   positionTop = 0;
@@ -266,6 +267,10 @@ export class NgxGalleryPreviewComponent implements OnInit, OnDestroy, OnChanges
     return this.sanitization.bypassSecurityTrustUrl(image);
   }
 
+  getFileType (fileSource: string): string {
+    return this.helperService.getFileType(fileSource);
+  }
+
   zoomIn(): void {
     if (this.canZoomIn()) {
       this.zoomValue += this.zoomStep;
@@ -421,16 +426,20 @@ export class NgxGalleryPreviewComponent implements OnInit, OnDestroy, OnChanges
     this.resetPosition();
 
     this.src = this.getSafeUrl(this.images[this.index] as string);
+    this.type = this.getFileType(this.images[this.index] as string);
     this.srcIndex = this.index;
     this.description = this.descriptions[this.index];
     this.changeDetectorRef.markForCheck();
 
     setTimeout(() => {
-      if (this.isLoaded(this.previewImage.nativeElement)) {
+      if (this.isLoaded(this.previewImage.nativeElement) || this.type === 'video') {
         this.loading = false;
         this.startAutoPlay();
         this.changeDetectorRef.markForCheck();
-      } else {
+      } else if (this.type === 'video') {
+
+      }
+      else {
         setTimeout(() => {
           if (this.loading) {
             this.showSpinner = true;

diff --git a/projects/gallery/src/lib/ngx-gallery-thumbnails/ngx-gallery-thumbnails.component.html b/projects/gallery/src/lib/ngx-gallery-thumbnails/ngx-gallery-thumbnails.component.html
@@ -2,12 +2,22 @@
   <div class="ngx-gallery-thumbnails" [style.transform]="'translateX(' + thumbnailsLeft + ')'"
        [style.marginLeft]="thumbnailsMarginLeft">
     <a [href]="hasLink(i) ? links[i] : '#'" [target]="linkTarget" class="ngx-gallery-thumbnail"
-       *ngFor="let image of getImages(); let i = index;" [style.background-image]="getSafeUrl(image)"
+       *ngFor="let image of getImages(); let i = index;"
        (click)="handleClick($event, i)" [style.width]="getThumbnailWidth()" [style.height]="getThumbnailHeight()"
        [style.left]="getThumbnailLeft(i)" [style.top]="getThumbnailTop(i)"
        [ngClass]="{ 'ngx-gallery-active': i == selectedIndex, 'ngx-gallery-clickable': clickable }"
        [attr.aria-label]="labels[i]">
-      <div class="ngx-gallery-icons-wrapper">
+       <div *ngIf="getFileType(image) == 'image'" [style.background-image]="getSafeUrl(image)" 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 }" 
+        style="width: 100%; height: 100%; position:absolute; left:0; background:#000;">
+        <source [src]="image">
+          Your browser does not support the video tag.
+       </video>
+      </div>
+       <div class="ngx-gallery-icons-wrapper">
         <ngx-gallery-action *ngFor="let action of actions" [icon]="action.icon" [disabled]="action.disabled"
                             [titleText]="action.titleText" (closeClick)="action.onClick($event, i)"></ngx-gallery-action>
       </div>

diff --git a/projects/gallery/src/lib/ngx-gallery-thumbnails/ngx-gallery-thumbnails.component.scss b/projects/gallery/src/lib/ngx-gallery-thumbnails/ngx-gallery-thumbnails.component.scss
@@ -30,6 +30,22 @@
     border: 1px double black; /* Параметры границы */
     // background: #fc3; /* Цвет фона */
     // padding: 10px; /* Поля вокруг текста */
+    .ngx-gallery-thumbnail-video::after {
+      content: "\f144";
+      display: block;
+      position: absolute;
+      background: #0000;
+      height: 100%;
+      width: 100%;
+      left: 0;
+      top: calc(50% - 20px);
+      font-size: 40px;
+      color: white;
+      margin: 0;
+      padding: 0;
+      font-family: fontawesome;
+      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;

diff --git a/projects/gallery/src/lib/ngx-gallery-thumbnails/ngx-gallery-thumbnails.component.ts b/projects/gallery/src/lib/ngx-gallery-thumbnails/ngx-gallery-thumbnails.component.ts
@@ -257,6 +257,10 @@ export class NgxGalleryThumbnailsComponent implements OnInit, OnChanges {
     return this.sanitization.bypassSecurityTrustStyle(this.helperService.getBackgroundUrl(image));
   }
 
+  getFileType (fileSource: string): string {
+    return this.helperService.getFileType(fileSource);
+  }
+
   private getThumbnailPosition(index: number, count: number): SafeStyle {
     return this.getSafeStyle('calc(' + ((100 / count) * index) + '% + '
       + ((this.margin - (((count - 1) * this.margin) / count)) * index) + 'px)');

diff --git a/projects/gallery/src/lib/ngx-gallery.component.ts b/projects/gallery/src/lib/ngx-gallery.component.ts
@@ -67,9 +67,9 @@ export class NgxGalleryComponent implements OnInit, DoCheck, AfterViewInit {
 
   @HostBinding('style.width') width: string;
   @HostBinding('style.height') height: string;
-  @HostBinding('style.left') left: string;
+  @HostBinding('style.transform') left: string;
 
-  constructor(private myElement: ElementRef) {
+  constructor(private myElement: ElementRef, private helperService: NgxGalleryService) {
   }
 
   ngOnInit() {
@@ -268,15 +268,19 @@ export class NgxGalleryComponent implements OnInit, DoCheck, AfterViewInit {
   private checkFullWidth(): void {
     if (this.currentOptions && this.currentOptions.fullWidth) {
       this.width = document.body.clientWidth + 'px';
-      this.left = (-(document.body.clientWidth -
-        this.myElement.nativeElement.parentNode.innerWidth) / 2) + 'px';
+      this.left = 'translateX(' + (-(document.body.clientWidth -
+        this.myElement.nativeElement.parentNode.innerWidth) / 2) + 'px)';
     }
   }
 
   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 || '')
+    );
     this.smallImages = this.images.map((img) => img.small as string);
     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);

diff --git a/projects/gallery/src/lib/ngx-gallery.service.ts b/projects/gallery/src/lib/ngx-gallery.service.ts
@@ -41,6 +41,25 @@ export class NgxGalleryService {
     return 'url(\'' + this.validateUrl(image) + '\')';
   }
 
+  getFileType (fileSource: string): string {
+    if (fileSource.startsWith('data:')) {
+      return fileSource.substr(5, Math.min(fileSource.indexOf(';'), fileSource.indexOf('/')) - 5);
+    }
+    const fileExtension = fileSource.split('.').pop().toLowerCase();
+    if (!fileExtension
+      || fileExtension === 'jpeg' || fileExtension === 'jpg'
+      || fileExtension === 'png' || fileExtension === 'bmp'
+      || fileExtension === 'gif') {
+      return 'image';
+    }
+    else if (fileExtension === 'avi' || fileExtension === 'flv'
+      || fileExtension === 'wmv' || fileExtension === 'mov'
+      || fileExtension === 'mp4') {
+      return 'video';
+    }
+    return 'unknown';
+}
+
   private getSwipeHandlers(id: string): (() => void)[] | undefined {
     return this.swipeHandlers.get(id);
   }