Add videos list admin component

7 files changed, 255 insertions, 1 deletions

diff --git a/client/src/app/+admin/overview/index.ts b/client/src/app/+admin/overview/index.ts
index b71a6a45f..a9c46893f 100644
--- a/client/src/app/+admin/overview/index.ts
+++ b/client/src/app/+admin/overview/index.ts
@@ -1,2 +1,3 @@
 export * from './users'
+export * from './videos'
 export * from './overview.routes'
diff --git a/client/src/app/+admin/overview/overview.routes.ts b/client/src/app/+admin/overview/overview.routes.ts
index cb5986072..1e6686d16 100644
--- a/client/src/app/+admin/overview/overview.routes.ts
+++ b/client/src/app/+admin/overview/overview.routes.ts
@@ -1,6 +1,8 @@
 import { Routes } from '@angular/router'
 import { UsersRoutes } from './users'
+import { VideosRoutes } from './videos'
 
 export const OverviewRoutes: Routes = [
-  ...UsersRoutes
+  ...UsersRoutes,
+  ...VideosRoutes
 ]
diff --git a/client/src/app/+admin/overview/videos/index.ts b/client/src/app/+admin/overview/videos/index.ts
new file mode 100644
index 000000000..40c2ffe72
--- /dev/null
+++ b/client/src/app/+admin/overview/videos/index.ts
@@ -0,0 +1,2 @@
+export * from './video-list.component'
+export * from './video.routes'
diff --git a/client/src/app/+admin/overview/videos/video-list.component.html b/client/src/app/+admin/overview/videos/video-list.component.html
new file mode 100644
index 000000000..1f1e9cc6e
--- /dev/null
+++ b/client/src/app/+admin/overview/videos/video-list.component.html
@@ -0,0 +1,86 @@
+<h1>
+  <my-global-icon iconName="videos" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>Videos</ng-container>
+</h1>
+
+<p-table
+  [value]="videos" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [sortField]="sort.field" [sortOrder]="sort.order"  dataKey="id" [resizableColumns]="true" [(selection)]="selectedVideos"
+  [lazy]="true" (onLazyLoad)="loadLazy($event)" [lazyLoadOnInit]="false"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} videos"
+  (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
+>
+  <ng-template pTemplate="caption">
+    <div class="caption">
+      <div class="left-buttons">
+        <my-action-dropdown
+          *ngIf="isInSelectionMode()" i18n-label label="Batch actions" theme="orange"
+          [actions]="bulkVideoActions" [entry]="selectedVideos"
+        >
+        </my-action-dropdown>
+      </div>
+
+      <div class="ml-auto">
+        <my-advanced-input-filter [filters]="inputFilters" (search)="onSearch($event)"></my-advanced-input-filter>
+      </div>
+
+    </div>
+  </ng-template>
+
+  <ng-template pTemplate="header">
+    <tr>
+      <th style="width: 40px">
+        <p-tableHeaderCheckbox ariaLabel="Select all rows" i18n-ariaLabel></p-tableHeaderCheckbox>
+      </th>
+      <th style="width: 40px"></th>
+      <th style="width: 60px;"></th>
+      <th i18n>Video</th>
+      <th i18n>Info</th>
+      <th style="width: 150px;" i18n pSortableColumn="publishedAt">Published <p-sortIcon field="publishedAt"></p-sortIcon></th>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="body" let-expanded="expanded" let-video>
+
+    <tr [pSelectableRow]="video">
+      <td class="checkbox-cell">
+        <p-tableCheckbox [value]="video" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox>
+      </td>
+
+      <td class="expand-cell" [pRowToggler]="video">
+        <my-table-expander-icon [expanded]="expanded"></my-table-expander-icon>
+      </td>
+
+      <td class="action-cell">
+        <my-video-actions-dropdown
+          placement="bottom auto" buttonDirection="horizontal" [buttonStyled]="true" [video]="video"
+          [displayOptions]="videoActionsOptions" (videoRemoved)="onVideoRemoved()"
+        ></my-video-actions-dropdown>
+      </td>
+
+      <td>
+        <my-video-cell [video]="video"></my-video-cell>
+      </td>
+
+      <td>
+        <span class="badge badge-blue" i18n>{{ video.privacy.label }}</span>
+        <span *ngIf="video.nsfw" class="badge badge-red" i18n>NSFW</span>
+        <span *ngIf="video.blocked" class="badge badge-red" i18n>NSFW</span>
+      </td>
+
+      <td>
+        {{ video.publishedAt | date: 'short' }}
+      </td>
+
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="rowexpansion" let-video>
+    <tr>
+      <td colspan="50">
+        <my-embed [video]="video"></my-embed>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
diff --git a/client/src/app/+admin/overview/videos/video-list.component.scss b/client/src/app/+admin/overview/videos/video-list.component.scss
new file mode 100644
index 000000000..fcdb457f2
--- /dev/null
+++ b/client/src/app/+admin/overview/videos/video-list.component.scss
@@ -0,0 +1,10 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+my-embed {
+  display: block;
+  max-width: 500px;
+}
+
+.badge {
+  @include table-badge;
+}
diff --git a/client/src/app/+admin/overview/videos/video-list.component.ts b/client/src/app/+admin/overview/videos/video-list.component.ts
new file mode 100644
index 000000000..a445bc209
--- /dev/null
+++ b/client/src/app/+admin/overview/videos/video-list.component.ts
@@ -0,0 +1,123 @@
+import { SortMeta } from 'primeng/api'
+import { Component, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { AuthService, ConfirmService, Notifier, RestPagination, RestTable } from '@app/core'
+import { DropdownAction, Video, VideoService } from '@app/shared/shared-main'
+import { UserRight } from '@shared/models'
+import { AdvancedInputFilter } from '@app/shared/shared-forms'
+import { VideoActionsDisplayType } from '@app/shared/shared-video-miniature'
+
+@Component({
+  selector: 'my-video-list',
+  templateUrl: './video-list.component.html',
+  styleUrls: [ './video-list.component.scss' ]
+})
+export class VideoListComponent extends RestTable implements OnInit {
+  videos: Video[] = []
+
+  totalRecords = 0
+  sort: SortMeta = { field: 'publishedAt', order: 1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+
+  bulkVideoActions: DropdownAction<Video[]>[][] = []
+
+  selectedVideos: Video[] = []
+
+  inputFilters: AdvancedInputFilter[] = [
+    {
+      title: $localize`Advanced filters`,
+      children: [
+        {
+          queryParams: { search: 'local:true' },
+          label: $localize`Only local videos`
+        }
+      ]
+    }
+  ]
+
+  videoActionsOptions: VideoActionsDisplayType = {
+    playlist: false,
+    download: false,
+    update: true,
+    blacklist: true,
+    delete: true,
+    report: false,
+    duplicate: true,
+    mute: true,
+    liveInfo: false
+  }
+
+  constructor (
+    protected route: ActivatedRoute,
+    protected router: Router,
+    private confirmService: ConfirmService,
+    private auth: AuthService,
+    private notifier: Notifier,
+    private videoService: VideoService
+  ) {
+    super()
+  }
+
+  get authUser () {
+    return this.auth.getUser()
+  }
+
+  ngOnInit () {
+    this.initialize()
+
+    this.bulkVideoActions = [
+      [
+        {
+          label: $localize`Delete`,
+          handler: videos => this.removeVideos(videos),
+          isDisplayed: () => this.authUser.hasRight(UserRight.REMOVE_ANY_VIDEO)
+        }
+      ]
+    ]
+  }
+
+  getIdentifier () {
+    return 'VideoListComponent'
+  }
+
+  isInSelectionMode () {
+    return this.selectedVideos.length !== 0
+  }
+
+  onVideoRemoved () {
+    this.reloadData()
+  }
+
+  protected reloadData () {
+    this.selectedVideos = []
+
+    this.videoService.getAdminVideos({
+      pagination: this.pagination,
+      sort: this.sort,
+      search: this.search
+    }).subscribe({
+      next: resultList => {
+        this.videos = resultList.data
+        this.totalRecords = resultList.total
+      },
+
+      error: err => this.notifier.error(err.message)
+    })
+  }
+
+  private async removeVideos (videos: Video[]) {
+    const message = $localize`Are you sure you want to delete these ${videos.length} videos?`
+    const res = await this.confirmService.confirm(message, $localize`Delete`)
+    if (res === false) return
+
+    this.videoService.removeVideo(videos.map(v => v.id))
+      .subscribe({
+        next: () => {
+          this.notifier.success($localize`${videos.length} videos deleted.`)
+          this.reloadData()
+        },
+
+        error: err => this.notifier.error(err.message)
+      })
+  }
+}
diff --git a/client/src/app/+admin/overview/videos/video.routes.ts b/client/src/app/+admin/overview/videos/video.routes.ts
new file mode 100644
index 000000000..984df7b82
--- /dev/null
+++ b/client/src/app/+admin/overview/videos/video.routes.ts
@@ -0,0 +1,30 @@
+import { Routes } from '@angular/router'
+import { UserRightGuard } from '@app/core'
+import { UserRight } from '@shared/models'
+import { VideoListComponent } from './video-list.component'
+
+export const VideosRoutes: Routes = [
+  {
+    path: 'videos',
+    canActivate: [ UserRightGuard ],
+    data: {
+      userRight: UserRight.SEE_ALL_VIDEOS
+    },
+    children: [
+      {
+        path: '',
+        redirectTo: 'list',
+        pathMatch: 'full'
+      },
+      {
+        path: 'list',
+        component: VideoListComponent,
+        data: {
+          meta: {
+            title: $localize`Videos list`
+          }
+        }
+      }
+    ]
+  }
+]