Add live info in watch page

[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 831d5c5b0b1d7a26513616bc31b094add77ffbe4..84f022ad29b7afb6b97626f70a07e516160869b7 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,21 +1,15 @@
 import { concat, Observable, Subject } from 'rxjs'
-import { tap, toArray, debounceTime } from 'rxjs/operators'
-import { Component, ViewChild, OnInit } from '@angular/core'
+import { debounceTime, tap, toArray } from 'rxjs/operators'
+import { Component, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
-import { immutableAssign } from '@app/shared/misc/utils'
-import { ComponentPagination } from '@app/shared/rest/component-pagination.model'
-import { Notifier, ServerService } from '@app/core'
-import { AuthService } from '../../core/auth'
-import { ConfirmService } from '../../core/confirm'
-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 { 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',
@@ -25,23 +19,28 @@ import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 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
   }
   miniatureDisplayOptions: MiniatureDisplayOptions = {
     date: true,
     views: true,
-    by: false,
+    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>()
@@ -54,22 +53,27 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook {
     protected authService: AuthService,
     protected notifier: Notifier,
     protected screenService: ScreenService,
-    private i18n: I18n,
     private confirmService: ConfirmService,
     private videoService: VideoService
   ) {
-    this.titlePage = this.i18n('My videos')
+    this.titlePage = $localize`My videos`
   }
 
   ngOnInit () {
+    this.buildActions()
+
     this.videosSearchChanged
-      .pipe(
-        debounceTime(500))
+      .pipe(debounceTime(500))
       .subscribe(() => {
         this.videosSelection.reloadVideos()
       })
   }
 
+  resetSearch () {
+    this.videosSearch = ''
+    this.onVideosSearchChanged()
+  }
+
   onVideosSearchChanged () {
     this.videosSearchChanged.next()
   }
@@ -97,8 +101,8 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook {
                                     .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')
+      $localize`Do you really want to delete ${toDeleteVideosIds.length} videos?`,
+      $localize`Delete`
     )
     if (res === false) return
 
@@ -114,8 +118,7 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook {
       .pipe(toArray())
       .subscribe(
         () => {
-          this.notifier.success(this.i18n('{{deleteLength}} videos deleted.', { deleteLength: toDeleteVideosIds.length }))
-
+          this.notifier.success($localize`${toDeleteVideosIds.length} videos deleted.`)
           this.selection = {}
         },
 
@@ -125,15 +128,15 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook {
 
   async deleteVideo (video: Video) {
     const res = await this.confirmService.confirm(
-      this.i18n('Do you really want to delete {{videoName}}?', { videoName: video.name }),
-      this.i18n('Delete')
+      $localize`Do you really want to delete ${video.name}?`,
+      $localize`Delete`
     )
     if (res === false) return
 
     this.videoService.removeVideo(video.id)
         .subscribe(
           () => {
-            this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: video.name }))
+            this.notifier.success($localize`Video ${video.name} deleted.`)
             this.removeVideoFromArray(video.id)
           },
 
@@ -141,12 +144,36 @@ export class MyAccountVideosComponent implements OnInit, DisableForReuseHook {
         )
   }
 
-  changeOwnership (event: Event, video: Video) {
-    event.preventDefault()
+  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'
+      }
+    ]
+  }
 }