localize decimal separator in video miniatures (#3643)
* fix(client): localize decimal separator
* fix(client/numpipe): handle Intl failure gently
* Revert "fix(client/numpipe): handle Intl failure gently"
This reverts commit e275049f1f
.
* client: switch from Intl to ng formatNumber
This commit is contained in:
parent
d0dd9813d5
commit
68018040f2
|
@ -1,14 +1,10 @@
|
|||
import { Pipe, PipeTransform } from '@angular/core'
|
||||
import { formatNumber } from '@angular/common'
|
||||
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,6 +17,13 @@ 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)
|
||||
|
@ -28,7 +31,7 @@ export class NumberFormatterPipe implements PipeTransform {
|
|||
const decimalPart = NumberFormatterPipe.getDecimalForNumber(calc)
|
||||
|
||||
return integralPart < 10 && decimalPart > 0
|
||||
? `${integralPart}.${decimalPart}${format.type}`
|
||||
? formatNumber(parseFloat(`${integralPart}.${decimalPart}`), this.localeId) + format.type
|
||||
: `${integralPart}${format.type}`
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 () {
|
||||
|
|
Loading…
Reference in New Issue