mirror of
https://gitlab.com/openlp/web-remote.git
synced 2024-12-22 11:32:47 +00:00
Make live use correct websocket
This commit is contained in:
Tim Bentley
parent
8de783b87f
commit
cf6da25539
@ -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 {
|
||||||
|
|||||||
@ -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
BIN
src/assets/loading_old.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
@ -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>
|
||||||
@ -16,13 +16,14 @@ 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
mat-sidenav-layout {
|
mat-sidenav-layout {
|
||||||
background: rgba(0,0,0,0.03);
|
background: rgba(0, 0, 0, 0.03);
|
||||||
}
|
}
|
||||||
|
|
||||||
mat-sidenav {
|
mat-sidenav {
|
||||||
@ -58,23 +59,37 @@ footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.chordline {
|
.chordline {
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chordline1 {
|
.chordline1 {
|
||||||
line-height: 1.0
|
line-height: 1.0
|
||||||
}
|
}
|
||||||
|
|
||||||
.chordline span.chord span {
|
.chordline span.chord span {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chordline span.chord span strong {
|
.chordline span.chord span strong {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -2.1rem;
|
top: -2.1rem;
|
||||||
left: 0;
|
left: 0;
|
||||||
font-size: 30pt;
|
font-size: 30pt;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
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;
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user