Hide controls by default and create menu to force caption and faces to show, fixes #394

src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css

@@ -24,23 +24,10 @@
   height: 100%;
   left: 0;
   top: 0;
-  opacity: 1.0;
   position: fixed;
   color: white;
-  transition: width 0.3s ease-in-out, opacity 1s;
-  -webkit-transition: width 0.3s ease-in-out, opacity 1s;
-  -o-transition: width 0.3s ease-in-out, opacity 1s;
-  -ms-transition: width 0.3s ease-in-out, opacity 1s;
-  -moz-transition: width 0.3s ease-in-out, opacity 1s;
 }
 
-#controllers-container.dim-controls {
-  opacity: 0.1;
-}
-
-#controllers-container.dim-controls-video {
-  opacity: 0;
-}
 
 #swipeable-container {
   z-index: 2;
@@ -55,14 +42,26 @@
   text-align: right;
 }
 
+.btn-group {
+  vertical-align: initial;
+}
+
 .controls {
   height: initial;
   text-align: right;
   width: 100%;
   padding: 5px;
   font-size: large;
+  opacity: 1;
+  transition: width 0.3s ease-in-out, opacity 1s;
+  -webkit-transition: width 0.3s ease-in-out, opacity 1s;
+  -o-transition: width 0.3s ease-in-out, opacity 1s;
+  -ms-transition: width 0.3s ease-in-out, opacity 1s;
+  -moz-transition: width 0.3s ease-in-out, opacity 1s;
 }
 
+
+
 .controls .control-button {
   margin-left: 0.2em;
   margin-right: 0.2em;
@@ -70,6 +69,7 @@
   padding: 0 0.5rem;
   font-size: 1.5rem;
   color: white;
+  background-color: transparent;
   cursor: pointer;
 }
 
@@ -95,6 +95,7 @@
   border-radius: 5px !important;
 }
 
+
 .controls-zoom {
   bottom: 0;
   z-index: 3;
@@ -236,16 +237,11 @@ input[type="range"].zoom-progress::-moz-range-track {
 }
 
 .face {
-  opacity: 0.7;
+  opacity: 0.0;
   position: absolute;
   transition: opacity 0.5s;
 }
 
-#controllers-container.dim-controls .face,
-#controllers-container.dim-controls-video .face {
-  opacity: 0;
-}
-
 .face-name {
   white-space: nowrap;
   color: white;
@@ -262,8 +258,23 @@ input[type="range"].zoom-progress::-moz-range-track {
   border-radius: 5px !important;
 }
 
+.face.controls-nodim{
+  opacity: 0.7;
+}
+
 .face:hover {
   opacity: 1.0;
   text-decoration: none;
 }
 
+.dim-controls {
+  opacity: 0.0;
+}
+.controls-caption.controls-nodim{
+  opacity: 0.7;
+}
+.controls:hover{
+  opacity: 1;
+}
+
+

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

@@ -1,27 +1,21 @@
-<div id="controllers-container"
-     [ngClass]="(controllersDimmed && !controllersAlwaysOn) ? (activePhoto && activePhoto.gridMedia.isVideo() ? 'dim-controls-video' :'dim-controls'):  ''"
-     #root>
-  <div class="controls-caption" *ngIf="Title">{{Title}}</div>
-  <div class="controls controls-top">
-    <a class="highlight control-button"
-       *ngIf="activePhoto"
-       [href]="activePhoto.gridMedia.getMediaPath()"
-       [download]="activePhoto.gridMedia.media.name">
-        <span class="oi oi-data-transfer-download"
-              title="download" i18n-title></span>
-    </a>
+<div id="controllers-container" #root>
+  <div [class.dim-controls]="controllersDimmed" class="controls-caption"
+       [class.controls-nodim]="captionAlwaysOn"
+       *ngIf="Title">{{Title}}</div>
 
-    <div class=" highlight control-button" (click)="toggleInfoPanel.emit()"
+  <div [class.dim-controls]="controllersDimmed"
+       class="controls controls-top">
+
+    <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"
+         class="highlight control-button"
          (click)="toggleFullScreen.emit()"
          title="toggle fullscreen, key: f" i18n-title>
         <span class="oi oi-fullscreen-exit">
-
         </span>
     </div>
 
@@ -33,6 +27,63 @@
         </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" i18n></span> Download
+            <small>(shift + D)</small>
+          </a>
+        </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)]="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)]="facesAlwaysOn">
+            </bSwitch>
+          </div>
+        </li>
+      </ul>
+    </div>
+
     <div class="highlight control-button"
          (click)="closeLightbox()"
          title="close, key: Escape" i18n-title>
@@ -41,6 +92,7 @@
         </span>
     </div>
   </div>
+
   <div id="swipeable-container"
        (swipeleft)="zoom == 1 && nextPhoto.emit()"
        (swiperight)="zoom == 1 && previousPhoto.emit()"
@@ -58,6 +110,7 @@
          *ngIf="facesEnabled && activePhoto  && activePhoto.gridMedia.Photo.metadata.faces && activePhoto.gridMedia.Photo.metadata.faces.length > 0">
       <ng-container *ngIf="searchEnabled">
         <a
+          [class.controls-nodim]="facesAlwaysOn"
           class="face"
           [routerLink]="['/search', getPersonSearchQuery(face.name)]"
           [style.top.%]="face.box.top / activePhoto.gridMedia.Photo.metadata.size.height*100"
@@ -71,6 +124,7 @@
       </ng-container>
       <ng-container *ngIf="!searchEnabled">
         <div
+          [class.dim-controls]="controllersDimmed && !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"
@@ -86,16 +140,16 @@
 
   </div>
 
-  <div class="navigation-arrow highlight"
+  <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="navigation-arrow highlight"
+  <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="controls controls-zoom row" *ngIf="Zoom > 1">
+  <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>
@@ -110,7 +164,7 @@
   </div>
 
 
-  <div class="controls controls-playback"
+  <div [class.dim-controls]="controllersDimmed" class="controls controls-playback"
        *ngIf="zoom == 1 && activePhoto && activePhoto.gridMedia.isPhoto()">
       <span class="oi oi-media-pause highlight control-button"
             [ngClass]="playBackState == PlayBackStates.Paused ? 'button-disabled':''"
@@ -127,7 +181,7 @@
           title="fast auto play"></span>
   </div>
 
-  <div class="controls controls-big-play"
+  <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>

src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts

@@ -40,7 +40,6 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
   readonly MAX_ZOOM = 10;
 
   @ViewChild('root', {static: false}) root: ElementRef;
-
   @Output() closed = new EventEmitter();
   @Output() toggleInfoPanel = new EventEmitter();
   @Output() toggleFullScreen = new EventEmitter();
@@ -58,7 +57,8 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
   public playBackState: PlayBackStates = PlayBackStates.Paused;
   public PlayBackStates = PlayBackStates;
   public controllersDimmed = false;
-  public controllersAlwaysOn = false;
+  public captionAlwaysOn = false;
+  public facesAlwaysOn = false;
   public controllersVisible = true;
   public drag = {x: 0, y: 0};
   public SearchQueryTypes = SearchQueryTypes;
@@ -116,10 +116,6 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
     return this.root.nativeElement.width;
   }
 
-  public containerHeight(): void {
-    return this.root.nativeElement.height;
-  }
-
   ngOnInit(): void {
     this.timer = timer(1000, 2000);
   }
@@ -244,7 +240,23 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
         break;
       case 'c':
       case 'C':
-        this.controllersAlwaysOn = !this.controllersAlwaysOn;
+        this.captionAlwaysOn = !this.captionAlwaysOn;
+        break;
+      case 'a':
+      case 'A':
+        this.facesAlwaysOn = !this.facesAlwaysOn;
+        break;
+      case 'd':
+      case 'D':
+        if(event.shiftKey){
+          const link = document.createElement('a');
+          link.setAttribute('type', 'hidden');
+          link.href = this.activePhoto.gridMedia.getMediaPath();
+          link.download = this.activePhoto.gridMedia.media.name;
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        }
         break;
       case 'Escape': // escape
         this.closed.emit();