Channel/account page redesign feedbacks

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-video-miniature / video-miniature.component.ts

diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index f434550dda88686aeebea5450255542375bc8c2b..987a65e4021801facf38549571c4fe46c3fbcff7 100644 (file)
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -11,13 +11,12 @@ import {
   Output
 } from '@angular/core'
 import { AuthService, ScreenService, ServerService, User } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
-import { ServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '../../../../../shared'
+import { ServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '@shared/models'
 import { Video } from '../shared-main'
 import { VideoPlaylistService } from '../shared-video-playlist'
 import { VideoActionsDisplayType } from './video-actions-dropdown.component'
 
-export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
+export type OwnerDisplayType = 'account' | 'videoChannel'
 export type MiniatureDisplayOptions = {
   date?: boolean
   views?: boolean
@@ -41,7 +40,6 @@ export class VideoMiniatureComponent implements OnInit {
   @Input() user: User
   @Input() video: Video
 
-  @Input() ownerDisplayType: OwnerDisplayType = 'account'
   @Input() displayOptions: MiniatureDisplayOptions = {
     date: true,
     views: true,
@@ -90,12 +88,11 @@ export class VideoMiniatureComponent implements OnInit {
   videoHref: string
   videoTarget: string
 
-  private ownerDisplayTypeChosen: 'account' | 'videoChannel'
+  private ownerDisplayType: 'account' | 'videoChannel'
 
   constructor (
     private screenService: ScreenService,
     private serverService: ServerService,
-    private i18n: I18n,
     private authService: AuthService,
     private videoPlaylistService: VideoPlaylistService,
     private cd: ChangeDetectorRef,
@@ -116,10 +113,7 @@ export class VideoMiniatureComponent implements OnInit {
 
     this.setUpBy()
 
-    this.channelLinkTitle = this.i18n(
-      '{{name}} (channel page)',
-      { name: this.video.channel.name, handle: this.video.byVideoChannel }
-    )
+    this.channelLinkTitle = $localize`${this.video.channel.name} (channel page)`
 
     // We rely on mouseenter to lazy load actions
     if (this.screenService.isInTouchScreen()) {
@@ -145,11 +139,11 @@ export class VideoMiniatureComponent implements OnInit {
   }
 
   displayOwnerAccount () {
-    return this.ownerDisplayTypeChosen === 'account'
+    return this.ownerDisplayType === 'account'
   }
 
   displayOwnerVideoChannel () {
-    return this.ownerDisplayTypeChosen === 'videoChannel'
+    return this.ownerDisplayType === 'videoChannel'
   }
 
   isUnlistedVideo () {
@@ -164,31 +158,31 @@ export class VideoMiniatureComponent implements OnInit {
     if (!video.state) return ''
 
     if (video.privacy.id !== VideoPrivacy.PRIVATE && video.state.id === VideoState.PUBLISHED) {
-      return this.i18n('Published')
+      return $localize`Published`
     }
 
     if (video.scheduledUpdate) {
       const updateAt = new Date(video.scheduledUpdate.updateAt.toString()).toLocaleString(this.localeId)
-      return this.i18n('Publication scheduled on ') + updateAt
+      return $localize`Publication scheduled on ` + updateAt
     }
 
     if (video.state.id === VideoState.TO_TRANSCODE && video.waitTranscoding === true) {
-      return this.i18n('Waiting transcoding')
+      return $localize`Waiting transcoding`
     }
 
     if (video.state.id === VideoState.TO_TRANSCODE) {
-      return this.i18n('To transcode')
+      return $localize`To transcode`
     }
 
     if (video.state.id === VideoState.TO_IMPORT) {
-      return this.i18n('To import')
+      return $localize`To import`
     }
 
     return ''
   }
 
   getAvatarUrl () {
-    if (this.ownerDisplayTypeChosen === 'account') {
+    if (this.displayOwnerAccount()) {
       return this.video.accountAvatarUrl
     }
 
@@ -250,20 +244,19 @@ export class VideoMiniatureComponent implements OnInit {
   }
 
   private setUpBy () {
-    if (this.ownerDisplayType === 'account' || this.ownerDisplayType === 'videoChannel') {
-      this.ownerDisplayTypeChosen = this.ownerDisplayType
-      return
-    }
+    const accountName = this.video.account.name
 
-    // If the video channel name an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
+    // If the video channel name is an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
+    // Or has not been customized (default created channel display name)
     // -> Use the account name
     if (
-      this.video.channel.name === `${this.video.account.name}_channel` ||
+      this.video.channel.displayName === `Default ${accountName} channel` ||
+      this.video.channel.displayName === `Main ${accountName} channel` ||
       this.video.channel.name.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/)
     ) {
-      this.ownerDisplayTypeChosen = 'account'
+      this.ownerDisplayType = 'account'
     } else {
-      this.ownerDisplayTypeChosen = 'videoChannel'
+      this.ownerDisplayType = 'videoChannel'
     }
   }