Saving selected default slideshow speed #571, #570

src/common/CookieNames.ts

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

src/common/config/public/ClientConfig.ts

@@ -203,6 +203,8 @@ export class ClientOtherConfig {
       'Adds a button to flattens the file structure, by listing the content of all subdirectories.',
   })
   enableDirectoryFlattening: boolean = false;
+  @ConfigProperty({description:"Default time interval for displaying a photo in the slide show"})
+  defaultSlideshowSpeed: number = 5;
 }
 
 @SubConfigClass()

src/frontend/app/ui/gallery/cache.gallery.service.ts

@@ -24,6 +24,7 @@ export class GalleryCacheService {
   private static readonly SEARCH_PREFIX = 'search:';
   private static readonly SORTING_PREFIX = 'sorting:';
   private static readonly VERSION = 'version';
+  private static readonly SLIDESHOW_SPEED = 'slideshow_speed';
 
   constructor(private versionService: VersionService) {
     // if it was a forced reload not a navigation, clear cache
@@ -293,4 +294,23 @@ export class GalleryCacheService {
       // ignoring errors
     }
   }
+
+  getSlideshowSpeed(): number {
+    const key = GalleryCacheService.SLIDESHOW_SPEED;
+    const tmp = localStorage.getItem(key);
+    if (tmp != null) {
+      return parseInt(tmp, 10);
+    }
+    return null;
+  }
+
+  setSlideshowSpeed(speed: number): void {
+    try {
+      const key = GalleryCacheService.SLIDESHOW_SPEED;
+      localStorage.setItem(key, speed.toString());
+    } catch (e) {
+      this.reset();
+      console.error(e);
+    }
+  }
 }

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

@@ -53,7 +53,8 @@
               <span class="pe-2" i18n-title title="Slideshow playback speed" i18n>Slideshow speed:</span>
               <select
                 class="form-select d-inline-block w-auto"
-                [(ngModel)]="selectedPlayBackDuration">
+                [(ngModel)]="selectedSlideshowSpeed"
+                (ngModelChange)="slideshowSpeedChanged()">
                 <option *ngFor="let speed of playBackDurations" [value]="speed">{{ speed }}s</option>
               </select>
             </div>

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

@@ -27,6 +27,7 @@ import {
 import {AuthenticationService} from '../../../../model/network/authentication.service';
 import {LightboxService} from '../lightbox.service';
 import {CookieService} from 'ngx-cookie-service';
+import {GalleryCacheService} from '../../cache.gallery.service';
 
 export enum PlayBackStates {
   Paused = 1,
@@ -59,7 +60,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
   public playBackState: PlayBackStates = PlayBackStates.Paused;
   public PlayBackStates = PlayBackStates;
   public playBackDurations = [2, 5, 10, 15, 20, 30, 60];
-  public selectedPlayBackDuration: number = null;
+  public selectedSlideshowSpeed: number = null;
   public controllersDimmed = false;
 
   public controllersVisible = true;
@@ -73,13 +74,12 @@ 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 cookieService: CookieService
+    private cacheService: GalleryCacheService
   ) {
     this.searchEnabled =
       Config.Client.Search.enabled && this.authService.canSearch();
@@ -126,10 +126,10 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
 
   ngOnInit(): void {
     this.timer = timer(1000, 1000);
-    if (this.cookieService.check(CookieNames.playBackDuration)) {
+    if (this.cacheService.getSlideshowSpeed()) {
-      this.selectedPlayBackDuration = +this.cookieService.get(CookieNames.playBackDuration);
+      this.selectedSlideshowSpeed = this.cacheService.getSlideshowSpeed();
     } else {
-      this.selectedPlayBackDuration = this.defaultPlayBackDuration;
+      this.selectedSlideshowSpeed = Config.Client.Other.defaultSlideshowSpeed;
     }
   }
 
@@ -305,22 +305,13 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
   public play(): void {
     this.pause();
     this.timerSub = this.timer
-      .pipe(filter((t) => t % this.selectedPlayBackDuration === 0))
+      .pipe(filter((t) => t % this.selectedSlideshowSpeed === 0))
       .subscribe(this.showNextMedia);
     this.playBackState = PlayBackStates.Play;
   }
 
-  public setPlayBackDuration(duration: number) {
+  public slideshowSpeedChanged() {
-    this.selectedPlayBackDuration = duration;
+    this.cacheService.setSlideshowSpeed(this.selectedSlideshowSpeed);
-    if (duration) {
-      this.cookieService.set(CookieNames.playBackDuration, duration + '');
-    } else {
-      this.cookieService.delete(CookieNames.playBackDuration);
-    }
-    if (this.playBackState === PlayBackStates.Play) {
-      this.pause();
-      this.play();
-    }
   }
 
   @HostListener('mousemove')