radiostasis/src/Playlist.ts

43 lines
1.5 KiB
TypeScript

class Playlist {
private readonly queueContainer: HTMLElement;
private readonly queueTab: HTMLElement;
private readonly overlay: HTMLElement;
private readonly queueInitialHeight: string;
private readonly queueExpandedHeight = 'calc(100% - 6ex)';
// changed event handler
private changedHandler?: () => void;
constructor() {
this.queueContainer = document.getElementById('queue-container')!;
this.queueInitialHeight = getComputedStyle(this.queueContainer).height;
this.queueTab = this.queueContainer.getElementsByTagName('h2').item(0)!;
this.overlay = document.getElementById('overlay')!;
this.queueTab.addEventListener('click', () => this.toggleQueueUI());
this.overlay.addEventListener('click', () => this.toggleQueueUI());
}
private toggleQueueUI(): void {
if (this.queueContainer.style.height !== this.queueExpandedHeight) {
this.queueContainer.style.height = this.queueExpandedHeight;
this.overlay.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
this.overlay.style.backdropFilter = 'blur(5px)';
this.overlay.style.pointerEvents = 'auto';
} else {
this.queueContainer.style.height = this.queueInitialHeight;
this.overlay.style.backgroundColor = 'rgba(255, 255, 255, 0)';
this.overlay.style.backdropFilter = 'none';
this.overlay.style.pointerEvents = 'none';
}
}
public setPlaylistChangedHandler(handler: () => void) {
this.changedHandler = handler;
}
public hasNextEpisode(): boolean {
return false;
}
}