aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/menu
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/menu')
-rw-r--r--client/src/app/menu/menu.component.html41
-rw-r--r--client/src/app/menu/menu.component.scss3
-rw-r--r--client/src/app/menu/menu.component.ts73
3 files changed, 48 insertions, 69 deletions
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 099ee8f36..16c79efc1 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -95,39 +95,16 @@
95 <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link create-account-button">Create an account</a> 95 <a i18n *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link create-account-button">Create an account</a>
96 </div> 96 </div>
97 97
98 <div *ngIf="isLoggedIn" class="in-my-library"> 98 <ng-container *ngFor="let menuSection of menuSections" >
99 <div i18n class="block-title">IN MY LIBRARY</div> 99 <div [ngClass]="[ menuSection.key, 'menu-block' ]">
100 <div i18n class="block-title">{{ menuSection.title }}</div>
100 101
101 <a *ngIf="user.canSeeVideosLink" class="menu-link" routerLink="/my-library/videos" routerLinkActive="active"> 102 <a class="menu-link" *ngFor="let link of menuSection.links" [routerLink]="link.path" routerLinkActive="active">
102 <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon> 103 <my-global-icon [iconName]="link.icon" aria-hidden="true"></my-global-icon>
103 <ng-container i18n>Videos</ng-container> 104 <ng-container>{{ link.shortLabel }}</ng-container>
104 </a> 105 </a>
105 106 </div>
106 <a class="menu-link" routerLink="/my-library/video-playlists" routerLinkActive="active"> 107 </ng-container>
107 <my-global-icon iconName="playlists" aria-hidden="true"></my-global-icon>
108 <ng-container i18n>Playlists</ng-container>
109 </a>
110
111 <a class="menu-link" routerLink="/videos/subscriptions" routerLinkActive="active">
112 <my-global-icon iconName="subscriptions" aria-hidden="true"></my-global-icon>
113 <ng-container i18n>Subscriptions</ng-container>
114 </a>
115
116 <a class="menu-link" routerLink="/my-library/history/videos" routerLinkActive="active">
117 <my-global-icon iconName="history" aria-hidden="true"></my-global-icon>
118 <ng-container i18n>History</ng-container>
119 </a>
120
121 </div>
122
123 <div class="on-instance">
124 <div i18n class="block-title">ON {{instanceName}}</div>
125
126 <a class="menu-link" *ngFor="let commonLink of commonMenuLinks" [routerLink]="commonLink.path" routerLinkActive="active">
127 <my-global-icon [iconName]="commonLink.icon" aria-hidden="true"></my-global-icon>
128 <ng-container>{{ commonLink.menuLabel }}</ng-container>
129 </a>
130 </div>
131 </div> 108 </div>
132 109
133 <div class="footer"> 110 <div class="footer">
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 6da80191a..daaed2d32 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -274,8 +274,7 @@ my-actor-avatar {
274 } 274 }
275} 275}
276 276
277.in-my-library, 277.menu-block,
278.on-instance,
279.footer-block { 278.footer-block {
280 margin-bottom: 15px; 279 margin-bottom: 15px;
281 280
diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index c767f19b2..fa104cc43 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -8,7 +8,8 @@ import {
8 AuthService, 8 AuthService,
9 AuthStatus, 9 AuthStatus,
10 AuthUser, 10 AuthUser,
11 MenuLink, 11 HooksService,
12 MenuSection,
12 MenuService, 13 MenuService,
13 RedirectService, 14 RedirectService,
14 ScreenService, 15 ScreenService,
@@ -45,7 +46,7 @@ export class MenuComponent implements OnInit {
45 46
46 currentInterfaceLanguage: string 47 currentInterfaceLanguage: string
47 48
48 commonMenuLinks: MenuLink[] = [] 49 menuSections: MenuSection[] = []
49 50
50 private languages: VideoConstant<string>[] = [] 51 private languages: VideoConstant<string>[] = []
51 52
@@ -71,7 +72,8 @@ export class MenuComponent implements OnInit {
71 private screenService: ScreenService, 72 private screenService: ScreenService,
72 private menuService: MenuService, 73 private menuService: MenuService,
73 private modalService: PeertubeModalService, 74 private modalService: PeertubeModalService,
74 private router: Router 75 private router: Router,
76 private hooks: HooksService
75 ) { } 77 ) { }
76 78
77 get isInMobileView () { 79 get isInMobileView () {
@@ -88,46 +90,23 @@ export class MenuComponent implements OnInit {
88 return this.languageChooserModal.getCurrentLanguage() 90 return this.languageChooserModal.getCurrentLanguage()
89 } 91 }
90 92
91 get instanceName () {
92 return this.htmlServerConfig.instance.name
93 }
94
95 ngOnInit () { 93 ngOnInit () {
96 this.htmlServerConfig = this.serverService.getHTMLConfig() 94 this.htmlServerConfig = this.serverService.getHTMLConfig()
97 this.buildMenuLinks()
98
99 this.isLoggedIn = this.authService.isLoggedIn()
100 if (this.isLoggedIn === true) {
101 this.user = this.authService.getUser()
102
103 this.computeNSFWPolicy()
104 this.computeVideosLink()
105 }
106
107 this.computeAdminAccess()
108
109 this.currentInterfaceLanguage = this.languageChooserModal.getCurrentLanguage() 95 this.currentInterfaceLanguage = this.languageChooserModal.getCurrentLanguage()
110 96
97 this.updateUserState()
98 this.buildMenuSections()
99
111 this.authService.loginChangedSource.subscribe( 100 this.authService.loginChangedSource.subscribe(
112 status => { 101 status => {
113 if (status === AuthStatus.LoggedIn) { 102 if (status === AuthStatus.LoggedIn) {
114 this.isLoggedIn = true 103 this.isLoggedIn = true
115 this.user = this.authService.getUser()
116
117 this.computeAdminAccess()
118 this.computeVideosLink()
119
120 logger('Logged in.')
121 } else if (status === AuthStatus.LoggedOut) { 104 } else if (status === AuthStatus.LoggedOut) {
122 this.isLoggedIn = false 105 this.isLoggedIn = false
123 this.user = undefined
124
125 this.computeAdminAccess()
126
127 logger('Logged out.')
128 } else {
129 console.error('Unknown auth status: ' + status)
130 } 106 }
107
108 this.updateUserState()
109 this.buildMenuSections()
131 } 110 }
132 ) 111 )
133 112
@@ -257,8 +236,20 @@ export class MenuComponent implements OnInit {
257 } 236 }
258 } 237 }
259 238
260 private buildMenuLinks () { 239 private async buildMenuSections () {
261 this.commonMenuLinks = this.menuService.buildCommonLinks(this.htmlServerConfig) 240 const menuSections = []
241
242 if (this.isLoggedIn) {
243 menuSections.push(
244 this.menuService.buildLibraryLinks(this.user?.canSeeVideosLink)
245 )
246 }
247
248 menuSections.push(
249 this.menuService.buildCommonLinks(this.htmlServerConfig)
250 )
251
252 this.menuSections = await this.hooks.wrapObject(menuSections, 'common', 'filter:left-menu.links.create.result')
262 } 253 }
263 254
264 private buildUserLanguages () { 255 private buildUserLanguages () {
@@ -268,7 +259,7 @@ export class MenuComponent implements OnInit {
268 } 259 }
269 260
270 if (!this.user.videoLanguages) { 261 if (!this.user.videoLanguages) {
271 this.videoLanguages = [$localize`any language`] 262 this.videoLanguages = [ $localize`any language` ]
272 return 263 return
273 } 264 }
274 265
@@ -284,6 +275,8 @@ export class MenuComponent implements OnInit {
284 } 275 }
285 276
286 private computeVideosLink () { 277 private computeVideosLink () {
278 if (!this.isLoggedIn) return
279
287 this.authService.userInformationLoaded 280 this.authService.userInformationLoaded
288 .pipe( 281 .pipe(
289 switchMap(() => this.user.computeCanSeeVideosLink(this.userService.getMyVideoQuotaUsed())) 282 switchMap(() => this.user.computeCanSeeVideosLink(this.userService.getMyVideoQuotaUsed()))
@@ -313,4 +306,14 @@ export class MenuComponent implements OnInit {
313 break 306 break
314 } 307 }
315 } 308 }
309
310 private updateUserState () {
311 this.user = this.isLoggedIn
312 ? this.authService.getUser()
313 : undefined
314
315 this.computeAdminAccess()
316 this.computeNSFWPolicy()
317 this.computeVideosLink()
318 }
316} 319}