Merge branch 'issue-33-missing-hotkeys' into 'master'

Issue 33: Shortcut keys (hotkeys) in Web Remote

See merge request openlp/web-remote!51
This commit is contained in:
Raoul Snyman 2023-02-07 18:10:14 +00:00
commit b0a8dd2b27
2 changed files with 83 additions and 1 deletions

View File

@ -11,6 +11,7 @@ import { LoginComponent } from './components/login/login.component';
import { fromEvent } from 'rxjs'; import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators'; import { debounceTime } from 'rxjs/operators';
import { DisplayModeSelectorComponent } from './components/display-mode-selector/display-mode-selector.component'; import { DisplayModeSelectorComponent } from './components/display-mode-selector/display-mode-selector.component';
import { HotKeysService } from './hotkeys.service';
// import { version } from '../../package.json'; // import { version } from '../../package.json';
@Component({ @Component({
@ -30,7 +31,8 @@ export class AppComponent implements OnInit {
webSocketOpen = false; webSocketOpen = false;
constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService, constructor(private pageTitleService: PageTitleService, private openlpService: OpenLPService,
private dialog: MatDialog, private bottomSheet: MatBottomSheet, private windowRef: WindowRef) { private dialog: MatDialog, private bottomSheet: MatBottomSheet, private windowRef: WindowRef,
private hotKeysService: HotKeysService) {
pageTitleService.pageTitleChanged$.subscribe(pageTitle => this.pageTitle = pageTitle); pageTitleService.pageTitleChanged$.subscribe(pageTitle => this.pageTitle = pageTitle);
openlpService.stateChanged$.subscribe(item => this.state = item); openlpService.stateChanged$.subscribe(item => this.state = item);
openlpService.webSocketStateChanged$.subscribe(status => this.webSocketOpen = status === WebSocketStatus.Open); openlpService.webSocketStateChanged$.subscribe(status => this.webSocketOpen = status === WebSocketStatus.Open);
@ -45,6 +47,44 @@ export class AppComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
this.openlpService.retrieveSystemInformation().subscribe(res => this.showLogin = res.login_required); this.openlpService.retrieveSystemInformation().subscribe(res => this.showLogin = res.login_required);
this.addHotKeys();
}
addHotKeys(): void {
this.hotKeysService.addShortcut({ keys: 'ArrowUp' }).subscribe(_ =>
this.previousSlide()
);
this.hotKeysService.addShortcut({ keys: 'ArrowDown' }).subscribe(_ =>
this.nextSlide()
);
this.hotKeysService.addShortcut({ keys: 'PageUp' }).subscribe(_ =>
this.previousSlide()
);
this.hotKeysService.addShortcut({ keys: 'PageDown' }).subscribe(_ =>
this.nextSlide()
);
this.hotKeysService.addShortcut({ keys: 'ArrowLeft' }).subscribe(_ =>
this.previousItem()
);
this.hotKeysService.addShortcut({ keys: 'ArrowRight' }).subscribe(_ =>
this.nextItem()
);
this.hotKeysService.addShortcut({ keys: 'Space' }).subscribe(_ =>
{
if (this.state.displayMode != DisplayMode.Presentation) {
this.showDisplay();
}
}
);
this.hotKeysService.addShortcut({ keys: 't' }).subscribe(_ =>
this.state.displayMode == DisplayMode.Theme ? this.showDisplay() : this.themeDisplay()
);
this.hotKeysService.addShortcut({ keys: 'code.Period' }).subscribe(_ =>
this.state.displayMode == DisplayMode.Blank ? this.showDisplay() : this.blankDisplay()
);
this.hotKeysService.addShortcut({ keys: 'd' }).subscribe(_ =>
this.state.displayMode == DisplayMode.Desktop ? this.showDisplay() : this.desktopDisplay()
);
} }
get fastSwitching(): boolean { get fastSwitching(): boolean {

View File

@ -0,0 +1,42 @@
import { DOCUMENT } from "@angular/common";
import { Inject, Injectable } from "@angular/core";
import { EventManager } from "@angular/platform-browser";
import { Observable } from "rxjs";
type Options = {
element: any;
keys: string;
}
@Injectable({ providedIn: 'root' })
export class HotKeysService {
defaults: Partial<Options> = {
element: this.document
}
constructor(private eventManager: EventManager, @Inject(DOCUMENT) private document: Document) {
}
addShortcut(options: Partial<Options>) {
const merged = { ...this.defaults, ...options };
const event = `keydown.${merged.keys}`;
return new Observable(observer => {
const handler = (e: KeyboardEvent) => {
if (document.URL.endsWith('/slides'))
{
e.preventDefault()
observer.next(e);
}
};
const dispose = this.eventManager.addEventListener(
merged.element, event, handler
);
return () => {
dispose();
};
})
}
}