From 640aec03dd98f44e26a14df4399cce206cb4ac25 Mon Sep 17 00:00:00 2001
From: crypt-o-warrior <64123611+crypt-o-warrior@users.noreply.github.com>
Date: Sat, 17 Dec 2022 01:07:39 +0100
Subject: [PATCH] added (session) cookie for playback duration; reverted some
 unnecessary css-changes;

---
 src/common/CookieNames.ts                     |  1 +
 .../controls.lightbox.gallery.component.css   |  4 +---
 .../controls.lightbox.gallery.component.ts    | 24 ++++++++++++++++---
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/common/CookieNames.ts b/src/common/CookieNames.ts
index fcb6d60c..33ddedc8 100644
--- a/src/common/CookieNames.ts
+++ b/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';
 }
diff --git a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css
index b2dc983d..2f499aac 100644
--- a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css
+++ b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css
@@ -65,14 +65,12 @@
 .controls .control-button {
   margin-left: 0.2em;
   margin-right: 0.2em;
-  padding: 0 0.5rem;
   display: inline-block;
+  padding: 0 0.5rem;
   font-size: 1.5rem;
-  line-height: 1;
   color: white;
   background-color: transparent;
   cursor: pointer;
-  vertical-align: middle !important;
 }
 
 .controls .button-disabled {
diff --git a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts
index 5fa52b79..39bd3a78 100644
--- a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts
+++ b/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,6 +26,7 @@ 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,
@@ -57,7 +59,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 = 5;
+  public selectedPlayBackDuration: number = null;
   public controllersDimmed = false;
 
   public controllersVisible = true;
@@ -70,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();
@@ -121,6 +125,11 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
 
   ngOnInit(): void {
     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 {
@@ -295,7 +304,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
   public play(duration?: number): void {
     this.pause();
     if (duration) {
-      this.selectedPlayBackDuration = duration;
+      this.setPlayBackDuration(duration);
     }
     this.timerSub = this.timer
       .pipe(filter((t) => t % this.selectedPlayBackDuration === 0))
@@ -303,6 +312,15 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
     this.playBackState = PlayBackStates.Play;
   }
 
+  public setPlayBackDuration(duration: number) {
+    this.selectedPlayBackDuration = duration;
+    if (duration) {
+      this.cookieService.set(CookieNames.playBackDuration, duration + '');
+    } else {
+      this.cookieService.delete(CookieNames.playBackDuration);
+    }
+  }
+
   @HostListener('mousemove')
   onMouseMove(): void {
     this.showControls();