Merge branch 'master' into face-detection

whyboris · Feb 12, 2020 · 772ee6d · 772ee6d
2 parents 93fffbf + 52bc2d6
commit 772ee6d
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 89 deletions.
diff --git a/main-support.ts b/main-support.ts
@@ -391,9 +391,13 @@ export function extractAllMetadata(
  * @param metadata  the ffProbe metadata object
  */
 function getBestStream(metadata) {
-  return metadata.streams.reduce(function (a, b) {
-    return a.width > b.width ? a : b;
-  });
+  try {
+    return metadata.streams.reduce((a, b) => a.width > b.width ? a : b);
+  } catch (e) {
+    // if metadata.streams is an empty array or something else is wrong with it
+    // return an empty object so later calls to `stream.width` or `stream.height` do not throw exceptions
+    return {};
+  }
 }
 
 /**

diff --git a/src/app/components/views/thumbnail/preview.component.html b/src/app/components/views/thumbnail/preview.component.html
@@ -7,8 +7,6 @@
   [ngClass]="{ 'compact-margins': compactView }"
 >
 
-  <!-- FOLDER BLOCK -->
-
   <div *ngIf="video.cleanName === '*FOLDER*'; else singleThumbnail">
     <div
       *ngIf="video.fileName !== '*UP*'; else upFolderDiv"
@@ -17,59 +15,24 @@
       (click)="videoClick.emit($event)"
       [ngStyle]="{ height: imgHeight + 'px' }"
     >
+
+      <!-- Show one thumbnail if there is only one video inside the folder -->
       <div
-        *ngIf="folderThumbPaths[0]"
-        class="folder-item"
+        *ngIf="!folderThumbPaths[1] && folderThumbPaths[0]; else fourPreviews"
+        class="folder-item-fullsize"
         [ngStyle]="{
           'background-image': 'url(' + folderThumbPaths[0] + ')'
         }"
       ></div>
-      <div
-        *ngIf="folderThumbPaths[1]"
-        class="folder-item"
-        [ngStyle]="{
-          left: '50%',
-          top: '0%',
-          'background-image': 'url(' + folderThumbPaths[1] + ')'
-        }"
-      ></div>
-      <div
-        *ngIf="folderThumbPaths[2]"
-        class="folder-item"
-        [ngStyle]="{
-          left: '0%',
-          top: '50%',
-          'background-image': 'url(' + folderThumbPaths[2] + ')'
-        }"
-      ></div>
-      <div
-        *ngIf="folderThumbPaths[3]"
-        class="folder-item"
-        [ngStyle]="{
-          left: '50%',
-          top: '50%',
-          'background-image': 'url(' + folderThumbPaths[3] + ')'
-        }"
-      ></div>
+
       <span *ngIf="showMeta" class="time folder-time">{{ video.duration | lengthPipe : true : true : true }}</span>
     </div>
+
     <div *ngIf="video.cleanName === '*FOLDER*' && video.fileName !== '*UP*'" class="folder-icon">
       <app-icon [icon]="'icon-folder-blank'"></app-icon>
       <div class="items-in-folder">{{ video.fileSizeDisplay }}</div>
     </div>
 
-    <ng-template #upFolderDiv>
-      <div
-        class="video-box folder"
-        (click)="videoClick.emit($event)"
-        [ngStyle]="{ height: imgHeight + 'px' }"
-      >
-        <div class="up-icon">
-          <app-icon [icon]="'icon-chevron-left'"></app-icon>
-        </div>
-      </div>
-    </ng-template>
-
     <span
       *ngIf="showMeta && video.fileName !== '*UP*'"
       [ngClass]="{ 'larger-font': largerFont }"
@@ -86,53 +49,106 @@
     </span>
   </div>
 
+</div>
 
-  <!-- INDIVIDUAL FILE BLOCK -->
-
-  <ng-template #singleThumbnail>
+<!-- ========================= UP FOLDER TEMPLATE ============================================== -->
+<ng-template #upFolderDiv>
 
-    <div
-      #filmstripHolder
-      class="video-box"
-      (mousemove)="mouseIsMoving($event)"
-      (mouseenter)="mouseEntered()"
-      (mouseleave)="mouseLeft()"
-      (click)="videoClick.emit({ mouseEvent: $event, thumbIndex: indexToShow })"
-      (contextmenu)="rightClick.emit({ mouseEvent: $event, item: video })"
-      [ngStyle]="{
-          height: imgHeight + 'px',
-          'background-image': 'url(' + (hover ? fullFilePath : firstFilePath) + ')',
-          'background-position-x': percentOffset + '%'
-        }"
-    >
-      <span *ngIf="showMeta" class="time">{{ video.durationDisplay }}</span>
-      <span *ngIf="showMeta" class="rez">{{ video.resolution }}</span>
+  <div
+    class="video-box folder"
+    (click)="videoClick.emit($event)"
+    [ngStyle]="{ height: imgHeight + 'px' }"
+  >
+    <div class="up-icon">
+      <app-icon [icon]="'icon-chevron-left'"></app-icon>
     </div>
-    <!--
-      .sheet-icon needs to be the next sibling of .video-box for hover to work
-       DO NOT SEPARATE!
-    -->
-    <app-icon
-      class="sheet-icon"
-      [icon]="'icon-show-thumbnails'"
-      (click)="sheetClick.emit()"
-    ></app-icon>
+  </div>
 
-    <span
+</ng-template>
+
+<!-- ========================= FOUR PREVIEWS TEMPLATE ========================================== -->
+<ng-template #fourPreviews>
+
+  <div
+    *ngIf="folderThumbPaths[0]"
+    class="folder-item"
+    [ngStyle]="{
+      'background-image': 'url(' + folderThumbPaths[0] + ')'
+    }"
+  ></div>
+  <div
+    *ngIf="folderThumbPaths[1]"
+    class="folder-item"
+    [ngStyle]="{
+      left: '50%',
+      top: '0%',
+      'background-image': 'url(' + folderThumbPaths[1] + ')'
+    }"
+  ></div>
+  <div
+    *ngIf="folderThumbPaths[2]"
+    class="folder-item"
+    [ngStyle]="{
+      left: '0%',
+      top: '50%',
+      'background-image': 'url(' + folderThumbPaths[2] + ')'
+    }"
+  ></div>
+  <div
+    *ngIf="folderThumbPaths[3]"
+    class="folder-item"
+    [ngStyle]="{
+      left: '50%',
+      top: '50%',
+      'background-image': 'url(' + folderThumbPaths[3] + ')'
+    }"
+  ></div>
+
+</ng-template>
+
+<!-- ========================= INDIVIDUAL FILE TEMPLATE ======================================== -->
+<ng-template #singleThumbnail>
+
+  <div
+    #filmstripHolder
+    class="video-box"
+    (mousemove)="mouseIsMoving($event)"
+    (mouseenter)="mouseEntered()"
+    (mouseleave)="mouseLeft()"
+    (click)="videoClick.emit({ mouseEvent: $event, thumbIndex: indexToShow })"
+    (contextmenu)="rightClick.emit({ mouseEvent: $event, item: video })"
+    [ngStyle]="{
+        height: imgHeight + 'px',
+        'background-image': 'url(' + (hover ? fullFilePath : firstFilePath) + ')',
+        'background-position-x': percentOffset + '%'
+      }"
+  >
+    <span *ngIf="showMeta" class="time">{{ video.durationDisplay }}</span>
+    <span *ngIf="showMeta" class="rez">{{ video.resolution }}</span>
+  </div>
+  <!--
+    .sheet-icon needs to be the next sibling of .video-box for hover to work
+      DO NOT SEPARATE!
+  -->
+  <app-icon
+    class="sheet-icon"
+    [icon]="'icon-show-thumbnails'"
+    (click)="sheetClick.emit()"
+  ></app-icon>
+
+  <span
+    *ngIf="showMeta"
+    [ngClass]="{ 'larger-font': largerFont }"
+    [ngStyle]="{ color: darkMode ? '#BBBBBB' : '#000000' }"
+    class="title"
+  >
+    {{ video.cleanName }}
+    <div
       *ngIf="showMeta"
-      [ngClass]="{ 'larger-font': largerFont }"
-      [ngStyle]="{ color: darkMode ? '#BBBBBB' : '#000000' }"
-      class="title"
+      class="fileSize"
     >
-      {{ video.cleanName }}
-      <div
-        *ngIf="showMeta"
-        class="fileSize"
-      >
-        {{ showMeta ? '(' + video.fileSizeDisplay + ')' : '' }}
-      </div>
-    </span>
-
-  </ng-template>
+      {{ showMeta ? '(' + video.fileSizeDisplay + ')' : '' }}
+    </div>
+  </span>
 
-</div>
+</ng-template>
diff --git a/src/app/components/views/thumbnail/preview.component.scss b/src/app/components/views/thumbnail/preview.component.scss
@@ -7,6 +7,15 @@
   width: 50%;
 }
 
+.folder-item-fullsize {
+  background-color: black;
+  background-size: cover;
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  width: 100%;
+}
+
 .folder {
   border: 3px solid white;
   border-radius: 10px;