Begin video watch design

9 files changed, 204 insertions, 465 deletions

diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index aa1f2f77e..f31e82bff 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -1,18 +1,3 @@
-<div *ngIf="error" class="row">
-  <div class="alert alert-danger">
-    The video load seems to be abnormally long.
-    <ul>
-      <li>Maybe the server {{ video.serverHost }} is down :(</li>
-      <li>
-        If not, you can report an issue on
-        <a href="https://github.com/Chocobozzz/PeerTube/issues" title="Report an issue">
-          https://github.com/Chocobozzz/PeerTube/issues
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-
 <div class="row">
   <!-- We need the video container for videojs so we just hide it -->
   <div [hidden]="videoNotFound" id="video-container">
@@ -23,167 +8,153 @@
 </div>
 
 <!-- Video information -->
-<div *ngIf="video !== null" id="video-info">
-  <div class="row video-name-views">
-    <div class="col-xs-8 col-md-8 video-name">
-      {{ video.name }}
-    </div>
-
-    <div class="col-xs-4 col-md-4 pull-right video-views">
-      {{ video.views}} views
-    </div>
-  </div>
+<div *ngIf="video" class="margin-content video-bottom">
+  <div class="video-info">
+    <div class="video-info-name-actions">
+      <div class="video-info-name">{{ video.name }}</div>
+
+      <div class="video-info-actions">
+        <div class="action-button">
+          <span
+              class="icon icon-like" title="Like this video"
+              [ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'like' }" (click)="setLike()"
+          ></span>
+        </div>
 
-  <div class="row video-small-blocks">
-    <div class="col-xs-5 col-xs-3 col-md-3 video-small-block video-small-block-account">
-      <a class="option" title="Access to all videos of this user" [routerLink]="['/videos/list', { field: 'account', search: video.account }]">
-        <span class="glyphicon glyphicon-user"></span>
-        <span class="video-small-block-text">{{ video.by }}</span>
-      </a>
-    </div>
+        <div class="action-button">
+          <span
+            class="icon icon-dislike" title="Dislike this video"
+            [ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'dislike' }" (click)="setDislike()"
+          ></span>
+        </div>
 
-    <div class="col-xs-2 col-md-3 video-small-block video-small-block-share">
-      <a class="option" (click)="showShareModal()" title="Share the video">
-        <span class="glyphicon glyphicon-share"></span>
-        <span class="hidden-xs video-small-block-text">Share</span>
-      </a>
-    </div>
+        <div (click)="showShareModal()" class="action-button">
+          <span class="icon icon-share"></span>
+          Share
+        </div>
 
-    <div class="col-xs-2 col-md-3 video-small-block video-small-block-more">
-      <div class="video-small-block-dropdown" dropdown dropup="true" placement="right">
-        <a class="option" title="Access to more options" dropdownToggle>
-          <span class="glyphicon glyphicon-option-horizontal"></span>
-          <span class="hidden-xs video-small-block-text">More</span>
-        </a>
-
-        <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
-          <li *ngIf="canUserUpdateVideo()" role="menuitem">
-            <a class="dropdown-item" title="Update this video" href="#" [routerLink]="[ '/videos/edit', video.uuid ]">
-              <span class="glyphicon glyphicon-pencil"></span> Update
-            </a>
-          </li>
-
-          <li role="menuitem">
-            <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)">
-              <span class="glyphicon glyphicon-download-alt"></span> Download
-            </a>
-          </li>
-
-          <li *ngIf="isUserLoggedIn()" role="menuitem">
-            <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)">
-              <span class="glyphicon glyphicon-alert"></span> Report
-            </a>
-          </li>
-
-          <li *ngIf="isVideoRemovable()" role="menuitem">
-            <a class="dropdown-item" title="Delete this video" href="#" (click)="removeVideo($event)">
-              <span class="glyphicon glyphicon-remove"></span> Delete
-            </a>
-          </li>
-
-          <li *ngIf="isVideoBlacklistable()" role="menuitem">
-            <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)">
-              <span class="glyphicon glyphicon-eye-close"></span> Blacklist
-            </a>
-          </li>
-        </ul>
+        <div class="action-more" dropdown dropup="true" placement="right">
+          <div class="action-button" dropdownToggle>
+            <span class="icon icon-more"></span>
+          </div>
+
+          <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button">
+            <li *ngIf="canUserUpdateVideo()" role="menuitem">
+              <a class="dropdown-item" title="Update this video" href="#" [routerLink]="[ '/videos/edit', video.uuid ]">
+                <span class="glyphicon glyphicon-pencil"></span> Update
+              </a>
+            </li>
+
+            <li role="menuitem">
+              <a class="dropdown-item" title="Download the video" href="#" (click)="showDownloadModal($event)">
+                <span class="glyphicon glyphicon-download-alt"></span> Download
+              </a>
+            </li>
+
+            <li *ngIf="isUserLoggedIn()" role="menuitem">
+              <a class="dropdown-item" title="Report this video" href="#" (click)="showReportModal($event)">
+                <span class="glyphicon glyphicon-alert"></span> Report
+              </a>
+            </li>
+
+            <li *ngIf="isVideoRemovable()" role="menuitem">
+              <a class="dropdown-item" title="Delete this video" href="#" (click)="removeVideo($event)">
+                <span class="glyphicon glyphicon-remove"></span> Delete
+              </a>
+            </li>
+
+            <li *ngIf="isVideoBlacklistable()" role="menuitem">
+              <a class="dropdown-item" title="Blacklist this video" href="#" (click)="blacklistVideo($event)">
+                <span class="glyphicon glyphicon-eye-close"></span> Blacklist
+              </a>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
 
-    <div class="col-xs-3 col-md-3 video-small-block video-small-block-rating">
-      <div class="video-small-block-like">
-        <span
-          class="glyphicon glyphicon-thumbs-up" title="Like this video"
-          [ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'like' }" (click)="setLike()"
-        ></span>
-
-        <span class="video-small-block-text">
-          {{ video.likes }}
-        </span>
-      </div>
-
-      <div class="video-small-block-dislike">
-        <span
-          class="glyphicon glyphicon-thumbs-down" title="Dislike this video"
-          [ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'dislike' }" (click)="setDislike()"
-        ></span>
+    <div class="video-info-date-views">
+      {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
+    </div>
 
-        <span class="video-small-block-text">
-          {{ video.dislikes }}
-        </span>
-      </div>
+    <div class="video-info-channel">
+      {{ video.channel.name }}
+      <!-- Here will be the subscribe button -->
     </div>
-  </div>
 
-  <div class="row video-details">
-    <div class="video-details-date-description col-xs-8 col-md-9">
-      <div class="video-details-date">
-        Published on {{ video.createdAt | date:'short' }}
-      </div>
+    <div class="video-info-by">
+      By {{ video.by }}
+      <img [src]="getAvatarPath()" alt="Account avatar" />
+    </div>
 
-      <div class="video-details-description" [innerHTML]="videoHTMLDescription"></div>
+    <div class="video-info-description">
+      <div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div>
 
-      <div class="video-details-description-more" *ngIf="completeDescriptionShown === false && video.description.length === 250" (click)="showMoreDescription()">
+      <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description.length === 250" (click)="showMoreDescription()">
         Show more
         <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
         <my-loader class="description-loading" [loading]="descriptionLoading"></my-loader>
       </div>
 
-      <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-details-description-more">
+      <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
         Show less
         <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
       </div>
     </div>
 
-    <div class="video-details-attributes col-xs-4 col-md-3">
-      <div class="video-details-attribute">
-        <span class="video-details-attribute-label">
-          Privacy:
+    <div class="video-attributes">
+      <div class="video-attribute">
+        <span class="video-attribute-label">
+          Privacy
         </span>
-        <span class="video-details-attribute-value">
+        <span class="video-attribute-value">
           {{ video.privacyLabel }}
         </span>
       </div>
 
-      <div class="video-details-attribute">
-        <span class="video-details-attribute-label">
-          Category:
+      <div class="video-attribute">
+        <span class="video-attribute-label">
+          Category
         </span>
-        <span class="video-details-attribute-value">
+        <span class="video-attribute-value">
           {{ video.categoryLabel }}
         </span>
       </div>
 
-      <div class="video-details-attribute">
-        <span class="video-details-attribute-label">
-          Licence:
+      <div class="video-attribute">
+        <span class="video-attribute-label">
+          Licence
         </span>
-        <span class="video-details-attribute-value">
+        <span class="video-attribute-value">
           {{ video.licenceLabel }}
         </span>
       </div>
 
-      <div class="video-details-attribute">
-        <span class="video-details-attribute-label">
-          Language:
+      <div class="video-attribute">
+        <span class="video-attribute-label">
+          Language
         </span>
-        <span class="video-details-attribute-value">
+        <span class="video-attribute-value">
           {{ video.languageLabel }}
         </span>
       </div>
 
-      <div class="video-details-attribute">
-        <span class="video-details-attribute-label">
-          Tags:
+      <div class="video-attribute">
+        <span class="video-attribute-label">
+          Tags
         </span>
 
-        <div class="video-details-tags">
-          <a *ngFor="let tag of video.tags" [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary">
-            {{ tag }}
-          </a>
-        </div>
+        <span class="video-attribute-value">
+          {{ getVideoTags() }}
+        </span>
       </div>
+    </div>
+
+  </div>
 
+  <div class="other-videos">
+    <div *ngFor="let video of otherVideos">
+      <my-video-miniature [video]="video" [user]="user"></my-video-miniature>
     </div>
   </div>
 </div>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 06c2de7c6..7bcfeb7c3 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -17,167 +17,108 @@
   font-weight: bold;
 }
 
-#torrent-info {
-  font-size: 10px;
-  margin-top: 10px;
-  text-align: center;
-
-  div {
-    min-width: 60px;
-  }
-}
-
-#video-info {
-  .video-name-views {
-    font-weight: bold;
-    font-size: 18px;
-    min-height: $video-watch-title-height;
-    display: flex;
-    align-items: center;
-
-    .video-name {
-      padding-left: $video-watch-info-padding-left;
-    }
+.video-bottom {
+  margin-top: 40px;
+  display: flex;
 
-    .video-views {
-      text-align: right;
-      // Keep a symmetry with the video name
-      padding-right: $video-watch-info-padding-left
-    }
+  .video-info {
+    flex-grow: 1;
+    margin-right: 28px;
 
-  }
+    .video-info-name-actions {
+      display: flex;
+      align-items: center;
 
-  .video-small-blocks {
-    height: $video-watch-info-height;
-    color: $video-watch-info-color;
-    border-color: $video-watch-border-color;
-    border-width: 1px 0px;
-    border-style: solid;
+      .video-info-name {
+        font-size: 27px;
+        font-weight: $font-semibold;
+        flex-grow: 1;
+      }
 
-    .video-small-block {
-      height: $video-watch-info-height;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      text-align: center;
+      .video-info-actions {
+        .action-button {
+          @include peertube-button;
 
-      a {
-        cursor: pointer;
-        transition: color 0.3s;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+          font-size: 15px;
+          font-weight: $font-semibold;
+          color: #585858;
+          background-color: #E5E5E5;
+          display: inline-block;
+          padding: 0 10px 0 10px;
 
-        &, &:hover {
-          color: inherit;
-          text-decoration:none;
+          &:hover {
+            background-color: #EFEFEF;
+          }
         }
 
-        &:hover {
-          color: #000 !important;
+        .action-more {
+          display: inline-block;
         }
 
-        &:hover > .glyphicon {
-          opacity: 1 !important;
-        }
-      }
+        .icon {
+          display: inline-block;
+          background-repeat: no-repeat;
+          background-size: contain;
+          width: 21px;
+          height: 21px;
+          vertical-align: middle;
+          position: relative;
+          top: -2px;
 
-      .option .glyphicon {
-        font-size: 22px;
-        color: inherit;
-        opacity: 0.15;
-        margin-bottom: 10px;
-        transition: opacity 0.3s;
-      }
+          &.icon-like {
+            background-image: url('../../../assets/images/video/like.svg');
+          }
 
-      .video-small-block-text {
-        font-size: 15px;
-        font-weight: bold;
-      }
-    }
+          &.icon-dislike {
+            background-image: url('../../../assets/images/video/dislike.svg');
+          }
 
-    .video-small-block:not(:last-child) {
-      border-width: 0 1px 0 0;
-      border-color: $video-watch-border-color;
-      border-style: solid;
-    }
+          &.icon-share {
+            background-image: url('../../../assets/images/video/share.svg');
+          }
 
-    .video-small-block-account, .video-small-block-more {
-      a.option {
-        display: block;
-
-        .glyphicon {
-          display: block;
+          &.icon-more {
+            background-image: url('../../../assets/images/video/more.svg');
+          }
         }
       }
     }
 
-    .video-small-block-share, .video-small-block-more {
-      a.option {
-        display: block;
-
-        .glyphicon {
-          display: block;
-        }
-      }
+    .video-info-date-views {
+      font-size: 16px;
+      margin-bottom: 10px;
     }
 
-    .video-small-block-more .video-small-block-dropdown {
-      position: relative;
-
-      .dropdown-item .glyphicon {
-        margin-right: 5px;
-      }
+    .video-info-channel {
+      font-weight: $font-semibold;
+      font-size: 15px;
     }
 
-    .video-small-block-rating {
-
-      .video-small-block-like {
-        margin-bottom: 10px;
-      }
-
-      .video-small-block-text {
-        vertical-align: top;
-      }
-
-      .glyphicon {
-        font-size: 18px;
-        margin: 0 10px 0 0;
-        opacity: 0.3;
-      }
-
-      .interactive {
-        cursor: pointer;
-        transition: opacity, color 0.3s;
+    .video-info-by {
+      display: flex;
+      align-items: center;
+      font-size: 13px;
 
-        &.activated, &:hover {
-          opacity: 1;
-          color: #000;
-        }
+      img {
+        width: 16px;
+        height: 16px;
+        margin-left: 3px;
       }
     }
-  }
-
-  .video-details {
-    margin-top: 30px;
 
-    .video-details-date-description {
-      padding-left: $video-watch-info-padding-left;
+    .video-info-description {
+      margin: 20px 0;
+      font-size: 15px;
 
       .description-loading {
         display: inline-block;
       }
 
-      .video-details-date {
-        font-weight: bold;
-        margin-bottom: 30px;
-      }
-
-      .video-details-description-more {
+      .video-info-description-more {
         cursor: pointer;
-        margin-top: 15px;
-        font-weight: bold;
-        color: #acaeb7;
+        font-weight: $font-semibold;
+        color: #585858;
+        font-size: 14px;
 
         .glyphicon {
           position: relative;
@@ -186,109 +127,20 @@
       }
     }
 
-    .video-details-attributes {
-      font-weight: bold;
-      font-size: 12px;
-
-      .video-details-attribute {
-        display: flex;
-
-        .video-details-attribute-label {
-          color: $video-watch-info-color;
-          flex-basis: 60px;
-          flex-grow: 0;
-          flex-shrink: 0;
-          margin-right: 5px;
-        }
-      }
-    }
-
-    .video-details-tags {
-      display: flex;
-      flex-wrap: wrap;
-
-      a {
-        margin: 0 3px 3px 0;
-        font-size: 11px;
-      }
-    }
-  }
-
-  @media screen and (max-width: 800px) {
-    .video-name-views {
-      .video-name {
-        padding-left: 5px;
-        padding-right: 0px;
-      }
-
-      .video-views {
-        padding-left: 0px;
-        padding-right: 5px;
-      }
-    }
-
-    .video-small-blocks {
-      a, .video-small-block-text {
-        font-size: 13px !important;
-      }
-
-      .glyphicon {
-        font-size: 18px !important;
-      }
-
-      .video-small-block-account {
-        padding-left: 10px;
-        padding-right: 10px;
-      }
-    }
-
-    .video-details {
-      .video-details-date-description {
-        padding-left: 10px;
-        font-size: 13px !important;
-      }
-
-      .video-details-attributes {
-        font-size: 11px !important;
+    .video-attributes {
+      .video-attribute {
+        font-size: 13px;
+        display: block;
+        margin-bottom: 12px;
 
-        .video-details-attribute-label {
-          width: 50px;
+        .video-attribute-label {
+          width: 86px;
+          display: inline-block;
+          color: #585858;
+          font-weight: $font-bold;
         }
       }
     }
-  }
 
-  @media screen and (max-width: 500px) {
-    .video-name-views {
-      font-size: 16px !important;
-    }
-
-    // Keep the same hierarchy than max-width: 800px
-    .video-small-blocks {
-      a, .video-small-block-text {
-        font-size: 10px !important;
-      }
-
-      .video-small-block-account {
-        padding-left: 5px;
-        padding-right: 5px;
-      }
-    }
-
-    .video-details {
-      .video-details-date-description {
-        margin-bottom: 30px;
-        width: 100%;
-
-        .video-details-date {
-          margin-bottom: 15px;
-        }
-      }
-
-      .video-details-attributes {
-        padding-left: 10px;
-        padding-right: 10px;
-      }
-    }
   }
 }
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 48842602e..3c6951403 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -10,6 +10,8 @@ import { UserVideoRateType, VideoRateType } from '../../../../../shared'
 import '../../../assets/player/peertube-videojs-plugin'
 import { AuthService, ConfirmService } from '../../core'
 import { VideoBlacklistService } from '../../shared'
+import { Account } from '../../shared/account/account.model'
+import { Video } from '../../shared/video/video.model'
 import { MarkdownService } from '../shared'
 import { VideoDownloadComponent } from './video-download.component'
 import { VideoReportComponent } from './video-report.component'
@@ -26,6 +28,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
   @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
 
+  otherVideos: Video[] = []
+
   error = false
   loading = false
   player: videojs.Player
@@ -57,6 +61,13 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit () {
+    this.videoService.getVideos({ currentPage: 1, itemsPerPage: 5 }, '-createdAt')
+      .subscribe(
+        data => this.otherVideos = data.videos,
+
+    err => console.error(err)
+      )
+
     this.paramsSub = this.route.params.subscribe(routeParams => {
       let uuid = routeParams['uuid']
       this.videoService.getVideo(uuid).subscribe(
@@ -114,27 +125,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
                      )
   }
 
-  removeVideo (event: Event) {
-    event.preventDefault()
-
-    this.confirmService.confirm('Do you really want to delete this video?', 'Delete').subscribe(
-      res => {
-        if (res === false) return
-
-        this.videoService.removeVideo(this.video.id)
-                         .subscribe(
-                           status => {
-                             this.notificationsService.success('Success', `Video ${this.video.name} deleted.`)
-                             // Go back to the video-list.
-                             this.router.navigate(['/videos/list'])
-                           },
-
-                           error => this.notificationsService.error('Error', error.text)
-                          )
-      }
-    )
-  }
-
   blacklistVideo (event: Event) {
     event.preventDefault()
 
@@ -165,7 +155,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   }
 
   showLessDescription () {
-
     this.updateVideoDescription(this.shortVideoDescription)
     this.completeDescriptionShown = false
   }
@@ -222,6 +211,16 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.video.isBlackistableBy(this.authService.getUser())
   }
 
+  getAvatarPath () {
+    return Account.GET_ACCOUNT_AVATAR_PATH(this.video.account)
+  }
+
+  getVideoTags () {
+    if (!this.video || Array.isArray(this.video.tags) === false) return []
+
+    return this.video.tags.join(', ')
+  }
+
   private updateVideoDescription (description: string) {
     this.video.description = description
     this.setVideoDescriptionHTML()
diff --git a/client/src/app/videos/video-list/index.ts b/client/src/app/videos/video-list/index.ts
index 13024294e..5e7c7886c 100644
--- a/client/src/app/videos/video-list/index.ts
+++ b/client/src/app/videos/video-list/index.ts
@@ -1,4 +1,3 @@
 export * from './video-recently-added.component'
 export * from './video-trending.component'
 export * from './video-search.component'
-export * from './shared'
diff --git a/client/src/app/videos/video-list/shared/index.ts b/client/src/app/videos/video-list/shared/index.ts
deleted file mode 100644
index 2778f2d9e..000000000
--- a/client/src/app/videos/video-list/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './video-miniature.component'
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.html b/client/src/app/videos/video-list/shared/video-miniature.component.html
deleted file mode 100644
index 7ac017235..000000000
--- a/client/src/app/videos/video-list/shared/video-miniature.component.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<div class="video-miniature">
-  <my-video-thumbnail [video]="video" [nsfw]="isVideoNSFWForThisUser()"></my-video-thumbnail>
-
-  <div class="video-miniature-information">
-    <span class="video-miniature-name">
-      <a
-        class="video-miniature-name"
-        [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoNSFWForThisUser() }"
-      >
-          {{ video.name }}
-      </a>
-    </span>
-
-    <span class="video-miniature-created-at-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
-    <span class="video-miniature-account">{{ video.by }}</span>
-  </div>
-</div>
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.scss b/client/src/app/videos/video-list/shared/video-miniature.component.scss
deleted file mode 100644
index 37e84897b..000000000
--- a/client/src/app/videos/video-list/shared/video-miniature.component.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.video-miniature {
-  display: inline-block;
-  padding-right: 15px;
-  margin-bottom: 30px;
-  height: 175px;
-  vertical-align: top;
-
-  .video-miniature-information {
-    width: 200px;
-    margin-top: 2px;
-    line-height: normal;
-
-    .video-miniature-name {
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-weight: bold;
-      transition: color 0.2s;
-      font-size: 16px;
-      font-weight: $font-semibold;
-      color: #000;
-
-      &:hover {
-        text-decoration: none;
-      }
-
-      &.blur-filter {
-        filter: blur(3px);
-        padding-left: 4px;
-      }
-    }
-
-    .video-miniature-created-at-views {
-      display: block;
-      font-size: 13px;
-    }
-
-    .video-miniature-account {
-      font-size: 13px;
-      color: #585858;
-    }
-  }
-}
diff --git a/client/src/app/videos/video-list/shared/video-miniature.component.ts b/client/src/app/videos/video-list/shared/video-miniature.component.ts
deleted file mode 100644
index e8fc8e911..000000000
--- a/client/src/app/videos/video-list/shared/video-miniature.component.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Component, Input } from '@angular/core'
-import { User } from '../../../shared'
-import { SortField } from '../../../shared/video/sort-field.type'
-import { Video } from '../../../shared/video/video.model'
-
-@Component({
-  selector: 'my-video-miniature',
-  styleUrls: [ './video-miniature.component.scss' ],
-  templateUrl: './video-miniature.component.html'
-})
-export class VideoMiniatureComponent {
-  @Input() currentSort: SortField
-  @Input() user: User
-  @Input() video: Video
-
-  isVideoNSFWForThisUser () {
-    return this.video.isVideoNSFWForUser(this.user)
-  }
-}
diff --git a/client/src/app/videos/videos.module.ts b/client/src/app/videos/videos.module.ts
index 8c8d52ad9..4b14d1da8 100644
--- a/client/src/app/videos/videos.module.ts
+++ b/client/src/app/videos/videos.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core'
 import { SharedModule } from '../shared'
-import { VideoMiniatureComponent, VideoSearchComponent } from './video-list'
+import { VideoSearchComponent } from './video-list'
 import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component'
 import { VideoTrendingComponent } from './video-list/video-trending.component'
 import { VideosRoutingModule } from './videos-routing.module'
@@ -17,7 +17,6 @@ import { VideosComponent } from './videos.component'
 
     VideoTrendingComponent,
     VideoRecentlyAddedComponent,
-    VideoMiniatureComponent,
     VideoSearchComponent
   ],