From 440d39c52d4efb878b6a2e21584d6b8f52072f27 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 8 Jan 2020 14:40:08 +0100
Subject: [PATCH] Skip videos count on client if we don't use it

---
 .../account-video-channels.component.ts       |  6 ++--
 .../plugin-list-installed.component.ts        |  3 +-
 .../plugin-search/plugin-search.component.ts  |  3 +-
 client/src/app/search/search.service.ts       |  6 ++--
 .../shared/rest/component-pagination.model.ts |  4 ++-
 client/src/app/shared/rest/rest.service.ts    |  4 +--
 .../user-subscription.service.ts              |  4 +--
 .../app/shared/users/user-history.service.ts  |  4 +--
 .../shared/users/user-notification.service.ts |  4 +--
 .../video-blacklist.service.ts                |  4 +--
 .../video-channel/video-channel.service.ts    |  4 +--
 .../video-playlist/video-playlist.service.ts  |  8 ++---
 .../app/shared/video/abstract-video-list.ts   | 24 +++++++------
 client/src/app/shared/video/video.service.ts  | 36 +++++++++----------
 .../comment/video-comment.service.ts          |  6 ++--
 .../video-list/video-local.component.ts       |  3 +-
 .../video-list/video-most-liked.component.ts  |  3 +-
 .../video-recently-added.component.ts         |  3 +-
 .../video-list/video-trending.component.ts    |  3 +-
 .../video-user-subscriptions.component.ts     |  3 +-
 20 files changed, 75 insertions(+), 60 deletions(-)

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
index 29d2991fd..5572064c1 100644
--- 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
@@ -25,12 +25,14 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
 
   channelPagination: ComponentPagination = {
     currentPage: 1,
-    itemsPerPage: 2
+    itemsPerPage: 2,
+    totalItems: null
   }
 
   videosPagination: ComponentPagination = {
     currentPage: 1,
-    itemsPerPage: 12
+    itemsPerPage: 12,
+    totalItems: null
   }
   videosSort: VideoSortField = '-publishedAt'
 
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
index b30b136bd..f18c2e6ca 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
@@ -25,7 +25,8 @@ export class PluginListInstalledComponent implements OnInit {
 
   pagination: ComponentPagination = {
     currentPage: 1,
-    itemsPerPage: 10
+    itemsPerPage: 10,
+    totalItems: null
   }
   sort = 'name'
 
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
index 65566ab79..e08ded3f1 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
@@ -25,7 +25,8 @@ export class PluginSearchComponent implements OnInit {
 
   pagination: ComponentPagination = {
     currentPage: 1,
-    itemsPerPage: 10
+    itemsPerPage: 10,
+    totalItems: null
   }
   sort = '-popularity'
 
diff --git a/client/src/app/search/search.service.ts b/client/src/app/search/search.service.ts
index bb5532757..7610fee8c 100644
--- a/client/src/app/search/search.service.ts
+++ b/client/src/app/search/search.service.ts
@@ -2,7 +2,7 @@ import { catchError, map, switchMap } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { Observable } from 'rxjs'
-import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { ComponentPaginationLight } from '@app/shared/rest/component-pagination.model'
 import { VideoService } from '@app/shared/video/video.service'
 import { RestExtractor, RestService } from '@app/shared'
 import { environment } from '../../environments/environment'
@@ -25,7 +25,7 @@ export class SearchService {
 
   searchVideos (parameters: {
     search: string,
-    componentPagination: ComponentPagination,
+    componentPagination: ComponentPaginationLight,
     advancedSearch: AdvancedSearch
   }): Observable<ResultList<Video>> {
     const { search, componentPagination, advancedSearch } = parameters
@@ -51,7 +51,7 @@ export class SearchService {
 
   searchVideoChannels (parameters: {
     search: string,
-    componentPagination: ComponentPagination
+    componentPagination: ComponentPaginationLight
   }): Observable<ResultList<VideoChannel>> {
     const { search, componentPagination } = parameters
 
diff --git a/client/src/app/shared/rest/component-pagination.model.ts b/client/src/app/shared/rest/component-pagination.model.ts
index 85160d445..bcb73ed0f 100644
--- a/client/src/app/shared/rest/component-pagination.model.ts
+++ b/client/src/app/shared/rest/component-pagination.model.ts
@@ -1,9 +1,11 @@
 export interface ComponentPagination {
   currentPage: number
   itemsPerPage: number
-  totalItems?: number
+  totalItems: number
 }
 
+export type ComponentPaginationLight = Omit<ComponentPagination, 'totalItems'>
+
 export function hasMoreItems (componentPagination: ComponentPagination) {
   // No results
   if (componentPagination.totalItems === 0) return false
diff --git a/client/src/app/shared/rest/rest.service.ts b/client/src/app/shared/rest/rest.service.ts
index e6d4e6e5e..16bb6d82c 100644
--- a/client/src/app/shared/rest/rest.service.ts
+++ b/client/src/app/shared/rest/rest.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core'
 import { HttpParams } from '@angular/common/http'
 import { SortMeta } from 'primeng/components/common/sortmeta'
-import { ComponentPagination } from './component-pagination.model'
+import { ComponentPagination, ComponentPaginationLight } from './component-pagination.model'
 
 import { RestPagination } from './rest-pagination'
 
@@ -47,7 +47,7 @@ export class RestService {
     return params
   }
 
-  componentPaginationToRestPagination (componentPagination: ComponentPagination): RestPagination {
+  componentPaginationToRestPagination (componentPagination: ComponentPaginationLight): RestPagination {
     const start: number = (componentPagination.currentPage - 1) * componentPagination.itemsPerPage
     const count: number = componentPagination.itemsPerPage
 
diff --git a/client/src/app/shared/user-subscription/user-subscription.service.ts b/client/src/app/shared/user-subscription/user-subscription.service.ts
index cfd5b100f..83df40a43 100644
--- a/client/src/app/shared/user-subscription/user-subscription.service.ts
+++ b/client/src/app/shared/user-subscription/user-subscription.service.ts
@@ -8,7 +8,7 @@ import { Observable, ReplaySubject, Subject } from 'rxjs'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
 import { VideoChannel as VideoChannelServer } from '../../../../../shared/models/videos'
-import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { ComponentPaginationLight } from '@app/shared/rest/component-pagination.model'
 
 type SubscriptionExistResult = { [ uri: string ]: boolean }
 
@@ -54,7 +54,7 @@ export class UserSubscriptionService {
                )
   }
 
-  listSubscriptions (componentPagination: ComponentPagination): Observable<ResultList<VideoChannel>> {
+  listSubscriptions (componentPagination: ComponentPaginationLight): Observable<ResultList<VideoChannel>> {
     const url = UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL
 
     const pagination = this.restService.componentPaginationToRestPagination(componentPagination)
diff --git a/client/src/app/shared/users/user-history.service.ts b/client/src/app/shared/users/user-history.service.ts
index 9ed25bfc7..b358cdf20 100644
--- a/client/src/app/shared/users/user-history.service.ts
+++ b/client/src/app/shared/users/user-history.service.ts
@@ -5,7 +5,7 @@ import { RestExtractor } from '../rest/rest-extractor.service'
 import { RestService } from '../rest/rest.service'
 import { Video } from '../video/video.model'
 import { catchError, map, switchMap } from 'rxjs/operators'
-import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { ComponentPaginationLight } from '@app/shared/rest/component-pagination.model'
 import { VideoService } from '@app/shared/video/video.service'
 import { ResultList } from '../../../../../shared'
 
@@ -20,7 +20,7 @@ export class UserHistoryService {
     private videoService: VideoService
   ) {}
 
-  getUserVideosHistory (historyPagination: ComponentPagination) {
+  getUserVideosHistory (historyPagination: ComponentPaginationLight) {
     const pagination = this.restService.componentPaginationToRestPagination(historyPagination)
 
     let params = new HttpParams()
diff --git a/client/src/app/shared/users/user-notification.service.ts b/client/src/app/shared/users/user-notification.service.ts
index ae0bc9cb1..e525a1d58 100644
--- a/client/src/app/shared/users/user-notification.service.ts
+++ b/client/src/app/shared/users/user-notification.service.ts
@@ -6,7 +6,7 @@ import { environment } from '../../../environments/environment'
 import { ResultList, UserNotification as UserNotificationServer, UserNotificationSetting } from '../../../../../shared'
 import { UserNotification } from './user-notification.model'
 import { AuthService } from '../../core'
-import { ComponentPagination } from '../rest/component-pagination.model'
+import { ComponentPaginationLight } from '../rest/component-pagination.model'
 import { User } from '../users/user.model'
 import { UserNotificationSocket } from '@app/core/notification/user-notification-socket.service'
 
@@ -23,7 +23,7 @@ export class UserNotificationService {
     private userNotificationSocket: UserNotificationSocket
   ) {}
 
-  listMyNotifications (pagination: ComponentPagination, unread?: boolean, ignoreLoadingBar = false) {
+  listMyNotifications (pagination: ComponentPaginationLight, unread?: boolean, ignoreLoadingBar = false) {
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, this.restService.componentPaginationToRestPagination(pagination))
 
diff --git a/client/src/app/shared/video-blacklist/video-blacklist.service.ts b/client/src/app/shared/video-blacklist/video-blacklist.service.ts
index d65da85fe..491fa698b 100644
--- a/client/src/app/shared/video-blacklist/video-blacklist.service.ts
+++ b/client/src/app/shared/video-blacklist/video-blacklist.service.ts
@@ -7,7 +7,7 @@ import { VideoBlacklist, VideoBlacklistType, ResultList } from '../../../../../s
 import { Video } from '../video/video.model'
 import { environment } from '../../../environments/environment'
 import { RestExtractor, RestPagination, RestService } from '../rest'
-import { ComponentPagination } from '../rest/component-pagination.model'
+import { ComponentPaginationLight } from '../rest/component-pagination.model'
 
 @Injectable()
 export class VideoBlacklistService {
@@ -34,7 +34,7 @@ export class VideoBlacklistService {
                )
   }
 
-  getAutoBlacklistedAsVideoList (videoPagination: ComponentPagination): Observable<ResultList<Video>> {
+  getAutoBlacklistedAsVideoList (videoPagination: ComponentPaginationLight): Observable<ResultList<Video>> {
     const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
 
     // prioritize first created since waiting longest
diff --git a/client/src/app/shared/video-channel/video-channel.service.ts b/client/src/app/shared/video-channel/video-channel.service.ts
index 0168d37d9..adb4f4819 100644
--- a/client/src/app/shared/video-channel/video-channel.service.ts
+++ b/client/src/app/shared/video-channel/video-channel.service.ts
@@ -10,7 +10,7 @@ import { VideoChannel } from './video-channel.model'
 import { environment } from '../../../environments/environment'
 import { Account } from '@app/shared/account/account.model'
 import { Avatar } from '../../../../../shared/models/avatars/avatar.model'
-import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { ComponentPaginationLight } from '@app/shared/rest/component-pagination.model'
 import { RestService } from '@app/shared/rest'
 
 @Injectable()
@@ -44,7 +44,7 @@ export class VideoChannelService {
                )
   }
 
-  listAccountVideoChannels (account: Account, componentPagination?: ComponentPagination): Observable<ResultList<VideoChannel>> {
+  listAccountVideoChannels (account: Account, componentPagination?: ComponentPaginationLight): Observable<ResultList<VideoChannel>> {
     const pagination = componentPagination
       ? this.restService.componentPaginationToRestPagination(componentPagination)
       : { start: 0, count: 20 }
diff --git a/client/src/app/shared/video-playlist/video-playlist.service.ts b/client/src/app/shared/video-playlist/video-playlist.service.ts
index 7eddf81e1..1ec9315ef 100644
--- a/client/src/app/shared/video-playlist/video-playlist.service.ts
+++ b/client/src/app/shared/video-playlist/video-playlist.service.ts
@@ -18,7 +18,7 @@ import { Account } from '@app/shared/account/account.model'
 import { RestService } from '@app/shared/rest'
 import { VideoExistInPlaylist, VideosExistInPlaylists } from '@shared/models/videos/playlist/video-exist-in-playlist.model'
 import { VideoPlaylistReorder } from '@shared/models/videos/playlist/video-playlist-reorder.model'
-import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
+import { ComponentPaginationLight } from '@app/shared/rest/component-pagination.model'
 import { VideoPlaylistElement as ServerVideoPlaylistElement } from '@shared/models/videos/playlist/video-playlist-element.model'
 import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
 import { uniq } from 'lodash-es'
@@ -63,7 +63,7 @@ export class VideoPlaylistService {
     )
   }
 
-  listChannelPlaylists (videoChannel: VideoChannel, componentPagination: ComponentPagination): Observable<ResultList<VideoPlaylist>> {
+  listChannelPlaylists (videoChannel: VideoChannel, componentPagination: ComponentPaginationLight): Observable<ResultList<VideoPlaylist>> {
     const url = VideoChannelService.BASE_VIDEO_CHANNEL_URL + videoChannel.nameWithHost + '/video-playlists'
     const pagination = this.restService.componentPaginationToRestPagination(componentPagination)
 
@@ -90,7 +90,7 @@ export class VideoPlaylistService {
 
   listAccountPlaylists (
     account: Account,
-    componentPagination: ComponentPagination,
+    componentPagination: ComponentPaginationLight,
     sort: string,
     search?: string
   ): Observable<ResultList<VideoPlaylist>> {
@@ -236,7 +236,7 @@ export class VideoPlaylistService {
 
   getPlaylistVideos (
     videoPlaylistId: number | string,
-    componentPagination: ComponentPagination
+    componentPagination: ComponentPaginationLight
   ): Observable<ResultList<VideoPlaylistElement>> {
     const path = VideoPlaylistService.BASE_VIDEO_PLAYLIST_URL + videoPlaylistId + '/videos'
     const pagination = this.restService.componentPaginationToRestPagination(componentPagination)
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index 06d4ed43d..c2fe6f754 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -3,7 +3,7 @@ import { OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { fromEvent, Observable, of, Subject, Subscription } from 'rxjs'
 import { AuthService } from '../../core/auth'
-import { ComponentPagination } from '../rest/component-pagination.model'
+import { ComponentPaginationLight } from '../rest/component-pagination.model'
 import { VideoSortField } from './sort-field.type'
 import { Video } from './video.model'
 import { ScreenService } from '@app/shared/misc/screen.service'
@@ -13,7 +13,7 @@ import { Notifier, ServerService } from '@app/core'
 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { isLastMonth, isLastWeek, isToday, isYesterday } from '@shared/core-utils/miscs/date'
-import { ResultList, ServerConfig } from '@shared/models'
+import { ServerConfig } from '@shared/models'
 
 enum GroupDate {
   UNKNOWN = 0,
@@ -25,10 +25,9 @@ enum GroupDate {
 }
 
 export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableForReuseHook {
-  pagination: ComponentPagination = {
+  pagination: ComponentPaginationLight = {
     currentPage: 1,
-    itemsPerPage: 25,
-    totalItems: null
+    itemsPerPage: 25
   }
   sort: VideoSortField = '-publishedAt'
 
@@ -47,6 +46,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
   groupByDate = false
 
   videos: Video[] = []
+  hasDoneFirstQuery = false
   disabled = false
 
   displayOptions: MiniatureDisplayOptions = {
@@ -84,7 +84,9 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
   private groupedDateLabels: { [id in GroupDate]: string }
   private groupedDates: { [id: number]: GroupDate } = {}
 
-  abstract getVideosObservable (page: number): Observable<ResultList<Video>>
+  private lastQueryLength: number
+
+  abstract getVideosObservable (page: number): Observable<{ data: Video[] }>
 
   abstract generateSyndicationList (): void
 
@@ -142,8 +144,8 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
   onNearOfBottom () {
     if (this.disabled) return
 
-    // Last page
-    if (this.pagination.totalItems <= (this.pagination.currentPage * this.pagination.itemsPerPage)) return
+    // No more results
+    if (this.lastQueryLength !== undefined && this.lastQueryLength < this.pagination.itemsPerPage) return
 
     this.pagination.currentPage += 1
 
@@ -154,8 +156,10 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
 
   loadMoreVideos (reset = false) {
     this.getVideosObservable(this.pagination.currentPage).subscribe(
-      ({ data, total }) => {
-        this.pagination.totalItems = total
+      ({ data }) => {
+        this.hasDoneFirstQuery = true
+        this.lastQueryLength = data.length
+
         if (reset) this.videos = []
         this.videos = this.videos.concat(data)
 
diff --git a/client/src/app/shared/video/video.service.ts b/client/src/app/shared/video/video.service.ts
index 2dd47d74e..996202154 100644
--- a/client/src/app/shared/video/video.service.ts
+++ b/client/src/app/shared/video/video.service.ts
@@ -15,7 +15,7 @@ import {
 } from '../../../../../shared/models/videos'
 import { FeedFormat } from '../../../../../shared/models/feeds/feed-format.enum'
 import { environment } from '../../../environments/environment'
-import { ComponentPagination } from '../rest/component-pagination.model'
+import { ComponentPaginationLight } from '../rest/component-pagination.model'
 import { RestExtractor } from '../rest/rest-extractor.service'
 import { RestService } from '../rest/rest.service'
 import { UserService } from '../users/user.service'
@@ -34,7 +34,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 
 export interface VideosProvider {
   getVideos (parameters: {
-    videoPagination: ComponentPagination,
+    videoPagination: ComponentPaginationLight,
     sort: VideoSortField,
     filter?: VideoFilter,
     categoryOneOf?: number,
@@ -121,7 +121,7 @@ export class VideoService implements VideosProvider {
                .pipe(catchError(err => this.restExtractor.handleError(err)))
   }
 
-  getMyVideos (videoPagination: ComponentPagination, sort: VideoSortField, search?: string): Observable<ResultList<Video>> {
+  getMyVideos (videoPagination: ComponentPaginationLight, sort: VideoSortField, search?: string): Observable<ResultList<Video>> {
     const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
 
     let params = new HttpParams()
@@ -138,7 +138,7 @@ export class VideoService implements VideosProvider {
 
   getAccountVideos (
     account: Account,
-    videoPagination: ComponentPagination,
+    videoPagination: ComponentPaginationLight,
     sort: VideoSortField
   ): Observable<ResultList<Video>> {
     const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
@@ -156,7 +156,7 @@ export class VideoService implements VideosProvider {
 
   getVideoChannelVideos (
     videoChannel: VideoChannel,
-    videoPagination: ComponentPagination,
+    videoPagination: ComponentPaginationLight,
     sort: VideoSortField
   ): Observable<ResultList<Video>> {
     const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
@@ -173,15 +173,18 @@ export class VideoService implements VideosProvider {
   }
 
   getUserSubscriptionVideos (parameters: {
-    videoPagination: ComponentPagination,
-    sort: VideoSortField
+    videoPagination: ComponentPaginationLight,
+    sort: VideoSortField,
+    skipCount?: boolean
   }): Observable<ResultList<Video>> {
-    const { videoPagination, sort } = parameters
+    const { videoPagination, sort, skipCount } = parameters
     const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
 
+    if (skipCount) params = params.set('skipCount', skipCount + '')
+
     return this.authHttp
                .get<ResultList<Video>>(UserSubscriptionService.BASE_USER_SUBSCRIPTIONS_URL + '/videos', { params })
                .pipe(
@@ -191,26 +194,23 @@ export class VideoService implements VideosProvider {
   }
 
   getVideos (parameters: {
-    videoPagination: ComponentPagination,
+    videoPagination: ComponentPaginationLight,
     sort: VideoSortField,
     filter?: VideoFilter,
     categoryOneOf?: number,
-    languageOneOf?: string[]
+    languageOneOf?: string[],
+    skipCount?: boolean
   }): Observable<ResultList<Video>> {
-    const { videoPagination, sort, filter, categoryOneOf, languageOneOf } = parameters
+    const { videoPagination, sort, filter, categoryOneOf, languageOneOf, skipCount } = parameters
 
     const pagination = this.restService.componentPaginationToRestPagination(videoPagination)
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
 
-    if (filter) {
-      params = params.set('filter', filter)
-    }
-
-    if (categoryOneOf) {
-      params = params.set('categoryOneOf', categoryOneOf + '')
-    }
+    if (filter) params = params.set('filter', filter)
+    if (categoryOneOf) params = params.set('categoryOneOf', categoryOneOf + '')
+    if (skipCount) params = params.set('skipCount', skipCount + '')
 
     if (languageOneOf) {
       for (const l of languageOneOf) {
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.service.ts b/client/src/app/videos/+video-watch/comment/video-comment.service.ts
index 72fbf5d25..a81e5236a 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.service.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment.service.ts
@@ -3,7 +3,7 @@ import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { objectLineFeedToHtml } from '@app/shared/misc/utils'
 import { Observable } from 'rxjs'
-import { ResultList, FeedFormat } from '../../../../../../shared/models'
+import { FeedFormat, ResultList } from '../../../../../../shared/models'
 import {
   VideoComment as VideoCommentServerModel,
   VideoCommentCreate,
@@ -11,7 +11,7 @@ import {
 } from '../../../../../../shared/models/videos/video-comment.model'
 import { environment } from '../../../../environments/environment'
 import { RestExtractor, RestService } from '../../../shared/rest'
-import { ComponentPagination } from '../../../shared/rest/component-pagination.model'
+import { ComponentPaginationLight } from '../../../shared/rest/component-pagination.model'
 import { CommentSortField } from '../../../shared/video/sort-field.type'
 import { VideoComment } from './video-comment.model'
 
@@ -50,7 +50,7 @@ export class VideoCommentService {
 
   getVideoCommentThreads (parameters: {
     videoId: number | string,
-    componentPagination: ComponentPagination,
+    componentPagination: ComponentPaginationLight,
     sort: CommentSortField
   }): Observable<ResultList<VideoComment>> {
     const { videoId, componentPagination, sort } = parameters
diff --git a/client/src/app/videos/video-list/video-local.component.ts b/client/src/app/videos/video-list/video-local.component.ts
index b96e46e6a..59f65f95c 100644
--- a/client/src/app/videos/video-list/video-local.component.ts
+++ b/client/src/app/videos/video-list/video-local.component.ts
@@ -62,7 +62,8 @@ export class VideoLocalComponent extends AbstractVideoList implements OnInit, On
       sort: this.sort,
       filter: this.filter,
       categoryOneOf: this.categoryOneOf,
-      languageOneOf: this.languageOneOf
+      languageOneOf: this.languageOneOf,
+      skipCount: true
     }
 
     return this.hooks.wrapObsFun(
diff --git a/client/src/app/videos/video-list/video-most-liked.component.ts b/client/src/app/videos/video-list/video-most-liked.component.ts
index f94a7da04..6ff7a1e0e 100644
--- a/client/src/app/videos/video-list/video-most-liked.component.ts
+++ b/client/src/app/videos/video-list/video-most-liked.component.ts
@@ -50,7 +50,8 @@ export class VideoMostLikedComponent extends AbstractVideoList implements OnInit
       videoPagination: newPagination,
       sort: this.sort,
       categoryOneOf: this.categoryOneOf,
-      languageOneOf: this.languageOneOf
+      languageOneOf: this.languageOneOf,
+      skipCount: true
     }
 
     return this.hooks.wrapObsFun(
diff --git a/client/src/app/videos/video-list/video-recently-added.component.ts b/client/src/app/videos/video-list/video-recently-added.component.ts
index 5c50fd396..7568f4536 100644
--- a/client/src/app/videos/video-list/video-recently-added.component.ts
+++ b/client/src/app/videos/video-list/video-recently-added.component.ts
@@ -54,7 +54,8 @@ export class VideoRecentlyAddedComponent extends AbstractVideoList implements On
       videoPagination: newPagination,
       sort: this.sort,
       categoryOneOf: this.categoryOneOf,
-      languageOneOf: this.languageOneOf
+      languageOneOf: this.languageOneOf,
+      skipCount: true
     }
 
     return this.hooks.wrapObsFun(
diff --git a/client/src/app/videos/video-list/video-trending.component.ts b/client/src/app/videos/video-list/video-trending.component.ts
index bc88679fa..e29830b5b 100644
--- a/client/src/app/videos/video-list/video-trending.component.ts
+++ b/client/src/app/videos/video-list/video-trending.component.ts
@@ -67,7 +67,8 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit,
       videoPagination: newPagination,
       sort: this.sort,
       categoryOneOf: this.categoryOneOf,
-      languageOneOf: this.languageOneOf
+      languageOneOf: this.languageOneOf,
+      skipCount: true
     }
 
     return this.hooks.wrapObsFun(
diff --git a/client/src/app/videos/video-list/video-user-subscriptions.component.ts b/client/src/app/videos/video-list/video-user-subscriptions.component.ts
index 0cd67db29..cf0b15054 100644
--- a/client/src/app/videos/video-list/video-user-subscriptions.component.ts
+++ b/client/src/app/videos/video-list/video-user-subscriptions.component.ts
@@ -55,7 +55,8 @@ export class VideoUserSubscriptionsComponent extends AbstractVideoList implement
     const newPagination = immutableAssign(this.pagination, { currentPage: page })
     const params = {
       videoPagination: newPagination,
-      sort: this.sort
+      sort: this.sort,
+      skipCount: true
     }
 
     return this.hooks.wrapObsFun(