Add videos list admin component

21 files changed, 298 insertions, 177 deletions

diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
index 2f0bc5ae5..a1a4586f0 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-details.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
@@ -85,9 +85,9 @@
 
   <!-- report right part (video/comment details) -->
   <div class="right">
-    <div *ngIf="abuse.video" class="screenratio">
+    <div *ngIf="abuse.video">
       <div *ngIf="abuse.video.deleted" i18n>The video was deleted</div>
-      <div *ngIf="!abuse.video.deleted" [innerHTML]="abuse.embedHtml"></div>
+      <my-embed *ngIf="!abuse.video.deleted" [video]="abuse.video"></my-embed>
     </div>
 
     <div *ngIf="abuse.comment" class="comment-html">
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index 4bf83316b..d957eaeab 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -30,9 +30,7 @@
   <ng-template pTemplate="body" let-expanded="expanded" let-abuse>
     <tr>
       <td class="expand-cell c-hand" [pRowToggler]="abuse" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
-        <span class="expander">
-          <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
-        </span>
+        <my-table-expander-icon [expanded]="expanded"></my-table-expander-icon>
       </td>
 
       <td class="action-cell">
@@ -61,28 +59,20 @@
       <ng-container *ngIf="abuse.video">
 
         <td *ngIf="!abuse.video.deleted">
-          <a [href]="getVideoUrl(abuse)" class="table-video-link" [title]="abuse.video.name" target="_blank" rel="noopener noreferrer">
-            <div class="table-video">
-              <div class="table-video-image">
-                <img [src]="abuse.video.thumbnailPath">
-                <span
-                  class="table-video-image-label" *ngIf="abuse.count > 1"
-                  i18n-title title="This video has been reported multiple times."
-                >
-                  {{ abuse.nth }}/{{ abuse.count }}
-                </span>
-              </div>
-
-              <div class="table-video-text">
-                <div>
-                  <span *ngIf="!abuse.video.blacklisted" class="glyphicon glyphicon-new-window"></span>
-                  <span *ngIf="abuse.video.blacklisted" i18n-title title="The video was blocked" class="glyphicon glyphicon-ban-circle"></span>
-                  {{ abuse.video.name }}
-                </div>
-                <div i18n>by {{ abuse.video.channel?.displayName }} on {{ abuse.video.channel?.host }} </div>
-              </div>
-            </div>
-          </a>
+          <my-video-cell [video]="abuse.video">
+            <span image>
+              <span
+                class="table-video-image-label" *ngIf="abuse.count > 1"
+                i18n-title title="This video has been reported multiple times."
+              >
+                {{ abuse.nth }}/{{ abuse.count }}
+              </span>
+            </span>
+
+            <span name>
+              <span *ngIf="abuse.video.blacklisted" i18n-title title="The video was blocked" class="glyphicon glyphicon-ban-circle"></span>
+            </span>
+          </my-video-cell>
         </td>
 
         <td *ngIf="abuse.video.deleted" class="c-hand" [pRowToggler]="abuse">
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
index 297993e39..10f5861b9 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
@@ -1,8 +1,6 @@
 import * as debug from 'debug'
 import truncate from 'lodash-es/truncate'
 import { SortMeta } from 'primeng/api'
-import { buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
-import { environment } from 'src/environments/environment'
 import { Component, Input, OnInit, ViewChild } from '@angular/core'
 import { DomSanitizer } from '@angular/platform-browser'
 import { ActivatedRoute, Router } from '@angular/router'
@@ -10,7 +8,6 @@ import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable }
 import { Account, Actor, DropdownAction, Video, VideoService } from '@app/shared/shared-main'
 import { AbuseService, BlocklistService, VideoBlockService } from '@app/shared/shared-moderation'
 import { VideoCommentService } from '@app/shared/shared-video-comment'
-import { buildVideoEmbedLink, decorateVideoLink } from '@shared/core-utils'
 import { AbuseState, AdminAbuse } from '@shared/models'
 import { AdvancedInputFilter } from '../shared-forms'
 import { AbuseMessageModalComponent } from './abuse-message-modal.component'
@@ -133,19 +130,6 @@ export class AbuseListTableComponent extends RestTable implements OnInit {
     return '/a/' + abuse.flaggedAccount.nameWithHost
   }
 
-  getVideoEmbed (abuse: AdminAbuse) {
-    return buildVideoOrPlaylistEmbed(
-      decorateVideoLink({
-        url: buildVideoEmbedLink(abuse.video, environment.originServerUrl),
-        title: false,
-        warningTitle: false,
-        startTime: abuse.video.startAt,
-        stopTime: abuse.video.endAt
-      }),
-      abuse.video.name
-    )
-  }
-
   async removeAbuse (abuse: AdminAbuse) {
     const res = await this.confirmService.confirm($localize`Do you really want to delete this abuse report?`, $localize`Delete`)
     if (res === false) return
@@ -220,8 +204,6 @@ export class AbuseListTableComponent extends RestTable implements OnInit {
           }
 
           if (abuse.video) {
-            abuse.embedHtml = this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse))
-
             if (abuse.video.channel?.ownerAccount) {
               abuse.video.channel.ownerAccount = new Account(abuse.video.channel.ownerAccount)
             }
diff --git a/client/src/app/shared/shared-abuse-list/processed-abuse.model.ts b/client/src/app/shared/shared-abuse-list/processed-abuse.model.ts
index 194d52a33..b9a9bd889 100644
--- a/client/src/app/shared/shared-abuse-list/processed-abuse.model.ts
+++ b/client/src/app/shared/shared-abuse-list/processed-abuse.model.ts
@@ -1,13 +1,11 @@
-import { SafeHtml } from '@angular/platform-browser'
-import { AdminAbuse } from '@shared/models'
 import { Account } from '@app/shared/shared-main'
+import { AdminAbuse } from '@shared/models'
 
 // Don't use an abuse model because we need external services to compute some properties
 // And this model is only used in this component
 export type ProcessedAbuse = AdminAbuse & {
   moderationCommentHtml?: string
   reasonHtml?: string
-  embedHtml?: SafeHtml
   updatedAt?: Date
 
   // override bare server-side definitions with rich client-side definitions
diff --git a/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts b/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts
index 8f3830a17..eeda27fa6 100644
--- a/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts
+++ b/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts
@@ -1,16 +1,17 @@
 
 import { TableModule } from 'primeng/table'
 import { NgModule } from '@angular/core'
+import { SharedActorImageModule } from '../shared-actor-image/shared-actor-image.module'
 import { SharedFormModule } from '../shared-forms/shared-form.module'
 import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main/shared-main.module'
 import { SharedModerationModule } from '../shared-moderation'
+import { SharedTablesModule } from '../shared-tables'
 import { SharedVideoCommentModule } from '../shared-video-comment'
 import { AbuseDetailsComponent } from './abuse-details.component'
 import { AbuseListTableComponent } from './abuse-list-table.component'
 import { AbuseMessageModalComponent } from './abuse-message-modal.component'
 import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
-import { SharedActorImageModule } from '../shared-actor-image/shared-actor-image.module'
 
 @NgModule({
   imports: [
@@ -21,7 +22,8 @@ import { SharedActorImageModule } from '../shared-actor-image/shared-actor-image
     SharedModerationModule,
     SharedGlobalIconModule,
     SharedVideoCommentModule,
-    SharedActorImageModule
+    SharedActorImageModule,
+    SharedTablesModule
   ],
 
   declarations: [
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)
+  }
 }
diff --git a/client/src/app/shared/shared-moderation/moderation.scss b/client/src/app/shared/shared-moderation/moderation.scss
index 815e2791f..eaf5a8250 100644
--- a/client/src/app/shared/shared-moderation/moderation.scss
+++ b/client/src/app/shared/shared-moderation/moderation.scss
@@ -40,14 +40,6 @@
   }
 }
 
-.screenratio {
-  @include block-ratio($selector: 'div, ::ng-deep iframe') {
-    width: 100% !important;
-    height: 100% !important;
-    left: 0;
-  };
-}
-
 .chip {
   @include chip;
 }
@@ -58,13 +50,6 @@ my-action-dropdown.show {
   }
 }
 
-.table-video-link {
-  @include disable-outline;
-
-  position: relative;
-  top: 3px;
-}
-
 .table-comment-link,
 .table-account-link {
   @include disable-outline;
@@ -81,68 +66,6 @@ my-action-dropdown.show {
   flex-direction: column;
 }
 
-.table-video {
-  display: inline-flex;
-
-  .table-video-image {
-    $image-height: 45px;
-
-    @include miniature-thumbnail;
-    @include margin-right(0.5rem);
-
-    height: $image-height;
-    width: #{math.div(16, 9) * $image-height};
-    border-radius: 2px;
-    border: 0;
-    background: transparent;
-    display: inline-flex;
-    justify-content: center;
-    position: relative;
-
-    img {
-      height: 100%;
-      width: 100%;
-      border-radius: 2px;
-    }
-
-    span {
-      color: pvar(--inputPlaceholderColor);
-    }
-
-    .table-video-image-label {
-      @include static-thumbnail-overlay;
-      position: absolute;
-      border-radius: 3px;
-      font-size: 10px;
-      padding: 0 3px;
-      line-height: 1.3;
-      bottom: 2px;
-      right: 2px;
-    }
-  }
-
-  .table-video-text {
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: center;
-    font-size: 90%;
-    color: pvar(--mainForegroundColor);
-    line-height: 1rem;
-
-    div .glyphicon {
-      @include margin-left(0.1rem);
-
-      font-size: 80%;
-      color: #808080;
-    }
-
-    div + div {
-      color: var(--greyForegroundColor);
-      font-size: 11px;
-    }
-  }
-}
-
 my-abuse-details {
   width: 100%;
 }
diff --git a/client/src/app/shared/shared-moderation/report-modals/report.component.scss b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
index 06e50ac2d..76ec0a6ed 100644
--- a/client/src/app/shared/shared-moderation/report-modals/report.component.scss
+++ b/client/src/app/shared/shared-moderation/report-modals/report.component.scss
@@ -19,9 +19,3 @@ textarea {
     @include margin-left(10px);
   }
 }
-
-.screenratio {
-  @include block-ratio($selector: 'div, ::ng-deep iframe') {
-    left: 0;
-  };
-}
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
index 1aae64bff..afac108fc 100644
--- a/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.html
@@ -35,9 +35,7 @@
       <div class="col-7">
         <div class="row justify-content-center">
           <div class="col-12 col-lg-9 mb-2">
-            <div class="screenratio">
-              <div [innerHTML]="embedHtml"></div>
-            </div>
+            <my-embed [video]="video"></my-embed>
           </div>
         </div>
 
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
index 278d60ac6..38dd92910 100644
--- a/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
@@ -1,13 +1,11 @@
 import { mapValues, pickBy } from 'lodash-es'
-import { buildVideoOrPlaylistEmbed } from 'src/assets/player/utils'
 import { Component, Input, OnInit, ViewChild } from '@angular/core'
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
+import { DomSanitizer } from '@angular/platform-browser'
 import { Notifier } from '@app/core'
 import { ABUSE_REASON_VALIDATOR } from '@app/shared/form-validators/abuse-validators'
 import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
-import { decorateVideoLink } from '@shared/core-utils'
 import { abusePredefinedReasonsMap } from '@shared/core-utils/abuse'
 import { AbusePredefinedReasonsString } from '@shared/models'
 import { Video } from '../../shared-main'
@@ -25,7 +23,6 @@ export class VideoReportComponent extends FormReactive implements OnInit {
 
   error: string = null
   predefinedReasons: { id: AbusePredefinedReasonsString, label: string, description?: string, help?: string }[] = []
-  embedHtml: SafeHtml
 
   private openedModal: NgbModalRef
 
@@ -55,20 +52,6 @@ export class VideoReportComponent extends FormReactive implements OnInit {
     return this.form.get('timestamp').value
   }
 
-  getVideoEmbed () {
-    return this.sanitizer.bypassSecurityTrustHtml(
-      buildVideoOrPlaylistEmbed(
-        decorateVideoLink({
-          url: this.video.embedUrl,
-          title: false,
-          warningTitle: false
-        }),
-
-        this.video.name
-      )
-    )
-  }
-
   ngOnInit () {
     this.buildForm({
       reason: ABUSE_REASON_VALIDATOR,
@@ -82,8 +65,6 @@ export class VideoReportComponent extends FormReactive implements OnInit {
     })
 
     this.predefinedReasons = this.abuseService.getPrefefinedReasons('video')
-
-    this.embedHtml = this.getVideoEmbed()
   }
 
   show () {
diff --git a/client/src/app/shared/shared-tables/index.ts b/client/src/app/shared/shared-tables/index.ts
new file mode 100644
index 000000000..e7b593257
--- /dev/null
+++ b/client/src/app/shared/shared-tables/index.ts
@@ -0,0 +1,3 @@
+export * from './table-expander-icon.component'
+export * from './video-cell.component'
+export * from './shared-tables.module'
diff --git a/client/src/app/shared/shared-tables/shared-tables.module.ts b/client/src/app/shared/shared-tables/shared-tables.module.ts
new file mode 100644
index 000000000..c528365a0
--- /dev/null
+++ b/client/src/app/shared/shared-tables/shared-tables.module.ts
@@ -0,0 +1,25 @@
+
+import { NgModule } from '@angular/core'
+import { SharedMainModule } from '../shared-main/shared-main.module'
+import { TableExpanderIconComponent } from './table-expander-icon.component'
+import { VideoCellComponent } from './video-cell.component'
+
+@NgModule({
+  imports: [
+    SharedMainModule
+  ],
+
+  declarations: [
+    VideoCellComponent,
+    TableExpanderIconComponent
+  ],
+
+  exports: [
+    VideoCellComponent,
+    TableExpanderIconComponent
+  ],
+
+  providers: [
+  ]
+})
+export class SharedTablesModule { }
diff --git a/client/src/app/shared/shared-tables/table-expander-icon.component.ts b/client/src/app/shared/shared-tables/table-expander-icon.component.ts
new file mode 100644
index 000000000..3756b475a
--- /dev/null
+++ b/client/src/app/shared/shared-tables/table-expander-icon.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core'
+
+@Component({
+  selector: 'my-table-expander-icon',
+  template: `
+<span class="expander">
+    <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
+</span>`
+})
+export class TableExpanderIconComponent {
+  @Input() expanded: boolean
+}
diff --git a/client/src/app/shared/shared-tables/video-cell.component.html b/client/src/app/shared/shared-tables/video-cell.component.html
new file mode 100644
index 000000000..fb7d852ab
--- /dev/null
+++ b/client/src/app/shared/shared-tables/video-cell.component.html
@@ -0,0 +1,19 @@
+<a [href]="getVideoUrl()" class="table-video-link" [title]="video.name" target="_blank" rel="noopener noreferrer">
+  <div class="table-video">
+    <div class="table-video-image">
+      <img [src]="video.thumbnailPath">
+
+      <ng-content select="[image]"></ng-content>
+    </div>
+
+    <div class="table-video-text">
+      <div>
+        <ng-content select="[name]"></ng-content>
+
+        {{ video.name }}
+      </div>
+
+      <div class="text-muted">by {{ video.channel?.displayName }} on {{ video.channel?.host }} </div>
+    </div>
+  </div>
+</a>
diff --git a/client/src/app/shared/shared-tables/video-cell.component.scss b/client/src/app/shared/shared-tables/video-cell.component.scss
new file mode 100644
index 000000000..7efb61502
--- /dev/null
+++ b/client/src/app/shared/shared-tables/video-cell.component.scss
@@ -0,0 +1,74 @@
+@use 'sass:math';
+@use '_mixins' as *;
+@use '_variables' as *;
+@use '_miniature' as *;
+
+.table-video-link {
+  @include disable-outline;
+
+  position: relative;
+  top: 3px;
+}
+
+.table-video {
+  display: inline-flex;
+
+  .table-video-image {
+    $image-height: 45px;
+
+    @include miniature-thumbnail;
+    @include margin-right(0.5rem);
+
+    height: $image-height;
+    width: #{math.div(16, 9) * $image-height};
+    border-radius: 2px;
+    border: 0;
+    background: transparent;
+    display: inline-flex;
+    justify-content: center;
+    position: relative;
+
+    img {
+      height: 100%;
+      width: 100%;
+      border-radius: 2px;
+    }
+
+    span {
+      color: pvar(--inputPlaceholderColor);
+    }
+
+    .table-video-image-label {
+      @include static-thumbnail-overlay;
+
+      position: absolute;
+      border-radius: 3px;
+      font-size: 10px;
+      padding: 0 3px;
+      line-height: 1.3;
+      bottom: 2px;
+      right: 2px;
+    }
+  }
+
+  .table-video-text {
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 90%;
+    color: pvar(--mainForegroundColor);
+    line-height: 1rem;
+
+    div .glyphicon {
+      @include margin-left(0.1rem);
+
+      font-size: 80%;
+      color: #808080;
+    }
+
+    div + div {
+      color: var(--greyForegroundColor);
+      font-size: 11px;
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-tables/video-cell.component.ts b/client/src/app/shared/shared-tables/video-cell.component.ts
new file mode 100644
index 000000000..62984180d
--- /dev/null
+++ b/client/src/app/shared/shared-tables/video-cell.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core'
+import { Video } from '@app/shared/shared-main'
+
+@Component({
+  selector: 'my-video-cell',
+  styleUrls: [ 'video-cell.component.scss' ],
+  templateUrl: 'video-cell.component.html'
+})
+export class VideoCellComponent {
+  @Input() video: Video
+
+  getVideoUrl () {
+    return Video.buildWatchUrl(this.video)
+  }
+}