From 58394c3784410eb3b500c42d8ac71d0eb9eea01e Mon Sep 17 00:00:00 2001
From: Semla <semla.dev@gmail.com>
Date: Mon, 11 Oct 2021 23:08:52 +0200
Subject: [PATCH] Adding compact view option also for filmstrip view

---
 src/app/components/home.component.html                 | 10 ++++++++--
 src/app/components/home.component.ts                   |  5 ++++-
 .../views/filmstrip/filmstrip.component.html           |  3 +--
 .../components/views/filmstrip/filmstrip.component.ts  |  2 ++
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/app/components/home.component.html b/src/app/components/home.component.html
index f14535f60..764d06129 100644
--- a/src/app/components/home.component.html
+++ b/src/app/components/home.component.html
@@ -847,14 +847,20 @@
           [hubName]="appState.hubName"
           [imgHeight]="previewHeight"
 
+          [compactView]="settingsButtons['compactView'].toggled"
           [darkMode]="settingsButtons['darkMode'].toggled"
           [hoverScrub]="settingsButtons['hoverScrub'].toggled"
           [largerFont]="settingsButtons['fontSizeLarger'].toggled"
           [showMeta]="settingsButtons['showMoreInfo'].toggled"
 
           style="display: block"
-          [ngStyle]="{ height: previewHeight + textPaddingHeight + 10 + 'px'}"
-        ></app-filmstrip-item>
+          [ngStyle]="{
+              height:   previewHeight
+                      + textPaddingHeight
+                      + (settingsButtons['compactView'].toggled ? 0 : 10)
+                      + 'px'
+            }"
+          ></app-filmstrip-item>
       </ng-container>
 
       <!-- ==================================== FULL VIEW ==================================== -->
diff --git a/src/app/components/home.component.ts b/src/app/components/home.component.ts
index 41eeb95d0..b20427bad 100644
--- a/src/app/components/home.component.ts
+++ b/src/app/components/home.component.ts
@@ -1600,6 +1600,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
       if (
         this.settingsButtons['showThumbnails'].toggled
         || this.settingsButtons['showClips'].toggled
+        || this.settingsButtons['showFilmstrip'].toggled
       ) {
         this.computeTextBufferAmount();
       }
@@ -1799,7 +1800,9 @@ export class HomeComponent implements OnInit, AfterViewInit {
         break;
 
       case 'showFilmstrip':
-        if (this.settingsButtons.showMoreInfo.toggled) {
+        if (this.settingsButtons.compactView.toggled) {
+          this.textPaddingHeight = 0;
+        } else if (this.settingsButtons.showMoreInfo.toggled) {
           this.textPaddingHeight = 20;
         } else {
           this.textPaddingHeight = 0;
diff --git a/src/app/components/views/filmstrip/filmstrip.component.html b/src/app/components/views/filmstrip/filmstrip.component.html
index 4632f3e3a..45ae10fdd 100644
--- a/src/app/components/views/filmstrip/filmstrip.component.html
+++ b/src/app/components/views/filmstrip/filmstrip.component.html
@@ -1,8 +1,7 @@
 <div
-  class="meta-container"
   [ngStyle]="{ height: elHeight + 'px'}"
+  [ngClass]="compactView ? 'compact-margins': 'meta-container'"
 >
-
   <div
     #filmstripHolder
     (mousemove)="updateFilmXoffset($event)"
diff --git a/src/app/components/views/filmstrip/filmstrip.component.ts b/src/app/components/views/filmstrip/filmstrip.component.ts
index 5463eeb27..c907c1889 100644
--- a/src/app/components/views/filmstrip/filmstrip.component.ts
+++ b/src/app/components/views/filmstrip/filmstrip.component.ts
@@ -12,6 +12,7 @@ import { RightClickEmit, VideoClickEmit } from '../../../../../interfaces/shared
   selector: 'app-filmstrip-item',
   templateUrl: './filmstrip.component.html',
   styleUrls: [
+      '../clip-and-preview.scss',
       '../film-and-full.scss',
       '../time-and-rez.scss',
       '../selected.scss'
@@ -28,6 +29,7 @@ export class FilmstripComponent implements OnInit {
 
   @Input() video: ImageElement;
 
+  @Input() compactView: boolean;
   @Input() darkMode: boolean;
   @Input() elHeight: number;
   @Input() folderPath: string;