Add fps

i18n/en.json

@@ -158,6 +158,8 @@
     "sortOptionCreatedMoreInfo": "Show the time created order option in the sorting dropdown",
     "sortOptionFolderSizeDescription": "Number of Videos",
     "sortOptionFolderSizeMoreInfo": "Show the Number of Videos order option in the sorting dropdown",
+    "sortOptionFpsDescription": "FPS",
+    "sortOptionFpsMoreInfo": "Show the frames per second order option in the sorting dropdown",
     "sortOptionModifiedDescription": "Date Modified",
     "sortOptionModifiedMoreInfo": "Show the time modified order option in the sorting dropdown",
     "sortOptionsHeading": "Sorting options in the dropdown",
@@ -338,6 +340,7 @@
     "sortCreated": "Date Created",
     "sortDefault": "Default",
     "sortFolderSize": "Number of Videos",
+    "sortFps": "FPS",
     "sortModified": "Date Modified",
     "sortRandom": "Random",
     "sortSize": "Size",

interfaces/final-object.interface.ts

@@ -39,6 +39,7 @@ export interface ImageElement {
   stars: StarRating;             // star rating 0 = n/a, otherwise 1, 2, 3
   timesPlayed: number;           // number of times the file has been launched by VHA
   width: number;                 // width of the video (px)
+  fps: number;                   //  base frame rate of the video in fps
   // ========================================================================
   // OPTIONAL
   // ------------------------------------------------------------------------
@@ -84,6 +85,7 @@ export function NewImageElement(): ImageElement {
     stars: 0.5,
     timesPlayed: 0,
     width: 0,
+    fps: 0,
   };
 }
 

node/main-support.ts

@@ -133,6 +133,7 @@ function getDurationDisplay(numOfSec: number): string {
   }
 }
 
+
 /**
  * Count the number of unique folders in the final array
  */
@@ -313,6 +314,26 @@ function getFileDuration(metadata): number {
   }
 }
 
+/**
+ * Return the average frame rate of files
+ * ===========================================================================================
+ *  TO SWITCH TO AVERAGE FRAME RATE,
+ *  replace both instances of r_frame_rate with avg_frame_rate
+ *  only in this method
+ * ===========================================================================================
+ * @param metadata
+ */
+ function getFps(metadata): number {
+   if(metadata?.streams?.[0]?.r_frame_rate) {
+     let fps = metadata.streams[0].r_frame_rate
+     let evalFps = eval(fps.toString());
+     return Math.round(evalFps);
+   }
+   else {
+     return 0;
+   }
+ }
+
 // ===========================================================================================
 // Other supporting methods
 // ===========================================================================================
@@ -415,6 +436,7 @@ export function extractMetadataAsync(
         const metadata = JSON.parse(data);
         const stream = getBestStream(metadata);
         const fileDuration = getFileDuration(metadata);
+        const realFps = getFps(metadata);
 
         const duration = Math.round(fileDuration) || 0;
         const origWidth = stream.width || 0; // ffprobe does not detect it on some MKV streams
@@ -433,6 +455,7 @@ export function extractMetadataAsync(
           imageElement.mtime     = Math.round(fileStat.mtimeMs);
           imageElement.screens   = computeNumberOfScreenshots(screenshotSettings, duration);
           imageElement.width     = origWidth;
+          imageElement.fps = realFps;
 
           hashFileAsync(filePath, fileStat).then((hash) => {
             imageElement.hash = hash;

src/app/common/settings-buttons.ts

@@ -63,6 +63,7 @@ export type SettingsButtonKey = 'autoFileTags'
  | 'sortOptionAspectRatio'
  | 'sortOptionCreated'
  | 'sortOptionFolderSize'
+ | 'sortOptionFps'
  | 'sortOptionModified'
  | 'sortOptionSize'
  | 'sortOptionStar'
@@ -724,6 +725,14 @@ export const SettingsButtons: SettingsButtonsType = {
     title: '',
     toggled: false
   },
+
+  'sortOptionFps': {
+    description: 'BUTTONS.sortOptionFpsDescription',
+    hidden: false,
+    moreInfo: 'BUTTONS.sortOptionFpsMoreInfo',
+    title: '',
+    toggled: true
+  },
   'sortOptionModified': {
     description: 'BUTTONS.sortOptionModifiedDescription',
     hidden: false,

src/app/components/meta/meta.component.html

@@ -34,6 +34,8 @@
 
     | {{ video.fileSizeDisplay }}
 
+    | {{ video.fps }} fps
+
     | <input
         #yearInput
         (change)="validateYear($event)"

src/app/components/sort-order/sort-order.component.html

@@ -89,6 +89,12 @@
     <option *ngIf="settingsButtons['sortOptionFolderSize'].toggled" value="folderSizeDesc">
       &#x25BC; {{ 'SIDEBAR.sortFolderSize' | translate }}
     </option>
+    <option *ngIf="settingsButtons['sortOptionFps'].toggled" value="fpsAsc">
+      &#x25B2; {{ 'SIDEBAR.sortFps' | translate }}
+    </option>
+    <option *ngIf="settingsButtons['sortOptionFps'].toggled" value="fpsDesc">
+      &#x25BC; {{ 'SIDEBAR.sortFps' | translate }}
+    </option>
     <option value="random">
       {{ 'SIDEBAR.sortRandom' | translate }}
     </option>

src/app/pipes/sorting.pipe.ts

@@ -29,7 +29,9 @@ export type SortType = 'default'
                      | 'timesPlayedAsc'
                      | 'timesPlayedDesc'
                      | 'yearAsc'
-                     | 'yearDesc';
+                     | 'yearDesc'
+                     | 'fpsAsc'
+                     | 'fpsDesc';
 
 @Pipe({
   name: 'sortingPipe'
@@ -296,7 +298,15 @@ export class SortingPipe implements PipeTransform {
       return galleryArray.slice().sort((x: ImageElement, y: ImageElement): any => {
         return this.sortFunctionLol(x, y, 'folderSize', true);
       });
-    } else {
+    } else if (sortingType === 'fpsAsc') {
+      return galleryArray.slice().sort((x: ImageElement, y: ImageElement): any => {
+        return this.sortFunctionLol(x, y, 'fps', true);
+      });
+    } else if (sortingType === 'fpsDesc') {
+      return galleryArray.slice().sort((x: ImageElement, y: ImageElement): any => {
+        return this.sortFunctionLol(x, y, 'fps', false);
+      });
+    }else {
       return galleryArray.slice().sort((x: ImageElement, y: ImageElement): any => {
         return this.sortFunctionLol(x, y, 'index', true);
       });