kmtnflower/src/app/app.ts

import { Component, computed, effect, inject, OnInit, OnDestroy } from '@angular/core';
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 { StructuredDataComponent } from './structured-data/structured-data.component';
import { StationConfigService } from './services/station-config.service';
import { SeoService } from './services/seo.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, NavbarComponent, MediaPlayerComponent, FooterComponent, StructuredDataComponent],
  templateUrl: './app.html',
  styleUrl: './app.scss',
})
export class App implements OnInit, OnDestroy {
  private stationConfig = inject(StationConfigService);
  private seoService = inject(SeoService);

  readonly hasStream = computed(() => {
    const cfg = this.stationConfig.config();
    return !!cfg.stream_url && cfg.stream_url.trim().length > 0;
  });

  private navbarEl: HTMLElement | null = null;
  private resizeObserver: ResizeObserver | null = null;

  constructor() {
    // Update favicon when station config changes.
    effect(() => {
      const config = this.stationConfig.config();
      const faviconEl = document.querySelector('link[rel="icon"]') as HTMLLinkElement | null;
      if (faviconEl && config.logo_url) {
        faviconEl.href = config.logo_url;
      }
    });

    effect(() => {
      if (this.hasStream()) {
        document.body.classList.add('has-stream');
      } else {
        document.body.classList.remove('has-stream');
      }
    });
  }

  ngOnInit(): void {
    // Start watching router for automatic SEO metadata updates per route.
    this.seoService.watchRouter();
    // Handle the initial route (NavigationEnd already fired before ngOnInit).
    this.seoService.resetToDefaults();

    // Defer until the navbar is rendered in the DOM.
    queueMicrotask(() => {
      this.navbarEl = document.querySelector('app-navbar');
      if (!this.navbarEl) return;

      this.updateNavbarHeight();

      this.resizeObserver = new ResizeObserver(() => this.updateNavbarHeight());
      this.resizeObserver.observe(this.navbarEl!);
    });
  }

  ngOnDestroy(): void {
    this.resizeObserver?.disconnect();
  }

  private updateNavbarHeight(): void {
    if (!this.navbarEl) return;
    const h = this.navbarEl.offsetHeight;
    document.documentElement.style.setProperty('--navbar-height', `${h}px`);
  }
}