Merge branch 'scroll-to-active-slide' into 'master'

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

See merge request openlp/web-remote!82
This commit is contained in:
Raoul Snyman 2024-03-25 14:55:49 +00:00
commit ed9db1d295
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"
},
"dependencies": {
"@angular/animations": "^17.2.1",
"@angular/cdk": "^17.2.1",
"@angular/common": "^17.2.1",
"@angular/compiler": "^17.2.1",
"@angular/core": "^17.2.1",
"@angular/forms": "^17.2.1",
"@angular/material": "^17.2.1",
"@angular/platform-browser": "^17.2.1",
"@angular/platform-browser-dynamic": "^17.2.1",
"@angular/router": "^17.2.1",
"@angular/animations": "^17.3.1",
"@angular/cdk": "^17.3.1",
"@angular/common": "^17.3.1",
"@angular/compiler": "^17.3.1",
"@angular/core": "^17.3.1",
"@angular/forms": "^17.3.1",
"@angular/material": "^17.3.1",
"@angular/platform-browser": "^17.3.1",
"@angular/platform-browser-dynamic": "^17.3.1",
"@angular/router": "^17.3.1",
"@fontsource/roboto": "^5.0.8",
"core-js": "^3.35.1",
"hammerjs": "^2.0.8",
@ -42,15 +42,15 @@
"zone.js": "^0.14.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.2.1",
"@angular-eslint/builder": "^17.2.1",
"@angular-eslint/eslint-plugin": "^17.2.1",
"@angular-eslint/eslint-plugin-template": "^17.2.1",
"@angular-eslint/schematics": "^17.2.1",
"@angular-eslint/template-parser": "^17.2.1",
"@angular/cli": "~17.2.1",
"@angular/compiler-cli": "^17.2.1",
"@angular/language-service": "^17.2.1",
"@angular-devkit/build-angular": "^17.3.1",
"@angular-eslint/builder": "^17.3.0",
"@angular-eslint/eslint-plugin": "^17.3.0",
"@angular-eslint/eslint-plugin-template": "^17.3.0",
"@angular-eslint/schematics": "^17.3.0",
"@angular-eslint/template-parser": "^17.3.0",
"@angular/cli": "~17.3.1",
"@angular/compiler-cli": "^17.3.1",
"@angular/language-service": "^17.3.1",
"@chiragrupani/karma-chromium-edge-launcher": "^2.3.1",
"@types/jasmine": "~5.1.4",
"@types/jasminewd2": "~2.0.13",

View File

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

View File

@ -3,7 +3,6 @@ import { Subscription } from 'rxjs';
import { Slide } from '../../../responses';
import { OpenLPService } from '../../../openlp.service';
import { HotKeysService } from '../../../hotkeys.service';
@Component({
selector: 'openlp-slide-list',
@ -16,10 +15,8 @@ export class SlideListComponent implements OnInit, OnDestroy {
@Output() slideSelected = new EventEmitter<SlideListItem>();
_subscription: Subscription;
loading = false;
previousServiceItemId: string;
isServiceItemChanged: boolean;
constructor(private openlpService: OpenLPService, private hotKeysService: HotKeysService) {
constructor(private openlpService: OpenLPService) {
this._subscription = openlpService.stateChanged$.subscribe(() =>
this.fetchSlides()
);
@ -44,21 +41,20 @@ export class SlideListComponent implements OnInit, OnDestroy {
this.loading = false;
if (serviceItem instanceof Array) {
this.slides = serviceItem;
}
else {
} 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;
setTimeout(() => this.scrollToCurrentItem(), 25);
}
});
}
scrollToCurrentItem() {
document.querySelectorAll('openlp-slide-item .selected')[0]?.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
}
}
@ -67,4 +63,3 @@ export interface SlideListItem {
slide: Slide;
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