aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
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/app/shared
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/app/shared')
-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
8 files changed, 20 insertions, 25 deletions
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