- <div class="channels" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true">
- <div class="section channel" *ngFor="let videoChannel of videoChannels">
- <div class="section-title">
- <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]" i18n-title title="See this video channel">
- <img [src]="videoChannel.avatarUrl" alt="Avatar" />
+ <div class="no-results" i18n *ngIf="channelPagination.totalItems === 0">This account does not have channels.</div>
+
+ <div class="channels" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onChannelDataSubject.asObservable()">
+ <div class="channel" *ngFor="let videoChannel of videoChannels">
+
+ <div class="channel-avatar-row">
+ <my-actor-avatar
+ [channel]="videoChannel" [internalHref]="getVideoChannelLink(videoChannel)"
+ i18n-title title="See this video channel"
+ ></my-actor-avatar>
+
+ <h2>
+ <a [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel">
+ {{ videoChannel.displayName }}
+ </a>
+ </h2>
+
+ <div class="actor-counters">
+ <div class="followers" i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
+
+ <span class="videos-count" *ngIf="getTotalVideosOf(videoChannel) !== undefined" i18n>
+ {getTotalVideosOf(videoChannel), plural, =1 {1 videos} other {{{ getTotalVideosOf(videoChannel) }} videos}}
+ </span>
+ </div>