5 files changed, 195 insertions, 0 deletions

diff --git a/client/src/app/shared/shared-thumbnail/index.ts b/client/src/app/shared/shared-thumbnail/index.ts
new file mode 100644
index 000000000..e09692867
--- /dev/null
+++ b/client/src/app/shared/shared-thumbnail/index.ts
@@ -0,0 +1,2 @@
+export * from './video-thumbnail.component'
+export * from './shared-thumbnail.module'
diff --git a/client/src/app/shared/shared-thumbnail/shared-thumbnail.module.ts b/client/src/app/shared/shared-thumbnail/shared-thumbnail.module.ts
new file mode 100644
index 000000000..8ac557c14
--- /dev/null
+++ b/client/src/app/shared/shared-thumbnail/shared-thumbnail.module.ts
@@ -0,0 +1,23 @@
+
+import { NgModule } from '@angular/core'
+import { SharedGlobalIconModule } from '../shared-icons'
+import { SharedMainModule } from '../shared-main/shared-main.module'
+import { VideoThumbnailComponent } from './video-thumbnail.component'
+
+@NgModule({
+  imports: [
+    SharedMainModule,
+    SharedGlobalIconModule
+  ],
+
+  declarations: [
+    VideoThumbnailComponent
+  ],
+
+  exports: [
+    VideoThumbnailComponent
+  ],
+
+  providers: [ ]
+})
+export class SharedThumbnailModule { }
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
new file mode 100644
index 000000000..fe5510c56
--- /dev/null
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
@@ -0,0 +1,33 @@
+<a
+  [routerLink]="getVideoRouterLink()" [queryParams]="queryParams"
+  class="video-thumbnail"
+>
+  <img alt="" [attr.aria-label]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
+
+  <div *ngIf="displayWatchLaterPlaylist" class="video-thumbnail-actions-overlay">
+    <ng-container *ngIf="inWatchLaterPlaylist !== true">
+      <div class="video-thumbnail-watch-later-overlay" placement="left" [ngbTooltip]="addToWatchLaterText" container="body" (click)="onWatchLaterClick($event)">
+        <my-global-icon iconName="clock" [attr.aria-label]="addToWatchLaterText" role="button"></my-global-icon>
+      </div>
+    </ng-container>
+
+    <ng-container *ngIf="inWatchLaterPlaylist === true">
+      <div class="video-thumbnail-watch-later-overlay" placement="left" [ngbTooltip]="addedToWatchLaterText" container="body" (click)="onWatchLaterClick($event)">
+        <my-global-icon iconName="tick" [attr.aria-label]="addedToWatchLaterText" role="button"></my-global-icon>
+      </div>
+    </ng-container>
+  </div>
+
+  <div class="video-thumbnail-label-overlay warning"><ng-content select="label-warning"></ng-content></div>
+  <div class="video-thumbnail-label-overlay danger"><ng-content select="label-danger"></ng-content></div>
+
+  <div class="video-thumbnail-duration-overlay">{{ video.durationLabel }}</div>
+
+  <div class="play-overlay">
+    <div class="icon"></div>
+  </div>
+
+  <div class="progress-bar" *ngIf="video.userHistory?.currentTime">
+    <div [ngStyle]="{ 'width.%': getProgressPercent() }"></div>
+  </div>
+</a>
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
new file mode 100644
index 000000000..feff78a87
--- /dev/null
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss
@@ -0,0 +1,74 @@
+@import '_variables';
+@import '_mixins';
+@import '_miniature';
+
+.video-thumbnail {
+  @include miniature-thumbnail;
+
+  .progress-bar {
+    height: 3px;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.20);
+
+    div {
+      height: 100%;
+      background-color: pvar(--mainColor);
+    }
+  }
+
+  .video-thumbnail-watch-later-overlay,
+  .video-thumbnail-label-overlay,
+  .video-thumbnail-duration-overlay {
+    @include static-thumbnail-overlay;
+
+    border-radius: 3px;
+    font-size: 12px;
+    font-weight: $font-semibold;
+    line-height: 1.2;
+    z-index: z(miniature);
+  }
+
+  .video-thumbnail-label-overlay {
+    position: absolute;
+    padding: 0 5px;
+    left: 5px;
+    top: 5px;
+    font-weight: $font-bold;
+
+    &.warning { background-color: orange; }
+    &.danger { background-color: red; }
+  }
+
+  .video-thumbnail-duration-overlay {
+    position: absolute;
+    padding: 0 3px;
+    right: 5px;
+    bottom: 5px;
+  }
+
+  .video-thumbnail-actions-overlay {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    right: 5px;
+    top: 5px;
+    opacity: 0;
+
+    div:not(:first-child) {
+      margin-top: 2px;
+    }
+
+    .video-thumbnail-watch-later-overlay {
+      padding: 3px;
+
+      my-global-icon {
+        width: 22px;
+        height: 22px;
+
+        @include apply-svg-color(#fff);
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
new file mode 100644
index 000000000..3ff45d9b7
--- /dev/null
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
@@ -0,0 +1,63 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { ScreenService } from '@app/core'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { Video } from '../shared-main'
+
+@Component({
+  selector: 'my-video-thumbnail',
+  styleUrls: [ './video-thumbnail.component.scss' ],
+  templateUrl: './video-thumbnail.component.html'
+})
+export class VideoThumbnailComponent {
+  @Input() video: Video
+  @Input() nsfw = false
+  @Input() routerLink: any[]
+  @Input() queryParams: { [ p: string ]: any }
+
+  @Input() displayWatchLaterPlaylist: boolean
+  @Input() inWatchLaterPlaylist: boolean
+
+  @Output() watchLaterClick = new EventEmitter<boolean>()
+
+  addToWatchLaterText: string
+  addedToWatchLaterText: string
+
+  constructor (
+    private screenService: ScreenService,
+    private i18n: I18n
+  ) {
+    this.addToWatchLaterText = this.i18n('Add to watch later')
+    this.addedToWatchLaterText = this.i18n('Remove from watch later')
+  }
+
+  getImageUrl () {
+    if (!this.video) return ''
+
+    if (this.screenService.isInMobileView()) {
+      return this.video.previewUrl
+    }
+
+    return this.video.thumbnailUrl
+  }
+
+  getProgressPercent () {
+    if (!this.video.userHistory) return 0
+
+    const currentTime = this.video.userHistory.currentTime
+
+    return (currentTime / this.video.duration) * 100
+  }
+
+  getVideoRouterLink () {
+    if (this.routerLink) return this.routerLink
+
+    return [ '/videos/watch', this.video.uuid ]
+  }
+
+  onWatchLaterClick (event: Event) {
+    this.watchLaterClick.emit(this.inWatchLaterPlaylist)
+
+    event.stopPropagation()
+    return false
+  }
+}