Reorganize client shared modules

17 files changed, 1915 insertions, 0 deletions

diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.html b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
new file mode 100644
index 000000000..1e919ee72
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
@@ -0,0 +1,49 @@
+<div class="margin-content">
+  <div class="videos-header">
+    <h1 *ngIf="titlePage" class="title-page title-page-single">
+      <div placement="bottom" [ngbTooltip]="titleTooltip" container="body">
+        {{ titlePage }}
+      </div>
+      <my-feed *ngIf="titlePage" [syndicationItems]="syndicationItems"></my-feed>
+    </h1>
+
+    <div class="action-block" *ngIf="actions.length > 0">
+      <a [routerLink]="action.routerLink" routerLinkActive="active" *ngFor="let action of actions">
+        <button class="btn">
+          <my-global-icon [iconName]="action.iconName" aria-hidden="true"></my-global-icon>
+          <span>{{ action.label }}</span>
+        </button>
+      </a>
+    </div>
+
+    <div class="moderation-block" *ngIf="displayModerationBlock">
+      <my-peertube-checkbox
+        (change)="toggleModerationDisplay()"
+        inputName="display-unlisted-private" i18n-labelText labelText="Display unlisted and private videos"
+      >
+      </my-peertube-checkbox>
+    </div>
+  </div>
+
+  <div class="no-results" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">No results.</div>
+  <div
+    myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()"
+    class="videos"
+  >
+    <ng-container *ngFor="let video of videos; trackBy: videoById;">
+      <h2 class="date-title" *ngIf="getCurrentGroupedDateLabel(video)">
+        {{ getCurrentGroupedDateLabel(video) }}
+      </h2>
+
+      <div class="video-wrapper">
+        <my-video-miniature
+          [fitWidth]="true"
+          [video]="video" [user]="userMiniature" [ownerDisplayType]="ownerDisplayType"
+          [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
+          (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
+        >
+        </my-video-miniature>
+      </div>
+    </ng-container>
+  </div>
+</div>
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
new file mode 100644
index 000000000..7f23098aa
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
@@ -0,0 +1,75 @@
+@import '_bootstrap-variables';
+@import '_variables';
+@import '_mixins';
+@import '_miniature';
+
+.videos-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+
+  .title-page.title-page-single {
+    display: flex;
+
+    my-feed {
+      display: inline-block;
+      top: 1px;
+      margin-left: 5px;
+      width: max-content;
+      opacity: 0;
+      transition: ease-in .2s opacity;
+    }
+    &:hover my-feed {
+      opacity: 1;
+    }
+  }
+
+  .action-block {
+    a button {
+      @include peertube-button;
+      @include grey-button;
+      @include button-with-icon(18px, 3px, -1px);
+    }
+  }
+
+  .moderation-block {
+    display: flex;
+    flex-grow: 1;
+    justify-content: flex-end;
+    align-items: center;
+  }
+}
+
+.date-title {
+  font-size: 16px;
+  font-weight: $font-semibold;
+  margin-bottom: 20px;
+  margin-top: -10px;
+
+  // make the element span a full grid row within .videos grid
+  grid-column: 1 / -1;
+
+  &:not(:first-child) {
+    margin-top: .5rem;
+    padding-top: 20px;
+    border-top: 1px solid $separator-border-color;
+  }
+}
+
+.margin-content {
+  @include fluid-videos-miniature-layout;
+}
+
+@media screen and (max-width: $mobile-view) {
+  .videos-header {
+    flex-direction: column;
+    align-items: center;
+    height: auto;
+    margin-bottom: 10px;
+
+    .title-page {
+      margin-bottom: 10px;
+      margin-right: 0px;
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
new file mode 100644
index 000000000..0ef842652
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
@@ -0,0 +1,310 @@
+import { fromEvent, Observable, Subject, Subscription } from 'rxjs'
+import { debounceTime, switchMap, tap } from 'rxjs/operators'
+import { OnDestroy, OnInit } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import {
+  AuthService,
+  ComponentPaginationLight,
+  LocalStorageService,
+  Notifier,
+  ScreenService,
+  ServerService,
+  User,
+  UserService
+} from '@app/core'
+import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
+import { GlobalIconName } from '@app/shared/shared-icons'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { isLastMonth, isLastWeek, isToday, isYesterday } from '@shared/core-utils/miscs/date'
+import { ServerConfig, VideoSortField } from '@shared/models'
+import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
+import { Syndication, Video } from '../shared-main'
+import { MiniatureDisplayOptions, OwnerDisplayType } from './video-miniature.component'
+
+enum GroupDate {
+  UNKNOWN = 0,
+  TODAY = 1,
+  YESTERDAY = 2,
+  LAST_WEEK = 3,
+  LAST_MONTH = 4,
+  OLDER = 5
+}
+
+export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableForReuseHook {
+  pagination: ComponentPaginationLight = {
+    currentPage: 1,
+    itemsPerPage: 25
+  }
+  sort: VideoSortField = '-publishedAt'
+
+  categoryOneOf?: number[]
+  languageOneOf?: string[]
+  nsfwPolicy?: NSFWPolicyType
+  defaultSort: VideoSortField = '-publishedAt'
+
+  syndicationItems: Syndication[] = []
+
+  loadOnInit = true
+  useUserVideoPreferences = false
+  ownerDisplayType: OwnerDisplayType = 'account'
+  displayModerationBlock = false
+  titleTooltip: string
+  displayVideoActions = true
+  groupByDate = false
+
+  videos: Video[] = []
+  hasDoneFirstQuery = false
+  disabled = false
+
+  displayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    avatar: false,
+    privacyLabel: true,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
+
+  actions: {
+    routerLink: string
+    iconName: GlobalIconName
+    label: string
+  }[] = []
+
+  onDataSubject = new Subject<any[]>()
+
+  userMiniature: User
+
+  protected serverConfig: ServerConfig
+
+  protected abstract notifier: Notifier
+  protected abstract authService: AuthService
+  protected abstract userService: UserService
+  protected abstract route: ActivatedRoute
+  protected abstract serverService: ServerService
+  protected abstract screenService: ScreenService
+  protected abstract storageService: LocalStorageService
+  protected abstract router: Router
+  protected abstract i18n: I18n
+  abstract titlePage: string
+
+  private resizeSubscription: Subscription
+  private angularState: number
+
+  private groupedDateLabels: { [id in GroupDate]: string }
+  private groupedDates: { [id: number]: GroupDate } = {}
+
+  private lastQueryLength: number
+
+  abstract getVideosObservable (page: number): Observable<{ data: Video[] }>
+
+  abstract generateSyndicationList (): void
+
+  ngOnInit () {
+    this.serverConfig = this.serverService.getTmpConfig()
+    this.serverService.getConfig()
+      .subscribe(config => this.serverConfig = config)
+
+    this.groupedDateLabels = {
+      [GroupDate.UNKNOWN]: null,
+      [GroupDate.TODAY]: this.i18n('Today'),
+      [GroupDate.YESTERDAY]: this.i18n('Yesterday'),
+      [GroupDate.LAST_WEEK]: this.i18n('Last week'),
+      [GroupDate.LAST_MONTH]: this.i18n('Last month'),
+      [GroupDate.OLDER]: this.i18n('Older')
+    }
+
+    // Subscribe to route changes
+    const routeParams = this.route.snapshot.queryParams
+    this.loadRouteParams(routeParams)
+
+    this.resizeSubscription = fromEvent(window, 'resize')
+      .pipe(debounceTime(500))
+      .subscribe(() => this.calcPageSizes())
+
+    this.calcPageSizes()
+
+    const loadUserObservable = this.loadUserAndSettings()
+
+    if (this.loadOnInit === true) {
+      loadUserObservable.subscribe(() => this.loadMoreVideos())
+    }
+
+    this.userService.listenAnonymousUpdate()
+      .pipe(switchMap(() => this.loadUserAndSettings()))
+      .subscribe(() => {
+        if (this.hasDoneFirstQuery) this.reloadVideos()
+      })
+
+    // Display avatar in mobile view
+    if (this.screenService.isInMobileView()) {
+      this.displayOptions.avatar = true
+    }
+  }
+
+  ngOnDestroy () {
+    if (this.resizeSubscription) this.resizeSubscription.unsubscribe()
+  }
+
+  disableForReuse () {
+    this.disabled = true
+  }
+
+  enabledForReuse () {
+    this.disabled = false
+  }
+
+  videoById (index: number, video: Video) {
+    return video.id
+  }
+
+  onNearOfBottom () {
+    if (this.disabled) return
+
+    // No more results
+    if (this.lastQueryLength !== undefined && this.lastQueryLength < this.pagination.itemsPerPage) return
+
+    this.pagination.currentPage += 1
+
+    this.setScrollRouteParams()
+
+    this.loadMoreVideos()
+  }
+
+  loadMoreVideos (reset = false) {
+    this.getVideosObservable(this.pagination.currentPage).subscribe(
+      ({ data }) => {
+        this.hasDoneFirstQuery = true
+        this.lastQueryLength = data.length
+
+        if (reset) this.videos = []
+        this.videos = this.videos.concat(data)
+
+        if (this.groupByDate) this.buildGroupedDateLabels()
+
+        this.onMoreVideos()
+
+        this.onDataSubject.next(data)
+      },
+
+      error => {
+        const message = this.i18n('Cannot load more videos. Try again later.')
+
+        console.error(message, { error })
+        this.notifier.error(message)
+      }
+    )
+  }
+
+  reloadVideos () {
+    this.pagination.currentPage = 1
+    this.loadMoreVideos(true)
+  }
+
+  toggleModerationDisplay () {
+    throw new Error('toggleModerationDisplay is not implemented')
+  }
+
+  removeVideoFromArray (video: Video) {
+    this.videos = this.videos.filter(v => v.id !== video.id)
+  }
+
+  buildGroupedDateLabels () {
+    let currentGroupedDate: GroupDate = GroupDate.UNKNOWN
+
+    for (const video of this.videos) {
+      const publishedDate = video.publishedAt
+
+      if (currentGroupedDate <= GroupDate.TODAY && isToday(publishedDate)) {
+        if (currentGroupedDate === GroupDate.TODAY) continue
+
+        currentGroupedDate = GroupDate.TODAY
+        this.groupedDates[ video.id ] = currentGroupedDate
+        continue
+      }
+
+      if (currentGroupedDate <= GroupDate.YESTERDAY && isYesterday(publishedDate)) {
+        if (currentGroupedDate === GroupDate.YESTERDAY) continue
+
+        currentGroupedDate = GroupDate.YESTERDAY
+        this.groupedDates[ video.id ] = currentGroupedDate
+        continue
+      }
+
+      if (currentGroupedDate <= GroupDate.LAST_WEEK && isLastWeek(publishedDate)) {
+        if (currentGroupedDate === GroupDate.LAST_WEEK) continue
+
+        currentGroupedDate = GroupDate.LAST_WEEK
+        this.groupedDates[ video.id ] = currentGroupedDate
+        continue
+      }
+
+      if (currentGroupedDate <= GroupDate.LAST_MONTH && isLastMonth(publishedDate)) {
+        if (currentGroupedDate === GroupDate.LAST_MONTH) continue
+
+        currentGroupedDate = GroupDate.LAST_MONTH
+        this.groupedDates[ video.id ] = currentGroupedDate
+        continue
+      }
+
+      if (currentGroupedDate <= GroupDate.OLDER) {
+        if (currentGroupedDate === GroupDate.OLDER) continue
+
+        currentGroupedDate = GroupDate.OLDER
+        this.groupedDates[ video.id ] = currentGroupedDate
+      }
+    }
+  }
+
+  getCurrentGroupedDateLabel (video: Video) {
+    if (this.groupByDate === false) return undefined
+
+    return this.groupedDateLabels[this.groupedDates[video.id]]
+  }
+
+  // On videos hook for children that want to do something
+  protected onMoreVideos () { /* empty */ }
+
+  protected loadRouteParams (routeParams: { [ key: string ]: any }) {
+    this.sort = routeParams[ 'sort' ] as VideoSortField || this.defaultSort
+    this.categoryOneOf = routeParams[ 'categoryOneOf' ]
+    this.angularState = routeParams[ 'a-state' ]
+  }
+
+  private calcPageSizes () {
+    if (this.screenService.isInMobileView()) {
+      this.pagination.itemsPerPage = 5
+    }
+  }
+
+  private setScrollRouteParams () {
+    // Already set
+    if (this.angularState) return
+
+    this.angularState = 42
+
+    const queryParams = {
+      'a-state': this.angularState,
+      categoryOneOf: this.categoryOneOf
+    }
+
+    let path = this.router.url
+    if (!path || path === '/') path = this.serverConfig.instance.defaultClientRoute
+
+    this.router.navigate([ path ], { queryParams, replaceUrl: true, queryParamsHandling: 'merge' })
+  }
+
+  private loadUserAndSettings () {
+    return this.userService.getAnonymousOrLoggedUser()
+      .pipe(tap(user => {
+        this.userMiniature = user
+
+        if (!this.useUserVideoPreferences) return
+
+        this.languageOneOf = user.videoLanguages
+        this.nsfwPolicy = user.nsfwPolicy
+      }))
+  }
+}
diff --git a/client/src/app/shared/shared-video-miniature/index.ts b/client/src/app/shared/shared-video-miniature/index.ts
new file mode 100644
index 000000000..47ca6f51b
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/index.ts
@@ -0,0 +1,7 @@
+export * from './abstract-video-list'
+export * from './video-actions-dropdown.component'
+export * from './video-download.component'
+export * from './video-miniature.component'
+export * from './videos-selection.component'
+
+export * from './shared-video-miniature.module'
diff --git a/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
new file mode 100644
index 000000000..666144864
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/shared-video-miniature.module.ts
@@ -0,0 +1,40 @@
+
+import { NgModule } from '@angular/core'
+import { SharedFormModule } from '../shared-forms'
+import { SharedGlobalIconModule } from '../shared-icons'
+import { SharedMainModule } from '../shared-main/shared-main.module'
+import { SharedModerationModule } from '../shared-moderation'
+import { SharedThumbnailModule } from '../shared-thumbnail'
+import { SharedVideoPlaylistModule } from '../shared-video-playlist/shared-video-playlist.module'
+import { VideoActionsDropdownComponent } from './video-actions-dropdown.component'
+import { VideoDownloadComponent } from './video-download.component'
+import { VideoMiniatureComponent } from './video-miniature.component'
+import { VideosSelectionComponent } from './videos-selection.component'
+
+@NgModule({
+  imports: [
+    SharedMainModule,
+    SharedFormModule,
+    SharedModerationModule,
+    SharedVideoPlaylistModule,
+    SharedThumbnailModule,
+    SharedGlobalIconModule
+  ],
+
+  declarations: [
+    VideoActionsDropdownComponent,
+    VideoDownloadComponent,
+    VideoMiniatureComponent,
+    VideosSelectionComponent
+  ],
+
+  exports: [
+    VideoActionsDropdownComponent,
+    VideoDownloadComponent,
+    VideoMiniatureComponent,
+    VideosSelectionComponent
+  ],
+
+  providers: [ ]
+})
+export class SharedVideoMiniatureModule { }
diff --git a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html
new file mode 100644
index 000000000..3c8271b65
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html
@@ -0,0 +1,21 @@
+<ng-container *ngIf="videoActions.length !== 0">
+
+  <div class="playlist-dropdown" ngbDropdown #playlistDropdown="ngbDropdown" role="button" autoClose="outside" [placement]="getPlaylistDropdownPlacement()"
+    *ngIf="isUserLoggedIn() && displayOptions.playlist" (openChange)="playlistAdd.openChange($event)"
+  >
+    <span class="anchor" ngbDropdownAnchor></span>
+
+    <div ngbDropdownMenu>
+      <my-video-add-to-playlist #playlistAdd [video]="video" [lazyLoad]="true"></my-video-add-to-playlist>
+    </div>
+  </div>
+
+  <my-action-dropdown
+    [actions]="videoActions" [label]="label" [entry]="{ video: video }" (click)="loadDropdownInformation()"
+    [buttonSize]="buttonSize" [placement]="placement" [buttonDirection]="buttonDirection" [buttonStyled]="buttonStyled"
+  ></my-action-dropdown>
+
+  <my-video-download #videoDownloadModal></my-video-download>
+  <my-video-report #videoReportModal [video]="video"></my-video-report>
+  <my-video-block #videoBlockModal [video]="video" (videoBlocked)="onVideoBlocked()"></my-video-block>
+</ng-container>
diff --git a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.scss b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.scss
new file mode 100644
index 000000000..67d7ee86a
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.scss
@@ -0,0 +1,12 @@
+.playlist-dropdown {
+  position: absolute;
+
+  .anchor {
+    display: block;
+    opacity: 0;
+  }
+}
+
+::ng-deep .icon-playlist-add {
+  left: 2px;
+}
diff --git a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
new file mode 100644
index 000000000..db8d1c309
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.ts
@@ -0,0 +1,269 @@
+import { Component, EventEmitter, Input, OnChanges, Output, ViewChild } from '@angular/core'
+import { AuthService, ConfirmService, Notifier, ScreenService } from '@app/core'
+import { VideoBlockComponent, VideoBlockService, VideoReportComponent } from '@app/shared/shared-moderation'
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoCaption } from '@shared/models'
+import { DropdownAction, DropdownButtonSize, DropdownDirection, RedundancyService, Video, VideoDetails, VideoService } from '../shared-main'
+import { VideoAddToPlaylistComponent } from '../shared-video-playlist'
+import { VideoDownloadComponent } from './video-download.component'
+
+export type VideoActionsDisplayType = {
+  playlist?: boolean
+  download?: boolean
+  update?: boolean
+  blacklist?: boolean
+  delete?: boolean
+  report?: boolean
+  duplicate?: boolean
+}
+
+@Component({
+  selector: 'my-video-actions-dropdown',
+  templateUrl: './video-actions-dropdown.component.html',
+  styleUrls: [ './video-actions-dropdown.component.scss' ]
+})
+export class VideoActionsDropdownComponent implements OnChanges {
+  @ViewChild('playlistDropdown') playlistDropdown: NgbDropdown
+  @ViewChild('playlistAdd') playlistAdd: VideoAddToPlaylistComponent
+
+  @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
+  @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
+  @ViewChild('videoBlockModal') videoBlockModal: VideoBlockComponent
+
+  @Input() video: Video | VideoDetails
+  @Input() videoCaptions: VideoCaption[] = []
+
+  @Input() displayOptions: VideoActionsDisplayType = {
+    playlist: false,
+    download: true,
+    update: true,
+    blacklist: true,
+    delete: true,
+    report: true,
+    duplicate: true
+  }
+  @Input() placement = 'left'
+
+  @Input() label: string
+
+  @Input() buttonStyled = false
+  @Input() buttonSize: DropdownButtonSize = 'normal'
+  @Input() buttonDirection: DropdownDirection = 'vertical'
+
+  @Output() videoRemoved = new EventEmitter()
+  @Output() videoUnblocked = new EventEmitter()
+  @Output() videoBlocked = new EventEmitter()
+  @Output() modalOpened = new EventEmitter()
+
+  videoActions: DropdownAction<{ video: Video }>[][] = []
+
+  private loaded = false
+
+  constructor (
+    private authService: AuthService,
+    private notifier: Notifier,
+    private confirmService: ConfirmService,
+    private videoBlocklistService: VideoBlockService,
+    private screenService: ScreenService,
+    private videoService: VideoService,
+    private redundancyService: RedundancyService,
+    private i18n: I18n
+  ) { }
+
+  get user () {
+    return this.authService.getUser()
+  }
+
+  ngOnChanges () {
+    if (this.loaded) {
+      this.loaded = false
+      this.playlistAdd.reload()
+    }
+
+    this.buildActions()
+  }
+
+  isUserLoggedIn () {
+    return this.authService.isLoggedIn()
+  }
+
+  loadDropdownInformation () {
+    if (!this.isUserLoggedIn() || this.loaded === true) return
+
+    this.loaded = true
+
+    if (this.displayOptions.playlist) this.playlistAdd.load()
+  }
+
+  /* Show modals */
+
+  showDownloadModal () {
+    this.modalOpened.emit()
+
+    this.videoDownloadModal.show(this.video as VideoDetails, this.videoCaptions)
+  }
+
+  showReportModal () {
+    this.modalOpened.emit()
+
+    this.videoReportModal.show()
+  }
+
+  showBlockModal () {
+    this.modalOpened.emit()
+
+    this.videoBlockModal.show()
+  }
+
+  /* Actions checker */
+
+  isVideoUpdatable () {
+    return this.video.isUpdatableBy(this.user)
+  }
+
+  isVideoRemovable () {
+    return this.video.isRemovableBy(this.user)
+  }
+
+  isVideoBlockable () {
+    return this.video.isBlockableBy(this.user)
+  }
+
+  isVideoUnblockable () {
+    return this.video.isUnblockableBy(this.user)
+  }
+
+  isVideoDownloadable () {
+    return this.video && this.video instanceof VideoDetails && this.video.downloadEnabled
+  }
+
+  canVideoBeDuplicated () {
+    return this.video.canBeDuplicatedBy(this.user)
+  }
+
+  /* Action handlers */
+
+  async unblockVideo () {
+    const confirmMessage = this.i18n(
+      'Do you really want to unblock this video? It will be available again in the videos list.'
+    )
+
+    const res = await this.confirmService.confirm(confirmMessage, this.i18n('Unblock'))
+    if (res === false) return
+
+    this.videoBlocklistService.unblockVideo(this.video.id).subscribe(
+      () => {
+        this.notifier.success(this.i18n('Video {{name}} unblocked.', { name: this.video.name }))
+
+        this.video.blacklisted = false
+        this.video.blockedReason = null
+
+        this.videoUnblocked.emit()
+      },
+
+      err => this.notifier.error(err.message)
+    )
+  }
+
+  async removeVideo () {
+    this.modalOpened.emit()
+
+    const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this video?'), this.i18n('Delete'))
+    if (res === false) return
+
+    this.videoService.removeVideo(this.video.id)
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name }))
+
+            this.videoRemoved.emit()
+          },
+
+          error => this.notifier.error(error.message)
+        )
+  }
+
+  duplicateVideo () {
+    this.redundancyService.addVideoRedundancy(this.video)
+      .subscribe(
+        () => {
+          const message = this.i18n('This video will be duplicated by your instance.')
+          this.notifier.success(message)
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+  onVideoBlocked () {
+    this.videoBlocked.emit()
+  }
+
+  getPlaylistDropdownPlacement () {
+    if (this.screenService.isInSmallView()) {
+      return 'bottom-right'
+    }
+
+    return 'bottom-left bottom-right'
+  }
+
+  private buildActions () {
+    this.videoActions = [
+      [
+        {
+          label: this.i18n('Save to playlist'),
+          handler: () => this.playlistDropdown.toggle(),
+          isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.playlist,
+          iconName: 'playlist-add'
+        }
+      ],
+      [
+        {
+          label: this.i18n('Download'),
+          handler: () => this.showDownloadModal(),
+          isDisplayed: () => this.displayOptions.download && this.isVideoDownloadable(),
+          iconName: 'download'
+        },
+        {
+          label: this.i18n('Update'),
+          linkBuilder: ({ video }) => [ '/videos/update', video.uuid ],
+          iconName: 'edit',
+          isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.update && this.isVideoUpdatable()
+        },
+        {
+          label: this.i18n('Block'),
+          handler: () => this.showBlockModal(),
+          iconName: 'no',
+          isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.blacklist && this.isVideoBlockable()
+        },
+        {
+          label: this.i18n('Unblock'),
+          handler: () => this.unblockVideo(),
+          iconName: 'undo',
+          isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.blacklist && this.isVideoUnblockable()
+        },
+        {
+          label: this.i18n('Mirror'),
+          handler: () => this.duplicateVideo(),
+          isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.duplicate && this.canVideoBeDuplicated(),
+          iconName: 'cloud-download'
+        },
+        {
+          label: this.i18n('Delete'),
+          handler: () => this.removeVideo(),
+          isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.delete && this.isVideoRemovable(),
+          iconName: 'delete'
+        }
+      ],
+      [
+        {
+          label: this.i18n('Report'),
+          handler: () => this.showReportModal(),
+          isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.report,
+          iconName: 'alert'
+        }
+      ]
+    ]
+  }
+}
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
new file mode 100644
index 000000000..c65e371ee
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.html
@@ -0,0 +1,108 @@
+<ng-template #modal let-hide="close">
+  <div class="modal-header">
+    <h4 class="modal-title">
+      <ng-container i18n>Download</ng-container>
+
+      <div *ngIf="videoCaptions" ngbDropdown class="d-inline-block">
+        <span id="dropdownDownloadType" ngbDropdownToggle>
+          {{ type }}
+        </span>
+        <div ngbDropdownMenu aria-labelledby="dropdownDownloadType">
+          <button *ngIf="type === 'video'" (click)="switchToType('subtitles')" ngbDropdownItem i18n>subtitles</button>
+          <button *ngIf="type === 'subtitles'" (click)="switchToType('video')" ngbDropdownItem i18n>video</button>
+        </div>
+      </div>
+    </h4>
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+
+  <div class="modal-body">
+    <div class="form-group">
+      <div class="input-group input-group-sm">
+        <div class="input-group-prepend peertube-select-container">
+          <select *ngIf="type === 'video'" [(ngModel)]="resolutionId" (ngModelChange)="onResolutionIdChange()">
+            <option *ngFor="let file of getVideoFiles()" [value]="file.resolution.id">{{ file.resolution.label }}</option>
+          </select>
+
+          <select *ngIf="type === 'subtitles'" [(ngModel)]="subtitleLanguageId">
+            <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
+          </select>
+        </div>
+
+        <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
+        <div class="input-group-append">
+          <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
+            <span class="glyphicon glyphicon-copy"></span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <ng-container *ngIf="type === 'video' && videoFile?.metadata">
+      <div ngbNav #nav="ngbNav" class="nav-tabs">
+
+        <ng-container ngbNavItem>
+          <a ngbNavLink i18n>Format</a>
+          <ng-template ngbNavContent>
+            <div class="file-metadata">
+              <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataFormat | keyvalue">
+                <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+                <span class="metadata-attribute-value">{{ item.value.value }}</span>
+              </div>
+            </div>
+          </ng-template>
+        </ng-container>
+
+        <ng-container ngbNavItem [disabled]="videoFileMetadataVideoStream === undefined">
+          <a ngbNavLink i18n>Video stream</a>
+          <ng-template ngbNavContent>
+            <div class="file-metadata">
+              <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataVideoStream | keyvalue">
+                <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+                <span class="metadata-attribute-value">{{ item.value.value }}</span>
+              </div>
+            </div>
+          </ng-template>
+        </ng-container>
+
+        <ng-container ngbNavItem [disabled]="videoFileMetadataAudioStream === undefined">
+          <a ngbNavLink i18n>Audio stream</a>
+          <ng-template ngbNavContent>
+            <div class="file-metadata">
+              <div class="metadata-attribute metadata-attribute-tags" *ngFor="let item of videoFileMetadataAudioStream | keyvalue">
+                <span i18n class="metadata-attribute-label">{{ item.value.label }}</span>
+                <span class="metadata-attribute-value">{{ item.value.value }}</span>
+              </div>
+            </div>
+          </ng-template>
+        </ng-container>
+      </div>
+
+      <div [ngbNavOutlet]="nav"></div>
+    </ng-container>
+
+    <div class="download-type" *ngIf="type === 'video'">
+      <div class="peertube-radio-container">
+        <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct">
+        <label i18n for="download-direct">Direct download</label>
+      </div>
+
+      <div class="peertube-radio-container">
+        <input type="radio" name="download" id="download-torrent" [(ngModel)]="downloadType" value="torrent">
+        <label i18n for="download-torrent">Torrent (.torrent file)</label>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-footer inputs">
+    <input
+      type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+      (click)="hide()" (key.enter)="hide()"
+    >
+
+    <input
+      type="submit" i18n-value value="Download" class="action-button-submit"
+      (click)="download()"
+    >
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss
new file mode 100644
index 000000000..b09078bea
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss
@@ -0,0 +1,64 @@
+@import 'variables';
+@import 'mixins';
+
+.peertube-select-container {
+  @include peertube-select-container(100px);
+
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: none;
+
+  select {
+    height: inherit;
+  }
+}
+
+#dropdownDownloadType {
+  cursor: pointer;
+}
+
+.download-type {
+  margin-top: 30px;
+
+  .peertube-radio-container {
+    @include peertube-radio-container;
+
+    display: inline-block;
+    margin-right: 30px;
+  }
+}
+
+.file-metadata {
+  padding: 1rem;
+}
+
+.file-metadata .metadata-attribute {
+  font-size: 13px;
+  display: block;
+  margin-bottom: 12px;
+
+  .metadata-attribute-label {
+    min-width: 142px;
+    padding-right: 5px;
+    display: inline-block;
+    color: pvar(--greyForegroundColor);
+    font-weight: $font-bold;
+  }
+
+  a.metadata-attribute-value {
+    @include disable-default-a-behaviour;
+    color: pvar(--mainForegroundColor);
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
+
+  &.metadata-attribute-tags {
+    .metadata-attribute-value:not(:nth-child(2)) {
+      &::before {
+        content: ', '
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.ts b/client/src/app/shared/shared-video-miniature/video-download.component.ts
new file mode 100644
index 000000000..21df8b674
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.ts
@@ -0,0 +1,206 @@
+import { FfprobeFormat, FfprobeStream } from 'fluent-ffmpeg'
+import { mapValues, pick } from 'lodash-es'
+import { BytesPipe } from 'ngx-pipes'
+import { Component, ElementRef, ViewChild } from '@angular/core'
+import { AuthService, Notifier } from '@app/core'
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoCaption, VideoFile, VideoPrivacy } from '@shared/models'
+import { NumberFormatterPipe, VideoDetails, VideoService } from '../shared-main'
+
+type DownloadType = 'video' | 'subtitles'
+type FileMetadata = { [key: string]: { label: string, value: string }}
+
+@Component({
+  selector: 'my-video-download',
+  templateUrl: './video-download.component.html',
+  styleUrls: [ './video-download.component.scss' ]
+})
+export class VideoDownloadComponent {
+  @ViewChild('modal', { static: true }) modal: ElementRef
+
+  downloadType: 'direct' | 'torrent' = 'torrent'
+  resolutionId: number | string = -1
+  subtitleLanguageId: string
+
+  video: VideoDetails
+  videoFile: VideoFile
+  videoFileMetadataFormat: FileMetadata
+  videoFileMetadataVideoStream: FileMetadata | undefined
+  videoFileMetadataAudioStream: FileMetadata | undefined
+  videoCaptions: VideoCaption[]
+  activeModal: NgbActiveModal
+
+  type: DownloadType = 'video'
+
+  private bytesPipe: BytesPipe
+  private numbersPipe: NumberFormatterPipe
+
+  constructor (
+    private notifier: Notifier,
+    private modalService: NgbModal,
+    private videoService: VideoService,
+    private auth: AuthService,
+    private i18n: I18n
+  ) {
+    this.bytesPipe = new BytesPipe()
+    this.numbersPipe = new NumberFormatterPipe()
+  }
+
+  get typeText () {
+    return this.type === 'video'
+      ? this.i18n('video')
+      : this.i18n('subtitles')
+  }
+
+  getVideoFiles () {
+    if (!this.video) return []
+
+    return this.video.getFiles()
+  }
+
+  show (video: VideoDetails, videoCaptions?: VideoCaption[]) {
+    this.video = video
+    this.videoCaptions = videoCaptions && videoCaptions.length ? videoCaptions : undefined
+
+    this.activeModal = this.modalService.open(this.modal, { centered: true })
+
+    this.resolutionId = this.getVideoFiles()[0].resolution.id
+    this.onResolutionIdChange()
+    if (this.videoCaptions) this.subtitleLanguageId = this.videoCaptions[0].language.id
+  }
+
+  onClose () {
+    this.video = undefined
+    this.videoCaptions = undefined
+  }
+
+  download () {
+    window.location.assign(this.getLink())
+    this.activeModal.close()
+  }
+
+  getLink () {
+    return this.type === 'subtitles' && this.videoCaptions
+      ? this.getSubtitlesLink()
+      : this.getVideoFileLink()
+  }
+
+  async onResolutionIdChange () {
+    this.videoFile = this.getVideoFile()
+    if (this.videoFile.metadata || !this.videoFile.metadataUrl) return
+
+    await this.hydrateMetadataFromMetadataUrl(this.videoFile)
+
+    this.videoFileMetadataFormat = this.videoFile
+      ? this.getMetadataFormat(this.videoFile.metadata.format)
+      : undefined
+    this.videoFileMetadataVideoStream = this.videoFile
+      ? this.getMetadataStream(this.videoFile.metadata.streams, 'video')
+      : undefined
+    this.videoFileMetadataAudioStream = this.videoFile
+      ? this.getMetadataStream(this.videoFile.metadata.streams, 'audio')
+      : undefined
+  }
+
+  getVideoFile () {
+    // HTML select send us a string, so convert it to a number
+    this.resolutionId = parseInt(this.resolutionId.toString(), 10)
+
+    const file = this.getVideoFiles().find(f => f.resolution.id === this.resolutionId)
+    if (!file) {
+      console.error('Could not find file with resolution %d.', this.resolutionId)
+      return
+    }
+    return file
+  }
+
+  getVideoFileLink () {
+    const file = this.videoFile
+    if (!file) return
+
+    const suffix = this.video.privacy.id === VideoPrivacy.PRIVATE || this.video.privacy.id === VideoPrivacy.INTERNAL
+      ? '?access_token=' + this.auth.getAccessToken()
+      : ''
+
+    switch (this.downloadType) {
+      case 'direct':
+        return file.fileDownloadUrl + suffix
+
+      case 'torrent':
+        return file.torrentDownloadUrl + suffix
+    }
+  }
+
+  getSubtitlesLink () {
+    return window.location.origin + this.videoCaptions.find(caption => caption.language.id === this.subtitleLanguageId).captionPath
+  }
+
+  activateCopiedMessage () {
+    this.notifier.success(this.i18n('Copied'))
+  }
+
+  switchToType (type: DownloadType) {
+    this.type = type
+  }
+
+  getMetadataFormat (format: FfprobeFormat) {
+    const keyToTranslateFunction = {
+      'encoder': (value: string) => ({ label: this.i18n('Encoder'), value }),
+      'format_long_name': (value: string) => ({ label: this.i18n('Format name'), value }),
+      'size': (value: number) => ({ label: this.i18n('Size'), value: this.bytesPipe.transform(value, 2) }),
+      'bit_rate': (value: number) => ({
+        label: this.i18n('Bitrate'),
+        value: `${this.numbersPipe.transform(value)}bps`
+      })
+    }
+
+    // flattening format
+    const sanitizedFormat = Object.assign(format, format.tags)
+    delete sanitizedFormat.tags
+
+    return mapValues(
+      pick(sanitizedFormat, Object.keys(keyToTranslateFunction)),
+      (val, key) => keyToTranslateFunction[key](val)
+    )
+  }
+
+  getMetadataStream (streams: FfprobeStream[], type: 'video' | 'audio') {
+    const stream = streams.find(s => s.codec_type === type)
+    if (!stream) return undefined
+
+    let keyToTranslateFunction = {
+      'codec_long_name': (value: string) => ({ label: this.i18n('Codec'), value }),
+      'profile': (value: string) => ({ label: this.i18n('Profile'), value }),
+      'bit_rate': (value: number) => ({
+        label: this.i18n('Bitrate'),
+        value: `${this.numbersPipe.transform(value)}bps`
+      })
+    }
+
+    if (type === 'video') {
+      keyToTranslateFunction = Object.assign(keyToTranslateFunction, {
+        'width': (value: number) => ({ label: this.i18n('Resolution'), value: `${value}x${stream.height}` }),
+        'display_aspect_ratio': (value: string) => ({ label: this.i18n('Aspect ratio'), value }),
+        'avg_frame_rate': (value: string) => ({ label: this.i18n('Average frame rate'), value }),
+        'pix_fmt': (value: string) => ({ label: this.i18n('Pixel format'), value })
+      })
+    } else {
+      keyToTranslateFunction = Object.assign(keyToTranslateFunction, {
+        'sample_rate': (value: number) => ({ label: this.i18n('Sample rate'), value }),
+        'channel_layout': (value: number) => ({ label: this.i18n('Channel Layout'), value })
+      })
+    }
+
+    return mapValues(
+      pick(stream, Object.keys(keyToTranslateFunction)),
+      (val, key) => keyToTranslateFunction[key](val)
+    )
+  }
+
+  private hydrateMetadataFromMetadataUrl (file: VideoFile) {
+    const observable = this.videoService.getVideoFileMetadata(file.metadataUrl)
+    observable.subscribe(res => file.metadata = res)
+    return observable.toPromise()
+  }
+}
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
new file mode 100644
index 000000000..82afc866f
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -0,0 +1,66 @@
+<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow, 'fit-width': fitWidth }" (mouseenter)="loadActions()">
+  <my-video-thumbnail
+    [video]="video" [nsfw]="isVideoBlur" [routerLink]="videoLink"
+    [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)"
+  >
+    <ng-container ngProjectAs="label-warning" *ngIf="displayOptions.privacyLabel && isUnlistedVideo()" i18n>Unlisted</ng-container>
+    <ng-container ngProjectAs="label-danger" *ngIf="displayOptions.privacyLabel && isPrivateVideo()" i18n>Private</ng-container>
+  </my-video-thumbnail>
+
+  <div class="video-bottom">
+    <div class="video-miniature-information">
+      <div class="d-inline-flex video-miniature-meta">
+        <a *ngIf="displayOptions.avatar" class="avatar" [routerLink]="[ '/video-channels', video.byVideoChannel ]" [title]="channelLinkTitle">
+          <img [src]="getAvatarUrl()" alt="" />
+        </a>
+
+        <div class="w-100 d-flex flex-column">
+          <a
+            tabindex="-1"
+            class="video-miniature-name"
+            [routerLink]="videoLink" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
+          >{{ video.name }}</a>
+
+          <span class="video-miniature-created-at-views">
+            <my-date-toggle *ngIf="displayOptions.date" [date]="video.publishedAt"></my-date-toggle>
+
+            <span class="views">
+              <ng-container *ngIf="displayOptions.date && displayOptions.views"> • </ng-container>
+              <ng-container i18n *ngIf="displayOptions.views">{video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}}</ng-container>
+            </span>
+          </span>
+
+          <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/accounts', video.byAccount ]">
+            {{ video.byAccount }}
+          </a>
+          <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/video-channels', video.byVideoChannel ]">
+            {{ video.byVideoChannel }}
+          </a>
+
+          <div class="video-info-privacy">
+            <ng-container *ngIf="displayOptions.privacyText">{{ video.privacy.label }}</ng-container>
+            <ng-container *ngIf="displayOptions.privacyText && displayOptions.state && getStateLabel(video)"> - </ng-container>
+            <ng-container *ngIf="displayOptions.state">{{ getStateLabel(video) }}</ng-container>
+          </div>
+        </div>
+      </div>
+
+      <div *ngIf="displayOptions.blacklistInfo && video.blacklisted" class="video-info-blocked">
+        <span class="blocked-label" i18n>Blocked</span>
+        <span class="blocked-reason" *ngIf="video.blockedReason">{{ video.blockedReason }}</span>
+      </div>
+
+      <div i18n *ngIf="displayOptions.nsfw && video.nsfw" class="video-info-nsfw">
+        Sensitive
+      </div>
+    </div>
+
+    <div class="video-actions">
+      <!-- FIXME: remove bottom placement when overflow is fixed in bootstrap dropdown: https://github.com/ng-bootstrap/ng-bootstrap/issues/3495 -->
+      <my-video-actions-dropdown
+        *ngIf="showActions" [video]="video" [displayOptions]="videoActionsDisplayOptions" placement="bottom-left bottom-right left auto"
+        (videoRemoved)="onVideoRemoved()" (videoBlocked)="onVideoBlocked()" (videoUnblocked)="onVideoUnblocked()"
+      ></my-video-actions-dropdown>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
new file mode 100644
index 000000000..38cac5b6e
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -0,0 +1,200 @@
+@import '_variables';
+@import '_mixins';
+@import '_miniature';
+
+$more-button-width: 40px;
+$more-margin-right: 15px;
+
+.video-miniature {
+  display: inline-flex;
+  flex-direction: column;
+  padding-bottom: $video-miniature-margin-bottom;
+  vertical-align: top;
+
+  .video-bottom {
+    display: flex;
+
+    .video-miniature-information {
+      width: $video-miniature-width - $more-button-width - $more-margin-right;
+      line-height: normal;
+
+      .avatar {
+        margin: 10px 10px 0 0;
+
+        img {
+          @include avatar(40px);
+        }
+      }
+
+      .video-miniature-name {
+        @include miniature-name;
+        width: calc(100% - #{$more-button-width});
+      }
+
+      .video-miniature-meta {
+        width: calc(100% + #{$more-button-width});
+        overflow: hidden;
+      }
+
+      .video-miniature-created-at-views {
+        display: block;
+        font-size: 13px;
+      }
+
+      .video-miniature-account,
+      .video-miniature-channel {
+        @include disable-default-a-behaviour;
+        @include ellipsis;
+
+        display: block;
+        font-size: 13px;
+        color: pvar(--greyForegroundColor);
+
+        &:hover {
+          color: $grey-foreground-hover-color;
+        }
+      }
+
+      .video-info-privacy,
+      .video-info-blocked .blocked-label,
+      .video-info-nsfw {
+        font-weight: $font-semibold;
+      }
+
+      .video-info-blocked {
+        color: red;
+
+        .blocked-reason::before {
+          content: ' - ';
+        }
+      }
+
+      .video-info-nsfw {
+        color: red;
+      }
+    }
+
+    .video-actions {
+      margin-top: 3px;
+      width: $more-button-width;
+      height: 30px;
+
+      ::ng-deep .dropdown-root:not(.show) {
+        opacity: 0;
+      }
+
+      ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
+        opacity: 1;
+      }
+
+      ::ng-deep .more-icon {
+        opacity: .6;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+
+    @media screen and (max-width: $small-view) {
+      .video-miniature-information {
+        margin: 0 10px;
+      }
+
+      .video-actions {
+        margin: 0;
+        top: -3px;
+
+        ::ng-deep .dropdown-root {
+          opacity: 1 !important;
+        }
+      }
+    }
+  }
+
+  &:hover ::ng-deep .video-thumbnail .video-thumbnail-actions-overlay,
+  &:hover .video-bottom .video-actions ::ng-deep .dropdown-root {
+    opacity: 1;
+  }
+
+  &.fit-width {
+    width: 100%;
+
+    .video-bottom {
+      width: 100% !important;
+
+      .video-miniature-information {
+        width: calc(100% - #{$more-button-width}) !important;
+      }
+    }
+
+    my-video-thumbnail {
+      @include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
+    }
+  }
+
+  &.display-as-row {
+    flex-direction: row;
+    padding-bottom: 0;
+    height: auto;
+    display: flex;
+    flex-grow: 1;
+
+    my-video-thumbnail {
+      margin-right: 10px;
+    }
+
+    .video-bottom {
+      .video-miniature-information {
+        @media screen and (min-width: $small-view) {
+          width: auto;
+          min-width: 500px;
+        }
+
+        .video-miniature-name {
+          @include ellipsis-multiline(1.3em, 2);
+
+          margin-top: 2px;
+          margin-bottom: 5px;
+        }
+
+        .video-miniature-created-at-views,
+        .video-miniature-account,
+        .video-miniature-channel {
+          font-size: 95%;
+          width: fit-content;
+        }
+
+        .video-miniature-created-at-views + .video-miniature-channel {
+          margin-top: 5px;
+        }
+
+        .video-info-privacy {
+          margin-top: 5px;
+        }
+
+        .video-info-blocked {
+          margin-top: 3px;
+        }
+      }
+
+      .video-actions {
+        margin: 0;
+        top: -3px;
+      }
+    }
+
+    @media screen and (max-width: $small-view) {
+      flex-direction: column;
+      height: auto;
+
+      my-video-thumbnail {
+        margin-right: 0;
+      }
+
+      .video-miniature-information {
+        min-width: initial;
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
new file mode 100644
index 000000000..6f32977b3
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -0,0 +1,283 @@
+import { switchMap } from 'rxjs/operators'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Inject,
+  Input,
+  LOCALE_ID,
+  OnInit,
+  Output
+} from '@angular/core'
+import { AuthService, ScreenService, ServerService, User } from '@app/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ServerConfig, VideoPlaylistType, VideoPrivacy, VideoState } from '../../../../../shared'
+import { Video } from '../shared-main'
+import { VideoPlaylistService } from '../shared-video-playlist'
+import { VideoActionsDisplayType } from './video-actions-dropdown.component'
+
+export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
+export type MiniatureDisplayOptions = {
+  date?: boolean
+  views?: boolean
+  by?: boolean
+  avatar?: boolean
+  privacyLabel?: boolean
+  privacyText?: boolean
+  state?: boolean
+  blacklistInfo?: boolean
+  nsfw?: boolean
+}
+
+@Component({
+  selector: 'my-video-miniature',
+  styleUrls: [ './video-miniature.component.scss' ],
+  templateUrl: './video-miniature.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class VideoMiniatureComponent implements OnInit {
+  @Input() user: User
+  @Input() video: Video
+
+  @Input() ownerDisplayType: OwnerDisplayType = 'account'
+  @Input() displayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    avatar: false,
+    privacyLabel: false,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
+  @Input() displayAsRow = false
+  @Input() displayVideoActions = true
+  @Input() fitWidth = false
+
+  @Input() useLazyLoadUrl = false
+
+  @Output() videoBlocked = new EventEmitter()
+  @Output() videoUnblocked = new EventEmitter()
+  @Output() videoRemoved = new EventEmitter()
+
+  videoActionsDisplayOptions: VideoActionsDisplayType = {
+    playlist: true,
+    download: false,
+    update: true,
+    blacklist: true,
+    delete: true,
+    report: true,
+    duplicate: true
+  }
+  showActions = false
+  serverConfig: ServerConfig
+
+  addToWatchLaterText: string
+  addedToWatchLaterText: string
+  inWatchLaterPlaylist: boolean
+  channelLinkTitle = ''
+
+  watchLaterPlaylist: {
+    id: number
+    playlistElementId?: number
+  }
+
+  videoLink: any[] = []
+
+  private ownerDisplayTypeChosen: 'account' | 'videoChannel'
+
+  constructor (
+    private screenService: ScreenService,
+    private serverService: ServerService,
+    private i18n: I18n,
+    private authService: AuthService,
+    private videoPlaylistService: VideoPlaylistService,
+    private cd: ChangeDetectorRef,
+    @Inject(LOCALE_ID) private localeId: string
+  ) {}
+
+  get isVideoBlur () {
+    return this.video.isVideoNSFWForUser(this.user, this.serverConfig)
+  }
+
+  ngOnInit () {
+    this.serverConfig = this.serverService.getTmpConfig()
+    this.serverService.getConfig()
+        .subscribe(config => {
+          this.serverConfig = config
+          this.buildVideoLink()
+        })
+
+    this.setUpBy()
+
+    this.channelLinkTitle = this.i18n(
+      '{{name}} (channel page)',
+      { name: this.video.channel.name, handle: this.video.byVideoChannel }
+    )
+
+    // We rely on mouseenter to lazy load actions
+    if (this.screenService.isInTouchScreen()) {
+      this.loadActions()
+    }
+  }
+
+  buildVideoLink () {
+    if (this.useLazyLoadUrl && this.video.url) {
+      const remoteUriConfig = this.serverConfig.search.remoteUri
+
+      // Redirect on the external instance if not allowed to fetch remote data
+      const externalRedirect = (!this.authService.isLoggedIn() && !remoteUriConfig.anonymous) || !remoteUriConfig.users
+      const fromPath = window.location.pathname + window.location.search
+
+      this.videoLink = [ '/search/lazy-load-video', { url: this.video.url, externalRedirect, fromPath } ]
+      return
+    }
+
+    this.videoLink = [ '/videos/watch', this.video.uuid ]
+  }
+
+  displayOwnerAccount () {
+    return this.ownerDisplayTypeChosen === 'account'
+  }
+
+  displayOwnerVideoChannel () {
+    return this.ownerDisplayTypeChosen === 'videoChannel'
+  }
+
+  isUnlistedVideo () {
+    return this.video.privacy.id === VideoPrivacy.UNLISTED
+  }
+
+  isPrivateVideo () {
+    return this.video.privacy.id === VideoPrivacy.PRIVATE
+  }
+
+  getStateLabel (video: Video) {
+    if (!video.state) return ''
+
+    if (video.privacy.id !== VideoPrivacy.PRIVATE && video.state.id === VideoState.PUBLISHED) {
+      return this.i18n('Published')
+    }
+
+    if (video.scheduledUpdate) {
+      const updateAt = new Date(video.scheduledUpdate.updateAt.toString()).toLocaleString(this.localeId)
+      return this.i18n('Publication scheduled on ') + updateAt
+    }
+
+    if (video.state.id === VideoState.TO_TRANSCODE && video.waitTranscoding === true) {
+      return this.i18n('Waiting transcoding')
+    }
+
+    if (video.state.id === VideoState.TO_TRANSCODE) {
+      return this.i18n('To transcode')
+    }
+
+    if (video.state.id === VideoState.TO_IMPORT) {
+      return this.i18n('To import')
+    }
+
+    return ''
+  }
+
+  getAvatarUrl () {
+    if (this.ownerDisplayTypeChosen === 'account') {
+      return this.video.accountAvatarUrl
+    }
+
+    return this.video.videoChannelAvatarUrl
+  }
+
+  loadActions () {
+    if (this.displayVideoActions) this.showActions = true
+
+    this.loadWatchLater()
+  }
+
+  onVideoBlocked () {
+    this.videoBlocked.emit()
+  }
+
+  onVideoUnblocked () {
+    this.videoUnblocked.emit()
+  }
+
+  onVideoRemoved () {
+    this.videoRemoved.emit()
+  }
+
+  isUserLoggedIn () {
+    return this.authService.isLoggedIn()
+  }
+
+  onWatchLaterClick (currentState: boolean) {
+    if (currentState === true) this.removeFromWatchLater()
+    else this.addToWatchLater()
+
+    this.inWatchLaterPlaylist = !currentState
+  }
+
+  addToWatchLater () {
+    const body = { videoId: this.video.id }
+
+    this.videoPlaylistService.addVideoInPlaylist(this.watchLaterPlaylist.id, body).subscribe(
+      res => {
+        this.watchLaterPlaylist.playlistElementId = res.videoPlaylistElement.id
+      }
+    )
+  }
+
+  removeFromWatchLater () {
+    this.videoPlaylistService.removeVideoFromPlaylist(this.watchLaterPlaylist.id, this.watchLaterPlaylist.playlistElementId, this.video.id)
+        .subscribe(
+          _ => { /* empty */ }
+        )
+  }
+
+  isWatchLaterPlaylistDisplayed () {
+    return this.displayVideoActions && this.isUserLoggedIn() && this.inWatchLaterPlaylist !== undefined
+  }
+
+  private setUpBy () {
+    if (this.ownerDisplayType === 'account' || this.ownerDisplayType === 'videoChannel') {
+      this.ownerDisplayTypeChosen = this.ownerDisplayType
+      return
+    }
+
+    // If the video channel name an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
+    // -> Use the account name
+    if (
+      this.video.channel.name === `${this.video.account.name}_channel` ||
+      this.video.channel.name.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/)
+    ) {
+      this.ownerDisplayTypeChosen = 'account'
+    } else {
+      this.ownerDisplayTypeChosen = 'videoChannel'
+    }
+  }
+
+  private loadWatchLater () {
+    if (!this.isUserLoggedIn() || this.inWatchLaterPlaylist !== undefined) return
+
+    this.authService.userInformationLoaded
+        .pipe(switchMap(() => this.videoPlaylistService.listenToVideoPlaylistChange(this.video.id)))
+        .subscribe(existResult => {
+          const watchLaterPlaylist = this.authService.getUser().specialPlaylists.find(p => p.type === VideoPlaylistType.WATCH_LATER)
+          const existsInWatchLater = existResult.find(r => r.playlistId === watchLaterPlaylist.id)
+          this.inWatchLaterPlaylist = false
+
+          this.watchLaterPlaylist = {
+            id: watchLaterPlaylist.id
+          }
+
+          if (existsInWatchLater) {
+            this.inWatchLaterPlaylist = true
+            this.watchLaterPlaylist.playlistElementId = existsInWatchLater.playlistElementId
+          }
+
+          this.cd.markForCheck()
+        })
+
+    this.videoPlaylistService.runPlaylistCheck(this.video.id)
+  }
+}
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.html b/client/src/app/shared/shared-video-miniature/videos-selection.component.html
new file mode 100644
index 000000000..44aa567b9
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.html
@@ -0,0 +1,30 @@
+<div class="no-results" i18n *ngIf="pagination.totalItems === 0">No results.</div>
+
+<div myInfiniteScroller [autoInit]="true" (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()" class="videos">
+  <div class="video" *ngFor="let video of videos; let i = index; trackBy: videoById">
+
+    <div class="checkbox-container">
+      <my-peertube-checkbox [inputName]="'video-check-' + video.id" [(ngModel)]="_selection[video.id]"></my-peertube-checkbox>
+    </div>
+
+    <my-video-miniature
+      [video]="video" [displayAsRow]="true" [displayOptions]="miniatureDisplayOptions"
+      [displayVideoActions]="false" [ownerDisplayType]="ownerDisplayType"
+    ></my-video-miniature>
+
+    <!-- Display only once -->
+    <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0">
+      <div class="action-selection-mode-child">
+        <span i18n class="action-button action-button-cancel-selection" (click)="abortSelectionMode()">
+          Cancel
+        </span>
+
+        <ng-container *ngTemplateOutlet="globalButtonsTemplate"></ng-container>
+      </div>
+    </div>
+
+    <ng-container  *ngIf="isInSelectionMode() === false">
+      <ng-container *ngTemplateOutlet="rowButtonsTemplate; context: {$implicit: video}"></ng-container>
+    </ng-container>
+  </div>
+</div>
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.scss b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
new file mode 100644
index 000000000..d3cbabf23
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.scss
@@ -0,0 +1,57 @@
+@import '_variables';
+@import '_mixins';
+
+.action-selection-mode {
+  display: flex;
+  justify-content: flex-end;
+  flex-grow: 1;
+
+  .action-selection-mode-child {
+    position: fixed;
+
+    .action-button {
+      display: inline-block;
+    }
+
+    .action-button-cancel-selection {
+      @include peertube-button;
+      @include grey-button;
+
+      margin-right: 10px;
+    }
+  }
+}
+
+.video {
+  @include row-blocks;
+
+  &:first-child {
+    margin-top: 47px;
+  }
+
+  .checkbox-container {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+    margin-left: 12px;
+  }
+
+  my-video-miniature {
+    flex-grow: 1;
+  }
+}
+
+@media screen and (max-width: $small-view) {
+  .video {
+    flex-direction: column;
+    height: auto;
+
+    .checkbox-container {
+      display: none;
+    }
+
+    my-button {
+      margin-top: 10px;
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-video-miniature/videos-selection.component.ts b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
new file mode 100644
index 000000000..3e0e3b983
--- /dev/null
+++ b/client/src/app/shared/shared-video-miniature/videos-selection.component.ts
@@ -0,0 +1,118 @@
+import { Observable } from 'rxjs'
+import {
+  AfterContentInit,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  QueryList,
+  TemplateRef
+} from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { AuthService, ComponentPagination, LocalStorageService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ResultList, VideoSortField } from '@shared/models'
+import { PeerTubeTemplateDirective, Video } from '../shared-main'
+import { AbstractVideoList } from './abstract-video-list'
+import { MiniatureDisplayOptions, OwnerDisplayType } from './video-miniature.component'
+
+export type SelectionType = { [ id: number ]: boolean }
+
+@Component({
+  selector: 'my-videos-selection',
+  templateUrl: './videos-selection.component.html',
+  styleUrls: [ './videos-selection.component.scss' ]
+})
+export class VideosSelectionComponent extends AbstractVideoList implements OnInit, OnDestroy, AfterContentInit {
+  @Input() pagination: ComponentPagination
+  @Input() titlePage: string
+  @Input() miniatureDisplayOptions: MiniatureDisplayOptions
+  @Input() ownerDisplayType: OwnerDisplayType
+
+  @Input() getVideosObservableFunction: (page: number, sort?: VideoSortField) => Observable<ResultList<Video>>
+
+  @ContentChildren(PeerTubeTemplateDirective) templates: QueryList<PeerTubeTemplateDirective<'rowButtons' | 'globalButtons'>>
+
+  @Output() selectionChange = new EventEmitter<SelectionType>()
+  @Output() videosModelChange = new EventEmitter<Video[]>()
+
+  _selection: SelectionType = {}
+
+  rowButtonsTemplate: TemplateRef<any>
+  globalButtonsTemplate: TemplateRef<any>
+
+  constructor (
+    protected i18n: I18n,
+    protected router: Router,
+    protected route: ActivatedRoute,
+    protected notifier: Notifier,
+    protected authService: AuthService,
+    protected userService: UserService,
+    protected screenService: ScreenService,
+    protected storageService: LocalStorageService,
+    protected serverService: ServerService
+  ) {
+    super()
+  }
+
+  @Input() get selection () {
+    return this._selection
+  }
+
+  set selection (selection: SelectionType) {
+    this._selection = selection
+    this.selectionChange.emit(this._selection)
+  }
+
+  @Input() get videosModel () {
+    return this.videos
+  }
+
+  set videosModel (videos: Video[]) {
+    this.videos = videos
+    this.videosModelChange.emit(this.videos)
+  }
+
+  ngOnInit () {
+    super.ngOnInit()
+  }
+
+  ngAfterContentInit () {
+    {
+      const t = this.templates.find(t => t.name === 'rowButtons')
+      if (t) this.rowButtonsTemplate = t.template
+    }
+
+    {
+      const t = this.templates.find(t => t.name === 'globalButtons')
+      if (t) this.globalButtonsTemplate = t.template
+    }
+  }
+
+  ngOnDestroy () {
+    super.ngOnDestroy()
+  }
+
+  getVideosObservable (page: number) {
+    return this.getVideosObservableFunction(page, this.sort)
+  }
+
+  abortSelectionMode () {
+    this._selection = {}
+  }
+
+  isInSelectionMode () {
+    return Object.keys(this._selection).some(k => this._selection[ k ] === true)
+  }
+
+  generateSyndicationList () {
+    throw new Error('Method not implemented.')
+  }
+
+  protected onMoreVideos () {
+    this.videosModel = this.videos
+  }
+}