1 import { concat, Observable, Subject } from 'rxjs'
2 import { debounceTime, tap, toArray } from 'rxjs/operators'
3 import { Component, OnInit, ViewChild } from '@angular/core'
4 import { ActivatedRoute, Router } from '@angular/router'
5 import { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService } from '@app/core'
6 import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
7 import { immutableAssign } from '@app/helpers'
8 import { Video, VideoService } from '@app/shared/shared-main'
9 import { MiniatureDisplayOptions, OwnerDisplayType, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
10 import { VideoSortField } from '@shared/models'
11 import { VideoChangeOwnershipComponent } from './video-change-ownership/video-change-ownership.component'
14 selector: 'my-account-videos',
15 templateUrl: './my-account-videos.component.html',
16 styleUrls: [ './my-account-videos.component.scss' ]
18 export class MyAccountVideosComponent implements OnInit, DisableForReuseHook {
19 @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent
20 @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent
23 selection: SelectionType = {}
24 pagination: ComponentPagination = {
29 miniatureDisplayOptions: MiniatureDisplayOptions = {
38 ownerDisplayType: OwnerDisplayType = 'videoChannel'
42 videosSearchChanged = new Subject<string>()
43 getVideosObservableFunction = this.getVideosObservable.bind(this)
46 protected router: Router,
47 protected serverService: ServerService,
48 protected route: ActivatedRoute,
49 protected authService: AuthService,
50 protected notifier: Notifier,
51 protected screenService: ScreenService,
52 private confirmService: ConfirmService,
53 private videoService: VideoService
55 this.titlePage = $localize`My videos`
59 this.videosSearchChanged
60 .pipe(debounceTime(500))
62 this.videosSelection.reloadVideos()
67 this.videosSearch = ''
68 this.onVideosSearchChanged()
71 onVideosSearchChanged () {
72 this.videosSearchChanged.next()
76 this.videosSelection.disableForReuse()
80 this.videosSelection.enabledForReuse()
83 getVideosObservable (page: number, sort: VideoSortField) {
84 const newPagination = immutableAssign(this.pagination, { currentPage: page })
86 return this.videoService.getMyVideos(newPagination, sort, this.videosSearch)
88 tap(res => this.pagination.totalItems = res.total)
92 async deleteSelectedVideos () {
93 const toDeleteVideosIds = Object.keys(this.selection)
94 .filter(k => this.selection[ k ] === true)
95 .map(k => parseInt(k, 10))
97 const res = await this.confirmService.confirm(
98 $localize`Do you really want to delete ${toDeleteVideosIds.length} videos?`,
101 if (res === false) return
103 const observables: Observable<any>[] = []
104 for (const videoId of toDeleteVideosIds) {
105 const o = this.videoService.removeVideo(videoId)
106 .pipe(tap(() => this.removeVideoFromArray(videoId)))
111 concat(...observables)
115 this.notifier.success($localize`${toDeleteVideosIds.length} videos deleted.`)
119 err => this.notifier.error(err.message)
123 async deleteVideo (video: Video) {
124 const res = await this.confirmService.confirm(
125 $localize`Do you really want to delete ${video.name}?`,
128 if (res === false) return
130 this.videoService.removeVideo(video.id)
133 this.notifier.success($localize`Video ${video.name} deleted.`)
134 this.removeVideoFromArray(video.id)
137 error => this.notifier.error(error.message)
141 changeOwnership (event: Event, video: Video) {
142 event.preventDefault()
143 this.videoChangeOwnershipModal.show(video)
146 private removeVideoFromArray (id: number) {
147 this.videos = this.videos.filter(v => v.id !== id)