diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html index 0b22e7526..19a4b3c9c 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html @@ -22,7 +22,7 @@
{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}
- {getTotalVideosOf(videoChannel), splural, =1 {1 videos} other {{{ getTotalVideosOf(videoChannel) }} videos}} + {getTotalVideosOf(videoChannel), plural, =1 {1 videos} other {{{ getTotalVideosOf(videoChannel) }} videos}} 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 ca4c35cb4..8f1e9deb5 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 @@ -9,7 +9,7 @@ .channel { max-width: $max-channels-width; background-color: pvar(--channelBackgroundColor); - padding: 15px; + padding: 30px; margin: 30px 0; @@ -120,6 +120,10 @@ my-subscribe-button { } @media screen and (max-width: $mobile-view) { + .channel { + padding: 15px; + } + .channel-avatar-row { grid-template-columns: auto auto auto 1fr; diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html index e149d0bc6..03d083bb6 100644 --- a/client/src/app/+accounts/accounts.component.html +++ b/client/src/app/+accounts/accounts.component.html @@ -52,7 +52,7 @@
Account created on {{ account.createdAt | date }}
-
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss index 6a51dd038..80f23ba6f 100644 --- a/client/src/app/+accounts/accounts.component.scss +++ b/client/src/app/+accounts/accounts.component.scss @@ -62,6 +62,8 @@ my-user-moderation-dropdown, .description { grid-column: 1 / 3; + max-width: 1000px; + word-break: break-word; } .created-at { diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts index abee0b9bb..e80314130 100644 --- a/client/src/app/+accounts/accounts.component.ts +++ b/client/src/app/+accounts/accounts.component.ts @@ -147,6 +147,10 @@ export class AccountsComponent implements OnInit, OnDestroy { return this.videoChannels.length !== 0 } + hasShowMoreDescription () { + return !this.accountDescriptionExpanded && this.accountDescriptionHTML.length > 100 + } + private async onAccount (account: Account) { this.accountFollowerTitle = $localize`${account.followersCount} direct account followers` diff --git a/client/src/app/+my-library/my-videos/my-videos.component.html b/client/src/app/+my-library/my-videos/my-videos.component.html index 5fa4c02ec..6e6bf12f4 100644 --- a/client/src/app/+my-library/my-videos/my-videos.component.html +++ b/client/src/app/+my-library/my-videos/my-videos.component.html @@ -34,7 +34,6 @@ [miniatureDisplayOptions]="miniatureDisplayOptions" [titlePage]="titlePage" [getVideosObservableFunction]="getVideosObservableFunction" - [ownerDisplayType]="ownerDisplayType" [user]="user" #videosSelection > diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts index 6a2a62608..0bc923e73 100644 --- a/client/src/app/+my-library/my-videos/my-videos.component.ts +++ b/client/src/app/+my-library/my-videos/my-videos.component.ts @@ -2,12 +2,12 @@ import { concat, Observable, Subject } from 'rxjs' import { debounceTime, tap, toArray } from 'rxjs/operators' import { Component, OnInit, ViewChild } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' -import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User, UserService } from '@app/core' +import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User } from '@app/core' import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook' import { immutableAssign } from '@app/helpers' import { DropdownAction, Video, VideoService } from '@app/shared/shared-main' import { LiveStreamInformationComponent } from '@app/shared/shared-video-live' -import { MiniatureDisplayOptions, OwnerDisplayType, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature' +import { MiniatureDisplayOptions, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature' import { VideoSortField } from '@shared/models' import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component' @@ -36,7 +36,6 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook { state: true, blacklistInfo: true } - ownerDisplayType: OwnerDisplayType = 'videoChannel' videoActions: DropdownAction<{ video: Video }>[] = [] diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html index b9ac13f09..87e1b294b 100644 --- a/client/src/app/+video-channels/video-channels.component.html +++ b/client/src/app/+video-channels/video-channels.component.html @@ -17,10 +17,14 @@
- + + +
-

{{ videoChannel.ownerAccount.displayName }}

+

+ {{ videoChannel.ownerAccount.displayName }} +

@{{ videoChannel.ownerBy }}
@@ -30,11 +34,11 @@
- -
@@ -83,7 +87,7 @@
Channel created on {{ videoChannel.createdAt | date }}
-
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index ec8f67a7e..3b27f3aa1 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss @@ -42,6 +42,7 @@ .channel-description { grid-column: 1; + word-break: break-word; } .show-more { @@ -108,6 +109,10 @@ h4 { font-size: 18px; margin: 0; + + a { + color: pvar(--mainForegroundColor); + } } .actor-handle { @@ -118,6 +123,7 @@ .owner-description { height: 140px; + word-break: break-word; @include fade-text(120px, pvar(--mainBackgroundColor)); } @@ -217,7 +223,8 @@ } .view-account.complete { - display: inline-block; + display: block; + text-align: right; margin-top: 10px; color: pvar(--mainColor); } diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts index a8ca3d6ff..2739047ed 100644 --- a/client/src/app/+video-channels/video-channels.component.ts +++ b/client/src/app/+video-channels/video-channels.component.ts @@ -103,10 +103,18 @@ export class VideoChannelsComponent implements OnInit, OnDestroy { this.notifier.success($localize`Username copied`) } + hasShowMoreDescription () { + return !this.channelDescriptionExpanded && this.channelDescriptionHTML.length > 100 + } + showSupportModal () { this.supportModal.show() } + getAccountUrl () { + return [ '/accounts', this.videoChannel.ownerBy ] + } + private loadChannelVideosCount () { this.videoService.getVideoChannelVideos({ videoChannel: this.videoChannel, diff --git a/client/src/app/+videos/video-list/video-user-subscriptions.component.ts b/client/src/app/+videos/video-list/video-user-subscriptions.component.ts index e352a2b2c..6aabb93a5 100644 --- a/client/src/app/+videos/video-list/video-user-subscriptions.component.ts +++ b/client/src/app/+videos/video-list/video-user-subscriptions.component.ts @@ -7,7 +7,7 @@ import { HooksService } from '@app/core/plugins/hooks.service' import { immutableAssign } from '@app/helpers' import { VideoService } from '@app/shared/shared-main' import { UserSubscriptionService } from '@app/shared/shared-user-subscription' -import { AbstractVideoList, OwnerDisplayType } from '@app/shared/shared-video-miniature' +import { AbstractVideoList } from '@app/shared/shared-video-miniature' import { FeedFormat, VideoSortField } from '@shared/models' import { environment } from '../../../environments/environment' import { copyToClipboard } from '../../../root-helpers/utils' @@ -20,7 +20,6 @@ import { copyToClipboard } from '../../../root-helpers/utils' export class VideoUserSubscriptionsComponent extends AbstractVideoList implements OnInit, OnDestroy { titlePage: string sort = '-publishedAt' as VideoSortField - ownerDisplayType: OwnerDisplayType = 'auto' groupByDate = true constructor ( diff --git a/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss b/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss index ea7cb2cf7..4998e85fa 100644 --- a/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss +++ b/client/src/app/shared/shared-main/account/video-avatar-channel.component.scss @@ -26,6 +26,7 @@ top:50%; left:50%; transform: translate(-50%,-50%); + border-radius: 5px; &:not(.channel-avatar) { border-radius: 50%; diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss index 116ff7ea0..5ae48f81b 100644 --- a/client/src/app/shared/shared-main/misc/simple-search-input.component.scss +++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.scss @@ -16,7 +16,7 @@ my-global-icon { } &[iconName=search] { - color: pvar(--mainColor); + color: pvar(--mainForegroundColor); } &[iconName=cross] { diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts index bd187a873..126e43cea 100644 --- a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts +++ b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts @@ -1,4 +1,5 @@ -import { VideoChannel as ServerVideoChannel, ViewsPerDate, Account, Avatar } from '@shared/models' +import { Account as ServerAccount, Avatar, VideoChannel as ServerVideoChannel, ViewsPerDate } from '@shared/models' +import { Account } from '../account/account.model' import { Actor } from '../account/actor.model' export class VideoChannel extends Actor implements ServerVideoChannel { @@ -9,7 +10,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel { nameWithHost: string nameWithHostForced: string - ownerAccount?: Account + ownerAccount?: ServerAccount ownerBy?: string ownerAvatarUrl?: string @@ -46,7 +47,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel { if (hash.ownerAccount) { this.ownerAccount = hash.ownerAccount this.ownerBy = Actor.CREATE_BY_STRING(hash.ownerAccount.name, hash.ownerAccount.host) - this.ownerAvatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this.ownerAccount) + this.ownerAvatarUrl = Account.GET_ACTOR_AVATAR_URL(this.ownerAccount) } } diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.html b/client/src/app/shared/shared-video-miniature/abstract-video-list.html index 07f79cd6d..41d5906cf 100644 --- a/client/src/app/shared/shared-video-miniature/abstract-video-list.html +++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.html @@ -52,8 +52,7 @@
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts index f41648e1c..18615c37a 100644 --- a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts +++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts @@ -28,8 +28,8 @@ import { isLastMonth, isLastWeek, isThisMonth, isToday, isYesterday } from '@sha import { ServerConfig, UserRight, VideoFilter, VideoSortField } from '@shared/models' import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type' import { Syndication, Video } from '../shared-main' -import { MiniatureDisplayOptions, OwnerDisplayType } from './video-miniature.component' import { GenericHeaderComponent, VideoListHeaderComponent } from './video-list-header.component' +import { MiniatureDisplayOptions } from './video-miniature.component' enum GroupDate { UNKNOWN = 0, @@ -65,7 +65,6 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte loadOnInit = true loadUserVideoPreferences = false - ownerDisplayType: OwnerDisplayType = 'auto' displayModerationBlock = false titleTooltip: string displayVideoActions = true diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts index f08be9c25..987a65e40 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts @@ -16,7 +16,7 @@ import { Video } from '../shared-main' import { VideoPlaylistService } from '../shared-video-playlist' import { VideoActionsDisplayType } from './video-actions-dropdown.component' -export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto' +export type OwnerDisplayType = 'account' | 'videoChannel' export type MiniatureDisplayOptions = { date?: boolean views?: boolean @@ -40,7 +40,6 @@ export class VideoMiniatureComponent implements OnInit { @Input() user: User @Input() video: Video - @Input() ownerDisplayType: OwnerDisplayType = 'account' @Input() displayOptions: MiniatureDisplayOptions = { date: true, views: true, @@ -89,7 +88,7 @@ export class VideoMiniatureComponent implements OnInit { videoHref: string videoTarget: string - private ownerDisplayTypeChosen: 'account' | 'videoChannel' + private ownerDisplayType: 'account' | 'videoChannel' constructor ( private screenService: ScreenService, @@ -140,11 +139,11 @@ export class VideoMiniatureComponent implements OnInit { } displayOwnerAccount () { - return this.ownerDisplayTypeChosen === 'account' + return this.ownerDisplayType === 'account' } displayOwnerVideoChannel () { - return this.ownerDisplayTypeChosen === 'videoChannel' + return this.ownerDisplayType === 'videoChannel' } isUnlistedVideo () { @@ -245,21 +244,19 @@ export class VideoMiniatureComponent implements OnInit { } private setUpBy () { - if (this.ownerDisplayType === 'account' || this.ownerDisplayType === 'videoChannel') { - this.ownerDisplayTypeChosen = this.ownerDisplayType - return - } + const accountName = this.video.account.name // If the video channel name is an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12) - // Or is just a suffix of the account (default created channel) + // Or has not been customized (default created channel display name) // -> Use the account name if ( - this.video.channel.name === `${this.video.account.name}_channel` || + this.video.channel.displayName === `Default ${accountName} channel` || + this.video.channel.displayName === `Main ${accountName} channel` || this.video.channel.name.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/) ) { - this.ownerDisplayTypeChosen = 'account' + this.ownerDisplayType = 'account' } else { - this.ownerDisplayTypeChosen = 'videoChannel' + this.ownerDisplayType = 'videoChannel' } } diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.html b/client/src/app/shared/shared-video-miniature/videos-selection.component.html index 8caeaf092..dec9e99f3 100644 --- a/client/src/app/shared/shared-video-miniature/videos-selection.component.html +++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.html @@ -9,8 +9,7 @@ diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts index ca1cf2264..f8c3800d7 100644 --- a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts +++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts @@ -17,7 +17,7 @@ import { AuthService, ComponentPagination, LocalStorageService, Notifier, Screen import { ResultList, VideoSortField } from '@shared/models' import { PeerTubeTemplateDirective, Video } from '../shared-main' import { AbstractVideoList } from './abstract-video-list' -import { MiniatureDisplayOptions, OwnerDisplayType } from './video-miniature.component' +import { MiniatureDisplayOptions } from './video-miniature.component' export type SelectionType = { [ id: number ]: boolean } @@ -31,7 +31,6 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni @Input() pagination: ComponentPagination @Input() titlePage: string @Input() miniatureDisplayOptions: MiniatureDisplayOptions - @Input() ownerDisplayType: OwnerDisplayType @Input() getVideosObservableFunction: (page: number, sort?: VideoSortField) => Observable> diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 7b862a156..affffc4cc 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -152,7 +152,7 @@ @include button-focus(pvar(--mainColorLightest)); border: 2px solid pvar(--mainColor); - font-weight: $font-regular; + font-weight: $font-semibold; &, &:active, &:focus { color: pvar(--mainColor); @@ -551,6 +551,7 @@ height: $size; min-width: $size; min-height: $size; + border-radius: 5px; } @mixin chevron ($size, $border-width) {