Adding compact view option also for filmstrip view

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 ==================================== -->

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;

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)"

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;