Merge pull request #1175 from cycsmail/hide-cursor-when-controls-dimmed-736

Hide the mouse cursor when the lightbox controls are hidden

Author: bpatrik

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

@@ -302,6 +302,11 @@ input[type="range"].zoom-progress::-moz-range-track {
   opacity: 0.0;
 }
 
+/* hide the mouse cursor together with the controls (e.g. during slideshow) */
+#swipeable-container.hide-cursor {
+  cursor: none;
+}
+
 .controls-title.controls-nodim {
   opacity: 0.7;
 }

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

@@ -136,6 +136,7 @@
   </div>
 
   <div id="swipeable-container"
+       [class.hide-cursor]="controllersDimmed"
        (swipeleft)="zoom == 1 && nextPhoto.emit()"
        (swiperight)="zoom == 1 && previousPhoto.emit()"
        (swipeup)="zoom == 1 && closed.emit()"

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

@@ -0,0 +1,96 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {provideNoopAnimations} from '@angular/platform-browser/animations';
+import {provideRouter} from '@angular/router';
+import {NgIconsModule} from '@ng-icons/core';
+import {
+  ionChevronBackOutline,
+  ionChevronForwardOutline,
+  ionCloseOutline,
+  ionContractOutline,
+  ionExpandOutline,
+  ionInformationOutline,
+  ionMenuOutline,
+  ionPauseOutline,
+  ionPlayOutline,
+} from '@ng-icons/ionicons';
+
+import {ControlsLightboxComponent} from './controls.lightbox.gallery.component';
+import {LightboxService} from '../lightbox.service';
+import {FullScreenService} from '../../fullscreen.service';
+import {AuthenticationService} from '../../../../model/network/authentication.service';
+import {FileSizePipe} from '../../../../pipes/FileSizePipe';
+import {DatePipe} from '@angular/common';
+
+class MockLightboxService {
+  controllersDimmed = false;
+  slideshowSpeed = 5;
+  captionAlwaysOn = false;
+  facesAlwaysOn = false;
+}
+
+class MockFullScreenService {
+  isFullScreenEnabled() {
+    return false;
+  }
+}
+
+class MockAuthenticationService {
+  canSearch() {
+    return false;
+  }
+}
+
+describe('ControlsLightboxComponent - cursor visibility', () => {
+  let component: ControlsLightboxComponent;
+  let fixture: ComponentFixture<ControlsLightboxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        ControlsLightboxComponent,
+        NgIconsModule.withIcons({
+          ionInformationOutline,
+          ionContractOutline,
+          ionExpandOutline,
+          ionMenuOutline,
+          ionCloseOutline,
+          ionChevronBackOutline,
+          ionChevronForwardOutline,
+          ionPlayOutline,
+          ionPauseOutline,
+        }),
+      ],
+      providers: [
+        {provide: LightboxService, useClass: MockLightboxService},
+        {provide: FullScreenService, useClass: MockFullScreenService},
+        {provide: AuthenticationService, useClass: MockAuthenticationService},
+        {provide: FileSizePipe, useValue: {}},
+        {provide: DatePipe, useValue: {}},
+        provideNoopAnimations(),
+        provideRouter([]),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ControlsLightboxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should hide the cursor while the controls are dimmed', () => {
+    component.controllersDimmed = true;
+    fixture.detectChanges();
+
+    const swipeable: HTMLElement = fixture.nativeElement.querySelector('#swipeable-container');
+    expect(swipeable).toBeTruthy();
+    expect(swipeable.classList.contains('hide-cursor')).toBe(true);
+  });
+
+  it('should keep the cursor visible while the controls are shown', () => {
+    component.controllersDimmed = false;
+    fixture.detectChanges();
+
+    const swipeable: HTMLElement = fixture.nativeElement.querySelector('#swipeable-container');
+    expect(swipeable).toBeTruthy();
+    expect(swipeable.classList.contains('hide-cursor')).toBe(false);
+  });
+});