Merge #596: feat: show file size in decimal and binary units

d178207 feat: show file size in decimal and binary units (Jose Celano)

Pull request description:

  Show file size in decimal and binary units. For example.

  ```
  File Size: 659.55 MB/629.00 MiB
  ```

ACKs for top commit:
  josecelano:
    ACK d178207

Tree-SHA512: 539a13a3d22acc27916e49e4d7e2a657a941626de15fb193658d2d71e279a95e6a504372dc691efefb7d34c8c39170d2430be5a497e9222de1c53d31767c00c8

Author: josecelano

components/torrent/TorrentActionCard.vue

@@ -81,7 +81,8 @@
                 <span>File Size</span>
               </div>
               <div class="flex flex-row w-1/2">
-                <span>{{ fileSize(torrent.file_size) }}</span>
+                <span>{{ fileSizeDecimal(torrent.file_size) }}</span>/
+                <span>{{ fileSizeBinary(torrent.file_size) }}</span>
               </div>
             </div>
             <div class="flex flex-row py-2 pb-0">
@@ -143,7 +144,8 @@ import type { PropType } from "vue";
 import type { TorrentResponse } from "torrust-index-types-lib";
 import { notify } from "notiwind-ts";
 import {
-  fileSize,
+  fileSizeDecimal,
+  fileSizeBinary,
   downloadTorrent,
   useRestApi,
   isUserLoggedIn,

components/torrent/TorrentFilesTab.vue

@@ -28,7 +28,7 @@
               <tr>
                 <th>{{ index + 1 }}</th>
                 <td>{{ file.name }}</td>
-                <td>{{ fileSize(file.size) }}</td>
+                <td>{{ fileSizeDecimal(file.size) }}/{{ fileSizeBinary(file.size) }}</td>
               </tr>
             </template>
           </tbody>
@@ -42,7 +42,7 @@
 import { ChevronDownIcon } from "@heroicons/vue/24/solid";
 import type { PropType } from "vue";
 import type { TorrentResponse } from "torrust-index-types-lib";
-import { ref, fileSize } from "#imports";
+import { ref, fileSizeDecimal, fileSizeBinary } from "#imports";
 
 const collapsed = ref(false);
 

components/torrent/TorrentList.vue

@@ -19,7 +19,7 @@
               </template>
             </div>
             <div class="flex flex-row items-start justify-start w-full mt-1 flex-nowrap">
-              <span class="text-xs whitespace-nowrap text-neutral-content/50">{{ fileSize(torrent.file_size) }}</span>
+              <span class="text-xs whitespace-nowrap text-neutral-content/50">{{ fileSizeDecimal(torrent.file_size) }}/{{ fileSizeBinary(torrent.file_size) }}</span>
               <span class="ml-2 text-xs whitespace-nowrap text-neutral-content/50">{{ new Date(torrent.date_uploaded).toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }} ({{ timeSince(new Date(torrent.date_uploaded)) }} ago)</span>
               <a class="ml-2 text-xs whitespace-nowrap text-neutral-content/50">u/{{ torrent.uploader }}</a>
             </div>
@@ -58,7 +58,7 @@ import { ArrowDownTrayIcon, LinkIcon } from "@heroicons/vue/24/outline";
 import { ChevronRightIcon, ChevronDownIcon } from "@heroicons/vue/20/solid";
 import { type PropType, watch } from "vue";
 import type { TorrentListing } from "torrust-index-types-lib";
-import { fileSize, timeSince, ref, downloadTorrent } from "#imports";
+import { fileSizeDecimal, fileSizeBinary, timeSince, ref, downloadTorrent } from "#imports";
 
 const props = defineProps({
   torrents: Array as PropType<Array<TorrentListing>>

components/torrent/TorrentTable.vue

@@ -21,7 +21,7 @@
               <span class="duration-200 cursor-pointer hover:text-amber-500" @click.stop="$router.push(`/torrent/${torrent.info_hash}`)">{{ torrent.title }}</span>
             </td>
             <td class="px-2">
-              {{ fileSize(torrent.file_size) }}
+              {{ fileSizeDecimal(torrent.file_size) }}/{{ fileSizeBinary(torrent.file_size) }}
             </td>
             <td>{{ timeSince(new Date(torrent.date_uploaded)) }} ago ({{ new Date(torrent.date_uploaded).toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) }})</td>
             <td>{{ torrent.uploader }}</td>
@@ -59,7 +59,7 @@
 import { ArrowDownTrayIcon, LinkIcon, EyeIcon } from "@heroicons/vue/24/outline";
 import { type PropType, watch } from "vue";
 import type { TorrentListing } from "torrust-index-types-lib";
-import { fileSize, timeSince, ref, downloadTorrent } from "#imports";
+import { fileSizeDecimal, fileSizeBinary, timeSince, ref, downloadTorrent } from "#imports";
 
 const props = defineProps({
   torrents: Array as PropType<Array<TorrentListing>>

composables/helpers.ts

@@ -40,13 +40,24 @@ export function downloadTorrent (infoHash: string, fileName?: string) {
     });
 }
 
-export function fileSize (size: number): string {
+export function fileSizeDecimal (size: number): string {
   if (!size) { size = 0; }
   let sizeString = `${(size).toFixed(2)} B`;
 
-  if (size / 1000000000 < 1000) { sizeString = `${(size / 1000000000).toFixed(2)} GB`; }
-  if (size / 1000000 < 1000) { sizeString = `${(size / 1000000).toFixed(2)} MB`; }
-  if (size / 1000 < 1000) { sizeString = `${(size / 1000).toFixed(2)} KB`; }
+  if (size / Math.pow(1000, 3) < 1000) { sizeString = `${(size / Math.pow(1000, 3)).toFixed(2)} GB`; }
+  if (size / Math.pow(1000, 2) < 1000) { sizeString = `${(size / Math.pow(1000, 2)).toFixed(2)} MB`; }
+  if (size / Math.pow(1000, 1) < 1000) { sizeString = `${(size / Math.pow(1000, 1)).toFixed(2)} KB`; }
+
+  return sizeString;
+}
+
+export function fileSizeBinary (size: number): string {
+  if (!size) { size = 0; }
+  let sizeString = `${(size).toFixed(2)} B`;
+
+  if (size / Math.pow(1024, 3) < 1024) { sizeString = `${(size / Math.pow(1024, 3)).toFixed(2)} GiB`; }
+  if (size / Math.pow(1024, 2) < 1024) { sizeString = `${(size / Math.pow(1024, 2)).toFixed(2)} MiB`; }
+  if (size / Math.pow(1024, 1) < 1024) { sizeString = `${(size / Math.pow(1024, 1)).toFixed(2)} KiB`; }
 
   return sizeString;
 }