This account does not have channels.
-
-
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 4957e91d7..ca4c35cb4 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/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 {
- @include miniature-rows;
+.channel {
+ 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 {
- overflow: hidden;
-
- .no-results {
- height: 50px;
- }
+ .actor-counters > *:not(:last-child)::after {
+ content: '•';
+ margin: 0 10px;
+ color: pvar(--mainColor);
}
- my-video-miniature ::ng-deep my-video-actions-dropdown > my-action-dropdown {
- // Fix our overflow
- position: absolute;
+ .description-html {
+ grid-column: 2 / 4;
+ 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 {
- .section-title {
- flex-direction: column;
- align-items: normal;
+ .channel-avatar-row {
+ grid-template-columns: auto auto auto 1fr;
+
+ .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;
+ }
}
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
index f2beb6689..0628c7a96 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
+++ b/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 this.videos[ videoChannel.id ].slice(0, numberOfVideos * 2)
+ return obj.videos
+ }
+
+ 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 () {
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 92d24ce94..e149d0bc6 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -60,11 +60,11 @@
-
- ![Avatar]()
+
-
{{ videoChannel.displayName }}
-{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}
+
+
+ ![Avatar]()
-
- + + {{ videoChannel.displayName }} + +
+ +
+
+
+
{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}
+
+
+ {getTotalVideosOf(videoChannel), splural, =1 {1 videos} other {{{ getTotalVideosOf(videoChannel) }} videos}}
+
+
-
This channel doesn't have any videos.
+
+
-
- SHOW THIS CHANNEL
-
+
+ This channel doesn't have any videos.