updates

Author: cppshane

angular.json

@@ -44,8 +44,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumWarning": "10kB",
+                  "maximumError": "10kB"
                 }
               ],
               "outputHashing": "all",

proxy.conf.json

@@ -3,5 +3,13 @@
     "target": "http://localhost:5264",
     "secure": false,
     "changeOrigin": true
+  },
+  "/radio-browser": {
+    "target": "https://de1.api.radio-browser.info",
+    "secure": true,
+    "changeOrigin": true,
+    "pathRewrite": {
+      "^/radio-browser": ""
+    }
   }
 }

src/app/app.component.html

@@ -1,14 +1,18 @@
 <h1 class="site-title">lucent.earth</h1>
 <app-globe-view
-  [sidebarOpen]="selectedStream !== null"
+  [sidebarOpen]="sidebarOpen"
   [sidebarInsetSnap]="sidebarPanelResizing"
   [selectedStream]="selectedStream"
+  [selectedRadio]="selectedRadio"
   [initialStreamQuery]="initialStreamQuery"
+  [initialRadioQuery]="initialRadioQuery"
   (streamSelected)="onStreamSelected($event)"
+  (radioSelected)="onRadioSelected($event)"
 />
-@if (selectedStream) {
+@if (sidebarOpen) {
   <app-stream-sidebar
     [stream]="selectedStream"
+    [radioSelection]="selectedRadio"
     (closing)="onSidebarClosing()"
     (closed)="onSidebarClosed()"
     (resizeActiveChange)="sidebarPanelResizing = $event"

src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Component, HostBinding, OnInit } from '@angular/core';
 import { GlobeViewComponent } from './globe-view/globe-view.component';
+import type { GlobeRadioSelection } from './radio.models';
 import type { GlobeStreamPoint } from './stream.models';
 import { StreamSidebarComponent } from './stream-sidebar/stream-sidebar.component';
 
@@ -11,24 +12,39 @@ import { StreamSidebarComponent } from './stream-sidebar/stream-sidebar.componen
 })
 export class AppComponent implements OnInit {
   selectedStream: GlobeStreamPoint | null = null;
+  selectedRadio: GlobeRadioSelection | null = null;
   /** True while dragging the sidebar width — globe width must not ease */
   sidebarPanelResizing = false;
   /** Pixels reserved on the right for the fixed sidebar; drives globe host width */
   @HostBinding('style.--sidebar-inset.px')
   sidebarInsetPx = 0;
   /** From `?stream=` on first load; globe selects + focuses after streams load */
   initialStreamQuery: string | null = null;
+  initialRadioQuery: string | null = null;
+
+  get sidebarOpen(): boolean {
+    return this.selectedStream !== null || this.selectedRadio !== null;
+  }
 
   ngOnInit(): void {
     if (typeof window === 'undefined') return;
-    const raw = new URL(window.location.href).searchParams.get('stream');
-    this.initialStreamQuery = raw?.trim() ? raw.trim() : null;
+    const u = new URL(window.location.href);
+    const rawStream = u.searchParams.get('stream');
+    const rawRadio = u.searchParams.get('radio');
+    this.initialStreamQuery = rawStream?.trim() ? rawStream.trim() : null;
+    this.initialRadioQuery = rawRadio?.trim() ? rawRadio.trim() : null;
   }
 
   onStreamSelected(stream: GlobeStreamPoint): void {
     this.selectedStream = stream;
     this.sidebarInsetPx = 640;
-    this.syncStreamQueryParam();
+    this.syncUrlQueryParams();
+  }
+
+  onRadioSelected(sel: GlobeRadioSelection): void {
+    this.selectedRadio = sel;
+    this.sidebarInsetPx = 640;
+    this.syncUrlQueryParams();
   }
 
   /** Start of close animation: globe expands while panel slides off */
@@ -38,21 +54,27 @@ export class AppComponent implements OnInit {
 
   onSidebarClosed(): void {
     this.selectedStream = null;
-    this.syncStreamQueryParam();
+    this.selectedRadio = null;
+    this.syncUrlQueryParams();
   }
 
   onSidebarLayoutWidth(px: number): void {
     this.sidebarInsetPx = Math.max(0, Math.round(px));
   }
 
-  private syncStreamQueryParam(): void {
+  private syncUrlQueryParams(): void {
     if (typeof window === 'undefined') return;
     const u = new URL(window.location.href);
     if (this.selectedStream?.channelLogin) {
       u.searchParams.set('stream', this.selectedStream.channelLogin);
     } else {
       u.searchParams.delete('stream');
     }
+    if (this.selectedRadio?.station.stationuuid) {
+      u.searchParams.set('radio', this.selectedRadio.station.stationuuid);
+    } else {
+      u.searchParams.delete('radio');
+    }
     window.history.replaceState(window.history.state, '', u.toString());
   }
 }

src/app/globe-map.models.ts

@@ -0,0 +1,16 @@
+import type { GlobeRadioPoint } from './radio.models';
+import type { GlobeStreamPoint } from './stream.models';
+
+export type GlobeMapPoint = GlobeStreamPoint | GlobeRadioPoint;
+
+export function isGlobeRadioPoint(p: GlobeMapPoint): p is GlobeRadioPoint {
+  return p.kind === 'radio';
+}
+
+export function isGlobeStreamMapPoint(p: GlobeMapPoint): p is GlobeStreamPoint {
+  return p.kind === 'stream';
+}
+
+export function mapPointMarkerId(p: GlobeMapPoint): string {
+  return isGlobeRadioPoint(p) ? p.markerId : p.channelLogin;
+}