Moving slideshow speed to the submenu #571, #570

Also fixing playback issues

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

@@ -41,10 +41,23 @@
                [href]="activePhoto.gridMedia.getMediaPath()"
                [download]="activePhoto.gridMedia.media.name"
                class="dropdown-item">
-              <span class="oi oi-data-transfer-download pe-2" i18n></span> Download
+              <span class="oi oi-data-transfer-download pe-2"></span>
+              <span i18n>Download</span>
               <small>(shift + D)</small>
             </a>
           </li>
+          <li role="menuitem"
+              dropdown>
+            <div class="dropdown-item">
+              <span class="oi oi-clock pe-2"></span>
+              <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">
+                <option *ngFor="let speed of playBackDurations" [value]="speed">{{ speed }}s</option>
+              </select>
+            </div>
+          </li>
           <li role="menuitem">
             <div class="dropdown-item d-flex justify-content-between">
               <span title="key: c" i18n-title i18n>Show caption</span>
@@ -83,7 +96,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
@@ -188,41 +201,44 @@
   <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
+        *ngIf="playBackState == PlayBackStates.Play"
+        class="oi oi-media-pause highlight control-button button-active"
+        (click)="pause()"
+        title="pause"></span>
+      <span
+        *ngIf="playBackState == PlayBackStates.Paused"
         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
-            (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>
+      <!--
+            <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>
 

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

@@ -58,7 +58,7 @@ 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 playBackDurations = [2, 5, 10, 15, 20, 30, 60];
   public selectedPlayBackDuration: number = null;
   public controllersDimmed = false;
 
@@ -67,6 +67,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
   public SearchQueryTypes = SearchQueryTypes;
   public faceContainerDim = {width: 0, height: 0};
   public searchEnabled: boolean;
+
   private visibilityTimer: number = null;
   private timer: Observable<number>;
   private timerSub: Subscription;
@@ -78,7 +79,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
     public lightboxService: LightboxService,
     public fullScreenService: FullScreenService,
     private authService: AuthenticationService,
-    private cookieService:CookieService
+    private cookieService: CookieService
   ) {
     this.searchEnabled =
       Config.Client.Search.enabled && this.authService.canSearch();
@@ -316,6 +317,10 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
     } else {
       this.cookieService.delete(CookieNames.playBackDuration);
     }
+    if (this.playBackState === PlayBackStates.Play) {
+      this.pause();
+      this.play();
+    }
   }
 
   @HostListener('mousemove')

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

@@ -132,6 +132,8 @@ export class GalleryLightboxMediaComponent implements OnChanges {
       this.thumbnailSrc = null;
       this.photo.src = null;
       this.nextImage.src = '';
+      this.nextImage.onload = null;
+      this.nextImage.onerror = null;
       this.mediaLoaded = false;
       this.imageLoadFinished = {
         this: false,
@@ -219,8 +221,16 @@ export class GalleryLightboxMediaComponent implements OnChanges {
     } else {
       this.nextImage.src = this.nextGridMedia.getMediaPath();
     }
-    this.nextImage.onload = () => this.imageLoadFinished.next = true;
 
+    this.nextImage.onload = () => this.imageLoadFinished.next = true;
+    this.nextImage.onerror = () => {
+      console.error('Cant preload:' + this.nextImage.src);
+      this.imageLoadFinished.next = true;
+    };
+
+    if (this.nextImage.complete) {
+      this.imageLoadFinished.next = true;
+    }
   }
 
   private loadPhoto(): void {