X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fvideo%2Fabstract-video-list.ts;h=d74384293c0219112600a24e844cecc42fb829ef;hb=9b4b15f91c485f9a7fe2ed314b4101f4b7506b38;hp=728c864e9fb719519b36ba3d8de9bd50d0411660;hpb=2a2c19dfef7a9aa313c6ca0798f271c9a63449a9;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts index 728c864e9..d74384293 100644 --- a/client/src/app/shared/video/abstract-video-list.ts +++ b/client/src/app/shared/video/abstract-video-list.ts @@ -1,17 +1,18 @@ +import { debounceTime } from 'rxjs/operators' import { ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { Location } from '@angular/common' -import { isInMobileView } from '@app/shared/misc/utils' import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive' -import { NotificationsService } from 'angular2-notifications' -import 'rxjs/add/operator/debounceTime' -import { Observable } from 'rxjs/Observable' -import { fromEvent } from 'rxjs/observable/fromEvent' -import { Subscription } from 'rxjs/Subscription' +import { fromEvent, Observable, Subscription } from 'rxjs' import { AuthService } from '../../core/auth' import { ComponentPagination } from '../rest/component-pagination.model' import { VideoSortField } from './sort-field.type' import { Video } from './video.model' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { ScreenService } from '@app/shared/misc/screen.service' +import { OwnerDisplayType } from '@app/shared/video/video-miniature.component' +import { Syndication } from '@app/shared/video/syndication.model' +import { Notifier } from '@app/core' export abstract class AbstractVideoList implements OnInit, OnDestroy { private static LINES_PER_PAGE = 4 @@ -24,34 +25,44 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { itemsPerPage: 10, totalItems: null } - sort: VideoSortField = '-createdAt' - defaultSort: VideoSortField = '-createdAt' - syndicationItems = [] + sort: VideoSortField = '-publishedAt' + categoryOneOf?: number + defaultSort: VideoSortField = '-publishedAt' + syndicationItems: Syndication[] = [] loadOnInit = true + marginContent = true pageHeight: number videoWidth: number videoHeight: number videoPages: Video[][] = [] + ownerDisplayType: OwnerDisplayType = 'account' + firstLoadedPage: number + displayModerationBlock = false + trendingDays: number + titleTooltip: string protected baseVideoWidth = 215 - protected baseVideoHeight = 230 + protected baseVideoHeight = 205 - protected abstract notificationsService: NotificationsService + protected abstract notifier: Notifier protected abstract authService: AuthService protected abstract router: Router protected abstract route: ActivatedRoute + protected abstract screenService: ScreenService + protected abstract i18n: I18n protected abstract location: Location protected abstract currentRoute: string abstract titlePage: string protected loadedPages: { [ id: number ]: Video[] } = {} + protected loadingPage: { [ id: number ]: boolean } = {} protected otherRouteParams = {} private resizeSubscription: Subscription abstract getVideosObservable (page: number): Observable<{ videos: Video[], totalVideos: number}> - abstract generateSyndicationList () + abstract generateSyndicationList (): void get user () { return this.authService.getUser() @@ -63,7 +74,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { this.loadRouteParams(routeParams) this.resizeSubscription = fromEvent(window, 'resize') - .debounceTime(500) + .pipe(debounceTime(500)) .subscribe(() => this.calcPageSizes()) this.calcPageSizes() @@ -74,6 +85,15 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { if (this.resizeSubscription) this.resizeSubscription.unsubscribe() } + pageByVideoId (index: number, page: Video[]) { + // Video are unique in all pages + return page.length !== 0 ? page[0].id : 0 + } + + videoById (index: number, video: Video) { + return video.id + } + onNearOfTop () { this.previousPage() } @@ -94,13 +114,23 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { this.loadMoreVideos(this.pagination.currentPage) } - loadMoreVideos (page: number) { + loadMoreVideos (page: number, loadOnTop = false) { + this.adjustVideoPageHeight() + + const currentY = window.scrollY + if (this.loadedPages[page] !== undefined) return + if (this.loadingPage[page] === true) return + this.loadingPage[page] = true const observable = this.getVideosObservable(page) observable.subscribe( ({ videos, totalVideos }) => { + this.loadingPage[page] = false + + if (this.firstLoadedPage === undefined || this.firstLoadedPage > page) this.firstLoadedPage = page + // Paging is too high, return to the first one if (this.pagination.currentPage > 1 && totalVideos <= ((this.pagination.currentPage - 1) * this.pagination.itemsPerPage)) { this.pagination.currentPage = 1 @@ -115,13 +145,29 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { // Initialize infinite scroller now we loaded the first page if (Object.keys(this.loadedPages).length === 1) { // Wait elements creation - setTimeout(() => this.infiniteScroller.initialize(), 500) + setTimeout(() => { + this.infiniteScroller.initialize() + + // At our first load, we did not load the first page + // Load the previous page so the user can move on the top (and browser previous pages) + if (this.pagination.currentPage > 1) this.loadMoreVideos(this.pagination.currentPage - 1, true) + }, 500) } + + // Insert elements on the top but keep the scroll in the previous position + if (loadOnTop) setTimeout(() => { window.scrollTo(0, currentY + this.pageHeight) }, 0) }, - error => this.notificationsService.error('Error', error.message) + error => { + this.loadingPage[page] = false + this.notifier.error(error.message) + } ) } + toggleModerationDisplay () { + throw new Error('toggleModerationDisplay is not implemented') + } + protected hasMoreVideos () { // No results if (this.pagination.totalItems === 0) return false @@ -137,7 +183,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { const min = this.minPageLoaded() if (min > 1) { - this.loadMoreVideos(min - 1) + this.loadMoreVideos(min - 1, true) } } @@ -157,7 +203,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { protected loadRouteParams (routeParams: { [ key: string ]: any }) { this.sort = routeParams['sort'] as VideoSortField || this.defaultSort - + this.categoryOneOf = routeParams['categoryOneOf'] if (routeParams['page'] !== undefined) { this.pagination.currentPage = parseInt(routeParams['page'], 10) } else { @@ -168,7 +214,9 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { protected setNewRouteParams () { const paramsObject = this.buildRouteParams() - const queryParams = Object.keys(paramsObject).map(p => p + '=' + paramsObject[p]).join('&') + const queryParams = Object.keys(paramsObject) + .map(p => p + '=' + paramsObject[p]) + .join('&') this.location.replaceState(this.currentRoute, queryParams) } @@ -176,6 +224,13 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { this.videoPages = Object.values(this.loadedPages) } + protected adjustVideoPageHeight () { + const numberOfPagesLoaded = Object.keys(this.loadedPages).length + if (!numberOfPagesLoaded) return + + this.pageHeight = this.videosElement.nativeElement.offsetHeight / numberOfPagesLoaded + } + protected buildVideoHeight () { // Same ratios than base width/height return this.videosElement.nativeElement.offsetWidth * (this.baseVideoHeight / this.baseVideoWidth) @@ -190,7 +245,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { } private calcPageSizes () { - if (isInMobileView() || this.baseVideoWidth === -1) { + if (this.screenService.isInMobileView() || this.baseVideoWidth === -1) { this.pagination.itemsPerPage = 5 // Video takes all the width