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
|
// Thanks: https://github.com/danrevah/ngx-pipes/blob/master/src/ng-pipes/pipes/math/bytes.ts
|
||||||
|
|
||||||
@Pipe({ name: 'myNumberFormatter' })
|
@Pipe({ name: 'myNumberFormatter' })
|
||||||
export class NumberFormatterPipe implements PipeTransform {
|
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
|
* @param x number
|
||||||
|
@ -21,6 +17,13 @@ export class NumberFormatterPipe implements PipeTransform {
|
||||||
return +f
|
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) {
|
transform (value: number) {
|
||||||
const format = this.dictionary.find(d => value < d.max) || this.dictionary[this.dictionary.length - 1]
|
const format = this.dictionary.find(d => value < d.max) || this.dictionary[this.dictionary.length - 1]
|
||||||
const calc = value / (format.max / 1000)
|
const calc = value / (format.max / 1000)
|
||||||
|
@ -28,7 +31,7 @@ export class NumberFormatterPipe implements PipeTransform {
|
||||||
const decimalPart = NumberFormatterPipe.getDecimalForNumber(calc)
|
const decimalPart = NumberFormatterPipe.getDecimalForNumber(calc)
|
||||||
|
|
||||||
return integralPart < 10 && decimalPart > 0
|
return integralPart < 10 && decimalPart > 0
|
||||||
? `${integralPart}.${decimalPart}${format.type}`
|
? formatNumber(parseFloat(`${integralPart}.${decimalPart}`), this.localeId) + format.type
|
||||||
: `${integralPart}${format.type}`
|
: `${integralPart}${format.type}`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { mapValues, pick } from 'lodash-es'
|
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 { AuthService, Notifier } from '@app/core'
|
||||||
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
|
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
|
||||||
import { VideoCaption, VideoFile, VideoPrivacy } from '@shared/models'
|
import { VideoCaption, VideoFile, VideoPrivacy } from '@shared/models'
|
||||||
|
@ -34,13 +34,14 @@ export class VideoDownloadComponent {
|
||||||
private numbersPipe: NumberFormatterPipe
|
private numbersPipe: NumberFormatterPipe
|
||||||
|
|
||||||
constructor (
|
constructor (
|
||||||
|
@Inject(LOCALE_ID) private localeId: string,
|
||||||
private notifier: Notifier,
|
private notifier: Notifier,
|
||||||
private modalService: NgbModal,
|
private modalService: NgbModal,
|
||||||
private videoService: VideoService,
|
private videoService: VideoService,
|
||||||
private auth: AuthService
|
private auth: AuthService
|
||||||
) {
|
) {
|
||||||
this.bytesPipe = new BytesPipe()
|
this.bytesPipe = new BytesPipe()
|
||||||
this.numbersPipe = new NumberFormatterPipe()
|
this.numbersPipe = new NumberFormatterPipe(this.localeId)
|
||||||
}
|
}
|
||||||
|
|
||||||
get typeText () {
|
get typeText () {
|
||||||
|
|
Loading…
Reference in New Issue