diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9039bdf..f462ffb 100644 --- a/src/app/app.component.ts +++ b/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() { diff --git a/src/app/components/slides/slide-list/slide-list.component.ts b/src/app/components/slides/slide-list/slide-list.component.ts index de82291..8a65707 100644 --- a/src/app/components/slides/slide-list/slide-list.component.ts +++ b/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(); _subscription: Subscription; loading = false; + previousServiceItemId: string; + isServiceItemChanged: boolean; - constructor(private openlpService: OpenLPService) { - this._subscription = openlpService.stateChanged$.subscribe(item => this.fetchSlides()); + constructor(private openlpService: OpenLPService, private hotKeysService: HotKeysService) { + 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.loading = false; - if (serviceItem instanceof Array) { - this.slides = serviceItem; - } - else { - this.slides = serviceItem.slides; + 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; + } } }); } diff --git a/src/app/hotkeys.service.ts b/src/app/hotkeys.service.ts index ec0c80e..1bc3b65 100644 --- a/src/app/hotkeys.service.ts +++ b/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 + }); + } }