Verified Commit ad453580 authored by Chocobozzz's avatar Chocobozzz
Browse files

Fix infinite scroll on big screens

parent dd570a34
Pipeline #156469 passed with stage
in 62 minutes and 9 seconds
<div class="row" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()">
<div class="row" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
<div class="col-xl-6 col-md-12">
<div i18n class="subtitle">Followers</div>
......
......@@ -4,6 +4,7 @@ import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pa
import { Notifier } from '@app/core'
import { RestService } from '@app/shared'
import { SortMeta } from 'primeng/api'
import { Subject } from 'rxjs'
@Component({
selector: 'my-about-follows',
......@@ -17,13 +18,13 @@ export class AboutFollowsComponent implements OnInit {
followersPagination: ComponentPagination = {
currentPage: 1,
itemsPerPage: 40,
itemsPerPage: 20,
totalItems: null
}
followingsPagination: ComponentPagination = {
currentPage: 1,
itemsPerPage: 40,
itemsPerPage: 20,
totalItems: null
}
......@@ -32,6 +33,8 @@ export class AboutFollowsComponent implements OnInit {
order: -1
}
onDataSubject = new Subject<any[]>()
constructor (
private restService: RestService,
private notifier: Notifier,
......@@ -78,6 +81,8 @@ export class AboutFollowsComponent implements OnInit {
this.followers = this.followers.concat(newFollowers)
this.followersPagination.totalItems = resultList.total
this.onDataSubject.next(newFollowers)
},
err => this.notifier.error(err.message)
......@@ -94,6 +99,8 @@ export class AboutFollowsComponent implements OnInit {
this.followings = this.followings.concat(newFollowings)
this.followingsPagination.totalItems = resultList.total
this.onDataSubject.next(newFollowings)
},
err => this.notifier.error(err.message)
......
......@@ -2,7 +2,7 @@
<div class="no-results" i18n *ngIf="channelPagination.totalItems === 0">This account does not have channels.</div>
<div class="channels" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true">
<div class="channels" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onChannelDataSubject.asObservable()">
<div class="section channel" *ngFor="let videoChannel of videoChannels">
<div class="section-title">
<a [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel">
......
......@@ -4,7 +4,7 @@ import { Account } from '@app/shared/account/account.model'
import { AccountService } from '@app/shared/account/account.service'
import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
import { concatMap, map, switchMap, tap } from 'rxjs/operators'
import { from, Subscription } from 'rxjs'
import { from, Subject, Subscription } from 'rxjs'
import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
import { Video } from '@app/shared/video/video.model'
import { AuthService } from '@app/core'
......@@ -33,6 +33,8 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
}
videosSort: VideoSortField = '-publishedAt'
onChannelDataSubject = new Subject<any>()
private accountSub: Subscription
constructor (
......@@ -75,6 +77,8 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
this.videoChannels.push(videoChannel)
this.videos[videoChannel.id] = videos
this.onChannelDataSubject.next([ videoChannel ])
})
}
......
......@@ -6,7 +6,7 @@
{{ getNoResultMessage() }}
</div>
<div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true">
<div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()">
<div class="card plugin" *ngFor="let plugin of plugins">
<div class="card-body">
<div class="first-row">
......
......@@ -8,6 +8,7 @@ import { PeerTubePlugin } from '@shared/models/plugins/peertube-plugin.model'
import { ActivatedRoute, Router } from '@angular/router'
import { compareSemVer } from '@shared/core-utils/miscs/miscs'
import { PluginService } from '@app/core/plugins/plugin.service'
import { Subject } from 'rxjs'
@Component({
selector: 'my-plugin-list-installed',
......@@ -33,6 +34,8 @@ export class PluginListInstalledComponent implements OnInit {
PluginType = PluginType
onDataSubject = new Subject<any[]>()
constructor (
private i18n: I18n,
private pluginService: PluginService,
......@@ -67,6 +70,8 @@ export class PluginListInstalledComponent implements OnInit {
res => {
this.plugins = this.plugins.concat(res.data)
this.pagination.totalItems = res.total
this.onDataSubject.next(res.data)
},
err => this.notifier.error(err.message)
......
......@@ -29,7 +29,7 @@
No results.
</div>
<div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true">
<div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()">
<div class="card plugin" *ngFor="let plugin of plugins">
<div class="card-body">
<div class="first-row">
......
......@@ -36,6 +36,8 @@ export class PluginSearchComponent implements OnInit {
installing: { [name: string]: boolean } = {}
pluginInstalled = false
onDataSubject = new Subject<any[]>()
private searchSubject = new Subject<string>()
constructor (
......@@ -90,6 +92,8 @@ export class PluginSearchComponent implements OnInit {
this.plugins = this.plugins.concat(res.data)
this.pagination.totalItems = res.total
this.onDataSubject.next(res.data)
},
err => {
......
......@@ -13,7 +13,7 @@
<div class="no-history" i18n *ngIf="pagination.totalItems === 0">You don't have videos history yet.</div>
<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" class="videos">
<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()" class="videos">
<div class="video" *ngFor="let video of videos">
<my-video-miniature
[video]="video" [displayAsRow]="true"
......
<div class="no-results" i18n *ngIf="pagination.totalItems === 0">You don't have any subscriptions yet.</div>
<div class="video-channels" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()">
<div class="video-channels" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
<div *ngFor="let videoChannel of videoChannels" class="video-channel">
<a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]">
<img [src]="videoChannel.avatarUrl" alt="Avatar" />
......
......@@ -3,6 +3,7 @@ import { Notifier } from '@app/core'
import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
import { UserSubscriptionService } from '@app/shared/user-subscription'
import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
import { Subject } from 'rxjs'
@Component({
selector: 'my-account-subscriptions',
......@@ -18,6 +19,8 @@ export class MyAccountSubscriptionsComponent implements OnInit {
totalItems: null
}
onDataSubject = new Subject<any[]>()
constructor (
private userSubscriptionService: UserSubscriptionService,
private notifier: Notifier
......@@ -33,6 +36,8 @@ export class MyAccountSubscriptionsComponent implements OnInit {
res => {
this.videoChannels = this.videoChannels.concat(res.data)
this.pagination.totalItems = res.total
this.onDataSubject.next(res.data)
},
error => this.notifier.error(error.message)
......
......@@ -12,7 +12,7 @@
<div
class="videos" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()"
cdkDropList (cdkDropListDropped)="drop($event)"
cdkDropList (cdkDropListDropped)="drop($event)" [dataObservable]="onDataSubject.asObservable()"
>
<div class="video" *ngFor="let playlistElement of playlistElements; trackBy: trackByFn" cdkDrag>
<my-video-playlist-element-miniature
......
......@@ -7,7 +7,7 @@
margin-left: -15px;
margin-top: -$sub-menu-margin-bottom;
padding: $sub-menu-margin-bottom 0;
padding: $sub-menu-margin-bottom 0 -15px 0;
display: flex;
justify-content: center;
......
......@@ -3,7 +3,7 @@ import { Notifier, ServerService } from '@app/core'
import { AuthService } from '../../core/auth'
import { ConfirmService } from '../../core/confirm'
import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
import { Subscription } from 'rxjs'
import { Subject, Subscription } from 'rxjs'
import { ActivatedRoute } from '@angular/router'
import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
......@@ -22,10 +22,12 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
pagination: ComponentPagination = {
currentPage: 1,
itemsPerPage: 30,
itemsPerPage: 10,
totalItems: null
}
onDataSubject = new Subject<any[]>()
private videoPlaylistId: string | number
private paramsSub: Subscription
......@@ -102,6 +104,8 @@ export class MyAccountVideoPlaylistElementsComponent implements OnInit, OnDestro
.subscribe(({ total, data }) => {
this.playlistElements = this.playlistElements.concat(data)
this.pagination.totalItems = total
this.onDataSubject.next(data)
})
}
......
......@@ -5,7 +5,7 @@
</a>
</div>
<div class="video-playlists" myInfiniteScroller (nearOfBottom)="onNearOfBottom()">
<div class="video-playlists" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
<div *ngFor="let playlist of videoPlaylists" class="video-playlist">
<div class="miniature-wrapper">
<my-video-playlist-miniature [playlist]="playlist" [toManage]="true" [displayChannel]="true" [displayDescription]="true" [displayPrivacy]="true"
......
......@@ -9,6 +9,7 @@ import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
import { VideoPlaylistType } from '@shared/models'
import { Subject } from 'rxjs'
@Component({
selector: 'my-account-video-playlists',
......@@ -20,10 +21,12 @@ export class MyAccountVideoPlaylistsComponent implements OnInit {
pagination: ComponentPagination = {
currentPage: 1,
itemsPerPage: 10,
itemsPerPage: 5,
totalItems: null
}
onDataSubject = new Subject<any[]>()
private user: User
constructor (
......@@ -78,11 +81,15 @@ export class MyAccountVideoPlaylistsComponent implements OnInit {
}
private loadVideoPlaylists () {
const playlistsObservable = this.videoPlaylistService.listAccountPlaylists(this.user.account, this.pagination, '-updatedAt')
this.authService.userInformationLoaded
.pipe(flatMap(() => this.videoPlaylistService.listAccountPlaylists(this.user.account, '-updatedAt')))
.pipe(flatMap(() => playlistsObservable))
.subscribe(res => {
this.videoPlaylists = this.videoPlaylists.concat(res.data)
this.pagination.totalItems = res.total
this.onDataSubject.next(res.data)
})
}
}
......@@ -4,7 +4,7 @@
<div i18n class="no-results" *ngIf="pagination.totalItems === 0">This channel does not have playlists.</div>
<div class="video-playlist" myInfiniteScroller (nearOfBottom)="onNearOfBottom()">
<div class="video-playlist" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
<div *ngFor="let playlist of videoPlaylists">
<my-video-playlist-miniature [playlist]="playlist" [toManage]="false"></my-video-playlist-miniature>
</div>
......
......@@ -2,7 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core'
import { ConfirmService } from '../../core/confirm'
import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
import { Subscription } from 'rxjs'
import { Subject, Subscription } from 'rxjs'
import { Notifier } from '@app/core'
import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
......@@ -22,6 +22,8 @@ export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy {
totalItems: null
}
onDataSubject = new Subject<any[]>()
private videoChannelSub: Subscription
private videoChannel: VideoChannel
......@@ -53,10 +55,12 @@ export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy {
}
private loadVideoPlaylists () {
this.videoPlaylistService.listChannelPlaylists(this.videoChannel)
this.videoPlaylistService.listChannelPlaylists(this.videoChannel, this.pagination)
.subscribe(res => {
this.videoPlaylists = this.videoPlaylists.concat(res.data)
this.pagination.totalItems = res.total
this.onDataSubject.next(res.data)
})
}
}
<div *ngIf="componentPagination.totalItems === 0" class="no-notification" i18n>You don't have notifications.</div>
<div class="notifications" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()">
<div class="notifications" myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
<div *ngFor="let notification of notifications" class="notification" [ngClass]="{ unread: !notification.read }" (click)="markAsRead(notification)">
<ng-container [ngSwitch]="notification.type">
......
......@@ -4,6 +4,7 @@ import { UserNotificationType } from '../../../../../shared'
import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
import { Notifier } from '@app/core'
import { UserNotification } from '@app/shared/users/user-notification.model'
import { Subject } from 'rxjs'
@Component({
selector: 'my-user-notifications',
......@@ -24,6 +25,8 @@ export class UserNotificationsComponent implements OnInit {
componentPagination: ComponentPagination
onDataSubject = new Subject<any[]>()
constructor (
private userNotificationService: UserNotificationService,
private notifier: Notifier
......@@ -47,6 +50,8 @@ export class UserNotificationsComponent implements OnInit {
this.componentPagination.totalItems = result.total
this.notificationsLoaded.emit()
this.onDataSubject.next(result.data)
},
err => this.notifier.error(err.message)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment