sets the site title based on the configured name

2026-06-28 22:40:49 +00:00
parent 8ef1ac12c7
commit bfd6c5bb9e
2 changed files with 24 additions and 3 deletions
@@ -1,8 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, effect, inject } from '@angular/core';
+import { Title } from '@angular/platform-browser';
 import { RouterOutlet } from '@angular/router';
 import { NavbarComponent } from './navbar/navbar.component';
 import { MediaPlayerComponent } from './media-player/media-player.component';
 import { FooterComponent } from './footer/footer.component';
+import { StationConfigService } from './services/station-config.service';

@Component({
  selector: 'app-root',
@@ -11,4 +13,23 @@ import { FooterComponent } from './footer/footer.component';
  templateUrl: './app.html',
  styleUrl: './app.scss',
 })
-export class App {}
+export class App {
+  private titleService = inject(Title);
+  private stationConfig = inject(StationConfigService);
+
+  constructor() {
+    effect(() => {
+      const config = this.stationConfig.config();
+      const fullName = `${config.name_primary} ${config.name_secondary}`.trim();
+      this.titleService.setTitle(fullName);
+
+      // Update favicon to use the station's logo_url.
+      // Meta.updateTag() is unreliable for favicons in some browsers,
+      // so we update the <link> element directly.
+      const faviconEl = document.querySelector('link[rel="icon"]') as HTMLLinkElement | null;
+      if (faviconEl && config.logo_url) {
+        faviconEl.href = config.logo_url;
+      }
+    });
+  }
+}
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <title>RadioStation</title>
+    <title>KMountain Flower Radio</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />