aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-01-13 11:29:55 +0100
committerChocobozzz <me@florianbigard.com>2021-01-13 11:29:55 +0100
commit6d0110ad7ba46fc115f24a7cc15a71c5ad186ed1 (patch)
tree60d359816bbc785acdb3a31b4d1ea93be0001ca5 /client
parent0e4ca570fa33105456f0e4650342374c1658d5f4 (diff)
downloadPeerTube-6d0110ad7ba46fc115f24a7cc15a71c5ad186ed1.tar.gz
PeerTube-6d0110ad7ba46fc115f24a7cc15a71c5ad186ed1.tar.zst
PeerTube-6d0110ad7ba46fc115f24a7cc15a71c5ad186ed1.zip
Fix loading bar for HTTP requests
Diffstat (limited to 'client')
-rw-r--r--client/src/app/app.component.ts17
-rw-r--r--client/src/app/core/core.module.ts11
-rw-r--r--client/src/app/shared/shared-main/shared-main.module.ts8
3 files changed, 25 insertions, 11 deletions
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 3d1026ac4..ca4b69899 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -4,7 +4,7 @@ import { filter, first, map, pairwise } from 'rxjs/operators'
4import { DOCUMENT, PlatformLocation, ViewportScroller } from '@angular/common' 4import { DOCUMENT, PlatformLocation, ViewportScroller } from '@angular/common'
5import { AfterViewInit, Component, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core' 5import { AfterViewInit, Component, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core'
6import { DomSanitizer, SafeHtml } from '@angular/platform-browser' 6import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
7import { Event, GuardsCheckStart, NavigationEnd, Router, Scroll } from '@angular/router' 7import { Event, GuardsCheckStart, NavigationEnd, RouteConfigLoadEnd, RouteConfigLoadStart, Router, Scroll } from '@angular/router'
8import { AuthService, MarkdownService, RedirectService, ScreenService, ServerService, ThemeService, User } from '@app/core' 8import { AuthService, MarkdownService, RedirectService, ScreenService, ServerService, ThemeService, User } from '@app/core'
9import { HooksService } from '@app/core/plugins/hooks.service' 9import { HooksService } from '@app/core/plugins/hooks.service'
10import { PluginService } from '@app/core/plugins/plugin.service' 10import { PluginService } from '@app/core/plugins/plugin.service'
@@ -12,6 +12,7 @@ import { CustomModalComponent } from '@app/modal/custom-modal.component'
12import { InstanceConfigWarningModalComponent } from '@app/modal/instance-config-warning-modal.component' 12import { InstanceConfigWarningModalComponent } from '@app/modal/instance-config-warning-modal.component'
13import { WelcomeModalComponent } from '@app/modal/welcome-modal.component' 13import { WelcomeModalComponent } from '@app/modal/welcome-modal.component'
14import { NgbConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap' 14import { NgbConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap'
15import { LoadingBarService } from '@ngx-loading-bar/core'
15import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage' 16import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
16import { getShortLocale, is18nPath } from '@shared/core-utils/i18n' 17import { getShortLocale, is18nPath } from '@shared/core-utils/i18n'
17import { BroadcastMessageLevel, ServerConfig, UserRole } from '@shared/models' 18import { BroadcastMessageLevel, ServerConfig, UserRole } from '@shared/models'
@@ -55,6 +56,7 @@ export class AppComponent implements OnInit, AfterViewInit {
55 private modalService: NgbModal, 56 private modalService: NgbModal,
56 private markdownService: MarkdownService, 57 private markdownService: MarkdownService,
57 private ngbConfig: NgbConfig, 58 private ngbConfig: NgbConfig,
59 private loadingBar: LoadingBarService,
58 public menu: MenuService 60 public menu: MenuService
59 ) { 61 ) {
60 this.ngbConfig.animation = false 62 this.ngbConfig.animation = false
@@ -126,6 +128,7 @@ export class AppComponent implements OnInit, AfterViewInit {
126 128
127 const scrollEvent = eventsObs.pipe(filter((e: Event): e is Scroll => e instanceof Scroll)) 129 const scrollEvent = eventsObs.pipe(filter((e: Event): e is Scroll => e instanceof Scroll))
128 130
131 // Handle anchors/restore position
129 scrollEvent.subscribe(e => { 132 scrollEvent.subscribe(e => {
130 // scrollToAnchor first to preserve anchor position when using history navigation 133 // scrollToAnchor first to preserve anchor position when using history navigation
131 if (e.anchor) { 134 if (e.anchor) {
@@ -178,19 +181,31 @@ export class AppComponent implements OnInit, AfterViewInit {
178 } 181 }
179 }) 182 })
180 183
184 // Homepage redirection
181 navigationEndEvent.pipe( 185 navigationEndEvent.pipe(
182 map(() => window.location.pathname), 186 map(() => window.location.pathname),
183 filter(pathname => !pathname || pathname === '/' || is18nPath(pathname)) 187 filter(pathname => !pathname || pathname === '/' || is18nPath(pathname))
184 ).subscribe(() => this.redirectService.redirectToHomepage(true)) 188 ).subscribe(() => this.redirectService.redirectToHomepage(true))
185 189
190 // Plugin hooks
186 navigationEndEvent.subscribe(e => { 191 navigationEndEvent.subscribe(e => {
187 this.hooks.runAction('action:router.navigation-end', 'common', { path: e.url }) 192 this.hooks.runAction('action:router.navigation-end', 'common', { path: e.url })
188 }) 193 })
189 194
195 // Automatically hide/display the menu
190 eventsObs.pipe( 196 eventsObs.pipe(
191 filter((e: Event): e is GuardsCheckStart => e instanceof GuardsCheckStart), 197 filter((e: Event): e is GuardsCheckStart => e instanceof GuardsCheckStart),
192 filter(() => this.screenService.isInSmallView() || this.screenService.isInTouchScreen()) 198 filter(() => this.screenService.isInSmallView() || this.screenService.isInTouchScreen())
193 ).subscribe(() => this.menu.setMenuDisplay(false)) // User clicked on a link in the menu, change the page 199 ).subscribe(() => this.menu.setMenuDisplay(false)) // User clicked on a link in the menu, change the page
200
201 // Handle lazy loaded module
202 eventsObs.pipe(
203 filter((e: Event): e is RouteConfigLoadStart => e instanceof RouteConfigLoadStart)
204 ).subscribe(() => this.loadingBar.useRef().start())
205
206 eventsObs.pipe(
207 filter((e: Event): e is RouteConfigLoadEnd => e instanceof RouteConfigLoadEnd)
208 ).subscribe(() => this.loadingBar.useRef().complete())
194 } 209 }
195 210
196 private injectBroadcastMessage () { 211 private injectBroadcastMessage () {
diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index f51f1920d..c4fc9995e 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -8,11 +8,7 @@ import { PeerTubeSocket } from '@app/core/notification/peertube-socket.service'
8import { HooksService } from '@app/core/plugins/hooks.service' 8import { HooksService } from '@app/core/plugins/hooks.service'
9import { PluginService } from '@app/core/plugins/plugin.service' 9import { PluginService } from '@app/core/plugins/plugin.service'
10import { UnloggedGuard } from '@app/core/routing/unlogged-guard.service' 10import { UnloggedGuard } from '@app/core/routing/unlogged-guard.service'
11import { LoadingBarModule } from '@ngx-loading-bar/core'
12import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
13import { LoadingBarRouterModule } from '@ngx-loading-bar/router'
14import { AuthService } from './auth' 11import { AuthService } from './auth'
15import { ScopedTokensService } from './scoped-tokens'
16import { ConfirmService } from './confirm' 12import { ConfirmService } from './confirm'
17import { CheatSheetComponent } from './hotkeys' 13import { CheatSheetComponent } from './hotkeys'
18import { MenuService } from './menu' 14import { MenuService } from './menu'
@@ -23,6 +19,7 @@ import { RestExtractor, RestService } from './rest'
23import { LoginGuard, RedirectService, UserRightGuard } from './routing' 19import { LoginGuard, RedirectService, UserRightGuard } from './routing'
24import { CanDeactivateGuard } from './routing/can-deactivate-guard.service' 20import { CanDeactivateGuard } from './routing/can-deactivate-guard.service'
25import { ServerConfigResolver } from './routing/server-config-resolver.service' 21import { ServerConfigResolver } from './routing/server-config-resolver.service'
22import { ScopedTokensService } from './scoped-tokens'
26import { ServerService } from './server' 23import { ServerService } from './server'
27import { ThemeService } from './theme' 24import { ThemeService } from './theme'
28import { UserService } from './users' 25import { UserService } from './users'
@@ -33,9 +30,6 @@ import { LocalStorageService, ScreenService, SessionStorageService } from './wra
33 CommonModule, 30 CommonModule,
34 BrowserAnimationsModule, 31 BrowserAnimationsModule,
35 32
36 LoadingBarHttpClientModule,
37 LoadingBarRouterModule,
38 LoadingBarModule,
39 ToastModule, 33 ToastModule,
40 34
41 HotkeyModule.forRoot({ 35 HotkeyModule.forRoot({
@@ -48,9 +42,6 @@ import { LocalStorageService, ScreenService, SessionStorageService } from './wra
48 ], 42 ],
49 43
50 exports: [ 44 exports: [
51 LoadingBarHttpClientModule,
52 LoadingBarModule,
53
54 ToastModule, 45 ToastModule,
55 46
56 CheatSheetComponent 47 CheatSheetComponent
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 74bb4559a..123b5a3e3 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -13,6 +13,8 @@ import {
13 NgbPopoverModule, 13 NgbPopoverModule,
14 NgbTooltipModule 14 NgbTooltipModule
15} from '@ng-bootstrap/ng-bootstrap' 15} from '@ng-bootstrap/ng-bootstrap'
16import { LoadingBarModule } from '@ngx-loading-bar/core'
17import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
16import { SharedGlobalIconModule } from '../shared-icons' 18import { SharedGlobalIconModule } from '../shared-icons'
17import { AccountService, ActorAvatarInfoComponent, VideoAvatarChannelComponent } from './account' 19import { AccountService, ActorAvatarInfoComponent, VideoAvatarChannelComponent } from './account'
18import { 20import {
@@ -42,6 +44,9 @@ import { VideoChannelService } from './video-channel'
42 RouterModule, 44 RouterModule,
43 HttpClientModule, 45 HttpClientModule,
44 46
47 LoadingBarHttpClientModule,
48 LoadingBarModule,
49
45 NgbDropdownModule, 50 NgbDropdownModule,
46 NgbModalModule, 51 NgbModalModule,
47 NgbPopoverModule, 52 NgbPopoverModule,
@@ -95,6 +100,9 @@ import { VideoChannelService } from './video-channel'
95 RouterModule, 100 RouterModule,
96 HttpClientModule, 101 HttpClientModule,
97 102
103 LoadingBarHttpClientModule,
104 LoadingBarModule,
105
98 NgbDropdownModule, 106 NgbDropdownModule,
99 NgbModalModule, 107 NgbModalModule,
100 NgbPopoverModule, 108 NgbPopoverModule,