aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2020-06-11 14:33:33 +0200
committerChocobozzz <me@florianbigard.com>2020-06-11 16:41:51 +0200
commitcf78883c70dca99fc519374d55620d9403d482be (patch)
treef5a10b078414ba5f0f3562a945b3e6cce9524e3a /client/src/app/shared
parent7e4022a554016ef7b8274f0473210e2232f5f455 (diff)
downloadPeerTube-cf78883c70dca99fc519374d55620d9403d482be.tar.gz
PeerTube-cf78883c70dca99fc519374d55620d9403d482be.tar.zst
PeerTube-cf78883c70dca99fc519374d55620d9403d482be.zip
Limit thumbnail sizes
Diffstat (limited to 'client/src/app/shared')
-rw-r--r--client/src/app/shared/misc/screen.service.ts10
-rw-r--r--client/src/app/shared/video/abstract-video-list.html16
-rw-r--r--client/src/app/shared/video/abstract-video-list.scss23
-rw-r--r--client/src/app/shared/video/abstract-video-list.ts7
-rw-r--r--client/src/app/shared/video/video-miniature.component.html22
-rw-r--r--client/src/app/shared/video/video-miniature.component.scss14
-rw-r--r--client/src/app/shared/video/video-miniature.component.ts8
7 files changed, 53 insertions, 47 deletions
diff --git a/client/src/app/shared/misc/screen.service.ts b/client/src/app/shared/misc/screen.service.ts
index fa9c71e5b..a69fad31d 100644
--- a/client/src/app/shared/misc/screen.service.ts
+++ b/client/src/app/shared/misc/screen.service.ts
@@ -36,11 +36,11 @@ export class ScreenService {
36 36
37 let numberOfVideos = 1 37 let numberOfVideos = 1
38 38
39 if (screenWidth > 1850) numberOfVideos = 6 39 if (screenWidth > 1850) numberOfVideos = 7
40 else if (screenWidth > 1600) numberOfVideos = 5 40 else if (screenWidth > 1600) numberOfVideos = 6
41 else if (screenWidth > 1370) numberOfVideos = 4 41 else if (screenWidth > 1370) numberOfVideos = 5
42 else if (screenWidth > 1100) numberOfVideos = 3 42 else if (screenWidth > 1100) numberOfVideos = 4
43 else if (screenWidth > 850) numberOfVideos = 2 43 else if (screenWidth > 850) numberOfVideos = 3
44 44
45 return numberOfVideos 45 return numberOfVideos
46 } 46 }
diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index 8ce3b25b0..9e551c1c8 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -35,13 +35,15 @@
35 {{ getCurrentGroupedDateLabel(video) }} 35 {{ getCurrentGroupedDateLabel(video) }}
36 </div> 36 </div>
37 37
38 <my-video-miniature 38 <div class="video-wrapper">
39 [fitWidth]="true" 39 <my-video-miniature
40 [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType" 40 [fitWidth]="true"
41 [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions" 41 [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"
42 (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)" 42 [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
43 > 43 (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
44 </my-video-miniature> 44 >
45 </my-video-miniature>
46 </div>
45 </ng-container> 47 </ng-container>
46 </div> 48 </div>
47</div> 49</div>
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 982204e21..7f23098aa 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -3,24 +3,6 @@
3@import '_mixins'; 3@import '_mixins';
4@import '_miniature'; 4@import '_miniature';
5 5
6.videos {
7 $column-width: #{$video-thumbnail-width - 25px};
8
9 display: grid;
10 column-gap: calc(10px + .2%);
11 grid-template-columns: repeat(
12 auto-fill,
13 minmax(
14 var(--miniature-min-width, #{$column-width}),
15 1fr
16 )
17 );
18
19 @media screen and (min-width: #{breakpoint(fhd)}) {
20 --miniature-min-width: #{$column-width + 100px};
21 }
22}
23
24.videos-header { 6.videos-header {
25 display: flex; 7 display: flex;
26 justify-content: space-between; 8 justify-content: space-between;
@@ -74,8 +56,8 @@
74 } 56 }
75} 57}
76 58
77:host-context(.main-col:not(.expanded)) .margin-content { 59.margin-content {
78 @include adapt-margin-content-width($fluid: true); 60 @include fluid-videos-miniature-layout;
79} 61}
80 62
81@media screen and (max-width: $mobile-view) { 63@media screen and (max-width: $mobile-view) {
@@ -83,6 +65,7 @@
83 flex-direction: column; 65 flex-direction: column;
84 align-items: center; 66 align-items: center;
85 height: auto; 67 height: auto;
68 margin-bottom: 10px;
86 69
87 .title-page { 70 .title-page {
88 margin-bottom: 10px; 71 margin-bottom: 10px;
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index 69d5c0010..76aa683fc 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -56,7 +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 avatar: false,
60 privacyLabel: true, 60 privacyLabel: true,
61 privacyText: false, 61 privacyText: false,
62 state: false, 62 state: false,
@@ -139,6 +139,11 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
139 if (this.hasDoneFirstQuery) this.reloadVideos() 139 if (this.hasDoneFirstQuery) this.reloadVideos()
140 } 140 }
141 ) 141 )
142
143 // Display avatar in mobile view
144 if (this.screenService.isInMobileView()) {
145 this.displayOptions.avatar = true
146 }
142 } 147 }
143 148
144 ngOnDestroy () { 149 ngOnDestroy () {
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 575505f63..d37ab478d 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -9,32 +9,34 @@
9 9
10 <div class="video-bottom"> 10 <div class="video-bottom">
11 <div class="video-miniature-information"> 11 <div class="video-miniature-information">
12 <a
13 tabindex="-1"
14 class="video-miniature-name"
15 [routerLink]="videoLink" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
16 >{{ video.name }}</a>
17
18 <div class="d-inline-flex"> 12 <div class="d-inline-flex">
19 <avatar-channel *ngIf="displayOptions.avatar" class="mr-1 pt-1" [video]="video" size="sm"></avatar-channel> 13 <div *ngIf="displayOptions.avatar" class="avatar">
14 <img [src]="getAvatarUrl()" alt="Avatar" />
15 </div>
20 16
21 <div class="d-flex flex-column"> 17 <div class="d-flex flex-column">
18 <a
19 tabindex="-1"
20 class="video-miniature-name"
21 [routerLink]="videoLink" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
22 >{{ video.name }}</a>
23
22 <span class="video-miniature-created-at-views"> 24 <span class="video-miniature-created-at-views">
23 <my-date-toggle *ngIf="displayOptions.date" [date]="video.publishedAt"></my-date-toggle> 25 <my-date-toggle *ngIf="displayOptions.date" [date]="video.publishedAt"></my-date-toggle>
24 26
25 <span class="views"> 27 <span class="views">
26 <ng-container *ngIf="displayOptions.date && displayOptions.views"> • </ng-container> 28 <ng-container *ngIf="displayOptions.date && displayOptions.views"> • </ng-container>
27 <ng-container i18n *ngIf="displayOptions.views">{video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}}</ng-container> 29 <ng-container i18n *ngIf="displayOptions.views">{video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}}</ng-container>
28 </span> 30 </span>
29 </span> 31 </span>
30 32
31 <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]"> 33 <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]">
32 {{ video.byAccount }} 34 {{ video.byAccount }}
33 </a> 35 </a>
34 <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]"> 36 <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]">
35 {{ video.byVideoChannel }} 37 {{ video.byVideoChannel }}
36 </a> 38 </a>
37 39
38 <div class="video-info-privacy"> 40 <div class="video-info-privacy">
39 <ng-container *ngIf="displayOptions.privacyText">{{ video.privacy.label }}</ng-container> 41 <ng-container *ngIf="displayOptions.privacyText">{{ video.privacy.label }}</ng-container>
40 <ng-container *ngIf="displayOptions.privacyText && displayOptions.state && getStateLabel(video)"> - </ng-container> 42 <ng-container *ngIf="displayOptions.privacyText && displayOptions.state && getStateLabel(video)"> - </ng-container>
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 1e5580b9a..4e7c9fb57 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -19,16 +19,22 @@ $more-margin-right: 15px;
19 .video-miniature-information { 19 .video-miniature-information {
20 width: $video-miniature-width - $more-button-width - $more-margin-right; 20 width: $video-miniature-width - $more-button-width - $more-margin-right;
21 line-height: normal; 21 line-height: normal;
22 font-size: 13px; 22
23 .avatar {
24 margin: 10px 10px 0 0;
25
26 img {
27 @include avatar(40px);
28 }
29 }
23 30
24 .video-miniature-name { 31 .video-miniature-name {
25 @include miniature-name; 32 @include miniature-name;
26 font-size: 110%;
27 } 33 }
28 34
29 .video-miniature-created-at-views { 35 .video-miniature-created-at-views {
30 display: block; 36 display: block;
31 font-size: 95%; 37 font-size: 13px;
32 } 38 }
33 39
34 .video-miniature-account, 40 .video-miniature-account,
@@ -37,7 +43,7 @@ $more-margin-right: 15px;
37 @include ellipsis; 43 @include ellipsis;
38 44
39 display: block; 45 display: block;
40 font-size: 95%; 46 font-size: 13px;
41 color: pvar(--greyForegroundColor); 47 color: pvar(--greyForegroundColor);
42 48
43 &:hover { 49 &:hover {
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index f0b0992e2..ccf90af54 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -178,6 +178,14 @@ export class VideoMiniatureComponent implements OnInit {
178 return '' 178 return ''
179 } 179 }
180 180
181 getAvatarUrl () {
182 if (this.ownerDisplayTypeChosen === 'account') {
183 return this.video.accountAvatarUrl
184 }
185
186 return this.video.videoChannelAvatarUrl
187 }
188
181 loadActions () { 189 loadActions () {
182 if (this.displayVideoActions) this.showActions = true 190 if (this.displayVideoActions) this.showActions = true
183 191