Add ability to schedule video publication

[github/Chocobozzz/PeerTube.git] / client / src / app / +my-account / my-account-videos / my-account-videos.component.ts

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 c1b53bcd5f8b999ed0d7c1f47e206745b125f8e5..e698b75ec1e256e96181a886c52c02b9edd45e24 100644 (file)
--- 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,17 +1,19 @@
-import { Component, OnInit, OnDestroy } from '@angular/core'
+import { from as observableFrom, Observable } from 'rxjs'
+import { concatAll, tap } from 'rxjs/operators'
+import { Component, OnDestroy, OnInit, Inject, LOCALE_ID } 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 'rxjs/add/observable/from'
-import 'rxjs/add/operator/concatAll'
-import { Observable } from 'rxjs/Observable'
 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 { VideoPrivacy, VideoState } from '../../../../../shared/models/videos'
+import { ScreenService } from '@app/shared/misc/screen.service'
 
 @Component({
   selector: 'my-account-videos',
@@ -19,7 +21,7 @@ import { VideoService } from '../../shared/video/video.service'
   styleUrls: [ './my-account-videos.component.scss' ]
 })
 export class MyAccountVideosComponent extends AbstractVideoList implements OnInit, OnDestroy {
-  titlePage = 'My videos'
+  titlePage: string
   currentRoute = '/my-account/videos'
   checkedVideos: { [ id: number ]: boolean } = {}
   pagination: ComponentPagination = {
@@ -31,14 +33,21 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
   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) {
+  constructor (
+    protected router: Router,
+    protected route: ActivatedRoute,
+    protected authService: AuthService,
+    protected notificationsService: NotificationsService,
+    protected confirmService: ConfirmService,
+    protected location: Location,
+    protected screenService: ScreenService,
+    protected i18n: I18n,
+    private videoService: VideoService,
+    @Inject(LOCALE_ID) private localeId: string
+  ) {
     super()
+
+    this.titlePage = this.i18n('My videos')
   }
 
   ngOnInit () {
@@ -54,7 +63,7 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
   }
 
   isInSelectionMode () {
-    return Object.keys(this.checkedVideos).some(k => this.checkedVideos[k] === true)
+    return Object.keys(this.checkedVideos).some(k => this.checkedVideos[ k ] === true)
   }
 
   getVideosObservable (page: number) {
@@ -69,47 +78,78 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
 
   async deleteSelectedVideos () {
     const toDeleteVideosIds = Object.keys(this.checkedVideos)
-      .filter(k => this.checkedVideos[k] === true)
-      .map(k => parseInt(k, 10))
+                                    .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 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<any>[] = []
     for (const videoId of toDeleteVideosIds) {
-      const o = this.videoService
-        .removeVideo(videoId)
-        .do(() => this.spliceVideosById(videoId))
+      const o = this.videoService.removeVideo(videoId)
+                    .pipe(tap(() => this.spliceVideosById(videoId)))
 
       observables.push(o)
     }
 
-    Observable.from(observables)
-      .concatAll()
+    observableFrom(observables)
+      .pipe(concatAll())
       .subscribe(
         res => {
-          this.notificationsService.success('Success', `${toDeleteVideosIds.length} videos deleted.`)
-          this.buildVideoPages()
+          this.notificationsService.success(
+            this.i18n('Success'),
+            this.i18n('{{deleteLength}} videos deleted.', { deleteLength: toDeleteVideosIds.length })
+          )
+
+          this.abortSelectionMode()
+          this.reloadVideos()
         },
 
-        err => this.notificationsService.error('Error', err.message)
+        err => this.notificationsService.error(this.i18n('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.spliceVideosById(video.id)
-          this.buildVideoPages()
-        },
+        .subscribe(
+          status => {
+            this.notificationsService.success(
+              this.i18n('Success'),
+              this.i18n('Video {{videoName}} deleted.', { videoName: video.name })
+            )
+            this.reloadVideos()
+          },
+
+          error => this.notificationsService.error(this.i18n('Error'), error.message)
+        )
+  }
 
-        error => this.notificationsService.error('Error', error.message)
-      )
+  getStateLabel (video: Video) {
+    let suffix: string
+
+    if (video.privacy.id !== VideoPrivacy.PRIVATE && video.state.id === VideoState.PUBLISHED) {
+      suffix = this.i18n('Published')
+    } else if (video.scheduledUpdate) {
+      const updateAt = new Date(video.scheduledUpdate.updateAt.toString()).toLocaleString(this.localeId)
+      suffix = this.i18n('Publication scheduled on ') + updateAt
+    } else if (video.state.id === VideoState.TO_TRANSCODE && video.waitTranscoding === true) {
+      suffix = this.i18n('Waiting transcoding')
+    } else if (video.state.id === VideoState.TO_TRANSCODE) {
+      suffix = this.i18n('To transcode')
+    } else {
+      return ''
+    }
+
+    return ' - ' + suffix
   }
 
   protected buildVideoHeight () {
@@ -119,7 +159,7 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
 
   private spliceVideosById (id: number) {
     for (const key of Object.keys(this.loadedPages)) {
-      const videos = this.loadedPages[key]
+      const videos = this.loadedPages[ key ]
       const index = videos.findIndex(v => v.id === id)
 
       if (index !== -1) {