aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/my-account/my-account-video-channels
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-05-09 09:26:41 +0200
committerChocobozzz <me@florianbigard.com>2018-05-09 09:32:26 +0200
commit62e62f118d5da57acd3494fece2e8ed357564ffe (patch)
treeff5b7c6ec5708d71a76a2eb5744d810015ae29a5 /client/src/app/my-account/my-account-video-channels
parent1952a538baa330b13bd11631b3975f7ef1c37e70 (diff)
downloadPeerTube-62e62f118d5da57acd3494fece2e8ed357564ffe.tar.gz
PeerTube-62e62f118d5da57acd3494fece2e8ed357564ffe.tar.zst
PeerTube-62e62f118d5da57acd3494fece2e8ed357564ffe.zip
Load my-account module lazily
Diffstat (limited to 'client/src/app/my-account/my-account-video-channels')
-rw-r--r--client/src/app/my-account/my-account-video-channels/my-account-video-channel-create.component.ts89
-rw-r--r--client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.component.html42
-rw-r--r--client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.component.scss27
-rw-r--r--client/src/app/my-account/my-account-video-channels/my-account-video-channel-edit.ts6
-rw-r--r--client/src/app/my-account/my-account-video-channels/my-account-video-channel-update.component.ts117
-rw-r--r--client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.html30
-rw-r--r--client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.scss72
-rw-r--r--client/src/app/my-account/my-account-video-channels/my-account-video-channels.component.ts59
8 files changed, 0 insertions, 442 deletions
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 @@
1import { Component, OnInit } from '@angular/core'
2import { Router } from '@angular/router'
3import { NotificationsService } from 'angular2-notifications'
4import 'rxjs/add/observable/from'
5import 'rxjs/add/operator/concatAll'
6import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit'
7import { FormBuilder, FormGroup } from '@angular/forms'
8import { VideoChannelCreate } from '../../../../../shared/models/videos'
9import {
10 VIDEO_CHANNEL_DESCRIPTION,
11 VIDEO_CHANNEL_DISPLAY_NAME,
12 VIDEO_CHANNEL_SUPPORT
13} from '@app/shared/forms/form-validators/video-channel'
14import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
15import { 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})
22export 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
8input[type=text] {
9 @include peertube-input-text(340px);
10
11 display: block;
12}
13
14textarea {
15 @include peertube-textarea(500px, 150px);
16
17 display: block;
18}
19
20.peertube-select-container {
21 @include peertube-select-container(340px);
22}
23
24input[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 @@
1import { FormReactive } from '@app/shared'
2
3export 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 @@
1import { Component, OnInit, OnDestroy } from '@angular/core'
2import { ActivatedRoute, Router } from '@angular/router'
3import { NotificationsService } from 'angular2-notifications'
4import 'rxjs/add/observable/from'
5import 'rxjs/add/operator/concatAll'
6import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit'
7import { FormBuilder, FormGroup } from '@angular/forms'
8import { VideoChannelUpdate } from '../../../../../shared/models/videos'
9import {
10 VIDEO_CHANNEL_DESCRIPTION,
11 VIDEO_CHANNEL_DISPLAY_NAME,
12 VIDEO_CHANNEL_SUPPORT
13} from '@app/shared/forms/form-validators/video-channel'
14import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
15import { Subscription } from 'rxjs/Subscription'
16import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
17import { 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})
24export 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 @@
1import { Component, OnInit } from '@angular/core'
2import { NotificationsService } from 'angular2-notifications'
3import 'rxjs/add/observable/from'
4import 'rxjs/add/operator/concatAll'
5import { AuthService } from '../../core/auth'
6import { ConfirmService } from '../../core/confirm'
7import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
8import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
9import { 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})
16export 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}
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-01 09:50:38 +0000