From 4d5e572f52e000034abb076e4bf7d7044d704f94 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 1 Apr 2021 16:14:34 +0200
Subject: Account/channel videos display as rows

---
 .../app/shared/shared-video-miniature/abstract-video-list.html   | 4 ++--
 .../app/shared/shared-video-miniature/abstract-video-list.scss   | 9 +++++++++
 .../src/app/shared/shared-video-miniature/abstract-video-list.ts | 5 +++++
 3 files changed, 16 insertions(+), 2 deletions(-)

(limited to 'client/src/app/shared')

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
index 81c773b5a..ee5df28be 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.html
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
@@ -43,7 +43,7 @@
   <div class="no-results" i18n *ngIf="hasDoneFirstQuery && videos.length === 0">No results.</div>
   <div
     myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()"
-    class="videos"
+    class="videos" [ngClass]="{ 'display-as-row': displayAsRow() }"
   >
     <ng-container *ngFor="let video of videos; trackBy: videoById;">
       <h2 class="date-title" *ngIf="getCurrentGroupedDateLabel(video)">
@@ -52,7 +52,7 @@
 
       <div class="video-wrapper">
         <my-video-miniature
-          [video]="video" [user]="userMiniature"
+          [video]="video" [user]="userMiniature" [displayAsRow]="displayAsRow()"
           [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
           (videoBlocked)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"
         >
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
index 26c412402..6570b63d0 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
@@ -72,6 +72,15 @@ $iconSize: 16px;
   @include grid-videos-miniature-layout;
 }
 
+.display-as-row.videos {
+  margin-left: pvar(--horizontalMarginContent);
+  margin-right: pvar(--horizontalMarginContent);
+
+  .video-wrapper {
+    margin-bottom: 15px;
+  }
+}
+
 @media screen and (max-width: $mobile-view) {
   .videos-header {
     flex-direction: column;
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
index 18615c37a..f83380513 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.ts
@@ -319,6 +319,11 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, AfterConte
     viewContainerRef.createComponent(componentFactory, 0, injector)
   }
 
+  // Can be redefined by child
+  displayAsRow () {
+    return false
+  }
+
   // On videos hook for children that want to do something
   protected onMoreVideos () { /* empty */ }
 
-- 
cgit v1.2.3