From 9bf9d2a5c223bf006496ae7adf0c0bd7a7975108 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 1 Dec 2017 14:46:22 +0100 Subject: Begin videos list new design --- client/src/app/shared/misc/from-now.pipe.ts | 37 ++++++++++++++++++++++ .../src/app/shared/misc/number-formatter.pipe.ts | 19 +++++++++++ client/src/app/shared/shared.module.ts | 26 +++++++++------ 3 files changed, 72 insertions(+), 10 deletions(-) create mode 100644 client/src/app/shared/misc/from-now.pipe.ts create mode 100644 client/src/app/shared/misc/number-formatter.pipe.ts (limited to 'client/src/app/shared') diff --git a/client/src/app/shared/misc/from-now.pipe.ts b/client/src/app/shared/misc/from-now.pipe.ts new file mode 100644 index 000000000..25e5d6a85 --- /dev/null +++ b/client/src/app/shared/misc/from-now.pipe.ts @@ -0,0 +1,37 @@ +import { Pipe, PipeTransform } from '@angular/core' + +// Thanks: https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts + +@Pipe({name: 'fromNow'}) +export class FromNowPipe implements PipeTransform { + + transform (value: number) { + const seconds = Math.floor((Date.now() - value) / 1000) + + let interval = Math.floor(seconds / 31536000) + if (interval > 1) { + return interval + ' years ago' + } + + interval = Math.floor(seconds / 2592000) + if (interval > 1) return interval + ' months ago' + if (interval === 1) return interval + ' month ago' + + interval = Math.floor(seconds / 604800) + if (interval > 1) return interval + ' weeks ago' + if (interval === 1) return interval + ' week ago' + + interval = Math.floor(seconds / 86400) + if (interval > 1) return interval + ' days ago' + if (interval === 1) return interval + ' day ago' + + interval = Math.floor(seconds / 3600) + if (interval > 1) return interval + ' hours ago' + if (interval === 1) return interval + ' hour ago' + + interval = Math.floor(seconds / 60) + if (interval >= 1) return interval + ' min ago' + + return Math.floor(seconds) + ' sec ago' + } +} diff --git a/client/src/app/shared/misc/number-formatter.pipe.ts b/client/src/app/shared/misc/number-formatter.pipe.ts new file mode 100644 index 000000000..2491fb1d6 --- /dev/null +++ b/client/src/app/shared/misc/number-formatter.pipe.ts @@ -0,0 +1,19 @@ +import { Pipe, PipeTransform } from '@angular/core' + +// Thanks: https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts + +@Pipe({name: 'numberFormatter'}) +export class NumberFormatterPipe implements PipeTransform { + private dictionary: Array<{max: number, type: string}> = [ + { max: 1000, type: '' }, + { max: 1000000, type: 'K' }, + { max: 1000000000, type: 'M' } + ] + + transform (value: number) { + const format = this.dictionary.find(d => value < d.max) || this.dictionary[this.dictionary.length - 1] + const calc = Math.floor(value / (format.max / 1000)) + + return `${calc}${format.type}` + } +} diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 456ce851e..c7ea6e603 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -1,25 +1,26 @@ -import { NgModule } from '@angular/core' -import { HttpClientModule } from '@angular/common/http' import { CommonModule } from '@angular/common' +import { HttpClientModule } from '@angular/common/http' +import { NgModule } from '@angular/core' import { FormsModule, ReactiveFormsModule } from '@angular/forms' import { RouterModule } from '@angular/router' -import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe' -import { KeysPipe } from 'angular-pipes/src/object/keys.pipe' import { BsDropdownModule } from 'ngx-bootstrap/dropdown' -import { ProgressbarModule } from 'ngx-bootstrap/progressbar' -import { PaginationModule } from 'ngx-bootstrap/pagination' import { ModalModule } from 'ngx-bootstrap/modal' -import { DataTableModule } from 'primeng/components/datatable/datatable' +import { PaginationModule } from 'ngx-bootstrap/pagination' +import { ProgressbarModule } from 'ngx-bootstrap/progressbar' +import { BytesPipe, KeysPipe } from 'ngx-pipes' import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared' +import { DataTableModule } from 'primeng/components/datatable/datatable' import { AUTH_INTERCEPTOR_PROVIDER } from './auth' +import { LoaderComponent } from './misc/loader.component' import { RestExtractor, RestService } from './rest' import { SearchComponent, SearchService } from './search' import { UserService } from './users' import { VideoAbuseService } from './video-abuse' import { VideoBlacklistService } from './video-blacklist' -import { LoaderComponent } from './misc/loader.component' +import { NumberFormatterPipe } from './misc/number-formatter.pipe' +import { FromNowPipe } from './misc/from-now.pipe' @NgModule({ imports: [ @@ -42,7 +43,9 @@ import { LoaderComponent } from './misc/loader.component' BytesPipe, KeysPipe, SearchComponent, - LoaderComponent + LoaderComponent, + NumberFormatterPipe, + FromNowPipe ], exports: [ @@ -62,7 +65,10 @@ import { LoaderComponent } from './misc/loader.component' KeysPipe, SearchComponent, - LoaderComponent + LoaderComponent, + + NumberFormatterPipe, + FromNowPipe ], providers: [ -- cgit v1.2.3