-import { ViewportScroller } from '@angular/common'
import { HotkeysService } from 'angular2-hotkeys'
import * as debug from 'debug'
import { switchMap } from 'rxjs/operators'
+import { ViewportScroller } from '@angular/common'
import { Component, OnInit, ViewChild } from '@angular/core'
import { Router } from '@angular/router'
-import { scrollToTop } from '@app/helpers'
import { AuthService, AuthStatus, AuthUser, MenuService, RedirectService, ScreenService, ServerService, UserService } from '@app/core'
+import { scrollToTop } from '@app/helpers'
import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component'
+import { PeertubeModalService } from '@app/shared/shared-main/peertube-modal/peertube-modal.service'
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
import { ServerConfig, UserRight, VideoConstant } from '@shared/models'
const logger = debug('peertube:menu:MenuComponent')
export class MenuComponent implements OnInit {
@ViewChild('languageChooserModal', { static: true }) languageChooserModal: LanguageChooserComponent
@ViewChild('quickSettingsModal', { static: true }) quickSettingsModal: QuickSettingsModalComponent
+ @ViewChild('dropdown') dropdown: NgbDropdown
user: AuthUser
isLoggedIn: boolean
videoLanguages: string[] = []
nsfwPolicy: string
- loggedInMorePlacement: string
-
currentInterfaceLanguage: string
private languages: VideoConstant<string>[] = []
private hotkeysService: HotkeysService,
private screenService: ScreenService,
private menuService: MenuService,
+ private modalService: PeertubeModalService,
private router: Router
) { }
+ get isInMobileView () {
+ return this.screenService.isInMobileView()
+ }
+
+ get dropdownContainer () {
+ if (this.isInMobileView) return null
+
+ return 'body' as 'body'
+ }
+
+ get language () {
+ return this.languageChooserModal.getCurrentLanguage()
+ }
+
get instanceName () {
return this.serverConfig.instance.name
}
this.computeAdminAccess()
- this.loggedInMorePlacement = this.screenService.isInMobileView()
- ? 'left-top auto'
- : 'right-top auto'
-
this.currentInterfaceLanguage = this.languageChooserModal.getCurrentLanguage()
this.authService.loginChangedSource.subscribe(
this.authService.userInformationLoaded
.subscribe(() => this.buildUserLanguages())
})
+
+ this.modalService.openQuickSettingsSubject
+ .subscribe(() => this.openQuickSettings())
}
isRegistrationAllowed () {
}
}
+ // Lock menu scroll when menu scroll to avoid fleeing / detached dropdown
+ onMenuScrollEvent () {
+ document.querySelector('menu').scrollTo(0, 0)
+ }
+
+ onDropdownOpenChange (opened: boolean) {
+ if (this.screenService.isInMobileView()) return
+
+ // Close dropdown when window scroll to avoid dropdown quick jump for re-position
+ const onWindowScroll = () => {
+ this.dropdown?.close()
+ window.removeEventListener('scroll', onWindowScroll)
+ }
+
+ if (opened) {
+ window.addEventListener('scroll', onWindowScroll)
+ document.querySelector('menu').scrollTo(0, 0) // Reset menu scroll to easy lock
+ document.querySelector('menu').addEventListener('scroll', this.onMenuScrollEvent)
+ } else {
+ document.querySelector('menu').removeEventListener('scroll', this.onMenuScrollEvent)
+ }
+ }
+
private buildUserLanguages () {
if (!this.user) {
this.videoLanguages = []