aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-09-20 14:21:57 +0200
committerChocobozzz <me@florianbigard.com>2018-09-20 14:21:57 +0200
commit89724816ae79e0c4f9fba6f47267711f505ec7af (patch)
tree5ddbccde1e281f0bf3d49d5a5f63be9d66f4b4b0 /client/src/app/shared
parentd466dece0a07555b91f01fa35fcc5dcfe79d9e12 (diff)
downloadPeerTube-89724816ae79e0c4f9fba6f47267711f505ec7af.tar.gz
PeerTube-89724816ae79e0c4f9fba6f47267711f505ec7af.tar.zst
PeerTube-89724816ae79e0c4f9fba6f47267711f505ec7af.zip
Improve videos list client performance
Diffstat (limited to 'client/src/app/shared')
-rw-r--r--client/src/app/shared/video/abstract-video-list.html4
-rw-r--r--client/src/app/shared/video/abstract-video-list.ts11
-rw-r--r--client/src/app/shared/video/video-miniature.component.html4
-rw-r--r--client/src/app/shared/video/video-miniature.component.ts11
4 files changed, 20 insertions, 10 deletions
diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index 4ad4e3568..d543ab7c1 100644
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -11,8 +11,8 @@
11 (nearOfTop)="onNearOfTop()" (nearOfBottom)="onNearOfBottom()" (pageChanged)="onPageChanged($event)" 11 (nearOfTop)="onNearOfTop()" (nearOfBottom)="onNearOfBottom()" (pageChanged)="onPageChanged($event)"
12 class="videos" #videosElement 12 class="videos" #videosElement
13 > 13 >
14 <div *ngFor="let videos of videoPages" class="videos-page"> 14 <div *ngFor="let videos of videoPages; trackBy: pageByVideoId" class="videos-page">
15 <my-video-miniature *ngFor="let video of videos" [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"></my-video-miniature> 15 <my-video-miniature *ngFor="let video of videos; trackBy: videoById" [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"></my-video-miniature>
16 </div> 16 </div>
17 </div> 17 </div>
18</div> 18</div>
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index 53b044478..6a758ebe0 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -81,6 +81,15 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
81 if (this.resizeSubscription) this.resizeSubscription.unsubscribe() 81 if (this.resizeSubscription) this.resizeSubscription.unsubscribe()
82 } 82 }
83 83
84 pageByVideoId (index: number, page: Video[]) {
85 // Video are unique in all pages
86 return page[0].id
87 }
88
89 videoById (index: number, video: Video) {
90 return video.id
91 }
92
84 onNearOfTop () { 93 onNearOfTop () {
85 this.previousPage() 94 this.previousPage()
86 } 95 }
@@ -166,7 +175,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy {
166 const min = this.minPageLoaded() 175 const min = this.minPageLoaded()
167 176
168 if (min > 1) { 177 if (min > 1) {
169 this.loadMoreVideos(min - 1) 178 this.loadMoreVideos(min - 1, true)
170 } 179 }
171 } 180 }
172 181
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 9cf3fb321..cfc483018 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -1,11 +1,11 @@
1<div class="video-miniature"> 1<div class="video-miniature">
2 <my-video-thumbnail [video]="video" [nsfw]="isVideoBlur()"></my-video-thumbnail> 2 <my-video-thumbnail [video]="video" [nsfw]="isVideoBlur"></my-video-thumbnail>
3 3
4 <div class="video-miniature-information"> 4 <div class="video-miniature-information">
5 <a 5 <a
6 tabindex="-1" 6 tabindex="-1"
7 class="video-miniature-name" 7 class="video-miniature-name"
8 [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur() }" 8 [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
9 > 9 >
10 {{ video.name }} 10 {{ video.name }}
11 </a> 11 </a>
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index 07193ebd5..27098f4b4 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -1,4 +1,4 @@
1import { Component, Input, OnInit } from '@angular/core' 1import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'
2import { User } from '../users' 2import { User } from '../users'
3import { Video } from './video.model' 3import { Video } from './video.model'
4import { ServerService } from '@app/core' 4import { ServerService } from '@app/core'
@@ -8,13 +8,16 @@ export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
8@Component({ 8@Component({
9 selector: 'my-video-miniature', 9 selector: 'my-video-miniature',
10 styleUrls: [ './video-miniature.component.scss' ], 10 styleUrls: [ './video-miniature.component.scss' ],
11 templateUrl: './video-miniature.component.html' 11 templateUrl: './video-miniature.component.html',
12 changeDetection: ChangeDetectionStrategy.OnPush
12}) 13})
13export class VideoMiniatureComponent implements OnInit { 14export class VideoMiniatureComponent implements OnInit {
14 @Input() user: User 15 @Input() user: User
15 @Input() video: Video 16 @Input() video: Video
16 @Input() ownerDisplayType: OwnerDisplayType = 'account' 17 @Input() ownerDisplayType: OwnerDisplayType = 'account'
17 18
19 isVideoBlur: boolean
20
18 private ownerDisplayTypeChosen: 'account' | 'videoChannel' 21 private ownerDisplayTypeChosen: 'account' | 'videoChannel'
19 22
20 constructor (private serverService: ServerService) { } 23 constructor (private serverService: ServerService) { }
@@ -35,10 +38,8 @@ export class VideoMiniatureComponent implements OnInit {
35 } else { 38 } else {
36 this.ownerDisplayTypeChosen = 'videoChannel' 39 this.ownerDisplayTypeChosen = 'videoChannel'
37 } 40 }
38 }
39 41
40 isVideoBlur () { 42 this.isVideoBlur = this.video.isVideoNSFWForUser(this.user, this.serverService.getConfig())
41 return this.video.isVideoNSFWForUser(this.user, this.serverService.getConfig())
42 } 43 }
43 44
44 displayOwnerAccount () { 45 displayOwnerAccount () {