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

This commit is contained in:
Chris Witterholt 2024-03-25 14:55:48 +00:00 committed by Raoul Snyman
parent 2346fdc62a
commit b92175d024
5 changed files with 705 additions and 671 deletions

View File

@ -24,16 +24,16 @@
"supportedBrowsers": "(echo module.exports = && browserslist-useragent-regexp --allowHigherVersions) > src/assets/supportedBrowsers.js" "supportedBrowsers": "(echo module.exports = && browserslist-useragent-regexp --allowHigherVersions) > src/assets/supportedBrowsers.js"
}, },
"dependencies": { "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", "@fontsource/roboto": "^5.0.8",
"core-js": "^3.35.1", "core-js": "^3.35.1",
"hammerjs": "^2.0.8", "hammerjs": "^2.0.8",
@ -42,15 +42,15 @@
"zone.js": "^0.14.3" "zone.js": "^0.14.3"
}, },
"devDependencies": { "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", "@chiragrupani/karma-chromium-edge-launcher": "^2.3.1",
"@types/jasmine": "~5.1.4", "@types/jasmine": "~5.1.4",
"@types/jasminewd2": "~2.0.13", "@types/jasminewd2": "~2.0.13",

View File

@ -124,15 +124,11 @@ 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,7 +3,6 @@ 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',
@ -16,10 +15,8 @@ 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, private hotKeysService: HotKeysService) { constructor(private openlpService: OpenLPService) {
this._subscription = openlpService.stateChanged$.subscribe(() => this._subscription = openlpService.stateChanged$.subscribe(() =>
this.fetchSlides() this.fetchSlides()
); );
@ -44,27 +41,25 @@ export class SlideListComponent implements OnInit, OnDestroy {
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: () => { 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 { export interface SlideListItem {
slide: Slide; slide: Slide;
index: number; index: number;
} }

View File

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

1298
yarn.lock

File diff suppressed because it is too large Load Diff