aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-03-31 08:59:52 +0200
committerChocobozzz <chocobozzz@cpy.re>2021-03-31 09:05:51 +0200
commit733dbc535d5fecdaba9e05feb8923bc754920525 (patch)
treeadbf03df41ee05b3108ab9ad36ebc5622fd37f1d /client/src
parentc8e80d1461076b36c93197a350ba9595110f65d6 (diff)
downloadPeerTube-733dbc535d5fecdaba9e05feb8923bc754920525.tar.gz
PeerTube-733dbc535d5fecdaba9e05feb8923bc754920525.tar.zst
PeerTube-733dbc535d5fecdaba9e05feb8923bc754920525.zip
Channel/account page redesign feedbacks
Fix owner default avatar Semi bold orange inverted button Max width account description Increase account's channels padding Use owner avatar/display name links Move "view owner account" link on mobile Try to always display channel in video miniatures Add small border radius for channel's avatar Use main foreground color for the magnifying glass
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.html2
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.scss6
-rw-r--r--client/src/app/+accounts/accounts.component.html2
-rw-r--r--client/src/app/+accounts/accounts.component.scss2
-rw-r--r--client/src/app/+accounts/accounts.component.ts4
-rw-r--r--client/src/app/+my-library/my-videos/my-videos.component.html1
-rw-r--r--client/src/app/+my-library/my-videos/my-videos.component.ts5
-rw-r--r--client/src/app/+video-channels/video-channels.component.html14
-rw-r--r--client/src/app/+video-channels/video-channels.component.scss9
-rw-r--r--client/src/app/+video-channels/video-channels.component.ts8
-rw-r--r--client/src/app/+videos/video-list/video-user-subscriptions.component.ts3
-rw-r--r--client/src/app/shared/shared-main/account/video-avatar-channel.component.scss1
-rw-r--r--client/src/app/shared/shared-main/misc/simple-search-input.component.scss2
-rw-r--r--client/src/app/shared/shared-main/video-channel/video-channel.model.ts7
-rw-r--r--client/src/app/shared/shared-video-miniature/abstract-video-list.html3
-rw-r--r--client/src/app/shared/shared-video-miniature/abstract-video-list.ts3
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.ts23
-rw-r--r--client/src/app/shared/shared-video-miniature/videos-selection.component.html3
-rw-r--r--client/src/app/shared/shared-video-miniature/videos-selection.component.ts3
-rw-r--r--client/src/sass/include/_mixins.scss3
20 files changed, 63 insertions, 41 deletions
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 0b22e7526..19a4b3c9c 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -22,7 +22,7 @@
22 <div class="followers" i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div> 22 <div class="followers" i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
23 23
24 <span class="videos-count" *ngIf="getTotalVideosOf(videoChannel) !== undefined" i18n> 24 <span class="videos-count" *ngIf="getTotalVideosOf(videoChannel) !== undefined" i18n>
25 {getTotalVideosOf(videoChannel), splural, =1 {1 videos} other {{{ getTotalVideosOf(videoChannel) }} videos}} 25 {getTotalVideosOf(videoChannel), plural, =1 {1 videos} other {{{ getTotalVideosOf(videoChannel) }} videos}}
26 </span> 26 </span>
27 </div> 27 </div>
28 28
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index ca4c35cb4..8f1e9deb5 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -9,7 +9,7 @@
9.channel { 9.channel {
10 max-width: $max-channels-width; 10 max-width: $max-channels-width;
11 background-color: pvar(--channelBackgroundColor); 11 background-color: pvar(--channelBackgroundColor);
12 padding: 15px; 12 padding: 30px;
13 13
14 margin: 30px 0; 14 margin: 30px 0;
15 15
@@ -120,6 +120,10 @@ my-subscribe-button {
120} 120}
121 121
122@media screen and (max-width: $mobile-view) { 122@media screen and (max-width: $mobile-view) {
123 .channel {
124 padding: 15px;
125 }
126
123 .channel-avatar-row { 127 .channel-avatar-row {
124 grid-template-columns: auto auto auto 1fr; 128 grid-template-columns: auto auto auto 1fr;
125 129
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index e149d0bc6..03d083bb6 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -52,7 +52,7 @@
52 <div class="created-at" i18n>Account created on {{ account.createdAt | date }}</div> 52 <div class="created-at" i18n>Account created on {{ account.createdAt | date }}</div>
53 </div> 53 </div>
54 54
55 <div *ngIf="!accountDescriptionExpanded" class="show-more" role="button" 55 <div *ngIf="hasShowMoreDescription()" class="show-more" role="button"
56 (click)="accountDescriptionExpanded = !accountDescriptionExpanded" 56 (click)="accountDescriptionExpanded = !accountDescriptionExpanded"
57 title="Show the complete description" i18n-title i18n 57 title="Show the complete description" i18n-title i18n
58 > 58 >
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 6a51dd038..80f23ba6f 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -62,6 +62,8 @@ my-user-moderation-dropdown,
62 62
63.description { 63.description {
64 grid-column: 1 / 3; 64 grid-column: 1 / 3;
65 max-width: 1000px;
66 word-break: break-word;
65} 67}
66 68
67.created-at { 69.created-at {
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index abee0b9bb..e80314130 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/client/src/app/+accounts/accounts.component.ts
@@ -147,6 +147,10 @@ export class AccountsComponent implements OnInit, OnDestroy {
147 return this.videoChannels.length !== 0 147 return this.videoChannels.length !== 0
148 } 148 }
149 149
150 hasShowMoreDescription () {
151 return !this.accountDescriptionExpanded && this.accountDescriptionHTML.length > 100
152 }
153
150 private async onAccount (account: Account) { 154 private async onAccount (account: Account) {
151 this.accountFollowerTitle = $localize`${account.followersCount} direct account followers` 155 this.accountFollowerTitle = $localize`${account.followersCount} direct account followers`
152 156
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html
index 5fa4c02ec..6e6bf12f4 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.html
+++ b/client/src/app/+my-library/my-videos/my-videos.component.html
@@ -34,7 +34,6 @@
34 [miniatureDisplayOptions]="miniatureDisplayOptions" 34 [miniatureDisplayOptions]="miniatureDisplayOptions"
35 [titlePage]="titlePage" 35 [titlePage]="titlePage"
36 [getVideosObservableFunction]="getVideosObservableFunction" 36 [getVideosObservableFunction]="getVideosObservableFunction"
37 [ownerDisplayType]="ownerDisplayType"
38 [user]="user" 37 [user]="user"
39 #videosSelection 38 #videosSelection
40> 39>
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts
index 6a2a62608..0bc923e73 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.ts
+++ b/client/src/app/+my-library/my-videos/my-videos.component.ts
@@ -2,12 +2,12 @@ import { concat, Observable, Subject } from 'rxjs'
2import { debounceTime, tap, toArray } from 'rxjs/operators' 2import { debounceTime, tap, toArray } from 'rxjs/operators'
3import { Component, OnInit, ViewChild } from '@angular/core' 3import { Component, OnInit, ViewChild } from '@angular/core'
4import { ActivatedRoute, Router } from '@angular/router' 4import { ActivatedRoute, Router } from '@angular/router'
5import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User, UserService } from '@app/core' 5import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User } from '@app/core'
6import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook' 6import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
7import { immutableAssign } from '@app/helpers' 7import { immutableAssign } from '@app/helpers'
8import { DropdownAction, Video, VideoService } from '@app/shared/shared-main' 8import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
9import { LiveStreamInformationComponent } from '@app/shared/shared-video-live' 9import { LiveStreamInformationComponent } from '@app/shared/shared-video-live'
10import { MiniatureDisplayOptions, OwnerDisplayType, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature' 10import { MiniatureDisplayOptions, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
11import { VideoSortField } from '@shared/models' 11import { VideoSortField } from '@shared/models'
12import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component' 12import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component'
13 13
@@ -36,7 +36,6 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
36 state: true, 36 state: true,
37 blacklistInfo: true 37 blacklistInfo: true
38 } 38 }
39 ownerDisplayType: OwnerDisplayType = 'videoChannel'
40 39
41 videoActions: DropdownAction<{ video: Video }>[] = [] 40 videoActions: DropdownAction<{ video: Video }>[] = []
42 41
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index b9ac13f09..87e1b294b 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -17,10 +17,14 @@
17 <ng-template #ownerTemplate> 17 <ng-template #ownerTemplate>
18 <div class="owner-block"> 18 <div class="owner-block">
19 <div class="avatar-row"> 19 <div class="avatar-row">
20 <img class="account-avatar" [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" /> 20 <a [routerLink]="getAccountUrl()" title="View account" i18n-title>
21 <img class="account-avatar" [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
22 </a>
21 23
22 <div class="actor-info"> 24 <div class="actor-info">
23 <h4>{{ videoChannel.ownerAccount.displayName }}</h4> 25 <h4>
26 <a [routerLink]="getAccountUrl()" title="View account" i18n-title>{{ videoChannel.ownerAccount.displayName }}</a>
27 </h4>
24 28
25 <div class="actor-handle">@{{ videoChannel.ownerBy }}</div> 29 <div class="actor-handle">@{{ videoChannel.ownerBy }}</div>
26 </div> 30 </div>
@@ -30,11 +34,11 @@
30 <div class="description-html" [innerHTML]="ownerDescriptionHTML"></div> 34 <div class="description-html" [innerHTML]="ownerDescriptionHTML"></div>
31 </div> 35 </div>
32 36
33 <a class="view-account short" [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n> 37 <a class="view-account short" [routerLink]="getAccountUrl()" i18n>
34 View account 38 View account
35 </a> 39 </a>
36 40
37 <a class="view-account complete" [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n> 41 <a class="view-account complete" [routerLink]="getAccountUrl()" i18n>
38 View owner account 42 View owner account
39 </a> 43 </a>
40 </div> 44 </div>
@@ -83,7 +87,7 @@
83 <div class="created-at" i18n>Channel created on {{ videoChannel.createdAt | date }}</div> 87 <div class="created-at" i18n>Channel created on {{ videoChannel.createdAt | date }}</div>
84 </div> 88 </div>
85 89
86 <div *ngIf="!channelDescriptionExpanded" class="show-more" role="button" 90 <div *ngIf="hasShowMoreDescription()" class="show-more" role="button"
87 (click)="channelDescriptionExpanded = !channelDescriptionExpanded" 91 (click)="channelDescriptionExpanded = !channelDescriptionExpanded"
88 title="Show the complete description" i18n-title i18n 92 title="Show the complete description" i18n-title i18n
89 > 93 >
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index ec8f67a7e..3b27f3aa1 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -42,6 +42,7 @@
42 42
43.channel-description { 43.channel-description {
44 grid-column: 1; 44 grid-column: 1;
45 word-break: break-word;
45} 46}
46 47
47.show-more { 48.show-more {
@@ -108,6 +109,10 @@
108 h4 { 109 h4 {
109 font-size: 18px; 110 font-size: 18px;
110 margin: 0; 111 margin: 0;
112
113 a {
114 color: pvar(--mainForegroundColor);
115 }
111 } 116 }
112 117
113 .actor-handle { 118 .actor-handle {
@@ -118,6 +123,7 @@
118 123
119 .owner-description { 124 .owner-description {
120 height: 140px; 125 height: 140px;
126 word-break: break-word;
121 127
122 @include fade-text(120px, pvar(--mainBackgroundColor)); 128 @include fade-text(120px, pvar(--mainBackgroundColor));
123 } 129 }
@@ -217,7 +223,8 @@
217 } 223 }
218 224
219 .view-account.complete { 225 .view-account.complete {
220 display: inline-block; 226 display: block;
227 text-align: right;
221 margin-top: 10px; 228 margin-top: 10px;
222 color: pvar(--mainColor); 229 color: pvar(--mainColor);
223 } 230 }
diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts
index a8ca3d6ff..2739047ed 100644
--- a/client/src/app/+video-channels/video-channels.component.ts
+++ b/client/src/app/+video-channels/video-channels.component.ts
@@ -103,10 +103,18 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
103 this.notifier.success($localize`Username copied`) 103 this.notifier.success($localize`Username copied`)
104 } 104 }
105 105
106 hasShowMoreDescription () {
107 return !this.channelDescriptionExpanded && this.channelDescriptionHTML.length > 100
108 }
109
106 showSupportModal () { 110 showSupportModal () {
107 this.supportModal.show() 111 this.supportModal.show()
108 } 112 }
109 113
114 getAccountUrl () {
115 return [ '/accounts', this.videoChannel.ownerBy ]
116 }
117
110 private loadChannelVideosCount () { 118 private loadChannelVideosCount () {
111 this.videoService.getVideoChannelVideos({ 119 this.videoService.getVideoChannelVideos({
112 videoChannel: this.videoChannel, 120 videoChannel: this.videoChannel,
diff --git a/client/src/app/+videos/video-list/video-user-subscriptions.component.ts b/client/src/app/+videos/video-list/video-user-subscriptions.component.ts
index e352a2b2c..6aabb93a5 100644
--- a/client/src/app/+videos/video-list/video-user-subscriptions.component.ts
+++ b/client/src/app/+videos/video-list/video-user-subscriptions.component.ts
@@ -7,7 +7,7 @@ import { HooksService } from '@app/core/plugins/hooks.service'
7import { immutableAssign } from '@app/helpers' 7import { immutableAssign } from '@app/helpers'
8import { VideoService } from '@app/shared/shared-main' 8import { VideoService } from '@app/shared/shared-main'
9import { UserSubscriptionService } from '@app/shared/shared-user-subscription' 9import { UserSubscriptionService } from '@app/shared/shared-user-subscription'
10import { AbstractVideoList, OwnerDisplayType } from '@app/shared/shared-video-miniature' 10import { AbstractVideoList } from '@app/shared/shared-video-miniature'
11import { FeedFormat, VideoSortField } from '@shared/models' 11import { FeedFormat, VideoSortField } from '@shared/models'
12import { environment } from '../../../environments/environment' 12import { environment } from '../../../environments/environment'
13import { copyToClipboard } from '../../../root-helpers/utils' 13import { copyToClipboard } from '../../../root-helpers/utils'
@@ -20,7 +20,6 @@ import { copyToClipboard } from '../../../root-helpers/utils'
20export class VideoUserSubscriptionsComponent extends AbstractVideoList implements OnInit, OnDestroy { 20export class VideoUserSubscriptionsComponent extends AbstractVideoList implements OnInit, OnDestroy {
21 titlePage: string 21 titlePage: string
22 sort = '-publishedAt' as VideoSortField 22 sort = '-publishedAt' as VideoSortField
23 ownerDisplayType: OwnerDisplayType = 'auto'
24 groupByDate = true 23 groupByDate = true
25 24
26 constructor ( 25 constructor (
diff --git a/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss b/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss
index ea7cb2cf7..4998e85fa 100644
--- a/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss
+++ b/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss
@@ -26,6 +26,7 @@
26 top:50%; 26 top:50%;
27 left:50%; 27 left:50%;
28 transform: translate(-50%,-50%); 28 transform: translate(-50%,-50%);
29 border-radius: 5px;
29 30
30 &:not(.channel-avatar) { 31 &:not(.channel-avatar) {
31 border-radius: 50%; 32 border-radius: 50%;
diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
index 116ff7ea0..5ae48f81b 100644
--- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
+++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss
@@ -16,7 +16,7 @@ my-global-icon {
16 } 16 }
17 17
18 &[iconName=search] { 18 &[iconName=search] {
19 color: pvar(--mainColor); 19 color: pvar(--mainForegroundColor);
20 } 20 }
21 21
22 &[iconName=cross] { 22 &[iconName=cross] {
diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
index bd187a873..126e43cea 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
@@ -1,4 +1,5 @@
1import { VideoChannel as ServerVideoChannel, ViewsPerDate, Account, Avatar } from '@shared/models' 1import { Account as ServerAccount, Avatar, VideoChannel as ServerVideoChannel, ViewsPerDate } from '@shared/models'
2import { Account } from '../account/account.model'
2import { Actor } from '../account/actor.model' 3import { Actor } from '../account/actor.model'
3 4
4export class VideoChannel extends Actor implements ServerVideoChannel { 5export class VideoChannel extends Actor implements ServerVideoChannel {
@@ -9,7 +10,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
9 nameWithHost: string 10 nameWithHost: string
10 nameWithHostForced: string 11 nameWithHostForced: string
11 12
12 ownerAccount?: Account 13 ownerAccount?: ServerAccount
13 ownerBy?: string 14 ownerBy?: string
14 ownerAvatarUrl?: string 15 ownerAvatarUrl?: string
15 16
@@ -46,7 +47,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
46 if (hash.ownerAccount) { 47 if (hash.ownerAccount) {
47 this.ownerAccount = hash.ownerAccount 48 this.ownerAccount = hash.ownerAccount
48 this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host) 49 this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host)
49 this.ownerAvatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.ownerAccount) 50 this.ownerAvatarUrl = Account.GET_ACTOR_AVATAR_URL(this.ownerAccount)
50 } 51 }
51 } 52 }
52 53
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.html b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
index 07f79cd6d..41d5906cf 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.html
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
@@ -52,8 +52,7 @@
52 52
53 <div class="video-wrapper"> 53 <div class="video-wrapper">
54 <my-video-miniature 54 <my-video-miniature
55 [fitWidth]="true" 55 [fitWidth]="true" [video]="video" [user]="userMiniature"
56 [video]="video" [user]="userMiniature" [ownerDisplayType]="ownerDisplayType"
57 [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions" 56 [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
58 (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)" 57 (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
59 > 58 >
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
index f41648e1c..18615c37a 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
@@ -28,8 +28,8 @@ import { isLastMonth, isLastWeek, isThisMonth, isToday, isYesterday } from '@sha
28import { ServerConfig, UserRight, VideoFilter, VideoSortField } from '@shared/models' 28import { ServerConfig, UserRight, VideoFilter, VideoSortField } from '@shared/models'
29import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type' 29import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
30import { Syndication, Video } from '../shared-main' 30import { Syndication, Video } from '../shared-main'
31import { MiniatureDisplayOptions, OwnerDisplayType } from './video-miniature.component'
32import { GenericHeaderComponent, VideoListHeaderComponent } from './video-list-header.component' 31import { GenericHeaderComponent, VideoListHeaderComponent } from './video-list-header.component'
32import { MiniatureDisplayOptions } from './video-miniature.component'
33 33
34enum GroupDate { 34enum GroupDate {
35 UNKNOWN = 0, 35 UNKNOWN = 0,
@@ -65,7 +65,6 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte
65 loadOnInit = true 65 loadOnInit = true
66 loadUserVideoPreferences = false 66 loadUserVideoPreferences = false
67 67
68 ownerDisplayType: OwnerDisplayType = 'auto'
69 displayModerationBlock = false 68 displayModerationBlock = false
70 titleTooltip: string 69 titleTooltip: string
71 displayVideoActions = true 70 displayVideoActions = true
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 f08be9c25..987a65e40 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -16,7 +16,7 @@ import { Video } from '../shared-main'
16import { VideoPlaylistService } from '../shared-video-playlist' 16import { VideoPlaylistService } from '../shared-video-playlist'
17import { VideoActionsDisplayType } from './video-actions-dropdown.component' 17import { VideoActionsDisplayType } from './video-actions-dropdown.component'
18 18
19export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto' 19export type OwnerDisplayType = 'account' | 'videoChannel'
20export type MiniatureDisplayOptions = { 20export type MiniatureDisplayOptions = {
21 date?: boolean 21 date?: boolean
22 views?: boolean 22 views?: boolean
@@ -40,7 +40,6 @@ export class VideoMiniatureComponent implements OnInit {
40 @Input() user: User 40 @Input() user: User
41 @Input() video: Video 41 @Input() video: Video
42 42
43 @Input() ownerDisplayType: OwnerDisplayType = 'account'
44 @Input() displayOptions: MiniatureDisplayOptions = { 43 @Input() displayOptions: MiniatureDisplayOptions = {
45 date: true, 44 date: true,
46 views: true, 45 views: true,
@@ -89,7 +88,7 @@ export class VideoMiniatureComponent implements OnInit {
89 videoHref: string 88 videoHref: string
90 videoTarget: string 89 videoTarget: string
91 90
92 private ownerDisplayTypeChosen: 'account' | 'videoChannel' 91 private ownerDisplayType: 'account' | 'videoChannel'
93 92
94 constructor ( 93 constructor (
95 private screenService: ScreenService, 94 private screenService: ScreenService,
@@ -140,11 +139,11 @@ export class VideoMiniatureComponent implements OnInit {
140 } 139 }
141 140
142 displayOwnerAccount () { 141 displayOwnerAccount () {
143 return this.ownerDisplayTypeChosen === 'account' 142 return this.ownerDisplayType === 'account'
144 } 143 }
145 144
146 displayOwnerVideoChannel () { 145 displayOwnerVideoChannel () {
147 return this.ownerDisplayTypeChosen === 'videoChannel' 146 return this.ownerDisplayType === 'videoChannel'
148 } 147 }
149 148
150 isUnlistedVideo () { 149 isUnlistedVideo () {
@@ -245,21 +244,19 @@ export class VideoMiniatureComponent implements OnInit {
245 } 244 }
246 245
247 private setUpBy () { 246 private setUpBy () {
248 if (this.ownerDisplayType === 'account' || this.ownerDisplayType === 'videoChannel') { 247 const accountName = this.video.account.name
249 this.ownerDisplayTypeChosen = this.ownerDisplayType
250 return
251 }
252 248
253 // If the video channel name is an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12) 249 // If the video channel name is an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
254 // Or is just a suffix of the account (default created channel) 250 // Or has not been customized (default created channel display name)
255 // -> Use the account name 251 // -> Use the account name
256 if ( 252 if (
257 this.video.channel.name === `${this.video.account.name}_channel` || 253 this.video.channel.displayName === `Default ${accountName} channel` ||
254 this.video.channel.displayName === `Main ${accountName} channel` ||
258 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}$/) 255 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}$/)
259 ) { 256 ) {
260 this.ownerDisplayTypeChosen = 'account' 257 this.ownerDisplayType = 'account'
261 } else { 258 } else {
262 this.ownerDisplayTypeChosen = 'videoChannel' 259 this.ownerDisplayType = 'videoChannel'
263 } 260 }
264 } 261 }
265 262
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.html b/client/src/app/shared/shared-video-miniature/videos-selection.component.html
index 8caeaf092..dec9e99f3 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.html
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.html
@@ -9,8 +9,7 @@
9 9
10 <my-video-miniature 10 <my-video-miniature
11 [video]="video" [displayAsRow]="true" [displayOptions]="miniatureDisplayOptions" 11 [video]="video" [displayAsRow]="true" [displayOptions]="miniatureDisplayOptions"
12 [displayVideoActions]="false" [ownerDisplayType]="ownerDisplayType" 12 [displayVideoActions]="false" [user]="user"
13 [user]="user"
14 ></my-video-miniature> 13 ></my-video-miniature>
15 14
16 <!-- Display only once --> 15 <!-- Display only once -->
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
index ca1cf2264..f8c3800d7 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
@@ -17,7 +17,7 @@ import { AuthService, ComponentPagination, LocalStorageService, Notifier, Screen
17import { ResultList, VideoSortField } from '@shared/models' 17import { ResultList, VideoSortField } from '@shared/models'
18import { PeerTubeTemplateDirective, Video } from '../shared-main' 18import { PeerTubeTemplateDirective, Video } from '../shared-main'
19import { AbstractVideoList } from './abstract-video-list' 19import { AbstractVideoList } from './abstract-video-list'
20import { MiniatureDisplayOptions, OwnerDisplayType } from './video-miniature.component' 20import { MiniatureDisplayOptions } from './video-miniature.component'
21 21
22export type SelectionType = { [ id: number ]: boolean } 22export type SelectionType = { [ id: number ]: boolean }
23 23
@@ -31,7 +31,6 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni
31 @Input() pagination: ComponentPagination 31 @Input() pagination: ComponentPagination
32 @Input() titlePage: string 32 @Input() titlePage: string
33 @Input() miniatureDisplayOptions: MiniatureDisplayOptions 33 @Input() miniatureDisplayOptions: MiniatureDisplayOptions
34 @Input() ownerDisplayType: OwnerDisplayType
35 34
36 @Input() getVideosObservableFunction: (page: number, sort?: VideoSortField) => Observable<ResultList<Video>> 35 @Input() getVideosObservableFunction: (page: number, sort?: VideoSortField) => Observable<ResultList<Video>>
37 36
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 7b862a156..affffc4cc 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -152,7 +152,7 @@
152 @include button-focus(pvar(--mainColorLightest)); 152 @include button-focus(pvar(--mainColorLightest));
153 153
154 border: 2px solid pvar(--mainColor); 154 border: 2px solid pvar(--mainColor);
155 font-weight: $font-regular; 155 font-weight: $font-semibold;
156 156
157 &, &:active, &:focus { 157 &, &:active, &:focus {
158 color: pvar(--mainColor); 158 color: pvar(--mainColor);
@@ -551,6 +551,7 @@
551 height: $size; 551 height: $size;
552 min-width: $size; 552 min-width: $size;
553 min-height: $size; 553 min-height: $size;
554 border-radius: 5px;
554} 555}
555 556
556@mixin chevron ($size, $border-width) { 557@mixin chevron ($size, $border-width) {