8 files changed, 47 insertions, 15 deletions

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 }}