Reverting: Use tap instead of click for better IOS touch navigation #493

Navigator fix solves the IOS issue

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

@@ -6,15 +6,14 @@
   <div [class.dim-controls]="controllersDimmed"
        class="controls controls-top">
     <div class="controls-background">
-      <div class="highlight control-button"
+      <div class="highlight control-button" (click)="toggleInfoPanel.emit()"
-           (tap)="toggleInfoPanel.emit()"
            title="info key: i" i18n-title>
         <span class="oi oi-info"></span>
       </div>
 
       <div *ngIf="fullScreenService.isFullScreenEnabled()"
            class="highlight control-button"
-           (tap)="toggleFullScreen.emit()"
+           (click)="toggleFullScreen.emit()"
            title="toggle fullscreen, key: f" i18n-title>
         <span class="oi oi-fullscreen-exit">
         </span>
@@ -22,17 +21,16 @@
 
       <div *ngIf="!fullScreenService.isFullScreenEnabled()"
            class="highlight control-button"
-           (tap)="toggleFullScreen.emit(true)"
+           (click)="toggleFullScreen.emit(true)"
            title="toggle fullscreen, key: f" i18n-title>
         <span class="oi oi-fullscreen-enter">
         </span>
       </div>
 
-      <div class="btn-group" dropdown #dropdown="bs-dropdown" [insideClick]="true">
+      <div class="btn-group" dropdown [insideClick]="true">
-        <button id="button-basic" type="button"
+        <button id="button-basic" dropdownToggle type="button"
                 class="border-0 highlight control-button"
                 data-bs-auto-close="outside"
-                (tap)="dropdown.toggle(true)"
                 aria-controls="dropdown-basic">
           <span class="oi oi-menu"></span>
         </button>
@@ -120,7 +118,7 @@
       </div>
 
       <div class="highlight control-button"
-           (tap)="closeLightbox()"
+           (click)="closeLightbox()"
            title="close, key: Escape" i18n-title>
         <span class="oi oi-x">
 
@@ -133,9 +131,10 @@
        (swipeleft)="zoom == 1 && nextPhoto.emit()"
        (swiperight)="zoom == 1 && previousPhoto.emit()"
        (swipeup)="zoom == 1 && closed.emit()"
-       (tap)="tap($event);mediaElement.playPause()"
+       (tap)="tap($event)"
        (pan)="pan($any($event))"
-       (wheel)="wheel($event)">
+       (wheel)="wheel($event)"
+       (click)="mediaElement.playPause()">
 
     <div class="faces-container"
          [style.top.px]="photoFrameDim.height/2 + drag.y"
@@ -177,23 +176,23 @@
 
   <div [class.dim-controls]="controllersDimmed" class="navigation-arrow highlight"
        *ngIf="navigation.hasPrev && zoom == 1" title="key: left arrow" id="leftArrow" i18n-title
-       (tap)="previousPhoto.emit()"><span
+       (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
-       (tap)="nextPhoto.emit()"><span
+       (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 (tap)="zoomOut()" i18n-title title="Zoom out, key: '-'"
+        <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 (tap)="zoomIn()" i18n-title title="Zoom in, key: '+'"
+        <span (click)="zoomIn()" i18n-title title="Zoom in, key: '+'"
               class="oi oi-zoom-in float-left"></span>
     </div>
   </div>
@@ -205,12 +204,12 @@
       <span
         *ngIf="playBackState == PlayBackStates.Play"
         class="oi oi-media-pause highlight control-button button-active"
-        (tap)="pause()"
+        (click)="pause()"
         title="pause"></span>
       <span
         *ngIf="playBackState == PlayBackStates.Paused"
         class="oi oi-media-play highlight control-button"
-        (tap)="play()"
+        (click)="play()"
         title="auto play"></span>
     </div>
   </div>
@@ -223,12 +222,12 @@
   <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'"
-            (tap)="mediaElement.playPause()"></span>
+            (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'"
-          (tap)="mediaElement.mute()"></span>
+          (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">