aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+videos/+video-watch
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-04-28 11:49:34 +0200
committerChocobozzz <me@florianbigard.com>2021-04-28 11:49:34 +0200
commit746018f6b81b40e8858303662ac9ec5ce59ac6eb (patch)
tree7b115d12c1926e6283346072fe1c6adbf056abd7 /client/src/app/+videos/+video-watch
parentec489ce2f74570f94dffb62266f4ed6f18621b3e (diff)
downloadPeerTube-746018f6b81b40e8858303662ac9ec5ce59ac6eb.tar.gz
PeerTube-746018f6b81b40e8858303662ac9ec5ce59ac6eb.tar.zst
PeerTube-746018f6b81b40e8858303662ac9ec5ce59ac6eb.zip
Refactor actor avatar display
Diffstat (limited to 'client/src/app/+videos/+video-watch')
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.html2
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss3
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment.component.html8
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment.component.scss10
-rw-r--r--client/src/app/+videos/+video-watch/comment/video-comment.component.ts4
-rw-r--r--client/src/app/+videos/+video-watch/video-avatar-channel.component.html6
-rw-r--r--client/src/app/+videos/+video-watch/video-watch.module.ts4
7 files changed, 21 insertions, 16 deletions
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
index 7bd9b7c90..42adfed8d 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.html
@@ -1,6 +1,6 @@
1<form novalidate [formGroup]="form" (ngSubmit)="formValidated()"> 1<form novalidate [formGroup]="form" (ngSubmit)="formValidated()">
2 <div class="avatar-and-textarea"> 2 <div class="avatar-and-textarea">
3 <my-account-avatar [account]="user?.account" size="25"></my-account-avatar> 3 <my-actor-avatar [account]="user?.account" size="25"></my-actor-avatar>
4 4
5 <div class="form-group"> 5 <div class="form-group">
6 <textarea i18n-placeholder placeholder="Add comment..." myAutoResize 6 <textarea i18n-placeholder placeholder="Add comment..." myAutoResize
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
index 1aa9255c2..54e61eac4 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss
@@ -13,8 +13,7 @@ form {
13 display: flex; 13 display: flex;
14 margin-bottom: 10px; 14 margin-bottom: 10px;
15 15
16 my-account-avatar { 16 my-actor-avatar {
17 vertical-align: top;
18 margin-right: 10px; 17 margin-right: 10px;
19 } 18 }
20 19
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.html b/client/src/app/+videos/+video-watch/comment/video-comment.component.html
index 2b0739261..d7ba40ef6 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment.component.html
+++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.html
@@ -1,12 +1,10 @@
1<div *ngIf="isCommentDisplayed()" class="root-comment"> 1<div *ngIf="isCommentDisplayed()" class="root-comment" [ngClass]="{ 'is-child': isChild() }">
2 <div class="left"> 2 <div class="left">
3 <my-account-avatar *ngIf="!comment.isDeleted" [href]="comment.account.url" [account]="comment.account"></my-account-avatar> 3 <my-actor-avatar *ngIf="!comment.isDeleted" [href]="comment.account.url" [account]="comment.account"></my-actor-avatar>
4 <div class="vertical-border"></div> 4 <div class="vertical-border"></div>
5 </div> 5 </div>
6 6
7 <div class="right" [ngClass]="{ 'mb-3': firstInThread }"> 7 <div class="right" [ngClass]="{ 'mb-3': firstInThread }">
8 <span *ngIf="comment.isDeleted" class="comment-avatar"></span>
9
10 <div class="comment"> 8 <div class="comment">
11 <ng-container *ngIf="!comment.isDeleted"> 9 <ng-container *ngIf="!comment.isDeleted">
12 <div *ngIf="highlightedComment === true" class="highlighted-comment" i18n>Highlighted comment</div> 10 <div *ngIf="highlightedComment === true" class="highlighted-comment" i18n>Highlighted comment</div>
@@ -68,7 +66,7 @@
68 [textValue]="redraftValue" 66 [textValue]="redraftValue"
69 ></my-video-comment-add> 67 ></my-video-comment-add>
70 68
71 <div *ngIf="commentTree" class="children"> 69 <div *ngIf="commentTree">
72 <div *ngFor="let commentChild of commentTree.children"> 70 <div *ngFor="let commentChild of commentTree.children">
73 <my-video-comment 71 <my-video-comment
74 [comment]="commentChild.comment" 72 [comment]="commentChild.comment"
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
index cf33a5b0e..f0dcc08b8 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
+++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.scss
@@ -24,6 +24,10 @@
24 } 24 }
25} 25}
26 26
27my-actor-avatar {
28 @include actor-avatar-size(36px);
29}
30
27.comment { 31.comment {
28 flex-grow: 1; 32 flex-grow: 1;
29 // Fix word-wrap with flex 33 // Fix word-wrap with flex
@@ -148,10 +152,10 @@ my-video-comment-add {
148 } 152 }
149} 153}
150 154
151.children { 155.is-child {
152 // Reduce avatars size for replies 156 // Reduce avatars size for replies
153 .comment-avatar { 157 my-actor-avatar {
154 @include avatar(25px); 158 @include actor-avatar-size(25px);
155 } 159 }
156 160
157 .left { 161 .left {
diff --git a/client/src/app/+videos/+video-watch/comment/video-comment.component.ts b/client/src/app/+videos/+video-watch/comment/video-comment.component.ts
index dd3db0c65..fd379e80e 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment.component.ts
+++ b/client/src/app/+videos/+video-watch/comment/video-comment.component.ts
@@ -138,6 +138,10 @@ export class VideoCommentComponent implements OnInit, OnChanges {
138 (this.commentTree?.hasDisplayedChildren) // Or this is a reply that have other replies 138 (this.commentTree?.hasDisplayedChildren) // Or this is a reply that have other replies
139 } 139 }
140 140
141 isChild () {
142 return this.parentComments.length !== 0
143 }
144
141 private getUserIfNeeded (account: Account) { 145 private getUserIfNeeded (account: Account) {
142 if (!account.userId) return 146 if (!account.userId) return
143 if (!this.authService.isLoggedIn()) return 147 if (!this.authService.isLoggedIn()) return
diff --git a/client/src/app/+videos/+video-watch/video-avatar-channel.component.html b/client/src/app/+videos/+video-watch/video-avatar-channel.component.html
index a02373f2d..b8b5d7843 100644
--- a/client/src/app/+videos/+video-watch/video-avatar-channel.component.html
+++ b/client/src/app/+videos/+video-watch/video-avatar-channel.component.html
@@ -4,11 +4,11 @@
4 <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" /> 4 <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
5 </a> 5 </a>
6 6
7 <my-account-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-account-avatar> 7 <my-actor-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-actor-avatar>
8</ng-container> 8</ng-container>
9 9
10 <ng-container *ngIf="!isChannelAvatarNull() && genericChannel"> 10 <ng-container *ngIf="!isChannelAvatarNull() && genericChannel">
11 <my-account-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-account-avatar> 11 <my-actor-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-actor-avatar>
12 12
13 <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle"> 13 <a [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
14 <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" /> 14 <img [src]="video.videoChannelAvatarUrl" i18n-alt alt="Channel avatar" class="channel-avatar" />
@@ -16,6 +16,6 @@
16 </ng-container> 16 </ng-container>
17 17
18 <ng-container *ngIf="isChannelAvatarNull()"> 18 <ng-container *ngIf="isChannelAvatarNull()">
19 <my-account-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-account-avatar> 19 <my-actor-avatar [account]="video.account" [title]="accountLinkTitle" [internalHref]="[ '/accounts', video.byAccount ]"></my-actor-avatar>
20 </ng-container> 20 </ng-container>
21</div> 21</div>
diff --git a/client/src/app/+videos/+video-watch/video-watch.module.ts b/client/src/app/+videos/+video-watch/video-watch.module.ts
index cf6afd852..62ce7be2d 100644
--- a/client/src/app/+videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.module.ts
@@ -20,7 +20,7 @@ import { TimestampRouteTransformerDirective } from './timestamp-route-transforme
20import { VideoWatchPlaylistComponent } from './video-watch-playlist.component' 20import { VideoWatchPlaylistComponent } from './video-watch-playlist.component'
21import { VideoWatchRoutingModule } from './video-watch-routing.module' 21import { VideoWatchRoutingModule } from './video-watch-routing.module'
22import { VideoWatchComponent } from './video-watch.component' 22import { VideoWatchComponent } from './video-watch.component'
23import { SharedAccountAvatarModule } from '../../shared/shared-account-avatar/shared-account-avatar.module' 23import { SharedActorImageModule } from '../../shared/shared-actor-image/shared-actor-image.module'
24import { VideoAvatarChannelComponent } from './video-avatar-channel.component' 24import { VideoAvatarChannelComponent } from './video-avatar-channel.component'
25 25
26@NgModule({ 26@NgModule({
@@ -39,7 +39,7 @@ import { VideoAvatarChannelComponent } from './video-avatar-channel.component'
39 SharedShareModal, 39 SharedShareModal,
40 SharedVideoModule, 40 SharedVideoModule,
41 SharedSupportModal, 41 SharedSupportModal,
42 SharedAccountAvatarModule 42 SharedActorImageModule
43 ], 43 ],
44 44
45 declarations: [ 45 declarations: [