From c2caa99b942dea7fa9d2856f53efd1316169658e Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Mon, 8 Jun 2020 08:52:06 +0200 Subject: [PATCH] Add channel/account avatars in miniature (#2838) * add small avatar to miniature * fix svg size for trending and search icons in plugins view * parametrize avatar in miniature display options --- .../app/shared/channel/avatar.component.html | 6 +-- .../app/shared/channel/avatar.component.scss | 13 ++++-- .../app/shared/channel/avatar.component.ts | 28 ++++++++++-- .../app/shared/video/abstract-video-list.ts | 1 + .../video/video-miniature.component.html | 44 +++++++++++-------- .../shared/video/video-miniature.component.ts | 2 + .../recommended-videos.component.html | 2 +- .../recommended-videos.component.ts | 8 ++++ client/src/assets/images/global/search.svg | 2 +- client/src/assets/images/menu/trending.svg | 2 +- 10 files changed, 75 insertions(+), 33 deletions(-) diff --git a/client/src/app/shared/channel/avatar.component.html b/client/src/app/shared/channel/avatar.component.html index 362feacd7..062ef5bde 100644 --- a/client/src/app/shared/channel/avatar.component.html +++ b/client/src/app/shared/channel/avatar.component.html @@ -1,8 +1,8 @@ -
- + diff --git a/client/src/app/shared/channel/avatar.component.scss b/client/src/app/shared/channel/avatar.component.scss index 6629a4327..77b90c579 100644 --- a/client/src/app/shared/channel/avatar.component.scss +++ b/client/src/app/shared/channel/avatar.component.scss @@ -1,13 +1,18 @@ @import '_mixins'; .wrapper { - width: 35px; - height: 35px; - min-width: 35px; - min-height: 35px; + $avatar-size: 35px; + + width: $avatar-size; + height: $avatar-size; position: relative; margin-right: 5px; + &.avatar-sm { + width: 28px; + height: 28px; + } + a { @include disable-outline; } diff --git a/client/src/app/shared/channel/avatar.component.ts b/client/src/app/shared/channel/avatar.component.ts index 2201c04ca..2c8eeb4b2 100644 --- a/client/src/app/shared/channel/avatar.component.ts +++ b/client/src/app/shared/channel/avatar.component.ts @@ -1,11 +1,31 @@ -import { Component, Input } from '@angular/core' -import { VideoDetails } from '../video/video-details.model' +import { Component, Input, OnInit } from '@angular/core' +import { Video } from '../video/video.model' +import { I18n } from '@ngx-translate/i18n-polyfill' @Component({ selector: 'avatar-channel', templateUrl: './avatar.component.html', styleUrls: [ './avatar.component.scss' ] }) -export class AvatarComponent { - @Input() video: VideoDetails +export class AvatarComponent implements OnInit { + @Input() video: Video + @Input() size: 'md' | 'sm' = 'md' + + channelLinkTitle = '' + accountLinkTitle = '' + + constructor ( + private i18n: I18n + ) {} + + ngOnInit () { + this.channelLinkTitle = this.i18n( + 'Go to the channel page of {{name}} ({{handle}})', + { name: this.video.channel.name, handle: this.video.byVideoChannel } + ) + this.accountLinkTitle = this.i18n( + 'Go to the account page of {{name}} ({{handle}})', + { name: this.video.account.name, handle: this.video.byAccount } + ) + } } diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts index b146d7014..69d5c0010 100644 --- a/client/src/app/shared/video/abstract-video-list.ts +++ b/client/src/app/shared/video/abstract-video-list.ts @@ -56,6 +56,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor date: true, views: true, by: true, + avatar: true, privacyLabel: true, privacyText: false, state: false, diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html index 8e948ce42..c9ac97762 100644 --- a/client/src/app/shared/video/video-miniature.component.html +++ b/client/src/app/shared/video/video-miniature.component.html @@ -15,26 +15,32 @@ [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }" >{{ video.name }} - - +
+ - - - {video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}} - - - - - - {{ video.byVideoChannel }} - - -
- {{ video.privacy.label }} - - - {{ getStateLabel(video) }} +
+ + + + + + {video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}} + + + + + + {{ video.byVideoChannel }} + + +
+ {{ video.privacy.label }} + - + {{ getStateLabel(video) }} +
+
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts index 72b652448..88b21b3a5 100644 --- a/client/src/app/shared/video/video-miniature.component.ts +++ b/client/src/app/shared/video/video-miniature.component.ts @@ -24,6 +24,7 @@ export type MiniatureDisplayOptions = { date?: boolean views?: boolean by?: boolean + avatar?: boolean privacyLabel?: boolean privacyText?: boolean state?: boolean @@ -46,6 +47,7 @@ export class VideoMiniatureComponent implements OnInit { date: true, views: true, by: true, + avatar: false, privacyLabel: false, privacyText: false, state: false, diff --git a/client/src/app/videos/recommendations/recommended-videos.component.html b/client/src/app/videos/recommendations/recommended-videos.component.html index 74f9ed2a5..c6bdfee46 100644 --- a/client/src/app/videos/recommendations/recommended-videos.component.html +++ b/client/src/app/videos/recommendations/recommended-videos.component.html @@ -13,7 +13,7 @@
- +
diff --git a/client/src/app/videos/recommendations/recommended-videos.component.ts b/client/src/app/videos/recommendations/recommended-videos.component.ts index d4b4c929b..d4a5df19a 100644 --- a/client/src/app/videos/recommendations/recommended-videos.component.ts +++ b/client/src/app/videos/recommendations/recommended-videos.component.ts @@ -9,6 +9,7 @@ import { AuthService, Notifier } from '@app/core' import { UserService } from '@app/shared/users/user.service' import { I18n } from '@ngx-translate/i18n-polyfill' import { SessionStorageService } from '@app/shared/misc/storage.service' +import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component' @Component({ selector: 'my-recommended-videos', @@ -24,6 +25,13 @@ export class RecommendedVideosComponent implements OnChanges { autoPlayNextVideo: boolean autoPlayNextVideoTooltip: string + displayOptions: MiniatureDisplayOptions = { + date: true, + views: true, + by: true, + avatar: true + } + readonly hasVideos$: Observable readonly videos$: Observable diff --git a/client/src/assets/images/global/search.svg b/client/src/assets/images/global/search.svg index 55c851014..1583c437b 100644 --- a/client/src/assets/images/global/search.svg +++ b/client/src/assets/images/global/search.svg @@ -1,4 +1,4 @@ - + diff --git a/client/src/assets/images/menu/trending.svg b/client/src/assets/images/menu/trending.svg index b21bb1e9f..8f821f3d7 100644 --- a/client/src/assets/images/menu/trending.svg +++ b/client/src/assets/images/menu/trending.svg @@ -1,4 +1,4 @@ - +