Refactor video miniatures

5 files changed, 15 insertions, 122 deletions

diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.html b/client/src/app/+my-account/my-account-history/my-account-history.component.html
index 00ee5fbd1..4b94490a0 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.html
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.html
@@ -15,12 +15,6 @@
 
 <div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" class="videos">
   <div class="video" *ngFor="let video of videos">
-    <my-video-thumbnail [video]="video"></my-video-thumbnail>
-
-    <div class="video-info">
-      <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
-      <span i18n class="video-info-date-views">{{ video.views | myNumberFormatter }} views</span>
-      <a tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', video.byAccount ]">{{ video.byAccount }}</a>
-    </div>
+    <my-video-miniature [video]="video" [displayAsRow]="true"></my-video-miniature>
   </div>
 </div>
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.scss b/client/src/app/+my-account/my-account-history/my-account-history.component.scss
index e03d81055..af6395fb1 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.scss
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.scss
@@ -34,63 +34,7 @@
 .video {
   @include row-blocks;
 
-  my-video-thumbnail {
-    margin-right: 10px;
-  }
-
-  .video-info {
+  .my-video-miniature {
     flex-grow: 1;
-
-    .video-info-name {
-      @include disable-default-a-behaviour;
-
-      color: var(--mainForegroundColor);
-      display: block;
-      width: fit-content;
-      font-size: 18px;
-      font-weight: $font-semibold;
-    }
-
-    .video-info-date-views {
-      font-size: 14px;
-    }
-
-    .video-info-account {
-      @include disable-default-a-behaviour;
-      @include ellipsis;
-
-      display: block;
-      width: fit-content;
-      font-size: 14px;
-      color: $grey-foreground-color;
-
-      &:hover {
-        color: $grey-foreground-hover-color;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: $small-view) {
-  .video {
-    flex-direction: column;
-    height: auto;
-    text-align: center;
-
-    .video-info-name {
-      margin: auto;
-    }
-
-    input[type=checkbox] {
-      display: none;
-    }
-
-    my-video-thumbnail {
-      margin-right: 0;
-    }
-
-    .video-buttons {
-      margin-top: 10px;
-    }
   }
 }
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
index 1f3ac0005..3a4054de8 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html
@@ -6,17 +6,7 @@
       <my-peertube-checkbox [inputName]="'video-check-' + video.id" [(ngModel)]="checkedVideos[video.id]"></my-peertube-checkbox>
     </div>
 
-    <my-video-thumbnail [video]="video"></my-video-thumbnail>
-
-    <div class="video-info">
-      <a class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
-      <span i18n class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
-      <div class="video-info-privacy">{{ video.privacy.label }}{{ getStateLabel(video) }}</div>
-      <div *ngIf="video.blacklisted" class="video-info-blacklisted">
-        <span class="blacklisted-label" i18n>Blacklisted</span>
-        <span class="blacklisted-reason" *ngIf="video.blacklistedReason">{{ video.blacklistedReason }}</span>
-      </div>
-    </div>
+    <my-video-miniature [video]="video" [displayOptions]="miniatureDisplayOptions" [displayAsRow]="true"></my-video-miniature>
 
     <!-- Display only once -->
     <div class="action-selection-mode" *ngIf="isInSelectionMode() === true && i === 0">
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
index d2df6f290..405ded3f8 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
@@ -46,44 +46,8 @@
     margin-left: 12px;
   }
 
-  my-video-thumbnail {
-    margin-right: 10px;
-  }
-
-  .video-info {
+  my-video-miniature {
     flex-grow: 1;
-
-    .video-info-name {
-      @include disable-default-a-behaviour;
-
-      color: var(--mainForegroundColor);
-      display: block;
-      width: fit-content;
-      font-size: 16px;
-      font-weight: $font-semibold;
-    }
-
-    .video-info-date-views,
-    .video-info-privacy,
-    .video-info-blacklisted {
-      font-size: 13px;
-
-      &.video-info-privacy,
-      &.video-info-blacklisted .blacklisted-label {
-        font-weight: $font-semibold;
-      }
-
-      &.video-info-blacklisted {
-        color: red;
-
-        .blacklisted-reason {
-          &::before {
-            content: ' - ';
-          }
-        }
-      }
-
-    }
   }
 
   .video-buttons {
@@ -99,20 +63,11 @@
   .video {
     flex-direction: column;
     height: auto;
-    text-align: center;
 
-    .video-info-name {
-      margin: auto;
-    }
-
-    input[type=checkbox] {
+    .checkbox-container {
       display: none;
     }
 
-    my-video-thumbnail {
-      margin-right: 0;
-    }
-
     .video-buttons {
       margin-top: 10px;
     }
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
index eb5096a5e..bbe86af73 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.ts
@@ -14,6 +14,7 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoPrivacy, VideoState } from '../../../../../shared/models/videos'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { VideoChangeOwnershipComponent } from './video-change-ownership/video-change-ownership.component'
+import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component'
 
 @Component({
   selector: 'my-account-videos',
@@ -30,6 +31,15 @@ export class MyAccountVideosComponent extends AbstractVideoList implements OnIni
     itemsPerPage: 5,
     totalItems: null
   }
+  miniatureDisplayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: false,
+    privacyLabel: false,
+    privacyText: true,
+    state: true,
+    blacklistInfo: true
+  }
 
   constructor (
     protected router: Router,