diff --git a/i18n/en.json b/i18n/en.json index 79348c28..8733b660 100644 --- a/i18n/en.json +++ b/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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3a26f1dc..9eae576f 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/common/settings-buttons.ts b/src/app/common/settings-buttons.ts index 7785ad18..9c6e0996 100644 --- a/src/app/common/settings-buttons.ts +++ b/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, diff --git a/src/app/components/home.component.html b/src/app/components/home.component.html index 601d110c..fbbf80b1 100644 --- a/src/app/components/home.component.html +++ b/src/app/components/home.component.html @@ -543,6 +543,20 @@ > + +
+ + +
+ { return element.duration; }); @@ -2222,6 +2239,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 diff --git a/src/app/components/slider-filter/slider-filter.component.html b/src/app/components/slider-filter/slider-filter.component.html index 20111295..47add35b 100644 --- a/src/app/components/slider-filter/slider-filter.component.html +++ b/src/app/components/slider-filter/slider-filter.component.html @@ -65,6 +65,13 @@ > {{ convertToIndex(currentXleft) | wrapperPipe : labelFormatPipe}} + + {{ convertToIndex(currentXleft) | wrapperPipe : labelFormatPipe}} + {{ convertToIndex(currentXright) | wrapperPipe : labelFormatPipe}} + + {{ convertToIndex(currentXright) | wrapperPipe : labelFormatPipe}} + 0 min ∞ @@ -93,4 +107,7 @@ ∞ 0 ∞ + 0 + ∞ + diff --git a/src/app/components/slider-filter/slider-filter.component.ts b/src/app/components/slider-filter/slider-filter.component.ts index e0461502..54af250b 100644 --- a/src/app/components/slider-filter/slider-filter.component.ts +++ b/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(); @@ -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; diff --git a/src/app/pipes/wrapper.pipe.ts b/src/app/pipes/wrapper.pipe.ts index 82987954..2e9ce9ad 100644 --- a/src/app/pipes/wrapper.pipe.ts +++ b/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; } } diff --git a/src/app/pipes/year-filter.pipe.ts b/src/app/pipes/year-filter.pipe.ts new file mode 100644 index 00000000..a1b02904 --- /dev/null +++ b/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; + } +} diff --git a/src/app/pipes/year.pipe.ts b/src/app/pipes/year.pipe.ts new file mode 100644 index 00000000..2bb123cf --- /dev/null +++ b/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'; + } + } + +}