74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
import {
|
|
ChangeDetectionStrategy,
|
|
ChangeDetectorRef,
|
|
Component,
|
|
OnDestroy,
|
|
} from '@angular/core';
|
|
import { Router, NavigationEnd, NavigationStart } from '@angular/router';
|
|
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
|
|
|
import { Subject } from 'rxjs';
|
|
import { takeUntil } from 'rxjs/operators';
|
|
|
|
@Component({
|
|
selector: 'app-root',
|
|
templateUrl: './app.component.html',
|
|
styleUrls: ['./app.component.scss'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class AppComponent implements OnDestroy {
|
|
title = 'B 站直播录制';
|
|
theme: 'light' | 'dark' = 'light';
|
|
|
|
loading = false;
|
|
collapsed = false;
|
|
useDrawer = false;
|
|
destroyed = new Subject<void>();
|
|
|
|
constructor(
|
|
router: Router,
|
|
changeDetector: ChangeDetectorRef,
|
|
breakpointObserver: BreakpointObserver
|
|
) {
|
|
router.events.subscribe((event) => {
|
|
if (event instanceof NavigationStart) {
|
|
this.loading = true;
|
|
// close the drawer
|
|
if (this.useDrawer) {
|
|
this.collapsed = true;
|
|
}
|
|
} else if (event instanceof NavigationEnd) {
|
|
this.loading = false;
|
|
}
|
|
});
|
|
|
|
// use drawer as side nav for x-small device
|
|
breakpointObserver
|
|
.observe(Breakpoints.XSmall)
|
|
.pipe(takeUntil(this.destroyed))
|
|
.subscribe((state) => {
|
|
this.useDrawer = state.matches;
|
|
// ensure the drawer is closed
|
|
if (this.useDrawer) {
|
|
this.collapsed = true;
|
|
}
|
|
changeDetector.markForCheck();
|
|
});
|
|
|
|
// display task cards as many as possible
|
|
// max-width: card-width(400px) * 2 + gutter(12px) + padding(12px) * 2 + sidenav(200px)
|
|
breakpointObserver
|
|
.observe('(max-width: 1036px)')
|
|
.pipe(takeUntil(this.destroyed))
|
|
.subscribe((state) => {
|
|
this.collapsed = state.matches;
|
|
changeDetector.markForCheck();
|
|
});
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this.destroyed.next();
|
|
this.destroyed.complete();
|
|
}
|
|
}
|