mirror of https://github.com/Chocobozzz/PeerTube
Fix loading bar for HTTP requests
parent
0e4ca570fa
commit
6d0110ad7b
|
@ -4,7 +4,7 @@ import { filter, first, map, pairwise } from 'rxjs/operators'
|
||||||
import { DOCUMENT, PlatformLocation, ViewportScroller } from '@angular/common'
|
import { DOCUMENT, PlatformLocation, ViewportScroller } from '@angular/common'
|
||||||
import { AfterViewInit, Component, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core'
|
import { AfterViewInit, Component, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core'
|
||||||
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
|
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
|
||||||
import { Event, GuardsCheckStart, NavigationEnd, Router, Scroll } from '@angular/router'
|
import { Event, GuardsCheckStart, NavigationEnd, RouteConfigLoadEnd, RouteConfigLoadStart, Router, Scroll } from '@angular/router'
|
||||||
import { AuthService, MarkdownService, RedirectService, ScreenService, ServerService, ThemeService, User } from '@app/core'
|
import { AuthService, MarkdownService, RedirectService, ScreenService, ServerService, ThemeService, User } from '@app/core'
|
||||||
import { HooksService } from '@app/core/plugins/hooks.service'
|
import { HooksService } from '@app/core/plugins/hooks.service'
|
||||||
import { PluginService } from '@app/core/plugins/plugin.service'
|
import { PluginService } from '@app/core/plugins/plugin.service'
|
||||||
|
@ -12,6 +12,7 @@ import { CustomModalComponent } from '@app/modal/custom-modal.component'
|
||||||
import { InstanceConfigWarningModalComponent } from '@app/modal/instance-config-warning-modal.component'
|
import { InstanceConfigWarningModalComponent } from '@app/modal/instance-config-warning-modal.component'
|
||||||
import { WelcomeModalComponent } from '@app/modal/welcome-modal.component'
|
import { WelcomeModalComponent } from '@app/modal/welcome-modal.component'
|
||||||
import { NgbConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap'
|
import { NgbConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap'
|
||||||
|
import { LoadingBarService } from '@ngx-loading-bar/core'
|
||||||
import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
|
import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
|
||||||
import { getShortLocale, is18nPath } from '@shared/core-utils/i18n'
|
import { getShortLocale, is18nPath } from '@shared/core-utils/i18n'
|
||||||
import { BroadcastMessageLevel, ServerConfig, UserRole } from '@shared/models'
|
import { BroadcastMessageLevel, ServerConfig, UserRole } from '@shared/models'
|
||||||
|
@ -55,6 +56,7 @@ export class AppComponent implements OnInit, AfterViewInit {
|
||||||
private modalService: NgbModal,
|
private modalService: NgbModal,
|
||||||
private markdownService: MarkdownService,
|
private markdownService: MarkdownService,
|
||||||
private ngbConfig: NgbConfig,
|
private ngbConfig: NgbConfig,
|
||||||
|
private loadingBar: LoadingBarService,
|
||||||
public menu: MenuService
|
public menu: MenuService
|
||||||
) {
|
) {
|
||||||
this.ngbConfig.animation = false
|
this.ngbConfig.animation = false
|
||||||
|
@ -126,6 +128,7 @@ export class AppComponent implements OnInit, AfterViewInit {
|
||||||
|
|
||||||
const scrollEvent = eventsObs.pipe(filter((e: Event): e is Scroll => e instanceof Scroll))
|
const scrollEvent = eventsObs.pipe(filter((e: Event): e is Scroll => e instanceof Scroll))
|
||||||
|
|
||||||
|
// Handle anchors/restore position
|
||||||
scrollEvent.subscribe(e => {
|
scrollEvent.subscribe(e => {
|
||||||
// scrollToAnchor first to preserve anchor position when using history navigation
|
// scrollToAnchor first to preserve anchor position when using history navigation
|
||||||
if (e.anchor) {
|
if (e.anchor) {
|
||||||
|
@ -178,19 +181,31 @@ export class AppComponent implements OnInit, AfterViewInit {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Homepage redirection
|
||||||
navigationEndEvent.pipe(
|
navigationEndEvent.pipe(
|
||||||
map(() => window.location.pathname),
|
map(() => window.location.pathname),
|
||||||
filter(pathname => !pathname || pathname === '/' || is18nPath(pathname))
|
filter(pathname => !pathname || pathname === '/' || is18nPath(pathname))
|
||||||
).subscribe(() => this.redirectService.redirectToHomepage(true))
|
).subscribe(() => this.redirectService.redirectToHomepage(true))
|
||||||
|
|
||||||
|
// Plugin hooks
|
||||||
navigationEndEvent.subscribe(e => {
|
navigationEndEvent.subscribe(e => {
|
||||||
this.hooks.runAction('action:router.navigation-end', 'common', { path: e.url })
|
this.hooks.runAction('action:router.navigation-end', 'common', { path: e.url })
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Automatically hide/display the menu
|
||||||
eventsObs.pipe(
|
eventsObs.pipe(
|
||||||
filter((e: Event): e is GuardsCheckStart => e instanceof GuardsCheckStart),
|
filter((e: Event): e is GuardsCheckStart => e instanceof GuardsCheckStart),
|
||||||
filter(() => this.screenService.isInSmallView() || this.screenService.isInTouchScreen())
|
filter(() => this.screenService.isInSmallView() || this.screenService.isInTouchScreen())
|
||||||
).subscribe(() => this.menu.setMenuDisplay(false)) // User clicked on a link in the menu, change the page
|
).subscribe(() => this.menu.setMenuDisplay(false)) // User clicked on a link in the menu, change the page
|
||||||
|
|
||||||
|
// Handle lazy loaded module
|
||||||
|
eventsObs.pipe(
|
||||||
|
filter((e: Event): e is RouteConfigLoadStart => e instanceof RouteConfigLoadStart)
|
||||||
|
).subscribe(() => this.loadingBar.useRef().start())
|
||||||
|
|
||||||
|
eventsObs.pipe(
|
||||||
|
filter((e: Event): e is RouteConfigLoadEnd => e instanceof RouteConfigLoadEnd)
|
||||||
|
).subscribe(() => this.loadingBar.useRef().complete())
|
||||||
}
|
}
|
||||||
|
|
||||||
private injectBroadcastMessage () {
|
private injectBroadcastMessage () {
|
||||||
|
|
|
@ -8,11 +8,7 @@ import { PeerTubeSocket } from '@app/core/notification/peertube-socket.service'
|
||||||
import { HooksService } from '@app/core/plugins/hooks.service'
|
import { HooksService } from '@app/core/plugins/hooks.service'
|
||||||
import { PluginService } from '@app/core/plugins/plugin.service'
|
import { PluginService } from '@app/core/plugins/plugin.service'
|
||||||
import { UnloggedGuard } from '@app/core/routing/unlogged-guard.service'
|
import { UnloggedGuard } from '@app/core/routing/unlogged-guard.service'
|
||||||
import { LoadingBarModule } from '@ngx-loading-bar/core'
|
|
||||||
import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
|
|
||||||
import { LoadingBarRouterModule } from '@ngx-loading-bar/router'
|
|
||||||
import { AuthService } from './auth'
|
import { AuthService } from './auth'
|
||||||
import { ScopedTokensService } from './scoped-tokens'
|
|
||||||
import { ConfirmService } from './confirm'
|
import { ConfirmService } from './confirm'
|
||||||
import { CheatSheetComponent } from './hotkeys'
|
import { CheatSheetComponent } from './hotkeys'
|
||||||
import { MenuService } from './menu'
|
import { MenuService } from './menu'
|
||||||
|
@ -23,6 +19,7 @@ import { RestExtractor, RestService } from './rest'
|
||||||
import { LoginGuard, RedirectService, UserRightGuard } from './routing'
|
import { LoginGuard, RedirectService, UserRightGuard } from './routing'
|
||||||
import { CanDeactivateGuard } from './routing/can-deactivate-guard.service'
|
import { CanDeactivateGuard } from './routing/can-deactivate-guard.service'
|
||||||
import { ServerConfigResolver } from './routing/server-config-resolver.service'
|
import { ServerConfigResolver } from './routing/server-config-resolver.service'
|
||||||
|
import { ScopedTokensService } from './scoped-tokens'
|
||||||
import { ServerService } from './server'
|
import { ServerService } from './server'
|
||||||
import { ThemeService } from './theme'
|
import { ThemeService } from './theme'
|
||||||
import { UserService } from './users'
|
import { UserService } from './users'
|
||||||
|
@ -33,9 +30,6 @@ import { LocalStorageService, ScreenService, SessionStorageService } from './wra
|
||||||
CommonModule,
|
CommonModule,
|
||||||
BrowserAnimationsModule,
|
BrowserAnimationsModule,
|
||||||
|
|
||||||
LoadingBarHttpClientModule,
|
|
||||||
LoadingBarRouterModule,
|
|
||||||
LoadingBarModule,
|
|
||||||
ToastModule,
|
ToastModule,
|
||||||
|
|
||||||
HotkeyModule.forRoot({
|
HotkeyModule.forRoot({
|
||||||
|
@ -48,9 +42,6 @@ import { LocalStorageService, ScreenService, SessionStorageService } from './wra
|
||||||
],
|
],
|
||||||
|
|
||||||
exports: [
|
exports: [
|
||||||
LoadingBarHttpClientModule,
|
|
||||||
LoadingBarModule,
|
|
||||||
|
|
||||||
ToastModule,
|
ToastModule,
|
||||||
|
|
||||||
CheatSheetComponent
|
CheatSheetComponent
|
||||||
|
|
|
@ -13,6 +13,8 @@ import {
|
||||||
NgbPopoverModule,
|
NgbPopoverModule,
|
||||||
NgbTooltipModule
|
NgbTooltipModule
|
||||||
} from '@ng-bootstrap/ng-bootstrap'
|
} from '@ng-bootstrap/ng-bootstrap'
|
||||||
|
import { LoadingBarModule } from '@ngx-loading-bar/core'
|
||||||
|
import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
|
||||||
import { SharedGlobalIconModule } from '../shared-icons'
|
import { SharedGlobalIconModule } from '../shared-icons'
|
||||||
import { AccountService, ActorAvatarInfoComponent, VideoAvatarChannelComponent } from './account'
|
import { AccountService, ActorAvatarInfoComponent, VideoAvatarChannelComponent } from './account'
|
||||||
import {
|
import {
|
||||||
|
@ -42,6 +44,9 @@ import { VideoChannelService } from './video-channel'
|
||||||
RouterModule,
|
RouterModule,
|
||||||
HttpClientModule,
|
HttpClientModule,
|
||||||
|
|
||||||
|
LoadingBarHttpClientModule,
|
||||||
|
LoadingBarModule,
|
||||||
|
|
||||||
NgbDropdownModule,
|
NgbDropdownModule,
|
||||||
NgbModalModule,
|
NgbModalModule,
|
||||||
NgbPopoverModule,
|
NgbPopoverModule,
|
||||||
|
@ -95,6 +100,9 @@ import { VideoChannelService } from './video-channel'
|
||||||
RouterModule,
|
RouterModule,
|
||||||
HttpClientModule,
|
HttpClientModule,
|
||||||
|
|
||||||
|
LoadingBarHttpClientModule,
|
||||||
|
LoadingBarModule,
|
||||||
|
|
||||||
NgbDropdownModule,
|
NgbDropdownModule,
|
||||||
NgbModalModule,
|
NgbModalModule,
|
||||||
NgbPopoverModule,
|
NgbPopoverModule,
|
||||||
|
|
Loading…
Reference in New Issue