pigallery2/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html

<div class="content">
  <div class="modal-header">
    <h2 class="modal-title" i18n>Info</h2>
    <button type="button" class="close" (click)="close()" aria-label="Close">
      <span class="oi oi-x" aria-hidden="true"></span>
    </button>
  </div>
  <div class="row">
    <div class="col-2">
      <span class="details-icon oi oi-image"></span>
    </div>
    <div class="col-10">
      <div class="details-main dir-link" title="{{FullPath}}"
           [routerLink]="['/gallery', DirectoryPath]"
           [queryParams]="queryService.getParams()">
        {{media.name}}
      </div>
      <div class="details-sub row">
        <div class="col-4">{{media.metadata.size.width}} x {{media.metadata.size.height}}</div>
        <div class="col-4" *ngIf="isPhoto()">{{calcMpx()}}MP</div>
        <div class="col-4" *ngIf="media.metadata.fileSize">{{media.metadata.fileSize | fileSize}}</div>
      </div>
    </div>
  </div>

  <div class="row" *ngIf="media.metadata.creationDate">
    <div class="col-2">
      <span class="details-icon oi oi-calendar"></span>
    </div>
    <div class="col-10">
      <div class="details-main">
        {{ media.metadata.creationDate | date: (isThisYear() ? 'MMMM d' : 'longDate')}}
      </div>
      <div class="details-sub row">
        <div class="col-12">{{ media.metadata.creationDate | date :'EEEE'}}, {{getTime()}}</div>
      </div>
    </div>
  </div>


  <div class="row" *ngIf="VideoData && (VideoData.duration || VideoData.bitRate)">
    <div class="col-2">
      <span class="details-icon oi oi-video"></span>
    </div>
    <div class="col-10">
      <div class="details-main">
        {{"Video"}}
      </div>
      <div class="details-sub row">
        <div class="col-6" *ngIf="VideoData.duration">
          <ng-container i18n>duration</ng-container>
          : {{VideoData.duration | duration}}</div>
        <div class="col-6" *ngIf="VideoData.bitRate">
          <ng-container i18n>bit rate</ng-container>
          : {{VideoData.bitRate | fileSize}}/s
        </div>
      </div>
    </div>
  </div>

  <div class="row" *ngIf="CameraData">
    <div class="col-2">
      <span class="details-icon oi oi-camera-slr"></span>
    </div>
    <div class="col-10">
      <div class="details-main">
        {{CameraData.model || CameraData.make || "Camera"}}
      </div>
      <div class="details-sub row">
        <div class="col-3" *ngIf="CameraData.ISO">ISO{{CameraData.ISO}}</div>
        <div class="col-3" *ngIf="CameraData.fStop">f/{{CameraData.fStop}}</div>
        <div class="col-3" *ngIf="CameraData.exposure">
          {{toFraction(CameraData.exposure)}}s
        </div>
        <div class="col-3" *ngIf="CameraData.focalLength">
          {{CameraData.focalLength}}mm
        </div>
        <div class="col-12" *ngIf="CameraData.lens">{{CameraData.lens}}</div>
      </div>
    </div>
  </div>

  <div class="row" *ngIf="hasPositionData()">
    <div class="col-2">
      <span class="details-icon oi oi-map-marker"></span>
    </div>
    <div class="col-10">
      <div class="details-main">
        {{getPositionText() || "Position"}}
      </div>
      <div class="details-sub row" *ngIf="hasGPS()">
        <div class="col-12">
          {{PositionData.GPSData.latitude.toFixed(3)}},
          {{PositionData.GPSData.longitude.toFixed(3)}}
        </div>
      </div>
    </div>
  </div>

  <div id="map" *ngIf="hasGPS() && mapEnabled">
    <yaga-map [zoom]="10"
              [lat]="PositionData.GPSData.latitude"
              [lng]="PositionData.GPSData.longitude">
      <yaga-marker
        [lat]="PositionData.GPSData.latitude"
        [lng]="PositionData.GPSData.longitude">
      </yaga-marker>
      <yaga-attribution-control
        prefix=""
        [attributions]="mapService.Attributions">
      </yaga-attribution-control>
      <yaga-tile-layer [url]="mapService.MapLayer"></yaga-tile-layer>
    </yaga-map>
  </div>
</div>