-
Notifications
You must be signed in to change notification settings - Fork 171
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support Videos #257
base: master
Are you sure you want to change the base?
Support Videos #257
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,32 +6,39 @@ import { NgxGalleryHelperService } from './ngx-gallery-helper.service'; | |
|
||
@Component({ | ||
selector: 'ngx-gallery-preview', | ||
template: ` | ||
<ngx-gallery-arrows *ngIf="arrows" (onPrevClick)="showPrev()" (onNextClick)="showNext()" [prevDisabled]="!canShowPrev()" [nextDisabled]="!canShowNext()" [arrowPrevIcon]="arrowPrevIcon" [arrowNextIcon]="arrowNextIcon"></ngx-gallery-arrows> | ||
<div class="ngx-gallery-preview-top"> | ||
<div class="ngx-gallery-preview-icons"> | ||
<ngx-gallery-action *ngFor="let action of actions" [icon]="action.icon" [disabled]="action.disabled" [titleText]="action.titleText" (onClick)="action.onClick($event, index)"></ngx-gallery-action> | ||
<a *ngIf="download && src" [href]="src" class="ngx-gallery-icon" aria-hidden="true" download> | ||
<i class="ngx-gallery-icon-content {{ downloadIcon }}"></i> | ||
</a> | ||
<ngx-gallery-action *ngIf="zoom" [icon]="zoomOutIcon" [disabled]="!canZoomOut()" (onClick)="zoomOut()"></ngx-gallery-action> | ||
<ngx-gallery-action *ngIf="zoom" [icon]="zoomInIcon" [disabled]="!canZoomIn()" (onClick)="zoomIn()"></ngx-gallery-action> | ||
<ngx-gallery-action *ngIf="rotate" [icon]="rotateLeftIcon" (onClick)="rotateLeft()"></ngx-gallery-action> | ||
<ngx-gallery-action *ngIf="rotate" [icon]="rotateRightIcon" (onClick)="rotateRight()"></ngx-gallery-action> | ||
<ngx-gallery-action *ngIf="fullscreen" [icon]="'ngx-gallery-fullscreen ' + fullscreenIcon" (onClick)="manageFullscreen()"></ngx-gallery-action> | ||
<ngx-gallery-action [icon]="'ngx-gallery-close ' + closeIcon" (onClick)="close()"></ngx-gallery-action> | ||
</div> | ||
template: ` | ||
<ngx-gallery-arrows *ngIf="arrows" (onPrevClick)="showPrev()" (onNextClick)="showNext()" [prevDisabled]="!canShowPrev()" [nextDisabled]="!canShowNext()" [arrowPrevIcon]="arrowPrevIcon" [arrowNextIcon]="arrowNextIcon"></ngx-gallery-arrows> | ||
<div class="ngx-gallery-preview-top"> | ||
<div class="ngx-gallery-preview-icons"> | ||
<ngx-gallery-action *ngFor="let action of actions" [icon]="action.icon" [disabled]="action.disabled" [titleText]="action.titleText" (onClick)="action.onClick($event, index)"></ngx-gallery-action> | ||
<a *ngIf="download && src" [href]="src" class="ngx-gallery-icon" aria-hidden="true" download> | ||
<i class="ngx-gallery-icon-content {{ downloadIcon }}"></i> | ||
</a> | ||
<ngx-gallery-action *ngIf="zoom" [icon]="zoomOutIcon" [disabled]="!canZoomOut()" (onClick)="zoomOut()"></ngx-gallery-action> | ||
<ngx-gallery-action *ngIf="zoom" [icon]="zoomInIcon" [disabled]="!canZoomIn()" (onClick)="zoomIn()"></ngx-gallery-action> | ||
<ngx-gallery-action *ngIf="rotate" [icon]="rotateLeftIcon" (onClick)="rotateLeft()"></ngx-gallery-action> | ||
<ngx-gallery-action *ngIf="rotate" [icon]="rotateRightIcon" (onClick)="rotateRight()"></ngx-gallery-action> | ||
<ngx-gallery-action *ngIf="fullscreen" [icon]="'ngx-gallery-fullscreen ' + fullscreenIcon" (onClick)="manageFullscreen()"></ngx-gallery-action> | ||
<ngx-gallery-action [icon]="'ngx-gallery-close ' + closeIcon" (onClick)="close()"></ngx-gallery-action> | ||
</div> | ||
<div class="ngx-spinner-wrapper ngx-gallery-center" [class.ngx-gallery-active]="showSpinner"> | ||
<i class="ngx-gallery-icon ngx-gallery-spinner {{spinnerIcon}}" aria-hidden="true"></i> | ||
</div> | ||
<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" (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'"/> | ||
<ngx-gallery-bullets *ngIf="bullets" [count]="images.length" [active]="index" (onChange)="showAtIndex($event)"></ngx-gallery-bullets> | ||
</div> | ||
<div class="ngx-gallery-preview-text" *ngIf="showDescription && description" [innerHTML]="description" (click)="$event.stopPropagation()"></div> | ||
</div> | ||
<div class="ngx-spinner-wrapper ngx-gallery-center" [class.ngx-gallery-active]="showSpinner"> | ||
<i class="ngx-gallery-icon ngx-gallery-spinner {{spinnerIcon}}" aria-hidden="true"></i> | ||
</div> | ||
<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 && 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" (onChange)="showAtIndex($event)"></ngx-gallery-bullets> | ||
</div> | ||
<div class="ngx-gallery-preview-text" *ngIf="showDescription && description" [innerHTML]="description" (click)="$event.stopPropagation()"></div> | ||
</div> | ||
`, | ||
styleUrls: ['./ngx-gallery-preview.component.scss'] | ||
}) | ||
|
@@ -40,6 +47,7 @@ export class NgxGalleryPreviewComponent implements OnInit, OnChanges { | |
src: SafeUrl; | ||
srcIndex: number; | ||
description: string; | ||
type: string; | ||
showSpinner = false; | ||
positionLeft = 0; | ||
positionTop = 0; | ||
|
@@ -276,6 +284,10 @@ export class NgxGalleryPreviewComponent implements OnInit, OnChanges { | |
image : this.sanitization.bypassSecurityTrustUrl(image); | ||
} | ||
|
||
getFileType (fileSource: string): string { | ||
return this.helperService.getFileType(fileSource); | ||
} | ||
|
||
zoomIn(): void { | ||
if (this.canZoomIn()) { | ||
this.zoomValue += this.zoomStep; | ||
|
@@ -432,15 +444,18 @@ export class NgxGalleryPreviewComponent implements OnInit, OnChanges { | |
this.resetPosition(); | ||
|
||
this.src = this.getSafeUrl(<string>this.images[this.index]); | ||
this.type = this.getFileType(<string>this.images[this.index]); | ||
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 if (this.type == 'video') { | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I feel that videos could require something different than what is inside the above block. I kept this condition, with an empty block, it to highlight that. So, this condition |
||
} else { | ||
setTimeout(() => { | ||
if (this.loading) { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe using a indexOf with an array of file type could be better?
Moreover, using mime type could be a better solution (look for mime/type supported by current browsers) & I don't think that using substr is useful there.
fileSource.indexOf("video/mp4")
as example is enough if fileSource is a dataUrl.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes
indexOf
is better for most of the cases. Butsubstr
I think that here it will make this piece of code compatible with any content type. If this component will support other types later. This line can stay the as-is.However, there was unnecessary usage of
substr
inside the nextelse if
. I deleted it in the second commit.