mirror of
https://gitlab.com/openlp/web-remote.git
synced 2024-12-22 11:32:47 +00:00
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:
commit
b0a8dd2b27
@ -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 {
|
||||||
|
42
src/app/hotkeys.service.ts
Normal file
42
src/app/hotkeys.service.ts
Normal 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();
|
||||||
|
};
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user