Refactor actor avatar display

2 files changed, 18 insertions, 8 deletions

diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
index ff448ad87..853d47fe6 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html
@@ -19,9 +19,7 @@
 
 <div class="video-channels" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
   <div *ngFor="let videoChannel of videoChannels" class="video-channel">
-    <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]">
-      <img [src]="videoChannel.avatarUrl" alt="Avatar" />
-    </a>
+    <my-actor-avatar [channel]="videoChannel" [internalHref]="[ '/video-channels', videoChannel.nameWithHost ]"></my-actor-avatar>
 
     <div class="video-channel-info">
       <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]" class="video-channel-names" i18n-title title="Channel page">
@@ -33,7 +31,8 @@
 
       <a [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n-title title="Owner account page" class="actor-owner">
         <span i18n>Created by {{ videoChannel.ownerBy }}</span>
-        <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
+
+        <my-actor-avatar [account]="videoChannel.ownerAccount" size="18"></my-actor-avatar>
       </a>
     </div>
 
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
index 3c1a4d2ad..53ceaa250 100644
--- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
+++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss
@@ -8,8 +8,8 @@ input[type=text] {
 .video-channel {
   @include row-blocks;
 
-  img {
-    @include channel-avatar(80px);
+  > my-actor-avatar {
+    @include actor-avatar-size(80px);
 
     margin-right: 10px;
   }
@@ -40,9 +40,20 @@ input[type=text] {
 }
 
 .actor-owner {
-  @include actor-owner;
+  @include disable-default-a-behaviour;
+
+  font-size: 13px;
+  color: pvar(--mainForegroundColor);
 
-  margin-top: 0;
+  span:hover {
+    opacity: 0.8;
+  }
+
+  my-actor-avatar {
+    margin-left: 7px;
+    display: inline-block;
+    vertical-align: top;
+  }
 }
 
 .video-subscriptions-header {