aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-06-30 08:50:20 +0200
committerChocobozzz <me@florianbigard.com>2021-06-30 08:50:20 +0200
commitd4f0b2ecec221b6cdd75b5d87ba800c6301a15df (patch)
tree889b03153b4eac35f455ae75c9b08093b2870282 /client
parent8d64a72b4cbd12b01ad4c689f210d219dd91fde3 (diff)
downloadPeerTube-d4f0b2ecec221b6cdd75b5d87ba800c6301a15df.tar.gz
PeerTube-d4f0b2ecec221b6cdd75b5d87ba800c6301a15df.tar.zst
PeerTube-d4f0b2ecec221b6cdd75b5d87ba800c6301a15df.zip
Relax watch CSS
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.component.scss362
-rw-r--r--client/src/app/shared/shared-video-miniature/video-miniature.component.html4
2 files changed, 178 insertions, 188 deletions
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.scss b/client/src/app/+videos/+video-watch/video-watch.component.scss
index 1d83fa139..ee74cb0b0 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/+videos/+video-watch/video-watch.component.scss
@@ -4,6 +4,8 @@
4@use '_bootstrap-variables'; 4@use '_bootstrap-variables';
5@use '_miniature' as *; 5@use '_miniature' as *;
6 6
7$video-height: 66vh;
8
7@function getPlayerHeight ($width) { 9@function getPlayerHeight ($width) {
8 @return calc(#{$width} / #{$video-watch-player-factor}); 10 @return calc(#{$width} / #{$video-watch-player-factor});
9} 11}
@@ -20,6 +22,23 @@
20 border-bottom: 1px solid $separator-border-color !important; 22 border-bottom: 1px solid $separator-border-color !important;
21} 23}
22 24
25.blocked-label {
26 font-weight: $font-semibold;
27}
28
29.placeholder-image {
30 height: 100%;
31}
32
33.alert {
34 text-align: center;
35 border-radius: 0;
36}
37
38.flex-direction-column {
39 flex-direction: column;
40}
41
23.root { 42.root {
24 &.theater-enabled #video-wrapper { 43 &.theater-enabled #video-wrapper {
25 $height: calc(100vh - #{$header-height} - #{$theater-bottom-space}); 44 $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
@@ -44,52 +63,14 @@
44 } 63 }
45} 64}
46 65
47.blocked-label {
48 font-weight: $font-semibold;
49}
50
51.placeholder-image {
52 height: 100%;
53}
54
55#video-wrapper { 66#video-wrapper {
56 $video-height: 66vh;
57
58 background-color: #000; 67 background-color: #000;
59 display: flex; 68 display: flex;
60 justify-content: center; 69 justify-content: center;
61 70
62 #videojs-wrapper {
63 display: flex;
64 justify-content: center;
65 flex-grow: 1;
66 height: $video-height;
67 }
68
69 .remote-server-down {
70 color: #fff;
71 display: flex;
72 flex-direction: column;
73 align-items: center;
74 text-align: center;
75 justify-content: center;
76 background-color: #141313;
77 width: 100%;
78 font-size: 24px;
79 height: 500px;
80
81 @media screen and (max-width: 1000px) {
82 font-size: 20px;
83 }
84
85 @media screen and (max-width: 600px) {
86 font-size: 16px;
87 }
88 }
89
90 ::ng-deep .video-js { 71 ::ng-deep .video-js {
91 width: 100%; 72 width: 100%;
92 max-width: getPlayerWidth(66vh); 73 max-width: getPlayerWidth($video-height);
93 height: $video-height; 74 height: $video-height;
94 75
95 // VideoJS create an inner video player 76 // VideoJS create an inner video player
@@ -98,27 +79,34 @@
98 position: relative !important; 79 position: relative !important;
99 } 80 }
100 } 81 }
101
102 @media screen and (max-width: 600px) {
103 #videojs-wrapper {
104 height: getPlayerHeight(100vw) !important;
105 }
106
107 .remote-server-down,
108 ::ng-deep .video-js {
109 width: 100vw;
110 height: getPlayerHeight(100vw) !important;
111 }
112 }
113} 82}
114 83
115.alert { 84#videojs-wrapper {
116 text-align: center; 85 display: flex;
117 border-radius: 0; 86 justify-content: center;
87 flex-grow: 1;
88 height: $video-height;
118} 89}
119 90
120.flex-direction-column { 91.remote-server-down {
92 color: #fff;
93 display: flex;
121 flex-direction: column; 94 flex-direction: column;
95 align-items: center;
96 text-align: center;
97 justify-content: center;
98 background-color: #141313;
99 width: 100%;
100 font-size: 24px;
101 height: 500px;
102
103 @media screen and (max-width: 1000px) {
104 font-size: 20px;
105 }
106
107 @media screen and (max-width: 600px) {
108 font-size: 16px;
109 }
122} 110}
123 111
124#video-not-found { 112#video-not-found {
@@ -133,121 +121,121 @@
133.video-bottom { 121.video-bottom {
134 display: flex; 122 display: flex;
135 margin-top: 1.5rem; 123 margin-top: 1.5rem;
124}
136 125
137 .video-info { 126.video-info {
127 flex-grow: 1;
128 // Set min width for flex item
129 min-width: 1px;
130 max-width: 100%;
131}
132
133.video-info-first-row {
134 display: flex;
135
136 > div:first-child {
138 flex-grow: 1; 137 flex-grow: 1;
139 // Set min width for flex item 138 }
140 min-width: 1px; 139}
141 max-width: 100%; 140
142 141.video-info-name {
143 .video-info-first-row { 142 @include peertube-word-wrap;
144 display: flex; 143
145 144 @include margin-right(30px);
146 > div:first-child { 145
147 flex-grow: 1; 146 min-height: 40px; // Align with the action buttons
148 } 147 font-size: 27px;
149 148 font-weight: $font-semibold;
150 .video-info-name { 149 flex-grow: 1;
151 @include peertube-word-wrap; 150}
152 151
153 @include margin-right(30px); 152.video-info-first-row-bottom {
154 153 display: flex;
155 min-height: 40px; // Align with the action buttons 154 flex-wrap: wrap;
156 font-size: 27px; 155 align-items: center;
157 font-weight: $font-semibold; 156 width: 100%;
158 flex-grow: 1; 157}
159 } 158
160 159.video-info-date-views {
161 .video-info-first-row-bottom { 160 @include margin-right(10px);
162 display: flex; 161
163 flex-wrap: wrap; 162 margin-bottom: 10px;
164 align-items: center; 163 align-self: start;
165 width: 100%; 164 font-size: 1em;
166 } 165}
167 166
168 .video-info-date-views { 167.video-info-channel {
169 @include margin-right(10px); 168 font-weight: $font-semibold;
170 169 font-size: 15px;
171 margin-bottom: 10px; 170
172 align-self: start; 171 a {
173 font-size: 1em; 172 @include disable-default-a-behaviour;
174 } 173 @include peertube-word-wrap;
175 174
176 .video-info-channel { 175 color: pvar(--mainForegroundColor);
177 font-weight: $font-semibold; 176
178 font-size: 15px; 177 &:hover {
179 178 opacity: 0.8;
180 a { 179 }
181 @include disable-default-a-behaviour; 180 }
182 @include peertube-word-wrap; 181}
183 182
184 color: pvar(--mainForegroundColor); 183.video-info-channel-left {
185 184 flex-grow: 1;
186 &:hover { 185
187 opacity: 0.8; 186 .video-info-channel-left-links {
188 } 187 display: flex;
189 } 188 flex-direction: column;
190 189 position: relative;
191 .video-info-channel-left { 190 line-height: 1.37;
192 flex-grow: 1; 191
193 192 a:nth-of-type(2) {
194 .video-info-channel-left-links { 193 font-weight: $font-regular;
195 display: flex; 194 font-size: 90%;
196 flex-direction: column;
197 position: relative;
198 line-height: 1.37;
199
200 a:nth-of-type(2) {
201 font-weight: $font-regular;
202 font-size: 90%;
203 }
204
205 a.single-link {
206 margin-top: 7px;
207 }
208 }
209 }
210
211 my-subscribe-button {
212 @include margin-left(5px);
213 }
214 }
215 } 195 }
216 196
217 .video-attributes { 197 a.single-link {
218 @include margin-left($video-watch-info-margin-left); 198 margin-top: 7px;
219 } 199 }
200 }
201}
202
203my-subscribe-button {
204 @include margin-left(5px);
205}
206
207.video-attributes {
208 @include margin-left($video-watch-info-margin-left);
209
210 .video-attribute {
211 font-size: 13px;
212 display: block;
213 margin-bottom: 12px;
214 }
215}
216
217.video-attribute-label {
218 @include padding-right(5px);
220 219
221 .video-attributes .video-attribute { 220 min-width: 142px;
222 font-size: 13px; 221 display: inline-block;
223 display: block; 222 color: pvar(--greyForegroundColor);
224 margin-bottom: 12px; 223 font-weight: $font-bold;
225 224}
226 .video-attribute-label { 225
227 @include padding-right(5px); 226a.video-attribute-value {
228 227 @include disable-default-a-behaviour;
229 min-width: 142px; 228 color: pvar(--mainForegroundColor);
230 display: inline-block; 229
231 color: pvar(--greyForegroundColor); 230 &:hover {
232 font-weight: $font-bold; 231 opacity: 0.9;
233 } 232 }
234 233}
235 a.video-attribute-value { 234
236 @include disable-default-a-behaviour; 235.video-attribute-tags {
237 color: pvar(--mainForegroundColor); 236 .video-attribute-value:not(:nth-child(2)) {
238 237 &::before {
239 &:hover { 238 content: ', ';
240 opacity: 0.9;
241 }
242 }
243
244 &.video-attribute-tags {
245 .video-attribute-value:not(:nth-child(2)) {
246 &::before {
247 content: ', ';
248 }
249 }
250 }
251 } 239 }
252 } 240 }
253} 241}
@@ -278,7 +266,7 @@ my-video-comments {
278} 266}
279 267
280@media screen and (max-width: 1600px) { 268@media screen and (max-width: 1600px) {
281 .video-bottom .video-info .video-attributes .video-attribute { 269 .video-attributes .video-attribute {
282 margin-bottom: 5px; 270 margin-bottom: 5px;
283 } 271 }
284} 272}
@@ -304,35 +292,38 @@ my-video-comments {
304} 292}
305 293
306@media screen and (max-width: 600px) { 294@media screen and (max-width: 600px) {
295 #videojs-wrapper {
296 height: getPlayerHeight(100vw) !important;
297
298 .remote-server-down,
299 ::ng-deep .video-js {
300 width: 100vw;
301 height: getPlayerHeight(100vw) !important;
302 }
303 }
304
307 .video-bottom { 305 .video-bottom {
308 margin-top: 20px !important; 306 margin-top: 20px !important;
309 padding-bottom: 20px !important; 307 padding-bottom: 20px !important;
308 }
310 309
311 .video-info { 310 .video-info {
312 padding: 0; 311 padding: 0;
313 312 }
314 .video-info-first-row {
315 313
316 .video-info-name { 314 .video-info-name {
317 font-size: 20px; 315 font-size: 20px;
318 height: auto; 316 height: auto;
319 }
320 }
321 }
322 } 317 }
323} 318}
324 319
325@media screen and (max-width: 450px) { 320@media screen and (max-width: 450px) {
326 .video-bottom { 321 .video-info-name {
327 .video-info .video-info-first-row { 322 font-size: 18px;
328 .video-info-name { 323 }
329 font-size: 18px; 324
330 } 325 .video-info-date-views {
331 326 font-size: 14px;
332 .video-info-date-views {
333 font-size: 14px;
334 }
335 }
336 } 327 }
337 328
338 my-action-buttons { 329 my-action-buttons {
@@ -340,7 +331,6 @@ my-video-comments {
340 } 331 }
341} 332}
342 333
343
344// Special case for iOS, that takes into account the width for fullscreens 334// Special case for iOS, that takes into account the width for fullscreens
345#video-wrapper ::ng-deep .video-js.vjs-fullscreen { 335#video-wrapper ::ng-deep .video-js.vjs-fullscreen {
346 max-width: unset; 336 max-width: unset;
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 7765d5be7..f51c298f2 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
@@ -11,12 +11,12 @@
11 <div class="video-miniature-information"> 11 <div class="video-miniature-information">
12 <div class="d-flex video-miniature-meta"> 12 <div class="d-flex video-miniature-meta">
13 <my-actor-avatar 13 <my-actor-avatar
14 *ngIf="displayOptions.avatar && displayOwnerVideoChannel()" [title]="channelLinkTitle" 14 *ngIf="displayOptions.avatar && displayOwnerVideoChannel() && !displayAsRow" [title]="channelLinkTitle"
15 [channel]="video.channel" [size]="actorImageSize" [internalHref]="[ '/c', video.byVideoChannel ]" 15 [channel]="video.channel" [size]="actorImageSize" [internalHref]="[ '/c', video.byVideoChannel ]"
16 ></my-actor-avatar> 16 ></my-actor-avatar>
17 17
18 <my-actor-avatar 18 <my-actor-avatar
19 *ngIf="displayOptions.avatar && displayOwnerAccount()" [title]="channelLinkTitle" 19 *ngIf="displayOptions.avatar && displayOwnerAccount() && !displayAsRow" [title]="channelLinkTitle"
20 [account]="video.account" [size]="actorImageSize" [internalHref]="[ '/c', video.byVideoChannel ]" 20 [account]="video.account" [size]="actorImageSize" [internalHref]="[ '/c', video.byVideoChannel ]"
21 ></my-actor-avatar> 21 ></my-actor-avatar>
22 22