aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/+video-watch
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/videos/+video-watch')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html28
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss53
2 files changed, 34 insertions, 47 deletions
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index c4a293d0c..9e653ea78 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -136,26 +136,26 @@
136 </div> 136 </div>
137 137
138 138
139 <div class="pt-3 border-top video-info-channel"> 139 <div class="pt-3 border-top video-info-channel d-flex">
140 <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" i18n-title title="Go the channel page"> 140 <div class="video-info-channel-left d-flex">
141 <img [src]="video.videoChannelAvatarUrl" alt="Video channel avatar" /> 141 <avatar-channel [video]="video"></avatar-channel>
142 {{ video.channel.displayName }} 142 <div class="video-info-channel-left-links ml-1">
143 </a> 143 <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" i18n-title title="Go the channel page">
144 {{ video.channel.displayName }}
145 </a>
146 <a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Go to the account page">
147 <span i18n>By {{ video.byAccount }}</span>
148 </a>
149 </div>
150 </div>
144 151
145 <my-subscribe-button #subscribeButton [videoChannel]="video.channel" size="small"></my-subscribe-button> 152 <my-subscribe-button #subscribeButton [videoChannel]="video.channel" size="small"></my-subscribe-button>
146 </div> 153 </div>
147
148 <div class="video-info-by">
149 <a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Go to the account page">
150 <img [src]="video.accountAvatarUrl" alt="Account avatar" />
151 <span i18n>By {{ video.byAccount }}</span>
152 </a>
153 </div>
154 </div> 154 </div>
155 155
156 </div> 156 </div>
157 157
158 <div class="video-info-description ml-4"> 158 <div class="video-info-description">
159 <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div> 159 <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div>
160 160
161 <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()"> 161 <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
@@ -170,7 +170,7 @@
170 </div> 170 </div>
171 </div> 171 </div>
172 172
173 <div class="video-attributes mb-3 ml-4"> 173 <div class="video-attributes mb-3">
174 <div class="video-attribute"> 174 <div class="video-attribute">
175 <span i18n class="video-attribute-label">Privacy</span> 175 <span i18n class="video-attribute-label">Privacy</span>
176 <span class="video-attribute-value">{{ video.privacy.label }}</span> 176 <span class="video-attribute-value">{{ video.privacy.label }}</span>
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 314f9849d..15335b0b3 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -3,8 +3,8 @@
3@import '_bootstrap-variables'; 3@import '_bootstrap-variables';
4@import '_miniature'; 4@import '_miniature';
5 5
6$other-videos-width: 260px;
7$player-factor: 1.7; // 16/9 6$player-factor: 1.7; // 16/9
7$video-info-margin-left: 44px;
8 8
9@function getPlayerHeight($width){ 9@function getPlayerHeight($width){
10 @return calc(#{$width} / #{$player-factor}) 10 @return calc(#{$width} / #{$player-factor})
@@ -180,40 +180,24 @@ $player-factor: 1.7; // 16/9
180 } 180 }
181 } 181 }
182 182
183 my-subscribe-button { 183 .video-info-channel-left {
184 margin-left: 5px; 184 flex-grow: 1;
185 }
186 }
187 185
188 .video-info-by { 186 .video-info-channel-left-links {
189 187 display: flex;
190 a { 188 flex-direction: column;
191 @include disable-default-a-behaviour; 189 position: relative;
192 190 line-height: 1.3;
193 display: inline;
194 align-items: center;
195 font-size: 13px;
196 color: var(--mainForegroundColor);
197
198 span:hover {
199 opacity: 0.8;
200 }
201 191
202 span { 192 a:nth-of-type(2) {
203 margin-left: 2px; 193 font-weight: 500;
204 } 194 font-size: 90%;
205 195 }
206 img {
207 @include avatar(18px);
208
209 margin: -2px 5px 0 0;
210 } 196 }
211 } 197 }
212 198
213 my-help { 199 my-subscribe-button {
214 position: relative; 200 margin-left: 5px;
215 top: 1px;
216 margin-left: 2px;
217 } 201 }
218 } 202 }
219 203
@@ -330,6 +314,7 @@ $player-factor: 1.7; // 16/9
330 314
331 .video-info-description { 315 .video-info-description {
332 margin: 20px 0; 316 margin: 20px 0;
317 margin-left: $video-info-margin-left;
333 font-size: 15px; 318 font-size: 15px;
334 319
335 .video-info-description-html { 320 .video-info-description-html {
@@ -357,6 +342,10 @@ $player-factor: 1.7; // 16/9
357 } 342 }
358 } 343 }
359 344
345 .video-attributes {
346 margin-left: $video-info-margin-left;
347 }
348
360 .video-attributes .video-attribute { 349 .video-attributes .video-attribute {
361 font-size: 13px; 350 font-size: 13px;
362 display: block; 351 display: block;
@@ -391,11 +380,9 @@ $player-factor: 1.7; // 16/9
391 380
392 ::ng-deep .other-videos { 381 ::ng-deep .other-videos {
393 padding-left: 15px; 382 padding-left: 15px;
394 flex-basis: $other-videos-width;
395 min-width: $other-videos-width;
396 383
397 .title-page { 384 .title-page {
398 margin-top: 0 !important; 385 margin: 0 !important;
399 } 386 }
400 387
401 .video-miniature { 388 .video-miniature {