openlp/web-remote
1
0
Fork 0
mirror of https://gitlab.com/openlp/web-remote.git synced 2024-12-22 11:32:47 +00:00
Code Issues Projects Releases Wiki Activity

Use auto scroll when moving to next or previous slide.

Browse Source
This commit is contained in:
Chris Witterholt 2023-03-04 01:34:44 +00:00 committed by Mateus Meyer Jiacomelli
parent 0e9567fc76
commit 911966ae1f
3 changed files with 39 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/app.component.ts
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() {

35
src/app/components/slides/slide-list/slide-list.component.ts
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({
this.loading = false; next: (serviceItem) => {
if (serviceItem instanceof Array) { this.loading = false;
this.slides = serviceItem; if (serviceItem instanceof Array) {
} this.slides = serviceItem;
else { }
this.slides = serviceItem.slides; 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;
}
} }
}); });
} }

7
src/app/hotkeys.service.ts
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
});
}
} }