Better html title for account and channel pages

Chocobozzz · Aug 19, 2024 · 62fcf1f · 62fcf1f
1 parent b2bb45c
commit 62fcf1f
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 70 deletions.
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
@@ -1,7 +1,7 @@
 import { DatePipe, NgClass, NgIf } from '@angular/common'
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router'
-import { AuthService, MarkdownService, Notifier, RedirectService, RestExtractor, ScreenService, UserService } from '@app/core'
+import { AuthService, MarkdownService, MetaService, Notifier, RedirectService, RestExtractor, ScreenService, UserService } from '@app/core'
 import { Account } from '@app/shared/shared-main/account/account.model'
 import { AccountService } from '@app/shared/shared-main/account/account.service'
 import { DropdownAction } from '@app/shared/shared-main/buttons/action-dropdown.component'
@@ -76,30 +76,31 @@ export class AccountsComponent implements OnInit, OnDestroy {
     private videoService: VideoService,
     private markdown: MarkdownService,
     private blocklist: BlocklistService,
-    private screenService: ScreenService
+    private screenService: ScreenService,
+    private metaService: MetaService
   ) {
   }
 
   ngOnInit () {
     this.routeSub = this.route.params
-                        .pipe(
-                          map(params => params['accountId']),
-                          distinctUntilChanged(),
-                          switchMap(accountId => this.accountService.getAccount(accountId)),
-                          tap(account => this.onAccount(account)),
-                          switchMap(account => this.videoChannelService.listAccountVideoChannels({ account })),
-                          catchError(err => this.restExtractor.redirectTo404IfNotFound(err, 'other', [
-                            HttpStatusCode.BAD_REQUEST_400,
-                            HttpStatusCode.NOT_FOUND_404
-                          ]))
-                        )
-                        .subscribe({
-                          next: videoChannels => {
-                            this.videoChannels = videoChannels.data
-                          },
-
-                          error: err => this.notifier.error(err.message)
-                        })
+      .pipe(
+        map(params => params['accountId']),
+        distinctUntilChanged(),
+        switchMap(accountId => this.accountService.getAccount(accountId)),
+        tap(account => this.onAccount(account)),
+        switchMap(account => this.videoChannelService.listAccountVideoChannels({ account })),
+        catchError(err => this.restExtractor.redirectTo404IfNotFound(err, 'other', [
+          HttpStatusCode.BAD_REQUEST_400,
+          HttpStatusCode.NOT_FOUND_404
+        ]))
+      )
+      .subscribe({
+        next: videoChannels => {
+          this.videoChannels = videoChannels.data
+        },
+
+        error: err => this.notifier.error(err.message)
+      })
 
     this.links = [
       { label: $localize`CHANNELS`, routerLink: 'video-channels' },
@@ -169,6 +170,8 @@ export class AccountsComponent implements OnInit, OnDestroy {
   }
 
   private async onAccount (account: Account) {
+    this.metaService.setTitle(account.displayName)
+
     this.accountDescriptionHTML = await this.markdown.textMarkdownToHTML({
       markdown: account.description,
       withEmoji: true,

diff --git a/client/src/app/+accounts/routes.ts b/client/src/app/+accounts/routes.ts
@@ -35,20 +35,12 @@ export default [
       },
       {
         path: 'video-channels',
-        component: AccountVideoChannelsComponent,
-        data: {
-          meta: {
-            title: $localize`Account video channels`
-          }
-        }
+        component: AccountVideoChannelsComponent
       },
       {
         path: 'videos',
         component: AccountVideosComponent,
         data: {
-          meta: {
-            title: $localize`Account videos`
-          },
           reuse: {
             enabled: true,
             key: 'account-videos-list'

diff --git a/client/src/app/+video-channels/routes.ts b/client/src/app/+video-channels/routes.ts
@@ -31,9 +31,6 @@ export default [
         path: 'videos',
         component: VideoChannelVideosComponent,
         data: {
-          meta: {
-            title: $localize`Video channel videos`
-          },
           reuse: {
             enabled: true,
             key: 'video-channel-videos-list'
@@ -42,12 +39,7 @@ export default [
       },
       {
         path: 'video-playlists',
-        component: VideoChannelPlaylistsComponent,
-        data: {
-          meta: {
-            title: $localize`Video channel playlists`
-          }
-        }
+        component: VideoChannelPlaylistsComponent
       }
     ]
   }

diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts
@@ -2,7 +2,7 @@ import { Subscription } from 'rxjs'
 import { catchError, distinctUntilChanged, map, switchMap } from 'rxjs/operators'
 import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router'
-import { AuthService, MarkdownService, Notifier, RestExtractor, ScreenService, Hotkey, HotkeysService } from '@app/core'
+import { AuthService, MarkdownService, Notifier, RestExtractor, ScreenService, Hotkey, HotkeysService, MetaService } from '@app/core'
 import { HttpStatusCode, UserRight } from '@peertube/peertube-models'
 import { ListOverflowComponent, ListOverflowItem } from '../shared/shared-main/misc/list-overflow.component'
 import { CopyButtonComponent } from '../shared/shared-main/buttons/copy-button.component'
@@ -58,48 +58,50 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
 
   constructor (
     private route: ActivatedRoute,
-    private notifier: Notifier,
     private authService: AuthService,
     private videoChannelService: VideoChannelService,
     private videoService: VideoService,
     private restExtractor: RestExtractor,
     private hotkeysService: HotkeysService,
     private screenService: ScreenService,
     private markdown: MarkdownService,
-    private blocklist: BlocklistService
+    private blocklist: BlocklistService,
+    private metaService: MetaService
   ) { }
 
   ngOnInit () {
     this.routeSub = this.route.params
-                        .pipe(
-                          map(params => params['videoChannelName']),
-                          distinctUntilChanged(),
-                          switchMap(videoChannelName => this.videoChannelService.getVideoChannel(videoChannelName)),
-                          catchError(err => this.restExtractor.redirectTo404IfNotFound(err, 'other', [
-                            HttpStatusCode.BAD_REQUEST_400,
-                            HttpStatusCode.NOT_FOUND_404
-                          ]))
-                        )
-                        .subscribe(async videoChannel => {
-                          this.channelDescriptionHTML = await this.markdown.textMarkdownToHTML({
-                            markdown: videoChannel.description,
-                            withEmoji: true,
-                            withHtml: true
-                          })
-
-                          this.ownerDescriptionHTML = await this.markdown.textMarkdownToHTML({
-                            markdown: videoChannel.ownerAccount.description,
-                            withEmoji: true,
-                            withHtml: true
-                          })
-
-                          // After the markdown renderer to avoid layout changes
-                          this.videoChannel = videoChannel
-                          this.ownerAccount = new Account(this.videoChannel.ownerAccount)
-
-                          this.loadChannelVideosCount()
-                          this.loadOwnerBlockStatus()
-                        })
+      .pipe(
+        map(params => params['videoChannelName']),
+        distinctUntilChanged(),
+        switchMap(videoChannelName => this.videoChannelService.getVideoChannel(videoChannelName)),
+        catchError(err => this.restExtractor.redirectTo404IfNotFound(err, 'other', [
+          HttpStatusCode.BAD_REQUEST_400,
+          HttpStatusCode.NOT_FOUND_404
+        ]))
+      )
+      .subscribe(async videoChannel => {
+        this.metaService.setTitle(videoChannel.displayName)
+
+        this.channelDescriptionHTML = await this.markdown.textMarkdownToHTML({
+          markdown: videoChannel.description,
+          withEmoji: true,
+          withHtml: true
+        })
+
+        this.ownerDescriptionHTML = await this.markdown.textMarkdownToHTML({
+          markdown: videoChannel.ownerAccount.description,
+          withEmoji: true,
+          withHtml: true
+        })
+
+        // After the markdown renderer to avoid layout changes
+        this.videoChannel = videoChannel
+        this.ownerAccount = new Account(this.videoChannel.ownerAccount)
+
+        this.loadChannelVideosCount()
+        this.loadOwnerBlockStatus()
+      })
 
     this.hotkeys = [
       new Hotkey('Shift+s', () => {