2 @use '_variables' as *;
4 @use '_bootstrap-variables';
5 @use '_miniature' as *;
9 @function getPlayerHeight ($width) {
10 @return calc(#{$width} / #{$video-watch-player-factor});
13 @function getPlayerWidth ($height) {
14 @return calc(#{$height} * #{$video-watch-player-factor});
17 @mixin playlist-below-player {
18 width: 100% !important;
19 height: auto !important;
20 max-height: 300px !important;
22 border-bottom: 1px solid $separator-border-color !important;
26 font-weight: $font-semibold;
35 .flex-direction-column {
36 flex-direction: column;
40 &.theater-enabled #video-wrapper {
41 $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
43 flex-direction: column;
44 justify-content: center;
57 my-video-watch-playlist ::ng-deep .playlist {
58 @include playlist-below-player;
64 background-color: #000;
66 justify-content: center;
70 max-width: getPlayerWidth($video-height);
71 height: $video-height;
73 // VideoJS create an inner video player
76 position: relative !important;
83 justify-content: center;
85 height: $video-height;
91 flex-direction: column;
94 justify-content: center;
95 background-color: #141313;
100 @media screen and (max-width: 1000px) {
104 @media screen and (max-width: 600px) {
114 font-weight: $font-semibold;
125 // Set min width for flex item
130 .video-info-first-row {
139 @include peertube-word-wrap;
141 @include margin-right(30px);
143 min-height: 40px; // Align with the action buttons
145 font-weight: $font-semibold;
149 .video-info-first-row-bottom {
156 .video-info-date-views {
157 @include margin-right(10px);
164 .video-info-channel {
165 font-weight: $font-semibold;
169 @include disable-default-a-behaviour;
170 @include peertube-word-wrap;
172 color: pvar(--mainForegroundColor);
180 .video-info-channel-left {
183 .video-info-channel-left-links {
185 flex-direction: column;
190 font-weight: $font-regular;
200 my-subscribe-button {
201 @include margin-left(5px);
204 my-video-attributes {
205 @include margin-left($video-watch-info-margin-left);
212 @include margin-left(auto);
213 @include margin-right(0);
223 my-recommended-videos {
224 @include padding-left(15px);
231 display: inline-block;
236 // Use the same breakpoint than in the typescript component to display the other video miniatures as row
237 @media screen and (max-width: 1100px) {
239 flex-direction: column;
240 justify-content: center;
242 my-video-watch-playlist ::ng-deep .playlist {
243 @include playlist-below-player;
248 flex-direction: column;
251 my-recommended-videos {
252 @include padding-left(0);
256 @media screen and (max-width: 600px) {
258 height: getPlayerHeight(100vw) !important;
261 ::ng-deep .video-js {
263 height: getPlayerHeight(100vw) !important;
268 margin-top: 20px !important;
269 padding-bottom: 20px !important;
282 @media screen and (max-width: 450px) {
287 .video-info-date-views {
296 // Special case for iOS, that takes into account the width for fullscreens
297 #video-wrapper ::ng-deep .video-js.vjs-fullscreen {