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;
33 .flex-direction-column {
34 flex-direction: column;
38 &.theater-enabled #video-wrapper {
39 $height: calc(100vh - #{$header-height} - #{$theater-bottom-space});
41 flex-direction: column;
42 justify-content: center;
55 my-video-watch-playlist ::ng-deep .playlist {
56 @include playlist-below-player;
62 background-color: #000;
64 justify-content: center;
68 max-width: getPlayerWidth($video-height);
69 height: $video-height;
71 // VideoJS create an inner video player
74 position: relative !important;
81 justify-content: center;
83 height: $video-height;
89 flex-direction: column;
92 justify-content: center;
93 background-color: #141313;
98 @media screen and (max-width: 1000px) {
102 @media screen and (max-width: 600px) {
112 font-weight: $font-semibold;
123 // Set min width for flex item
128 .video-info-first-row {
137 @include peertube-word-wrap;
139 @include margin-right(30px);
141 min-height: 40px; // Align with the action buttons
143 font-weight: $font-semibold;
147 .video-info-first-row-bottom {
154 .video-info-date-views {
155 @include margin-right(10px);
162 .video-info-channel {
163 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 {