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:
kontrollanten 2021-01-29 14:36:21 +01:00 committed by GitHub
parent d0dd9813d5
commit 68018040f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 9 deletions

View File

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

View File

@ -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 () {