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
This commit is contained in:
Mateus Meyer Jiacomelli 2023-03-04 01:34:44 +00:00
commit 21fdfec9ac
3 changed files with 39 additions and 11 deletions

View File

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

View File

@ -3,6 +3,7 @@ import { Subscription } from 'rxjs';
import { Slide } from '../../../responses'; import { Slide } from '../../../responses';
import { OpenLPService } from '../../../openlp.service'; import { OpenLPService } from '../../../openlp.service';
import { HotKeysService } from '../../../hotkeys.service';
@Component({ @Component({
selector: 'openlp-slide-list', selector: 'openlp-slide-list',
@ -15,9 +16,13 @@ export class SlideListComponent implements OnInit, OnDestroy {
@Output() slideSelected = new EventEmitter<SlideListItem>(); @Output() slideSelected = new EventEmitter<SlideListItem>();
_subscription: Subscription; _subscription: Subscription;
loading = false; 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() { ngOnInit() {
@ -34,13 +39,25 @@ export class SlideListComponent implements OnInit, OnDestroy {
fetchSlides() { fetchSlides() {
this.loading = true; this.loading = true;
this.openlpService.getServiceItem().subscribe(serviceItem => { this.openlpService.getServiceItem().subscribe({
next: (serviceItem) => {
this.loading = false; this.loading = false;
if (serviceItem instanceof Array) { if (serviceItem instanceof Array) {
this.slides = serviceItem; this.slides = serviceItem;
} }
else { else {
this.slides = serviceItem.slides; 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;
}
} }
}); });
} }

View File

@ -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
});
}
} }