Add owner in video channel page

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>
 

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
+
+    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)
+    }
   }
 }

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;
+        }
+      }
     }
   }
 

server/models/video/video-channel.ts

@@ -34,11 +34,11 @@ enum ScopeNames {
   [ScopeNames.WITH_ACCOUNT]: {
     include: [
       {
-        model: () => AccountModel,
+        model: () => AccountModel.unscoped(),
         required: true,
         include: [
           {
-            model: () => ActorModel,
+            model: () => ActorModel.unscoped(),
             required: true
           }
         ]
@@ -247,12 +247,7 @@ export class VideoChannelModel extends Model<VideoChannelModel> {
       videos: undefined
     }
 
-    if (this.Account) {
-      videoChannel.ownerAccount = {
-        id: this.Account.id,
-        uuid: this.Account.Actor.uuid
-      }
-    }
+    if (this.Account) videoChannel.ownerAccount = this.Account.toFormattedJSON()
 
     return Object.assign(actor, videoChannel)
   }

shared/models/videos/video-channel.model.ts

@@ -1,13 +1,11 @@
 import { Actor } from '../actors/actor.model'
 import { Video } from './video.model'
+import { Account } from '../actors'
 
 export interface VideoChannel extends Actor {
   displayName: string
   description: string
   support: string
   isLocal: boolean
-  ownerAccount?: {
-    id: number
-    uuid: string
-  }
+  ownerAccount?: Account
 }