mirror of https://gitlab.com/openlp/web-remote.git
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() {
|
||||
this.updateImage();
|
||||
this.openlpService.stateChanged$.subscribe(item => this.updateImage());
|
||||
this.openlpService.liveChanged$.subscribe(item => this.updateImage());
|
||||
}
|
||||
|
||||
updateImage(): void {
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ const httpOptions = {
|
|||
export class OpenLPService {
|
||||
private apiURL: string;
|
||||
public stateChanged$: EventEmitter<State>;
|
||||
public liveChanged$: EventEmitter<State>;
|
||||
|
||||
constructor(private http: HttpClient) {
|
||||
const host = window.location.hostname;
|
||||
|
|
@ -60,6 +61,18 @@ export class OpenLPService {
|
|||
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 {
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
|
|
@ -1,5 +1,6 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OpenLP Remote</title>
|
||||
|
|
@ -8,14 +9,15 @@
|
|||
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<app-root>
|
||||
<div style="margin-top: 80px;">
|
||||
<div style="margin: auto; width: 100%; display: block;">
|
||||
<img src="/assets/loading.png" style='height: 100%; width: 100%; object-fit: contain'>
|
||||
<p style="text-align: center;">Loading...</p>
|
||||
<div class="preloader">
|
||||
<img src="/assets/loading.png" alt="Loading .....">
|
||||
</div>
|
||||
</div>
|
||||
</app-root>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -16,13 +16,14 @@ body {
|
|||
font: 500 20px/32px Roboto, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
mat-sidenav-layout {
|
||||
background: rgba(0,0,0,0.03);
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
mat-sidenav {
|
||||
|
|
@ -58,23 +59,37 @@ footer {
|
|||
}
|
||||
|
||||
.chordline {
|
||||
line-height: 1.8;
|
||||
}
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.chordline1 {
|
||||
line-height: 1.0
|
||||
}
|
||||
.chordline1 {
|
||||
line-height: 1.0
|
||||
}
|
||||
|
||||
.chordline span.chord span {
|
||||
position: relative;
|
||||
}
|
||||
.chordline span.chord span {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chordline span.chord span strong {
|
||||
position: absolute;
|
||||
top: -2.1rem;
|
||||
left: 0;
|
||||
font-size: 30pt;
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
color: yellow;
|
||||
}
|
||||
.chordline span.chord span strong {
|
||||
position: absolute;
|
||||
top: -2.1rem;
|
||||
left: 0;
|
||||
font-size: 30pt;
|
||||
font-weight: normal;
|
||||
line-height: normal;
|
||||
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