11 files changed, 51 insertions, 21 deletions

diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
index c29f69475..07e2e0ff3 100644
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
@@ -1,10 +1,9 @@
-import { BytesPipe } from 'ngx-pipes'
 import { SortMeta } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { ConfirmService, Notifier, RestPagination, RestTable, ServerService } from '@app/core'
-import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
-import { RedundancyService } from '@app/shared/shared-main'
+import { BytesPipe, RedundancyService } from '@app/shared/shared-main'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage'
 import { VideoRedundanciesTarget, VideoRedundancy } from '@shared/models'
 import { VideosRedundancyStats } from '@shared/models/server'
 
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
index 5a18cd78a..e18e3c9a7 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.ts
@@ -1,4 +1,3 @@
-import { BytesPipe } from 'ngx-pipes'
 import { Subscription } from 'rxjs'
 import { HttpEventType, HttpResponse } from '@angular/common/http'
 import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
@@ -6,7 +5,7 @@ import { Router } from '@angular/router'
 import { AuthService, CanComponentDeactivate, Notifier, ServerService, UserService } from '@app/core'
 import { scrollToTop } from '@app/helpers'
 import { FormValidatorService } from '@app/shared/shared-forms'
-import { VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
+import { BytesPipe, VideoCaptionService, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { LoadingBarService } from '@ngx-loading-bar/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoPrivacy } from '@shared/models'
diff --git a/client/src/app/core/users/user.service.ts b/client/src/app/core/users/user.service.ts
index aac2a0206..6e7a48519 100644
--- a/client/src/app/core/users/user.service.ts
+++ b/client/src/app/core/users/user.service.ts
@@ -1,10 +1,10 @@
-import { BytesPipe } from 'ngx-pipes'
 import { SortMeta } from 'primeng/api'
 import { from, Observable, of } from 'rxjs'
 import { catchError, concatMap, filter, first, map, shareReplay, throttleTime, toArray } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { AuthService } from '@app/core/auth'
+import { BytesPipe } from '@app/shared/shared-main'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { UserLocalStorageKeys } from '@root-helpers/users'
 import {
diff --git a/client/src/app/shared/shared-forms/preview-upload.component.ts b/client/src/app/shared/shared-forms/preview-upload.component.ts
index 7519734ba..7afff0b31 100644
--- a/client/src/app/shared/shared-forms/preview-upload.component.ts
+++ b/client/src/app/shared/shared-forms/preview-upload.component.ts
@@ -2,9 +2,9 @@ import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
 import { ServerService } from '@app/core'
-import { ServerConfig } from '@shared/models'
-import { BytesPipe } from 'ngx-pipes'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ServerConfig } from '@shared/models'
+import { BytesPipe } from '../shared-main'
 
 @Component({
   selector: 'my-preview-upload',
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts b/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
index 0c04ae4a6..1389218cc 100644
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
+++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts
@@ -1,7 +1,6 @@
-import { BytesPipe } from 'ngx-pipes'
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier, ServerService } from '@app/core'
-import { Account, VideoChannel } from '@app/shared/shared-main'
+import { Account, BytesPipe, VideoChannel } from '@app/shared/shared-main'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ServerConfig } from '@shared/models'
 
diff --git a/client/src/app/shared/shared-main/angular/bytes.pipe.ts b/client/src/app/shared/shared-main/angular/bytes.pipe.ts
new file mode 100644
index 000000000..f4f473568
--- /dev/null
+++ b/client/src/app/shared/shared-main/angular/bytes.pipe.ts
@@ -0,0 +1,34 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+// Thanks: https://github.com/danrevah/ngx-pipes/blob/master/src/ng-pipes/pipes/math/bytes.ts
+
+@Pipe({ name: 'bytes' })
+export class BytesPipe implements PipeTransform {
+  private dictionary: Array<{ max: number; type: string }> = [
+    { max: 1024, type: 'B' },
+    { max: 1048576, type: 'KB' },
+    { max: 1073741824, type: 'MB' },
+    { max: 1.0995116e12, type: 'GB' }
+  ]
+
+  transform (value: number, precision?: number | undefined): string | number {
+    const format = this.dictionary.find(d => value < d.max) || this.dictionary[this.dictionary.length - 1]
+    const calc = value / (format.max / 1024)
+
+    const num = precision === undefined
+      ? calc
+      : applyPrecision(calc, precision)
+
+    return `${num} ${format.type}`
+  }
+}
+
+function applyPrecision (num: number, precision: number) {
+  if (precision <= 0) {
+    return Math.round(num)
+  }
+
+  const tho = 10 ** precision
+
+  return Math.round(num * tho) / tho
+}
diff --git a/client/src/app/shared/shared-main/angular/index.ts b/client/src/app/shared/shared-main/angular/index.ts
index 3b072fb84..9ba815136 100644
--- a/client/src/app/shared/shared-main/angular/index.ts
+++ b/client/src/app/shared/shared-main/angular/index.ts
@@ -1,3 +1,4 @@
+export * from './bytes.pipe'
 export * from './from-now.pipe'
 export * from './infinite-scroller.directive'
 export * from './number-formatter.pipe'
diff --git a/client/src/app/shared/shared-main/angular/number-formatter.pipe.ts b/client/src/app/shared/shared-main/angular/number-formatter.pipe.ts
index 8a0756a36..e2eba3a60 100644
--- a/client/src/app/shared/shared-main/angular/number-formatter.pipe.ts
+++ b/client/src/app/shared/shared-main/angular/number-formatter.pipe.ts
@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform } from '@angular/core'
 
-// Thanks: https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts
+// Thanks: https://github.com/danrevah/ngx-pipes/blob/master/src/ng-pipes/pipes/math/bytes.ts
 
 @Pipe({ name: 'myNumberFormatter' })
 export class NumberFormatterPipe implements PipeTransform {
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index c6192f6f8..6186db4d6 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -1,4 +1,3 @@
-import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
 import { SharedModule as PrimeSharedModule } from 'primeng/api'
 import { ClipboardModule } from '@angular/cdk/clipboard'
 import { CommonModule, DatePipe } from '@angular/common'
@@ -17,7 +16,7 @@ import {
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { SharedGlobalIconModule } from '../shared-icons'
 import { AccountService, ActorAvatarInfoComponent, AvatarComponent } from './account'
-import { FromNowPipe, InfiniteScrollerDirective, NumberFormatterPipe, PeerTubeTemplateDirective } from './angular'
+import { FromNowPipe, InfiniteScrollerDirective, NumberFormatterPipe, PeerTubeTemplateDirective, BytesPipe } from './angular'
 import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
 import { ActionDropdownComponent, ButtonComponent, DeleteButtonComponent, EditButtonComponent } from './buttons'
 import { DateToggleComponent } from './date'
@@ -47,7 +46,6 @@ import { VideoChannelService } from './video-channel'
     ClipboardModule,
 
     PrimeSharedModule,
-    NgPipesModule,
 
     SharedGlobalIconModule
   ],
@@ -57,8 +55,9 @@ import { VideoChannelService } from './video-channel'
     ActorAvatarInfoComponent,
 
     FromNowPipe,
-    InfiniteScrollerDirective,
     NumberFormatterPipe,
+    BytesPipe,
+    InfiniteScrollerDirective,
     PeerTubeTemplateDirective,
 
     ActionDropdownComponent,
@@ -98,15 +97,15 @@ import { VideoChannelService } from './video-channel'
     ClipboardModule,
 
     PrimeSharedModule,
-    BytesPipe,
-    KeysPipe,
 
     AvatarComponent,
     ActorAvatarInfoComponent,
 
     FromNowPipe,
-    InfiniteScrollerDirective,
+    BytesPipe,
     NumberFormatterPipe,
+
+    InfiniteScrollerDirective,
     PeerTubeTemplateDirective,
 
     ActionDropdownComponent,
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.ts b/client/src/app/shared/shared-main/users/user-quota.component.ts
index a8f56e4d6..6830ad8fe 100644
--- a/client/src/app/shared/shared-main/users/user-quota.component.ts
+++ b/client/src/app/shared/shared-main/users/user-quota.component.ts
@@ -1,8 +1,8 @@
 import { Subject } from 'rxjs'
-import { BytesPipe } from 'ngx-pipes'
 import { Component, Input, OnInit } from '@angular/core'
 import { User, UserService } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { BytesPipe } from '../angular'
 
 @Component({
   selector: 'my-user-quota',
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.ts b/client/src/app/shared/shared-video-miniature/video-download.component.ts
index 4fd06eacf..e3d6a1969 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.ts
@@ -1,11 +1,10 @@
 import { mapValues, pick } from 'lodash-es'
-import { BytesPipe } from 'ngx-pipes'
 import { Component, ElementRef, ViewChild } from '@angular/core'
 import { AuthService, Notifier } from '@app/core'
 import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoCaption, VideoFile, VideoPrivacy } from '@shared/models'
-import { NumberFormatterPipe, VideoDetails, VideoService } from '../shared-main'
+import { BytesPipe, NumberFormatterPipe, VideoDetails, VideoService } from '../shared-main'
 
 type DownloadType = 'video' | 'subtitles'
 type FileMetadata = { [key: string]: { label: string, value: string }}