Merge pull request #571 from crypt-o-warrior/master

[Feature] add control for slideshow playback speed

src/common/CookieNames.ts

@@ -2,4 +2,5 @@ export class CookieNames {
   public static lang = 'pigallery2-lang';
   public static session = 'pigallery2-session';
   public static advancedSettings = 'advanced-settings';
+  public static playBackDuration = 'playback-duration';
 }

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

@@ -283,4 +283,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"
@@ -128,7 +128,7 @@
          [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">
+         *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"
@@ -188,19 +188,41 @@
   <div [class.dim-controls]="controllersDimmed" class="controls controls-playback"
        *ngIf="zoom == 1 && activePhoto && activePhoto.gridMedia.isPhoto()">
     <div class="controls-background">
-    <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-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 btn-group highlight control-button"
+            dropdown
+            (isOpenChange)="$event ? pause() : play()"
+            [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)="setPlayBackDuration(duration)">
+            <a class="dropdown-item"
+               [class]="selectedPlayBackDuration === duration ? 'active' : ''">
+              {{duration}}s
+            </a>
+          </li>
+        </ul>
+      </span>
     </div>
   </div>
 

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

@@ -11,6 +11,7 @@ import {
   ViewChild,
 } from '@angular/core';
 import {MediaDTOUtils} from '../../../../../../common/entities/MediaDTO';
+import {CookieNames} from '../../../../../../common/CookieNames';
 import {FullScreenService} from '../../fullscreen.service';
 import {GalleryPhotoComponent} from '../../grid/photo/photo.grid.gallery.component';
 import {Observable, Subscription, timer} from 'rxjs';
@@ -25,11 +26,11 @@ import {
 } from '../../../../../../common/entities/SearchQueryDTO';
 import {AuthenticationService} from '../../../../model/network/authentication.service';
 import {LightboxService} from '../lightbox.service';
+import {CookieService} from 'ngx-cookie-service';
 
 export enum PlayBackStates {
   Paused = 1,
   Play = 2,
-  FastForward = 3,
 }
 
 @Component({
@@ -57,6 +58,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: number = null;
   public controllersDimmed = false;
 
   public controllersVisible = true;
@@ -69,11 +72,13 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
   private timerSub: Subscription;
   private prevDrag = {x: 0, y: 0};
   private prevZoom = 1;
+  private defaultPlayBackDuration = 5;
 
   constructor(
     public lightboxService: LightboxService,
     public fullScreenService: FullScreenService,
-    private authService: AuthenticationService
+    private authService: AuthenticationService,
+    private cookieService:CookieService
   ) {
     this.searchEnabled =
       Config.Client.Search.enabled && this.authService.canSearch();
@@ -119,7 +124,12 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
   }
 
   ngOnInit(): void {
-    this.timer = timer(1000, 2000);
+    this.timer = timer(1000, 1000);
+    if (this.cookieService.check(CookieNames.playBackDuration)) {
+      this.selectedPlayBackDuration = +this.cookieService.get(CookieNames.playBackDuration);
+    } else {
+      this.selectedPlayBackDuration = this.defaultPlayBackDuration;
+    }
   }
 
   ngOnDestroy(): void {
@@ -294,15 +304,18 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
   public play(): void {
     this.pause();
     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;
+  public setPlayBackDuration(duration: number) {
+    this.selectedPlayBackDuration = duration;
+    if (duration) {
+      this.cookieService.set(CookieNames.playBackDuration, duration + '');
+    } else {
+      this.cookieService.delete(CookieNames.playBackDuration);
+    }
   }
 
   @HostListener('mousemove')