Add owner in video channel page

3 files changed, 39 insertions, 8 deletions

diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index 6f14e62a1..da0d76acf 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -9,6 +9,11 @@
           <div class="actor-display-name">{{ videoChannel.displayName }}</div>
         </div>
         <div class="actor-followers">{{ videoChannel.followersCount }} subscribers</div>
+
+        <a [routerLink]="[ '/accounts', videoChannel.ownerAccount.id ]" title="Go the owner account page" class="actor-owner">
+          <span>Created by {{ videoChannel.ownerBy }}</span>
+          <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
+        </a>
       </div>
     </div>
 
diff --git a/client/src/app/shared/video-channel/video-channel.model.ts b/client/src/app/shared/video-channel/video-channel.model.ts
index 01381ac30..199c1d3b8 100644
--- a/client/src/app/shared/video-channel/video-channel.model.ts
+++ b/client/src/app/shared/video-channel/video-channel.model.ts
@@ -1,15 +1,15 @@
 import { VideoChannel as ServerVideoChannel } from '../../../../../shared/models/videos/video-channel.model'
 import { Actor } from '../actor/actor.model'
+import { Account } from '../../../../../shared/models/actors'
 
 export class VideoChannel extends Actor implements ServerVideoChannel {
   displayName: string
   description: string
   support: string
   isLocal: boolean
-  ownerAccount?: {
-    id: number
-    uuid: string
-  }
+  ownerAccount?: Account
+  ownerBy?: string
+  ownerAvatarUrl?: string
 
   constructor (hash: ServerVideoChannel) {
     super(hash)
@@ -18,6 +18,11 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
     this.description = hash.description
     this.support = hash.support
     this.isLocal = hash.isLocal
-    this.ownerAccount = hash.ownerAccount
+
+    if (hash.ownerAccount) {
+      this.ownerAccount = hash.ownerAccount
+      this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host)
+      this.ownerAvatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.ownerAccount)
+    }
   }
 }
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index ffbedd3f5..dce3430fd 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -160,7 +160,7 @@
     position: absolute;
     pointer-events: none;
     border: 5px solid rgba(0, 0, 0, 0);
-    border-top-color: #000000;
+    border-top-color: #000;
     margin-top: -2px;
     z-index: 100;
   }
@@ -286,7 +286,7 @@
 
 @mixin avatar ($size) {
   object-fit: cover;
-  border-radius:50%;
+  border-radius: 50%;
   width: $size;
   height: $size;
 }
@@ -365,6 +365,27 @@
       .actor-followers {
         font-size: 15px;
       }
+
+      .actor-owner {
+        @include disable-default-a-behaviour;
+
+        display: block;
+        font-size: 13px;
+        margin-top: 4px;
+        color: #000;
+
+        span:hover {
+          opacity: 0.8;
+        }
+
+        img {
+          @include avatar(18px);
+
+          margin-left: 7px;
+          position: relative;
+          top: -2px;
+        }
+      }
     }
   }
 
@@ -389,4 +410,4 @@
     margin-right: 3px;
     background-image: url('/assets/images/admin/add.svg');
   }
-}
\ No newline at end of file
+}