aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/my-account
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-04-23 16:16:05 +0200
committerChocobozzz <me@florianbigard.com>2018-04-23 16:16:05 +0200
commit4bb6886d28cc5333bbe1523674bf5db141af456f (patch)
tree86276bfa11afdd4357ac45df2ead26a41f181069 /client/src/app/my-account
parent3186046d17cc09a3426d5ea67835f4c936cb18a3 (diff)
downloadPeerTube-4bb6886d28cc5333bbe1523674bf5db141af456f.tar.gz
PeerTube-4bb6886d28cc5333bbe1523674bf5db141af456f.tar.zst
PeerTube-4bb6886d28cc5333bbe1523674bf5db141af456f.zip
Rename account module to my-account
Diffstat (limited to 'client/src/app/my-account')
-rw-r--r--client/src/app/my-account/index.ts3
-rw-r--r--client/src/app/my-account/my-account-routing.module.ts41
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-change-password/index.ts1
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html20
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss19
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts62
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-details/index.ts1
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.html25
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.scss20
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.ts60
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-settings.component.html24
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-settings.component.scss56
-rw-r--r--client/src/app/my-account/my-account-settings/my-account-settings.component.ts74
-rw-r--r--client/src/app/my-account/my-account-videos/my-account-videos.component.html45
-rw-r--r--client/src/app/my-account/my-account-videos/my-account-videos.component.scss114
-rw-r--r--client/src/app/my-account/my-account-videos/my-account-videos.component.ts133
-rw-r--r--client/src/app/my-account/my-account.component.html11
-rw-r--r--client/src/app/my-account/my-account.component.ts7
-rw-r--r--client/src/app/my-account/my-account.module.ts30
19 files changed, 746 insertions, 0 deletions
diff --git a/client/src/app/my-account/index.ts b/client/src/app/my-account/index.ts
new file mode 100644
index 000000000..3df96dd7a
--- /dev/null
+++ b/client/src/app/my-account/index.ts
@@ -0,0 +1,3 @@
1export * from './my-account-routing.module'
2export * from './my-account.component'
3export * 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
new file mode 100644
index 000000000..5a61db41f
--- /dev/null
+++ b/client/src/app/my-account/my-account-routing.module.ts
@@ -0,0 +1,41 @@
1import { NgModule } from '@angular/core'
2import { RouterModule, Routes } from '@angular/router'
3import { MetaGuard } from '@ngx-meta/core'
4import { LoginGuard } from '../core'
5import { MyAccountComponent } from './my-account.component'
6import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component'
7import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component'
8
9const myAccountRoutes: Routes = [
10 {
11 path: 'my-account',
12 component: MyAccountComponent,
13 canActivateChild: [ MetaGuard, LoginGuard ],
14 children: [
15 {
16 path: 'settings',
17 component: MyAccountSettingsComponent,
18 data: {
19 meta: {
20 title: 'Account settings'
21 }
22 }
23 },
24 {
25 path: 'videos',
26 component: MyAccountVideosComponent,
27 data: {
28 meta: {
29 title: 'Account videos'
30 }
31 }
32 }
33 ]
34 }
35]
36
37@NgModule({
38 imports: [ RouterModule.forChild(myAccountRoutes) ],
39 exports: [ RouterModule ]
40})
41export 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
new file mode 100644
index 000000000..644047c5f
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-change-password/index.ts
@@ -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
new file mode 100644
index 000000000..b0e3cada4
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
@@ -0,0 +1,20 @@
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
new file mode 100644
index 000000000..f8279ffd3
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
@@ -0,0 +1,19 @@
1@import '_variables';
2@import '_mixins';
3
4input[type=password] {
5 @include peertube-input-text(340px);
6 display: block;
7
8 &#new-confirmed-password {
9 margin-top: 15px;
10 }
11}
12
13input[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
new file mode 100644
index 000000000..80af668f9
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
@@ -0,0 +1,62 @@
1import { Component, OnInit } from '@angular/core'
2import { FormBuilder, FormGroup } from '@angular/forms'
3import { NotificationsService } from 'angular2-notifications'
4import { 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})
11export 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-details/index.ts b/client/src/app/my-account/my-account-settings/my-account-details/index.ts
new file mode 100644
index 000000000..b7f58e329
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-details/index.ts
@@ -0,0 +1 @@
export * from './my-account-details.component'
diff --git a/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.html b/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.html
new file mode 100644
index 000000000..0e8598e9e
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.html
@@ -0,0 +1,25 @@
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-details/my-account-details.component.scss b/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.scss
new file mode 100644
index 000000000..ed59e4689
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.scss
@@ -0,0 +1,20 @@
1@import '_variables';
2@import '_mixins';
3
4input[type=checkbox] {
5 @include peertube-checkbox(1px);
6}
7
8input[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-details/my-account-details.component.ts b/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.ts
new file mode 100644
index 000000000..4c1456541
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-details/my-account-details.component.ts
@@ -0,0 +1,60 @@
1import { Component, Input, OnInit } from '@angular/core'
2import { FormBuilder, FormGroup } from '@angular/forms'
3import { NotificationsService } from 'angular2-notifications'
4import { UserUpdateMe } from '../../../../../../shared'
5import { AuthService } from '../../../core'
6import { FormReactive, User, UserService } from '../../../shared'
7
8@Component({
9 selector: 'my-account-details',
10 templateUrl: './my-account-details.component.html',
11 styleUrls: [ './my-account-details.component.scss' ]
12})
13export class MyAccountDetailsComponent 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.updateMyDetails(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-settings/my-account-settings.component.html b/client/src/app/my-account/my-account-settings/my-account-settings.component.html
new file mode 100644
index 000000000..7ae27dc75
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-settings.component.html
@@ -0,0 +1,24 @@
1<div class="user">
2 <img [src]="getAvatarUrl()" alt="Avatar" />
3
4 <div class="user-info">
5 <div class="user-info-username">{{ user.username }}</div>
6 <div class="user-info-followers">{{ user.account?.followersCount }} subscribers</div>
7 </div>
8</div>
9
10<div class="button-file">
11 <span>Change your avatar</span>
12 <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="changeAvatar()" />
13</div>
14<div class="file-max-size">(extensions: {{ avatarExtensions }}, max size: {{ maxAvatarSize | bytes }})</div>
15
16<div class="user-quota">
17 <span class="user-quota-label">Video quota:</span> {{ userVideoQuotaUsed | bytes: 0 }} / {{ userVideoQuota }}
18</div>
19
20<div class="account-title">Account settings</div>
21<my-account-change-password></my-account-change-password>
22
23<div class="account-title">Video settings</div>
24<my-account-details [user]="user"></my-account-details>
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
new file mode 100644
index 000000000..1cc00ca49
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-settings.component.scss
@@ -0,0 +1,56 @@
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-username {
15 font-size: 20px;
16 font-weight: $font-bold;
17 }
18
19 .user-info-followers {
20 font-size: 15px;
21 }
22 }
23}
24
25.button-file {
26 @include peertube-button-file(160px);
27
28 margin-top: 10px;
29 margin-bottom: 5px;
30}
31
32.file-max-size {
33 display: inline-block;
34 font-size: 13px;
35
36 position: relative;
37 top: -10px;
38}
39
40.user-quota {
41 font-size: 15px;
42 margin-top: 20px;
43
44 .user-quota-label {
45 font-weight: $font-semibold;
46 }
47}
48
49.account-title {
50 text-transform: uppercase;
51 color: $orange-color;
52 font-weight: $font-bold;
53 font-size: 13px;
54 margin-top: 55px;
55 margin-bottom: 30px;
56}
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
new file mode 100644
index 000000000..91420cc6f
--- /dev/null
+++ b/client/src/app/my-account/my-account-settings/my-account-settings.component.ts
@@ -0,0 +1,74 @@
1import { Component, OnInit, ViewChild } from '@angular/core'
2import { NotificationsService } from 'angular2-notifications'
3import { BytesPipe } from 'ngx-pipes'
4import { AuthService } from '../../core'
5import { ServerService } from '../../core/server'
6import { User } from '../../shared'
7import { 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})
14export 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 getAvatarUrl () {
46 return this.user.getAvatarUrl()
47 }
48
49 changeAvatar () {
50 const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ]
51
52 const formData = new FormData()
53 formData.append('avatarfile', avatarfile)
54
55 this.userService.changeAvatar(formData)
56 .subscribe(
57 data => {
58 this.notificationsService.success('Success', 'Avatar changed.')
59
60 this.user.account.avatar = data.avatar
61 },
62
63 err => this.notificationsService.error('Error', err.message)
64 )
65 }
66
67 get maxAvatarSize () {
68 return this.serverService.getConfig().avatar.file.size.max
69 }
70
71 get avatarExtensions () {
72 return this.serverService.getConfig().avatar.file.extensions.join(',')
73 }
74}
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
new file mode 100644
index 000000000..66ce3a77b
--- /dev/null
+++ b/client/src/app/my-account/my-account-videos/my-account-videos.component.html
@@ -0,0 +1,45 @@
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
new file mode 100644
index 000000000..f276ea389
--- /dev/null
+++ b/client/src/app/my-account/my-account-videos/my-account-videos.component.scss
@@ -0,0 +1,114 @@
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
new file mode 100644
index 000000000..a6cef361e
--- /dev/null
+++ b/client/src/app/my-account/my-account-videos/my-account-videos.component.ts
@@ -0,0 +1,133 @@
1import { Component, OnInit, OnDestroy } from '@angular/core'
2import { ActivatedRoute, Router } from '@angular/router'
3import { Location } from '@angular/common'
4import { immutableAssign } from '@app/shared/misc/utils'
5import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
6import { NotificationsService } from 'angular2-notifications'
7import 'rxjs/add/observable/from'
8import 'rxjs/add/operator/concatAll'
9import { Observable } from 'rxjs/Observable'
10import { AuthService } from '../../core/auth'
11import { ConfirmService } from '../../core/confirm'
12import { AbstractVideoList } from '../../shared/video/abstract-video-list'
13import { Video } from '../../shared/video/video.model'
14import { 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})
21export 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 // this.generateSyndicationList()
48 }
49
50 ngOnDestroy () {
51 super.ngOnDestroy()
52 }
53
54 abortSelectionMode () {
55 this.checkedVideos = {}
56 }
57
58 isInSelectionMode () {
59 return Object.keys(this.checkedVideos).some(k => this.checkedVideos[k] === true)
60 }
61
62 getVideosObservable (page: number) {
63 const newPagination = immutableAssign(this.pagination, { currentPage: page })
64
65 return this.videoService.getMyVideos(newPagination, this.sort)
66 }
67
68 generateSyndicationList () {
69 throw new Error('Method not implemented.')
70 }
71
72 async deleteSelectedVideos () {
73 const toDeleteVideosIds = Object.keys(this.checkedVideos)
74 .filter(k => this.checkedVideos[k] === true)
75 .map(k => parseInt(k, 10))
76
77 const res = await this.confirmService.confirm(`Do you really want to delete ${toDeleteVideosIds.length} videos?`, 'Delete')
78 if (res === false) return
79
80 const observables: Observable<any>[] = []
81 for (const videoId of toDeleteVideosIds) {
82 const o = this.videoService
83 .removeVideo(videoId)
84 .do(() => this.spliceVideosById(videoId))
85
86 observables.push(o)
87 }
88
89 Observable.from(observables)
90 .concatAll()
91 .subscribe(
92 res => {
93 this.notificationsService.success('Success', `${toDeleteVideosIds.length} videos deleted.`)
94 this.buildVideoPages()
95 },
96
97 err => this.notificationsService.error('Error', err.message)
98 )
99 }
100
101 async deleteVideo (video: Video) {
102 const res = await this.confirmService.confirm(`Do you really want to delete ${video.name}?`, 'Delete')
103 if (res === false) return
104
105 this.videoService.removeVideo(video.id)
106 .subscribe(
107 status => {
108 this.notificationsService.success('Success', `Video ${video.name} deleted.`)
109 this.spliceVideosById(video.id)
110 this.buildVideoPages()
111 },
112
113 error => this.notificationsService.error('Error', error.message)
114 )
115 }
116
117 protected buildVideoHeight () {
118 // In account videos, the video height is fixed
119 return this.baseVideoHeight
120 }
121
122 private spliceVideosById (id: number) {
123 for (const key of Object.keys(this.loadedPages)) {
124 const videos = this.loadedPages[key]
125 const index = videos.findIndex(v => v.id === id)
126
127 if (index !== -1) {
128 videos.splice(index, 1)
129 return
130 }
131 }
132 }
133}
diff --git a/client/src/app/my-account/my-account.component.html b/client/src/app/my-account/my-account.component.html
new file mode 100644
index 000000000..637b2587c
--- /dev/null
+++ b/client/src/app/my-account/my-account.component.html
@@ -0,0 +1,11 @@
1<div class="row">
2 <div class="sub-menu">
3 <a routerLink="/my-account/settings" routerLinkActive="active" class="title-page">My account</a>
4
5 <a routerLink="/my-account/videos" routerLinkActive="active" class="title-page">My videos</a>
6 </div>
7
8 <div class="margin-content">
9 <router-outlet></router-outlet>
10 </div>
11</div>
diff --git a/client/src/app/my-account/my-account.component.ts b/client/src/app/my-account/my-account.component.ts
new file mode 100644
index 000000000..0955e2b7b
--- /dev/null
+++ b/client/src/app/my-account/my-account.component.ts
@@ -0,0 +1,7 @@
1import { Component } from '@angular/core'
2
3@Component({
4 selector: 'my-account',
5 templateUrl: './my-account.component.html'
6})
7export class MyAccountComponent {}
diff --git a/client/src/app/my-account/my-account.module.ts b/client/src/app/my-account/my-account.module.ts
new file mode 100644
index 000000000..317277304
--- /dev/null
+++ b/client/src/app/my-account/my-account.module.ts
@@ -0,0 +1,30 @@
1import { NgModule } from '@angular/core'
2import { SharedModule } from '../shared'
3import { MyAccountRoutingModule } from './my-account-routing.module'
4import { MyAccountChangePasswordComponent } from './my-account-settings/my-account-change-password/my-account-change-password.component'
5import { MyAccountDetailsComponent } from './my-account-settings/my-account-details/my-account-details.component'
6import { MyAccountSettingsComponent } from './my-account-settings/my-account-settings.component'
7import { MyAccountComponent } from './my-account.component'
8import { MyAccountVideosComponent } from './my-account-videos/my-account-videos.component'
9
10@NgModule({
11 imports: [
12 MyAccountRoutingModule,
13 SharedModule
14 ],
15
16 declarations: [
17 MyAccountComponent,
18 MyAccountSettingsComponent,
19 MyAccountChangePasswordComponent,
20 MyAccountDetailsComponent,
21 MyAccountVideosComponent
22 ],
23
24 exports: [
25 MyAccountComponent
26 ],
27
28 providers: []
29})
30export class MyAccountModule { }