X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2Fshared%2Fshared-video-miniature%2Fvideos-selection.component.ts;h=bac828fbaedc679da3bbd32ef933fd7f281b475c;hb=2b0d17ccf46cfdba4103b7287f0dadf289ad4faf;hp=f8c3800d7fa1e96a77da3a5b2083e26172b79b4e;hpb=733dbc535d5fecdaba9e05feb8923bc754920525;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts index f8c3800d7..bac828fba 100644 --- a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts +++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts @@ -1,22 +1,8 @@ -import { Observable } from 'rxjs' -import { - AfterContentInit, - Component, - ComponentFactoryResolver, - ContentChildren, - EventEmitter, - Input, - OnDestroy, - OnInit, - Output, - QueryList, - TemplateRef -} from '@angular/core' -import { ActivatedRoute, Router } from '@angular/router' -import { AuthService, ComponentPagination, LocalStorageService, Notifier, ScreenService, ServerService, User, UserService } from '@app/core' +import { Observable, Subject } from 'rxjs' +import { AfterContentInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList, TemplateRef } from '@angular/core' +import { ComponentPagination, Notifier, User } from '@app/core' import { ResultList, VideoSortField } from '@shared/models' import { PeerTubeTemplateDirective, Video } from '../shared-main' -import { AbstractVideoList } from './abstract-video-list' import { MiniatureDisplayOptions } from './video-miniature.component' export type SelectionType = { [ id: number ]: boolean } @@ -26,12 +12,19 @@ export type SelectionType = { [ id: number ]: boolean } templateUrl: './videos-selection.component.html', styleUrls: [ './videos-selection.component.scss' ] }) -export class VideosSelectionComponent extends AbstractVideoList implements OnInit, OnDestroy, AfterContentInit { +export class VideosSelectionComponent implements AfterContentInit { @Input() user: User @Input() pagination: ComponentPagination + @Input() titlePage: string + @Input() miniatureDisplayOptions: MiniatureDisplayOptions + @Input() noResultMessage = $localize`No results.` + @Input() enableSelection = true + + @Input() disabled = false + @Input() getVideosObservableFunction: (page: number, sort?: VideoSortField) => Observable> @ContentChildren(PeerTubeTemplateDirective) templates: QueryList> @@ -44,19 +37,18 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni rowButtonsTemplate: TemplateRef globalButtonsTemplate: TemplateRef + videos: Video[] = [] + sort: VideoSortField = '-publishedAt' + + onDataSubject = new Subject() + + hasDoneFirstQuery = false + + private lastQueryLength: number + constructor ( - protected router: Router, - protected route: ActivatedRoute, - protected notifier: Notifier, - protected authService: AuthService, - protected userService: UserService, - protected screenService: ScreenService, - protected storageService: LocalStorageService, - protected serverService: ServerService, - protected cfr: ComponentFactoryResolver - ) { - super() - } + private notifier: Notifier + ) { } @Input() get selection () { return this._selection @@ -76,10 +68,6 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni this.videosModelChange.emit(this.videos) } - ngOnInit () { - super.ngOnInit() - } - ngAfterContentInit () { { const t = this.templates.find(t => t.name === 'rowButtons') @@ -90,10 +78,8 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni const t = this.templates.find(t => t.name === 'globalButtons') if (t) this.globalButtonsTemplate = t.template } - } - ngOnDestroy () { - super.ngOnDestroy() + this.loadMoreVideos() } getVideosObservable (page: number) { @@ -105,14 +91,55 @@ export class VideosSelectionComponent extends AbstractVideoList implements OnIni } isInSelectionMode () { - return Object.keys(this._selection).some(k => this._selection[ k ] === true) + return Object.keys(this._selection).some(k => this._selection[k] === true) + } + + videoById (index: number, video: Video) { + return video.id + } + + onNearOfBottom () { + if (this.disabled) return + + // No more results + if (this.lastQueryLength !== undefined && this.lastQueryLength < this.pagination.itemsPerPage) return + + this.pagination.currentPage += 1 + + this.loadMoreVideos() + } + + loadMoreVideos (reset = false) { + if (reset) this.hasDoneFirstQuery = false + + this.getVideosObservable(this.pagination.currentPage) + .subscribe({ + next: ({ data }) => { + this.hasDoneFirstQuery = true + this.lastQueryLength = data.length + + if (reset) this.videos = [] + this.videos = this.videos.concat(data) + this.videosModel = this.videos + + this.onDataSubject.next(data) + }, + + error: err => { + const message = $localize`Cannot load more videos. Try again later.` + + console.error(message, { err }) + this.notifier.error(message) + } + }) } - generateSyndicationList () { - throw new Error('Method not implemented.') + reloadVideos () { + this.pagination.currentPage = 1 + this.loadMoreVideos(true) } - protected onMoreVideos () { - this.videosModel = this.videos + removeVideoFromArray (video: Video) { + this.videos = this.videos.filter(v => v.id !== video.id) } }