fix(client): localize decimal separator

Chocobozzz · Jan 27, 2021 · 1fe74db · 1fe74db
1 parent 5d84d71
commit 1fe74db
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
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
@@ -1,14 +1,9 @@
-import { Pipe, PipeTransform } from '@angular/core'
+import { Inject, LOCALE_ID, Pipe, PipeTransform } from '@angular/core'
 
 // Thanks: https://github.com/danrevah/ngx-pipes/blob/master/src/ng-pipes/pipes/math/bytes.ts
 
 @Pipe({ name: 'myNumberFormatter' })
 export class NumberFormatterPipe implements PipeTransform {
-  private dictionary: Array<{max: number, type: string}> = [
-    { max: 1000, type: '' },
-    { max: 1000000, type: 'K' },
-    { max: 1000000000, type: 'M' }
-  ]
 
   /**
    * @param x number
@@ -21,14 +16,25 @@ export class NumberFormatterPipe implements PipeTransform {
     return +f
   }
 
+  private dictionary: Array<{max: number, type: string}> = [
+    { max: 1000, type: '' },
+    { max: 1000000, type: 'K' },
+    { max: 1000000000, type: 'M' }
+  ]
+  constructor (@Inject(LOCALE_ID) private localeId: string) {}
+
   transform (value: number) {
     const format = this.dictionary.find(d => value < d.max) || this.dictionary[this.dictionary.length - 1]
     const calc = value / (format.max / 1000)
     const integralPart = Math.floor(calc)
     const decimalPart = NumberFormatterPipe.getDecimalForNumber(calc)
+    const decimalSeparator = Intl.NumberFormat(this.localeId)
+      .formatToParts(1.1)
+      .find(part => part.type === 'decimal')
+      .value
 
     return integralPart < 10 && decimalPart > 0
-      ? `${integralPart}.${decimalPart}${format.type}`
+      ? `${integralPart}${decimalSeparator}${decimalPart}${format.type}`
       : `${integralPart}${format.type}`
   }
 }
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
@@ -1,5 +1,5 @@
 import { mapValues, pick } from 'lodash-es'
-import { Component, ElementRef, ViewChild } from '@angular/core'
+import { Component, ElementRef, Inject, LOCALE_ID, ViewChild } from '@angular/core'
 import { AuthService, Notifier } from '@app/core'
 import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { VideoCaption, VideoFile, VideoPrivacy } from '@shared/models'
@@ -34,13 +34,14 @@ export class VideoDownloadComponent {
   private numbersPipe: NumberFormatterPipe
 
   constructor (
+    @Inject(LOCALE_ID) private localeId: string,
     private notifier: Notifier,
     private modalService: NgbModal,
     private videoService: VideoService,
     private auth: AuthService
   ) {
     this.bytesPipe = new BytesPipe()
-    this.numbersPipe = new NumberFormatterPipe()
+    this.numbersPipe = new NumberFormatterPipe(this.localeId)
   }
 
   get typeText () {