2016-05-13 20:27:00 +08:00
|
|
|
<div class="imgContainer" #imgContainer>
|
2018-03-31 03:30:30 +08:00
|
|
|
<img *ngIf="showThumbnail()"
|
|
|
|
[style.width.%]="imageSize.width"
|
|
|
|
[style.height.%]="imageSize.height"
|
2018-12-18 07:06:25 +08:00
|
|
|
[style.transform]="ImageTransform"
|
2018-11-02 17:40:09 +08:00
|
|
|
[src]="thumbnailSrc"/>
|
2016-05-13 20:27:00 +08:00
|
|
|
|
2018-11-05 02:28:32 +08:00
|
|
|
<img *ngIf="gridMedia !== null && gridMedia.isPhoto() && loadMedia && photoSrc"
|
2017-07-16 05:54:17 +08:00
|
|
|
[style.width.%]="imageSize.width"
|
|
|
|
[style.height.%]="imageSize.height"
|
2018-12-18 07:06:25 +08:00
|
|
|
[style.transform]="ImageTransform"
|
2018-11-02 17:40:09 +08:00
|
|
|
[src]="photoSrc"
|
2018-12-18 07:06:25 +08:00
|
|
|
[alt]="gridMedia.media.name"
|
2017-07-16 05:54:17 +08:00
|
|
|
(load)="onImageLoad()"
|
|
|
|
(error)="onImageError()"/>
|
2017-03-26 04:59:30 +08:00
|
|
|
|
2018-11-12 02:22:46 +08:00
|
|
|
<video #video
|
2018-12-18 07:06:25 +08:00
|
|
|
*ngIf="gridMedia !== null && gridMedia.isVideo() && loadMedia"
|
2018-11-05 02:28:32 +08:00
|
|
|
[style.width.%]="imageSize.width"
|
|
|
|
[style.height.%]="imageSize.height"
|
2018-11-12 02:22:46 +08:00
|
|
|
(loadstart)="onImageLoad()"
|
2018-11-05 02:28:32 +08:00
|
|
|
autoplay
|
2018-11-12 02:22:46 +08:00
|
|
|
(error)="onImageError()"
|
2018-12-18 07:06:25 +08:00
|
|
|
(timeupdate)="onVideoProgress()">
|
2018-11-25 22:22:07 +08:00
|
|
|
<source [src]="gridMedia.getPhotoPath()" type="{{getVideoType()}}">
|
2018-11-05 02:28:32 +08:00
|
|
|
</video>
|
|
|
|
|
2016-05-13 20:27:00 +08:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|