X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bmy-library%2Fmy-videos%2Fmy-videos.component.ts;h=57b8bdf7de26518bb0671d08456dfff7e513ada6;hb=HEAD;hp=4f9b71cc6052c2fa36b53627aa97af6f09319b5d;hpb=1378c0d343028f3d40d7d795422684ab9e6a1599;p=github%2FChocobozzz%2FPeerTube.git diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts index 4f9b71cc6..57b8bdf7d 100644 --- a/client/src/app/+my-library/my-videos/my-videos.component.ts +++ b/client/src/app/+my-library/my-videos/my-videos.component.ts @@ -1,15 +1,22 @@ +import { uniqBy } from 'lodash-es' import { concat, Observable } from 'rxjs' import { tap, toArray } from 'rxjs/operators' import { Component, OnInit, ViewChild } from '@angular/core' import { ActivatedRoute, Router } from '@angular/router' import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService, User } from '@app/core' import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook' -import { immutableAssign } from '@app/helpers' +import { immutableAssign, prepareIcu } from '@app/helpers' import { AdvancedInputFilter } from '@app/shared/shared-forms' import { DropdownAction, Video, VideoService } from '@app/shared/shared-main' import { LiveStreamInformationComponent } from '@app/shared/shared-video-live' -import { MiniatureDisplayOptions, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature' -import { VideoSortField } from '@shared/models' +import { + MiniatureDisplayOptions, + SelectionType, + VideoActionsDisplayType, + VideosSelectionComponent +} from '@app/shared/shared-video-miniature' +import { VideoPlaylistService } from '@app/shared/shared-video-playlist' +import { VideoChannel, VideoExistInPlaylist, VideosExistInPlaylists, VideoSortField } from '@shared/models' import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component' @Component({ @@ -21,6 +28,7 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook { @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent @ViewChild('liveStreamInformationModal', { static: true }) liveStreamInformationModal: LiveStreamInformationComponent + videosContainedInPlaylists: VideosExistInPlaylists = {} titlePage: string selection: SelectionType = {} pagination: ComponentPagination = { @@ -35,10 +43,26 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook { privacyLabel: false, privacyText: true, state: true, - blacklistInfo: true - } - - videoActions: DropdownAction<{ video: Video }>[] = [] + blacklistInfo: true, + forceChannelInBy: true + } + videoDropdownDisplayOptions: VideoActionsDisplayType = { + playlist: false, + download: false, + update: false, + blacklist: false, + delete: true, + report: false, + duplicate: false, + mute: false, + liveInfo: true, + removeFiles: false, + transcoding: false, + studio: true, + stats: true + } + + moreVideoActions: DropdownAction<{ video: Video }>[][] = [] videos: Video[] = [] getVideosObservableFunction = this.getVideosObservable.bind(this) @@ -47,14 +71,12 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook { user: User - inputFilters: AdvancedInputFilter[] = [ - { - queryParams: { 'search': 'isLive:true' }, - label: $localize`Only live videos` - } - ] + inputFilters: AdvancedInputFilter[] = [] + + disabled = false private search: string + private userChannels: VideoChannel[] = [] constructor ( protected router: Router, @@ -64,7 +86,8 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook { protected notifier: Notifier, protected screenService: ScreenService, private confirmService: ConfirmService, - private videoService: VideoService + private videoService: VideoService, + private playlistService: VideoPlaylistService ) { this.titlePage = $localize`My videos` } @@ -73,6 +96,41 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook { this.buildActions() this.user = this.authService.getUser() + + if (this.route.snapshot.queryParams['search']) { + this.search = this.route.snapshot.queryParams['search'] + } + + this.authService.userInformationLoaded.subscribe(() => { + this.user = this.authService.getUser() + this.userChannels = this.user.videoChannels + + const channelFilters = [ ...this.userChannels ] + .sort((a, b) => a.displayName.localeCompare(b.displayName)) + .map(c => { + return { + value: 'channel:' + c.name, + label: c.displayName + } + }) + + this.inputFilters = [ + { + title: $localize`Advanced filters`, + children: [ + { + value: 'isLive:true', + label: $localize`Only live videos` + } + ] + }, + + { + title: $localize`Channel filters`, + children: channelFilters + } + ] + }) } onSearch (search: string) { @@ -89,29 +147,47 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook { } disableForReuse () { - this.videosSelection.disableForReuse() + this.disabled = true } enabledForReuse () { - this.videosSelection.enabledForReuse() + this.disabled = false } getVideosObservable (page: number) { const newPagination = immutableAssign(this.pagination, { currentPage: page }) - return this.videoService.getMyVideos(newPagination, this.sort, this.search) - .pipe( - tap(res => this.pagination.totalItems = res.total) - ) + return this.videoService.getMyVideos({ + videoPagination: newPagination, + sort: this.sort, + userChannels: this.userChannels, + search: this.search + }).pipe( + tap(res => this.pagination.totalItems = res.total), + tap(({ data }) => this.fetchVideosContainedInPlaylists(data)) + ) + } + + private fetchVideosContainedInPlaylists (videos: Video[]) { + this.playlistService.doVideosExistInPlaylist(videos.map(v => v.id)) + .subscribe(result => { + this.videosContainedInPlaylists = Object.keys(result).reduce((acc, videoId) => ({ + ...acc, + [videoId]: uniqBy(result[+videoId], (p: VideoExistInPlaylist) => p.playlistId) + }), this.videosContainedInPlaylists) + }) } async deleteSelectedVideos () { - const toDeleteVideosIds = Object.keys(this.selection) - .filter(k => this.selection[ k ] === true) - .map(k => parseInt(k, 10)) + const toDeleteVideosIds = Object.entries(this.selection) + .filter(([ _k, v ]) => v === true) + .map(([ k, _v ]) => parseInt(k, 10)) const res = await this.confirmService.confirm( - $localize`Do you really want to delete ${toDeleteVideosIds.length} videos?`, + prepareIcu($localize`Do you really want to delete {length, plural, =1 {this video} other {{length} videos}}?`)( + { length: toDeleteVideosIds.length }, + $localize`Do you really want to delete ${toDeleteVideosIds.length} videos?` + ), $localize`Delete` ) if (res === false) return @@ -128,7 +204,13 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook { .pipe(toArray()) .subscribe({ next: () => { - this.notifier.success($localize`${toDeleteVideosIds.length} videos deleted.`) + this.notifier.success( + prepareIcu($localize`{length, plural, =1 {Video has been deleted} other {{length} videos have been deleted}}`)( + { length: toDeleteVideosIds.length }, + $localize`${toDeleteVideosIds.length} have been deleted.` + ) + ) + this.selection = {} }, @@ -136,54 +218,27 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook { }) } - async deleteVideo (video: Video) { - const res = await this.confirmService.confirm( - $localize`Do you really want to delete ${video.name}?`, - $localize`Delete` - ) - if (res === false) return - - this.videoService.removeVideo(video.id) - .subscribe({ - next: () => { - this.notifier.success($localize`Video ${video.name} deleted.`) - this.removeVideoFromArray(video.id) - }, - - error: err => this.notifier.error(err.message) - }) + onVideoRemoved (video: Video) { + this.removeVideoFromArray(video.id) } changeOwnership (video: Video) { this.videoChangeOwnershipModal.show(video) } - displayLiveInformation (video: Video) { - this.liveStreamInformationModal.show(video) - } - private removeVideoFromArray (id: number) { this.videos = this.videos.filter(v => v.id !== id) } private buildActions () { - this.videoActions = [ - { - label: $localize`Display live information`, - handler: ({ video }) => this.displayLiveInformation(video), - isDisplayed: ({ video }) => video.isLive, - iconName: 'live' - }, - { - label: $localize`Change ownership`, - handler: ({ video }) => this.changeOwnership(video), - iconName: 'ownership-change' - }, - { - label: $localize`Delete`, - handler: ({ video }) => this.deleteVideo(video), - iconName: 'delete' - } + this.moreVideoActions = [ + [ + { + label: $localize`Change ownership`, + handler: ({ video }) => this.changeOwnership(video), + iconName: 'ownership-change' + } + ] ] } }