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=84f022ad29b7afb6b97626f70a07e516160869b7;hb=f8c00564e7e66c7c9d65ea044a4c1485df0e4c7c;hp=6ab6c2aa56a2eab0db31655567b7b0e22ef6cfcd;hpb=06be7ed0b27b371465c5d1b7f92b4adfb0b866ea;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 6ab6c2aa5..84f022ad2 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,130 +1,179 @@
-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 { debounceTime, tap, toArray } from 'rxjs/operators'
+import { Component, OnInit, ViewChild } 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 { 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 { AuthService, ComponentPagination, ConfirmService, Notifier, ScreenService, ServerService } from '@app/core'
+import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
+import { immutableAssign } from '@app/helpers'
+import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
+import { LiveStreamInformationComponent } from '@app/shared/shared-video-live'
+import { MiniatureDisplayOptions, OwnerDisplayType, SelectionType, VideosSelectionComponent } from '@app/shared/shared-video-miniature'
+import { VideoSortField } from '@shared/models'
+import { VideoChangeOwnershipComponent } from './modals/video-change-ownership.component'
 
 @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 {
-  titlePage = 'My videos'
-  currentRoute = '/my-account/videos'
-  checkedVideos: { [ id: number ]: boolean } = {}
+export class MyAccountVideosComponent implements OnInit, DisableForReuseHook {
+  @ViewChild('videosSelection', { static: true }) videosSelection: VideosSelectionComponent
+  @ViewChild('videoChangeOwnershipModal', { static: true }) videoChangeOwnershipModal: VideoChangeOwnershipComponent
+  @ViewChild('liveStreamInformationModal', { static: true }) liveStreamInformationModal: LiveStreamInformationComponent
+
+  titlePage: string
+  selection: SelectionType = {}
   pagination: ComponentPagination = {
     currentPage: 1,
-    itemsPerPage: 5,
+    itemsPerPage: 10,
     totalItems: null
   }
-
-  protected baseVideoWidth = -1
-  protected baseVideoHeight = 155
-
-  constructor (protected router: Router,
-               protected route: ActivatedRoute,
-               protected authService: AuthService,
-               protected notificationsService: NotificationsService,
-               protected confirmService: ConfirmService,
-               protected location: Location,
-               private videoService: VideoService) {
-    super()
+  miniatureDisplayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    privacyLabel: false,
+    privacyText: true,
+    state: true,
+    blacklistInfo: true
+  }
+  ownerDisplayType: OwnerDisplayType = 'videoChannel'
+
+  videoActions: DropdownAction<{ video: Video }>[] = []
+
+  videos: Video[] = []
+  videosSearch: string
+  videosSearchChanged = new Subject<string>()
+  getVideosObservableFunction = this.getVideosObservable.bind(this)
+
+  constructor (
+    protected router: Router,
+    protected serverService: ServerService,
+    protected route: ActivatedRoute,
+    protected authService: AuthService,
+    protected notifier: Notifier,
+    protected screenService: ScreenService,
+    private confirmService: ConfirmService,
+    private videoService: VideoService
+  ) {
+    this.titlePage = $localize`My videos`
   }
 
   ngOnInit () {
-    super.ngOnInit()
-  }
+    this.buildActions()
 
-  ngOnDestroy () {
-    super.ngOnDestroy()
+    this.videosSearchChanged
+      .pipe(debounceTime(500))
+      .subscribe(() => {
+        this.videosSelection.reloadVideos()
+      })
   }
 
-  abortSelectionMode () {
-    this.checkedVideos = {}
+  resetSearch () {
+    this.videosSearch = ''
+    this.onVideosSearchChanged()
   }
 
-  isInSelectionMode () {
-    return Object.keys(this.checkedVideos).some(k => this.checkedVideos[k] === true)
+  onVideosSearchChanged () {
+    this.videosSearchChanged.next()
   }
 
-  getVideosObservable (page: number) {
-    const newPagination = immutableAssign(this.pagination, { currentPage: page })
+  disableForReuse () {
+    this.videosSelection.disableForReuse()
+  }
 
-    return this.videoService.getMyVideos(newPagination, this.sort)
+  enabledForReuse () {
+    this.videosSelection.enabledForReuse()
   }
 
-  generateSyndicationList () {
-    throw new Error('Method not implemented.')
+  getVideosObservable (page: number, sort: VideoSortField) {
+    const newPagination = immutableAssign(this.pagination, { currentPage: page })
+
+    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(
+      $localize`Do you really want to delete ${toDeleteVideosIds.length} videos?`,
+      $localize`Delete`
+    )
     if (res === false) return
 
     const observables: Observable<any>[] = []
     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($localize`${toDeleteVideosIds.length} videos deleted.`)
+          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(
+      $localize`Do you really want to delete ${video.name}?`,
+      $localize`Delete`
+    )
     if (res === false) return
 
     this.videoService.removeVideo(video.id)
-      .subscribe(
-        status => {
-          this.notificationsService.success('Success', `Video ${video.name} deleted.`)
-          this.reloadVideos()
-        },
+        .subscribe(
+          () => {
+            this.notifier.success($localize`Video ${video.name} deleted.`)
+            this.removeVideoFromArray(video.id)
+          },
+
+          error => this.notifier.error(error.message)
+        )
+  }
 
-        error => this.notificationsService.error('Error', error.message)
-      )
+  changeOwnership (video: Video) {
+    this.videoChangeOwnershipModal.show(video)
   }
 
-  protected buildVideoHeight () {
-    // In account videos, the video height is fixed
-    return this.baseVideoHeight
+  displayLiveInformation (video: Video) {
+    this.liveStreamInformationModal.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)
+  private removeVideoFromArray (id: number) {
+    this.videos = this.videos.filter(v => v.id !== id)
+  }
 
-      if (index !== -1) {
-        videos.splice(index, 1)
-        return
+  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'
       }
-    }
+    ]
   }
 }