From 60c35932f6a14cfe83bb0e54407427cce70171ea Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 25 Mar 2021 13:42:55 +0100 Subject: Redesign channel page --- .../video-channel-about.component.html | 22 -- .../video-channel-about.component.scss | 12 - .../video-channel-about.component.ts | 43 --- .../video-channels-routing.module.ts | 10 - .../+video-channels/video-channels.component.html | 128 ++++++-- .../+video-channels/video-channels.component.scss | 358 ++++++++++++++++++--- .../+video-channels/video-channels.component.ts | 46 ++- .../app/+video-channels/video-channels.module.ts | 2 - 8 files changed, 434 insertions(+), 187 deletions(-) delete mode 100644 client/src/app/+video-channels/video-channel-about/video-channel-about.component.html delete mode 100644 client/src/app/+video-channels/video-channel-about/video-channel-about.component.scss delete mode 100644 client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts (limited to 'client/src/app/+video-channels') diff --git a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html deleted file mode 100644 index 8dff8ba91..000000000 --- a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html +++ /dev/null @@ -1,22 +0,0 @@ -
-
-
-
-
DESCRIPTION
-
-
- -
-
SUPPORT THIS CHANNEL
-
-
-
- -
-
-
STATS
-
Created {{ videoChannel.createdAt | date }}
-
-
-
-
diff --git a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.scss b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.scss deleted file mode 100644 index 5bcd4b561..000000000 --- a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.scss +++ /dev/null @@ -1,12 +0,0 @@ -@import '_variables'; -@import '_mixins'; - -.block { - margin-bottom: 40px; - - .small-title { - @include in-content-small-title; - - margin-bottom: 20px; - } -} diff --git a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts deleted file mode 100644 index 537c7d08e..000000000 --- a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Subscription } from 'rxjs' -import { Component, OnDestroy, OnInit } from '@angular/core' -import { MarkdownService } from '@app/core' -import { VideoChannel, VideoChannelService } from '@app/shared/shared-main' - -@Component({ - selector: 'my-video-channel-about', - templateUrl: './video-channel-about.component.html', - styleUrls: [ './video-channel-about.component.scss' ] -}) -export class VideoChannelAboutComponent implements OnInit, OnDestroy { - videoChannel: VideoChannel - descriptionHTML = '' - supportHTML = '' - - private videoChannelSub: Subscription - - constructor ( - private videoChannelService: VideoChannelService, - private markdownService: MarkdownService - ) { } - - ngOnInit () { - // Parent get the video channel for us - this.videoChannelSub = this.videoChannelService.videoChannelLoaded - .subscribe(async videoChannel => { - this.videoChannel = videoChannel - - this.descriptionHTML = await this.markdownService.textMarkdownToHTML(this.videoChannel.description) - this.supportHTML = await this.markdownService.enhancedMarkdownToHTML(this.videoChannel.support) - }) - } - - ngOnDestroy () { - if (this.videoChannelSub) this.videoChannelSub.unsubscribe() - } - - getVideoChannelDescription () { - if (this.descriptionHTML) return this.descriptionHTML - - return $localize`No description` - } -} diff --git a/client/src/app/+video-channels/video-channels-routing.module.ts b/client/src/app/+video-channels/video-channels-routing.module.ts index f8c32f14e..fcaad8934 100644 --- a/client/src/app/+video-channels/video-channels-routing.module.ts +++ b/client/src/app/+video-channels/video-channels-routing.module.ts @@ -1,7 +1,6 @@ import { NgModule } from '@angular/core' import { RouterModule, Routes } from '@angular/router' import { MetaGuard } from '@ngx-meta/core' -import { VideoChannelAboutComponent } from './video-channel-about/video-channel-about.component' import { VideoChannelPlaylistsComponent } from './video-channel-playlists/video-channel-playlists.component' import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component' import { VideoChannelsComponent } from './video-channels.component' @@ -38,15 +37,6 @@ const videoChannelsRoutes: Routes = [ title: $localize`Video channel playlists` } } - }, - { - path: 'about', - component: VideoChannelAboutComponent, - data: { - meta: { - title: $localize`About video channel` - } - } } ] } diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html index b3ea19768..f63110bf5 100644 --- a/client/src/app/+video-channels/video-channels.component.html +++ b/client/src/app/+video-channels/video-channels.component.html @@ -1,50 +1,114 @@ -
-
+
+
-
- Avatar + + + Manage channel + + + + + + +
+
+ Owner account avatar + +
+

{{ videoChannel.ownerAccount.displayName }}

-
-
-
{{ videoChannel.displayName }}
-
- {{ videoChannel.nameWithHost }} - +
@{{ videoChannel.ownerBy }}
-
- - Manage channel - - +
+
-
-
{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}
+ + + +
+ + +
+ Avatar + +
+
VIDEO CHANNEL
+ +
+
+
+

{{ videoChannel.displayName }}

+
+ +
+ @{{ videoChannel.nameWithHost }} + +
+ +
+ {videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}} + + + {channelVideosCount, plural, =1 {1 videos} other {{{ channelVideosCount }} videos}} + +
+
- - Created by{{ videoChannel.ownerBy }} - Owner account avatar - +
+ +
-
- - {{ item.label }} - +
+
+ +
Channel created on {{ videoChannel.createdAt | date }}
+
- +
+ Show more...
+ +
+ +
+ +
+
OWNER ACCOUNT
+ + +
+
+ +
+
OWNER ACCOUNT
+ +
-
- +
+ + {{ item.label }} + + +
+ +
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index 22f21dcc6..16e13c578 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss @@ -1,89 +1,345 @@ -// Bootstrap grid utilities require functions, variables and mixins -@import 'node_modules/bootstrap/scss/functions'; -@import 'node_modules/bootstrap/scss/variables'; -@import 'node_modules/bootstrap/scss/mixins'; -@import 'node_modules/bootstrap/scss/grid'; - @import '_variables'; @import '_mixins'; +@import '_miniature'; -.sub-menu { - @include sub-menu-with-actor; +.root { + --myGlobalPadding: 60px; + --myChannelImgMargin: 30px; + --myFontSize: 16px; + --myGreyChannelFontSize: 16px; + --myGreyOwnerFontSize: 14px; +} - .actor, .actor-info { - width: 100%; +.section-label { + color: pvar(--mainColor); + font-size: 12px; + margin-bottom: 15px; + font-weight: $font-bold; + letter-spacing: 2.5px; +} + +.links { + @include fluid-videos-miniature-layout; +} + +.channel-info { + 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); + font-size: var(--myFontSize); +} + +.channel-avatar-row { + display: flex; + grid-column: 1; + margin-bottom: 30px; + + img { + @include channel-avatar(120px); + } + + > div { + margin-left: var(--myChannelImgMargin); } .actor-info { - display: grid !important; - grid-template-columns: 1fr auto; - grid-template-rows: 1fr auto / 1fr auto; - grid-template-areas: "name buttons" "lower buttons"; + display: flex; - @include media-breakpoint-down(lg) { - grid-template-areas: "name name" "lower buttons"; + > div:first-child { + flex-grow: 1; } } - .actor-names { - grid-area: name; + .actor-display-name { + display: flex; + flex-wrap: wrap; } - .actor-name { - flex-grow: 1; + h1 { + font-size: 28px; + font-weight: $font-bold; + margin: 0; + } - .copy-button { - border: none; - padding: 5px; - margin-top: -2px; - } + .actor-handle, + .actor-counters { + color: pvar(--greyForegroundColor); + font-size: var(--myGreyChannelFontSize); + } + + .actor-counters > *:not(:last-child)::after { + content: '•'; + margin: 0 10px; + color: pvar(--mainColor); } } -.margin-content { - // margin-content is required, but child views have their own margins - // that match views outside the scope of accounts, so we only align - // them with the margins of .sub-menu when required. - margin: 0; +.channel-description { + grid-column: 1; } -.right-buttons { +.show-more { + display: none; + color: pvar(--mainColor); + cursor: pointer; + margin: 10px auto 45px auto; +} + + +.channel-buttons { display: flex; - height: max-content; - margin-left: auto; - margin-top: 10px; + flex-wrap: wrap; + + > *:not(:last-child) { + margin-right: 15px; + } +} + +.channel-buttons.right { + margin-left: 45px; +} + +// Only used by mobile +.channel-buttons.bottom { + display: none; +} + +.created-at { + margin-top: 15px; + color: pvar(--greyForegroundColor); + padding-bottom: 60px; +} + +.owner-card { + margin-left: 105px; + grid-column: 2; + // Takes all the column + grid-row: 1 / 3; + place-self: end; +} + +// Only used on mobile +.bottom-owner { + display: none; +} + +.owner-block { + background-color: pvar(--mainBackgroundColor); + padding: 30px; + width: 300px; + font-size: var(--myFontSize); + + .avatar-row { + display: flex; + margin-bottom: 15px; + + img { + @include avatar(48px); + } + + .actor-info { + margin-left: 15px; + } + + h4 { + font-size: 18px; + margin: 0; + } + + .actor-handle { + font-size: var(--myGreyOwnerFontSize); + color: pvar(--greyForegroundColor); + } + } + + .owner-description { + height: 140px; + + @include fade-text(120px, pvar(--mainBackgroundColor)); + } +} + +.view-account.short { + @include peertube-button-link; + @include orange-button-inverted; + + margin-top: 30px; +} + +.view-account.complete { + display: none; +} + +.copy-button { + border: none; +} + +@media screen and (max-width: 1400px) { + // Takes all the row width + .channel-avatar-row { + grid-column: 1 / 3; + } + + .owner-card { + grid-row: 2; + margin-left: 60px; + } +} + +@media screen and (max-width: 1100px) { + .root { + --myGlobalPadding: 45px; + --myChannelImgMargin: 15px; + } + + .channel-info { + display: flex; + flex-direction: column; + margin-bottom: 0; + } + + .channel-description:not(.expanded) { + max-height: 70px; + + @include fade-text(30px, pvar(--channelBackgroundColor)); + } + + .show-more { + display: inline-block; + } + + .channel-buttons.bottom { + display: flex; + justify-content: center; + margin-bottom: 30px; + } + + .channel-buttons.right { + display: none; + } + + .owner-card { + display: none; + } - grid-row: buttons-start / span buttons-end; - grid-column: buttons-start; + .bottom-owner { + display: block; + width: 100%; + border-bottom: 2px solid $separator-border-color; + padding: var(--myGlobalPadding) 45px; + margin-bottom: 60px; + } - @include media-breakpoint-down(lg) { - flex-flow: column-reverse; + .owner-block { + display: grid; + width: 100%; + padding: 0; - a { - margin-top: 0.25rem; - margin-right: 0 !important; + .avatar-row { + grid-column: 1; + margin-right: 30px; + } + + .owner-description { + grid-column: 2; + max-height: 70px; + + @include fade-text(30px, pvar(--mainBackgroundColor)); + } + + .view-account { + grid-column: 2; } } - a { - @include peertube-button-outline; - line-height: 1.8; + .view-account.complete { + display: inline-block; + margin-top: 10px; + color: pvar(--mainColor); } - my-subscribe-button { - height: min-content; + .view-account.short { + display: none; } } @media screen and (max-width: $mobile-view) { - .sub-menu { - .actor { - flex-direction: column; + .root { + --myGlobalPadding: 15px; + --myFontSize: 14px; + --myGreyChannelFontSize: 13px; + --myGreyOwnerFontSize: 13px; + } + + .links { + margin: auto !important; + width: min-content; + } + + .section-label { + font-size: 10px; + letter-spacing: 2.1px; + margin-bottom: 5px; + } + + .channel-avatar-row { + margin-bottom: 15px; + + h1 { + font-size: 22px; + } + + img { + @include channel-avatar(80px); + } + } + + .show-more { + margin-bottom: 30px; + } - .actor-info .actor-names { + .bottom-owner { + padding: 15px; + margin-bottom: 30px; + + .section-label { + display: none; + } + } + + .owner-block { + display: block; + + .avatar-row { + display: flex; + flex-direction: row-reverse; + margin: 0; + + h4 { + font-size: 16px; + } + + .actor-info { + display: flex; flex-direction: column; - align-items: normal; + align-items: flex-end; + justify-content: flex-end; + margin-top: -5px; + } + + img { + @include channel-avatar(64px); + + margin: -30px 0 0 15px; } } + + .owner-description { + display: none; + } } } diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts index bb601e227..037c108f2 100644 --- a/client/src/app/+video-channels/video-channels.component.ts +++ b/client/src/app/+video-channels/video-channels.component.ts @@ -3,8 +3,8 @@ import { Subscription } from 'rxjs' import { catchError, distinctUntilChanged, map, switchMap } from 'rxjs/operators' import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core' import { ActivatedRoute } from '@angular/router' -import { AuthService, Notifier, RestExtractor, ScreenService } from '@app/core' -import { ListOverflowItem, VideoChannel, VideoChannelService } from '@app/shared/shared-main' +import { AuthService, MarkdownService, Notifier, RestExtractor, ScreenService } from '@app/core' +import { ListOverflowItem, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main' import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription' import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes' @@ -20,6 +20,11 @@ export class VideoChannelsComponent implements OnInit, OnDestroy { links: ListOverflowItem[] = [] isChannelManageable = false + channelVideosCount: number + ownerDescriptionHTML = '' + channelDescriptionHTML = '' + channelDescriptionExpanded = false + private routeSub: Subscription constructor ( @@ -27,9 +32,11 @@ export class VideoChannelsComponent implements OnInit, OnDestroy { private notifier: Notifier, private authService: AuthService, private videoChannelService: VideoChannelService, + private videoService: VideoService, private restExtractor: RestExtractor, private hotkeysService: HotkeysService, - private screenService: ScreenService + private screenService: ScreenService, + private markdown: MarkdownService ) { } ngOnInit () { @@ -43,16 +50,14 @@ export class VideoChannelsComponent implements OnInit, OnDestroy { HttpStatusCode.NOT_FOUND_404 ])) ) - .subscribe(videoChannel => { + .subscribe(async videoChannel => { + this.channelDescriptionHTML = await this.markdown.textMarkdownToHTML(videoChannel.description) + this.ownerDescriptionHTML = await this.markdown.textMarkdownToHTML(videoChannel.ownerAccount.description) + + // After the markdown renderer to avoid layout changes this.videoChannel = videoChannel - if (this.authService.isLoggedIn()) { - this.authService.userInformationLoaded - .subscribe(() => { - const channelUserId = this.videoChannel.ownerAccount.userId - this.isChannelManageable = channelUserId && channelUserId === this.authService.getUser().id - }) - } + this.loadChannelVideosCount() }) this.hotkeys = [ @@ -67,8 +72,7 @@ export class VideoChannelsComponent implements OnInit, OnDestroy { this.links = [ { label: $localize`VIDEOS`, routerLink: 'videos' }, - { label: $localize`VIDEO PLAYLISTS`, routerLink: 'video-playlists' }, - { label: $localize`ABOUT`, routerLink: 'about' } + { label: $localize`VIDEO PLAYLISTS`, routerLink: 'video-playlists' } ] } @@ -79,7 +83,7 @@ export class VideoChannelsComponent implements OnInit, OnDestroy { if (this.isUserLoggedIn()) this.hotkeysService.remove(this.hotkeys) } - get isInSmallView () { + isInSmallView () { return this.screenService.isInSmallView() } @@ -87,12 +91,24 @@ export class VideoChannelsComponent implements OnInit, OnDestroy { return this.authService.isLoggedIn() } - get isManageable () { + isManageable () { if (!this.isUserLoggedIn()) return false + return this.videoChannel.ownerAccount.userId === this.authService.getUser().id } activateCopiedMessage () { this.notifier.success($localize`Username copied`) } + + private loadChannelVideosCount () { + this.videoService.getVideoChannelVideos({ + videoChannel: this.videoChannel, + videoPagination: { + currentPage: 1, + itemsPerPage: 0 + }, + sort: '-publishedAt' + }).subscribe(res => this.channelVideosCount = res.total) + } } diff --git a/client/src/app/+video-channels/video-channels.module.ts b/client/src/app/+video-channels/video-channels.module.ts index 05236ff85..1b58a1d92 100644 --- a/client/src/app/+video-channels/video-channels.module.ts +++ b/client/src/app/+video-channels/video-channels.module.ts @@ -5,7 +5,6 @@ import { SharedMainModule } from '@app/shared/shared-main' import { SharedUserSubscriptionModule } from '@app/shared/shared-user-subscription' import { SharedVideoMiniatureModule } from '@app/shared/shared-video-miniature' import { SharedVideoPlaylistModule } from '@app/shared/shared-video-playlist' -import { VideoChannelAboutComponent } from './video-channel-about/video-channel-about.component' import { VideoChannelPlaylistsComponent } from './video-channel-playlists/video-channel-playlists.component' import { VideoChannelVideosComponent } from './video-channel-videos/video-channel-videos.component' import { VideoChannelsRoutingModule } from './video-channels-routing.module' @@ -26,7 +25,6 @@ import { VideoChannelsComponent } from './video-channels.component' declarations: [ VideoChannelsComponent, VideoChannelVideosComponent, - VideoChannelAboutComponent, VideoChannelPlaylistsComponent ], -- cgit v1.2.3