Refactor video miniatures

3 files changed, 11 insertions, 55 deletions

diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html
index 82a5f0f26..da2ace54d 100644
--- a/client/src/app/search/search.component.html
+++ b/client/src/app/search/search.component.html
@@ -48,13 +48,7 @@
     </div>
 
     <div *ngIf="isVideo(result)" class="entry video">
-      <my-video-thumbnail [video]="result" [nsfw]="isVideoBlur(result)"></my-video-thumbnail>
-
-      <div class="video-info">
-        <a tabindex="-1" class="video-info-name" [routerLink]="['/videos/watch', result.uuid]" [attr.title]="result.name">{{ result.name }}</a>
-        <span i18n class="video-info-date-views">{{ result.publishedAt | myFromNow }} - {{ result.views | myNumberFormatter }} views</span>
-        <a tabindex="-1" class="video-info-account" [routerLink]="[ '/accounts', result.byAccount ]">{{ result.byAccount }}</a>
-      </div>
+      <my-video-miniature [video]="result" [user]="user" [displayAsRow]="true"></my-video-miniature>
     </div>
   </ng-container>
 
diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
index e0509ee15..4e3ce1c96 100644
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -55,51 +55,14 @@
     padding-bottom: 20px;
     margin-bottom: 20px;
 
-    &.video {
-
-      my-video-thumbnail {
-        margin-right: 10px;
-      }
-
-      .video-info {
-        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;
-          }
-        }
-      }
-    }
-
     &.video-channel {
-
       img {
-        @include avatar(120px);
+        $image-size: 130px;
+        $margin-size: ($video-thumbnail-width - $image-size) / 2; // So we have the same width than the video miniature
+
+        @include avatar($image-size);
 
-        margin: 0 50px 0 40px;
+        margin: 0 ($margin-size + 10) 0 $margin-size;
       }
 
       .video-channel-info {
diff --git a/client/src/app/search/search.component.ts b/client/src/app/search/search.component.ts
index c4a4b1fde..a3383ed8a 100644
--- a/client/src/app/search/search.component.ts
+++ b/client/src/app/search/search.component.ts
@@ -41,10 +41,13 @@ export class SearchComponent implements OnInit, OnDestroy {
     private metaService: MetaService,
     private notifier: Notifier,
     private searchService: SearchService,
-    private authService: AuthService,
-    private serverService: ServerService
+    private authService: AuthService
   ) { }
 
+  get user () {
+    return this.authService.getUser()
+  }
+
   ngOnInit () {
     this.subActivatedRoute = this.route.queryParams.subscribe(
       queryParams => {
@@ -76,10 +79,6 @@ export class SearchComponent implements OnInit, OnDestroy {
     if (this.subActivatedRoute) this.subActivatedRoute.unsubscribe()
   }
 
-  isVideoBlur (video: Video) {
-    return video.isVideoNSFWForUser(this.authService.getUser(), this.serverService.getConfig())
-  }
-
   isVideoChannel (d: VideoChannel | Video): d is VideoChannel {
     return d instanceof VideoChannel
   }