Merge pull request #4545 from tsiegleauq/projector-offline-indicator

Add offline indicator to projector

client/src/app/core/core-services/offline.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { WebsocketService } from './websocket.service';
 
 /**
  * This service handles everything connected with being offline.
@@ -18,7 +19,16 @@ export class OfflineService {
 
     /**
      */
-    public constructor() {}
+    public constructor(private socketService: WebsocketService) {}
+
+    /**
+     * Determines of you are either in Offline mode or not connected via websocket
+     *
+     * @returns whether the client is offline or not connected
+     */
+    public isOffline(): boolean {
+        return this.offline || !this.socketService.isConnected;
+    }
 
     /**
      * Sets the offline flag. Restores the DataStoreService to the last known configuration.

client/src/app/shared/components/projector/projector.component.html

@@ -1,5 +1,10 @@
 <div id="container" [osResized]="resizeSubject" [ngStyle]="containerStyle" #container>
     <div id="projector" [ngStyle]="projectorStyle">
+        <div id="offline-indicator" *ngIf="isOffline()">
+            <mat-icon>
+                fiber_manual_record
+            </mat-icon>
+        </div>
         <div id="header" [ngStyle]="headerFooterStyle" *ngIf="projector && projector.show_header_footer">
             <!-- projector logo -->
             <img *ngIf="enableLogo && projectorLogo" src="{{ projectorLogo }}" class="projector-logo-main" />
@@ -16,7 +21,12 @@
         </div>
 
         <div *ngFor="let slide of slides">
-            <os-slide-container [slideData]="slide" [scroll]="scroll" [scale]="scale" [projector]="projector"></os-slide-container>
+            <os-slide-container
+                [slideData]="slide"
+                [scroll]="scroll"
+                [scale]="scale"
+                [projector]="projector"
+            ></os-slide-container>
         </div>
 
         <div id="footer" [ngStyle]="headerFooterStyle" *ngIf="projector && projector.show_header_footer">

client/src/app/shared/components/projector/projector.component.scss

@@ -8,6 +8,17 @@
     background-color: lightgoldenrodyellow;
     position: relative;
 
+    #offline-indicator {
+        top: 5;
+        right: 0;
+        color: red;
+        position: absolute;
+        z-index: 100;
+        .mat-icon {
+            font-size: 14pt;
+        }
+    }
+
     #projector {
         position: absolute;
         top: 0;

client/src/app/shared/components/projector/projector.component.ts

@@ -8,6 +8,7 @@ import { BaseComponent } from 'app/base.component';
 import { ConfigService } from 'app/core/ui-services/config.service';
 import { ViewProjector } from 'app/site/projector/models/view-projector';
 import { Size } from 'app/site/projector/size';
+import { OfflineService } from 'app/core/core-services/offline.service';
 import { SlideData, ProjectorDataService } from 'app/core/core-services/projector-data.service';
 import { ProjectorRepositoryService } from 'app/core/repositories/projector/projector-repository.service';
 
@@ -160,7 +161,8 @@ export class ProjectorComponent extends BaseComponent implements OnDestroy {
         translate: TranslateService,
         private projectorDataService: ProjectorDataService,
         private projectorRepository: ProjectorRepositoryService,
-        private configService: ConfigService
+        private configService: ConfigService,
+        private offlineService: OfflineService
     ) {
         super(titleService, translate);
         // projector logo / background-image
@@ -192,6 +194,15 @@ export class ProjectorComponent extends BaseComponent implements OnDestroy {
         });
     }
 
+    /**
+     * determine if the server is offline
+     *
+     * @returns whether the client is offlien
+     */
+    public isOffline(): boolean {
+        return this.offlineService.isOffline();
+    }
+
     /**
      * Scales the projector to the right format.
      */