Redesign account's channels page

client/src/app/+accounts/account-video-channels/account-video-channels.component.html

@@ -1,33 +1,50 @@
 <h1 class="sr-only" i18n>Video channels</h1>
+
 <div class="margin-content">
 
   <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="section channel" *ngFor="let videoChannel of videoChannels">
+    <div class="channel" *ngFor="let videoChannel of videoChannels">
-      <div class="section-title">
-        <a [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel">
-          <img [src]="videoChannel.avatarUrl" alt="Avatar" />
 
-          <h2 class="section-title">{{ videoChannel.displayName }}</h2>
+      <div class="channel-avatar-row">
-          <div class="followers" i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
+        <a class="avatar-link" [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel">
+          <img [src]="videoChannel.avatarUrl" alt="Avatar" />
         </a>
 
-        <my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
+        <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), splural, =1 {1 videos} other {{{ getTotalVideosOf(videoChannel) }} videos}}
+          </span>
+        </div>
+
+        <div class="description-html" [innerHTML]="getChannelDescription(videoChannel)"></div>
       </div>
 
-      <div *ngIf="getVideosOf(videoChannel)" class="videos">
+      <my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
-        <div class="no-results my-5" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel doesn't have any videos.</div>
+
+      <a i18n class="button-show-channel peertube-button-link orange-button-inverted" [routerLink]="getVideoChannelLink(videoChannel)">Show this channel</a>
+
+      <div class="videos">
+        <div class="no-results" i18n *ngIf="getTotalVideosOf(videoChannel) === 0">This channel doesn't have any videos.</div>
 
         <my-video-miniature
           *ngFor="let video of getVideosOf(videoChannel)"
-          [video]="video" [user]="userMiniature" [displayVideoActions]="true"
+          [video]="video" [user]="userMiniature" [displayVideoActions]="true" [displayOptions]="miniatureDisplayOptions"
         ></my-video-miniature>
-      </div>
 
-      <a *ngIf="getVideosOf(videoChannel).length !== 0" class="show-more" i18n [routerLink]="getVideoChannelLink(videoChannel)">
+        <div *ngIf="getTotalVideosOf(videoChannel)" class="miniature-show-channel">
-        SHOW THIS CHANNEL
+          <a i18n [routerLink]="getVideoChannelLink(videoChannel)">SHOW THIS CHANNEL ></a>
-      </a>
+        </div>
+      </div>
     </div>
   </div>
 </div>

client/src/app/+accounts/account-video-channels/account-video-channels.component.scss

@@ -3,37 +3,169 @@
 @import '_miniature';
 
 .margin-content {
-  @include fluid-videos-miniature-layout;
+  @include fluid-videos-miniature-margins;
 }
 
-.section {
+.channel {
-  @include miniature-rows;
+  max-width: $max-channels-width;
+  background-color: pvar(--channelBackgroundColor);
+  padding: 15px;
 
-  padding-top: 0 !important;
+  margin: 30px 0;
 
-  .section-title {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+  column-gap: 15px;
+}
+
+.channel-avatar-row {
+  grid-column: 1;
+  grid-row: 1;
+
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  grid-template-rows: auto 1fr;
+
+  .avatar-link {
+    grid-column: 1;
+    grid-row: 1 / 3;
+    margin-right: 30px;
+  }
+
+  img {
+    @include channel-avatar(75px);
+  }
+
+  a {
+    color: pvar(--mainForegroundColor);
+  }
+
+  h2 {
+    grid-row: 1;
+    grid-column: 2;
+    font-size: 20px;
+    line-height: 1;
+    font-weight: $font-bold;
+    margin: 0;
+  }
+
+  .actor-counters {
+    grid-row: 1;
+    grid-column: 3;
+    color: pvar(--greyForegroundColor);
+    font-size: 16px;
+    display: flex;
     align-items: center;
+    margin-left: 15px;
   }
 
-  .videos {
+  .actor-counters > *:not(:last-child)::after {
-    overflow: hidden;
+    content: '•';
-
+    margin: 0 10px;
-    .no-results {
+    color: pvar(--mainColor);
-      height: 50px;
-    }
   }
 
-  my-video-miniature ::ng-deep my-video-actions-dropdown > my-action-dropdown {
+  .description-html {
-    // Fix our overflow
+    grid-column: 2 / 4;
-    position: absolute;
+    grid-row: 2;
+
+    max-height: 80px;
+    font-size: 16px;
+
+    @include fade-text(30px, pvar(--channelBackgroundColor));
   }
 }
 
+my-subscribe-button {
+  grid-row: 1;
+  grid-column: 2;
+}
+
+.videos {
+  display: flex;
+  grid-column: 1 / 3;
+  grid-row: 2;
+  margin-top: 30px;
+
+  position: relative;
+  overflow: hidden;
+
+  my-video-miniature {
+    margin-right: 15px;
+  }
+
+  .no-results {
+    height: auto;
+  }
+}
+
+.miniature-show-channel {
+  height: 100%;
+  position: absolute;
+  right: 0;
+  background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px);
+  padding: ($video-thumbnail-height / 2 - 10px) 15px 0 60px;
+  z-index: z(miniature) + 1;
+
+  a {
+    color: pvar(--mainColor);
+    font-size: 16px;
+    font-weight: $font-semibold;
+  }
+}
+
+.button-show-channel {
+  display: none;
+}
+
 @media screen and (max-width: $mobile-view) {
-  .section {
+  .channel-avatar-row {
-    .section-title {
+    grid-template-columns: auto auto auto 1fr;
-      flex-direction: column;
+
-      align-items: normal;
+    .avatar-link {
+      grid-row: 1 / 4;
+    }
+
+    h2 {
+      font-size: 16px;
+    }
+
+    .actor-counters {
+      margin: 0;
+      font-size: 13px;
+      grid-row: 2;
+      grid-column: 2 / 4;
+    }
+
+    .description-html {
+      grid-row: 3;
+      font-size: 14px;
     }
   }
+
+  .show-channel a {
+    @include peertube-button-link;
+    @include orange-button-inverted;
+  }
+
+  .videos {
+    display: none;
+  }
+
+  my-subscribe-button,
+  .button-show-channel {
+    grid-column: 1 / 4;
+    grid-row: 3;
+    margin-top: 15px;
+  }
+
+  my-subscribe-button {
+    justify-self: start;
+  }
+
+  .button-show-channel {
+    display: block;
+    justify-self: end;
+  }
 }

client/src/app/+accounts/account-video-channels/account-video-channels.component.ts

@@ -1,9 +1,10 @@
 import { from, Subject, Subscription } from 'rxjs'
 import { concatMap, map, switchMap, tap } from 'rxjs/operators'
 import { Component, OnDestroy, OnInit } from '@angular/core'
-import { ComponentPagination, hasMoreItems, ScreenService, User, UserService } from '@app/core'
+import { ComponentPagination, hasMoreItems, MarkdownService, ScreenService, User, UserService } from '@app/core'
 import { Account, AccountService, Video, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main'
 import { NSFWPolicyType, VideoSortField } from '@shared/models'
+import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature'
 
 @Component({
   selector: 'my-account-video-channels',
@@ -13,7 +14,10 @@ import { NSFWPolicyType, VideoSortField } from '@shared/models'
 export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
   account: Account
   videoChannels: VideoChannel[] = []
-  videos: { [id: number]: Video[] } = {}
+
+  videos: { [id: number]: { total: number, videos: Video[] } } = {}
+
+  channelsDescriptionHTML: { [ id: number ]: string } = {}
 
   channelPagination: ComponentPagination = {
     currentPage: 1,
@@ -23,7 +27,7 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
 
   videosPagination: ComponentPagination = {
     currentPage: 1,
-    itemsPerPage: 12,
+    itemsPerPage: 5,
     totalItems: null
   }
   videosSort: VideoSortField = '-publishedAt'
@@ -32,6 +36,16 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
 
   userMiniature: User
   nsfwPolicy: NSFWPolicyType
+  miniatureDisplayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: false,
+    avatar: false,
+    privacyLabel: false,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
 
   private accountSub: Subscription
 
@@ -39,7 +53,7 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
     private accountService: AccountService,
     private videoChannelService: VideoChannelService,
     private videoService: VideoService,
-    private screenService: ScreenService,
+    private markdown: MarkdownService,
     private userService: UserService
   ) { }
 
@@ -78,23 +92,36 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
           }
 
           return this.videoService.getVideoChannelVideos(options)
-            .pipe(map(data => ({ videoChannel, videos: data.data })))
+            .pipe(map(data => ({ videoChannel, videos: data.data, total: data.total })))
         })
       )
-      .subscribe(({ videoChannel, videos }) => {
+      .subscribe(async ({ videoChannel, videos, total }) => {
+        this.channelsDescriptionHTML[videoChannel.id] = await this.markdown.textMarkdownToHTML(videoChannel.description)
+
         this.videoChannels.push(videoChannel)
 
-        this.videos[videoChannel.id] = videos
+        this.videos[videoChannel.id] = { videos, total }
 
         this.onChannelDataSubject.next([ videoChannel ])
       })
   }
 
   getVideosOf (videoChannel: VideoChannel) {
-    const numberOfVideos = this.screenService.getNumberOfAvailableMiniatures()
+    const obj = this.videos[ videoChannel.id ]
+    if (!obj) return []
 
-    // 2 rows
+    return obj.videos
-    return this.videos[ videoChannel.id ].slice(0, numberOfVideos * 2)
+  }
+
+  getTotalVideosOf (videoChannel: VideoChannel) {
+    const obj = this.videos[ videoChannel.id ]
+    if (!obj) return undefined
+
+    return obj.total
+  }
+
+  getChannelDescription (videoChannel: VideoChannel) {
+    return this.channelsDescriptionHTML[videoChannel.id]
   }
 
   onNearOfBottom () {

client/src/app/+accounts/accounts.component.html

@@ -60,11 +60,11 @@
     </div>
 
     <div class="buttons">
-      <a *ngIf="isManageable() && !isInSmallView()" routerLink="/my-account" class="peertube-button-link orange-button" i18n>
+      <a *ngIf="isManageable()" routerLink="/my-account" class="peertube-button-link orange-button" i18n>
         Manage account
       </a>
 
-      <my-subscribe-button *ngIf="videoChannels" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button>
+      <my-subscribe-button *ngIf="hasVideoChannels() && !isManageable()" [account]="account" [videoChannels]="videoChannels"></my-subscribe-button>
     </div>
   </div>
 

client/src/app/+accounts/accounts.component.scss

@@ -4,7 +4,7 @@
 @import '_miniature';
 
 .root {
-  --myGlobalPadding: 60px;
+  --myGlobalTopPadding: 60px;
   --myImgMargin: 30px;
   --myFontSize: 16px;
   --myGreyFontSize: 16px;
@@ -15,12 +15,16 @@
 }
 
 .links {
-  @include fluid-videos-miniature-layout;
+  @include fluid-videos-miniature-margins;
 
   display: flex;
   justify-content: space-between;
   align-items: center;
-  max-width: 800px;
+  max-width: $max-channels-width;
+
+  simple-search-input {
+    margin-left: auto;
+  }
 }
 
 my-user-moderation-dropdown,
@@ -40,13 +44,15 @@ my-user-moderation-dropdown,
 }
 
 .account-info {
+  @include fluid-videos-miniature-margins(false, 15px);
+
   display: grid;
   grid-template-columns: 1fr min-content;
   grid-template-rows: auto auto;
 
   background-color: pvar(--submenuColor);
   margin-bottom: 45px;
-  padding: var(--myGlobalPadding) var(--myGlobalPadding) 0 var(--myGlobalPadding);
+  padding-top: var(--myGlobalTopPadding);
   font-size: var(--myFontSize);
 }
 
@@ -83,11 +89,15 @@ my-user-moderation-dropdown,
   > *:not(:last-child) {
     margin-bottom: 15px;
   }
+
+  > a {
+    white-space: nowrap;
+  }
 }
 
 @media screen and (max-width: $small-view) {
   .root {
-    --myGlobalPadding: 45px;
+    --myGlobalTopPadding: 45px;
     --myChannelImgMargin: 15px;
   }
 
@@ -113,7 +123,7 @@ my-user-moderation-dropdown,
 
 @media screen and (max-width: $mobile-view) {
   .root {
-    --myGlobalPadding: 15px;
+    --myGlobalTopPadding: 15px;
     --myFontSize: 14px;
     --myGreyFontSize: 13px;
   }

client/src/app/+accounts/accounts.component.ts

@@ -143,6 +143,10 @@ export class AccountsComponent implements OnInit, OnDestroy {
     this.hideMenu = this.isInSmallView() && displayed
   }
 
+  hasVideoChannels () {
+    return this.videoChannels.length !== 0
+  }
+
   private async onAccount (account: Account) {
     this.accountFollowerTitle = $localize`${account.followersCount} direct account followers`
 

client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts

@@ -5,7 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, ConfirmService, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
 import { immutableAssign } from '@app/helpers'
 import { VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main'
-import { AbstractVideoList } from '@app/shared/shared-video-miniature'
+import { AbstractVideoList, MiniatureDisplayOptions } from '@app/shared/shared-video-miniature'
 import { VideoFilter } from '@shared/models'
 
 @Component({
@@ -22,6 +22,17 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
 
   filter: VideoFilter = null
 
+  displayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: false,
+    avatar: false,
+    privacyLabel: true,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
+
   private videoChannel: VideoChannel
   private videoChannelSub: Subscription
 

client/src/app/+video-channels/video-channels.component.html

@@ -2,17 +2,17 @@
   <div class="channel-info">
 
     <ng-template #buttonsTemplate>
-        <a *ngIf="isManageable() && !isInSmallView()" [routerLink]="[ '/my-library/video-channels/update', videoChannel.nameWithHost ]" class="peertube-button-link orange-button" i18n>
+        <a *ngIf="isManageable()" [routerLink]="[ '/my-library/video-channels/update', videoChannel.nameWithHost ]" class="peertube-button-link orange-button" i18n>
           Manage channel
         </a>
 
-        <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
+        <my-subscribe-button *ngIf="!isManageable()" #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
     </ng-template>
 
     <ng-template #ownerTemplate>
       <div class="owner-block">
         <div class="avatar-row">
-          <img class="channel-avatar" [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
+          <img class="account-avatar" [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
 
           <div class="actor-info">
             <h4>{{ videoChannel.ownerAccount.displayName }}</h4>
@@ -36,7 +36,7 @@
     </ng-template>
 
     <div class="channel-avatar-row">
-      <img [src]="videoChannel.avatarUrl" alt="Avatar" />
+      <img class="channel-avatar" [src]="videoChannel.avatarUrl" alt="Avatar" />
 
       <div>
         <div class="section-label" i18n>VIDEO CHANNEL</div>

client/src/app/+video-channels/video-channels.component.scss

@@ -4,7 +4,7 @@
 @import '_miniature';
 
 .root {
-  --myGlobalPadding: 60px;
+  --myGlobalTopPadding: 60px;
   --myChannelImgMargin: 30px;
   --myFontSize: 16px;
   --myGreyChannelFontSize: 16px;
@@ -16,17 +16,19 @@
 }
 
 .links {
-  @include fluid-videos-miniature-layout;
+  @include fluid-videos-miniature-margins;
 }
 
 .channel-info {
+  @include fluid-videos-miniature-margins(false, 15px);
+
   display: grid;
   grid-template-columns: 1fr auto;
   grid-template-rows: auto auto;
 
   background-color: pvar(--channelBackgroundColor);
   margin-bottom: 45px;
-  padding: var(--myGlobalPadding) var(--myGlobalPadding) 0 var(--myGlobalPadding);
+  padding-top: var(--myGlobalTopPadding);
   font-size: var(--myFontSize);
 }
 
@@ -146,7 +148,7 @@
 
 @media screen and (max-width: 1100px) {
   .root {
-    --myGlobalPadding: 45px;
+    --myGlobalTopPadding: 45px;
     --myChannelImgMargin: 15px;
   }
 
@@ -184,7 +186,7 @@
     display: block;
     width: 100%;
     border-bottom: 2px solid $separator-border-color;
-    padding: var(--myGlobalPadding) 45px;
+    padding: var(--myGlobalTopPadding) 45px;
     margin-bottom: 60px;
   }
 
@@ -223,7 +225,7 @@
 
 @media screen and (max-width: $mobile-view) {
   .root {
-    --myGlobalPadding: 15px;
+    --myGlobalTopPadding: 15px;
     --myFontSize: 14px;
     --myGreyChannelFontSize: 13px;
     --myGreyOwnerFontSize: 13px;

client/src/app/shared/shared-main/misc/simple-search-input.component.scss

@@ -6,8 +6,8 @@
 }
 
 my-global-icon {
-  height: 26px;
+  height: 28px;
-  width: 26px;
+  width: 28px;
   margin-left: 10px;
   cursor: pointer;
 

client/src/sass/include/_miniature.scss

@@ -176,14 +176,41 @@ $play-overlay-width: 18px;
   }
 }
 
-@mixin fluid-videos-miniature-layout {
+// Use margin by default, or padding if $margin is false
-  margin-left: $not-expanded-horizontal-margins !important;
+@mixin fluid-videos-miniature-margins ($margin: true, $min-margin: 0) {
-  margin-right: $not-expanded-horizontal-margins !important;
+  @if $margin {
+    margin-left: $not-expanded-horizontal-margins !important;
+    margin-right: $not-expanded-horizontal-margins !important;
+  } @else {
+    padding-left: $not-expanded-horizontal-margins !important;
+    padding-right: $not-expanded-horizontal-margins !important;
+  }
 
   @media screen and (max-width: $mobile-view) {
     width: auto;
-    margin: 0 !important;
 
+    @if $margin {
+      margin: $min-margin !important;
+    } @else {
+      padding: $min-margin !important;
+    }
+  }
+
+  @media screen and (min-width: #{breakpoint(fhd)}) {
+    @if $margin {
+      margin-left: 6vw !important;
+      margin-right: 6vw !important;
+    } @else {
+      padding-left: 6vw !important;
+      padding-right: 6vw !important;
+    }
+  }
+}
+
+@mixin fluid-videos-miniature-layout {
+  @include fluid-videos-miniature-margins;
+
+  @media screen and (max-width: $mobile-view) {
     .videos {
       text-align: center;
 
@@ -209,13 +236,7 @@ $play-overlay-width: 18px;
     }
   }
 
-  @media screen and (min-width: #{breakpoint(fhd)}) {
-    margin-left: 6vw !important;
-    margin-right: 6vw !important;
-  }
-
   @media screen and (min-width: $mobile-view) {
-
     .videos {
       --miniature-min-width: #{$video-thumbnail-width - 15px};
       --miniature-max-width: #{$video-thumbnail-width};

client/src/sass/include/_variables.scss

@@ -52,6 +52,7 @@ $sub-menu-color: #F7F7F7;
 $sub-menu-height: 81px;
 
 $channel-background-color: #f6ede8;
+$max-channels-width: 1200px;
 
 $footer-height: 30px;
 $footer-margin: 30px;