pigallery2/frontend/app/gallery/lightbox/lightbox.gallery.component.html

<div [hidden]="!isVisible()" #root>

  <div class="blackCanvas"
       [style.opacity]="blackCanvasOpacity">
  </div>

  <div class="lightbox" #lightbox>
    <app-gallery-lightbox-media [gridMedia]="activePhoto ? activePhoto.gridPhoto : null"
                                [loadMedia]="!animating"
                                [zoom]="zoom"
                                [drag]="drag"
                                [windowAspect]="getWindowAspectRatio()"
                                #photo>
    </app-gallery-lightbox-media>
  </div>
  <div
    *ngIf="controllersVisible"
    id="controllers-container"
    #controls
    [style.width.px]="getPhotoFrameWidth()"
    [ngClass]="(controllersDimmed && !controllersAlwaysOn) ? (activePhoto && activePhoto.gridPhoto.isVideo() ? 'dim-controls-video' :'dim-controls'):  ''">
    <div class="controls-caption" *ngIf="Title">{{Title}}</div>
    <div class="controls controls-top">
      <a *ngIf="activePhoto"
         class="highlight control-button"
         [href]="activePhoto.gridPhoto.getPhotoPath()"
         [download]="activePhoto.gridPhoto.media.name">
        <span class="oi oi-data-transfer-download"
              title="download" i18n-title></span>
      </a>

      <div class=" highlight control-button" (click)="toggleInfoPanel()"
           title="info key: i" i18n-title>
        <span class="oi oi-info"></span>
      </div>

      <div *ngIf="fullScreenService.isFullScreenEnabled()"
           class=" highlight control-button"
           (click)="fullScreenService.exitFullScreen()"
           title="toggle fullscreen, key: f" i18n-title>
        <span class="oi oi-fullscreen-exit">

        </span>
      </div>

      <div *ngIf="!fullScreenService.isFullScreenEnabled()"
           class="highlight control-button"
           (click)="fullScreenService.showFullScreen(root)"
           title="toggle fullscreen, key: f" i18n-title>
        <span class="oi oi-fullscreen-enter">
        </span>
      </div>

      <div class="highlight control-button"
           (click)="hide()"
           title="close, key: Escape" i18n-title>
        <span class="oi oi-x">

        </span>
      </div>
    </div>
    <div id="swipeable-container"
         (swipeleft)="zoom == 1 && nextImage()"
         (swiperight)="zoom == 1 && prevImage()"
         (swipeup)="zoom == 1 && hide()"
         (tap)="tap($event)"
         (pan)="pan($event)"
         (wheel)="wheel($event)"
         (click)="mediaElement.playPause()">

    </div>

    <div class="navigation-arrow highlight"
         *ngIf="navigation.hasPrev && zoom == 1" title="key: left arrow" id="leftArrow" i18n-title
         (click)="prevImage()"><span
      class="oi oi-chevron-left"></span></div>
    <div class="navigation-arrow highlight"
         *ngIf="navigation.hasNext && zoom == 1" title="key: right arrow" id="rightArrow" i18n-title
         (click)="nextImage()"><span
      class="oi oi-chevron-right"></span></div>

    <div class="controls controls-zoom row" *ngIf="zoom > 1">
      <div class="col-1 col-md-4">
        <span (click)="zoomOut()" i18n-title title="Zoom out, key: '-'"
              class="oi oi-zoom-out float-right"></span>
      </div>
      <input type="range"
             [(ngModel)]="Zoom" min="1" [max]="MAX_ZOOM" step="0.1"
             value="1" class="col-10 col-md-4 zoom-progress">
      <div class="col-1 col-md-4">
        <span (click)="zoomIn()" i18n-title title="Zoom in, key: '+'"
              class="oi oi-zoom-in float-left"></span>
      </div>
    </div>

    <div class="controls controls-playback"
         *ngIf="zoom == 1 && activePhoto && activePhoto.gridPhoto.isPhoto()">
      <span class="oi oi-media-pause highlight control-button"
            [ngClass]="playBackState == PlayBackStates.Paused ? 'button-disabled':''"
            (click)="pause()"
            title="pause"></span>
      <span
        class="oi oi-media-play highlight control-button"
        [ngClass]="playBackState == PlayBackStates.Play ? 'button-active':''"
        (click)="play()"
        title="auto play"></span>
      <span class="oi oi-media-skip-forward highlight control-button"
            [ngClass]="playBackState == PlayBackStates.FastForward ? 'button-active':''"
            (click)="fastForward()"
            title="fast auto play"></span>
    </div>

    <div class="controls controls-big-play"
         *ngIf="activePhoto && activePhoto.gridPhoto.isVideo() && mediaElement.Paused">
      <span class="oi oi-media-play"></span>
    </div>

    <div class="controls controls-video row" *ngIf="activePhoto && activePhoto.gridPhoto.isVideo()">
      <span class="oi  col-1"
            [ngClass]="!mediaElement.Paused ? 'oi-media-pause':'oi-media-play'"
            (click)="mediaElement.playPause()"></span>
      <input type="range" [(ngModel)]="mediaElement.VideoProgress"
             min="0" max="100" step="0.1" class="col video-progress">
      <span class="oi  col-1"
            [ngClass]="mediaElement.Muted ? 'oi-volume-off':'oi-volume-high'"
            (click)="mediaElement.mute()"></span>
      <input type="range"
             [(ngModel)]="mediaElement.VideoVolume" min="0" max="1" step="0.1"
             value="1" class="col-2 col-md-1 volume">
    </div>
  </div>
  <app-info-panel *ngIf="activePhoto && infoPanelVisible"
                  id="info-panel"
                  [style.width.px]="infoPanelWidth"
                  [media]="activePhoto.gridPhoto.media"
                  (closed)="hideInfoPanel()">

  </app-info-panel>
</div>