Add "times played" slider filter

i18n/en.json

@@ -148,6 +148,9 @@
     "sizeFilterDescription": "Size",
     "sizeFilterHint": "Size filter",
     "sizeFilterMoreInfo": "Show the size filter",
+    "timesPlayedDescription": "Times Played",
+    "timesPlayedHint": "Times Played filter",
+    "timesPlayedMoreInfo": "Show the times played filter",
     "sortOptionAlphabeticalDescription": "Alphabetical",
     "sortOptionAlphabeticalDescription2": "Alphabetical 2",
     "sortOptionAlphabeticalMoreInfo": "Show the alphabetical order option in the sorting dropdown",

src/app/app.module.ts

@@ -78,6 +78,7 @@ import { DeleteFilePipe } from './pipes/delete-file.pipe';
 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 { FileSizePipe } from './pipes/file-size.pipe';
 import { FolderArrowsPipe } from './pipes/folder-arrows.pipe';
 import { FolderViewPipe } from './pipes/folder-view.pipe';
@@ -99,6 +100,7 @@ import { TagFilterPipe } from './components/tags-auto/tag-filter.pipe';
 import { TagFrequencyPipe } from './components/tags-auto/tag-frequency.pipe';
 import { TagMatchPipe } from './components/tags-auto/tag-match.pipe';
 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';
 
@@ -163,6 +165,8 @@ import { WrapperPipe } from './pipes/wrapper.pipe';
     TagTrayComponent,
     TagsComponent,
     TagsDisplayPipe,
+    TimesPlayedPipe,
+    TimesPlayedFilterPipe,
     ThumbnailComponent,
     TitleBarComponent,
     TopComponent,

src/app/common/settings-buttons.ts

@@ -76,6 +76,7 @@ export type SettingsButtonKey = 'autoFileTags'
  | 'tagExclusion'
  | 'tagIntersection'
  | 'tagUnion'
+ | 'timesPlayedFilter'
  | 'thumbAutoAdvance'
  | 'videoNotes';
 
@@ -102,6 +103,7 @@ export const SettingsButtonsGroups: SettingsButtonKey[][] = [
   [ // 2 - Filters & sorting options
     'durationFilter',
     'sizeFilter',
+    'timesPlayedFilter',
     'resolutionFilter',
     'starFilter',
     'sortOrder',
@@ -818,6 +820,13 @@ export const SettingsButtons: SettingsButtonsType = {
     moreInfo: 'BUTTONS.tagUnionMoreInfo',
     title: 'BUTTONS.tagUnionHint',
     toggled: false
+  }, 'timesPlayedFilter': {
+    description: 'BUTTONS.timesPlayedDescription',
+    hidden: false,
+    iconName: 'icon-res-filter',
+    moreInfo: 'BUTTONS.timesPlayedMoreInfo',
+    title: 'BUTTONS.timesPlayedHint',
+    toggled: false
   },
   'thumbAutoAdvance': {
     description: 'BUTTONS.thumbAutoAdvanceDescription',

src/app/components/home.component.html

@@ -529,6 +529,20 @@
         ></app-slider-filter>
       </div>
 
+      <!-- timesPlayedFilter -->
+      <div *ngIf="settingsButtons['timesPlayedFilter'].toggled">
+
+        <app-slider-filter
+          (newSliderFilterSelected)="newTimesPlayedFilterSelected($event)"
+          [darkMode]="settingsButtons['darkMode'].toggled"
+          [labelFormatPipe]="'timesPlayedPipe'"
+          [maximumValue]="timesPlayedCutoff"
+          [minimumValue]="-1"
+          [timesPlayed]="true"
+          [steps]="50"
+        ></app-slider-filter>
+      </div>
+
       <!-- resolution filter & its frequency histogram -->
       <app-resolution-filter
         (newResFilterSelected)="newResFilterSelected($event)"
@@ -713,6 +727,10 @@
                                      : sizeLeftBound
                                      : sizeRightBound
 
+                | timesPlayedFilterPipe : settingsButtons['timesPlayedFilter'].toggled
+                                     : timesPlayedLeftBound
+                                     : timesPlayedRightBound
+
                 | resolutionFilterPipe : settingsButtons['resolutionFilter'].toggled
                                        : freqLeftBound
                                        : freqRightBound

src/app/components/home.component.ts

@@ -175,6 +175,13 @@ export class HomeComponent implements OnInit, AfterViewInit {
   sizeLeftBound: number = 0;
   sizeRightBound: number = Infinity;
 
+  // ========================================================================
+  // Times Played filter
+  // ------------------------------------------------------------------------
+
+  timesPlayedLeftBound: number = 0;
+  timesPlayedRightBound: number = Infinity;
+
   // ========================================================================
   // Frequency / histogram
   // ------------------------------------------------------------------------
@@ -274,6 +281,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
 
   durationOutlierCutoff: number = 0; // for the duration filter to cut off outliers
   sizeOutlierCutoff: number = 0; // for the size filter to cut off outliers
+  timesPlayedCutoff: number = 0; // for the times played filter max value
 
   timeExtractionStarted;   // time remaining calculator
   timeExtractionRemaining; // time remaining calculator
@@ -717,6 +725,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
 
       this.setUpDurationFilterValues(this.imageElementService.imageElements);
       this.setUpSizeFilterValues(this.imageElementService.imageElements);
+      this.setUpTimesPlayedFilterValues(this.imageElementService.imageElements);
 
       if (this.sortOrderRef.sortFilterElement) {
         this.sortOrderRef.sortFilterElement.nativeElement.value = this.sortType;
@@ -2192,6 +2201,13 @@ export class HomeComponent implements OnInit, AfterViewInit {
 
   }
 
+  newTimesPlayedFilterSelected(selection: number[]): void {
+
+    this.timesPlayedLeftBound = selection[0];
+    this.timesPlayedRightBound = selection[1];
+
+  }
+
   setUpDurationFilterValues(finalArray: ImageElement[]): void {
     const durations: number[] = finalArray.map((element) => { return element.duration; });
 
@@ -2206,6 +2222,12 @@ export class HomeComponent implements OnInit, AfterViewInit {
     this.sizeOutlierCutoff = Math.max(...fileSizes);
   }
 
+  setUpTimesPlayedFilterValues(finalArray: ImageElement[]): void {
+    const timesPlayed: number[] = finalArray.map((element) => { return element.timesPlayed; });
+
+    this.timesPlayedCutoff = Math.max(...timesPlayed);
+  }
+
   /**
    * Given an array of numbers
    * returns the cutoff for outliers

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

@@ -55,6 +55,13 @@
   >
     {{ convertToIndex(currentXleft) | wrapperPipe : labelFormatPipe }}
   </span>
+  <span
+  *ngIf="timesPlayed"
+  class="left-label"
+  [ngStyle]="{ left: ((currentXleft > 10) ? currentXleft - 10 : 0) + 'px' }"
+  >
+  {{ convertToIndex(currentXleft) | wrapperPipe : labelFormatPipe}}
+  </span>
   <span
     *ngIf="lengthFilter"
     class="right-label"
@@ -69,8 +76,18 @@
   >
     {{ convertToIndex(currentXright) | wrapperPipe : labelFormatPipe }}
   </span>
+
+  <span
+    *ngIf="timesPlayed"
+    class="right-label"
+    [ngStyle]="{ right: 160 - ((currentXright < 125) ? currentXright + 50 : 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>
 </div>

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

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

src/app/pipes/times-played-filter.pipe.ts

@@ -0,0 +1,31 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+import { ImageElement } from '../../../interfaces/final-object.interface';
+
+@Pipe({
+  name: 'timesPlayedFilterPipe'
+})
+export class TimesPlayedFilterPipe implements PipeTransform {
+
+  /**
+   * Filter and show only videos that are within the fileSize 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 timesPlayed = element.timesPlayed;
+        if ( timesPlayed > leftBound && timesPlayed < rightBound) {
+          return true;
+        } else {
+          return false;
+        }
+      });
+    }
+    return finalArray;
+  }
+}

src/app/pipes/times-played.pipe.ts

@@ -0,0 +1,23 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'timesPlayedPipe'
+})
+export class TimesPlayedPipe implements PipeTransform {
+
+  /**
+   * Return times played of file as int
+   * add 1 to result because min value needs to be -1 in order to include files with 0 times played
+   * @param timesPlayed -- times played value
+   */
+  transform(timesPlayed: number): string {
+    if (timesPlayed) {
+      const rounded = Math.floor(timesPlayed+1)
+
+      return rounded.toString(10);
+    } else {
+      return '0';
+    }
+  }
+
+}

src/app/pipes/wrapper.pipe.ts

@@ -1,6 +1,7 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { LengthPipe } from './length.pipe';
 import { FileSizePipe } from './file-size.pipe';
+import { TimesPlayedPipe } from './times-played.pipe';
 
 @Pipe({
   name: 'wrapperPipe'
@@ -14,6 +15,11 @@ export class WrapperPipe implements PipeTransform {
     if (pipe === 'fileSizePipe') {
       return new FileSizePipe().transform(value, true);
     }
+
+    if (pipe === 'timesPlayedPipe') {
+      return new TimesPlayedPipe().transform(value);
+    }
+
     return value;
   }
 }