From 594fc2e8b7a90bc83b5b03e6feb32ced5797d670 Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Fri, 9 Dec 2022 22:48:13 +0100
Subject: [PATCH] Add config to enable video looping fixes #544

---
 .../controls.lightbox.gallery.component.html  | 30 +++++++++++++++----
 .../controls.lightbox.gallery.component.ts    | 16 ++++++----
 .../media.lightbox.gallery.component.html     |  1 +
 .../media/media.lightbox.gallery.component.ts |  7 +++--
 4 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
index 82d391fc..86898854 100644
--- a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
+++ b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
@@ -1,6 +1,6 @@
 <div id="controllers-container" #root>
   <div [class.dim-controls]="controllersDimmed" class="controls-caption"
-       [class.controls-nodim]="captionAlwaysOn"
+       [class.controls-nodim]="lightboxService.captionAlwaysOn"
        *ngIf="Title">{{Title}}</div>
 
   <div [class.dim-controls]="controllersDimmed"
@@ -59,7 +59,7 @@
               i18n-switch-on-text
               [switch-handle-width]="100"
               [switch-label-width]="20"
-              [(ngModel)]="captionAlwaysOn">
+              [(ngModel)]="lightboxService.captionAlwaysOn">
             </bSwitch>
           </div>
         </li>
@@ -77,7 +77,27 @@
               i18n-switch-on-text
               [switch-handle-width]="100"
               [switch-label-width]="20"
-              [(ngModel)]="facesAlwaysOn">
+              [(ngModel)]="lightboxService.facesAlwaysOn">
+            </bSwitch>
+          </div>
+        </li>
+        <li
+          *ngIf="activePhoto && activePhoto.gridMedia.isVideo()"
+          role="menuitem ">
+          <div class="dropdown-item d-flex justify-content-between">
+            <span title="key: l" i18n-title i18n>Play videos</span>
+            <bSwitch
+              class="switch ps-2"
+              name="faces-switch"
+              switch-on-color="success"
+              [switch-inverse]="true"
+              switch-off-text="once"
+              switch-on-text="loop"
+              i18n-switch-off-text
+              i18n-switch-on-text
+              [switch-handle-width]="100"
+              [switch-label-width]="20"
+              [(ngModel)]="lightboxService.loopVideos">
             </bSwitch>
           </div>
         </li>
@@ -110,7 +130,7 @@
          *ngIf="facesEnabled && activePhoto  && activePhoto.gridMedia.Photo.metadata.faces && activePhoto.gridMedia.Photo.metadata.faces.length > 0">
       <ng-container *ngIf="searchEnabled">
         <a
-          [class.controls-nodim]="facesAlwaysOn"
+          [class.controls-nodim]="lightboxService.facesAlwaysOn"
           class="face"
           [routerLink]="['/search', getPersonSearchQuery(face.name)]"
           [style.top.%]="face.box.top / activePhoto.gridMedia.Photo.metadata.size.height*100"
@@ -124,7 +144,7 @@
       </ng-container>
       <ng-container *ngIf="!searchEnabled">
         <div
-          [class.dim-controls]="controllersDimmed && !facesAlwaysOn"
+          [class.dim-controls]="controllersDimmed && !lightboxService.facesAlwaysOn"
           class="face"
           [style.top.%]="face.box.top / activePhoto.gridMedia.Photo.metadata.size.height*100"
           [style.left.%]="face.box.left / activePhoto.gridMedia.Photo.metadata.size.width*100"
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 28d6a34b..fed07f54 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
@@ -24,6 +24,7 @@ import {
   TextSearchQueryMatchTypes,
 } from '../../../../../../common/entities/SearchQueryDTO';
 import {AuthenticationService} from '../../../../model/network/authentication.service';
+import {LightboxService} from '../lightbox.service';
 
 export enum PlayBackStates {
   Paused = 1,
@@ -57,8 +58,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
   public playBackState: PlayBackStates = PlayBackStates.Paused;
   public PlayBackStates = PlayBackStates;
   public controllersDimmed = false;
-  public captionAlwaysOn = false;
-  public facesAlwaysOn = false;
+
   public controllersVisible = true;
   public drag = {x: 0, y: 0};
   public SearchQueryTypes = SearchQueryTypes;
@@ -71,6 +71,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
   private prevZoom = 1;
 
   constructor(
+    public lightboxService: LightboxService,
     public fullScreenService: FullScreenService,
     private authService: AuthenticationService
   ) {
@@ -78,6 +79,7 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
       Config.Client.Search.enabled && this.authService.canSearch();
   }
 
+
   public get Zoom(): number {
     return this.zoom;
   }
@@ -240,15 +242,19 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges {
         break;
       case 'c':
       case 'C':
-        this.captionAlwaysOn = !this.captionAlwaysOn;
+        this.lightboxService.captionAlwaysOn = !this.lightboxService.captionAlwaysOn;
         break;
       case 'a':
       case 'A':
-        this.facesAlwaysOn = !this.facesAlwaysOn;
+        this.lightboxService.facesAlwaysOn = !this.lightboxService.facesAlwaysOn;
+        break;
+      case 'l':
+      case 'L':
+        this.lightboxService.loopVideos = !this.lightboxService.loopVideos;
         break;
       case 'd':
       case 'D':
-        if(event.shiftKey){
+        if (event.shiftKey) {
           const link = document.createElement('a');
           link.setAttribute('type', 'hidden');
           link.href = this.activePhoto.gridMedia.getMediaPath();
diff --git a/src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.html b/src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.html
index 77c287f9..adb48e1d 100644
--- a/src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.html
+++ b/src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.html
@@ -18,6 +18,7 @@
          [style.width.%]="imageSize.width"
          [style.height.%]="imageSize.height"
          (loadstart)="onImageLoad()"
+         [loop]="lightboxService.loopVideos"
          autoplay
          (error)="onImageError()"
          (timeupdate)="onVideoProgress()"
diff --git a/src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.ts b/src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.ts
index 86965ef5..95bdf917 100644
--- a/src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.ts
+++ b/src/frontend/app/ui/gallery/lightbox/media/media.lightbox.gallery.component.ts
@@ -12,6 +12,7 @@ import {MediaDTOUtils} from '../../../../../../common/entities/MediaDTO';
 import {DomSanitizer, SafeStyle} from '@angular/platform-browser';
 import {SupportedFormats} from '../../../../../../common/SupportedFormats';
 import {Config} from '../../../../../../common/config/public/Config';
+import {LightboxService} from '../lightbox.service';
 
 @Component({
   selector: 'app-gallery-lightbox-media',
@@ -48,7 +49,9 @@ export class GalleryLightboxMediaComponent implements OnChanges {
   private mediaLoaded = false;
   private videoProgress = 0;
 
-  constructor(public elementRef: ElementRef, private sanitizer: DomSanitizer) {
+  constructor(public elementRef: ElementRef,
+              public lightboxService: LightboxService,
+              private sanitizer: DomSanitizer) {
   }
 
   get ImageTransform(): SafeStyle {
@@ -128,7 +131,7 @@ export class GalleryLightboxMediaComponent implements OnChanges {
       this.prevGirdPhoto = this.gridMedia;
       this.thumbnailSrc = null;
       this.photo.src = null;
-      this.nextImage.src = "";
+      this.nextImage.src = '';
       this.mediaLoaded = false;
       this.imageLoadFinished = {
         this: false,