Begin videos list new design

3 files changed, 72 insertions, 10 deletions

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: [