Add videos list admin component

6 files changed, 126 insertions, 21 deletions

diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 93989780d..a90b59e41 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -43,13 +43,8 @@ import {
 } from './misc'
 import { PluginPlaceholderComponent } from './plugins'
 import { ActorRedirectGuard } from './router'
-import {
-  UserHistoryService,
-  UserNotificationsComponent,
-  UserNotificationService,
-  UserQuotaComponent
-} from './users'
-import { RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video'
+import { UserHistoryService, UserNotificationsComponent, UserNotificationService, UserQuotaComponent } from './users'
+import { EmbedComponent, RedundancyService, VideoImportService, VideoOwnershipService, VideoService } from './video'
 import { VideoCaptionService } from './video-caption'
 import { VideoChannelService } from './video-channel'
 
@@ -111,6 +106,8 @@ import { VideoChannelService } from './video-channel'
     UserQuotaComponent,
     UserNotificationsComponent,
 
+    EmbedComponent,
+
     PluginPlaceholderComponent
   ],
 
@@ -167,6 +164,8 @@ import { VideoChannelService } from './video-channel'
     UserQuotaComponent,
     UserNotificationsComponent,
 
+    EmbedComponent,
+
     PluginPlaceholderComponent
   ],
 
diff --git a/client/src/app/shared/shared-main/video/embed.component.html b/client/src/app/shared/shared-main/video/embed.component.html
new file mode 100644
index 000000000..3b088d058
--- /dev/null
+++ b/client/src/app/shared/shared-main/video/embed.component.html
@@ -0,0 +1,3 @@
+<div class="screenratio">
+  <div [innerHTML]="embedHTML"></div>
+</div>
diff --git a/client/src/app/shared/shared-main/video/embed.component.scss b/client/src/app/shared/shared-main/video/embed.component.scss
new file mode 100644
index 000000000..420ba6f23
--- /dev/null
+++ b/client/src/app/shared/shared-main/video/embed.component.scss
@@ -0,0 +1,10 @@
+@use '_mixins' as *;
+@use '_variables' as *;
+
+.screenratio {
+  @include block-ratio($selector: 'div, ::ng-deep iframe') {
+    width: 100% !important;
+    height: 100% !important;
+    left: 0;
+  };
+}
diff --git a/client/src/app/shared/shared-main/video/embed.component.ts b/client/src/app/shared/shared-main/video/embed.component.ts
new file mode 100644
index 000000000..4732efa44
--- /dev/null
+++ b/client/src/app/shared/shared-main/video/embed.component.ts
@@ -0,0 +1,35 @@
+import { buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
+import { environment } from 'src/environments/environment'
+import { Component, Input, OnInit } from '@angular/core'
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
+import { buildVideoEmbedLink, decorateVideoLink } from '@shared/core-utils'
+import { Video } from '@shared/models'
+
+@Component({
+  selector: 'my-embed',
+  styleUrls: [ './embed.component.scss' ],
+  templateUrl: './embed.component.html'
+})
+export class EmbedComponent implements OnInit {
+  @Input() video: Pick<Video, 'name' | 'uuid'>
+
+  embedHTML: SafeHtml
+
+  constructor (private sanitizer: DomSanitizer) {
+
+  }
+
+  ngOnInit () {
+    const html = buildVideoOrPlaylistEmbed(
+      decorateVideoLink({
+        url: buildVideoEmbedLink(this.video, environment.originServerUrl),
+
+        title: false,
+        warningTitle: false
+      }),
+      this.video.name
+    )
+
+    this.embedHTML = this.sanitizer.bypassSecurityTrustHtml(html)
+  }
+}
diff --git a/client/src/app/shared/shared-main/video/index.ts b/client/src/app/shared/shared-main/video/index.ts
index 3053df4ef..e72c0c3d6 100644
--- a/client/src/app/shared/shared-main/video/index.ts
+++ b/client/src/app/shared/shared-main/video/index.ts
@@ -1,3 +1,4 @@
+export * from './embed.component'
 export * from './redundancy.service'
 export * from './video-details.model'
 export * from './video-edit.model'
diff --git a/client/src/app/shared/shared-main/video/video.service.ts b/client/src/app/shared/shared-main/video/video.service.ts
index 7935569e7..9e3aa1e6a 100644
--- a/client/src/app/shared/shared-main/video/video.service.ts
+++ b/client/src/app/shared/shared-main/video/video.service.ts
@@ -1,8 +1,9 @@
-import { Observable } from 'rxjs'
-import { catchError, map, switchMap } from 'rxjs/operators'
+import { SortMeta } from 'primeng/api'
+import { from, Observable } from 'rxjs'
+import { catchError, concatMap, map, switchMap, toArray } from 'rxjs/operators'
 import { HttpClient, HttpParams, HttpRequest } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { ComponentPaginationLight, RestExtractor, RestService, ServerService, UserService } from '@app/core'
+import { ComponentPaginationLight, RestExtractor, RestPagination, RestService, ServerService, UserService } from '@app/core'
 import { objectToFormData } from '@app/helpers'
 import {
   BooleanBothQuery,
@@ -31,8 +32,8 @@ import { VideoEdit } from './video-edit.model'
 import { Video } from './video.model'
 
 export type CommonVideoParams = {
-  videoPagination: ComponentPaginationLight
-  sort: VideoSortField
+  videoPagination?: ComponentPaginationLight
+  sort: VideoSortField | SortMeta
   filter?: VideoFilter
   categoryOneOf?: number[]
   languageOneOf?: string[]
@@ -200,6 +201,31 @@ export class VideoService {
                )
   }
 
+  getAdminVideos (
+    parameters: Omit<CommonVideoParams, 'filter'> & { pagination: RestPagination, search?: string }
+  ): Observable<ResultList<Video>> {
+    const { pagination, search } = parameters
+
+    let params = new HttpParams()
+    params = this.buildCommonVideosParams({ params, ...parameters })
+
+    params = params.set('start', pagination.start.toString())
+                   .set('count', pagination.count.toString())
+
+    if (search) {
+      params = this.buildAdminParamsFromSearch(search, params)
+    }
+
+    if (!params.has('filter')) params = params.set('filter', 'all')
+
+    return this.authHttp
+               .get<ResultList<Video>>(VideoService.BASE_VIDEO_URL, { params })
+               .pipe(
+                 switchMap(res => this.extractVideos(res)),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
   getVideos (parameters: CommonVideoParams): Observable<ResultList<Video>> {
     let params = new HttpParams()
     params = this.buildCommonVideosParams({ params, ...parameters })
@@ -284,13 +310,15 @@ export class VideoService {
                )
   }
 
-  removeVideo (id: number) {
-    return this.authHttp
-               .delete(VideoService.BASE_VIDEO_URL + id)
-               .pipe(
-                 map(this.restExtractor.extractDataBool),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
+  removeVideo (idArg: number | number[]) {
+    const ids = Array.isArray(idArg) ? idArg : [ idArg ]
+
+    return from(ids)
+      .pipe(
+        concatMap(id => this.authHttp.delete(VideoService.BASE_VIDEO_URL + id)),
+        toArray(),
+        catchError(err => this.restExtractor.handleError(err))
+      )
   }
 
   loadCompleteDescription (descriptionPath: string) {
@@ -393,9 +421,23 @@ export class VideoService {
   }
 
   private buildCommonVideosParams (options: CommonVideoParams & { params: HttpParams }) {
-    const { params, videoPagination, sort, filter, categoryOneOf, languageOneOf, skipCount, nsfwPolicy, isLive, nsfw } = options
+    const {
+      params,
+      videoPagination,
+      sort,
+      filter,
+      categoryOneOf,
+      languageOneOf,
+      skipCount,
+      nsfwPolicy,
+      isLive,
+      nsfw
+    } = options
+
+    const pagination = videoPagination
+      ? this.restService.componentToRestPagination(videoPagination)
+      : undefined
 
-    const pagination = this.restService.componentToRestPagination(videoPagination)
     let newParams = this.restService.addRestGetParams(params, pagination, sort)
 
     if (filter) newParams = newParams.set('filter', filter)
@@ -409,4 +451,19 @@ export class VideoService {
 
     return newParams
   }
+
+  private buildAdminParamsFromSearch (search: string, params: HttpParams) {
+    const filters = this.restService.parseQueryStringFilter(search, {
+      filter: {
+        prefix: 'local:',
+        handler: v => {
+          if (v === 'true') return 'all-local'
+
+          return 'all'
+        }
+      }
+    })
+
+    return this.restService.addObjectParams(params, filters)
+  }
 }