refactor

.gitignore

 !.vscode/launch.json
 !.vscode/extensions.json
 .history/*
-
+dist/*
 # Miscellaneous
 /.angular/cache
 .sass-cache/

angular.json

               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
+                  "maximumWarning": "1mb",
                   "maximumError": "1mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "1mb",
+                  "maximumError": "1mb"
                 }
               ],
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
-              "optimization": false,
+              "buildOptimizer": true,
+              "optimization": true,
               "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,

package.json

     "@asymmetrik/ngx-leaflet": "^16.0.1",
     "@asymmetrik/ngx-leaflet-markercluster": "^16.0.0",
     "leaflet": "^1.9.4",
+    "rtsp-relay": "^1.8.0",
     "rxjs": "~7.8.0",
     "rxjs-websockets": "^9.0.0",
     "tslib": "^2.3.0",

src/app/modules/overview/camera-stream/camera-stream.component.ts

 export class CameraStreamComponent implements OnInit, AfterViewInit{
   player?: Player;
 
-  @ViewChild('videoPlayer')
-  videoPlayer?: ElementRef<HTMLCanvasElement>;
+  // @ViewChild('videoPlayer')
+  // videoPlayer?: ElementRef<HTMLCanvasElement>;
 
   ngOnInit() {
   }

src/app/modules/overview/map/map.component.ts

   ngOnInit() {
     this.statusSubscription = this.socketService$.status$.subscribe(isConnected => {
       if (isConnected) {
+        let str = {id: '0', type: 'get'};
+        this.socketService$.sendMessage(str);
         this.messageSubscription = this.socketService$.messages$.subscribe(message => {
           this.onMessage(message);
         });
 
   updateIcons(): void {
     this.map.eachLayer((layer:any) => {
-      if (layer instanceof L.Marker) {
+      if (layer instanceof L.Marker as any) {
         this.map.removeLayer(layer);
       }
     });

src/app/modules/overview/overall-ground/overall-ground.component.html

             <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
           </a>
         </div>
-        <ng-template [ngIf]="Sstate1 && Sstate2">
+        <ng-template *ngIf="Sstate1 && Sstate2">
           <div class="alarm-text"
                [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>VIBRATION ALERT</div>
         </ng-template>
             <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
           </a>
         </div>
-        <ng-template [ngIf]="Sstate1 && Sstate2">
+        <ng-template *ngIf="Sstate1 && Sstate2">
           <div class="alarm-text"
                [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>SMOKE ALERT</div>
         </ng-template>

src/app/modules/overview/overall-ground/overall-ground.component.ts

     // this.socketService$.connect();
     this.statusSubscription = this.socketService$.status$.subscribe(isConnected => {
       this.isConnected = isConnected;
+      this.getReadings();
       if (this.isConnected) {
-        this.intervalId = setInterval(() => this.getReadings(), 2000);
+        this.intervalId = setInterval(() => this.getReadings(), 5000);
         this.messageSubscription = this.socketService$.messages$.subscribe(message => {
           this.onMessage(message);
         });
       this.state4 = message.state4 === '1' ? 'ON' : 'OFF';
       this.state5 = message.state5 === '1' ? 'ON' : 'OFF';
       this.state6 = message.state6 === '1' ? 'ON' : 'OFF';
+      this.Sstate1 = this.state5 === 'ON';
+      this.Sstate2 = this.state6 === 'ON';
     }
-    this.Sstate1 = this.state5 === 'ON';
-    this.Sstate2 = this.state6 === 'ON';
     if(this.Sstate1 && this.Sstate2)
       this.title = 'ALARM: VIBRATION ALERT'