aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/channel
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 /client/src/app/shared/channel
parent44efbebac43c2bac75744399dc1176dce7ba3277 (diff)
downloadPeerTube-dd4f25eea802fd88ea641d730432b56f562e0861.tar.gz
PeerTube-dd4f25eea802fd88ea641d730432b56f562e0861.tar.zst
PeerTube-dd4f25eea802fd88ea641d730432b56f562e0861.zip
add channel avatar to watch view
Diffstat (limited to 'client/src/app/shared/channel')
-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
3 files changed, 51 insertions, 0 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}