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;
124 // Set min width for flex item
129 .video-info-first-row {
138 @include peertube-word-wrap;
140 @include margin-right(30px);
142 min-height: 40px; // Align with the action buttons
144 font-weight: $font-semibold;
148 .video-info-first-row-bottom {
155 .video-info-date-views {
156 @include margin-right(10px);
163 .video-info-channel {
164 font-weight: $font-semibold;
167 @include disable-default-a-behaviour;
168 @include peertube-word-wrap;
170 color: pvar(--mainForegroundColor);
178 .video-info-channel-left {
181 .video-info-channel-left-links {
183 flex-direction: column;
188 font-weight: $font-regular;
198 my-subscribe-button {
199 @include margin-left(5px);
202 my-video-attributes {
203 @include margin-left($video-watch-info-margin-left);
210 @include margin-left(auto);
211 @include margin-right(0);
221 my-recommended-videos {
222 @include padding-left(15px);
229 display: inline-block;
234 // Use the same breakpoint than in the typescript component to display the other video miniatures as row
235 @media screen and (max-width: 1100px) {
237 flex-direction: column;
238 justify-content: center;
240 my-video-watch-playlist ::ng-deep .playlist {
241 @include playlist-below-player;
246 flex-direction: column;
249 my-recommended-videos {
250 @include padding-left(0);
254 @media screen and (max-width: 600px) {
256 height: getPlayerHeight(100vw) !important;
259 ::ng-deep .video-js {
261 height: getPlayerHeight(100vw) !important;
266 margin-top: 20px !important;
267 padding-bottom: 20px !important;
280 @media screen and (max-width: 450px) {
285 .video-info-date-views {
294 // Special case for iOS, that takes into account the width for fullscreens
295 #video-wrapper ::ng-deep .video-js.vjs-fullscreen {