From 6115c7bcd604e7aa062a463cbc4bb6061f119684 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Wed, 8 Feb 2023 00:03:04 +0100
Subject: [PATCH] Address code review (formatFileSize, , changelog item)

---
 .../unreleased/enhancement-show-upload-speed  |  2 +-
 .../web-runtime/src/components/UploadInfo.vue | 20 +++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/changelog/unreleased/enhancement-show-upload-speed b/changelog/unreleased/enhancement-show-upload-speed
index 7c164ec05b8..3c5c14a22fd 100644
--- a/changelog/unreleased/enhancement-show-upload-speed
+++ b/changelog/unreleased/enhancement-show-upload-speed
@@ -1,4 +1,4 @@
-# Show upload speed
+Enhancement: Show upload speed
 
 We have added a tooltip that shows the current upload speed and 
 absolute vs processed filesize for the current upload.
diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index f87551a3e4c..45a69ca25a1 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -3,7 +3,7 @@
     <div
       class="upload-info-title oc-flex oc-flex-between oc-flex-middle oc-px-m oc-py-s oc-rounded-top"
     >
-      <p class="oc-my-xs" v-oc-tooltip="uploadDetails" v-text="uploadInfoTitle" />
+      <p v-oc-tooltip="uploadDetails" class="oc-my-xs" v-text="uploadInfoTitle" />
       <oc-button
         v-if="!filesInProgressCount"
         id="close-upload-info-btn"
@@ -142,11 +142,11 @@ import { defineComponent } from 'vue'
 import { mapGetters } from 'vuex'
 import { isUndefined } from 'lodash-es'
 import getSpeed from '@uppy/utils/lib/getSpeed'
-import filesize from 'filesize'
 
 import { urlJoin } from 'web-client/src/utils'
 import { configurationManager } from 'web-pkg/src/configuration'
 import { useCapabilityShareJailEnabled } from 'web-pkg/src/composables'
+import { formatFileSize } from 'web-pkg/src/helpers'
 import { UppyResource } from '../composables/upload'
 
 export default defineComponent({
@@ -179,14 +179,18 @@ export default defineComponent({
     ...mapGetters(['configuration']),
 
     uploadDetails() {
-      if (this.uploadSpeed === 0) {
+      if (!this.uploadSpeed || !this.runningUploads) {
         return ''
       }
-      const uploadedBytes = filesize(this.bytesUploaded)
-      const totalBytes = filesize(this.bytesTotal)
-      const currentUploadSpeed = filesize(this.uploadSpeed)
-      // needs $gettext interpolation
-      return `${uploadedBytes} of ${totalBytes} (${currentUploadSpeed}/s)`
+      const uploadedBytes = formatFileSize(this.bytesUploaded, this.$language.current)
+      const totalBytes = formatFileSize(this.bytesTotal, this.$language.current)
+      const currentUploadSpeed = formatFileSize(this.uploadSpeed, this.$language.current)
+
+      return this.$gettext('%{uploadedBytes} of %{totalBytes} (%{currentUploadSpeed}/s)', {
+        uploadedBytes,
+        totalBytes,
+        currentUploadSpeed
+      })
     },
     uploadInfoTitle() {
       if (this.inFinalization) {