Merge branch 'scroll-to-active-slide' into 'master'

Make sure that all the clients auto scroll to the selected slide.

See merge request openlp/web-remote!82

package.json

@@ -24,16 +24,16 @@
     "supportedBrowsers": "(echo module.exports = && browserslist-useragent-regexp --allowHigherVersions) > src/assets/supportedBrowsers.js"
   },
   "dependencies": {
-    "@angular/animations": "^17.2.1",
+    "@angular/animations": "^17.3.1",
-    "@angular/cdk": "^17.2.1",
+    "@angular/cdk": "^17.3.1",
-    "@angular/common": "^17.2.1",
+    "@angular/common": "^17.3.1",
-    "@angular/compiler": "^17.2.1",
+    "@angular/compiler": "^17.3.1",
-    "@angular/core": "^17.2.1",
+    "@angular/core": "^17.3.1",
-    "@angular/forms": "^17.2.1",
+    "@angular/forms": "^17.3.1",
-    "@angular/material": "^17.2.1",
+    "@angular/material": "^17.3.1",
-    "@angular/platform-browser": "^17.2.1",
+    "@angular/platform-browser": "^17.3.1",
-    "@angular/platform-browser-dynamic": "^17.2.1",
+    "@angular/platform-browser-dynamic": "^17.3.1",
-    "@angular/router": "^17.2.1",
+    "@angular/router": "^17.3.1",
     "@fontsource/roboto": "^5.0.8",
     "core-js": "^3.35.1",
     "hammerjs": "^2.0.8",
@@ -42,15 +42,15 @@
     "zone.js": "^0.14.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.2.1",
+    "@angular-devkit/build-angular": "^17.3.1",
-    "@angular-eslint/builder": "^17.2.1",
+    "@angular-eslint/builder": "^17.3.0",
-    "@angular-eslint/eslint-plugin": "^17.2.1",
+    "@angular-eslint/eslint-plugin": "^17.3.0",
-    "@angular-eslint/eslint-plugin-template": "^17.2.1",
+    "@angular-eslint/eslint-plugin-template": "^17.3.0",
-    "@angular-eslint/schematics": "^17.2.1",
+    "@angular-eslint/schematics": "^17.3.0",
-    "@angular-eslint/template-parser": "^17.2.1",
+    "@angular-eslint/template-parser": "^17.3.0",
-    "@angular/cli": "~17.2.1",
+    "@angular/cli": "~17.3.1",
-    "@angular/compiler-cli": "^17.2.1",
+    "@angular/compiler-cli": "^17.3.1",
-    "@angular/language-service": "^17.2.1",
+    "@angular/language-service": "^17.3.1",
     "@chiragrupani/karma-chromium-edge-launcher": "^2.3.1",
     "@types/jasmine": "~5.1.4",
     "@types/jasminewd2": "~2.0.13",

src/app/app.component.ts

@@ -124,15 +124,11 @@ export class AppComponent implements OnInit {
   }
 
   nextSlide() {
-    this.openlpService.nextSlide().subscribe(() =>
+    this.openlpService.nextSlide().subscribe();
-      this.hotKeysService.scrollToCurrentItem('slide', 'start')
-    );
   }
 
   previousSlide() {
-    this.openlpService.previousSlide().subscribe(() =>
+    this.openlpService.previousSlide().subscribe();
-      this.hotKeysService.scrollToCurrentItem('slide', 'end')
-    );
   }
 
   blankDisplay() {

src/app/components/slides/slide-list/slide-list.component.ts

@@ -3,7 +3,6 @@ import { Subscription } from 'rxjs';
 
 import { Slide } from '../../../responses';
 import { OpenLPService } from '../../../openlp.service';
-import { HotKeysService } from '../../../hotkeys.service';
 
 @Component({
   selector: 'openlp-slide-list',
@@ -16,10 +15,8 @@ export class SlideListComponent implements OnInit, OnDestroy {
   @Output() slideSelected = new EventEmitter<SlideListItem>();
   _subscription: Subscription;
   loading = false;
-  previousServiceItemId: string;
-  isServiceItemChanged: boolean;
 
-  constructor(private openlpService: OpenLPService, private hotKeysService: HotKeysService) {
+  constructor(private openlpService: OpenLPService) {
     this._subscription = openlpService.stateChanged$.subscribe(() =>
       this.fetchSlides()
     );
@@ -44,27 +41,25 @@ export class SlideListComponent implements OnInit, OnDestroy {
         this.loading = false;
         if (serviceItem instanceof Array) {
           this.slides = serviceItem;
-        }
+        } else {
-        else {
           this.slides = serviceItem.slides;
-          if (this.previousServiceItemId !== serviceItem.id) {
-            this.isServiceItemChanged = true;
-            this.previousServiceItemId = serviceItem.id;
-          }
         }
       },
       complete: () => {
-        if (this.isServiceItemChanged) {
+        setTimeout(() => this.scrollToCurrentItem(), 25);
-          setTimeout(() => this.hotKeysService.scrollToCurrentItem('slide', window.scrollY === 0 ? 'center' : 'end'), 25);
-          this.isServiceItemChanged = false;
-        }
       }
     });
   }
+
+  scrollToCurrentItem() {
+    document.querySelectorAll('openlp-slide-item .selected')[0]?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center'
+    });
+  }
 }
 
 export interface SlideListItem {
   slide: Slide;
   index: number;
 }
-

src/app/hotkeys.service.ts

@@ -42,11 +42,4 @@ export class HotKeysService {
       };
     });
   }
-
-  scrollToCurrentItem(type: 'slide'|'service', block: 'start'|'center'|'end'|'nearest') {
-    document.querySelectorAll(`openlp-${type}-item .selected`)[0]?.scrollIntoView({
-        behavior: 'smooth',
-        block
-    });
-  }
 }