Calculate and display the download progress based on the file size

* Calculate the downloaded file size and the progress percentage based on that
* Save the values to the local store in the callback
  * (Importing uses the callback values without storing them)
* Display the the progress (percentage), current progress (file size) and total file size to be downloaded
* Use the values in DownloadMonitor, DownloadProgressModal and ImportProfileModal

Author: VilppeRiskidev

src/components/profiles-modals/ImportProfileModal.vue

@@ -15,6 +15,7 @@ import { useProfilesComposable } from '../composables/ProfilesComposable';
 import { computed, nextTick, ref, watch, watchEffect } from 'vue';
 import { getStore } from '../../providers/generic/store/StoreProvider';
 import { State } from '../../store';
+import FileUtils from "../../utils/FileUtils";
 
 const VALID_PROFILE_CODE_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 
@@ -250,15 +251,18 @@ async function onImportTargetSelected() {
 async function importProfile(targetProfileName: string, mods: ExportMod[], zipPath: string) {
     activeStep.value = 'PROFILE_IS_BEING_IMPORTED';
     importPhaseDescription.value = 'Downloading mods: 0%';
-    const progressCallback = (progress: number|string) => typeof progress === "number"
-        ? importPhaseDescription.value = `Downloading mods: ${Math.floor(progress)}%`
-        : importPhaseDescription.value = progress;
+    const progressCallback = (_progress: number, downloadedSize: number, totalDownloadSize: number) => {
+        importPhaseDescription.value = `Downloading mods: ${Math.floor(downloadedSize / totalDownloadSize * 100)}%` +
+         ` (${FileUtils.humanReadableSize(downloadedSize)} / ${FileUtils.humanReadableSize(totalDownloadSize)})`;
+    };
     const isUpdate = importUpdateSelection.value === 'UPDATE';
 
     try {
         const combos = profileMods.value.known as ThunderstoreCombo[];
         await store.dispatch('download/downloadToCache', {combos, progressCallback});
-        await ProfileUtils.populateImportedProfile(combos, mods, targetProfileName, isUpdate, zipPath, progressCallback);
+        await ProfileUtils.populateImportedProfile(combos, mods, targetProfileName, isUpdate, zipPath, (progress) => {
+            importPhaseDescription.value = progress;
+        });
     } catch (e) {
         await store.dispatch('profiles/ensureProfileExists');
         closeModal();

src/components/views/DownloadProgressModal.vue

@@ -2,6 +2,7 @@
 import { Progress } from '../all';
 import { getStore } from '../../providers/generic/store/StoreProvider';
 import { State } from '../../store';
+import FileUtils from '../../utils/FileUtils';
 
 const store = getStore<State>();
 
@@ -29,7 +30,10 @@ function closeModal() {
                         Installing {{$store.getters['download/currentDownload'].modName}}
                     </h3>
 
-                    <p>Downloading: {{$store.getters['download/currentDownload'].downloadProgress}}% complete</p>
+                    <p>
+                        Downloading: {{$store.getters['download/currentDownload'].downloadProgress}}% complete
+                        ({{FileUtils.humanReadableSize($store.getters['download/currentDownload'].downloadedSize)}} / {{FileUtils.humanReadableSize($store.getters['download/currentDownload'].totalDownloadSize)}})
+                    </p>
 
                     <Progress
                         :max='100'

src/model/ThunderstoreVersion.ts

@@ -12,6 +12,7 @@ export default class ThunderstoreVersion  {
     private enabled: boolean = true;
     private downloads: number = 0;
     private downloadUrl: string = '';
+    private fileSize: number = 0;
 
     public static parseFromThunderstoreData(data: any): ThunderstoreVersion {
         const version = new ThunderstoreVersion();
@@ -28,6 +29,7 @@ export default class ThunderstoreVersion  {
         this.setIcon(version.icon);
         this.setDownloadCount(version.downloads);
         this.setDownloadUrl(version.download_url);
+        this.setFileSize(version.file_size);
         return this;
     }
 
@@ -106,4 +108,12 @@ export default class ThunderstoreVersion  {
     public setDownloadUrl(url: string) {
         this.downloadUrl = url;
     }
+
+    public setFileSize(size: number) {
+        this.fileSize = size;
+    }
+
+    public getFileSize(): number {
+        return this.fileSize;
+    }
 }

src/pages/DownloadMonitor.vue

@@ -54,7 +54,9 @@
                                 <div class="col">
                                     <p v-if="downloadObject.status === DownloadStatusEnum.DOWNLOADING">Downloading: {{ downloadObject.modName }}</p>
                                     <p v-else>Downloading:</p>
-                                    <p>{{Math.min(Math.floor(downloadObject.downloadProgress), 100)}}% complete</p>
+                                    <p>{{`${Math.min(Math.floor(downloadObject.downloadProgress), 100)}% complete ` +
+                                    `(${FileUtils.humanReadableSize(downloadObject.downloadedSize)} / ` +
+                                    `${FileUtils.humanReadableSize(downloadObject.totalDownloadSize)})`}}</p>
                                     <Progress
                                         :max='100'
                                         :value='downloadObject.downloadProgress'
@@ -110,6 +112,7 @@
 
 import { Hero } from '../components/all';
 import Progress from '../components/Progress.vue';
+import FileUtils from "../utils/FileUtils";
 import { DownloadStatusEnum } from '../model/enums/DownloadStatusEnum';
 </script>
 

src/providers/ror2/downloading/ThunderstoreDownloaderProvider.ts

@@ -1,6 +1,7 @@
 import ProviderUtils from '../../generic/ProviderUtils';
 import ThunderstoreCombo from '../../../model/ThunderstoreCombo';
 import R2Error from '../../../model/errors/R2Error';
+import ManagerSettings from '../../../r2mm/manager/ManagerSettings';
 
 export default abstract class ThunderstoreDownloaderProvider {
 
@@ -19,7 +20,8 @@ export default abstract class ThunderstoreDownloaderProvider {
     public abstract download(
         combos: ThunderstoreCombo[],
         ignoreCache: boolean,
-        totalProgressCallback: (progress: number, modName: string, status: number, err: R2Error | null) => void
+        settings: ManagerSettings,
+        totalProgressCallback: (progress: number, downloadedSize: number, totalDownloadSize: number, modName: string, status: number, err: R2Error | null) => void
     ): Promise<void>;
 
     /**
@@ -40,4 +42,5 @@ export default abstract class ThunderstoreDownloaderProvider {
      */
     public abstract isVersionAlreadyDownloaded(combo: ThunderstoreCombo): Promise<boolean>;
 
+    public abstract getTotalDownloadSizeInBytes(combos: ThunderstoreCombo[], settings: ManagerSettings): Promise<number>;
 }

src/r2mm/downloading/BetterThunderstoreDownloader.ts

@@ -9,42 +9,53 @@ import FsProvider from '../../providers/generic/file/FsProvider';
 import FileWriteError from '../../model/errors/FileWriteError';
 import ThunderstoreDownloaderProvider from '../../providers/ror2/downloading/ThunderstoreDownloaderProvider';
 import ManagerInformation from '../../_managerinf/ManagerInformation';
-import { generateProgressPercentage } from '../../utils/DownloadUtils';
+import ManagerSettings from '../manager/ManagerSettings';
 
 export default class BetterThunderstoreDownloader extends ThunderstoreDownloaderProvider {
 
     public async download(
         combos: ThunderstoreCombo[],
         ignoreCache: boolean,
-        totalProgressCallback: (progress: number, modName: string, status: number, err: R2Error | null) => void
+        settings: ManagerSettings,
+        totalProgressCallback: (progress: number, downloadedSize: number, totalDownloadSize: number, modName: string, status: number, err: R2Error | null) => void
     ): Promise<void> {
         let modInProgressName = combos[0].getMod().getName();
         let downloadCount = 0;
+        let finishedModsDownloadedSize = 0;
+        let modInProgressSizeProgress = 0;
 
-        // Mark the mod 80% processed when the download completes, save the remaining 20% for extracting.
-        const singleModProgressCallback = (downloadProgress: number, status: number, err: R2Error | null) => {
+        const totalDownloadSize = await this.getTotalDownloadSizeInBytes(combos, settings);
+
+        const singleModProgressCallback = (downloadProgress: number, modInProgressSize: number, status: number, err: R2Error | null) => {
             if (status === StatusEnum.FAILURE) {
                 throw err;
             }
 
-            let totalDownloadProgress: number;
             if (status === StatusEnum.PENDING) {
-                totalDownloadProgress = generateProgressPercentage(downloadProgress * 0.8, downloadCount, combos.length);
+                modInProgressSizeProgress = (downloadProgress / 100) * modInProgressSize;
             } else if (status === StatusEnum.SUCCESS) {
-                totalDownloadProgress = generateProgressPercentage(100, downloadCount, combos.length);
+                finishedModsDownloadedSize += modInProgressSize;
+                modInProgressSizeProgress = 0;
                 downloadCount += 1;
             } else {
                 console.error(`Ignore unknown status code "${status}"`);
                 return;
             }
-            totalProgressCallback(Math.round(totalDownloadProgress), modInProgressName, status, err);
+            totalProgressCallback(
+                Math.round(finishedModsDownloadedSize / totalDownloadSize * 100),
+                finishedModsDownloadedSize + modInProgressSizeProgress,
+                totalDownloadSize,
+                modInProgressName,
+                status,
+                err
+            );
         }
 
         for (const comboInProgress of combos) {
             modInProgressName = comboInProgress.getMod().getName();
 
             if (!ignoreCache && await this.isVersionAlreadyDownloaded(comboInProgress)) {
-                singleModProgressCallback(100, StatusEnum.SUCCESS, null);
+                singleModProgressCallback(100, 0, StatusEnum.SUCCESS, null);
                 continue;
             }
 
@@ -57,10 +68,15 @@ export default class BetterThunderstoreDownloader extends ThunderstoreDownloader
         }
     }
 
-    private async _downloadCombo(combo: ThunderstoreCombo, callback: (progress: number, status: number, err: R2Error | null) => void): Promise<AxiosResponse> {
+    private async _downloadCombo(combo: ThunderstoreCombo, callback: (progress: number, downloadedSize: number, status: number, err: R2Error | null) => void): Promise<AxiosResponse> {
         return axios.get(combo.getVersion().getDownloadUrl(), {
             onDownloadProgress: progress => {
-                callback((progress.loaded / progress.total) * 100, StatusEnum.PENDING, null);
+                callback(
+                    (progress.loaded / progress.total) * 100,
+                    combo.getVersion().getFileSize(),
+                    StatusEnum.PENDING,
+                    null
+                );
             },
             responseType: 'arraybuffer',
             headers: {
@@ -70,14 +86,14 @@ export default class BetterThunderstoreDownloader extends ThunderstoreDownloader
         });
     }
 
-    private async _saveDownloadResponse(response: AxiosResponse, combo: ThunderstoreCombo, callback: (progress: number, status: number, err: R2Error | null) => void): Promise<void> {
+    private async _saveDownloadResponse(response: AxiosResponse, combo: ThunderstoreCombo, callback: (progress: number, downloadedSize: number, status: number, err: R2Error | null) => void): Promise<void> {
         const buf: Buffer = Buffer.from(response.data)
-        callback(100, StatusEnum.PENDING, null);
+        callback(100, combo.getVersion().getFileSize(), StatusEnum.PENDING, null);
         await this.saveToFile(buf, combo, (success: boolean, error?: R2Error) => {
             if (success) {
-                callback(100, StatusEnum.SUCCESS, error || null);
+                callback(100, combo.getVersion().getFileSize(), StatusEnum.SUCCESS, null);
             } else {
-                callback(100, StatusEnum.FAILURE, error || null);
+                callback(100, combo.getVersion().getFileSize(), StatusEnum.FAILURE, error || null);
             }
         });
     }
@@ -120,4 +136,14 @@ export default class BetterThunderstoreDownloader extends ThunderstoreDownloader
         }
     }
 
+    public async getTotalDownloadSizeInBytes(combos: ThunderstoreCombo[], settings: ManagerSettings): Promise<number> {
+        const filteredList = combos.filter(async value => !(await this.isVersionAlreadyDownloaded(value)) || settings.getContext().global.ignoreCache)
+            .map(value => value.getVersion().getFileSize());
+        if (filteredList.length > 0) {
+            return filteredList.reduce((previousValue, currentValue) => previousValue + currentValue) || 0;
+        } else {
+            return 0;
+        }
+    }
+
 }

src/store/modules/DownloadModule.ts

@@ -24,13 +24,17 @@ interface DownloadProgress {
     profile: ImmutableProfile;
     modName: string;
     downloadProgress: number;
+    downloadedSize: number;
+    totalDownloadSize: number;
     installProgress: number;
     status: DownloadStatusEnum;
 }
 
 interface UpdateObject {
     downloadId: UUID;
     downloadProgress?: number;
+    downloadedSize?: number;
+    totalDownloadSize?: number;
     installProgress?: number;
     modName?: string;
     status?: DownloadStatusEnum;
@@ -77,12 +81,12 @@ export const DownloadModule = {
             dispatch('retryDownload', { download });
         },
 
-        _addDownload({state}, params: {
+        async _addDownload({state, rootGetters}, params: {
             combos: ThunderstoreCombo[],
             installMode: InstallMode,
             game: Game,
             profile: ImmutableProfile
-        }): UUID {
+        }): Promise<UUID> {
             const { combos, installMode, game, profile } = params;
             const downloadId = UUID.create();
             const downloadObject: DownloadProgress = {
@@ -93,6 +97,8 @@ export const DownloadModule = {
                 profile,
                 modName: '',
                 downloadProgress: 0,
+                downloadedSize: 0,
+                totalDownloadSize: 0,
                 installProgress: 0,
                 status: DownloadStatusEnum.DOWNLOADING
             };
@@ -115,6 +121,7 @@ export const DownloadModule = {
         }) {
             const { combos, game, installMode, profile, hideModal } = params;
             let downloadId: UUID | undefined;
+            const settings: ManagerSettings = rootGetters['settings'];
 
             try {
                 if (!hideModal) {
@@ -123,6 +130,7 @@ export const DownloadModule = {
                 downloadId = await dispatch('_addDownload', { combos, installMode, game, profile });
                 const installedMods = throwForR2Error(await ProfileModList.getModList(profile));
                 const modsWithDependencies = await getFullDependencyList(combos, game, installedMods, installMode);
+                commit('updateDownload', { downloadId, totalDownloadSize: await ThunderstoreDownloaderProvider.instance.getTotalDownloadSizeInBytes(modsWithDependencies, settings) });
                 await dispatch('_download', { combos: modsWithDependencies, downloadId });
                 commit('setInstalling', downloadId);
                 await dispatch('_installModsAndResolveConflicts', { combos: modsWithDependencies, profile, downloadId });
@@ -146,24 +154,25 @@ export const DownloadModule = {
             }
         },
 
-        async downloadToCache({state}, params: {
+        async downloadToCache({state, rootGetters}, params: {
             combos: ThunderstoreCombo[],
-            progressCallback: (progress: number, modName: string, status: number, err: R2Error | null) => void
+            progressCallback: (progress: number, downloadedSize: number, totalDownloadSize: number, modName: string, status: number, err: R2Error | null) => void
         }) {
             const { combos, progressCallback } = params;
-            await ThunderstoreDownloaderProvider.instance.download(combos, state.ignoreCache, progressCallback);
+            await ThunderstoreDownloaderProvider.instance.download(combos, state.ignoreCache, rootGetters['settings'], progressCallback);
         },
 
-        async _download({state, commit, dispatch}, params: {
+        async _download({state, commit, dispatch, rootGetters}, params: {
             combos: ThunderstoreCombo[],
             downloadId: UUID
         }) {
             try {
                 await ThunderstoreDownloaderProvider.instance.download(
                     params.combos,
                     state.ignoreCache,
-                    (downloadProgress, modName, status, err) => {
-                        dispatch('_downloadProgressCallback', { downloadId: params.downloadId, downloadProgress, modName, status, err });
+                    rootGetters['settings'],
+                    (progress, downloadedSize, totalDownloadSize, modName, status, err) => {
+                        dispatch('_downloadProgressCallback', { downloadId: params.downloadId, downloadProgress: progress, downloadedSize, totalDownloadSize, modName, status, err });
                     }
                 );
             } catch (e) {
@@ -199,21 +208,23 @@ export const DownloadModule = {
         async _downloadProgressCallback({commit}, params: {
             downloadId: UUID,
             downloadProgress: number,
+            downloadedSize: number,
+            totalDownloadSize: number,
             modName: string,
-            status: number,
+            status: DownloadStatusEnum,
             err: R2Error | null
         }) {
-            const { downloadId, downloadProgress, modName, status, err} = params;
+            const { downloadId, downloadProgress, downloadedSize, totalDownloadSize, modName, status, err} = params;
 
             if (status === StatusEnum.FAILURE) {
                 commit('closeDownloadProgressModal', null, { root: true });
-                commit('setFailed', params.downloadId);
-                if (params.err !== null) {
-                    DownloadUtils.addSolutionsToError(params.err);
-                    throw params.err;
+                commit('setFailed', downloadId);
+                if (err !== null) {
+                    DownloadUtils.addSolutionsToError(err);
+                    throw err;
                 }
             } else if (status === StatusEnum.PENDING || status === StatusEnum.SUCCESS) {
-                commit('updateDownload', { downloadId, modName, downloadProgress });
+                commit('updateDownload', { downloadId, modName, downloadProgress, downloadedSize, totalDownloadSize });
             }
         },
     },

src/utils/DownloadUtils.ts

@@ -17,12 +17,3 @@ export function addSolutionsToError(err: R2Error): void {
         err.solution = 'Using "Change data folder" option in the settings to select a shorter path might solve the issue';
     }
 }
-
-export function generateProgressPercentage(progress: number, currentIndex: number, total: number): number {
-    if (progress === 100 && currentIndex === total) {
-        return 100;
-    }
-    const completedProgress = (currentIndex / total) * 100;
-    const totalProgressPercentage = completedProgress + (progress * 1/total)
-    return Math.floor(totalProgressPercentage);
-}