2022-12-21 16:27:47 +00:00
|
|
|
import { Component, OnInit } from '@angular/core';
|
2021-01-03 18:05:10 +00:00
|
|
|
import { MatDialog } from '@angular/material/dialog';
|
2022-12-21 16:27:47 +00:00
|
|
|
import { MatBottomSheet } from '@angular/material/bottom-sheet';
|
2019-11-07 18:02:26 +00:00
|
|
|
|
2024-04-11 18:04:54 +00:00
|
|
|
import { TranslateService } from '@ngx-translate/core';
|
|
|
|
|
2024-04-08 14:32:29 +00:00
|
|
|
import { State, Display, DisplayMode } from './responses';
|
2022-11-14 16:17:51 +00:00
|
|
|
import { OpenLPService, WebSocketStatus } from './openlp.service';
|
2022-02-10 22:16:36 +00:00
|
|
|
import { WindowRef } from './window-ref.service';
|
2019-11-07 18:02:26 +00:00
|
|
|
import { PageTitleService } from './page-title.service';
|
2019-10-08 05:43:49 +00:00
|
|
|
import { LoginComponent } from './components/login/login.component';
|
2022-11-14 16:17:51 +00:00
|
|
|
import { fromEvent } from 'rxjs';
|
|
|
|
import { debounceTime } from 'rxjs/operators';
|
2022-12-21 16:27:47 +00:00
|
|
|
import { DisplayModeSelectorComponent } from './components/display-mode-selector/display-mode-selector.component';
|
2024-04-02 04:54:12 +00:00
|
|
|
import { Shortcuts, ShortcutsService } from './shortcuts.service';
|
|
|
|
import { ShortcutPipe } from './components/shortcuts/shortcut.pipe';
|
2023-02-09 18:31:24 +00:00
|
|
|
import { SettingsService } from './settings.service';
|
2024-03-06 05:30:08 +00:00
|
|
|
import * as supportedBrowsers from '../assets/supportedBrowsers';
|
2018-08-07 11:51:51 +00:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'app-root',
|
|
|
|
templateUrl: './app.component.html',
|
2018-08-19 20:37:53 +00:00
|
|
|
styleUrls: ['./app.component.scss']
|
2018-08-07 11:51:51 +00:00
|
|
|
})
|
2019-10-08 05:43:49 +00:00
|
|
|
export class AppComponent implements OnInit {
|
2022-12-21 16:27:47 +00:00
|
|
|
// Make DisplayMode enum visible to html code
|
|
|
|
DisplayMode = DisplayMode;
|
|
|
|
|
2019-10-08 05:43:49 +00:00
|
|
|
state = new State();
|
|
|
|
showLogin = false;
|
2019-11-07 18:02:26 +00:00
|
|
|
pageTitle = 'OpenLP Remote';
|
2022-02-10 22:16:36 +00:00
|
|
|
appVersion = '0.0';
|
2022-11-14 16:17:51 +00:00
|
|
|
webSocketOpen = false;
|
2023-02-09 18:31:24 +00:00
|
|
|
fastSwitching = false;
|
2024-04-08 14:32:29 +00:00
|
|
|
bigDisplayButtons = false;
|
2024-04-02 04:54:12 +00:00
|
|
|
useShortcutsFromOpenlp = false;
|
2024-04-11 18:04:54 +00:00
|
|
|
useLanguageFromOpenlp = false;
|
2018-08-19 20:37:53 +00:00
|
|
|
|
2024-04-11 18:04:54 +00:00
|
|
|
constructor(private translateService: TranslateService, private pageTitleService: PageTitleService,
|
|
|
|
private openlpService: OpenLPService, private dialog: MatDialog, private bottomSheet: MatBottomSheet,
|
|
|
|
private windowRef: WindowRef, private shortcutsService: ShortcutsService, private settingsService: SettingsService) {
|
|
|
|
this.pageTitleService.pageTitleChanged$.subscribe(pageTitle => this.pageTitle = pageTitle.toUpperCase());
|
2024-04-02 04:54:12 +00:00
|
|
|
this.openlpService.stateChanged$.subscribe(item => this.state = item);
|
|
|
|
this.openlpService.webSocketStateChanged$.subscribe(status => this.webSocketOpen = status === WebSocketStatus.Open);
|
|
|
|
this.shortcutsService.shortcutsChanged$.subscribe(shortcuts => this.addShortcuts(shortcuts));
|
|
|
|
this.appVersion = this.windowRef.nativeWindow.appVersion || '0.0';
|
2024-04-11 18:04:54 +00:00
|
|
|
|
|
|
|
// This language will be used as a fallback when a translation isn't found in the current language
|
|
|
|
this.translateService.setDefaultLang('en');
|
|
|
|
|
2022-11-14 16:17:51 +00:00
|
|
|
this.webSocketOpen = openlpService.webSocketStatus === WebSocketStatus.Open;
|
|
|
|
// Try to force websocket reconnection as user is now focused on window and will try to interact soon
|
|
|
|
// Adding a debounce to avoid event flooding
|
|
|
|
fromEvent(window, 'focus')
|
|
|
|
.pipe(debounceTime(300))
|
|
|
|
.subscribe(() => this.forceWebSocketReconnection());
|
2018-08-19 20:37:53 +00:00
|
|
|
}
|
2019-10-06 00:28:36 +00:00
|
|
|
|
2019-10-08 05:43:49 +00:00
|
|
|
ngOnInit(): void {
|
2024-03-06 05:30:08 +00:00
|
|
|
if (!(supportedBrowsers.test(navigator.userAgent))) {
|
|
|
|
window.location.replace("/assets/notsupported.html");
|
|
|
|
}
|
2024-04-02 04:54:12 +00:00
|
|
|
this.openlpService.retrieveSystemInformation().subscribe(res => {
|
|
|
|
this.showLogin = res.login_required
|
2024-04-11 18:04:54 +00:00
|
|
|
this.useLanguageFromOpenlp = this.openlpService.assertApiVersionMinimum(2, 5)
|
|
|
|
if (this.useLanguageFromOpenlp) {
|
|
|
|
this.openlpService.getLanguage().subscribe(res => {
|
|
|
|
this.translateService.use(res.language);
|
|
|
|
});
|
|
|
|
}
|
2024-04-02 04:54:12 +00:00
|
|
|
this.useShortcutsFromOpenlp = this.openlpService.assertApiVersionMinimum(2, 5)
|
|
|
|
this.shortcutsService.getShortcuts(this.useShortcutsFromOpenlp);
|
|
|
|
}
|
|
|
|
);
|
2023-02-09 18:31:24 +00:00
|
|
|
this.fastSwitching = this.settingsService.get('fastSwitching');
|
|
|
|
this.settingsService.onPropertyChanged('fastSwitching').subscribe(value => this.fastSwitching = value);
|
2024-04-08 14:32:29 +00:00
|
|
|
this.bigDisplayButtons = this.settingsService.get('bigDisplayButtons');
|
|
|
|
this.settingsService.onPropertyChanged('bigDisplayButtons').subscribe(value => this.bigDisplayButtons = value);
|
2023-02-07 16:05:38 +00:00
|
|
|
}
|
|
|
|
|
2024-04-02 04:54:12 +00:00
|
|
|
addShortcuts(shortcuts: Shortcuts): void {
|
|
|
|
const shortcutPipe = new ShortcutPipe();
|
|
|
|
shortcuts.previousSlide.forEach((key) => {
|
|
|
|
this.shortcutsService.addShortcut({ keys: shortcutPipe.transform(key) }).subscribe(() =>
|
|
|
|
this.previousSlide()
|
|
|
|
)
|
|
|
|
});
|
|
|
|
shortcuts.nextSlide.forEach((key) => {
|
|
|
|
this.shortcutsService.addShortcut({ keys: shortcutPipe.transform(key) }).subscribe(() =>
|
|
|
|
this.nextSlide()
|
|
|
|
)
|
|
|
|
});
|
|
|
|
shortcuts.previousItem.forEach((key) => {
|
|
|
|
this.shortcutsService.addShortcut({ keys: shortcutPipe.transform(key) }).subscribe(() =>
|
|
|
|
this.previousItem()
|
|
|
|
)
|
|
|
|
});
|
|
|
|
shortcuts.nextItem.forEach((key) => {
|
|
|
|
this.shortcutsService.addShortcut({ keys: shortcutPipe.transform(key) }).subscribe(() =>
|
|
|
|
this.nextItem()
|
|
|
|
)
|
|
|
|
});
|
|
|
|
shortcuts.showDisplay.forEach((key) => {
|
|
|
|
this.shortcutsService.addShortcut({ keys: shortcutPipe.transform(key) }).subscribe(() => {
|
2023-02-07 19:20:01 +00:00
|
|
|
if (this.state.displayMode !== DisplayMode.Presentation) {
|
2023-02-07 16:05:38 +00:00
|
|
|
this.showDisplay();
|
|
|
|
}
|
2024-04-02 04:54:12 +00:00
|
|
|
})
|
|
|
|
});
|
|
|
|
shortcuts.themeDisplay.forEach((key) => {
|
|
|
|
this.shortcutsService.addShortcut({ keys: shortcutPipe.transform(key) }).subscribe(() =>
|
|
|
|
this.state.displayMode === DisplayMode.Theme ? this.showDisplay() : this.themeDisplay()
|
|
|
|
)
|
|
|
|
});
|
|
|
|
shortcuts.blankDisplay.forEach((key) => {
|
|
|
|
this.shortcutsService.addShortcut({ keys: shortcutPipe.transform(key) }).subscribe(() =>
|
|
|
|
this.state.displayMode === DisplayMode.Blank ? this.showDisplay() : this.blankDisplay()
|
|
|
|
)
|
|
|
|
});
|
|
|
|
shortcuts.desktopDisplay.forEach((key) => {
|
|
|
|
this.shortcutsService.addShortcut({ keys: shortcutPipe.transform(key) }).subscribe(() =>
|
|
|
|
this.state.displayMode === DisplayMode.Desktop ? this.showDisplay() : this.desktopDisplay()
|
|
|
|
)
|
|
|
|
});
|
2019-10-08 05:43:49 +00:00
|
|
|
}
|
|
|
|
|
2022-12-21 16:27:47 +00:00
|
|
|
openDisplayModeSelector(): void {
|
2024-04-08 14:32:29 +00:00
|
|
|
const display = new Display();
|
|
|
|
display.displayMode = this.state.displayMode;
|
|
|
|
display.bigDisplayButtons = this.bigDisplayButtons;
|
|
|
|
const selectorRef = this.bottomSheet.open(DisplayModeSelectorComponent, {data: display});
|
2022-12-21 16:27:47 +00:00
|
|
|
selectorRef.afterDismissed().subscribe(result => {
|
|
|
|
if (result === DisplayMode.Blank) {this.blankDisplay();}
|
|
|
|
else if (result === DisplayMode.Desktop) {this.desktopDisplay();}
|
|
|
|
else if (result === DisplayMode.Theme) {this.themeDisplay();}
|
|
|
|
else if (result === DisplayMode.Presentation) {this.showDisplay();}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2019-10-08 05:43:49 +00:00
|
|
|
login() {
|
|
|
|
const dialogRef = this.dialog.open(LoginComponent, {
|
|
|
|
width: '250px'
|
|
|
|
});
|
|
|
|
|
|
|
|
dialogRef.afterClosed().subscribe(result => {
|
|
|
|
if (result) {
|
|
|
|
this.showLogin = false;
|
|
|
|
this.openlpService.setAuthToken(result.token);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2018-08-19 20:37:53 +00:00
|
|
|
nextItem() {
|
2019-10-06 00:28:36 +00:00
|
|
|
this.openlpService.nextItem().subscribe();
|
2018-08-19 20:37:53 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
previousItem() {
|
2019-10-06 00:28:36 +00:00
|
|
|
this.openlpService.previousItem().subscribe();
|
2018-08-19 20:37:53 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
nextSlide() {
|
2024-03-25 14:55:48 +00:00
|
|
|
this.openlpService.nextSlide().subscribe();
|
2018-08-19 20:37:53 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
previousSlide() {
|
2024-03-25 14:55:48 +00:00
|
|
|
this.openlpService.previousSlide().subscribe();
|
2018-08-19 20:37:53 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
blankDisplay() {
|
2019-10-06 00:28:36 +00:00
|
|
|
this.openlpService.blankDisplay().subscribe();
|
2018-08-19 20:37:53 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
themeDisplay() {
|
2019-10-06 00:28:36 +00:00
|
|
|
this.openlpService.themeDisplay().subscribe();
|
2018-08-19 20:37:53 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
desktopDisplay() {
|
2019-10-06 00:28:36 +00:00
|
|
|
this.openlpService.desktopDisplay().subscribe();
|
2018-08-19 20:37:53 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
showDisplay() {
|
2019-10-06 00:28:36 +00:00
|
|
|
this.openlpService.showDisplay().subscribe();
|
2018-08-19 20:37:53 +00:00
|
|
|
}
|
|
|
|
|
2022-11-14 16:17:51 +00:00
|
|
|
forceWebSocketReconnection() {
|
|
|
|
this.openlpService.reconnectWebSocketIfNeeded();
|
|
|
|
}
|
2018-08-07 11:51:51 +00:00
|
|
|
}
|