X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fapp.component.ts;h=12c0efd8a5f9efa09d1dfe6ec5a6ae7d1a8195a4;hb=ee8e602ef9761b4869e14d4d3ed24a2e18f22c65;hp=59966243b63ae02fbae0f714c1fbb835ee0ed4a3;hpb=2f5d2ec5ea4fedf2466e1db2d16878b1467b1e05;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 59966243b..12c0efd8a 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,13 +1,12 @@
-import { Component, OnInit, ViewChild } from '@angular/core'
+import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
 import { Event, GuardsCheckStart, NavigationEnd, Router, Scroll } from '@angular/router'
 import { AuthService, RedirectService, ServerService, ThemeService } from '@app/core'
 import { is18nPath } from '../../../shared/models/i18n'
 import { ScreenService } from '@app/shared/misc/screen.service'
-import { debounceTime, filter, map, pairwise } from 'rxjs/operators'
+import { filter, map, pairwise } from 'rxjs/operators'
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { fromEvent } from 'rxjs'
 import { PlatformLocation, ViewportScroller } from '@angular/common'
 import { PluginService } from '@app/core/plugins/plugin.service'
 import { HooksService } from '@app/core/plugins/hooks.service'
@@ -15,21 +14,21 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { POP_STATE_MODAL_DISMISS } from '@app/shared/misc/constants'
 import { WelcomeModalComponent } from '@app/modal/welcome-modal.component'
 import { InstanceConfigWarningModalComponent } from '@app/modal/instance-config-warning-modal.component'
+import { CustomModalComponent } from '@app/modal/custom-modal.component'
 import { ServerConfig, UserRole } from '@shared/models'
 import { User } from '@app/shared'
 import { InstanceService } from '@app/shared/instance/instance.service'
+import { MenuService } from './core/menu/menu.service'
 
 @Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.scss' ]
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, AfterViewInit {
   @ViewChild('welcomeModal') welcomeModal: WelcomeModalComponent
   @ViewChild('instanceConfigWarningModal') instanceConfigWarningModal: InstanceConfigWarningModalComponent
-
-  isMenuDisplayed = true
-  isMenuChangedByUser = false
+  @ViewChild('customModal') customModal: CustomModalComponent
 
   customCSS: SafeHtml
 
@@ -50,7 +49,8 @@ export class AppComponent implements OnInit {
     private themeService: ThemeService,
     private hooks: HooksService,
     private location: PlatformLocation,
-    private modalService: NgbModal
+    private modalService: NgbModal,
+    public menu: MenuService
   ) { }
 
   get instanceName () {
@@ -78,37 +78,23 @@ export class AppComponent implements OnInit {
       this.authService.refreshUserInformation()
     }
 
-    // Do not display menu on small screens
-    if (this.screenService.isInSmallView()) {
-      this.isMenuDisplayed = false
-    }
-
     this.initRouteEvents()
     this.injectJS()
     this.injectCSS()
 
     this.initHotkeys()
 
-    fromEvent(window, 'resize')
-      .pipe(debounceTime(200))
-      .subscribe(() => this.onResize())
-
     this.location.onPopState(() => this.modalService.dismissAll(POP_STATE_MODAL_DISMISS))
 
     this.openModalsIfNeeded()
   }
 
-  isUserLoggedIn () {
-    return this.authService.isLoggedIn()
-  }
-
-  toggleMenu () {
-    this.isMenuDisplayed = !this.isMenuDisplayed
-    this.isMenuChangedByUser = true
+  ngAfterViewInit () {
+    this.pluginService.initializeCustomModal(this.customModal)
   }
 
-  onResize () {
-    this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
+  isUserLoggedIn () {
+    return this.authService.isLoggedIn()
   }
 
   private initRouteEvents () {
@@ -176,7 +162,7 @@ export class AppComponent implements OnInit {
     eventsObs.pipe(
       filter((e: Event): e is GuardsCheckStart => e instanceof GuardsCheckStart),
       filter(() => this.screenService.isInSmallView())
-    ).subscribe(() => this.isMenuDisplayed = false) // User clicked on a link in the menu, change the page
+    ).subscribe(() => this.menu.isMenuDisplayed = false) // User clicked on a link in the menu, change the page
   }
 
   private injectJS () {
@@ -249,7 +235,7 @@ export class AppComponent implements OnInit {
       }, undefined, this.i18n('Focus the search bar')),
 
       new Hotkey('b', (event: KeyboardEvent): boolean => {
-        this.toggleMenu()
+        this.menu.toggleMenu()
         return false
       }, undefined, this.i18n('Toggle the left menu')),