Add Year filter (#677)

* Add times played slider filter

* yearFilter initial commit

* move button to filter section

* year filter progress

Author: litelime

i18n/en.json

@@ -202,6 +202,9 @@
     "thumbAutoAdvanceDescription": "Cycle on hover",
     "thumbAutoAdvanceHint": "Enable thumbnail auto advance",
     "thumbAutoAdvanceMoreInfo": "Hovering over thumbnails cycles through screenshots",
+    "yearSliderDescription": "Filter by Year",
+    "yearSliderHint": "Year Filter",
+    "yearSliderMoreInfo": "Show the year slider filter",
     "videoNotesDescription": "Notes search",
     "videoNotesHint": "Notes search",
     "videoNotesMoreInfo": "Search through the notes you have added to your videos. Enable notes in the Tags settings",

src/app/app.module.ts

@@ -80,6 +80,7 @@ import { DuplicateFinderPipe } from './pipes/duplicateFinder.pipe';
 import { FileSearchPipe } from './pipes/file-search.pipe';
 import { FileSizeFilterPipe } from './pipes/file-size-filter.pipe';
 import { TimesPlayedFilterPipe } from './pipes/times-played-filter.pipe';
+import { YearFilterPipe } from './pipes/year-filter.pipe';
 import { FileSizePipe } from './pipes/file-size.pipe';
 import { FolderArrowsPipe } from './pipes/folder-arrows.pipe';
 import { FolderViewPipe } from './pipes/folder-view.pipe';
@@ -104,6 +105,8 @@ import { TagsDisplayPipe } from './components/tags-auto/tag-display.pipe';
 import { TimesPlayedPipe } from './pipes/times-played.pipe';
 import { WordFrequencyPipe } from './pipes/word-frequency.pipe';
 import { WrapperPipe } from './pipes/wrapper.pipe';
+import { YearPipe } from './pipes/year.pipe';
+
 
 @NgModule({
   declarations: [
@@ -175,7 +178,9 @@ import { WrapperPipe } from './pipes/wrapper.pipe';
     WelcomeComponent,
     WizardComponent,
     WordFrequencyPipe,
-    WrapperPipe
+    WrapperPipe,
+    YearPipe,
+    YearFilterPipe
   ],
   imports: [
     AnQrcodeModule,

src/app/common/settings-buttons.ts

@@ -77,8 +77,9 @@ export type SettingsButtonKey = 'autoFileTags'
  | 'tagExclusion'
  | 'tagIntersection'
  | 'tagUnion'
- | 'thumbAutoAdvance'
  | 'timesPlayedFilter'
+ | 'thumbAutoAdvance'
+ | 'yearFilter'
  | 'videoNotes';
 
 // Add `SettingsButtons` items here so they show up in the buttons ribbon and in the settings
@@ -106,6 +107,7 @@ export const SettingsButtonsGroups: SettingsButtonKey[][] = [
     'sizeFilter',
     'timesPlayedFilter',
     'resolutionFilter',
+    'yearFilter',
     'starFilter',
     'sortOrder',
     'hideOffline',
@@ -122,7 +124,6 @@ export const SettingsButtonsGroups: SettingsButtonKey[][] = [
     'sortOptionAspectRatio',
     'sortOptionFps',
     'sortOptionFolderSize',
-
   ],
   [ // 3 - Find duplicates
     'duplicateLength',
@@ -847,6 +848,14 @@ export const SettingsButtons: SettingsButtonsType = {
     title: 'BUTTONS.thumbAutoAdvanceHint',
     toggled: false
   },
+  'yearFilter': {
+    description: 'BUTTONS.yearSliderDescription',
+    hidden: false,
+    iconName: 'icon-times-played',
+    moreInfo: 'BUTTONS.yearSliderMoreInfo',
+    title: 'BUTTONS.yearSliderHint',
+    toggled: false
+  },
   'videoNotes': {
     description: 'BUTTONS.videoNotesDescription',
     hidden: true,

src/app/components/home.component.html

@@ -543,6 +543,20 @@
         ></app-slider-filter>
       </div>
 
+      <!-- yearFilter -->
+      <div *ngIf="settingsButtons['yearFilter'].toggled">
+
+        <app-slider-filter
+            (newSliderFilterSelected)="newYearFilterSelected($event)"
+            [darkMode]="settingsButtons['darkMode'].toggled"
+            [labelFormatPipe]="'yearPipe'"
+            [maximumValue]="yearCutoff"
+            [minimumValue]="yearMinCutoff"
+            [yearFilter]="true"
+            [steps]="50"
+        ></app-slider-filter>
+      </div>
+
       <!-- resolution filter & its frequency histogram -->
       <app-resolution-filter
         (newResFilterSelected)="newResFilterSelected($event)"
@@ -731,6 +745,10 @@
                                         : timesPlayedLeftBound
                                         : timesPlayedRightBound
 
+                | yearFilterPipe : settingsButtons['yearFilter'].toggled
+                                        : yearLeftBound
+                                        : yearRightBound
+
                 | resolutionFilterPipe : settingsButtons['resolutionFilter'].toggled
                                        : freqLeftBound
                                        : freqRightBound

src/app/components/home.component.ts

@@ -185,6 +185,15 @@ export class HomeComponent implements OnInit, AfterViewInit {
   timesPlayedLeftBound: number = 0;
   timesPlayedRightBound: number = Infinity;
 
+  // ========================================================================
+  // Year filter
+  // ------------------------------------------------------------------------
+
+  yearMinCutoff: number = 0;
+  yearCutoff: number = 0;
+  yearLeftBound: number = 0;
+  yearRightBound: number = Infinity;
+
   // ========================================================================
   // Frequency / histogram
   // ------------------------------------------------------------------------
@@ -719,6 +728,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
       this.setUpDurationFilterValues(this.imageElementService.imageElements);
       this.setUpSizeFilterValues(this.imageElementService.imageElements);
       this.setUpTimesPlayedFilterValues(this.imageElementService.imageElements);
+      this.setUpYearFilterValues(this.imageElementService.imageElements);
 
       if (this.sortOrderRef.sortFilterElement) {
         this.sortOrderRef.sortFilterElement.nativeElement.value = this.sortType;
@@ -2205,6 +2215,13 @@ export class HomeComponent implements OnInit, AfterViewInit {
 
   }
 
+  newYearFilterSelected(selection: number[]): void {
+
+      this.yearLeftBound = selection[0];
+      this.yearRightBound = selection[1];
+
+  }
+
   setUpDurationFilterValues(finalArray: ImageElement[]): void {
     const durations: number[] = finalArray.map((element) => { return element.duration; });
 
@@ -2225,6 +2242,14 @@ export class HomeComponent implements OnInit, AfterViewInit {
     this.timesPlayedCutoff = Math.max(...timesPlayed);
   }
 
+  //need to filter otherwise cutoff will be NaN
+  setUpYearFilterValues(finalArray: ImageElement[]): void {
+    const year: number[] = finalArray.map((element) => { return element.year; });
+    const filtrate = el => Number.isInteger(el) && el > 0;
+    const yearFiltered = year.filter(filtrate)
+    this.yearMinCutoff = Math.min(...yearFiltered) - 1
+    this.yearCutoff = Math.max(...yearFiltered);
+  }
   /**
    * Given an array of numbers
    * returns the cutoff for outliers

src/app/components/slider-filter/slider-filter.component.html

@@ -65,6 +65,13 @@
   >
     {{ convertToIndex(currentXleft) | wrapperPipe : labelFormatPipe}}
   </span>
+  <span
+  *ngIf="yearFilter"
+  class="left-label"
+  [ngStyle]="{ left: ((currentXleft > 10) ? currentXleft - 10 : 0) + 'px', width: 6 + 'px' }"
+  >
+  {{ convertToIndex(currentXleft) | wrapperPipe : labelFormatPipe}}
+  </span>
   <span
     *ngIf="lengthFilter"
     class="right-label"
@@ -82,15 +89,25 @@
   <span
     *ngIf="timesPlayed"
     class="right-label"
-    [ngStyle]="{ right: 160 - ((currentXright < 160) ? currentXright + 11 : 160) + 'px', width: 11 + 'px' }"
+    [ngStyle]="{ right: 160 - ((currentXright < 160) ? currentXright + 11 : 160) + 'px'}"
   >
     {{ convertToIndex(currentXright) | wrapperPipe : labelFormatPipe}}
   </span>
+  <span
+  *ngIf="yearFilter"
+  class="right-label"
+  [ngStyle]="{ right: 160 - ((currentXright < 125) ? currentXright + 35 : 160) + 'px'}"
+  >
+  {{ convertToIndex(currentXright) | wrapperPipe : labelFormatPipe}}
+  </span>
 
   <span *ngIf="lengthFilter" class="minLabel">0 min</span>
   <span *ngIf="lengthFilter" class="maxLabel">∞</span>
   <span *ngIf="sizeFilter" class="minLabel">0 MB</span>
   <span *ngIf="sizeFilter" class="maxLabel">∞</span>
   <span *ngIf="timesPlayed" class="minLabel">0</span>
   <span *ngIf="timesPlayed" class="maxLabel">∞</span>
+  <span *ngIf="yearFilter" class="minLabel">0</span>
+  <span *ngIf="yearFilter" class="maxLabel">∞</span>
+
 </div>

src/app/components/slider-filter/slider-filter.component.ts

@@ -14,6 +14,7 @@ export class SliderFilterComponent implements OnInit, OnDestroy {
   @Input() lengthFilter?: boolean = false;
   @Input() sizeFilter?: boolean = false;
   @Input() timesPlayed?: boolean = false;
+  @Input() yearFilter?: boolean = false;
   @Input() labelFormatPipe?: string;
 
   @Output() newSliderFilterSelected = new EventEmitter<number[]>();
@@ -86,7 +87,7 @@ export class SliderFilterComponent implements OnInit, OnDestroy {
 
     const cutoff = (value / this.width) * (this.maximumValue - this.minimumValue) + this.minimumValue;
 
-    if ((this.lengthFilter || this.sizeFilter || this.timesPlayed) && cutoff > this.maximumValue) {
+    if ((this.lengthFilter || this.sizeFilter || this.timesPlayed || this.yearFilter) && cutoff > this.maximumValue) {
       return Infinity;
     } else {
       return cutoff;

src/app/pipes/wrapper.pipe.ts

@@ -2,6 +2,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 import { LengthPipe } from './length.pipe';
 import { FileSizePipe } from './file-size.pipe';
 import { TimesPlayedPipe } from './times-played.pipe';
+import { YearPipe } from './year.pipe';
 
 @Pipe({
   name: 'wrapperPipe'
@@ -20,6 +21,10 @@ export class WrapperPipe implements PipeTransform {
       return new TimesPlayedPipe().transform(value);
     }
 
+    if (pipe === 'yearPipe') {
+      return new YearPipe().transform(value);
+    }
+
     return value;
   }
 }

src/app/pipes/year-filter.pipe.ts

@@ -0,0 +1,31 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+import { ImageElement } from '../../../interfaces/final-object.interface';
+
+@Pipe({
+  name: 'yearFilterPipe'
+})
+export class YearFilterPipe implements PipeTransform {
+
+  /**
+   * Filter and show only videos that are within the year bounds
+   * @param finalArray
+   * @param render
+   * @param leftBound
+   * @param rightBound
+   */
+  transform(finalArray: ImageElement[], render?: boolean, leftBound?: number, rightBound?: number): ImageElement[] {
+
+    if (render && finalArray.length > 0) {
+      return finalArray.filter((element) => {
+        const year = element.year;
+        if ( year > leftBound && year < rightBound) {
+          return true;
+        } else {
+          return false;
+        }
+      });
+    }
+    return finalArray;
+  }
+}

src/app/pipes/year.pipe.ts

@@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'yearPipe'
+})
+export class YearPipe implements PipeTransform {
+
+  /**
+   * Return year value of file
+   * @param year
+   */
+  transform(year: number): string {
+    if (year) {
+      const rounded = Math.floor(year)
+      if (!isFinite(rounded)) {
+        return "∞"
+      }
+
+      return rounded.toString(10);
+    } else {
+      return '0';
+    }
+  }
+
+}