aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-account
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-08-21 16:18:59 +0200
committerChocobozzz <me@florianbigard.com>2018-08-27 09:41:54 +0200
commit22a16e36f6526887ed8f5e5d3c9f9e5da0b4a8cd (patch)
tree93c53e0619f966bd9ff1bb698c411277a9447a41 /client/src/app/+my-account
parent99492dbc0d87ef54d0dab7d8d44f8d0de5722bdd (diff)
downloadPeerTube-22a16e36f6526887ed8f5e5d3c9f9e5da0b4a8cd.tar.gz
PeerTube-22a16e36f6526887ed8f5e5d3c9f9e5da0b4a8cd.tar.zst
PeerTube-22a16e36f6526887ed8f5e5d3c9f9e5da0b4a8cd.zip
Add local user subscriptions
Diffstat (limited to 'client/src/app/+my-account')
-rw-r--r--client/src/app/+my-account/my-account-routing.module.ts10
-rw-r--r--client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html23
-rw-r--r--client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss49
-rw-r--r--client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts30
-rw-r--r--client/src/app/+my-account/my-account-video-channels/my-account-video-channel-update.component.ts4
-rw-r--r--client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss15
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.scss6
-rw-r--r--client/src/app/+my-account/my-account.component.html6
-rw-r--r--client/src/app/+my-account/my-account.module.ts4
-rw-r--r--client/src/app/+my-account/shared/actor-avatar-info.component.scss2
10 files changed, 127 insertions, 22 deletions
diff --git a/client/src/app/+my-account/my-account-routing.module.ts b/client/src/app/+my-account/my-account-routing.module.ts
index 6f0806e8a..c1c979151 100644
--- a/client/src/app/+my-account/my-account-routing.module.ts
+++ b/client/src/app/+my-account/my-account-routing.module.ts
@@ -9,6 +9,7 @@ import { MyAccountVideoChannelsComponent } from '@app/+my-account/my-account-vid
9import { MyAccountVideoChannelCreateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-create.component' 9import { MyAccountVideoChannelCreateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-create.component'
10import { MyAccountVideoChannelUpdateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-update.component' 10import { MyAccountVideoChannelUpdateComponent } from '@app/+my-account/my-account-video-channels/my-account-video-channel-update.component'
11import { MyAccountVideoImportsComponent } from '@app/+my-account/my-account-video-imports/my-account-video-imports.component' 11import { MyAccountVideoImportsComponent } from '@app/+my-account/my-account-video-imports/my-account-video-imports.component'
12import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-subscriptions/my-account-subscriptions.component'
12 13
13const myAccountRoutes: Routes = [ 14const myAccountRoutes: Routes = [
14 { 15 {
@@ -74,6 +75,15 @@ const myAccountRoutes: Routes = [
74 title: 'Account video imports' 75 title: 'Account video imports'
75 } 76 }
76 } 77 }
78 },
79 {
80 path: 'subscriptions',
81 component: MyAccountSubscriptionsComponent,
82 data: {
83 meta: {
84 title: 'Account subscriptions'
85 }
86 }
77 } 87 }
78 ] 88 ]
79 } 89 }
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
new file mode 100644
index 000000000..4c68cd1a5
--- /dev/null
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.html
@@ -0,0 +1,23 @@
1<div class="video-channels">
2 <div *ngFor="let videoChannel of videoChannels" class="video-channel">
3 <a [routerLink]="[ '/video-channels', videoChannel.name ]">
4 <img [src]="videoChannel.avatarUrl" alt="Avatar" />
5 </a>
6
7 <div class="video-channel-info">
8 <a [routerLink]="[ '/video-channels', videoChannel.name ]" class="video-channel-names" i18n-title title="Go to the channel">
9 <div class="video-channel-display-name">{{ videoChannel.displayName }}</div>
10 <div class="video-channel-name">{{ videoChannel.name }}</div>
11 </a>
12
13 <div i18n class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div>
14
15 <a [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n-title title="Go the owner account page" class="actor-owner">
16 <span i18n>Created by {{ videoChannel.ownerBy }}</span>
17 <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
18 </a>
19 </div>
20
21 <my-subscribe-button [videoChannel]="videoChannel"></my-subscribe-button>
22 </div>
23</div>
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
new file mode 100644
index 000000000..2fbfa335b
--- /dev/null
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
@@ -0,0 +1,49 @@
1@import '_variables';
2@import '_mixins';
3
4.video-channel {
5 @include row-blocks;
6
7 img {
8 @include avatar(80px);
9
10 margin-right: 10px;
11 }
12
13 .video-channel-info {
14 flex-grow: 1;
15
16 a.video-channel-names {
17 @include disable-default-a-behaviour;
18
19 width: fit-content;
20 display: flex;
21 align-items: baseline;
22 color: #000;
23
24 .video-channel-display-name {
25 font-weight: $font-semibold;
26 font-size: 18px;
27 }
28
29 .video-channel-name {
30 font-size: 14px;
31 color: $grey-actor-name;
32 margin-left: 5px;
33 }
34 }
35 }
36
37 .actor-owner {
38 @include actor-owner;
39 }
40
41 my-subscribe-button {
42 /deep/ span[role=button] {
43 padding: 7px 12px;
44 font-size: 16px;
45 }
46 }
47}
48
49
diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
new file mode 100644
index 000000000..1e94cf90b
--- /dev/null
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.ts
@@ -0,0 +1,30 @@
1import { Component, OnInit } from '@angular/core'
2import { NotificationsService } from 'angular2-notifications'
3import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
4import { I18n } from '@ngx-translate/i18n-polyfill'
5import { UserSubscriptionService } from '@app/shared/user-subscription'
6
7@Component({
8 selector: 'my-account-subscriptions',
9 templateUrl: './my-account-subscriptions.component.html',
10 styleUrls: [ './my-account-subscriptions.component.scss' ]
11})
12export class MyAccountSubscriptionsComponent implements OnInit {
13 videoChannels: VideoChannel[] = []
14
15 constructor (
16 private userSubscriptionService: UserSubscriptionService,
17 private notificationsService: NotificationsService,
18 private i18n: I18n
19 ) {}
20
21 ngOnInit () {
22 this.userSubscriptionService.listSubscriptions()
23 .subscribe(
24 res => { console.log(res); this.videoChannels = res.data },
25
26 error => this.notificationsService.error(this.i18n('Error'), error.message)
27 )
28 }
29
30}
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
index e25037e24..56697030b 100644
--- 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
@@ -78,7 +78,7 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
78 support: body.support || null 78 support: body.support || null
79 } 79 }
80 80
81 this.videoChannelService.updateVideoChannel(this.videoChannelToUpdate.uuid, videoChannelUpdate).subscribe( 81 this.videoChannelService.updateVideoChannel(this.videoChannelToUpdate.name, videoChannelUpdate).subscribe(
82 () => { 82 () => {
83 this.authService.refreshUserInformation() 83 this.authService.refreshUserInformation()
84 this.notificationsService.success( 84 this.notificationsService.success(
@@ -93,7 +93,7 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
93 } 93 }
94 94
95 onAvatarChange (formData: FormData) { 95 onAvatarChange (formData: FormData) {
96 this.videoChannelService.changeVideoChannelAvatar(this.videoChannelToUpdate.uuid, formData) 96 this.videoChannelService.changeVideoChannelAvatar(this.videoChannelToUpdate.name, formData)
97 .subscribe( 97 .subscribe(
98 data => { 98 data => {
99 this.notificationsService.success(this.i18n('Success'), this.i18n('Avatar changed.')) 99 this.notificationsService.success(this.i18n('Success'), this.i18n('Avatar changed.'))
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
index f8fd2684e..5c892be01 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
@@ -12,11 +12,7 @@
12} 12}
13 13
14.video-channel { 14.video-channel {
15 display: flex; 15 @include row-blocks;
16 min-height: 130px;
17 padding-bottom: 20px;
18 margin-bottom: 20px;
19 border-bottom: 1px solid #C6C6C6;
20 16
21 img { 17 img {
22 @include avatar(80px); 18 @include avatar(80px);
@@ -42,7 +38,7 @@
42 38
43 .video-channel-name { 39 .video-channel-name {
44 font-size: 14px; 40 font-size: 14px;
45 color: #777272; 41 color: $grey-actor-name;
46 margin-left: 5px; 42 margin-left: 5px;
47 } 43 }
48 } 44 }
@@ -64,12 +60,9 @@
64 } 60 }
65 61
66 .video-channel { 62 .video-channel {
67 flex-direction: column;
68 height: auto;
69 text-align: center;
70
71 .video-channel-names { 63 .video-channel-names {
72 justify-content: center; 64 flex-direction: column;
65 align-items: center !important;
73 } 66 }
74 67
75 img { 68 img {
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
index 64a04fa20..cd805be73 100644
--- 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
@@ -42,11 +42,7 @@
42} 42}
43 43
44.video { 44.video {
45 display: flex; 45 @include row-blocks;
46 min-height: 130px;
47 padding-bottom: 20px;
48 margin-bottom: 20px;
49 border-bottom: 1px solid #C6C6C6;
50 46
51 &:first-child { 47 &:first-child {
52 margin-top: 47px; 48 margin-top: 47px;
diff --git a/client/src/app/+my-account/my-account.component.html b/client/src/app/+my-account/my-account.component.html
index ddb0570db..74742649c 100644
--- a/client/src/app/+my-account/my-account.component.html
+++ b/client/src/app/+my-account/my-account.component.html
@@ -2,11 +2,13 @@
2 <div class="sub-menu"> 2 <div class="sub-menu">
3 <a i18n routerLink="/my-account/settings" routerLinkActive="active" class="title-page">My settings</a> 3 <a i18n routerLink="/my-account/settings" routerLinkActive="active" class="title-page">My settings</a>
4 4
5 <a i18n routerLink="/my-account/video-channels" routerLinkActive="active" class="title-page">My video channels</a> 5 <a i18n routerLink="/my-account/video-channels" routerLinkActive="active" class="title-page">My channels</a>
6 6
7 <a i18n routerLink="/my-account/videos" routerLinkActive="active" class="title-page">My videos</a> 7 <a i18n routerLink="/my-account/videos" routerLinkActive="active" class="title-page">My videos</a>
8 8
9 <a *ngIf="isVideoImportEnabled()" i18n routerLink="/my-account/video-imports" routerLinkActive="active" class="title-page">My video imports</a> 9 <a i18n routerLink="/my-account/subscriptions" routerLinkActive="active" class="title-page">My subscriptions</a>
10
11 <a *ngIf="isVideoImportEnabled()" i18n routerLink="/my-account/video-imports" routerLinkActive="active" class="title-page">My imports</a>
10 </div> 12 </div>
11 13
12 <div class="margin-content"> 14 <div class="margin-content">
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index 29b49e8d9..c93f38d4b 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -14,6 +14,7 @@ import { MyAccountVideoChannelUpdateComponent } from '@app/+my-account/my-accoun
14import { ActorAvatarInfoComponent } from '@app/+my-account/shared/actor-avatar-info.component' 14import { ActorAvatarInfoComponent } from '@app/+my-account/shared/actor-avatar-info.component'
15import { MyAccountVideoImportsComponent } from '@app/+my-account/my-account-video-imports/my-account-video-imports.component' 15import { MyAccountVideoImportsComponent } from '@app/+my-account/my-account-video-imports/my-account-video-imports.component'
16import { MyAccountDangerZoneComponent } from '@app/+my-account/my-account-settings/my-account-danger-zone' 16import { MyAccountDangerZoneComponent } from '@app/+my-account/my-account-settings/my-account-danger-zone'
17import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-subscriptions/my-account-subscriptions.component'
17 18
18@NgModule({ 19@NgModule({
19 imports: [ 20 imports: [
@@ -34,7 +35,8 @@ import { MyAccountDangerZoneComponent } from '@app/+my-account/my-account-settin
34 MyAccountVideoChannelUpdateComponent, 35 MyAccountVideoChannelUpdateComponent,
35 ActorAvatarInfoComponent, 36 ActorAvatarInfoComponent,
36 MyAccountVideoImportsComponent, 37 MyAccountVideoImportsComponent,
37 MyAccountDangerZoneComponent 38 MyAccountDangerZoneComponent,
39 MyAccountSubscriptionsComponent
38 ], 40 ],
39 41
40 exports: [ 42 exports: [
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.scss b/client/src/app/+my-account/shared/actor-avatar-info.component.scss
index 36a792f82..0b0c83de5 100644
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.scss
+++ b/client/src/app/+my-account/shared/actor-avatar-info.component.scss
@@ -25,7 +25,7 @@
25 position: relative; 25 position: relative;
26 top: 2px; 26 top: 2px;
27 font-size: 14px; 27 font-size: 14px;
28 color: #777272; 28 color: $grey-actor-name;
29 } 29 }
30 } 30 }
31 31