34 lines
1.4 KiB
TypeScript
34 lines
1.4 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)';
|
|
private readonly player : Player;
|
|
|
|
constructor(player: Player) {
|
|
this.player = player;
|
|
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';
|
|
}
|
|
}
|
|
}
|