aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-account
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-12-18 09:31:09 +0100
committerChocobozzz <me@florianbigard.com>2018-12-18 11:35:51 +0100
commit80bfd33c0bf910e2cfdd3270b14ba9eddd90e2e8 (patch)
tree80cd14e2f503db64ebec5fcfbb94ce5db25f46c9 /client/src/app/+my-account
parent8b9a525a180cc9f3a98c334cc052dcfc8f36dcd4 (diff)
downloadPeerTube-80bfd33c0bf910e2cfdd3270b14ba9eddd90e2e8.tar.gz
PeerTube-80bfd33c0bf910e2cfdd3270b14ba9eddd90e2e8.tar.zst
PeerTube-80bfd33c0bf910e2cfdd3270b14ba9eddd90e2e8.zip
Add history page on client
Diffstat (limited to 'client/src/app/+my-account')
-rw-r--r--client/src/app/+my-account/my-account-history/my-account-history.component.html15
-rw-r--r--client/src/app/+my-account/my-account-history/my-account-history.component.scss68
-rw-r--r--client/src/app/+my-account/my-account-history/my-account-history.component.ts66
-rw-r--r--client/src/app/+my-account/my-account-routing.module.ts10
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.scss2
-rw-r--r--client/src/app/+my-account/my-account.component.ts6
-rw-r--r--client/src/app/+my-account/my-account.module.ts4
7 files changed, 168 insertions, 3 deletions
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.html b/client/src/app/+my-account/my-account-history/my-account-history.component.html
new file mode 100644
index 000000000..653b33f89
--- /dev/null
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.html
@@ -0,0 +1,15 @@
1<div i18n *ngIf="pagination.totalItems === 0">You don't have history yet.</div>
2
3<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" class="videos" #videosElement>
4 <div *ngFor="let videos of videoPages;" class="videos-page">
5 <div class="video" *ngFor="let video of videos">
6 <my-video-thumbnail [video]="video"></my-video-thumbnail>
7
8 <div class="video-info">
9 <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
10 <span i18n class="video-info-date-views">{{ video.views | myNumberFormatter }} views</span>
11 <a tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a>
12 </div>
13 </div>
14 </div>
15</div>
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.scss b/client/src/app/+my-account/my-account-history/my-account-history.component.scss
new file mode 100644
index 000000000..115bb0e5c
--- /dev/null
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.scss
@@ -0,0 +1,68 @@
1@import '_variables';
2@import '_mixins';
3
4.video {
5 @include row-blocks;
6
7 my-video-thumbnail {
8 margin-right: 10px;
9 }
10
11 .video-info {
12 flex-grow: 1;
13
14 .video-info-name {
15 @include disable-default-a-behaviour;
16
17 color: var(--mainForegroundColor);
18 display: block;
19 width: fit-content;
20 font-size: 18px;
21 font-weight: $font-semibold;
22 }
23
24 .video-info-date-views {
25 font-size: 14px;
26 }
27
28 .video-info-account {
29 @include disable-default-a-behaviour;
30
31 display: block;
32 width: fit-content;
33 overflow: hidden;
34 text-overflow: ellipsis;
35 white-space: nowrap;
36 font-size: 14px;
37 color: #585858;
38
39 &:hover {
40 color: #303030;
41 }
42 }
43 }
44}
45
46@media screen and (max-width: $small-view) {
47 .video {
48 flex-direction: column;
49 height: auto;
50 text-align: center;
51
52 .video-info-name {
53 margin: auto;
54 }
55
56 input[type=checkbox] {
57 display: none;
58 }
59
60 my-video-thumbnail {
61 margin-right: 0;
62 }
63
64 .video-buttons {
65 margin-top: 10px;
66 }
67 }
68}
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.ts b/client/src/app/+my-account/my-account-history/my-account-history.component.ts
new file mode 100644
index 000000000..508552167
--- /dev/null
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.ts
@@ -0,0 +1,66 @@
1import { Component, OnDestroy, OnInit } 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 { AuthService } from '../../core/auth'
8import { ConfirmService } from '../../core/confirm'
9import { AbstractVideoList } from '../../shared/video/abstract-video-list'
10import { VideoService } from '../../shared/video/video.service'
11import { I18n } from '@ngx-translate/i18n-polyfill'
12import { ScreenService } from '@app/shared/misc/screen.service'
13import { UserHistoryService } from '@app/shared/users/user-history.service'
14
15@Component({
16 selector: 'my-account-history',
17 templateUrl: './my-account-history.component.html',
18 styleUrls: [ './my-account-history.component.scss' ]
19})
20export class MyAccountHistoryComponent extends AbstractVideoList implements OnInit, OnDestroy {
21 titlePage: string
22 currentRoute = '/my-account/history/videos'
23 pagination: ComponentPagination = {
24 currentPage: 1,
25 itemsPerPage: 5,
26 totalItems: null
27 }
28
29 protected baseVideoWidth = -1
30 protected baseVideoHeight = 155
31
32 constructor (
33 protected router: Router,
34 protected route: ActivatedRoute,
35 protected authService: AuthService,
36 protected notificationsService: NotificationsService,
37 protected location: Location,
38 protected screenService: ScreenService,
39 protected i18n: I18n,
40 private confirmService: ConfirmService,
41 private videoService: VideoService,
42 private userHistoryService: UserHistoryService
43 ) {
44 super()
45
46 this.titlePage = this.i18n('My videos history')
47 }
48
49 ngOnInit () {
50 super.ngOnInit()
51 }
52
53 ngOnDestroy () {
54 super.ngOnDestroy()
55 }
56
57 getVideosObservable (page: number) {
58 const newPagination = immutableAssign(this.pagination, { currentPage: page })
59
60 return this.userHistoryService.getUserVideosHistory(newPagination)
61 }
62
63 generateSyndicationList () {
64 throw new Error('Method not implemented.')
65 }
66}
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 601e517b4..a2cbeaffc 100644
--- a/client/src/app/+my-account/my-account-routing.module.ts
+++ b/client/src/app/+my-account/my-account-routing.module.ts
@@ -13,6 +13,7 @@ import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-sub
13import { MyAccountOwnershipComponent } from '@app/+my-account/my-account-ownership/my-account-ownership.component' 13import { MyAccountOwnershipComponent } from '@app/+my-account/my-account-ownership/my-account-ownership.component'
14import { MyAccountBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-blocklist.component' 14import { MyAccountBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-blocklist.component'
15import { MyAccountServerBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-server-blocklist.component' 15import { MyAccountServerBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-server-blocklist.component'
16import { MyAccountHistoryComponent } from '@app/+my-account/my-account-history/my-account-history.component'
16 17
17const myAccountRoutes: Routes = [ 18const myAccountRoutes: Routes = [
18 { 19 {
@@ -114,6 +115,15 @@ const myAccountRoutes: Routes = [
114 title: 'Muted instances' 115 title: 'Muted instances'
115 } 116 }
116 } 117 }
118 },
119 {
120 path: 'history/videos',
121 component: MyAccountHistoryComponent,
122 data: {
123 meta: {
124 title: 'Videos history'
125 }
126 }
117 } 127 }
118 ] 128 ]
119 } 129 }
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 2db81a3fe..a735562f8 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
@@ -97,7 +97,7 @@
97 } 97 }
98} 98}
99 99
100@media screen and (max-width: 800px) { 100@media screen and (max-width: $small-view) {
101 .video { 101 .video {
102 flex-direction: column; 102 flex-direction: column;
103 height: auto; 103 height: auto;
diff --git a/client/src/app/+my-account/my-account.component.ts b/client/src/app/+my-account/my-account.component.ts
index d9381ebfa..1bac9547d 100644
--- a/client/src/app/+my-account/my-account.component.ts
+++ b/client/src/app/+my-account/my-account.component.ts
@@ -21,7 +21,7 @@ export class MyAccountComponent {
21 children: [ 21 children: [
22 { 22 {
23 label: this.i18n('My channels'), 23 label: this.i18n('My channels'),
24 routerLink: '/my-account/videos' 24 routerLink: '/my-account/video-channels'
25 }, 25 },
26 { 26 {
27 label: this.i18n('My videos'), 27 label: this.i18n('My videos'),
@@ -30,6 +30,10 @@ export class MyAccountComponent {
30 { 30 {
31 label: this.i18n('My subscriptions'), 31 label: this.i18n('My subscriptions'),
32 routerLink: '/my-account/subscriptions' 32 routerLink: '/my-account/subscriptions'
33 },
34 {
35 label: this.i18n('My history'),
36 routerLink: '/my-account/history/videos'
33 } 37 }
34 ] 38 ]
35 } 39 }
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index 017ebd57d..c05406438 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -21,6 +21,7 @@ import { MyAccountDangerZoneComponent } from '@app/+my-account/my-account-settin
21import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-subscriptions/my-account-subscriptions.component' 21import { MyAccountSubscriptionsComponent } from '@app/+my-account/my-account-subscriptions/my-account-subscriptions.component'
22import { MyAccountBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-blocklist.component' 22import { MyAccountBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-blocklist.component'
23import { MyAccountServerBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-server-blocklist.component' 23import { MyAccountServerBlocklistComponent } from '@app/+my-account/my-account-blocklist/my-account-server-blocklist.component'
24import { MyAccountHistoryComponent } from '@app/+my-account/my-account-history/my-account-history.component'
24 25
25@NgModule({ 26@NgModule({
26 imports: [ 27 imports: [
@@ -49,7 +50,8 @@ import { MyAccountServerBlocklistComponent } from '@app/+my-account/my-account-b
49 MyAccountDangerZoneComponent, 50 MyAccountDangerZoneComponent,
50 MyAccountSubscriptionsComponent, 51 MyAccountSubscriptionsComponent,
51 MyAccountBlocklistComponent, 52 MyAccountBlocklistComponent,
52 MyAccountServerBlocklistComponent 53 MyAccountServerBlocklistComponent,
54 MyAccountHistoryComponent
53 ], 55 ],
54 56
55 exports: [ 57 exports: [