aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/shared-video-miniature
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/shared/shared-video-miniature')
-rw-r--r--client/src/app/shared/shared-video-miniature/abstract-video-list.html2
-rw-r--r--client/src/app/shared/shared-video-miniature/abstract-video-list.scss2
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.html2
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.scss308
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.ts11
-rw-r--r--client/src/app/shared/shared-video-miniature/videos-selection.component.scss42
6 files changed, 186 insertions, 181 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 41d5906cf..81c773b5a 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,7 +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" [video]="video" [user]="userMiniature" 55 [video]="video" [user]="userMiniature"
56 [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions" 56 [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
57 (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)" 57 (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
58 > 58 >
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
index 0a8aa8fa4..26c412402 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
@@ -69,7 +69,7 @@ $iconSize: 16px;
69} 69}
70 70
71.margin-content { 71.margin-content {
72 @include fluid-videos-miniature-layout; 72 @include grid-videos-miniature-layout;
73} 73}
74 74
75@media screen and (max-width: $mobile-view) { 75@media screen and (max-width: $mobile-view) {
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index a07930321..efa443b45 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -1,4 +1,4 @@
1<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow, 'fit-width': fitWidth }" (mouseenter)="loadActions()"> 1<div class="video-miniature" [ngClass]="getClasses()" (mouseenter)="loadActions()">
2 <my-video-thumbnail 2 <my-video-thumbnail
3 [video]="video" [nsfw]="isVideoBlur" [videoRouterLink]="videoRouterLink" [videoHref]="videoHref" [videoTarget]="videoTarget" 3 [video]="video" [nsfw]="isVideoBlur" [videoRouterLink]="videoRouterLink" [videoHref]="videoHref" [videoTarget]="videoTarget"
4 [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)" 4 [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)"
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index a9628c696..39d6e97c9 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -3,204 +3,206 @@
3@import '_miniature'; 3@import '_miniature';
4 4
5$more-button-width: 40px; 5$more-button-width: 40px;
6$more-margin-right: 15px;
7 6
8.video-miniature { 7.video-miniature-name {
9 display: inline-flex; 8 @include miniature-name;
10 flex-direction: column; 9}
11 padding-bottom: $video-miniature-margin-bottom;
12 vertical-align: top;
13 10
14 .video-bottom { 11.video-miniature-information {
15 display: flex; 12 width: calc(100% - #{$more-button-width});
13}
16 14
17 .video-miniature-information { 15.avatar {
18 width: $video-miniature-width - $more-button-width - $more-margin-right; 16 margin: 10px 10px 0 0;
19 line-height: normal;
20 17
21 .avatar { 18 img:not(.channel) {
22 margin: 10px 10px 0 0; 19 @include avatar(40px);
20 }
23 21
24 img:not(.channel) { 22 img.channel {
25 @include avatar(40px); 23 @include channel-avatar(40px);
26 } 24 }
25}
27 26
28 img.channel { 27.video-miniature-created-at-views {
29 @include channel-avatar(40px); 28 font-size: 13px;
30 } 29}
31 }
32 30
33 .video-miniature-name { 31.video-miniature-account,
34 @include miniature-name; 32.video-miniature-channel {
33 @include disable-default-a-behaviour;
34 @include ellipsis;
35 35
36 word-wrap: break-word; 36 display: block;
37 width: calc(100% - #{$more-button-width}); 37 font-size: 13px;
38 } 38 color: pvar(--greyForegroundColor);
39 39
40 .video-miniature-meta { 40 &:hover {
41 width: calc(100% + #{$more-button-width}); 41 color: $grey-foreground-hover-color;
42 overflow: hidden; 42 }
43 } 43}
44 44
45 .video-miniature-created-at-views { 45.video-info-privacy,
46 display: block; 46.video-info-blocked .blocked-label,
47 font-size: 13px; 47.video-info-nsfw {
48 } 48 font-weight: $font-semibold;
49}
49 50
50 .video-miniature-account, 51.video-info-blocked {
51 .video-miniature-channel { 52 color: red;
52 @include disable-default-a-behaviour;
53 @include ellipsis;
54 53
55 display: block; 54 .blocked-reason::before {
56 font-size: 13px; 55 content: ' - ';
57 color: pvar(--greyForegroundColor); 56 }
57}
58 58
59 &:hover { 59.video-info-nsfw {
60 color: $grey-foreground-hover-color; 60 color: red;
61 } 61}
62 }
63 62
64 .video-info-privacy, 63.video-actions {
65 .video-info-blocked .blocked-label, 64 width: $more-button-width;
66 .video-info-nsfw { 65 height: 30px;
67 font-weight: $font-semibold;
68 }
69 66
70 .video-info-blocked { 67 ::ng-deep .dropdown-root:not(.show) {
71 color: red; 68 opacity: 0;
69 }
72 70
73 .blocked-reason::before { 71 ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
74 content: ' - '; 72 opacity: 1;
75 } 73 }
76 }
77 74
78 .video-info-nsfw { 75 ::ng-deep .more-icon {
79 color: red; 76 opacity: .6;
80 }
81 }
82 77
83 .video-actions { 78 &:hover {
84 margin-top: 3px; 79 opacity: 1;
85 width: $more-button-width; 80 }
86 height: 30px; 81 }
82}
87 83
88 ::ng-deep .dropdown-root:not(.show) { 84.video-miniature {
89 opacity: 0; 85 &:hover ::ng-deep .video-thumbnail-actions-overlay,
90 } 86 &:hover .video-actions ::ng-deep .dropdown-root {
87 opacity: 1 !important;
88 }
89}
91 90
92 ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root { 91// Grid mode
93 opacity: 1; 92// Takes all the width on mobile
94 } 93.video-miniature:not(.display-as-row) {
94 display: flex;
95 flex-direction: column;
96 padding-bottom: $video-miniature-margin-bottom;
97 width: 100%;
95 98
96 ::ng-deep .more-icon { 99 my-video-thumbnail {
97 opacity: .6; 100 @include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
101 }
98 102
99 &:hover { 103 .video-bottom {
100 opacity: 1; 104 display: flex;
101 } 105 width: 100%;
102 } 106 }
103 }
104 107
105 @media screen and (max-width: $small-view) {
106 .video-miniature-information {
107 margin: 0 10px;
108 }
109 108
110 .video-actions { 109 .video-miniature-name {
111 margin: 0; 110 margin-top: 10px;
112 top: -3px; 111 margin-bottom: 5px;
112 }
113 113
114 ::ng-deep .dropdown-root { 114 .video-miniature-created-at-views {
115 opacity: 1 !important; 115 display: block;
116 }
117 }
118 }
119 } 116 }
120 117
121 &:hover ::ng-deep .video-thumbnail .video-thumbnail-actions-overlay, 118 .video-actions {
122 &:hover .video-bottom .video-actions ::ng-deep .dropdown-root { 119 margin-top: 3px;
123 opacity: 1;
124 } 120 }
125 121
126 &.fit-width { 122 @media screen and (max-width: $small-view) {
127 width: 100%; 123 width: 100%;
124 margin-bottom: 25px;
125
126 .video-miniature-information {
127 margin: 0 10px;
128
129 width: 100%;
130 text-align: left;
131 }
128 132
129 .video-bottom { 133 .video-actions {
130 width: 100% !important; 134 margin: 0;
135 top: -3px;
131 136
132 .video-miniature-information { 137 ::ng-deep .dropdown-root {
133 width: calc(100% - #{$more-button-width}) !important; 138 opacity: 1 !important;
134 } 139 }
135 } 140 }
136 141
137 my-video-thumbnail { 142 ::ng-deep .video-thumbnail {
138 @include large-screen-ratio($selector: '::ng-deep .video-thumbnail'); 143 border-radius: 0;
139 } 144 }
140 } 145 }
146}
147
148.video-miniature.display-as-row {
149 --rowThumbnailWidth: #{$video-thumbnail-width};
150 --rowThumbnailHeight: #{$video-thumbnail-height};
151
152 display: flex;
153 flex-direction: row;
141 154
142 &.display-as-row { 155 .video-bottom {
143 flex-direction: row;
144 padding-bottom: 0;
145 height: auto;
146 display: flex; 156 display: flex;
147 flex-grow: 1; 157 }
148 158
149 my-video-thumbnail { 159 // We don't display avatar in row mode
150 margin-right: 10px; 160 .avatar {
151 } 161 display: none;
162 }
152 163
153 .video-bottom { 164 my-video-thumbnail {
154 .video-miniature-information { 165 min-width: var(--rowThumbnailWidth);
155 @media screen and (min-width: $small-view) { 166 max-width: var(--rowThumbnailWidth);
156 width: auto; 167 height: var(--rowThumbnailHeight);
157 min-width: 500px; 168 margin-right: 10px;
158 } 169 }
159
160 .video-miniature-name {
161 @include ellipsis-multiline(1.3em, 2);
162
163 margin-top: 2px;
164 margin-bottom: 5px;
165 }
166
167 .video-miniature-created-at-views,
168 .video-miniature-account,
169 .video-miniature-channel {
170 font-size: 95%;
171 width: fit-content;
172 }
173
174 .video-miniature-created-at-views + .video-miniature-channel {
175 margin-top: 5px;
176 }
177
178 .video-info-privacy {
179 margin-top: 5px;
180 }
181
182 .video-info-blocked {
183 margin-top: 3px;
184 }
185 }
186 170
187 .video-actions { 171 .video-miniature-name {
188 margin: 0; 172 @include ellipsis-multiline(1.3em, 2);
189 top: -3px; 173 }
190 } 174
191 } 175 .video-miniature-created-at-views,
176 .video-miniature-account,
177 .video-miniature-channel {
178 font-size: 14px;
179 }
192 180
193 @media screen and (max-width: $small-view) { 181 .video-actions {
194 flex-direction: column; 182 margin-top: -3px;
195 height: auto; 183 }
184}
196 185
197 my-video-thumbnail { 186@include on-small-main-col {
198 margin-right: 0; 187 .video-miniature.display-as-row {
199 } 188 --rowThumbnailWidth: #{$video-thumbnail-medium-width};
189 --rowThumbnailHeight: #{$video-thumbnail-medium-height};
190 }
191}
200 192
201 .video-miniature-information { 193@include on-mobile-main-col {
202 min-width: initial; 194 .video-miniature.display-as-row {
203 } 195 --rowThumbnailWidth: #{$video-thumbnail-small-width};
196 --rowThumbnailHeight: #{$video-thumbnail-small-height};
197
198 .video-miniature-name {
199 font-size: 14px;
200 }
201
202 .video-miniature-created-at-views,
203 .video-miniature-account,
204 .video-miniature-channel {
205 font-size: 12px;
204 } 206 }
205 } 207 }
206} 208}
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 987a65e40..48da92d6b 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,6 @@ 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'
20export type MiniatureDisplayOptions = { 19export type MiniatureDisplayOptions = {
21 date?: boolean 20 date?: boolean
22 views?: boolean 21 views?: boolean
@@ -50,9 +49,9 @@ export class VideoMiniatureComponent implements OnInit {
50 state: false, 49 state: false,
51 blacklistInfo: false 50 blacklistInfo: false
52 } 51 }
53 @Input() displayAsRow = false
54 @Input() displayVideoActions = true 52 @Input() displayVideoActions = true
55 @Input() fitWidth = false 53
54 @Input() displayAsRow = false
56 55
57 @Input() videoLinkType: VideoLinkType = 'internal' 56 @Input() videoLinkType: VideoLinkType = 'internal'
58 57
@@ -243,6 +242,12 @@ export class VideoMiniatureComponent implements OnInit {
243 return this.displayVideoActions && this.isUserLoggedIn() && this.inWatchLaterPlaylist !== undefined 242 return this.displayVideoActions && this.isUserLoggedIn() && this.inWatchLaterPlaylist !== undefined
244 } 243 }
245 244
245 getClasses () {
246 return {
247 'display-as-row': this.displayAsRow
248 }
249 }
250
246 private setUpBy () { 251 private setUpBy () {
247 const accountName = this.video.account.name 252 const accountName = this.video.account.name
248 253
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
index c33e11889..a2939d521 100644
--- a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
@@ -5,24 +5,24 @@
5 display: flex; 5 display: flex;
6 justify-content: flex-end; 6 justify-content: flex-end;
7 flex-grow: 1; 7 flex-grow: 1;
8}
8 9
9 .action-selection-mode-child { 10.action-selection-mode-child {
10 position: fixed; 11 position: fixed;
11
12 .action-button {
13 display: block;
14 margin-left: 55px;
15 }
16 12
17 .action-button-cancel-selection { 13 .action-button {
18 @include peertube-button; 14 display: block;
19 @include grey-button; 15 margin-left: 55px;
20 }
21 } 16 }
22} 17}
23 18
19.action-button-cancel-selection {
20 @include peertube-button;
21 @include grey-button;
22}
23
24.video { 24.video {
25 @include row-blocks; 25 @include row-blocks($column-responsive: false);
26 26
27 &:first-child { 27 &:first-child {
28 margin-top: 47px; 28 margin-top: 47px;
@@ -40,18 +40,16 @@
40 } 40 }
41} 41}
42 42
43@media screen and (max-width: $small-view) {
44 .video {
45 flex-direction: column;
46 height: auto;
47 43
48 .checkbox-container { 44@include on-small-main-col {
49 display: none; 45 .video {
50 } 46 flex-wrap: wrap;
47 }
48}
51 49
52 my-button { 50@include on-mobile-main-col {
53 margin-top: 10px; 51 .checkbox-container {
54 } 52 display: none;
55 } 53 }
56 54
57 .action-selection-mode { 55 .action-selection-mode {