diff options
Diffstat (limited to 'client/src/app/+accounts')
14 files changed, 348 insertions, 0 deletions
diff --git a/client/src/app/+accounts/account-about/account-about.component.html b/client/src/app/+accounts/account-about/account-about.component.html new file mode 100644 index 000000000..003a8045e --- /dev/null +++ b/client/src/app/+accounts/account-about/account-about.component.html | |||
@@ -0,0 +1,12 @@ | |||
1 | <div *ngIf="account" class="row"> | ||
2 | <div class="description col-md-6 col-sm-12"> | ||
3 | <div class="small-title">Description</div> | ||
4 | <div class="content">{{ getAccountDescription() }}</div> | ||
5 | </div> | ||
6 | |||
7 | <div class="stats col-md-6 col-sm-12"> | ||
8 | <div class="small-title">Stats</div> | ||
9 | |||
10 | <div class="content">Joined {{ account.createdAt | date }}</div> | ||
11 | </div> | ||
12 | </div> \ No newline at end of file | ||
diff --git a/client/src/app/+accounts/account-about/account-about.component.scss b/client/src/app/+accounts/account-about/account-about.component.scss new file mode 100644 index 000000000..b1be7d4ed --- /dev/null +++ b/client/src/app/+accounts/account-about/account-about.component.scss | |||
@@ -0,0 +1,8 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | .small-title { | ||
5 | @include in-content-small-title; | ||
6 | |||
7 | margin-bottom: 20px; | ||
8 | } | ||
diff --git a/client/src/app/+accounts/account-about/account-about.component.ts b/client/src/app/+accounts/account-about/account-about.component.ts new file mode 100644 index 000000000..8746875cb --- /dev/null +++ b/client/src/app/+accounts/account-about/account-about.component.ts | |||
@@ -0,0 +1,39 @@ | |||
1 | import { Component, OnDestroy, OnInit } from '@angular/core' | ||
2 | import { ActivatedRoute, Router } from '@angular/router' | ||
3 | import { Location } from '@angular/common' | ||
4 | import { getParameterByName, immutableAssign } from '@app/shared/misc/utils' | ||
5 | import { NotificationsService } from 'angular2-notifications' | ||
6 | import 'rxjs/add/observable/from' | ||
7 | import 'rxjs/add/operator/concatAll' | ||
8 | import { AuthService } from '../../core/auth' | ||
9 | import { ConfirmService } from '../../core/confirm' | ||
10 | import { AbstractVideoList } from '../../shared/video/abstract-video-list' | ||
11 | import { VideoService } from '../../shared/video/video.service' | ||
12 | import { Account } from '@app/shared/account/account.model' | ||
13 | import { AccountService } from '@app/shared/account/account.service' | ||
14 | |||
15 | @Component({ | ||
16 | selector: 'my-account-about', | ||
17 | templateUrl: './account-about.component.html', | ||
18 | styleUrls: [ './account-about.component.scss' ] | ||
19 | }) | ||
20 | export class AccountAboutComponent implements OnInit { | ||
21 | account: Account | ||
22 | |||
23 | constructor ( | ||
24 | protected route: ActivatedRoute, | ||
25 | private accountService: AccountService | ||
26 | ) { } | ||
27 | |||
28 | ngOnInit () { | ||
29 | // Parent get the account for us | ||
30 | this.accountService.accountLoaded | ||
31 | .subscribe(account => this.account = account) | ||
32 | } | ||
33 | |||
34 | getAccountDescription () { | ||
35 | if (this.account.description) return this.account.description | ||
36 | |||
37 | return 'No description' | ||
38 | } | ||
39 | } | ||
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html new file mode 100644 index 000000000..d20b40c60 --- /dev/null +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html | |||
@@ -0,0 +1,11 @@ | |||
1 | <div *ngIf="account" class="row"> | ||
2 | <a | ||
3 | *ngFor="let videoChannel of videoChannels" [routerLink]="[ '/video-channels', videoChannel.uuid ]" | ||
4 | class="video-channel" title="See this video channel" | ||
5 | > | ||
6 | <img [src]="videoChannel.avatarUrl" alt="Avatar" /> | ||
7 | |||
8 | <div class="video-channel-display-name">{{ videoChannel.displayName }}</div> | ||
9 | <div class="video-channel-followers">{{ videoChannel.followersCount }} subscribers</div> | ||
10 | </a> | ||
11 | </div> \ No newline at end of file | ||
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss new file mode 100644 index 000000000..c9c7fa8eb --- /dev/null +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss | |||
@@ -0,0 +1,30 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | .row { | ||
5 | text-align: center; | ||
6 | } | ||
7 | |||
8 | a.video-channel { | ||
9 | @include disable-default-a-behaviour; | ||
10 | |||
11 | display: inline-block; | ||
12 | text-align: center; | ||
13 | color: #000; | ||
14 | margin: 10px 30px; | ||
15 | |||
16 | img { | ||
17 | @include avatar(80px); | ||
18 | |||
19 | margin-bottom: 10px; | ||
20 | } | ||
21 | |||
22 | .video-channel-display-name { | ||
23 | font-size: 20px; | ||
24 | font-weight: $font-bold; | ||
25 | } | ||
26 | |||
27 | .video-channel-followers { | ||
28 | font-size: 15px; | ||
29 | } | ||
30 | } \ No newline at end of file | ||
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts new file mode 100644 index 000000000..4c5782f9d --- /dev/null +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts | |||
@@ -0,0 +1,33 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | ||
2 | import { ActivatedRoute } from '@angular/router' | ||
3 | import 'rxjs/add/observable/from' | ||
4 | import 'rxjs/add/operator/concatAll' | ||
5 | import { Account } from '@app/shared/account/account.model' | ||
6 | import { AccountService } from '@app/shared/account/account.service' | ||
7 | import { VideoChannel } from '../../../../../shared/models/videos' | ||
8 | import { VideoChannelService } from '@app/shared/video-channel/video-channel.service' | ||
9 | |||
10 | @Component({ | ||
11 | selector: 'my-account-video-channels', | ||
12 | templateUrl: './account-video-channels.component.html', | ||
13 | styleUrls: [ './account-video-channels.component.scss' ] | ||
14 | }) | ||
15 | export class AccountVideoChannelsComponent implements OnInit { | ||
16 | account: Account | ||
17 | videoChannels: VideoChannel[] = [] | ||
18 | |||
19 | constructor ( | ||
20 | protected route: ActivatedRoute, | ||
21 | private accountService: AccountService, | ||
22 | private videoChannelService: VideoChannelService | ||
23 | ) { } | ||
24 | |||
25 | ngOnInit () { | ||
26 | // Parent get the account for us | ||
27 | this.accountService.accountLoaded | ||
28 | .do(account => this.account = account) | ||
29 | .flatMap(account => this.videoChannelService.listAccountVideoChannels(account.id)) | ||
30 | .map(res => res.data) | ||
31 | .subscribe(videoChannels => this.videoChannels = videoChannels) | ||
32 | } | ||
33 | } | ||
diff --git a/client/src/app/+accounts/account-videos/account-videos.component.scss b/client/src/app/+accounts/account-videos/account-videos.component.scss new file mode 100644 index 000000000..2ba85c031 --- /dev/null +++ b/client/src/app/+accounts/account-videos/account-videos.component.scss | |||
@@ -0,0 +1,3 @@ | |||
1 | .title-page-single { | ||
2 | margin-top: 0; | ||
3 | } \ No newline at end of file | ||
diff --git a/client/src/app/+accounts/account-videos/account-videos.component.ts b/client/src/app/+accounts/account-videos/account-videos.component.ts new file mode 100644 index 000000000..6c0f0bb52 --- /dev/null +++ b/client/src/app/+accounts/account-videos/account-videos.component.ts | |||
@@ -0,0 +1,71 @@ | |||
1 | import { Component, OnDestroy, OnInit } 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 { NotificationsService } from 'angular2-notifications' | ||
6 | import 'rxjs/add/observable/from' | ||
7 | import 'rxjs/add/operator/concatAll' | ||
8 | import { AuthService } from '../../core/auth' | ||
9 | import { ConfirmService } from '../../core/confirm' | ||
10 | import { AbstractVideoList } from '../../shared/video/abstract-video-list' | ||
11 | import { VideoService } from '../../shared/video/video.service' | ||
12 | import { Account } from '@app/shared/account/account.model' | ||
13 | import { AccountService } from '@app/shared/account/account.service' | ||
14 | |||
15 | @Component({ | ||
16 | selector: 'my-account-videos', | ||
17 | templateUrl: '../../shared/video/abstract-video-list.html', | ||
18 | styleUrls: [ | ||
19 | '../../shared/video/abstract-video-list.scss', | ||
20 | './account-videos.component.scss' | ||
21 | ] | ||
22 | }) | ||
23 | export class AccountVideosComponent extends AbstractVideoList implements OnInit, OnDestroy { | ||
24 | titlePage = 'Published videos' | ||
25 | marginContent = false // Disable margin | ||
26 | currentRoute = '/account/videos' | ||
27 | loadOnInit = false | ||
28 | |||
29 | private account: Account | ||
30 | |||
31 | constructor ( | ||
32 | protected router: Router, | ||
33 | protected route: ActivatedRoute, | ||
34 | protected authService: AuthService, | ||
35 | protected notificationsService: NotificationsService, | ||
36 | protected confirmService: ConfirmService, | ||
37 | protected location: Location, | ||
38 | private accountService: AccountService, | ||
39 | private videoService: VideoService | ||
40 | ) { | ||
41 | super() | ||
42 | } | ||
43 | |||
44 | ngOnInit () { | ||
45 | super.ngOnInit() | ||
46 | |||
47 | // Parent get the account for us | ||
48 | this.accountService.accountLoaded | ||
49 | .subscribe(account => { | ||
50 | this.account = account | ||
51 | this.currentRoute = '/account/' + this.account.id + '/videos' | ||
52 | |||
53 | this.loadMoreVideos(this.pagination.currentPage) | ||
54 | this.generateSyndicationList() | ||
55 | }) | ||
56 | } | ||
57 | |||
58 | ngOnDestroy () { | ||
59 | super.ngOnDestroy() | ||
60 | } | ||
61 | |||
62 | getVideosObservable (page: number) { | ||
63 | const newPagination = immutableAssign(this.pagination, { currentPage: page }) | ||
64 | |||
65 | return this.videoService.getAccountVideos(this.account, newPagination, this.sort) | ||
66 | } | ||
67 | |||
68 | generateSyndicationList () { | ||
69 | this.syndicationItems = this.videoService.getAccountFeedUrls(this.account.id) | ||
70 | } | ||
71 | } | ||
diff --git a/client/src/app/+accounts/accounts-routing.module.ts b/client/src/app/+accounts/accounts-routing.module.ts new file mode 100644 index 000000000..ffe606b43 --- /dev/null +++ b/client/src/app/+accounts/accounts-routing.module.ts | |||
@@ -0,0 +1,55 @@ | |||
1 | import { NgModule } from '@angular/core' | ||
2 | import { RouterModule, Routes } from '@angular/router' | ||
3 | import { MetaGuard } from '@ngx-meta/core' | ||
4 | import { AccountsComponent } from './accounts.component' | ||
5 | import { AccountVideosComponent } from './account-videos/account-videos.component' | ||
6 | import { AccountAboutComponent } from './account-about/account-about.component' | ||
7 | import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component' | ||
8 | |||
9 | const accountsRoutes: Routes = [ | ||
10 | { | ||
11 | path: ':accountId', | ||
12 | component: AccountsComponent, | ||
13 | canActivateChild: [ MetaGuard ], | ||
14 | children: [ | ||
15 | { | ||
16 | path: '', | ||
17 | redirectTo: 'videos', | ||
18 | pathMatch: 'full' | ||
19 | }, | ||
20 | { | ||
21 | path: 'videos', | ||
22 | component: AccountVideosComponent, | ||
23 | data: { | ||
24 | meta: { | ||
25 | title: 'Account videos' | ||
26 | } | ||
27 | } | ||
28 | }, | ||
29 | { | ||
30 | path: 'video-channels', | ||
31 | component: AccountVideoChannelsComponent, | ||
32 | data: { | ||
33 | meta: { | ||
34 | title: 'Account video channels' | ||
35 | } | ||
36 | } | ||
37 | }, | ||
38 | { | ||
39 | path: 'about', | ||
40 | component: AccountAboutComponent, | ||
41 | data: { | ||
42 | meta: { | ||
43 | title: 'About account' | ||
44 | } | ||
45 | } | ||
46 | } | ||
47 | ] | ||
48 | } | ||
49 | ] | ||
50 | |||
51 | @NgModule({ | ||
52 | imports: [ RouterModule.forChild(accountsRoutes) ], | ||
53 | exports: [ RouterModule ] | ||
54 | }) | ||
55 | export class AccountsRoutingModule {} | ||
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html new file mode 100644 index 000000000..549676e5a --- /dev/null +++ b/client/src/app/+accounts/accounts.component.html | |||
@@ -0,0 +1,25 @@ | |||
1 | <div *ngIf="account" class="row"> | ||
2 | <div class="sub-menu"> | ||
3 | |||
4 | <div class="actor"> | ||
5 | <img [src]="account.avatarUrl" alt="Avatar" /> | ||
6 | |||
7 | <div class="actor-info"> | ||
8 | <div class="actor-display-name">{{ account.displayName }}</div> | ||
9 | <div class="actor-followers">{{ account.followersCount }} subscribers</div> | ||
10 | </div> | ||
11 | </div> | ||
12 | |||
13 | <div class="links"> | ||
14 | <a routerLink="videos" routerLinkActive="active" class="title-page">Videos</a> | ||
15 | |||
16 | <a routerLink="video-channels" routerLinkActive="active" class="title-page">Video channels</a> | ||
17 | |||
18 | <a routerLink="about" routerLinkActive="active" class="title-page">About</a> | ||
19 | </div> | ||
20 | </div> | ||
21 | |||
22 | <div class="margin-content"> | ||
23 | <router-outlet></router-outlet> | ||
24 | </div> | ||
25 | </div> | ||
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss new file mode 100644 index 000000000..909b65bc7 --- /dev/null +++ b/client/src/app/+accounts/accounts.component.scss | |||
@@ -0,0 +1,6 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | .sub-menu { | ||
5 | @include sub-menu-with-actor; | ||
6 | } \ No newline at end of file | ||
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts new file mode 100644 index 000000000..1298803c3 --- /dev/null +++ b/client/src/app/+accounts/accounts.component.ts | |||
@@ -0,0 +1,24 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | ||
2 | import { ActivatedRoute } from '@angular/router' | ||
3 | import { AccountService } from '@app/shared/account/account.service' | ||
4 | import { Account } from '@app/shared/account/account.model' | ||
5 | |||
6 | @Component({ | ||
7 | templateUrl: './accounts.component.html', | ||
8 | styleUrls: [ './accounts.component.scss' ] | ||
9 | }) | ||
10 | export class AccountsComponent implements OnInit { | ||
11 | account: Account | ||
12 | |||
13 | constructor ( | ||
14 | private route: ActivatedRoute, | ||
15 | private accountService: AccountService | ||
16 | ) {} | ||
17 | |||
18 | ngOnInit () { | ||
19 | const accountId = parseInt(this.route.snapshot.params['accountId'], 10) | ||
20 | |||
21 | this.accountService.getAccount(accountId) | ||
22 | .subscribe(account => this.account = account) | ||
23 | } | ||
24 | } | ||
diff --git a/client/src/app/+accounts/accounts.module.ts b/client/src/app/+accounts/accounts.module.ts new file mode 100644 index 000000000..8e679822a --- /dev/null +++ b/client/src/app/+accounts/accounts.module.ts | |||
@@ -0,0 +1,28 @@ | |||
1 | import { NgModule } from '@angular/core' | ||
2 | import { SharedModule } from '../shared' | ||
3 | import { AccountsRoutingModule } from './accounts-routing.module' | ||
4 | import { AccountsComponent } from './accounts.component' | ||
5 | import { AccountVideosComponent } from './account-videos/account-videos.component' | ||
6 | import { AccountAboutComponent } from './account-about/account-about.component' | ||
7 | import { AccountVideoChannelsComponent } from './account-video-channels/account-video-channels.component' | ||
8 | |||
9 | @NgModule({ | ||
10 | imports: [ | ||
11 | AccountsRoutingModule, | ||
12 | SharedModule | ||
13 | ], | ||
14 | |||
15 | declarations: [ | ||
16 | AccountsComponent, | ||
17 | AccountVideosComponent, | ||
18 | AccountVideoChannelsComponent, | ||
19 | AccountAboutComponent | ||
20 | ], | ||
21 | |||
22 | exports: [ | ||
23 | AccountsComponent | ||
24 | ], | ||
25 | |||
26 | providers: [] | ||
27 | }) | ||
28 | export class AccountsModule { } | ||
diff --git a/client/src/app/+accounts/index.ts b/client/src/app/+accounts/index.ts new file mode 100644 index 000000000..4dfb6f586 --- /dev/null +++ b/client/src/app/+accounts/index.ts | |||
@@ -0,0 +1,3 @@ | |||
1 | export * from './accounts-routing.module' | ||
2 | export * from './accounts.component' | ||
3 | export * from './accounts.module' | ||