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() {
this.updateImage();
this.openlpService.stateChanged$.subscribe(item => this.updateImage());
this.openlpService.liveChanged$.subscribe(item => this.updateImage());
}
updateImage(): void {

View File

@ -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

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>
<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>

View File

@ -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;
}

4576
yarn.lock

File diff suppressed because it is too large Load Diff