Merge branch 'fixes_for_main' into 'master'

Make live use correct websocket See merge request openlp/web-remote!14
2024-12-22 11:32:47 +00:00 · 2020-04-09 06:49:56 +00:00 · 2020-04-09 06:49:56 +00:00 · 92dae6b050
commit 92dae6b050
parent 8de783b87f cf6da25539
7 changed files with 2471 additions and 2183 deletions
--- a/src/app/components/main-view/main-view.component.ts
+++ b/src/app/components/main-view/main-view.component.ts
@ -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 {
--- a/src/app/openlp.service.ts
+++ b/src/app/openlp.service.ts
@ -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 {
--- a/src/assets/loading.png
+++ b/src/assets/loading.png
--- a/src/assets/loading_old.png
+++ b/src/assets/loading_old.png
--- a/src/index.html
+++ b/src/index.html
@ -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>
--- a/src/styles.scss
+++ b/src/styles.scss
@ -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 {
@ -59,17 +60,17 @@ footer {

 .chordline {
  line-height: 1.8;
-  }
+}

-  .chordline1 {
+.chordline1 {
  line-height: 1.0
-  }
+}

-  .chordline span.chord span {
+.chordline span.chord span {
  position: relative;
-  }
+}

-  .chordline span.chord span strong {
+.chordline span.chord span strong {
  position: absolute;
  top: -2.1rem;
  left: 0;
@ -77,4 +78,18 @@ footer {
  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;
+}
--- a/yarn.lock
+++ b/yarn.lock