aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+my-account
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+my-account')
-rw-r--r--client/src/app/+my-account/my-account-history/my-account-history.component.html16
-rw-r--r--client/src/app/+my-account/my-account-history/my-account-history.component.ts9
-rw-r--r--client/src/app/+my-account/my-account-routing.module.ts8
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.html75
-rw-r--r--client/src/app/+my-account/my-account-videos/my-account-videos.component.ts47
5 files changed, 65 insertions, 90 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
index 2349f02f5..00ee5fbd1 100644
--- 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
@@ -13,16 +13,14 @@
13 13
14<div class="no-history" i18n *ngIf="pagination.totalItems === 0">You don't have videos history yet.</div> 14<div class="no-history" i18n *ngIf="pagination.totalItems === 0">You don't have videos history yet.</div>
15 15
16<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" class="videos" #videosElement> 16<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" class="videos">
17 <div *ngFor="let videos of videoPages;" class="videos-page"> 17 <div class="video" *ngFor="let video of videos">
18 <div class="video" *ngFor="let video of videos"> 18 <my-video-thumbnail [video]="video"></my-video-thumbnail>
19 <my-video-thumbnail [video]="video"></my-video-thumbnail>
20 19
21 <div class="video-info"> 20 <div class="video-info">
22 <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a> 21 <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
23 <span i18n class="video-info-date-views">{{ video.views | myNumberFormatter }} views</span> 22 <span i18n class="video-info-date-views">{{ video.views | myNumberFormatter }} views</span>
24 <a tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a> 23 <a tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a>
25 </div>
26 </div> 24 </div>
27 </div> 25 </div>
28</div> 26</div>
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
index 394091bad..73340d21a 100644
--- 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
@@ -1,6 +1,5 @@
1import { Component, OnDestroy, OnInit } from '@angular/core' 1import { Component, OnDestroy, OnInit } from '@angular/core'
2import { ActivatedRoute, Router } from '@angular/router' 2import { ActivatedRoute, Router } from '@angular/router'
3import { Location } from '@angular/common'
4import { immutableAssign } from '@app/shared/misc/utils' 3import { immutableAssign } from '@app/shared/misc/utils'
5import { ComponentPagination } from '@app/shared/rest/component-pagination.model' 4import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
6import { AuthService } from '../../core/auth' 5import { AuthService } from '../../core/auth'
@@ -11,7 +10,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
11import { ScreenService } from '@app/shared/misc/screen.service' 10import { ScreenService } from '@app/shared/misc/screen.service'
12import { UserHistoryService } from '@app/shared/users/user-history.service' 11import { UserHistoryService } from '@app/shared/users/user-history.service'
13import { UserService } from '@app/shared' 12import { UserService } from '@app/shared'
14import { Notifier } from '@app/core' 13import { Notifier, ServerService } from '@app/core'
15 14
16@Component({ 15@Component({
17 selector: 'my-account-history', 16 selector: 'my-account-history',
@@ -20,7 +19,6 @@ import { Notifier } from '@app/core'
20}) 19})
21export class MyAccountHistoryComponent extends AbstractVideoList implements OnInit, OnDestroy { 20export class MyAccountHistoryComponent extends AbstractVideoList implements OnInit, OnDestroy {
22 titlePage: string 21 titlePage: string
23 currentRoute = '/my-account/history/videos'
24 pagination: ComponentPagination = { 22 pagination: ComponentPagination = {
25 currentPage: 1, 23 currentPage: 1,
26 itemsPerPage: 5, 24 itemsPerPage: 5,
@@ -28,16 +26,13 @@ export class MyAccountHistoryComponent extends AbstractVideoList implements OnIn
28 } 26 }
29 videosHistoryEnabled: boolean 27 videosHistoryEnabled: boolean
30 28
31 protected baseVideoWidth = -1
32 protected baseVideoHeight = 155
33
34 constructor ( 29 constructor (
35 protected router: Router, 30 protected router: Router,
31 protected serverService: ServerService,
36 protected route: ActivatedRoute, 32 protected route: ActivatedRoute,
37 protected authService: AuthService, 33 protected authService: AuthService,
38 protected userService: UserService, 34 protected userService: UserService,
39 protected notifier: Notifier, 35 protected notifier: Notifier,
40 protected location: Location,
41 protected screenService: ScreenService, 36 protected screenService: ScreenService,
42 protected i18n: I18n, 37 protected i18n: I18n,
43 private confirmService: ConfirmService, 38 private confirmService: ConfirmService,
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 07557a029..018d6f996 100644
--- a/client/src/app/+my-account/my-account-routing.module.ts
+++ b/client/src/app/+my-account/my-account-routing.module.ts
@@ -118,6 +118,10 @@ const myAccountRoutes: Routes = [
118 data: { 118 data: {
119 meta: { 119 meta: {
120 title: 'Account videos' 120 title: 'Account videos'
121 },
122 reuse: {
123 enabled: true,
124 key: 'my-account-videos-list'
121 } 125 }
122 } 126 }
123 }, 127 },
@@ -172,6 +176,10 @@ const myAccountRoutes: Routes = [
172 data: { 176 data: {
173 meta: { 177 meta: {
174 title: 'Videos history' 178 title: 'Videos history'
179 },
180 reuse: {
181 enabled: true,
182 key: 'my-videos-history-list'
175 } 183 }
176 } 184 }
177 }, 185 },
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index b09e845ac..1f3ac0005 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -1,54 +1,47 @@
1<div i18n *ngIf="pagination.totalItems === 0">No results.</div> 1<div i18n *ngIf="pagination.totalItems === 0">No results.</div>
2 2
3<div 3<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" class="videos">
4 myInfiniteScroller 4 <div class="video" *ngFor="let video of videos; let i = index">
5 [pageHeight]="pageHeight" 5 <div class="checkbox-container">
6 (nearOfTop)="onNearOfTop()" (nearOfBottom)="onNearOfBottom()" (pageChanged)="onPageChanged($event)" 6 <my-peertube-checkbox [inputName]="'video-check-' + video.id" [(ngModel)]="checkedVideos[video.id]"></my-peertube-checkbox>
7 class="videos" #videosElement 7 </div>
8>
9 <div *ngFor="let videos of videoPages; let i = index" class="videos-page">
10 <div class="video" *ngFor="let video of videos; let j = index">
11 <div class="checkbox-container">
12 <my-peertube-checkbox [inputName]="'video-check-' + video.id" [(ngModel)]="checkedVideos[video.id]"></my-peertube-checkbox>
13 </div>
14 8
15 <my-video-thumbnail [video]="video"></my-video-thumbnail> 9 <my-video-thumbnail [video]="video"></my-video-thumbnail>
16 10
17 <div class="video-info"> 11 <div class="video-info">
18 <a class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a> 12 <a class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
19 <span i18n class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span> 13 <span i18n class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
20 <div class="video-info-privacy">{{ video.privacy.label }}{{ getStateLabel(video) }}</div> 14 <div class="video-info-privacy">{{ video.privacy.label }}{{ getStateLabel(video) }}</div>
21 <div *ngIf="video.blacklisted" class="video-info-blacklisted"> 15 <div *ngIf="video.blacklisted" class="video-info-blacklisted">
22 <span class="blacklisted-label" i18n>Blacklisted</span> 16 <span class="blacklisted-label" i18n>Blacklisted</span>
23 <span class="blacklisted-reason" *ngIf="video.blacklistedReason">{{ video.blacklistedReason }}</span> 17 <span class="blacklisted-reason" *ngIf="video.blacklistedReason">{{ video.blacklistedReason }}</span>
24 </div>
25 </div> 18 </div>
19 </div>
26 20
27 <!-- Display only once --> 21 <!-- Display only once -->
28 <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0 && j === 0"> 22 <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0">
29 <div class="action-selection-mode-child"> 23 <div class="action-selection-mode-child">
30 <span i18n class="action-button action-button-cancel-selection" (click)="abortSelectionMode()"> 24 <span i18n class="action-button action-button-cancel-selection" (click)="abortSelectionMode()">
31 Cancel 25 Cancel
32 </span> 26 </span>
33 27
34 <span class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()"> 28 <span class="action-button action-button-delete-selection" (click)="deleteSelectedVideos()">
35 <my-global-icon iconName="delete"></my-global-icon> 29 <my-global-icon iconName="delete"></my-global-icon>
36 <ng-container i18n>Delete</ng-container> 30 <ng-container i18n>Delete</ng-container>
37 </span> 31 </span>
38 </div>
39 </div> 32 </div>
33 </div>
40 34
41 <div class="video-buttons" *ngIf="isInSelectionMode() === false"> 35 <div class="video-buttons" *ngIf="isInSelectionMode() === false">
42 <my-delete-button (click)="deleteVideo(video)"></my-delete-button> 36 <my-delete-button (click)="deleteVideo(video)"></my-delete-button>
43 37
44 <my-edit-button [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button> 38 <my-edit-button [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button>
45 39
46 <my-button i18n-label label="Change ownership" 40 <my-button i18n-label label="Change ownership"
47 className="action-button-change-ownership" 41 className="action-button-change-ownership"
48 icon="im-with-her" 42 icon="im-with-her"
49 (click)="changeOwnership($event, video)" 43 (click)="changeOwnership($event, video)"
50 ></my-button> 44 ></my-button>
51 </div>
52 </div> 45 </div>
53 </div> 46 </div>
54</div> 47</div>
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
index 41608f796..eb5096a5e 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
@@ -1,11 +1,10 @@
1import { from as observableFrom, Observable } from 'rxjs' 1import { concat, Observable } from 'rxjs'
2import { concatAll, tap } from 'rxjs/operators' 2import { tap, toArray } from 'rxjs/operators'
3import { Component, OnDestroy, OnInit, Inject, LOCALE_ID, ViewChild } from '@angular/core' 3import { Component, Inject, LOCALE_ID, OnDestroy, OnInit, ViewChild } from '@angular/core'
4import { ActivatedRoute, Router } from '@angular/router' 4import { ActivatedRoute, Router } from '@angular/router'
5import { Location } from '@angular/common'
6import { immutableAssign } from '@app/shared/misc/utils' 5import { immutableAssign } from '@app/shared/misc/utils'
7import { ComponentPagination } from '@app/shared/rest/component-pagination.model' 6import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
8import { Notifier } from '@app/core' 7import { Notifier, ServerService } from '@app/core'
9import { AuthService } from '../../core/auth' 8import { AuthService } from '../../core/auth'
10import { ConfirmService } from '../../core/confirm' 9import { ConfirmService } from '../../core/confirm'
11import { AbstractVideoList } from '../../shared/video/abstract-video-list' 10import { AbstractVideoList } from '../../shared/video/abstract-video-list'
@@ -22,8 +21,9 @@ import { VideoChangeOwnershipComponent } from './video-change-ownership/video-ch
22 styleUrls: [ './my-account-videos.component.scss' ] 21 styleUrls: [ './my-account-videos.component.scss' ]
23}) 22})
24export class MyAccountVideosComponent extends AbstractVideoList implements OnInit, OnDestroy { 23export class MyAccountVideosComponent extends AbstractVideoList implements OnInit, OnDestroy {
24 @ViewChild('videoChangeOwnershipModal') videoChangeOwnershipModal: VideoChangeOwnershipComponent
25
25 titlePage: string 26 titlePage: string
26 currentRoute = '/my-account/videos'
27 checkedVideos: { [ id: number ]: boolean } = {} 27 checkedVideos: { [ id: number ]: boolean } = {}
28 pagination: ComponentPagination = { 28 pagination: ComponentPagination = {
29 currentPage: 1, 29 currentPage: 1,
@@ -31,19 +31,14 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
31 totalItems: null 31 totalItems: null
32 } 32 }
33 33
34 protected baseVideoWidth = -1
35 protected baseVideoHeight = 155
36
37 @ViewChild('videoChangeOwnershipModal') videoChangeOwnershipModal: VideoChangeOwnershipComponent
38
39 constructor ( 34 constructor (
40 protected router: Router, 35 protected router: Router,
36 protected serverService: ServerService,
41 protected route: ActivatedRoute, 37 protected route: ActivatedRoute,
42 protected authService: AuthService, 38 protected authService: AuthService,
43 protected notifier: Notifier, 39 protected notifier: Notifier,
44 protected location: Location,
45 protected screenService: ScreenService, 40 protected screenService: ScreenService,
46 protected i18n: I18n, 41 private i18n: I18n,
47 private confirmService: ConfirmService, 42 private confirmService: ConfirmService,
48 private videoService: VideoService, 43 private videoService: VideoService,
49 @Inject(LOCALE_ID) private localeId: string 44 @Inject(LOCALE_ID) private localeId: string
@@ -93,19 +88,18 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
93 const observables: Observable<any>[] = [] 88 const observables: Observable<any>[] = []
94 for (const videoId of toDeleteVideosIds) { 89 for (const videoId of toDeleteVideosIds) {
95 const o = this.videoService.removeVideo(videoId) 90 const o = this.videoService.removeVideo(videoId)
96 .pipe(tap(() => this.spliceVideosById(videoId))) 91 .pipe(tap(() => this.removeVideoFromArray(videoId)))
97 92
98 observables.push(o) 93 observables.push(o)
99 } 94 }
100 95
101 observableFrom(observables) 96 concat(...observables)
102 .pipe(concatAll()) 97 .pipe(toArray())
103 .subscribe( 98 .subscribe(
104 res => { 99 () => {
105 this.notifier.success(this.i18n('{{deleteLength}} videos deleted.', { deleteLength: toDeleteVideosIds.length })) 100 this.notifier.success(this.i18n('{{deleteLength}} videos deleted.', { deleteLength: toDeleteVideosIds.length }))
106 101
107 this.abortSelectionMode() 102 this.abortSelectionMode()
108 this.reloadVideos()
109 }, 103 },
110 104
111 err => this.notifier.error(err.message) 105 err => this.notifier.error(err.message)
@@ -156,20 +150,7 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
156 return ' - ' + suffix 150 return ' - ' + suffix
157 } 151 }
158 152
159 protected buildVideoHeight () { 153 private removeVideoFromArray (id: number) {
160 // In account videos, the video height is fixed 154 this.videos = this.videos.filter(v => v.id !== id)
161 return this.baseVideoHeight
162 }
163
164 private spliceVideosById (id: number) {
165 for (const key of Object.keys(this.loadedPages)) {
166 const videos: Video[] = this.loadedPages[ key ]
167 const index = videos.findIndex(v => v.id === id)
168
169 if (index !== -1) {
170 videos.splice(index, 1)
171 return
172 }
173 }
174 } 155 }
175} 156}