aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2019-12-15 21:27:37 +0100
committerRigel Kent <sendmemail@rigelk.eu>2019-12-15 21:58:11 +0100
commitdd4f25eea802fd88ea641d730432b56f562e0861 (patch)
tree72ead957524555827f4531fb00f90bf3f5e633c1
parent44efbebac43c2bac75744399dc1176dce7ba3277 (diff)
downloadPeerTube-dd4f25eea802fd88ea641d730432b56f562e0861.tar.gz
PeerTube-dd4f25eea802fd88ea641d730432b56f562e0861.tar.zst
PeerTube-dd4f25eea802fd88ea641d730432b56f562e0861.zip
add channel avatar to watch view
-rw-r--r--client/src/app/shared/channel/avatar.component.html8
-rw-r--r--client/src/app/shared/channel/avatar.component.scss32
-rw-r--r--client/src/app/shared/channel/avatar.component.ts11
-rw-r--r--client/src/app/shared/shared.module.ts3
-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
6 files changed, 88 insertions, 47 deletions
diff --git a/client/src/app/shared/channel/avatar.component.html b/client/src/app/shared/channel/avatar.component.html
new file mode 100644
index 000000000..362feacd7
--- /dev/null
+++ b/client/src/app/shared/channel/avatar.component.html
@@ -0,0 +1,8 @@
1<div class="wrapper">
2 <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" i18n-title title="Go the channel page">
3 <img [src]="video.videoChannelAvatarUrl" alt="Channel avatar" />
4 </a>
5 <a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Go to the account page">
6 <img [src]="video.accountAvatarUrl" alt="Account avatar" />
7 </a>
8</div>
diff --git a/client/src/app/shared/channel/avatar.component.scss b/client/src/app/shared/channel/avatar.component.scss
new file mode 100644
index 000000000..b778c9eb0
--- /dev/null
+++ b/client/src/app/shared/channel/avatar.component.scss
@@ -0,0 +1,32 @@
1@import '_mixins';
2
3.wrapper {
4 width: 35px;
5 height: 35px;
6 min-width: 35px;
7 min-height: 35px;
8 position: relative;
9 margin-right: 5px;
10
11 a {
12 @include disable-outline;
13 }
14
15 a img {
16 height: 100%;
17 object-fit: cover;
18 position: absolute;
19 top:50%;
20 left:50%;
21 border-radius: 50%;
22 transform: translate(-50%,-50%)
23 }
24
25 a:nth-of-type(2) img {
26 height: 60%;
27 width: 60%;
28 border: 2px solid var(--mainBackgroundColor);
29 transform: translateX(15%);
30 position: relative;
31 }
32}
diff --git a/client/src/app/shared/channel/avatar.component.ts b/client/src/app/shared/channel/avatar.component.ts
new file mode 100644
index 000000000..2201c04ca
--- /dev/null
+++ b/client/src/app/shared/channel/avatar.component.ts
@@ -0,0 +1,11 @@
1import { Component, Input } from '@angular/core'
2import { VideoDetails } from '../video/video-details.model'
3
4@Component({
5 selector: 'avatar-channel',
6 templateUrl: './avatar.component.html',
7 styleUrls: [ './avatar.component.scss' ]
8})
9export class AvatarComponent {
10 @Input() video: VideoDetails
11}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 29ddf7b81..a32520820 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -66,6 +66,7 @@ import { OverviewService } from '@app/shared/overview'
66import { UserBanModalComponent } from '@app/shared/moderation' 66import { UserBanModalComponent } from '@app/shared/moderation'
67import { UserModerationDropdownComponent } from '@app/shared/moderation/user-moderation-dropdown.component' 67import { UserModerationDropdownComponent } from '@app/shared/moderation/user-moderation-dropdown.component'
68import { BlocklistService } from '@app/shared/blocklist' 68import { BlocklistService } from '@app/shared/blocklist'
69import { AvatarComponent } from '@app/shared/channel/avatar.component'
69import { TopMenuDropdownComponent } from '@app/shared/menu/top-menu-dropdown.component' 70import { TopMenuDropdownComponent } from '@app/shared/menu/top-menu-dropdown.component'
70import { UserHistoryService } from '@app/shared/users/user-history.service' 71import { UserHistoryService } from '@app/shared/users/user-history.service'
71import { UserNotificationService } from '@app/shared/users/user-notification.service' 72import { UserNotificationService } from '@app/shared/users/user-notification.service'
@@ -158,6 +159,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
158 TimestampInputComponent, 159 TimestampInputComponent,
159 InputReadonlyCopyComponent, 160 InputReadonlyCopyComponent,
160 161
162 AvatarComponent,
161 SubscribeButtonComponent, 163 SubscribeButtonComponent,
162 RemoteSubscribeComponent, 164 RemoteSubscribeComponent,
163 InstanceFeaturesTableComponent, 165 InstanceFeaturesTableComponent,
@@ -228,6 +230,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
228 PeertubeCheckboxComponent, 230 PeertubeCheckboxComponent,
229 TimestampInputComponent, 231 TimestampInputComponent,
230 232
233 AvatarComponent,
231 SubscribeButtonComponent, 234 SubscribeButtonComponent,
232 RemoteSubscribeComponent, 235 RemoteSubscribeComponent,
233 InstanceFeaturesTableComponent, 236 InstanceFeaturesTableComponent,
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 {