"ngc-webpack": "3.2.2",
"ngx-bootstrap": "2.0.0-beta.9",
"ngx-chips": "1.5.3",
+ "ngx-infinite-scroll": "^0.7.0",
"ngx-pipes": "^2.0.5",
"node-sass": "^4.1.1",
"normalize.css": "^7.0.0",
const routes: Routes = [
{
path: '',
- redirectTo: '/videos/list',
+ redirectTo: '/videos/trending',
pathMatch: 'full'
},
{
import { Pipe, PipeTransform } from '@angular/core'
-// Thanks: https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts
+// Thanks: https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site
@Pipe({name: 'fromNow'})
export class FromNowPipe implements PipeTransform {
import { Component, OnInit } from '@angular/core'
import { Router } from '@angular/router'
-
import { Search } from './search.model'
-import { SearchField } from './search-field.type'
import { SearchService } from './search.service'
@Component({
})
export class SearchComponent implements OnInit {
- fieldChoices = {
- name: 'Name',
- account: 'Account',
- host: 'Host',
- tags: 'Tags'
- }
searchCriteria: Search = {
field: 'name',
value: ''
)
}
- get choiceKeys () {
- return Object.keys(this.fieldChoices)
- }
-
- choose ($event: MouseEvent, choice: SearchField) {
- $event.preventDefault()
- $event.stopPropagation()
-
- this.searchCriteria.field = choice
-
- if (this.searchCriteria.value) {
- this.doSearch()
- }
- }
-
doSearch () {
- if (this.router.url.indexOf('/videos/list') === -1) {
- this.router.navigate([ '/videos/list' ])
- }
+ // if (this.router.url.indexOf('/videos/list') === -1) {
+ // this.router.navigate([ '/videos/list' ])
+ // }
this.searchService.searchUpdated.next(this.searchCriteria)
}
-
- getStringChoice (choiceKey: SearchField) {
- return this.fieldChoices[choiceKey]
- }
}
import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
import { ModalModule } from 'ngx-bootstrap/modal'
-import { PaginationModule } from 'ngx-bootstrap/pagination'
import { ProgressbarModule } from 'ngx-bootstrap/progressbar'
import { BytesPipe, KeysPipe } from 'ngx-pipes'
import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
import { DataTableModule } from 'primeng/components/datatable/datatable'
import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
+import { FromNowPipe } from './misc/from-now.pipe'
import { LoaderComponent } from './misc/loader.component'
+import { NumberFormatterPipe } from './misc/number-formatter.pipe'
import { RestExtractor, RestService } from './rest'
import { SearchComponent, SearchService } from './search'
import { UserService } from './users'
import { VideoAbuseService } from './video-abuse'
import { VideoBlacklistService } from './video-blacklist'
-import { NumberFormatterPipe } from './misc/number-formatter.pipe'
-import { FromNowPipe } from './misc/from-now.pipe'
@NgModule({
imports: [
BsDropdownModule.forRoot(),
ModalModule.forRoot(),
- PaginationModule.forRoot(),
ProgressbarModule.forRoot(),
DataTableModule,
BsDropdownModule,
ModalModule,
- PaginationModule,
ProgressbarModule,
DataTableModule,
PrimeSharedModule,
{{ titlePage }}
</div>
-<div class="videos-miniatures">
+<div
+ class="videos-miniatures"
+ infiniteScroll
+ [infiniteScrollUpDistance]="1.5"
+ [infiniteScrollDistance]="0.5"
+ (scrolled)="onNearOfBottom()"
+ (scrolledUp)="onNearOfTop()"
+>
<my-video-miniature
class="ng-animate"
*ngFor="let video of videos" [video]="video" [user]="user" [currentSort]="sort"
>
</my-video-miniature>
</div>
-
-<pagination *ngIf="pagination.totalItems !== null && pagination.totalItems !== 0"
- [totalItems]="pagination.totalItems" [itemsPerPage]="pagination.itemsPerPage" [maxSize]="6" [boundaryLinks]="true" [rotate]="false"
- [(ngModel)]="pagination.currentPage" (pageChanged)="onPageChanged($event)"
-></pagination>
protected notificationsService: NotificationsService
protected router: Router
protected route: ActivatedRoute
-
protected subActivatedRoute: Subscription
+ protected abstract currentRoute: string
+
abstract titlePage: string
+ private loadedPages: { [ id: number ]: boolean } = {}
+
abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}>
ngOnInit () {
// Subscribe to route changes
- this.subActivatedRoute = this.route.params.subscribe(routeParams => {
- this.loadRouteParams(routeParams)
-
- this.getVideos()
- })
+ const routeParams = this.route.snapshot.params
+ this.loadRouteParams(routeParams)
+ this.loadMoreVideos('after')
}
ngOnDestroy () {
this.subActivatedRoute.unsubscribe()
}
- getVideos () {
- this.videos = []
+ onNearOfTop () {
+ if (this.pagination.currentPage > 1) {
+ this.previousPage()
+ }
+ }
+
+ onNearOfBottom () {
+ if (this.hasMoreVideos()) {
+ this.nextPage()
+ }
+ }
+
+ loadMoreVideos (where: 'before' | 'after') {
+ if (this.loadedPages[this.pagination.currentPage] === true) return
const observable = this.getVideosObservable()
observable.subscribe(
({ videos, totalVideos }) => {
- this.videos = videos
+ this.loadedPages[this.pagination.currentPage] = true
this.pagination.totalItems = totalVideos
+
+ if (where === 'before') {
+ this.videos = videos.concat(this.videos)
+ } else {
+ this.videos = this.videos.concat(videos)
+ }
},
error => this.notificationsService.error('Error', error.text)
)
}
- onPageChanged (event: { page: number }) {
- // Be sure the current page is set
- this.pagination.currentPage = event.page
+ protected hasMoreVideos () {
+ if (!this.pagination.totalItems) return true
+
+ const maxPage = this.pagination.totalItems/this.pagination.itemsPerPage
+ return maxPage > this.pagination.currentPage
+ }
+
+ protected previousPage () {
+ this.pagination.currentPage--
+
+ this.setNewRouteParams()
+ this.loadMoreVideos('before')
+ }
+
+ protected nextPage () {
+ this.pagination.currentPage++
- this.navigateToNewParams()
+ this.setNewRouteParams()
+ this.loadMoreVideos('after')
}
protected buildRouteParams () {
}
}
- protected navigateToNewParams () {
+ protected setNewRouteParams () {
const routeParams = this.buildRouteParams()
- this.router.navigate([ '/videos/list', routeParams ])
+ this.router.navigate([ this.currentRoute, routeParams ])
}
}
})
export class VideoRecentlyAddedComponent extends AbstractVideoList implements OnInit, OnDestroy {
titlePage = 'Recently added'
+ currentRoute = '/videos/recently-added'
constructor (protected router: Router,
protected route: ActivatedRoute,
})
export class VideoTrendingComponent extends AbstractVideoList implements OnInit, OnDestroy {
titlePage = 'Trending'
+ currentRoute = '/videos/trending'
constructor (protected router: Router,
protected route: ActivatedRoute,
import { NgModule } from '@angular/core'
+import { InfiniteScrollModule } from 'ngx-infinite-scroll'
import { SharedModule } from '../shared'
import { VideoService } from './shared'
import { MyVideosComponent, VideoMiniatureComponent } from './video-list'
@NgModule({
imports: [
VideosRoutingModule,
- SharedModule
+ SharedModule,
+ InfiniteScrollModule
],
declarations: [
dependencies:
ng2-material-dropdown "0.7.10"
+ngx-infinite-scroll@^0.7.0:
+ version "0.7.0"
+ resolved "https://registry.yarnpkg.com/ngx-infinite-scroll/-/ngx-infinite-scroll-0.7.0.tgz#a390c61c6a05ac14485e1c5bc8b4e6f6bd62fd6a"
+
ngx-pipes@^2.0.5:
version "2.0.5"
resolved "https://registry.yarnpkg.com/ngx-pipes/-/ngx-pipes-2.0.5.tgz#743b827e350b1e66f5bdae49e90a02fa631d4c54"
projects / oweals / peertube.git / commitdiff