Merge branch 'fixes_for_main' into 'master'

Make live use correct websocket

See merge request openlp/web-remote!14
This commit is contained in:
Raoul Snyman 2020-04-09 06:49:56 +00:00
commit 92dae6b050
7 changed files with 2471 additions and 2183 deletions

View File

@ -12,7 +12,7 @@ export class MainViewComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.updateImage(); this.updateImage();
this.openlpService.stateChanged$.subscribe(item => this.updateImage()); this.openlpService.liveChanged$.subscribe(item => this.updateImage());
} }
updateImage(): void { updateImage(): void {

View File

@ -36,6 +36,7 @@ const httpOptions = {
export class OpenLPService { export class OpenLPService {
private apiURL: string; private apiURL: string;
public stateChanged$: EventEmitter<State>; public stateChanged$: EventEmitter<State>;
public liveChanged$: EventEmitter<State>;
constructor(private http: HttpClient) { constructor(private http: HttpClient) {
const host = window.location.hostname; const host = window.location.hostname;
@ -60,6 +61,18 @@ export class OpenLPService {
reader.readAsText(event.data); reader.readAsText(event.data);
}; };
}); });
this.liveChanged$ = new EventEmitter<State>();
this.retrieveSystemInformation().subscribe(info => {
const ws = new WebSocket(`ws://${host}:${info.websocket_port}/live_changed`);
ws.onmessage = (event) => {
const reader = new FileReader();
reader.onload = () => {
const state = deserialize(JSON.parse(reader.result as string).results, State);
this.liveChanged$.emit(state);
};
reader.readAsText(event.data);
};
});
} }
setAuthToken(token: string): void { setAuthToken(token: string): void {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/loading_old.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

View File

@ -1,5 +1,6 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>OpenLP Remote</title> <title>OpenLP Remote</title>
@ -8,14 +9,15 @@
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico"> <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head> </head>
<body> <body>
<app-root> <app-root>
<div style="margin-top: 80px;"> <div style="margin-top: 80px;">
<div style="margin: auto; width: 100%; display: block;"> <div class="preloader">
<img src="/assets/loading.png" style='height: 100%; width: 100%; object-fit: contain'> <img src="/assets/loading.png" alt="Loading .....">
<p style="text-align: center;">Loading...</p>
</div> </div>
</div> </div>
</app-root> </app-root>
</body> </body>
</html> </html>

View File

@ -16,7 +16,8 @@ body {
font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif; font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif;
} }
html, body { html,
body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -78,3 +79,17 @@ footer {
line-height: normal; line-height: normal;
color: yellow; color: yellow;
} }
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
color: black;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}

4576
yarn.lock

File diff suppressed because it is too large Load Diff