diff options
author | Chocobozzz <me@florianbigard.com> | 2018-05-09 09:26:41 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2018-05-09 09:32:26 +0200 |
commit | 62e62f118d5da57acd3494fece2e8ed357564ffe (patch) | |
tree | ff5b7c6ec5708d71a76a2eb5744d810015ae29a5 /client/src/app/my-account | |
parent | 1952a538baa330b13bd11631b3975f7ef1c37e70 (diff) | |
download | PeerTube-62e62f118d5da57acd3494fece2e8ed357564ffe.tar.gz PeerTube-62e62f118d5da57acd3494fece2e8ed357564ffe.tar.zst PeerTube-62e62f118d5da57acd3494fece2e8ed357564ffe.zip |
Load my-account module lazily
Diffstat (limited to 'client/src/app/my-account')
31 files changed, 0 insertions, 1354 deletions
diff --git a/client/src/app/my-account/index.ts b/client/src/app/my-account/index.ts deleted file mode 100644 index 3df96dd7a..000000000 --- a/client/src/app/my-account/index.ts +++ /dev/null | |||
@@ -1,3 +0,0 @@ | |||
1 | export * from './my-account-routing.module' | ||
2 | export * from './my-account.component' | ||
3 | export * from './my-account.module' | ||
diff --git a/client/src/app/my-account/my-account-routing.module.ts b/client/src/app/my-account/my-account-routing.module.ts deleted file mode 100644 index 96f52c1da..000000000 --- a/client/src/app/my-account/my-account-routing.module.ts +++ /dev/null | |||
@@ -1,71 +0,0 @@ | |||
1 | import { NgModule } from '@angular/core' | ||
2 | import { RouterModule, Routes } from '@angular/router' | ||
3 | import { MetaGuard } from '@ngx-meta/core' | ||
4 | import { LoginGuard } from '../core' | ||
5 | import { MyAccountComponent } from './my-account.component' | ||
6 | import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component' | ||
7 | import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component' | ||
8 | import { MyAccountVideoChannelsComponent } from '@app/my-account/my-account-video-channels/my-account-video-channels.component' | ||
9 | import { MyAccountVideoChannelCreateComponent } from '@app/my-account/my-account-video-channels/my-account-video-channel-create.component' | ||
10 | import { MyAccountVideoChannelUpdateComponent } from '@app/my-account/my-account-video-channels/my-account-video-channel-update.component' | ||
11 | |||
12 | const myAccountRoutes: Routes = [ | ||
13 | { | ||
14 | path: 'my-account', | ||
15 | component: MyAccountComponent, | ||
16 | canActivateChild: [ MetaGuard, LoginGuard ], | ||
17 | children: [ | ||
18 | { | ||
19 | path: 'settings', | ||
20 | component: MyAccountSettingsComponent, | ||
21 | data: { | ||
22 | meta: { | ||
23 | title: 'Account settings' | ||
24 | } | ||
25 | } | ||
26 | }, | ||
27 | { | ||
28 | path: 'video-channels', | ||
29 | component: MyAccountVideoChannelsComponent, | ||
30 | data: { | ||
31 | meta: { | ||
32 | title: 'Account video channels' | ||
33 | } | ||
34 | } | ||
35 | }, | ||
36 | { | ||
37 | path: 'video-channels/create', | ||
38 | component: MyAccountVideoChannelCreateComponent, | ||
39 | data: { | ||
40 | meta: { | ||
41 | title: 'Create new video channel' | ||
42 | } | ||
43 | } | ||
44 | }, | ||
45 | { | ||
46 | path: 'video-channels/update/:videoChannelId', | ||
47 | component: MyAccountVideoChannelUpdateComponent, | ||
48 | data: { | ||
49 | meta: { | ||
50 | title: 'Update video channel' | ||
51 | } | ||
52 | } | ||
53 | }, | ||
54 | { | ||
55 | path: 'videos', | ||
56 | component: MyAccountVideosComponent, | ||
57 | data: { | ||
58 | meta: { | ||
59 | title: 'Account videos' | ||
60 | } | ||
61 | } | ||
62 | } | ||
63 | ] | ||
64 | } | ||
65 | ] | ||
66 | |||
67 | @NgModule({ | ||
68 | imports: [ RouterModule.forChild(myAccountRoutes) ], | ||
69 | exports: [ RouterModule ] | ||
70 | }) | ||
71 | export class MyAccountRoutingModule {} | ||
diff --git a/client/src/app/my-account/my-account-settings/my-account-change-password/index.ts b/client/src/app/my-account/my-account-settings/my-account-change-password/index.ts deleted file mode 100644 index 644047c5f..000000000 --- a/client/src/app/my-account/my-account-settings/my-account-change-password/index.ts +++ /dev/null | |||
@@ -1 +0,0 @@ | |||
1 | export * from './my-account-change-password.component' | ||
diff --git a/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html b/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html deleted file mode 100644 index b0e3cada4..000000000 --- a/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html +++ /dev/null | |||
@@ -1,20 +0,0 @@ | |||
1 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> | ||
2 | |||
3 | <form role="form" (ngSubmit)="changePassword()" [formGroup]="form"> | ||
4 | |||
5 | <label for="new-password">Change password</label> | ||
6 | <input | ||
7 | type="password" id="new-password" placeholder="New password" | ||
8 | formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }" | ||
9 | > | ||
10 | <div *ngIf="formErrors['new-password']" class="form-error"> | ||
11 | {{ formErrors['new-password'] }} | ||
12 | </div> | ||
13 | |||
14 | <input | ||
15 | type="password" id="new-confirmed-password" placeholder="Confirm new password" | ||
16 | formControlName="new-confirmed-password" | ||
17 | > | ||
18 | |||
19 | <input type="submit" value="Change password" [disabled]="!form.valid"> | ||
20 | </form> | ||
diff --git a/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss b/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss deleted file mode 100644 index f8279ffd3..000000000 --- a/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss +++ /dev/null | |||
@@ -1,19 +0,0 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | input[type=password] { | ||
5 | @include peertube-input-text(340px); | ||
6 | display: block; | ||
7 | |||
8 | &#new-confirmed-password { | ||
9 | margin-top: 15px; | ||
10 | } | ||
11 | } | ||
12 | |||
13 | input[type=submit] { | ||
14 | @include peertube-button; | ||
15 | @include orange-button; | ||
16 | |||
17 | margin-top: 15px; | ||
18 | } | ||
19 | |||
diff --git a/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts b/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts deleted file mode 100644 index 80af668f9..000000000 --- a/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts +++ /dev/null | |||
@@ -1,62 +0,0 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | ||
2 | import { FormBuilder, FormGroup } from '@angular/forms' | ||
3 | import { NotificationsService } from 'angular2-notifications' | ||
4 | import { FormReactive, USER_PASSWORD, UserService } from '../../../shared' | ||
5 | |||
6 | @Component({ | ||
7 | selector: 'my-account-change-password', | ||
8 | templateUrl: './my-account-change-password.component.html', | ||
9 | styleUrls: [ './my-account-change-password.component.scss' ] | ||
10 | }) | ||
11 | export class MyAccountChangePasswordComponent extends FormReactive implements OnInit { | ||
12 | error: string = null | ||
13 | |||
14 | form: FormGroup | ||
15 | formErrors = { | ||
16 | 'new-password': '', | ||
17 | 'new-confirmed-password': '' | ||
18 | } | ||
19 | validationMessages = { | ||
20 | 'new-password': USER_PASSWORD.MESSAGES, | ||
21 | 'new-confirmed-password': USER_PASSWORD.MESSAGES | ||
22 | } | ||
23 | |||
24 | constructor ( | ||
25 | private formBuilder: FormBuilder, | ||
26 | private notificationsService: NotificationsService, | ||
27 | private userService: UserService | ||
28 | ) { | ||
29 | super() | ||
30 | } | ||
31 | |||
32 | buildForm () { | ||
33 | this.form = this.formBuilder.group({ | ||
34 | 'new-password': [ '', USER_PASSWORD.VALIDATORS ], | ||
35 | 'new-confirmed-password': [ '', USER_PASSWORD.VALIDATORS ] | ||
36 | }) | ||
37 | |||
38 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)) | ||
39 | } | ||
40 | |||
41 | ngOnInit () { | ||
42 | this.buildForm() | ||
43 | } | ||
44 | |||
45 | changePassword () { | ||
46 | const newPassword = this.form.value['new-password'] | ||
47 | const newConfirmedPassword = this.form.value['new-confirmed-password'] | ||
48 | |||
49 | this.error = null | ||
50 | |||
51 | if (newPassword !== newConfirmedPassword) { | ||
52 | this.error = 'The new password and the confirmed password do not correspond.' | ||
53 | return | ||
54 | } | ||
55 | |||
56 | this.userService.changePassword(newPassword).subscribe( | ||
57 | () => this.notificationsService.success('Success', 'Password updated.'), | ||
58 | |||
59 | err => this.error = err.message | ||
60 | ) | ||
61 | } | ||
62 | } | ||
diff --git a/client/src/app/my-account/my-account-settings/my-account-profile/index.ts b/client/src/app/my-account/my-account-settings/my-account-profile/index.ts deleted file mode 100644 index 3cc049f8f..000000000 --- a/client/src/app/my-account/my-account-settings/my-account-profile/index.ts +++ /dev/null | |||
@@ -1 +0,0 @@ | |||
1 | export * from './my-account-profile.component' | ||
diff --git a/client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.html b/client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.html deleted file mode 100644 index 306f3a12c..000000000 --- a/client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.html +++ /dev/null | |||
@@ -1,24 +0,0 @@ | |||
1 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> | ||
2 | |||
3 | <form role="form" (ngSubmit)="updateMyProfile()" [formGroup]="form"> | ||
4 | |||
5 | <label for="display-name">Display name</label> | ||
6 | <input | ||
7 | type="text" id="display-name" | ||
8 | formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }" | ||
9 | > | ||
10 | <div *ngIf="formErrors['display-name']" class="form-error"> | ||
11 | {{ formErrors['display-name'] }} | ||
12 | </div> | ||
13 | |||
14 | <label for="description">Description</label> | ||
15 | <textarea | ||
16 | id="description" formControlName="description" | ||
17 | [ngClass]="{ 'input-error': formErrors['description'] }" | ||
18 | ></textarea> | ||
19 | <div *ngIf="formErrors.description" class="form-error"> | ||
20 | {{ formErrors.description }} | ||
21 | </div> | ||
22 | |||
23 | <input type="submit" value="Update my profile" [disabled]="!form.valid"> | ||
24 | </form> | ||
diff --git a/client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.scss b/client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.scss deleted file mode 100644 index fc2b92c89..000000000 --- a/client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.scss +++ /dev/null | |||
@@ -1,23 +0,0 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | input[type=text] { | ||
5 | @include peertube-input-text(340px); | ||
6 | |||
7 | display: block; | ||
8 | margin-bottom: 15px; | ||
9 | } | ||
10 | |||
11 | textarea { | ||
12 | @include peertube-textarea(500px, 150px); | ||
13 | |||
14 | display: block; | ||
15 | } | ||
16 | |||
17 | input[type=submit] { | ||
18 | @include peertube-button; | ||
19 | @include orange-button; | ||
20 | |||
21 | margin-top: 15px; | ||
22 | } | ||
23 | |||
diff --git a/client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.ts b/client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.ts deleted file mode 100644 index 2b7ba353c..000000000 --- a/client/src/app/my-account/my-account-settings/my-account-profile/my-account-profile.component.ts +++ /dev/null | |||
@@ -1,65 +0,0 @@ | |||
1 | import { Component, Input, OnInit } from '@angular/core' | ||
2 | import { FormBuilder, FormGroup } from '@angular/forms' | ||
3 | import { NotificationsService } from 'angular2-notifications' | ||
4 | import { FormReactive, USER_DESCRIPTION, USER_DISPLAY_NAME, UserService } from '../../../shared' | ||
5 | import { User } from '@app/shared' | ||
6 | |||
7 | @Component({ | ||
8 | selector: 'my-account-profile', | ||
9 | templateUrl: './my-account-profile.component.html', | ||
10 | styleUrls: [ './my-account-profile.component.scss' ] | ||
11 | }) | ||
12 | export class MyAccountProfileComponent extends FormReactive implements OnInit { | ||
13 | @Input() user: User = null | ||
14 | |||
15 | error: string = null | ||
16 | |||
17 | form: FormGroup | ||
18 | formErrors = { | ||
19 | 'display-name': '', | ||
20 | 'description': '' | ||
21 | } | ||
22 | validationMessages = { | ||
23 | 'display-name': USER_DISPLAY_NAME.MESSAGES, | ||
24 | 'description': USER_DESCRIPTION.MESSAGES | ||
25 | } | ||
26 | |||
27 | constructor ( | ||
28 | private formBuilder: FormBuilder, | ||
29 | private notificationsService: NotificationsService, | ||
30 | private userService: UserService | ||
31 | ) { | ||
32 | super() | ||
33 | } | ||
34 | |||
35 | buildForm () { | ||
36 | this.form = this.formBuilder.group({ | ||
37 | 'display-name': [ this.user.account.displayName, USER_DISPLAY_NAME.VALIDATORS ], | ||
38 | 'description': [ this.user.account.description, USER_DESCRIPTION.VALIDATORS ] | ||
39 | }) | ||
40 | |||
41 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)) | ||
42 | } | ||
43 | |||
44 | ngOnInit () { | ||
45 | this.buildForm() | ||
46 | } | ||
47 | |||
48 | updateMyProfile () { | ||
49 | const displayName = this.form.value['display-name'] | ||
50 | const description = this.form.value['description'] | ||
51 | |||
52 | this.error = null | ||
53 | |||
54 | this.userService.updateMyProfile({ displayName, description }).subscribe( | ||
55 | () => { | ||
56 | this.user.account.displayName = displayName | ||
57 | this.user.account.description = description | ||
58 | |||
59 | this.notificationsService.success('Success', 'Profile updated.') | ||
60 | }, | ||
61 | |||
62 | err => this.error = err.message | ||
63 | ) | ||
64 | } | ||
65 | } | ||
diff --git a/client/src/app/my-account/my-account-settings/my-account-settings.component.html b/client/src/app/my-account/my-account-settings/my-account-settings.component.html deleted file mode 100644 index 0fcc7782e..000000000 --- a/client/src/app/my-account/my-account-settings/my-account-settings.component.html +++ /dev/null | |||
@@ -1,32 +0,0 @@ | |||
1 | <div class="user"> | ||
2 | <img [src]="user.accountAvatarUrl" alt="Avatar" /> | ||
3 | |||
4 | <div class="user-info"> | ||
5 | <div class="user-info-names"> | ||
6 | <div class="user-info-display-name">{{ user.account.displayName }}</div> | ||
7 | <div class="user-info-username">{{ user.username }}</div> | ||
8 | </div> | ||
9 | <div class="user-info-followers">{{ user.account?.followersCount }} subscribers</div> | ||
10 | </div> | ||
11 | </div> | ||
12 | |||
13 | <div class="button-file"> | ||
14 | <span>Change your avatar</span> | ||
15 | <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="changeAvatar()" /> | ||
16 | </div> | ||
17 | <div class="file-max-size">(extensions: {{ avatarExtensions }}, max size: {{ maxAvatarSize | bytes }})</div> | ||
18 | |||
19 | <div class="user-quota"> | ||
20 | <span class="user-quota-label">Video quota:</span> {{ userVideoQuotaUsed | bytes: 0 }} / {{ userVideoQuota }} | ||
21 | </div> | ||
22 | |||
23 | <ng-template [ngIf]="user && user.account"> | ||
24 | <div class="account-title">Profile</div> | ||
25 | <my-account-profile [user]="user"></my-account-profile> | ||
26 | </ng-template> | ||
27 | |||
28 | <div class="account-title">Password</div> | ||
29 | <my-account-change-password></my-account-change-password> | ||
30 | |||
31 | <div class="account-title">Video settings</div> | ||
32 | <my-account-video-settings [user]="user"></my-account-video-settings> | ||
diff --git a/client/src/app/my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/my-account/my-account-settings/my-account-settings.component.scss deleted file mode 100644 index ec0d40b93..000000000 --- a/client/src/app/my-account/my-account-settings/my-account-settings.component.scss +++ /dev/null | |||
@@ -1,67 +0,0 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | .user { | ||
5 | display: flex; | ||
6 | |||
7 | img { | ||
8 | @include avatar(50px); | ||
9 | |||
10 | margin-right: 15px; | ||
11 | } | ||
12 | |||
13 | .user-info { | ||
14 | .user-info-names { | ||
15 | display: flex; | ||
16 | align-items: center; | ||
17 | |||
18 | .user-info-display-name { | ||
19 | font-size: 20px; | ||
20 | font-weight: $font-bold; | ||
21 | } | ||
22 | |||
23 | .user-info-username { | ||
24 | margin-left: 7px; | ||
25 | position: relative; | ||
26 | top: 2px; | ||
27 | font-size: 14px; | ||
28 | color: #777272; | ||
29 | } | ||
30 | } | ||
31 | |||
32 | .user-info-followers { | ||
33 | font-size: 15px; | ||
34 | } | ||
35 | } | ||
36 | } | ||
37 | |||
38 | .button-file { | ||
39 | @include peertube-button-file(160px); | ||
40 | |||
41 | margin-top: 10px; | ||
42 | margin-bottom: 5px; | ||
43 | } | ||
44 | |||
45 | .file-max-size { | ||
46 | display: inline-block; | ||
47 | font-size: 13px; | ||
48 | |||
49 | position: relative; | ||
50 | top: -10px; | ||
51 | } | ||
52 | |||
53 | .user-quota { | ||
54 | font-size: 15px; | ||
55 | margin-top: 20px; | ||
56 | |||
57 | .user-quota-label { | ||
58 | font-weight: $font-semibold; | ||
59 | } | ||
60 | } | ||
61 | |||
62 | .account-title { | ||
63 | @include in-content-small-title; | ||
64 | |||
65 | margin-top: 55px; | ||
66 | margin-bottom: 30px; | ||
67 | } | ||
diff --git a/client/src/app/my-account/my-account-settings/my-account-settings.component.ts b/client/src/app/my-account/my-account-settings/my-account-settings.component.ts deleted file mode 100644 index 06d1138e7..000000000 --- a/client/src/app/my-account/my-account-settings/my-account-settings.component.ts +++ /dev/null | |||
@@ -1,70 +0,0 @@ | |||
1 | import { Component, OnInit, ViewChild } from '@angular/core' | ||
2 | import { NotificationsService } from 'angular2-notifications' | ||
3 | import { BytesPipe } from 'ngx-pipes' | ||
4 | import { AuthService } from '../../core' | ||
5 | import { ServerService } from '../../core/server' | ||
6 | import { User } from '../../shared' | ||
7 | import { UserService } from '../../shared/users' | ||
8 | |||
9 | @Component({ | ||
10 | selector: 'my-account-settings', | ||
11 | templateUrl: './my-account-settings.component.html', | ||
12 | styleUrls: [ './my-account-settings.component.scss' ] | ||
13 | }) | ||
14 | export class MyAccountSettingsComponent implements OnInit { | ||
15 | @ViewChild('avatarfileInput') avatarfileInput | ||
16 | |||
17 | user: User = null | ||
18 | userVideoQuota = '0' | ||
19 | userVideoQuotaUsed = 0 | ||
20 | |||
21 | constructor ( | ||
22 | private userService: UserService, | ||
23 | private authService: AuthService, | ||
24 | private serverService: ServerService, | ||
25 | private notificationsService: NotificationsService | ||
26 | ) {} | ||
27 | |||
28 | ngOnInit () { | ||
29 | this.user = this.authService.getUser() | ||
30 | |||
31 | this.authService.userInformationLoaded.subscribe( | ||
32 | () => { | ||
33 | if (this.user.videoQuota !== -1) { | ||
34 | this.userVideoQuota = new BytesPipe().transform(this.user.videoQuota, 0).toString() | ||
35 | } else { | ||
36 | this.userVideoQuota = 'Unlimited' | ||
37 | } | ||
38 | } | ||
39 | ) | ||
40 | |||
41 | this.userService.getMyVideoQuotaUsed() | ||
42 | .subscribe(data => this.userVideoQuotaUsed = data.videoQuotaUsed) | ||
43 | } | ||
44 | |||
45 | changeAvatar () { | ||
46 | const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ] | ||
47 | |||
48 | const formData = new FormData() | ||
49 | formData.append('avatarfile', avatarfile) | ||
50 | |||
51 | this.userService.changeAvatar(formData) | ||
52 | .subscribe( | ||
53 | data => { | ||
54 | this.notificationsService.success('Success', 'Avatar changed.') | ||
55 | |||
56 | this.user.account.avatar = data.avatar | ||
57 | }, | ||
58 | |||
59 | err => this.notificationsService.error('Error', err.message) | ||
60 | ) | ||
61 | } | ||
62 | |||
63 | get maxAvatarSize () { | ||
64 | return this.serverService.getConfig().avatar.file.size.max | ||
65 | } | ||
66 | |||
67 | get avatarExtensions () { | ||
68 | return this.serverService.getConfig().avatar.file.extensions.join(',') | ||
69 | } | ||
70 | } | ||
diff --git a/client/src/app/my-account/my-account-settings/my-account-video-settings/index.ts b/client/src/app/my-account/my-account-settings/my-account-video-settings/index.ts deleted file mode 100644 index 1253bd369..000000000 --- a/client/src/app/my-account/my-account-settings/my-account-video-settings/index.ts +++ /dev/null | |||
@@ -1 +0,0 @@ | |||
1 | export * from './my-account-video-settings.component' | ||
diff --git a/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html b/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html deleted file mode 100644 index 0e8598e9e..000000000 --- a/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html +++ /dev/null | |||
@@ -1,25 +0,0 @@ | |||
1 | <form role="form" (ngSubmit)="updateDetails()" [formGroup]="form"> | ||
2 | <div class="form-group"> | ||
3 | <label for="nsfwPolicy">Default policy on videos containing sensitive content</label> | ||
4 | <my-help helpType="custom" customHtml="With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video."></my-help> | ||
5 | |||
6 | <div class="peertube-select-container"> | ||
7 | <select id="nsfwPolicy" formControlName="nsfwPolicy"> | ||
8 | <option value="do_not_list">Do not list</option> | ||
9 | <option value="blur">Blur thumbnails</option> | ||
10 | <option value="display">Display</option> | ||
11 | </select> | ||
12 | </div> | ||
13 | </div> | ||
14 | |||
15 | <div class="form-group"> | ||
16 | <input | ||
17 | type="checkbox" id="autoPlayVideo" | ||
18 | formControlName="autoPlayVideo" | ||
19 | > | ||
20 | <label for="autoPlayVideo"></label> | ||
21 | <label for="autoPlayVideo">Automatically plays video</label> | ||
22 | </div> | ||
23 | |||
24 | <input type="submit" value="Save" [disabled]="!form.valid"> | ||
25 | </form> | ||
diff --git a/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss b/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss deleted file mode 100644 index ed59e4689..000000000 --- a/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.scss +++ /dev/null | |||
@@ -1,20 +0,0 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | input[type=checkbox] { | ||
5 | @include peertube-checkbox(1px); | ||
6 | } | ||
7 | |||
8 | input[type=submit] { | ||
9 | @include peertube-button; | ||
10 | @include orange-button; | ||
11 | |||
12 | display: block; | ||
13 | margin-top: 15px; | ||
14 | } | ||
15 | |||
16 | .peertube-select-container { | ||
17 | @include peertube-select-container(340px); | ||
18 | |||
19 | margin-bottom: 30px; | ||
20 | } \ No newline at end of file | ||
diff --git a/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts b/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts deleted file mode 100644 index acc70c14d..000000000 --- a/client/src/app/my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.ts +++ /dev/null | |||
@@ -1,60 +0,0 @@ | |||
1 | import { Component, Input, OnInit } from '@angular/core' | ||
2 | import { FormBuilder, FormGroup } from '@angular/forms' | ||
3 | import { NotificationsService } from 'angular2-notifications' | ||
4 | import { UserUpdateMe } from '../../../../../../shared' | ||
5 | import { AuthService } from '../../../core' | ||
6 | import { FormReactive, User, UserService } from '../../../shared' | ||
7 | |||
8 | @Component({ | ||
9 | selector: 'my-account-video-settings', | ||
10 | templateUrl: './my-account-video-settings.component.html', | ||
11 | styleUrls: [ './my-account-video-settings.component.scss' ] | ||
12 | }) | ||
13 | export class MyAccountVideoSettingsComponent extends FormReactive implements OnInit { | ||
14 | @Input() user: User = null | ||
15 | |||
16 | form: FormGroup | ||
17 | formErrors = {} | ||
18 | validationMessages = {} | ||
19 | |||
20 | constructor ( | ||
21 | private authService: AuthService, | ||
22 | private formBuilder: FormBuilder, | ||
23 | private notificationsService: NotificationsService, | ||
24 | private userService: UserService | ||
25 | ) { | ||
26 | super() | ||
27 | } | ||
28 | |||
29 | buildForm () { | ||
30 | this.form = this.formBuilder.group({ | ||
31 | nsfwPolicy: [ this.user.nsfwPolicy ], | ||
32 | autoPlayVideo: [ this.user.autoPlayVideo ] | ||
33 | }) | ||
34 | |||
35 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)) | ||
36 | } | ||
37 | |||
38 | ngOnInit () { | ||
39 | this.buildForm() | ||
40 | } | ||
41 | |||
42 | updateDetails () { | ||
43 | const nsfwPolicy = this.form.value['nsfwPolicy'] | ||
44 | const autoPlayVideo = this.form.value['autoPlayVideo'] | ||
45 | const details: UserUpdateMe = { | ||
46 | nsfwPolicy, | ||
47 | autoPlayVideo | ||
48 | } | ||
49 | |||
50 | this.userService.updateMyProfile(details).subscribe( | ||
51 | () => { | ||
52 | this.notificationsService.success('Success', 'Information updated.') | ||
53 | |||
54 | this.authService.refreshUserInformation() | ||
55 | }, | ||
56 | |||
57 | err => this.notificationsService.error('Error', err.message) | ||
58 | ) | ||
59 | } | ||
60 | } | ||
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 deleted file mode 100644 index 0f03548ad..000000000 --- a/client/src/app/my-account/my-account-video-channels/my-account-video-channel-create.component.ts +++ /dev/null | |||
@@ -1,89 +0,0 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | ||
2 | import { Router } from '@angular/router' | ||
3 | import { NotificationsService } from 'angular2-notifications' | ||
4 | import 'rxjs/add/observable/from' | ||
5 | import 'rxjs/add/operator/concatAll' | ||
6 | import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit' | ||
7 | import { FormBuilder, FormGroup } from '@angular/forms' | ||
8 | import { VideoChannelCreate } from '../../../../../shared/models/videos' | ||
9 | import { | ||
10 | VIDEO_CHANNEL_DESCRIPTION, | ||
11 | VIDEO_CHANNEL_DISPLAY_NAME, | ||
12 | VIDEO_CHANNEL_SUPPORT | ||
13 | } from '@app/shared/forms/form-validators/video-channel' | ||
14 | import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' | ||
15 | import { AuthService } from '@app/core' | ||
16 | |||
17 | @Component({ | ||
18 | selector: 'my-account-video-channel-create', | ||
19 | templateUrl: './my-account-video-channel-edit.component.html', | ||
20 | styleUrls: [ './my-account-video-channel-edit.component.scss' ] | ||
21 | }) | ||
22 | export class MyAccountVideoChannelCreateComponent extends MyAccountVideoChannelEdit implements OnInit { | ||
23 | error: string | ||
24 | |||
25 | form: FormGroup | ||
26 | formErrors = { | ||
27 | 'display-name': '', | ||
28 | 'description': '', | ||
29 | 'support': '' | ||
30 | } | ||
31 | validationMessages = { | ||
32 | 'display-name': VIDEO_CHANNEL_DISPLAY_NAME.MESSAGES, | ||
33 | 'description': VIDEO_CHANNEL_DESCRIPTION.MESSAGES, | ||
34 | 'support': VIDEO_CHANNEL_SUPPORT.MESSAGES | ||
35 | } | ||
36 | |||
37 | constructor ( | ||
38 | private authService: AuthService, | ||
39 | private notificationsService: NotificationsService, | ||
40 | private router: Router, | ||
41 | private formBuilder: FormBuilder, | ||
42 | private videoChannelService: VideoChannelService | ||
43 | ) { | ||
44 | super() | ||
45 | } | ||
46 | |||
47 | buildForm () { | ||
48 | this.form = this.formBuilder.group({ | ||
49 | 'display-name': [ '', VIDEO_CHANNEL_DISPLAY_NAME.VALIDATORS ], | ||
50 | description: [ '', VIDEO_CHANNEL_DESCRIPTION.VALIDATORS ], | ||
51 | support: [ '', VIDEO_CHANNEL_SUPPORT.VALIDATORS ] | ||
52 | }) | ||
53 | |||
54 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)) | ||
55 | } | ||
56 | |||
57 | ngOnInit () { | ||
58 | this.buildForm() | ||
59 | } | ||
60 | |||
61 | formValidated () { | ||
62 | this.error = undefined | ||
63 | |||
64 | const body = this.form.value | ||
65 | const videoChannelCreate: VideoChannelCreate = { | ||
66 | displayName: body['display-name'], | ||
67 | description: body.description || undefined, | ||
68 | support: body.support || undefined | ||
69 | } | ||
70 | |||
71 | this.videoChannelService.createVideoChannel(videoChannelCreate).subscribe( | ||
72 | () => { | ||
73 | this.authService.refreshUserInformation() | ||
74 | this.notificationsService.success('Success', `Video channel ${videoChannelCreate.displayName} created.`) | ||
75 | this.router.navigate([ '/my-account', 'video-channels' ]) | ||
76 | }, | ||
77 | |||
78 | err => this.error = err.message | ||
79 | ) | ||
80 | } | ||
81 | |||
82 | isCreation () { | ||
83 | return true | ||
84 | } | ||
85 | |||
86 | getFormButtonTitle () { | ||
87 | return 'Create' | ||
88 | } | ||
89 | } | ||
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 deleted file mode 100644 index d5fb6262a..000000000 --- a/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.component.html +++ /dev/null | |||
@@ -1,42 +0,0 @@ | |||
1 | <div class="form-sub-title" *ngIf="isCreation() === true">Create a video channel</div> | ||
2 | <div class="form-sub-title" *ngIf="isCreation() === false">Update {{ videoChannel?.displayName }}</div> | ||
3 | |||
4 | <div *ngIf="error" class="alert alert-danger">{{ error }}</div> | ||
5 | |||
6 | <form role="form" (ngSubmit)="formValidated()" [formGroup]="form"> | ||
7 | <div class="form-group"> | ||
8 | <label for="display-name">Display name</label> | ||
9 | <input | ||
10 | type="text" id="display-name" | ||
11 | formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }" | ||
12 | > | ||
13 | <div *ngIf="formErrors['display-name']" class="form-error"> | ||
14 | {{ formErrors['display-name'] }} | ||
15 | </div> | ||
16 | </div> | ||
17 | |||
18 | <div class="form-group"> | ||
19 | <label for="description">Description</label> | ||
20 | <textarea | ||
21 | id="description" formControlName="description" | ||
22 | [ngClass]="{ 'input-error': formErrors['description'] }" | ||
23 | ></textarea> | ||
24 | <div *ngIf="formErrors.description" class="form-error"> | ||
25 | {{ formErrors.description }} | ||
26 | </div> | ||
27 | </div> | ||
28 | |||
29 | <div class="form-group"> | ||
30 | <label for="support">Support</label> | ||
31 | <my-help helpType="markdownEnhanced" preHtml="Short text to tell people how they can support your channel (membership platform...)."></my-help> | ||
32 | <my-markdown-textarea | ||
33 | id="support" formControlName="support" textareaWidth="500px" [previewColumn]="true" markdownType="enhanced" | ||
34 | [classes]="{ 'input-error': formErrors['support'] }" | ||
35 | ></my-markdown-textarea> | ||
36 | <div *ngIf="formErrors.support" class="form-error"> | ||
37 | {{ formErrors.support }} | ||
38 | </div> | ||
39 | </div> | ||
40 | |||
41 | <input type="submit" value="{{ getFormButtonTitle() }}" [disabled]="!form.valid"> | ||
42 | </form> | ||
diff --git a/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.component.scss b/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.component.scss deleted file mode 100644 index 6fbb8ae8b..000000000 --- a/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.component.scss +++ /dev/null | |||
@@ -1,27 +0,0 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | .form-sub-title { | ||
5 | margin-bottom: 20px; | ||
6 | } | ||
7 | |||
8 | input[type=text] { | ||
9 | @include peertube-input-text(340px); | ||
10 | |||
11 | display: block; | ||
12 | } | ||
13 | |||
14 | textarea { | ||
15 | @include peertube-textarea(500px, 150px); | ||
16 | |||
17 | display: block; | ||
18 | } | ||
19 | |||
20 | .peertube-select-container { | ||
21 | @include peertube-select-container(340px); | ||
22 | } | ||
23 | |||
24 | input[type=submit] { | ||
25 | @include peertube-button; | ||
26 | @include orange-button; | ||
27 | } \ No newline at end of file | ||
diff --git a/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.ts b/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.ts deleted file mode 100644 index e56f46262..000000000 --- a/client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.ts +++ /dev/null | |||
@@ -1,6 +0,0 @@ | |||
1 | import { FormReactive } from '@app/shared' | ||
2 | |||
3 | export abstract class MyAccountVideoChannelEdit extends FormReactive { | ||
4 | abstract isCreation (): boolean | ||
5 | abstract getFormButtonTitle (): string | ||
6 | } | ||
diff --git a/client/src/app/my-account/my-account-video-channels/my-account-video-channel-update.component.ts b/client/src/app/my-account/my-account-video-channels/my-account-video-channel-update.component.ts deleted file mode 100644 index c0dc6a939..000000000 --- a/client/src/app/my-account/my-account-video-channels/my-account-video-channel-update.component.ts +++ /dev/null | |||
@@ -1,117 +0,0 @@ | |||
1 | import { Component, OnInit, OnDestroy } from '@angular/core' | ||
2 | import { ActivatedRoute, Router } from '@angular/router' | ||
3 | import { NotificationsService } from 'angular2-notifications' | ||
4 | import 'rxjs/add/observable/from' | ||
5 | import 'rxjs/add/operator/concatAll' | ||
6 | import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit' | ||
7 | import { FormBuilder, FormGroup } from '@angular/forms' | ||
8 | import { VideoChannelUpdate } from '../../../../../shared/models/videos' | ||
9 | import { | ||
10 | VIDEO_CHANNEL_DESCRIPTION, | ||
11 | VIDEO_CHANNEL_DISPLAY_NAME, | ||
12 | VIDEO_CHANNEL_SUPPORT | ||
13 | } from '@app/shared/forms/form-validators/video-channel' | ||
14 | import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' | ||
15 | import { Subscription } from 'rxjs/Subscription' | ||
16 | import { VideoChannel } from '@app/shared/video-channel/video-channel.model' | ||
17 | import { AuthService } from '@app/core' | ||
18 | |||
19 | @Component({ | ||
20 | selector: 'my-account-video-channel-update', | ||
21 | templateUrl: './my-account-video-channel-edit.component.html', | ||
22 | styleUrls: [ './my-account-video-channel-edit.component.scss' ] | ||
23 | }) | ||
24 | export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelEdit implements OnInit, OnDestroy { | ||
25 | error: string | ||
26 | |||
27 | form: FormGroup | ||
28 | formErrors = { | ||
29 | 'display-name': '', | ||
30 | 'description': '', | ||
31 | 'support': '' | ||
32 | } | ||
33 | validationMessages = { | ||
34 | 'display-name': VIDEO_CHANNEL_DISPLAY_NAME.MESSAGES, | ||
35 | 'description': VIDEO_CHANNEL_DESCRIPTION.MESSAGES, | ||
36 | 'support': VIDEO_CHANNEL_SUPPORT.MESSAGES | ||
37 | } | ||
38 | |||
39 | private videoChannelToUpdate: VideoChannel | ||
40 | private paramsSub: Subscription | ||
41 | |||
42 | constructor ( | ||
43 | private authService: AuthService, | ||
44 | private notificationsService: NotificationsService, | ||
45 | private router: Router, | ||
46 | private route: ActivatedRoute, | ||
47 | private formBuilder: FormBuilder, | ||
48 | private videoChannelService: VideoChannelService | ||
49 | ) { | ||
50 | super() | ||
51 | } | ||
52 | |||
53 | buildForm () { | ||
54 | this.form = this.formBuilder.group({ | ||
55 | 'display-name': [ '', VIDEO_CHANNEL_DISPLAY_NAME.VALIDATORS ], | ||
56 | description: [ '', VIDEO_CHANNEL_DESCRIPTION.VALIDATORS ], | ||
57 | support: [ '', VIDEO_CHANNEL_SUPPORT.VALIDATORS ] | ||
58 | }) | ||
59 | |||
60 | this.form.valueChanges.subscribe(data => this.onValueChanged(data)) | ||
61 | } | ||
62 | |||
63 | ngOnInit () { | ||
64 | this.buildForm() | ||
65 | |||
66 | this.paramsSub = this.route.params.subscribe(routeParams => { | ||
67 | const videoChannelId = routeParams['videoChannelId'] | ||
68 | |||
69 | this.videoChannelService.getVideoChannel(videoChannelId).subscribe( | ||
70 | videoChannelToUpdate => { | ||
71 | this.videoChannelToUpdate = videoChannelToUpdate | ||
72 | |||
73 | this.form.patchValue({ | ||
74 | 'display-name': videoChannelToUpdate.displayName, | ||
75 | description: videoChannelToUpdate.description, | ||
76 | support: videoChannelToUpdate.support | ||
77 | }) | ||
78 | }, | ||
79 | |||
80 | err => this.error = err.message | ||
81 | ) | ||
82 | }) | ||
83 | } | ||
84 | |||
85 | ngOnDestroy () { | ||
86 | if (this.paramsSub) this.paramsSub.unsubscribe() | ||
87 | } | ||
88 | |||
89 | formValidated () { | ||
90 | this.error = undefined | ||
91 | |||
92 | const body = this.form.value | ||
93 | const videoChannelUpdate: VideoChannelUpdate = { | ||
94 | displayName: body['display-name'], | ||
95 | description: body.description || undefined, | ||
96 | support: body.support || undefined | ||
97 | } | ||
98 | |||
99 | this.videoChannelService.updateVideoChannel(this.videoChannelToUpdate.uuid, videoChannelUpdate).subscribe( | ||
100 | () => { | ||
101 | this.authService.refreshUserInformation() | ||
102 | this.notificationsService.success('Success', `Video channel ${videoChannelUpdate.displayName} updated.`) | ||
103 | this.router.navigate([ '/my-account', 'video-channels' ]) | ||
104 | }, | ||
105 | |||
106 | err => this.error = err.message | ||
107 | ) | ||
108 | } | ||
109 | |||
110 | isCreation () { | ||
111 | return false | ||
112 | } | ||
113 | |||
114 | getFormButtonTitle () { | ||
115 | return 'Update' | ||
116 | } | ||
117 | } | ||
diff --git a/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.html b/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.html deleted file mode 100644 index 90c401bc5..000000000 --- a/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.html +++ /dev/null | |||
@@ -1,30 +0,0 @@ | |||
1 | <div class="video-channels-header"> | ||
2 | <a class="create-button" routerLink="create"> | ||
3 | <span class="icon icon-add"></span> | ||
4 | Create another video channel | ||
5 | </a> | ||
6 | </div> | ||
7 | |||
8 | <div class="video-channels"> | ||
9 | <div *ngFor="let videoChannel of videoChannels" class="video-channel"> | ||
10 | <a [routerLink]="[ '/video-channels', videoChannel.uuid ]"> | ||
11 | <img [src]="videoChannel.avatarUrl" alt="Avatar" /> | ||
12 | </a> | ||
13 | |||
14 | <div class="video-channel-info"> | ||
15 | <a [routerLink]="[ '/video-channels', videoChannel.uuid ]" class="video-channel-names" title="Go to the channel"> | ||
16 | <div class="video-channel-display-name">{{ videoChannel.displayName }}</div> | ||
17 | <!-- Hide the name for now, because it's an UUID not very friendly --> | ||
18 | <!--<div class="video-channel-name">{{ videoChannel.name }}</div>--> | ||
19 | </a> | ||
20 | |||
21 | <div class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div> | ||
22 | </div> | ||
23 | |||
24 | <div class="video-channel-buttons"> | ||
25 | <my-delete-button (click)="deleteVideoChannel(videoChannel)"></my-delete-button> | ||
26 | |||
27 | <my-edit-button [routerLink]="[ 'update', videoChannel.uuid ]"></my-edit-button> | ||
28 | </div> | ||
29 | </div> | ||
30 | </div> | ||
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 deleted file mode 100644 index bcb58eac2..000000000 --- a/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.scss +++ /dev/null | |||
@@ -1,72 +0,0 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | .create-button { | ||
5 | @include create-button; | ||
6 | } | ||
7 | |||
8 | /deep/ .action-button { | ||
9 | &.action-button-delete { | ||
10 | margin-right: 10px; | ||
11 | } | ||
12 | } | ||
13 | |||
14 | .video-channel { | ||
15 | display: flex; | ||
16 | min-height: 130px; | ||
17 | padding-bottom: 20px; | ||
18 | margin-bottom: 20px; | ||
19 | border-bottom: 1px solid #C6C6C6; | ||
20 | |||
21 | img { | ||
22 | @include avatar(80px); | ||
23 | |||
24 | margin-right: 10px; | ||
25 | } | ||
26 | |||
27 | .video-channel-info { | ||
28 | flex-grow: 1; | ||
29 | |||
30 | a.video-channel-names { | ||
31 | @include disable-default-a-behaviour; | ||
32 | |||
33 | display: flex; | ||
34 | color: #000; | ||
35 | |||
36 | .video-channel-display-name { | ||
37 | font-weight: $font-semibold; | ||
38 | font-size: 18px; | ||
39 | } | ||
40 | |||
41 | .video-channel-name { | ||
42 | font-size: 14px; | ||
43 | color: #777272; | ||
44 | } | ||
45 | } | ||
46 | } | ||
47 | |||
48 | .video-channel-buttons { | ||
49 | min-width: 190px; | ||
50 | } | ||
51 | } | ||
52 | |||
53 | .video-channels-header { | ||
54 | text-align: right; | ||
55 | margin: 20px 0 50px; | ||
56 | } | ||
57 | |||
58 | @media screen and (max-width: 800px) { | ||
59 | .video-channel { | ||
60 | flex-direction: column; | ||
61 | height: auto; | ||
62 | text-align: center; | ||
63 | |||
64 | img { | ||
65 | margin-right: 0; | ||
66 | } | ||
67 | |||
68 | .video-channel-buttons { | ||
69 | margin-top: 10px; | ||
70 | } | ||
71 | } | ||
72 | } | ||
diff --git a/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.ts b/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.ts deleted file mode 100644 index eeaca11df..000000000 --- a/client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.ts +++ /dev/null | |||
@@ -1,59 +0,0 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | ||
2 | import { NotificationsService } from 'angular2-notifications' | ||
3 | import 'rxjs/add/observable/from' | ||
4 | import 'rxjs/add/operator/concatAll' | ||
5 | import { AuthService } from '../../core/auth' | ||
6 | import { ConfirmService } from '../../core/confirm' | ||
7 | import { VideoChannel } from '@app/shared/video-channel/video-channel.model' | ||
8 | import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' | ||
9 | import { User } from '@app/shared' | ||
10 | |||
11 | @Component({ | ||
12 | selector: 'my-account-video-channels', | ||
13 | templateUrl: './my-account-video-channels.component.html', | ||
14 | styleUrls: [ './my-account-video-channels.component.scss' ] | ||
15 | }) | ||
16 | export class MyAccountVideoChannelsComponent implements OnInit { | ||
17 | videoChannels: VideoChannel[] = [] | ||
18 | |||
19 | private user: User | ||
20 | |||
21 | constructor ( | ||
22 | private authService: AuthService, | ||
23 | private notificationsService: NotificationsService, | ||
24 | private confirmService: ConfirmService, | ||
25 | private videoChannelService: VideoChannelService | ||
26 | ) {} | ||
27 | |||
28 | ngOnInit () { | ||
29 | this.user = this.authService.getUser() | ||
30 | |||
31 | this.loadVideoChannels() | ||
32 | } | ||
33 | |||
34 | async deleteVideoChannel (videoChannel: VideoChannel) { | ||
35 | const res = await this.confirmService.confirmWithInput( | ||
36 | `Do you really want to delete ${videoChannel.displayName}? It will delete all videos uploaded in this channel too.`, | ||
37 | 'Please type the name of the video channel to confirm', | ||
38 | videoChannel.displayName, | ||
39 | 'Delete' | ||
40 | ) | ||
41 | if (res === false) return | ||
42 | |||
43 | this.videoChannelService.removeVideoChannel(videoChannel) | ||
44 | .subscribe( | ||
45 | status => { | ||
46 | this.loadVideoChannels() | ||
47 | this.notificationsService.success('Success', `Video channel ${videoChannel.name} deleted.`) | ||
48 | }, | ||
49 | |||
50 | error => this.notificationsService.error('Error', error.message) | ||
51 | ) | ||
52 | } | ||
53 | |||
54 | private loadVideoChannels () { | ||
55 | this.authService.userInformationLoaded | ||
56 | .flatMap(() => this.videoChannelService.listAccountVideoChannels(this.user.account.id)) | ||
57 | .subscribe(res => this.videoChannels = res.data) | ||
58 | } | ||
59 | } | ||
diff --git a/client/src/app/my-account/my-account-videos/my-account-videos.component.html b/client/src/app/my-account/my-account-videos/my-account-videos.component.html deleted file mode 100644 index 66ce3a77b..000000000 --- a/client/src/app/my-account/my-account-videos/my-account-videos.component.html +++ /dev/null | |||
@@ -1,45 +0,0 @@ | |||
1 | <div *ngIf="pagination.totalItems === 0">No results.</div> | ||
2 | |||
3 | <div | ||
4 | myInfiniteScroller | ||
5 | [pageHeight]="pageHeight" | ||
6 | (nearOfTop)="onNearOfTop()" (nearOfBottom)="onNearOfBottom()" (pageChanged)="onPageChanged($event)" | ||
7 | class="videos" #videosElement | ||
8 | > | ||
9 | <div *ngFor="let videos of videoPages; let i = index" class="videos-page"> | ||
10 | <div class="video" *ngFor="let video of videos; let j = index"> | ||
11 | <div class="checkbox-container"> | ||
12 | <input [id]="'video-check-' + video.id" type="checkbox" [(ngModel)]="checkedVideos[video.id]" /> | ||
13 | <label [for]="'video-check-' + video.id"></label> | ||
14 | </div> | ||
15 | |||
16 | <my-video-thumbnail [video]="video"></my-video-thumbnail> | ||
17 | |||
18 | <div class="video-info"> | ||
19 | <a class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a> | ||
20 | <span class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span> | ||
21 | <div class="video-info-private">{{ video.privacy.label }}</div> | ||
22 | </div> | ||
23 | |||
24 | <!-- Display only once --> | ||
25 | <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0 && j === 0"> | ||
26 | <div class="action-selection-mode-child"> | ||
27 | <span class="action-button action-button-cancel-selection" (click)="abortSelectionMode()"> | ||
28 | Cancel | ||
29 | </span> | ||
30 | |||
31 | <span class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()"> | ||
32 | <span class="icon icon-delete-white"></span> | ||
33 | Delete | ||
34 | </span> | ||
35 | </div> | ||
36 | </div> | ||
37 | |||
38 | <div class="video-buttons" *ngIf="isInSelectionMode() === false"> | ||
39 | <my-delete-button (click)="deleteVideo(video)"></my-delete-button> | ||
40 | |||
41 | <my-edit-button [routerLink]="[ '/videos', 'edit', video.uuid ]"></my-edit-button> | ||
42 | </div> | ||
43 | </div> | ||
44 | </div> | ||
45 | </div> | ||
diff --git a/client/src/app/my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/my-account/my-account-videos/my-account-videos.component.scss deleted file mode 100644 index f276ea389..000000000 --- a/client/src/app/my-account/my-account-videos/my-account-videos.component.scss +++ /dev/null | |||
@@ -1,114 +0,0 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | .action-selection-mode { | ||
5 | width: 174px; | ||
6 | display: flex; | ||
7 | justify-content: flex-end; | ||
8 | |||
9 | .action-selection-mode-child { | ||
10 | position: fixed; | ||
11 | |||
12 | .action-button { | ||
13 | display: inline-block; | ||
14 | } | ||
15 | |||
16 | .action-button-cancel-selection { | ||
17 | @include peertube-button; | ||
18 | @include grey-button; | ||
19 | |||
20 | margin-right: 10px; | ||
21 | } | ||
22 | |||
23 | .action-button-delete-selection { | ||
24 | @include peertube-button; | ||
25 | @include orange-button; | ||
26 | } | ||
27 | |||
28 | .icon.icon-delete-white { | ||
29 | @include icon(21px); | ||
30 | |||
31 | position: relative; | ||
32 | top: -2px; | ||
33 | background-image: url('../../../assets/images/global/delete-white.svg'); | ||
34 | } | ||
35 | } | ||
36 | } | ||
37 | |||
38 | /deep/ .action-button { | ||
39 | &.action-button-delete { | ||
40 | margin-right: 10px; | ||
41 | } | ||
42 | } | ||
43 | |||
44 | .video { | ||
45 | display: flex; | ||
46 | min-height: 130px; | ||
47 | padding-bottom: 20px; | ||
48 | margin-bottom: 20px; | ||
49 | border-bottom: 1px solid #C6C6C6; | ||
50 | |||
51 | &:first-child { | ||
52 | margin-top: 47px; | ||
53 | } | ||
54 | |||
55 | .checkbox-container { | ||
56 | display: flex; | ||
57 | align-items: center; | ||
58 | margin-right: 20px; | ||
59 | margin-left: 12px; | ||
60 | |||
61 | input[type=checkbox] { | ||
62 | @include peertube-checkbox(2px); | ||
63 | } | ||
64 | } | ||
65 | |||
66 | my-video-thumbnail { | ||
67 | margin-right: 10px; | ||
68 | } | ||
69 | |||
70 | .video-info { | ||
71 | flex-grow: 1; | ||
72 | |||
73 | .video-info-name { | ||
74 | @include disable-default-a-behaviour; | ||
75 | |||
76 | color: #000; | ||
77 | display: block; | ||
78 | font-size: 16px; | ||
79 | font-weight: $font-semibold; | ||
80 | } | ||
81 | |||
82 | .video-info-date-views, .video-info-private { | ||
83 | font-size: 13px; | ||
84 | |||
85 | &.video-info-private { | ||
86 | font-weight: $font-semibold; | ||
87 | } | ||
88 | } | ||
89 | } | ||
90 | |||
91 | .video-buttons { | ||
92 | min-width: 190px; | ||
93 | } | ||
94 | } | ||
95 | |||
96 | @media screen and (max-width: 800px) { | ||
97 | .video { | ||
98 | flex-direction: column; | ||
99 | height: auto; | ||
100 | text-align: center; | ||
101 | |||
102 | input[type=checkbox] { | ||
103 | display: none; | ||
104 | } | ||
105 | |||
106 | my-video-thumbnail { | ||
107 | margin-right: 0; | ||
108 | } | ||
109 | |||
110 | .video-buttons { | ||
111 | margin-top: 10px; | ||
112 | } | ||
113 | } | ||
114 | } | ||
diff --git a/client/src/app/my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/my-account/my-account-videos/my-account-videos.component.ts deleted file mode 100644 index c1b53bcd5..000000000 --- a/client/src/app/my-account/my-account-videos/my-account-videos.component.ts +++ /dev/null | |||
@@ -1,131 +0,0 @@ | |||
1 | import { Component, OnInit, OnDestroy } from '@angular/core' | ||
2 | import { ActivatedRoute, Router } from '@angular/router' | ||
3 | import { Location } from '@angular/common' | ||
4 | import { immutableAssign } from '@app/shared/misc/utils' | ||
5 | import { ComponentPagination } from '@app/shared/rest/component-pagination.model' | ||
6 | import { NotificationsService } from 'angular2-notifications' | ||
7 | import 'rxjs/add/observable/from' | ||
8 | import 'rxjs/add/operator/concatAll' | ||
9 | import { Observable } from 'rxjs/Observable' | ||
10 | import { AuthService } from '../../core/auth' | ||
11 | import { ConfirmService } from '../../core/confirm' | ||
12 | import { AbstractVideoList } from '../../shared/video/abstract-video-list' | ||
13 | import { Video } from '../../shared/video/video.model' | ||
14 | import { VideoService } from '../../shared/video/video.service' | ||
15 | |||
16 | @Component({ | ||
17 | selector: 'my-account-videos', | ||
18 | templateUrl: './my-account-videos.component.html', | ||
19 | styleUrls: [ './my-account-videos.component.scss' ] | ||
20 | }) | ||
21 | export class MyAccountVideosComponent extends AbstractVideoList implements OnInit, OnDestroy { | ||
22 | titlePage = 'My videos' | ||
23 | currentRoute = '/my-account/videos' | ||
24 | checkedVideos: { [ id: number ]: boolean } = {} | ||
25 | pagination: ComponentPagination = { | ||
26 | currentPage: 1, | ||
27 | itemsPerPage: 5, | ||
28 | totalItems: null | ||
29 | } | ||
30 | |||
31 | protected baseVideoWidth = -1 | ||
32 | protected baseVideoHeight = 155 | ||
33 | |||
34 | constructor (protected router: Router, | ||
35 | protected route: ActivatedRoute, | ||
36 | protected authService: AuthService, | ||
37 | protected notificationsService: NotificationsService, | ||
38 | protected confirmService: ConfirmService, | ||
39 | protected location: Location, | ||
40 | private videoService: VideoService) { | ||
41 | super() | ||
42 | } | ||
43 | |||
44 | ngOnInit () { | ||
45 | super.ngOnInit() | ||
46 | } | ||
47 | |||
48 | ngOnDestroy () { | ||
49 | super.ngOnDestroy() | ||
50 | } | ||
51 | |||
52 | abortSelectionMode () { | ||
53 | this.checkedVideos = {} | ||
54 | } | ||
55 | |||
56 | isInSelectionMode () { | ||
57 | return Object.keys(this.checkedVideos).some(k => this.checkedVideos[k] === true) | ||
58 | } | ||
59 | |||
60 | getVideosObservable (page: number) { | ||
61 | const newPagination = immutableAssign(this.pagination, { currentPage: page }) | ||
62 | |||
63 | return this.videoService.getMyVideos(newPagination, this.sort) | ||
64 | } | ||
65 | |||
66 | generateSyndicationList () { | ||
67 | throw new Error('Method not implemented.') | ||
68 | } | ||
69 | |||
70 | async deleteSelectedVideos () { | ||
71 | const toDeleteVideosIds = Object.keys(this.checkedVideos) | ||
72 | .filter(k => this.checkedVideos[k] === true) | ||
73 | .map(k => parseInt(k, 10)) | ||
74 | |||
75 | const res = await this.confirmService.confirm(`Do you really want to delete ${toDeleteVideosIds.length} videos?`, 'Delete') | ||
76 | if (res === false) return | ||
77 | |||
78 | const observables: Observable<any>[] = [] | ||
79 | for (const videoId of toDeleteVideosIds) { | ||
80 | const o = this.videoService | ||
81 | .removeVideo(videoId) | ||
82 | .do(() => this.spliceVideosById(videoId)) | ||
83 | |||
84 | observables.push(o) | ||
85 | } | ||
86 | |||
87 | Observable.from(observables) | ||
88 | .concatAll() | ||
89 | .subscribe( | ||
90 | res => { | ||
91 | this.notificationsService.success('Success', `${toDeleteVideosIds.length} videos deleted.`) | ||
92 | this.buildVideoPages() | ||
93 | }, | ||
94 | |||
95 | err => this.notificationsService.error('Error', err.message) | ||
96 | ) | ||
97 | } | ||
98 | |||
99 | async deleteVideo (video: Video) { | ||
100 | const res = await this.confirmService.confirm(`Do you really want to delete ${video.name}?`, 'Delete') | ||
101 | if (res === false) return | ||
102 | |||
103 | this.videoService.removeVideo(video.id) | ||
104 | .subscribe( | ||
105 | status => { | ||
106 | this.notificationsService.success('Success', `Video ${video.name} deleted.`) | ||
107 | this.spliceVideosById(video.id) | ||
108 | this.buildVideoPages() | ||
109 | }, | ||
110 | |||
111 | error => this.notificationsService.error('Error', error.message) | ||
112 | ) | ||
113 | } | ||
114 | |||
115 | protected buildVideoHeight () { | ||
116 | // In account videos, the video height is fixed | ||
117 | return this.baseVideoHeight | ||
118 | } | ||
119 | |||
120 | private spliceVideosById (id: number) { | ||
121 | for (const key of Object.keys(this.loadedPages)) { | ||
122 | const videos = this.loadedPages[key] | ||
123 | const index = videos.findIndex(v => v.id === id) | ||
124 | |||
125 | if (index !== -1) { | ||
126 | videos.splice(index, 1) | ||
127 | return | ||
128 | } | ||
129 | } | ||
130 | } | ||
131 | } | ||
diff --git a/client/src/app/my-account/my-account.component.html b/client/src/app/my-account/my-account.component.html deleted file mode 100644 index 591d58cf9..000000000 --- a/client/src/app/my-account/my-account.component.html +++ /dev/null | |||
@@ -1,13 +0,0 @@ | |||
1 | <div class="row"> | ||
2 | <div class="sub-menu"> | ||
3 | <a routerLink="/my-account/settings" routerLinkActive="active" class="title-page">My settings</a> | ||
4 | |||
5 | <a routerLink="/my-account/video-channels" routerLinkActive="active" class="title-page">My video channels</a> | ||
6 | |||
7 | <a routerLink="/my-account/videos" routerLinkActive="active" class="title-page">My videos</a> | ||
8 | </div> | ||
9 | |||
10 | <div class="margin-content"> | ||
11 | <router-outlet></router-outlet> | ||
12 | </div> | ||
13 | </div> | ||
diff --git a/client/src/app/my-account/my-account.component.ts b/client/src/app/my-account/my-account.component.ts deleted file mode 100644 index 7bb461d3c..000000000 --- a/client/src/app/my-account/my-account.component.ts +++ /dev/null | |||
@@ -1,7 +0,0 @@ | |||
1 | import { Component } from '@angular/core' | ||
2 | |||
3 | @Component({ | ||
4 | selector: 'my-my-account', | ||
5 | templateUrl: './my-account.component.html' | ||
6 | }) | ||
7 | export class MyAccountComponent {} | ||
diff --git a/client/src/app/my-account/my-account.module.ts b/client/src/app/my-account/my-account.module.ts deleted file mode 100644 index ba9dea71e..000000000 --- a/client/src/app/my-account/my-account.module.ts +++ /dev/null | |||
@@ -1,38 +0,0 @@ | |||
1 | import { NgModule } from '@angular/core' | ||
2 | import { SharedModule } from '../shared' | ||
3 | import { MyAccountRoutingModule } from './my-account-routing.module' | ||
4 | import { MyAccountChangePasswordComponent } from './my-account-settings/my-account-change-password/my-account-change-password.component' | ||
5 | import { MyAccountVideoSettingsComponent } from './my-account-settings/my-account-video-settings/my-account-video-settings.component' | ||
6 | import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component' | ||
7 | import { MyAccountComponent } from './my-account.component' | ||
8 | import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component' | ||
9 | import { MyAccountProfileComponent } from '@app/my-account/my-account-settings/my-account-profile/my-account-profile.component' | ||
10 | import { MyAccountVideoChannelsComponent } from '@app/my-account/my-account-video-channels/my-account-video-channels.component' | ||
11 | import { MyAccountVideoChannelCreateComponent } from '@app/my-account/my-account-video-channels/my-account-video-channel-create.component' | ||
12 | import { MyAccountVideoChannelUpdateComponent } from '@app/my-account/my-account-video-channels/my-account-video-channel-update.component' | ||
13 | |||
14 | @NgModule({ | ||
15 | imports: [ | ||
16 | MyAccountRoutingModule, | ||
17 | SharedModule | ||
18 | ], | ||
19 | |||
20 | declarations: [ | ||
21 | MyAccountComponent, | ||
22 | MyAccountSettingsComponent, | ||
23 | MyAccountChangePasswordComponent, | ||
24 | MyAccountVideoSettingsComponent, | ||
25 | MyAccountProfileComponent, | ||
26 | MyAccountVideosComponent, | ||
27 | MyAccountVideoChannelsComponent, | ||
28 | MyAccountVideoChannelCreateComponent, | ||
29 | MyAccountVideoChannelUpdateComponent | ||
30 | ], | ||
31 | |||
32 | exports: [ | ||
33 | MyAccountComponent | ||
34 | ], | ||
35 | |||
36 | providers: [] | ||
37 | }) | ||
38 | export class MyAccountModule { } | ||