X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bmy-account%2Fmy-account-videos%2Fmy-account-videos.component.ts;h=4aa570363c83f7425f98c4c4b36d7d64f744c092;hb=1d904806f6482f2762a632a51eea17ec7d7875ab;hp=eed4be01f8ae0f4549445a86568ed74fde687754;hpb=b1d40cff89f7cff565a98cdbcea9a624196a169a;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts index eed4be01f..4aa570363 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts @@ -1,136 +1,152 @@ -import { from as observableFrom, Observable } from 'rxjs' -import { concatAll, tap } from 'rxjs/operators' -import { Component, OnDestroy, OnInit } from '@angular/core' +import { concat, Observable, Subject } from 'rxjs' +import { tap, toArray, debounceTime } from 'rxjs/operators' +import { Component, ViewChild, OnInit } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' -import { Location } from '@angular/common' import { immutableAssign } from '@app/shared/misc/utils' import { ComponentPagination } from '@app/shared/rest/component-pagination.model' -import { NotificationsService } from 'angular2-notifications' +import { Notifier, ServerService } from '@app/core' import { AuthService } from '../../core/auth' import { ConfirmService } from '../../core/confirm' -import { AbstractVideoList } from '../../shared/video/abstract-video-list' import { Video } from '../../shared/video/video.model' import { VideoService } from '../../shared/video/video.service' import { I18n } from '@ngx-translate/i18n-polyfill' +import { ScreenService } from '@app/shared/misc/screen.service' +import { VideoChangeOwnershipComponent } from './video-change-ownership/video-change-ownership.component' +import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component' +import { SelectionType, VideosSelectionComponent } from '@app/shared/video/videos-selection.component' +import { VideoSortField } from '@app/shared/video/sort-field.type' +import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook' @Component({ selector: 'my-account-videos', templateUrl: './my-account-videos.component.html', styleUrls: [ './my-account-videos.component.scss' ] }) -export class MyAccountVideosComponent extends AbstractVideoList implements OnInit, OnDestroy { +export class MyAccountVideosComponent implements OnInit, DisableForReuseHook { + @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent + @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent + titlePage: string - currentRoute = '/my-account/videos' - checkedVideos: { [ id: number ]: boolean } = {} + selection: SelectionType = {} pagination: ComponentPagination = { currentPage: 1, - itemsPerPage: 5, + itemsPerPage: 10, totalItems: null } - - protected baseVideoWidth = -1 - protected baseVideoHeight = 155 + miniatureDisplayOptions: MiniatureDisplayOptions = { + date: true, + views: true, + by: false, + privacyLabel: false, + privacyText: true, + state: true, + blacklistInfo: true + } + videos: Video[] = [] + videosSearch: string + videosSearchChanged = new Subject() + getVideosObservableFunction = this.getVideosObservable.bind(this) constructor ( protected router: Router, + protected serverService: ServerService, protected route: ActivatedRoute, protected authService: AuthService, - protected notificationsService: NotificationsService, - protected confirmService: ConfirmService, - protected location: Location, - protected i18n: I18n, + protected notifier: Notifier, + protected screenService: ScreenService, + private i18n: I18n, + private confirmService: ConfirmService, private videoService: VideoService ) { - super() - this.titlePage = this.i18n('My videos') } ngOnInit () { - super.ngOnInit() + this.videosSearchChanged + .pipe( + debounceTime(500)) + .subscribe(() => { + this.videosSelection.reloadVideos() + }) } - ngOnDestroy () { - super.ngOnDestroy() + onVideosSearchChanged () { + this.videosSearchChanged.next() } - abortSelectionMode () { - this.checkedVideos = {} + disableForReuse () { + this.videosSelection.disableForReuse() } - isInSelectionMode () { - return Object.keys(this.checkedVideos).some(k => this.checkedVideos[k] === true) + enabledForReuse () { + this.videosSelection.enabledForReuse() } - getVideosObservable (page: number) { + getVideosObservable (page: number, sort: VideoSortField) { const newPagination = immutableAssign(this.pagination, { currentPage: page }) - return this.videoService.getMyVideos(newPagination, this.sort) - } - - generateSyndicationList () { - throw new Error('Method not implemented.') + return this.videoService.getMyVideos(newPagination, sort, this.videosSearch) + .pipe( + tap(res => this.pagination.totalItems = res.total) + ) } async deleteSelectedVideos () { - const toDeleteVideosIds = Object.keys(this.checkedVideos) - .filter(k => this.checkedVideos[k] === true) - .map(k => parseInt(k, 10)) - - const res = await this.confirmService.confirm(`Do you really want to delete ${toDeleteVideosIds.length} videos?`, 'Delete') + const toDeleteVideosIds = Object.keys(this.selection) + .filter(k => this.selection[ k ] === true) + .map(k => parseInt(k, 10)) + + const res = await this.confirmService.confirm( + this.i18n('Do you really want to delete {{deleteLength}} videos?', { deleteLength: toDeleteVideosIds.length }), + this.i18n('Delete') + ) if (res === false) return const observables: Observable[] = [] for (const videoId of toDeleteVideosIds) { - const o = this.videoService - .removeVideo(videoId) - .pipe(tap(() => this.spliceVideosById(videoId))) + const o = this.videoService.removeVideo(videoId) + .pipe(tap(() => this.removeVideoFromArray(videoId))) observables.push(o) } - observableFrom(observables).pipe( - concatAll()) + concat(...observables) + .pipe(toArray()) .subscribe( - res => { - this.notificationsService.success('Success', `${toDeleteVideosIds.length} videos deleted.`) - this.abortSelectionMode() - this.reloadVideos() + () => { + this.notifier.success(this.i18n('{{deleteLength}} videos deleted.', { deleteLength: toDeleteVideosIds.length })) + + this.selection = {} }, - err => this.notificationsService.error('Error', err.message) + err => this.notifier.error(err.message) ) } async deleteVideo (video: Video) { - const res = await this.confirmService.confirm(`Do you really want to delete ${video.name}?`, 'Delete') + const res = await this.confirmService.confirm( + this.i18n('Do you really want to delete {{videoName}}?', { videoName: video.name }), + this.i18n('Delete') + ) if (res === false) return this.videoService.removeVideo(video.id) - .subscribe( - status => { - this.notificationsService.success('Success', `Video ${video.name} deleted.`) - this.reloadVideos() - }, - - error => this.notificationsService.error('Error', error.message) - ) + .subscribe( + () => { + this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: video.name })) + this.removeVideoFromArray(video.id) + }, + + error => this.notifier.error(error.message) + ) } - protected buildVideoHeight () { - // In account videos, the video height is fixed - return this.baseVideoHeight + changeOwnership (event: Event, video: Video) { + event.preventDefault() + this.videoChangeOwnershipModal.show(video) } - private spliceVideosById (id: number) { - for (const key of Object.keys(this.loadedPages)) { - const videos = this.loadedPages[key] - const index = videos.findIndex(v => v.id === id) - - if (index !== -1) { - videos.splice(index, 1) - return - } - } + private removeVideoFromArray (id: number) { + this.videos = this.videos.filter(v => v.id !== id) } }