import { BreakpointObserver } from '@angular/cdk/layout' ; import { ChangeDetectionStrategy , Component , Injectable , OnDestroy } from '@angular/core' ; import { NavigationEnd , Router } from '@angular/router' ; import { BehaviorSubject , merge , Observable , Subscription } from 'rxjs' ; import { filter , map } from 'rxjs/operators' ; import { UiService } from '../core/ui' ; import { RichCollaboratorsService } from '../doc/rich-collaborators' ; import { DocService } from './doc.service' ; import { LogsService } from './logs' ; import { NetworkService } from './network' ; export enum VIEWPORT { LARGE , MEDIUM , SMALL , EXTRASMALL } @ Component ( { selector : 'mute-doc' , templateUrl : './doc.component.html' , styleUrls : [ './doc.component.scss' ] , providers : [ LogsService , DocService , NetworkService , RichCollaboratorsService ] , changeDetection : ChangeDetectionStrategy . OnPush , } ) @ Injectable ( ) export class DocComponent implements OnDestroy { public viewport : Observable < VIEWPORT > ; public drawerMode : BehaviorSubject < string > ; public drawerOpened : BehaviorSubject < boolean > ; public extrasmall : string ; private subs : Subscription [ ] ; constructor ( private router , private breakpointObserver , public docService , public ui ) { this . drawerMode = new BehaviorSubject ( '' ) ; this . drawerOpened = new BehaviorSubject ( false ) ; this . extrasmall = '' ; this . subs = [ ] ; this . subs [ this . subs . length ] = merge ( this . breakpointObserver . observe ( [ '(min-width: 1450px)' ] ) . pipe ( filter ( ( result ) => result . matches ) , map ( ( ) => VIEWPORT . LARGE ) ) , this . breakpointObserver . observe ( [ '(min-width: 1130px) and (max-width: 1450px)' ] ) . pipe ( filter ( ( result ) => result . matches ) , map ( ( ) => VIEWPORT . MEDIUM ) ) , this . breakpointObserver . observe ( [ '(min-width: 800px) and (max-width: 1130px)' ] ) . pipe ( filter ( ( result ) => result . matches ) , map ( ( ) => VIEWPORT . SMALL ) ) , this . breakpointObserver . observe ( [ '(max-width: 800px)' ] ) . pipe ( filter ( ( result ) => result . matches ) , map ( ( ) => VIEWPORT . EXTRASMALL ) ) ) . subscribe ( ( viewport ) => { switch ( viewport ) { case VIEWPORT . LARGE : this . drawerMode . next ( 'over' ) ; this . drawerOpened . next ( true ) ; this . extrasmall = '' ; break ; case VIEWPORT . MEDIUM : this . drawerMode . next ( 'side' ) ; this . drawerOpened . next ( true ) ; this . extrasmall = '' ; break ; case VIEWPORT . SMALL : this . drawerMode . next ( 'push' ) ; this . drawerOpened . next ( false ) ; this . extrasmall = '' ; break ; case VIEWPORT . EXTRASMALL : this . drawerMode . next ( 'push' ) ; this . drawerOpened . next ( false ) ; this . extrasmall = 'extrasmall' ; break ; } } ) ; this . router . routeReuseStrategy . shouldReuseRoute = ( ) => false ; this . subs [ this . subs . length ] = this . router . events . subscribe ( ( evt ) => { if ( evt instanceof NavigationEnd ) { this . router . navigated = false ; } } ) ; } ngOnDestroy ( ) { this . subs . forEach ( ( s ) => s . unsubscribe ( ) ) ; } editorReady ( ) { this . docService . joinSession ( ) ; } async saveDoc ( ) { await this . docService . doc . saveMetadata ( ) ; await this . docService . doc . saveContent ( this . docService . getDocContent ( ) ) ; } }