From 8a19bee1a1ee39f973bb37429e4f73c3f2873cdb Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 17 Aug 2018 15:45:42 +0200 Subject: Add ability to set a name to a channel --- .../account-video-channels.component.html | 2 +- .../account-video-channels.component.ts | 2 +- .../my-account-video-channel-create.component.ts | 6 ++++++ .../my-account-video-channel-edit.component.html | 16 ++++++++++++++++ .../my-account-video-channel-edit.component.scss | 9 +++++++++ .../my-account-video-channels.component.html | 9 ++++----- .../my-account-video-channels.component.scss | 3 +++ .../app/+video-channels/video-channels.component.html | 1 + .../form-validators/video-channel-validators.service.ts | 16 ++++++++++++++++ .../src/app/shared/video-channel/video-channel.model.ts | 2 ++ .../app/shared/video-channel/video-channel.service.ts | 4 ++-- client/src/app/shared/video/video.service.ts | 2 +- client/src/app/signup/signup.component.html | 15 +++++++++++---- client/src/app/signup/signup.component.scss | 9 +++++++++ client/src/app/signup/signup.component.ts | 4 ++++ .../app/videos/+video-watch/video-watch.component.html | 2 +- client/src/sass/include/_mixins.scss | 11 +++++++++-- 17 files changed, 96 insertions(+), 17 deletions(-) (limited to 'client') 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 bcd3beaf0..114a9e517 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 @@ -1,6 +1,6 @@
Avatar 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 ebc671113..44f5626bb 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 @@ -2,10 +2,10 @@ import { Component, OnDestroy, OnInit } from '@angular/core' import { ActivatedRoute } from '@angular/router' import { Account } from '@app/shared/account/account.model' import { AccountService } from '@app/shared/account/account.service' -import { VideoChannel } from '../../../../../shared/models/videos' import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' import { flatMap, map, tap } from 'rxjs/operators' import { Subscription } from 'rxjs' +import { VideoChannel } from '@app/shared/video-channel/video-channel.model' @Component({ selector: 'my-account-video-channels', diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-create.component.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-create.component.ts index c0eaa4763..79ac07c93 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-create.component.ts +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-create.component.ts @@ -29,8 +29,13 @@ export class MyAccountVideoChannelCreateComponent extends MyAccountVideoChannelE super() } + get instanceHost () { + return window.location.host + } + ngOnInit () { this.buildForm({ + name: this.videoChannelValidatorsService.VIDEO_CHANNEL_NAME, 'display-name': this.videoChannelValidatorsService.VIDEO_CHANNEL_DISPLAY_NAME, description: this.videoChannelValidatorsService.VIDEO_CHANNEL_DESCRIPTION, support: this.videoChannelValidatorsService.VIDEO_CHANNEL_SUPPORT @@ -42,6 +47,7 @@ export class MyAccountVideoChannelCreateComponent extends MyAccountVideoChannelE const body = this.form.value const videoChannelCreate: VideoChannelCreate = { + name: body.name, displayName: body['display-name'], description: body.description || null, support: body.support || null diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html index f7ca2ec43..81fb11f45 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.component.html @@ -8,6 +8,22 @@
{{ error }}
+
+ +
+ +
+ @{{ instanceHost }} +
+
+
+ {{ formErrors['name'] }} +
+
+
- + Avatar
- +
{{ videoChannel.displayName }}
- - +
{{ videoChannel.name }}
{{ videoChannel.followersCount }} subscribers
@@ -24,7 +23,7 @@
- +
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss index f047bb411..f8fd2684e 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss @@ -30,7 +30,9 @@ a.video-channel-names { @include disable-default-a-behaviour; + width: fit-content; display: flex; + align-items: baseline; color: #000; .video-channel-display-name { @@ -41,6 +43,7 @@ .video-channel-name { font-size: 14px; color: #777272; + margin-left: 5px; } } } diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html index a52894cac..5a69a82a0 100644 --- a/client/src/app/+video-channels/video-channels.component.html +++ b/client/src/app/+video-channels/video-channels.component.html @@ -7,6 +7,7 @@
{{ videoChannel.displayName }}
+
{{ videoChannel.nameWithHost }}
{{ videoChannel.followersCount }} subscribers
diff --git a/client/src/app/shared/forms/form-validators/video-channel-validators.service.ts b/client/src/app/shared/forms/form-validators/video-channel-validators.service.ts index 28b063f89..1ce3a0dca 100644 --- a/client/src/app/shared/forms/form-validators/video-channel-validators.service.ts +++ b/client/src/app/shared/forms/form-validators/video-channel-validators.service.ts @@ -5,11 +5,27 @@ import { BuildFormValidator } from '@app/shared' @Injectable() export class VideoChannelValidatorsService { + readonly VIDEO_CHANNEL_NAME: BuildFormValidator readonly VIDEO_CHANNEL_DISPLAY_NAME: BuildFormValidator readonly VIDEO_CHANNEL_DESCRIPTION: BuildFormValidator readonly VIDEO_CHANNEL_SUPPORT: BuildFormValidator constructor (private i18n: I18n) { + this.VIDEO_CHANNEL_NAME = { + VALIDATORS: [ + Validators.required, + Validators.minLength(3), + Validators.maxLength(20), + Validators.pattern(/^[a-z0-9._]+$/) + ], + MESSAGES: { + 'required': this.i18n('Name is required.'), + 'minlength': this.i18n('Name must be at least 3 characters long.'), + 'maxlength': this.i18n('Name cannot be more than 20 characters long.'), + 'pattern': this.i18n('Name should be only lowercase alphanumeric characters.') + } + } + this.VIDEO_CHANNEL_DISPLAY_NAME = { VALIDATORS: [ Validators.required, diff --git a/client/src/app/shared/video-channel/video-channel.model.ts b/client/src/app/shared/video-channel/video-channel.model.ts index b6862b681..309b614ae 100644 --- a/client/src/app/shared/video-channel/video-channel.model.ts +++ b/client/src/app/shared/video-channel/video-channel.model.ts @@ -7,6 +7,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel { description: string support: string isLocal: boolean + nameWithHost: string ownerAccount?: Account ownerBy?: string ownerAvatarUrl?: string @@ -18,6 +19,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel { this.description = hash.description this.support = hash.support this.isLocal = hash.isLocal + this.nameWithHost = Actor.CREATE_BY_STRING(this.name, this.host) if (hash.ownerAccount) { this.ownerAccount = hash.ownerAccount diff --git a/client/src/app/shared/video-channel/video-channel.service.ts b/client/src/app/shared/video-channel/video-channel.service.ts index 8c000665f..510dc9c3d 100644 --- a/client/src/app/shared/video-channel/video-channel.service.ts +++ b/client/src/app/shared/video-channel/video-channel.service.ts @@ -22,8 +22,8 @@ export class VideoChannelService { private restExtractor: RestExtractor ) {} - getVideoChannel (videoChannelUUID: string) { - return this.authHttp.get(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelUUID) + getVideoChannel (videoChannelName: string) { + return this.authHttp.get(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannelName) .pipe( map(videoChannelHash => new VideoChannel(videoChannelHash)), tap(videoChannel => this.videoChannelLoaded.next(videoChannel)), diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts index e2a62c701..e44f1ee65 100644 --- a/client/src/app/shared/video/video.service.ts +++ b/client/src/app/shared/video/video.service.ts @@ -150,7 +150,7 @@ export class VideoService { params = this.restService.addRestGetParams(params, pagination, sort) return this.authHttp - .get>(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.uuid + '/videos', { params }) + .get>(VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.name + '/videos', { params }) .pipe( switchMap(res => this.extractVideos(res)), catchError(err => this.restExtractor.handleError(err)) diff --git a/client/src/app/signup/signup.component.html b/client/src/app/signup/signup.component.html index 565b695d9..5fd630b09 100644 --- a/client/src/app/signup/signup.component.html +++ b/client/src/app/signup/signup.component.html @@ -23,10 +23,17 @@
- + +
+ +
+ @{{ instanceHost }} +
+
+
{{ formErrors.username }}
diff --git a/client/src/app/signup/signup.component.scss b/client/src/app/signup/signup.component.scss index e6d484297..1c992faf5 100644 --- a/client/src/app/signup/signup.component.scss +++ b/client/src/app/signup/signup.component.scss @@ -14,9 +14,18 @@ margin: 30px 0; } +.input-group { + @include peertube-input-group(340px); +} + input:not([type=submit]) { @include peertube-input-text(340px); display: block; + + &#username { + width: auto; + flex-grow: 1; + } } input[type=submit] { diff --git a/client/src/app/signup/signup.component.ts b/client/src/app/signup/signup.component.ts index 076dac454..ed68487ae 100644 --- a/client/src/app/signup/signup.component.ts +++ b/client/src/app/signup/signup.component.ts @@ -34,6 +34,10 @@ export class SignupComponent extends FormReactive implements OnInit { return this.serverService.getConfig().user.videoQuota } + get instanceHost () { + return window.location.host + } + ngOnInit () { this.buildForm({ username: this.userValidatorsService.USER_USERNAME, diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index 8d4a4a5ca..c275258ef 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -37,7 +37,7 @@
- + {{ video.channel.displayName }} Video channel avatar diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 3d518394a..b0b0f544c 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -36,9 +36,16 @@ border-radius: 3px; padding-left: 15px; padding-right: 15px; +} - &::placeholder { - color: #585858; +@mixin peertube-input-group($width) { + width: $width; + height: $button-height; + padding-top: 0; + padding-bottom: 0; + + .input-group-text{ + font-size: 14px; } } -- cgit v1.2.3