diff options
author | Chocobozzz <me@florianbigard.com> | 2021-03-31 08:59:52 +0200 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2021-03-31 09:05:51 +0200 |
commit | 733dbc535d5fecdaba9e05feb8923bc754920525 (patch) | |
tree | adbf03df41ee05b3108ab9ad36ebc5622fd37f1d /client/src/app/shared/shared-video-miniature | |
parent | c8e80d1461076b36c93197a350ba9595110f65d6 (diff) | |
download | PeerTube-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/shared-video-miniature')
5 files changed, 14 insertions, 21 deletions
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 | |||
28 | import { ServerConfig, UserRight, VideoFilter, VideoSortField } from '@shared/models' | 28 | import { ServerConfig, UserRight, VideoFilter, VideoSortField } from '@shared/models' |
29 | import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type' | 29 | import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type' |
30 | import { Syndication, Video } from '../shared-main' | 30 | import { Syndication, Video } from '../shared-main' |
31 | import { MiniatureDisplayOptions, OwnerDisplayType } from './video-miniature.component' | ||
32 | import { GenericHeaderComponent, VideoListHeaderComponent } from './video-list-header.component' | 31 | import { GenericHeaderComponent, VideoListHeaderComponent } from './video-list-header.component' |
32 | import { MiniatureDisplayOptions } from './video-miniature.component' | ||
33 | 33 | ||
34 | enum GroupDate { | 34 | enum 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' | |||
16 | import { VideoPlaylistService } from '../shared-video-playlist' | 16 | import { VideoPlaylistService } from '../shared-video-playlist' |
17 | import { VideoActionsDisplayType } from './video-actions-dropdown.component' | 17 | import { VideoActionsDisplayType } from './video-actions-dropdown.component' |
18 | 18 | ||
19 | export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto' | 19 | export type OwnerDisplayType = 'account' | 'videoChannel' |
20 | export type MiniatureDisplayOptions = { | 20 | export 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 | |||
17 | import { ResultList, VideoSortField } from '@shared/models' | 17 | import { ResultList, VideoSortField } from '@shared/models' |
18 | import { PeerTubeTemplateDirective, Video } from '../shared-main' | 18 | import { PeerTubeTemplateDirective, Video } from '../shared-main' |
19 | import { AbstractVideoList } from './abstract-video-list' | 19 | import { AbstractVideoList } from './abstract-video-list' |
20 | import { MiniatureDisplayOptions, OwnerDisplayType } from './video-miniature.component' | 20 | import { MiniatureDisplayOptions } from './video-miniature.component' |
21 | 21 | ||
22 | export type SelectionType = { [ id: number ]: boolean } | 22 | export 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 | ||