diff options
Diffstat (limited to 'client/src/app/+my-library/my-history')
3 files changed, 189 insertions, 0 deletions
diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html new file mode 100644 index 000000000..cff46a41d --- /dev/null +++ b/client/src/app/+my-library/my-history/my-history.component.html | |||
@@ -0,0 +1,28 @@ | |||
1 | <h1> | ||
2 | <my-global-icon iconName="history" aria-hidden="true"></my-global-icon> | ||
3 | <ng-container i18n>My history</ng-container> | ||
4 | </h1> | ||
5 | |||
6 | <div class="top-buttons"> | ||
7 | <div class="history-switch"> | ||
8 | <p-inputSwitch [(ngModel)]="videosHistoryEnabled" (ngModelChange)="onVideosHistoryChange()"></p-inputSwitch> | ||
9 | <label i18n>Video history</label> | ||
10 | </div> | ||
11 | |||
12 | <button class="delete-history" (click)="deleteHistory()" i18n> | ||
13 | <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon> | ||
14 | Delete history | ||
15 | </button> | ||
16 | </div> | ||
17 | |||
18 | |||
19 | <div class="no-history" i18n *ngIf="pagination.totalItems === 0">You don't have any video history yet.</div> | ||
20 | |||
21 | <div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()" class="videos"> | ||
22 | <div class="video" *ngFor="let video of videos"> | ||
23 | <my-video-miniature | ||
24 | [video]="video" [displayAsRow]="true" | ||
25 | (videoRemoved)="removeVideoFromArray(video)" (videoBlocked)="removeVideoFromArray(video)" | ||
26 | ></my-video-miniature> | ||
27 | </div> | ||
28 | </div> | ||
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss new file mode 100644 index 000000000..9eeeaf310 --- /dev/null +++ b/client/src/app/+my-library/my-history/my-history.component.scss | |||
@@ -0,0 +1,59 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | |||
4 | .no-history { | ||
5 | display: flex; | ||
6 | justify-content: center; | ||
7 | margin-top: 50px; | ||
8 | font-weight: $font-semibold; | ||
9 | font-size: 16px; | ||
10 | } | ||
11 | |||
12 | .top-buttons { | ||
13 | margin-bottom: 20px; | ||
14 | display: flex; | ||
15 | align-items: center; | ||
16 | flex-wrap: wrap; | ||
17 | |||
18 | .history-switch { | ||
19 | display: flex; | ||
20 | flex-grow: 1; | ||
21 | |||
22 | label { | ||
23 | margin: 0 0 0 5px; | ||
24 | } | ||
25 | } | ||
26 | |||
27 | .delete-history { | ||
28 | @include peertube-button; | ||
29 | @include grey-button; | ||
30 | @include button-with-icon; | ||
31 | |||
32 | font-size: 15px; | ||
33 | } | ||
34 | } | ||
35 | |||
36 | .video { | ||
37 | @include row-blocks; | ||
38 | |||
39 | .my-video-miniature { | ||
40 | flex-grow: 1; | ||
41 | } | ||
42 | } | ||
43 | |||
44 | @media screen and (max-width: $mobile-view) { | ||
45 | .top-buttons { | ||
46 | .history-switch label, .delete-history { | ||
47 | @include ellipsis; | ||
48 | } | ||
49 | |||
50 | .history-switch label { | ||
51 | width: 60%; | ||
52 | } | ||
53 | |||
54 | .delete-history { | ||
55 | margin-left: auto; | ||
56 | max-width: 32%; | ||
57 | } | ||
58 | } | ||
59 | } | ||
diff --git a/client/src/app/+my-library/my-history/my-history.component.ts b/client/src/app/+my-library/my-history/my-history.component.ts new file mode 100644 index 000000000..e11f05c47 --- /dev/null +++ b/client/src/app/+my-library/my-history/my-history.component.ts | |||
@@ -0,0 +1,102 @@ | |||
1 | import { Component, OnDestroy, OnInit } from '@angular/core' | ||
2 | import { ActivatedRoute, Router } from '@angular/router' | ||
3 | import { | ||
4 | AuthService, | ||
5 | ComponentPagination, | ||
6 | ConfirmService, | ||
7 | LocalStorageService, | ||
8 | Notifier, | ||
9 | ScreenService, | ||
10 | ServerService, | ||
11 | UserService | ||
12 | } from '@app/core' | ||
13 | import { immutableAssign } from '@app/helpers' | ||
14 | import { UserHistoryService } from '@app/shared/shared-main' | ||
15 | import { AbstractVideoList } from '@app/shared/shared-video-miniature' | ||
16 | |||
17 | @Component({ | ||
18 | templateUrl: './my-history.component.html', | ||
19 | styleUrls: [ './my-history.component.scss' ] | ||
20 | }) | ||
21 | export class MyHistoryComponent extends AbstractVideoList implements OnInit, OnDestroy { | ||
22 | titlePage: string | ||
23 | pagination: ComponentPagination = { | ||
24 | currentPage: 1, | ||
25 | itemsPerPage: 5, | ||
26 | totalItems: null | ||
27 | } | ||
28 | videosHistoryEnabled: boolean | ||
29 | |||
30 | constructor ( | ||
31 | protected router: Router, | ||
32 | protected serverService: ServerService, | ||
33 | protected route: ActivatedRoute, | ||
34 | protected authService: AuthService, | ||
35 | protected userService: UserService, | ||
36 | protected notifier: Notifier, | ||
37 | protected screenService: ScreenService, | ||
38 | protected storageService: LocalStorageService, | ||
39 | private confirmService: ConfirmService, | ||
40 | private userHistoryService: UserHistoryService | ||
41 | ) { | ||
42 | super() | ||
43 | |||
44 | this.titlePage = $localize`My videos history` | ||
45 | } | ||
46 | |||
47 | ngOnInit () { | ||
48 | super.ngOnInit() | ||
49 | |||
50 | this.videosHistoryEnabled = this.authService.getUser().videosHistoryEnabled | ||
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 | |||
67 | onVideosHistoryChange () { | ||
68 | this.userService.updateMyProfile({ videosHistoryEnabled: this.videosHistoryEnabled }) | ||
69 | .subscribe( | ||
70 | () => { | ||
71 | const message = this.videosHistoryEnabled === true ? | ||
72 | $localize`Videos history is enabled` : | ||
73 | $localize`Videos history is disabled` | ||
74 | |||
75 | this.notifier.success(message) | ||
76 | |||
77 | this.authService.refreshUserInformation() | ||
78 | }, | ||
79 | |||
80 | err => this.notifier.error(err.message) | ||
81 | ) | ||
82 | } | ||
83 | |||
84 | async deleteHistory () { | ||
85 | const title = $localize`Delete videos history` | ||
86 | const message = $localize`Are you sure you want to delete all your videos history?` | ||
87 | |||
88 | const res = await this.confirmService.confirm(message, title) | ||
89 | if (res !== true) return | ||
90 | |||
91 | this.userHistoryService.deleteUserVideosHistory() | ||
92 | .subscribe( | ||
93 | () => { | ||
94 | this.notifier.success($localize`Videos history deleted`) | ||
95 | |||
96 | this.reloadVideos() | ||
97 | }, | ||
98 | |||
99 | err => this.notifier.error(err.message) | ||
100 | ) | ||
101 | } | ||
102 | } | ||