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

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

@@ -6,14 +6,15 @@
   <div [class.dim-controls]="controllersDimmed"
        class="controls controls-top">
     <div class="controls-background">
-      <div class="highlight control-button" (click)="toggleInfoPanel.emit()"
+      <div class="highlight control-button"
+           (tap)="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()"
+           (tap)="toggleFullScreen.emit()"
            title="toggle fullscreen, key: f" i18n-title>
         <span class="oi oi-fullscreen-exit">
         </span>
@@ -21,16 +22,17 @@
 
       <div *ngIf="!fullScreenService.isFullScreenEnabled()"
            class="highlight control-button"
-           (click)="toggleFullScreen.emit(true)"
+           (tap)="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">
+      <div class="btn-group" dropdown #dropdown="bs-dropdown" [insideClick]="true">
-        <button id="button-basic" dropdownToggle type="button"
+        <button id="button-basic" 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>
@@ -118,7 +120,7 @@
       </div>
 
       <div class="highlight control-button"
-           (click)="closeLightbox()"
+           (tap)="closeLightbox()"
            title="close, key: Escape" i18n-title>
         <span class="oi oi-x">
 
@@ -131,10 +133,9 @@
        (swipeleft)="zoom == 1 && nextPhoto.emit()"
        (swiperight)="zoom == 1 && previousPhoto.emit()"
        (swipeup)="zoom == 1 && closed.emit()"
-       (tap)="tap($event)"
+       (tap)="tap($event);mediaElement.playPause()"
        (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"
@@ -176,23 +177,23 @@
 
   <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
+       (tap)="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
+       (tap)="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: '-'"
+        <span (tap)="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: '+'"
+        <span (tap)="zoomIn()" i18n-title title="Zoom in, key: '+'"
               class="oi oi-zoom-in float-left"></span>
     </div>
   </div>
@@ -204,41 +205,13 @@
       <span
         *ngIf="playBackState == PlayBackStates.Play"
         class="oi oi-media-pause highlight control-button button-active"
-        (click)="pause()"
+        (tap)="pause()"
         title="pause"></span>
       <span
         *ngIf="playBackState == PlayBackStates.Paused"
         class="oi oi-media-play highlight control-button"
-        (click)="play()"
+        (tap)="play()"
         title="auto play"></span>
-      <!--
-            <span *ngIf="playBackState == PlayBackStates.Play"
-                  class="btn-group highlight control-button"
-                  dropdown
-                  title="Playback speed"
-                  i18n-title
-                  [dropup]="true">
-              <div id="button-duration"
-                   dropdownToggle
-                   data-bs-auto-close="outside"
-                   aria-controls="dropdown-timer">
-                <span class="oi oi-clock"></span>
-              </div>
-              <ul id="dropdown-timer"
-                  *dropdownMenu
-                  class="dropdown-menu dropdown-menu-right"
-                  role="menu"
-                  aria-labelledby="button-duration">
-                <li *ngFor="let duration of playBackDurations"
-                    role="menuitem"
-                    (click)="setPlayBackDuration(duration)">
-                  <a class="dropdown-item"
-                     [class]="selectedPlayBackDuration === duration ? 'active' : ''">
-                    {{duration}}s
-                  </a>
-                </li>
-              </ul>
-            </span>-->
     </div>
   </div>
 
@@ -250,12 +223,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'"
-            (click)="mediaElement.playPause()"></span>
+            (tap)="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>
+          (tap)="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">