added controls and logic for changing playback speeds

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

@@ -65,12 +65,14 @@
 .controls .control-button {
   margin-left: 0.2em;
   margin-right: 0.2em;
-  display: inline-block;
   padding: 0 0.5rem;
+  display: inline-block;
   font-size: 1.5rem;
+  line-height: 1;
   color: white;
   background-color: transparent;
   cursor: pointer;
+  vertical-align: middle !important;
 }
 
 .controls .button-disabled {
@@ -277,4 +279,6 @@ input[type="range"].zoom-progress::-moz-range-track {
   opacity: 1;
 }
 
-
+.dropdown-menu {
+  min-width: auto;
+}

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

@@ -34,7 +34,7 @@
               aria-controls="dropdown-basic">
         <span class="oi oi-menu"></span>
       </button>
-      <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu  dropdown-menu-right"
+      <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu dropdown-menu-right"
           role="menu" aria-labelledby="button-basic">
         <li role="menuitem">
           <a *ngIf="activePhoto"
@@ -63,7 +63,7 @@
             </bSwitch>
           </div>
         </li>
-        <li role="menuitem ">
+        <li role="menuitem">
           <div class="dropdown-item d-flex justify-content-between">
             <span title="key: a" i18n-title i18n>Show faces</span>
             <bSwitch
@@ -83,7 +83,7 @@
         </li>
         <li
           *ngIf="activePhoto && activePhoto.gridMedia.isVideo()"
-          role="menuitem ">
+          role="menuitem">
           <div class="dropdown-item d-flex justify-content-between">
             <span title="key: l" i18n-title i18n>Play videos</span>
             <bSwitch
@@ -186,19 +186,35 @@
 
   <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':''"
-            (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>
+
+    <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 btn-group highlight control-button"
+          dropdown
+          [dropup]="true">
+      <div id="button-duration"
+              dropdownToggle
+              data-bs-auto-close="outside"
+              aria-controls="dropdown-basic">
+        <span class="text-white pe-1">{{selectedPlayBackDuration + 's'}}</span>
+        <span class="oi-clock"></span>
+      </div>
+      <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu dropdown-menu-right"
+          role="menu" aria-labelledby="button-duration">
+        <li *ngFor="let duration of playBackDurations" role="menuitem" (click)="play(duration)">
+          <a class="dropdown-item" [class]="selectedPlayBackDuration === duration ? 'active' : ''">{{duration}}s</a>
+        </li>
+      </ul>
+    </span>
+
   </div>
 
   <div [class.dim-controls]="controllersDimmed" class="controls controls-big-play"

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

@@ -29,7 +29,6 @@ import {LightboxService} from '../lightbox.service';
 export enum PlayBackStates {
   Paused = 1,
   Play = 2,
-  FastForward = 3,
 }
 
 @Component({
@@ -57,6 +56,8 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
   public zoom = 1;
   public playBackState: PlayBackStates = PlayBackStates.Paused;
   public PlayBackStates = PlayBackStates;
+  public playBackDurations = [2,5,10,15,20,30,60];
+  public selectedPlayBackDuration = 5;
   public controllersDimmed = false;
 
   public controllersVisible = true;
@@ -119,7 +120,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
   }
 
   ngOnInit(): void {
-    this.timer = timer(1000, 2000);
+    this.timer = timer(1000, 1000);
   }
 
   ngOnDestroy(): void {
@@ -291,20 +292,17 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
     this.nextPhoto.emit();
   };
 
-  public play(): void {
+  public play(duration?: number): void {
     this.pause();
+    if (duration) {
+      this.selectedPlayBackDuration = duration;
+    }
     this.timerSub = this.timer
-      .pipe(filter((t) => t % 2 === 0))
+      .pipe(filter((t) => t % this.selectedPlayBackDuration === 0))
       .subscribe(this.showNextMedia);
     this.playBackState = PlayBackStates.Play;
   }
 
-  public fastForward(): void {
-    this.pause();
-    this.timerSub = this.timer.subscribe(this.showNextMedia);
-    this.playBackState = PlayBackStates.FastForward;
-  }
-
   @HostListener('mousemove')
   onMouseMove(): void {
     this.showControls();