Merge branch 'issue-37-missing-scroll-to-active-slide' into 'master'

Use auto scroll when moving to next or previous slide.

See merge request openlp/web-remote!62

src/app/app.component.ts

@@ -122,11 +122,15 @@ 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,6 +3,7 @@ import { Subscription } from 'rxjs';
 
 import { Slide } from '../../../responses';
 import { OpenLPService } from '../../../openlp.service';
+import { HotKeysService } from '../../../hotkeys.service';
 
 @Component({
   selector: 'openlp-slide-list',
@@ -15,9 +16,13 @@ export class SlideListComponent implements OnInit, OnDestroy {
   @Output() slideSelected = new EventEmitter<SlideListItem>();
   _subscription: Subscription;
   loading = false;
+  previousServiceItemId: string;
+  isServiceItemChanged: boolean;
 
-  constructor(private openlpService: OpenLPService) {
+  constructor(private openlpService: OpenLPService, private hotKeysService: HotKeysService) {
-    this._subscription = openlpService.stateChanged$.subscribe(item => this.fetchSlides());
+    this._subscription = openlpService.stateChanged$.subscribe(_ =>
+      this.fetchSlides()
+    );
   }
 
   ngOnInit() {
@@ -34,13 +39,25 @@ export class SlideListComponent implements OnInit, OnDestroy {
 
   fetchSlides() {
     this.loading = true;
-    this.openlpService.getServiceItem().subscribe(serviceItem => {
+    this.openlpService.getServiceItem().subscribe({
+      next: (serviceItem) => {
         this.loading = false;
         if (serviceItem instanceof Array) {
           this.slides = serviceItem;
         }
         else {
           this.slides = serviceItem.slides;
+          if (this.previousServiceItemId !== serviceItem.id) {
+            this.isServiceItemChanged = true;
+            this.previousServiceItemId = serviceItem.id;
+          }
+        }
+      },
+      complete: () => {
+        if (this.isServiceItemChanged) {
+          setTimeout(() => this.hotKeysService.scrollToCurrentItem('slide', window.scrollY === 0 ? 'center' : 'end'), 25);
+          this.isServiceItemChanged = false;
+        }
       }
     });
   }

src/app/hotkeys.service.ts

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