aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-06-08 08:52:06 +0200
committerGitHub <noreply@github.com>2020-06-08 08:52:06 +0200
commitc2caa99b942dea7fa9d2856f53efd1316169658e (patch)
tree76dfa301d6fef72f6bdab38b2bf33bbac7cdb5b6 /client
parentc87d45df9b2f0d018d866d096c45ab70269105a5 (diff)
downloadPeerTube-c2caa99b942dea7fa9d2856f53efd1316169658e.tar.gz
PeerTube-c2caa99b942dea7fa9d2856f53efd1316169658e.tar.zst
PeerTube-c2caa99b942dea7fa9d2856f53efd1316169658e.zip
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
Diffstat (limited to 'client')
-rw-r--r--client/src/app/shared/channel/avatar.component.html6
-rw-r--r--client/src/app/shared/channel/avatar.component.scss13
-rw-r--r--client/src/app/shared/channel/avatar.component.ts28
-rw-r--r--client/src/app/shared/video/abstract-video-list.ts1
-rw-r--r--client/src/app/shared/video/video-miniature.component.html44
-rw-r--r--client/src/app/shared/video/video-miniature.component.ts2
-rw-r--r--client/src/app/videos/recommendations/recommended-videos.component.html2
-rw-r--r--client/src/app/videos/recommendations/recommended-videos.component.ts8
-rw-r--r--client/src/assets/images/global/search.svg2
-rw-r--r--client/src/assets/images/menu/trending.svg2
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 @@
1<div class="wrapper"> 1<div class="wrapper" [ngClass]="'avatar-' + size">
2 <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" i18n-title title="Go the channel page"> 2 <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
3 <img [src]="video.videoChannelAvatarUrl" alt="Channel avatar" /> 3 <img [src]="video.videoChannelAvatarUrl" alt="Channel avatar" />
4 </a> 4 </a>
5 <a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Go to the account page"> 5 <a [routerLink]="[ '/accounts', video.byAccount ]" [title]="accountLinkTitle">
6 <img [src]="video.accountAvatarUrl" alt="Account avatar" /> 6 <img [src]="video.accountAvatarUrl" alt="Account avatar" />
7 </a> 7 </a>
8</div> 8</div>
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 @@
1@import '_mixins'; 1@import '_mixins';
2 2
3.wrapper { 3.wrapper {
4 width: 35px; 4 $avatar-size: 35px;
5 height: 35px; 5
6 min-width: 35px; 6 width: $avatar-size;
7 min-height: 35px; 7 height: $avatar-size;
8 position: relative; 8 position: relative;
9 margin-right: 5px; 9 margin-right: 5px;
10 10
11 &.avatar-sm {
12 width: 28px;
13 height: 28px;
14 }
15
11 a { 16 a {
12 @include disable-outline; 17 @include disable-outline;
13 } 18 }
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 @@
1import { Component, Input } from '@angular/core' 1import { Component, Input, OnInit } from '@angular/core'
2import { VideoDetails } from '../video/video-details.model' 2import { Video } from '../video/video.model'
3import { I18n } from '@ngx-translate/i18n-polyfill'
3 4
4@Component({ 5@Component({
5 selector: 'avatar-channel', 6 selector: 'avatar-channel',
6 templateUrl: './avatar.component.html', 7 templateUrl: './avatar.component.html',
7 styleUrls: [ './avatar.component.scss' ] 8 styleUrls: [ './avatar.component.scss' ]
8}) 9})
9export class AvatarComponent { 10export class AvatarComponent implements OnInit {
10 @Input() video: VideoDetails 11 @Input() video: Video
12 @Input() size: 'md' | 'sm' = 'md'
13
14 channelLinkTitle = ''
15 accountLinkTitle = ''
16
17 constructor (
18 private i18n: I18n
19 ) {}
20
21 ngOnInit () {
22 this.channelLinkTitle = this.i18n(
23 'Go to the channel page of {{name}} ({{handle}})',
24 { name: this.video.channel.name, handle: this.video.byVideoChannel }
25 )
26 this.accountLinkTitle = this.i18n(
27 'Go to the account page of {{name}} ({{handle}})',
28 { name: this.video.account.name, handle: this.video.byAccount }
29 )
30 }
11} 31}
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
56 date: true, 56 date: true,
57 views: true, 57 views: true,
58 by: true, 58 by: true,
59 avatar: true,
59 privacyLabel: true, 60 privacyLabel: true,
60 privacyText: false, 61 privacyText: false,
61 state: false, 62 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 @@
15 [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }" 15 [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
16 >{{ video.name }}</a> 16 >{{ video.name }}</a>
17 17
18 <span class="video-miniature-created-at-views"> 18 <div class="d-inline-flex">
19 <my-date-toggle *ngIf="displayOptions.date" [date]="video.publishedAt"></my-date-toggle> 19 <avatar-channel *ngIf="displayOptions.avatar" class="mr-1 pt-1" [video]="video" size="sm"></avatar-channel>
20 20
21 <span class="views"> 21 <div class="d-flex flex-column">
22 <ng-container *ngIf="displayOptions.date && displayOptions.views"> • </ng-container> 22 <span class="video-miniature-created-at-views">
23 <ng-container i18n *ngIf="displayOptions.views">{video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}}</ng-container> 23 <my-date-toggle *ngIf="displayOptions.date" [date]="video.publishedAt"></my-date-toggle>
24 </span> 24
25 </span> 25 <span class="views">
26 26 <ng-container *ngIf="displayOptions.date && displayOptions.views"> • </ng-container>
27 <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]"> 27 <ng-container i18n *ngIf="displayOptions.views">{video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}}</ng-container>
28 {{ video.byAccount }} 28 </span>
29 </a> 29 </span>
30 <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]"> 30
31 {{ video.byVideoChannel }} 31 <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]">
32 </a> 32 {{ video.byAccount }}
33 33 </a>
34 <div class="video-info-privacy"> 34 <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]">
35 <ng-container *ngIf="displayOptions.privacyText">{{ video.privacy.label }}</ng-container> 35 {{ video.byVideoChannel }}
36 <ng-container *ngIf="displayOptions.privacyText && displayOptions.state && getStateLabel(video)"> - </ng-container> 36 </a>
37 <ng-container *ngIf="displayOptions.state">{{ getStateLabel(video) }}</ng-container> 37
38 <div class="video-info-privacy">
39 <ng-container *ngIf="displayOptions.privacyText">{{ video.privacy.label }}</ng-container>
40 <ng-container *ngIf="displayOptions.privacyText && displayOptions.state && getStateLabel(video)"> - </ng-container>
41 <ng-container *ngIf="displayOptions.state">{{ getStateLabel(video) }}</ng-container>
42 </div>
43 </div>
38 </div> 44 </div>
39 45
40 <div *ngIf="displayOptions.blacklistInfo && video.blacklisted" class="video-info-blacklisted"> 46 <div *ngIf="displayOptions.blacklistInfo && video.blacklisted" class="video-info-blacklisted">
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 = {
24 date?: boolean 24 date?: boolean
25 views?: boolean 25 views?: boolean
26 by?: boolean 26 by?: boolean
27 avatar?: boolean
27 privacyLabel?: boolean 28 privacyLabel?: boolean
28 privacyText?: boolean 29 privacyText?: boolean
29 state?: boolean 30 state?: boolean
@@ -46,6 +47,7 @@ export class VideoMiniatureComponent implements OnInit {
46 date: true, 47 date: true,
47 views: true, 48 views: true,
48 by: true, 49 by: true,
50 avatar: false,
49 privacyLabel: false, 51 privacyLabel: false,
50 privacyText: false, 52 privacyText: false,
51 state: false, 53 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 @@
13 </div> 13 </div>
14 14
15 <div *ngFor="let video of (videos$ | async); let i = index; let length = count"> 15 <div *ngFor="let video of (videos$ | async); let i = index; let length = count">
16 <my-video-miniature [video]="video" [user]="user" (videoBlacklisted)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()"> 16 <my-video-miniature [displayOptions]="displayOptions" [video]="video" [user]="user" (videoBlacklisted)="onVideoRemoved()" (videoRemoved)="onVideoRemoved()">
17 </my-video-miniature> 17 </my-video-miniature>
18 18
19 <hr *ngIf="!playlist && i == 0 && length > 1" /> 19 <hr *ngIf="!playlist && i == 0 && length > 1" />
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'
9import { UserService } from '@app/shared/users/user.service' 9import { UserService } from '@app/shared/users/user.service'
10import { I18n } from '@ngx-translate/i18n-polyfill' 10import { I18n } from '@ngx-translate/i18n-polyfill'
11import { SessionStorageService } from '@app/shared/misc/storage.service' 11import { SessionStorageService } from '@app/shared/misc/storage.service'
12import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component'
12 13
13@Component({ 14@Component({
14 selector: 'my-recommended-videos', 15 selector: 'my-recommended-videos',
@@ -24,6 +25,13 @@ export class RecommendedVideosComponent implements OnChanges {
24 autoPlayNextVideo: boolean 25 autoPlayNextVideo: boolean
25 autoPlayNextVideoTooltip: string 26 autoPlayNextVideoTooltip: string
26 27
28 displayOptions: MiniatureDisplayOptions = {
29 date: true,
30 views: true,
31 by: true,
32 avatar: true
33 }
34
27 readonly hasVideos$: Observable<boolean> 35 readonly hasVideos$: Observable<boolean>
28 readonly videos$: Observable<Video[]> 36 readonly videos$: Observable<Video[]>
29 37
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 @@
1<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> 1<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 24 24">
2 <defs/> 2 <defs/>
3 <g fill="none" fill-rule="evenodd" stroke="#000" stroke-width="2"> 3 <g fill="none" fill-rule="evenodd" stroke="#000" stroke-width="2">
4 <circle cx="10" cy="10" r="7"/> 4 <circle cx="10" cy="10" r="7"/>
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 @@
1<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> 1<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 24 24">
2 <defs/> 2 <defs/>
3 <g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> 3 <g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
4 <path d="M3 3v18h18"/> 4 <path d="M3 3v18h18"/>