Widget improvements, new page to display active entities (next step w…

…ill be interactions with active entities)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucr-tool",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

server/app.js

@@ -3,7 +3,8 @@ import cookieParser from 'cookie-parser';
 import logger from 'morgan';
 import multer from 'multer';
 import JSZip from 'jszip';
-import got from 'got'
+import got from 'got';
+import {pipeline as streamPipeline} from 'node:stream/promises';
 import {rimraf} from 'rimraf';
 
 import path from 'path';
@@ -953,6 +954,21 @@ app.put('/api/remote/:address/entities/:entity_id/command', async (req, res, nex
   }
 })
 
+app.get('/api/proxy',  async (req, res) => {
+  const options = {
+    // prefixUrl: req.query.url,
+    isStream: true,
+    throwHttpErrors: false
+  };
+  console.log("Proxy get", decodeURI(req.query.url), options);
+
+  await streamPipeline(
+    got.get(encodeURI(decodeURI(req.query.url)), options),
+    res
+  );
+  res.end();
+});
+
 app.post('/upload',upload.single('file'),(req,res)=>{
   console.log(req.file, req.body.name);
   res.status(200).json(req.file.filename)
@@ -1117,7 +1133,7 @@ app.delete('/api/uploaded_files/:filename', (req, res, next) => {
 //   });
 // })
 
-app.all('*', function (req, res) {
+app.all('*', function (req, res, next) {
   res.status(200).sendFile(`/`, {root: 'public/browser'});
 });
 

server/package.json

@@ -1,7 +1,7 @@
 {
   "name": "server",
   "type": "module",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "main": "app.js",
   "scripts": {
     "start": "node app.js"
@@ -18,7 +18,7 @@
     "jszip-utils": "^0.1.0",
     "morgan": "~1.9.1",
     "multer": "^1.4.5-lts.1",
-    "nodemon": "^3.1.4",
+    "nodemon": "^3.1.7",
     "open": "^10.1.0",
     "process": "^0.11.10",
     "rimraf": "^6.0.1",

src/app/active-entities/active-entities.component.css

@@ -0,0 +1,14 @@
+.charging-status {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 1.4rem;
+  font-weight: bold;
+  color: #fbf100;
+}
+
+.media-card {
+  border-radius: 20px;
+  border: 2px solid rgba(255, 255, 255, 0.73);
+}

src/app/active-entities/active-entities.component.html

@@ -0,0 +1,87 @@
+<p-menubar [model]="menuItems">
+  <ng-template pTemplate="end">
+    <div class="flex align-items-center gap-2">
+      <p-dropdown [(ngModel)]="selectedRemote" [options]="remotes" placeholder="Select remote" (ngModelChange)="setRemote(selectedRemote!)">
+        <ng-template pTemplate="selectedItem">
+          <ng-container *ngIf="selectedRemote">{{selectedRemote.remote_name}} ({{selectedRemote.address}})</ng-container>
+          <ng-container *ngIf="!selectedRemote">No remote selected</ng-container>
+        </ng-template>
+        <ng-template let-item pTemplate="item">
+          {{item.remote_name}} ({{item.address}})
+        </ng-template>
+      </p-dropdown>
+    </div>
+  </ng-template>
+</p-menubar>
+<div class="flex align-content-center flex-wrap gap-3 column-gap-4" style="width: 100%">
+  <div class="flex align-items-center justify-content-center" *ngIf="remoteState?.batteryInfo?.capacity" style="width: 160px">
+    <div class="flex align-items-center justify-content-center">{{remoteState!.batteryInfo!.capacity!}}%</div>
+    <div style="position: relative; font-size: 4rem">
+      <div class="icon icon-battery" *ngIf="remoteState!.batteryInfo!.capacity!> 30 && remoteState!.batteryInfo!.capacity! < 85"></div>
+      <div class="icon icon-battery-low" *ngIf="remoteState!.batteryInfo!.capacity! <= 30"></div>
+      <div class="icon icon-battery-full" *ngIf="remoteState!.batteryInfo!.capacity! >= 85"></div>
+      <div class="pi pi-bolt charging-status" *ngIf="remoteState!.batteryInfo?.status === 'CHARGING'"></div>
+    </div>
+  </div>
+  <div class="flex align-items-center justify-content-center">
+    <p-tag [value]="(remoteWebsocketService.connectionStatus | async) ? 'Connected' : 'Disconnected'"
+           [severity]="(remoteWebsocketService.connectionStatus  | async) ? 'success' : 'warning'"/>
+  </div>
+</div>
+<div class="flex flex-wrap gap-6">
+  <div class="flex gap-2 align-content-center justify-content-center media-card" style="width: 600px" *ngFor="let mediaEntity of mediaEntities">
+    <div class="flex-column" *ngIf="mediaEntity?.new_state?.attributes?.media_image_url">
+      <div class="flex align-content-center justify-content-center">
+        <h2>{{remoteWebsocketService.getEntityName(mediaEntity)}}</h2>
+      </div>
+      <div class="flex-initial flex align-items-center">
+        <img *ngIf="mediaEntity?.new_state?.attributes?.media_image_url && !mediaEntity?.new_state?.attributes?.media_image_proxy" [src]="mediaEntity.new_state!.attributes!.media_image_url!"
+             [alt]="mediaEntity.new_state!.attributes!.media_title!" width="400" height="300"/>
+        <img *ngIf="mediaEntity?.new_state?.attributes?.media_image_url && mediaEntity?.new_state?.attributes?.media_image_proxy" [src]="'/api/proxy?url='+mediaEntity.new_state!.attributes!.media_image_url!"
+             [alt]="mediaEntity.new_state!.attributes!.media_title!" width="400" height="300"/>
+      </div>
+    </div>
+    <div class="flex flex-column justify-content-between" [style]="'max-width: '+!mediaEntity?.new_state?.attributes?.media_image_url ? '250px' : '600px'">
+      <div class="flex align-content-center justify-content-center" *ngIf="!mediaEntity?.new_state?.attributes?.media_image_url">
+        <h2>{{remoteWebsocketService.getEntityName(mediaEntity)}}</h2>
+      </div>
+      <div class="flex align-items-center justify-content-center" *ngIf="mediaEntity.new_state?.attributes?.state">
+        <p-tag [value]="mediaEntity.new_state!.attributes!.state!" [severity]="getStatusStyle(mediaEntity.new_state!.attributes!.state!)"/>
+      </div>
+      <div class="flex align-items-center justify-content-center" *ngIf="mediaEntity?.new_state?.attributes?.media_title">
+        <app-scrolling-text [text]="mediaEntity.new_state!.attributes!.media_title!"/>
+      </div>
+      <div class="flex align-items-center justify-content-center" *ngIf="mediaEntity?.new_state?.attributes?.media_artist">
+        <app-scrolling-text [text]="mediaEntity.new_state!.attributes!.media_artist!"/>
+      </div>
+      <div class="flex align-items-center justify-content-center" *ngIf="mediaEntity.new_state!.attributes!.media_album!">
+        <app-scrolling-text [text]="mediaEntity.new_state!.attributes!.media_album!"/>
+      </div>
+      <div class="flex flex-column" style="width: 100%">
+        <p-progressBar *ngIf="mediaEntity.new_state?.attributes?.media_position && mediaEntity.new_state?.attributes?.media_duration &&
+                      mediaEntity.new_state!.attributes!.media_duration! > 0"  [style]="{'width': '100%'}" [value]="Math.round(remoteWebsocketService.getMediaPosition(mediaEntity)*100/mediaEntity.new_state!.attributes!.media_duration!)">
+          <ng-template pTemplate="content" let-value>
+            <span>{{formatDuration(remoteWebsocketService.getMediaPosition(mediaEntity))}}</span>
+          </ng-template>
+        </p-progressBar>
+        <div *ngIf="mediaEntity.new_state?.attributes?.media_position" class="flex align-items-center justify-content-center">
+          <b>{{formatDuration(remoteWebsocketService.getMediaPosition(mediaEntity))}}</b>
+        </div>
+      </div>
+      <div class="flex align-items-center justify-content-center" *ngIf="mediaEntity.new_state!.attributes!.source">
+        <p-tag [value]="mediaEntity.new_state!.attributes!.source!" severity="secondary"></p-tag>
+      </div>
+      <div class="flex flex-column" style="width: 100%">
+        <p-progressBar *ngIf="mediaEntity.new_state?.attributes?.volume && mediaEntity.new_state!.attributes!.volume! > 0" [style]="{'width': '100%'}" [value]="Math.round(mediaEntity.new_state!.attributes!.volume!)">
+          <ng-template pTemplate="content" let-value>
+            <span>{{Math.round(mediaEntity.new_state!.attributes!.volume!)}}%</span>
+          </ng-template>
+        </p-progressBar>
+        <div *ngIf="mediaEntity.new_state?.attributes?.volume" class="flex align-items-center justify-content-center">
+          <b>Volume {{Math.round(mediaEntity.new_state!.attributes!.volume!)}}%</b>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+

src/app/active-entities/active-entities.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActiveEntitiesComponent } from './active-entities.component';
+
+describe('ActiveEntitiesComponent', () => {
+  let component: ActiveEntitiesComponent;
+  let fixture: ComponentFixture<ActiveEntitiesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ActiveEntitiesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ActiveEntitiesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/active-entities/active-entities.component.ts

@@ -0,0 +1,101 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {DropdownModule} from "primeng/dropdown";
+import {AsyncPipe, NgForOf, NgIf} from "@angular/common";
+import {MenuItem, PrimeTemplate} from "primeng/api";
+import {ProgressBarModule} from "primeng/progressbar";
+import {ScrollingTextComponent} from "../remote-widget/scrolling-text/scrolling-text.component";
+import {TagModule} from "primeng/tag";
+import {MediaEntityState, RemoteState, RemoteWebsocketService} from "../remote-widget/remote-websocket.service";
+import {ServerService} from "../server.service";
+import {MenubarModule} from "primeng/menubar";
+import {Remote, RemoteData} from "../interfaces";
+import {FormsModule} from "@angular/forms";
+import {Helper} from "../helper";
+
+@Component({
+  selector: 'app-active-entities',
+  standalone: true,
+  imports: [
+    DropdownModule,
+    NgIf,
+    PrimeTemplate,
+    ProgressBarModule,
+    ScrollingTextComponent,
+    TagModule,
+    NgForOf,
+    AsyncPipe,
+    MenubarModule,
+    FormsModule
+  ],
+  templateUrl: './active-entities.component.html',
+  styleUrl: './active-entities.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None
+})
+export class ActiveEntitiesComponent implements OnInit {
+  remoteState: RemoteState | undefined;
+  mediaEntities: MediaEntityState[] = [];
+  protected readonly Math = Math;
+  menuItems: MenuItem[] = [
+    {label: 'Home', routerLink: '/home', icon: 'pi pi-home'},
+  ]
+  selectedRemote: Remote | undefined;
+  remotes: Remote[] | undefined;
+
+  constructor(private server:ServerService, protected remoteWebsocketService: RemoteWebsocketService, private cdr:ChangeDetectorRef) { }
+
+  ngOnInit(): void {
+    const data = localStorage.getItem("remoteData");
+    if (data) {
+      const remoteData: RemoteData = JSON.parse(data);
+      this.server.setEntities(remoteData.entities);
+    }
+    this.server.remote$.subscribe(remote => {
+      this.selectedRemote = remote;
+      this.cdr.detectChanges();
+    })
+    this.remoteWebsocketService.onRemoteStateChange().subscribe(remoteState => {
+      this.remoteState = remoteState;
+      this.cdr.detectChanges();
+    })
+    this.remoteWebsocketService.onMediaStateChange().subscribe(remoteState => {
+      this.mediaEntities = this.remoteWebsocketService.mediaEntities;
+      this.cdr.detectChanges();
+    })
+    this.server.getConfig().subscribe(config => {
+      this.remotes = config.remotes!;
+      this.selectedRemote  = Helper.getSelectedRemote(this.remotes);
+      if (this.selectedRemote) this.server.remote$.next(this.selectedRemote);
+      this.cdr.detectChanges();
+    })
+  }
+
+  getStatusStyle(state: string) {
+    switch(state)
+    {
+      case "UNAVAILABLE":
+      case "UNKNOWN": return "danger";
+      case "ON": return "info";
+      case "OFF": return "secondary";
+      case "PLAYING": return "success";
+      case "PAUSED": return "warning";
+      case "STANDBY": return "secondary";
+      case "BUFFERING":return "success";
+      default: return "secondary";
+    }
+  }
+
+  formatDuration(duration: number): string {
+    const hours = Math.floor(duration / 3600);
+    const minutes = Math.floor((duration - (hours * 3600)) / 60);
+    const seconds = duration - (hours * 3600) - (minutes * 60);
+    return hours.toString().padStart(2, '0') + ':' +
+      minutes.toString().padStart(2, '0') + ':' +
+      seconds.toString().padStart(2, '0');
+  }
+
+  setRemote(remote: Remote) {
+    this.server.remote$.next(remote);
+    this.cdr.detectChanges();
+  }
+}

src/app/activity-sync/activity-sync.component.ts

@@ -462,6 +462,7 @@ export class ActivitySyncComponent implements OnInit {
     this.config = config;
     this.remotes = config.remotes!;
     this.selectedRemote1  = Helper.getSelectedRemote(this.remotes);
+    if (this.selectedRemote1) this.server.remote$.next(this.selectedRemote1);
     this.cdr.detectChanges();
   }
 

src/app/app.routes.ts

@@ -4,6 +4,7 @@ import {RemoteBrowserComponent} from "./remote-browser/remote-browser.component"
 import {ReplaceEntityComponent} from "./replace-entity/replace-entity.component";
 import {IntegrationsComponent} from "./integrations/integrations.component";
 import {ActivitySyncComponent} from "./activity-sync/activity-sync.component";
+import {ActiveEntitiesComponent} from "./active-entities/active-entities.component";
 
 export const routes: Routes = [
   { path: 'home', component: RemoteBrowserComponent },
@@ -14,4 +15,5 @@ export const routes: Routes = [
   { path: 'entity/rename', component: ReplaceEntityComponent},
   { path: 'integrations', component: IntegrationsComponent},
   { path: 'activities/sync', component: ActivitySyncComponent},
+  { path: 'status', component: ActiveEntitiesComponent},
 ];

src/app/integrations/integrations.component.ts

@@ -111,6 +111,7 @@ export class IntegrationsComponent implements OnInit, OnDestroy {
     this.config = config;
     this.remotes = config.remotes!;
     this.selectedRemote  = Helper.getSelectedRemote(this.remotes);
+    if (this.selectedRemote) this.server.remote$.next(this.selectedRemote);
     this.loadRemoteData();
     this.cdr.detectChanges();
   }

src/app/remote-browser/remote-browser.component.html

@@ -1,5 +1,5 @@
 <p-toast></p-toast>
-<app-remote-widget [remote]="selectedRemote"/>
+<app-remote-widget/>
 <h2><img src="assets/logo.png" alt="" style="width:200px"/>&nbsp;&nbsp;Unfolded Circle remote configuration toolkit</h2>
 <p-blockUI [blocked]="blockedMenu"/>
 <div class="progress-spinner" *ngIf="progress">

src/app/remote-browser/remote-browser.component.ts

@@ -143,6 +143,7 @@ export class RemoteBrowserComponent implements OnInit, AfterViewInit {
       ]
     },
     {label: 'Sync activities', routerLink:'/activities/sync', icon: 'pi pi-sync'},
+      {label: 'Remote status', routerLink:'/status', icon: 'pi pi-play'},
   ]
   entityUsages: EntityUsage | null | undefined;
   localMode = true;
@@ -250,6 +251,7 @@ export class RemoteBrowserComponent implements OnInit, AfterViewInit {
     this.config = config;
     this.remotes = config.remotes!;
     this.selectedRemote  = Helper.getSelectedRemote(this.remotes);
+    if (this.selectedRemote) this.server.remote$.next(this.selectedRemote);
     this.cdr.detectChanges();
   }
 

src/app/remote-widget/remote-websocket.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RemoteWebsocketService } from './remote-websocket.service';
+
+describe('RemoteWebsocketService', () => {
+  let service: RemoteWebsocketService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(RemoteWebsocketService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});