mirror of
https://github.com/xuthus83/pigallery2.git
synced 2024-11-03 21:04:03 +08:00
54 lines
2.2 KiB
HTML
54 lines
2.2 KiB
HTML
<div #photoContainer class="photo-container" (mouseover)="mouseOver()" (mouseout)="mouseOut()">
|
|
|
|
|
|
<img alt="{{gridMedia.media.name}}" #img [src]="thumbnail.Src | fixOrientation:gridMedia.Orientation | async"
|
|
*ngIf="thumbnail.Available">
|
|
|
|
<app-gallery-grid-photo-loading
|
|
[error]="thumbnail.Error"
|
|
[animate]="thumbnail.loading"
|
|
*ngIf="!thumbnail.Available">
|
|
</app-gallery-grid-photo-loading>
|
|
|
|
|
|
<div *ngIf="gridMedia.isVideo()" class="video-indicator"
|
|
[style.marginTop.px]="-container.nativeElement.offsetHeight"
|
|
[style.marginLeft.px]="container.nativeElement.offsetWidth">
|
|
{{gridMedia.Video.metadata.duration | duration}} <span class="oi oi-video"></span></div>
|
|
|
|
|
|
<!--Info box -->
|
|
<div class="info"
|
|
*ngIf="infoBarVisible"
|
|
[style.width.px]="container.nativeElement.offsetWidth">
|
|
<div class="photo-name">{{Title}}</div>
|
|
|
|
<div class="photo-position" *ngIf="gridMedia.hasPositionData()">
|
|
<span class="oi oi-map-marker"></span>
|
|
<ng-template [ngIf]="getPositionText()">
|
|
<a [routerLink]="['/search', getPositionText(), {type:SearchTypes[SearchTypes.position]}]"
|
|
*ngIf="searchEnabled">
|
|
{{getPositionText()}}
|
|
</a>
|
|
<span *ngIf="!searchEnabled">{{getPositionText()}}</span>
|
|
</ng-template>
|
|
</div>
|
|
|
|
<div class="photo-keywords" *ngIf="keywords">
|
|
<ng-template ngFor let-keyword [ngForOf]="keywords" let-last="last">
|
|
<a *ngIf="searchEnabled"
|
|
[routerLink]="['/search', keyword.value, {type: SearchTypes[keyword.type]}]" [ngSwitch]="keyword.type">
|
|
<ng-template [ngSwitchCase]="SearchTypes.keyword">#</ng-template><!--
|
|
--><ng-template [ngSwitchCase]="SearchTypes.person"><span class="oi oi-person"></span></ng-template><!--
|
|
-->{{keyword.value}}</a>
|
|
<span *ngIf="!searchEnabled" [ngSwitch]="keyword.type">
|
|
<ng-template [ngSwitchCase]="SearchTypes.keyword">#</ng-template><!--
|
|
--><ng-template [ngSwitchCase]="SearchTypes.person"><span class="oi oi-person"></span></ng-template><!--
|
|
-->{{keyword.value}}</span>
|
|
<ng-template [ngIf]="!last">, </ng-template>
|
|
</ng-template>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|