72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import { Component, computed, effect, inject, OnInit, OnDestroy } 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',
|
|
standalone: true,
|
|
imports: [RouterOutlet, NavbarComponent, MediaPlayerComponent, FooterComponent],
|
|
templateUrl: './app.html',
|
|
styleUrl: './app.scss',
|
|
})
|
|
export class App implements OnInit, OnDestroy {
|
|
private titleService = inject(Title);
|
|
private stationConfig = inject(StationConfigService);
|
|
|
|
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() {
|
|
effect(() => {
|
|
const config = this.stationConfig.config();
|
|
const fullName = `${config.name_primary} ${config.name_secondary}`.trim();
|
|
this.titleService.setTitle(fullName);
|
|
|
|
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 {
|
|
// 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`);
|
|
}
|
|
}
|