pigallery2/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html

<div id="controllers-container" #root>
  <div [class.dim-controls]="controllersDimmed" class="controls-caption"
       [class.controls-nodim]="lightboxService.captionAlwaysOn"
       *ngIf="Title">{{Title}}</div>

  <div [class.dim-controls]="controllersDimmed"
       class="controls controls-top">
    <div class="controls-background">
      <div class="highlight control-button" (click)="toggleInfoPanel.emit()"
           title="info key: i" i18n-title>
        <span class="oi oi-info"></span>
      </div>

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

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

      <div class="btn-group" dropdown [insideClick]="true">
        <button id="button-basic" dropdownToggle type="button"
                class="border-0 highlight control-button"
                data-bs-auto-close="outside"
                aria-controls="dropdown-basic">
          <span class="oi oi-menu"></span>
        </button>
        <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu dropdown-menu-right"
            role="menu" aria-labelledby="button-basic">
          <li role="menuitem">
            <a *ngIf="activePhoto"
               [href]="activePhoto.gridMedia.getMediaPath()"
               [download]="activePhoto.gridMedia.media.name"
               class="dropdown-item">
              <span class="oi oi-data-transfer-download pe-2"></span>
              <span i18n>Download</span>
              <small>(shift + D)</small>
            </a>
          </li>
          <li role="menuitem"
              dropdown>
            <div class="dropdown-item">
              <span class="oi oi-clock pe-2"></span>
              <span class="pe-2" i18n-title title="Slideshow playback speed" i18n>Slideshow speed:</span>
              <select
                class="form-select d-inline-block w-auto"
                [(ngModel)]="selectedPlayBackDuration">
                <option *ngFor="let speed of playBackDurations" [value]="speed">{{ speed }}s</option>
              </select>
            </div>
          </li>
          <li role="menuitem">
            <div class="dropdown-item d-flex justify-content-between">
              <span title="key: c" i18n-title i18n>Show caption</span>
              <bSwitch
                class="switch ps-2"
                name="caption-switch"
                switch-on-color="success"
                [switch-inverse]="true"
                switch-off-text="on hover"
                switch-on-text="always"
                i18n-switch-off-text
                i18n-switch-on-text
                [switch-handle-width]="100"
                [switch-label-width]="20"
                [(ngModel)]="lightboxService.captionAlwaysOn">
              </bSwitch>
            </div>
          </li>
          <li role="menuitem ">
            <div class="dropdown-item d-flex justify-content-between">
              <span title="key: a" i18n-title i18n>Show faces</span>
              <bSwitch
                class="switch ps-2"
                name="faces-switch"
                switch-on-color="success"
                [switch-inverse]="true"
                switch-off-text="on hover"
                switch-on-text="always"
                i18n-switch-off-text
                i18n-switch-on-text
                [switch-handle-width]="100"
                [switch-label-width]="20"
                [(ngModel)]="lightboxService.facesAlwaysOn">
              </bSwitch>
            </div>
          </li>
          <li
            *ngIf="activePhoto && activePhoto.gridMedia.isVideo()"
            role="menuitem">
            <div class="dropdown-item d-flex justify-content-between">
              <span title="key: l" i18n-title i18n>Play videos</span>
              <bSwitch
                class="switch ps-2"
                name="faces-switch"
                switch-on-color="success"
                [switch-inverse]="true"
                switch-off-text="once"
                switch-on-text="loop"
                i18n-switch-off-text
                i18n-switch-on-text
                [switch-handle-width]="100"
                [switch-label-width]="20"
                [(ngModel)]="lightboxService.loopVideos">
              </bSwitch>
            </div>
          </li>
        </ul>
      </div>

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

        </span>
      </div>
    </div>
  </div>

  <div id="swipeable-container"
       (swipeleft)="zoom == 1 && nextPhoto.emit()"
       (swiperight)="zoom == 1 && previousPhoto.emit()"
       (swipeup)="zoom == 1 && closed.emit()"
       (tap)="tap($event)"
       (pan)="pan($any($event))"
       (wheel)="wheel($event)"
       (click)="mediaElement.playPause()">

    <div class="faces-container"
         [style.top.px]="photoFrameDim.height/2 + drag.y"
         [style.left.px]="photoFrameDim.width/2 + drag.x"
         [style.width.px]="faceContainerDim.width* zoom"
         [style.height.px]="faceContainerDim.height* zoom"
         *ngIf="facesEnabled && activePhoto && activePhoto.gridMedia.Photo.metadata.faces && activePhoto.gridMedia.Photo.metadata.faces.length > 0">
      <ng-container *ngIf="searchEnabled">
        <a
          [class.controls-nodim]="lightboxService.facesAlwaysOn"
          class="face"
          [routerLink]="['/search', getPersonSearchQuery(face.name)]"
          [style.top.%]="face.box.top / activePhoto.gridMedia.Photo.metadata.size.height*100"
          [style.left.%]="face.box.left / activePhoto.gridMedia.Photo.metadata.size.width*100"
          [style.height.%]="face.box.height / activePhoto.gridMedia.Photo.metadata.size.height*100"
          [style.width.%]="face.box.width / activePhoto.gridMedia.Photo.metadata.size.width*100"
          *ngFor="let face of activePhoto.gridMedia.Photo.metadata.faces">
          <div class="face-box"></div>
          <span class="face-name">{{face.name}}</span>
        </a>
      </ng-container>
      <ng-container *ngIf="!searchEnabled">
        <div
          [class.dim-controls]="controllersDimmed && !lightboxService.facesAlwaysOn"
          class="face"
          [style.top.%]="face.box.top / activePhoto.gridMedia.Photo.metadata.size.height*100"
          [style.left.%]="face.box.left / activePhoto.gridMedia.Photo.metadata.size.width*100"
          [style.height.%]="face.box.height / activePhoto.gridMedia.Photo.metadata.size.height*100"
          [style.width.%]="face.box.width / activePhoto.gridMedia.Photo.metadata.size.width*100"
          *ngFor="let face of activePhoto.gridMedia.Photo.metadata.faces">
          <div class="face-box"></div>
          <span class="face-name">{{face.name}}</span>
        </div>
      </ng-container>
    </div>


  </div>

  <div [class.dim-controls]="controllersDimmed" class="navigation-arrow highlight"
       *ngIf="navigation.hasPrev && zoom == 1" title="key: left arrow" id="leftArrow" i18n-title
       (click)="previousPhoto.emit()"><span
    class="oi oi-chevron-left"></span></div>
  <div [class.dim-controls]="controllersDimmed" class="navigation-arrow highlight"
       *ngIf="navigation.hasNext && zoom == 1" title="key: right arrow" id="rightArrow" i18n-title
       (click)="nextPhoto.emit()"><span
    class="oi oi-chevron-right"></span></div>

  <div [class.dim-controls]="controllersDimmed" 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-end"></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.dim-controls]="controllersDimmed" class="controls controls-playback"
       *ngIf="zoom == 1 && activePhoto && activePhoto.gridMedia.isPhoto()">
    <div class="controls-background">
      <span
        *ngIf="playBackState == PlayBackStates.Play"
        class="oi oi-media-pause highlight control-button button-active"
        (click)="pause()"
        title="pause"></span>
      <span
        *ngIf="playBackState == PlayBackStates.Paused"
        class="oi oi-media-play highlight control-button"
        (click)="play()"
        title="auto play"></span>
    </div>
  </div>

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

  <div class="controls controls-video row" *ngIf="activePhoto && activePhoto.gridMedia.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>