feat: Show download progress for installing Northstar (#200)

* chore: Bump libthermite to 0.5.3

This adds a change needed for making progressbar work on dowload

* wip: First attempt at showing download progress

Simply prints it to JavaScript console for now

* feat: Emit download progress at most every 250ms

If we spam emit too much we use a lot of extra resources, slowing down
the actual download

* feat: Initial messages for extracting

* feat: Add install state enum

* refactor: Change payload to current + total size
downloaded

* fix: Remove extra emit

* fix: Remove extra emit

* refactor: Rename struct

* refactor: Move struct to top of file

* feat: Add TypeScript bindings

* feat: Add console logs for printing state for now

* fix: Remove duplicate identifier

* feat: Initial progressbar in frontend

* fix: Remove event listener added for debugging

* feat: Display status and downloaded bytes

* feat: Set loading bar to indeterminate on extract

* fix: Phrasing in comment

* feat: Add i18n for progress state

* refactor: Adjust control flow
do not show downloaded size anymore during extraction

* fix: Manually specify progressbar size

* fix: Update download progress every 100ms
instead of 250ms

Gives impression of faster / more fluent download.

* feat: layout does not move when progress bar is hidden

* feat: fix progress bar width to 200px

* refactor: put services container in a flex container, for it not to overlap play button

* refactor: export progress bar to dedicated component file

* refactor: Update status first outside of branch

* fix: Proper typing of event payload

* fix: Do not assign to unused variable

---------

Co-authored-by: Rémy Raes <contact@remyraes.com>

1 files changed, 11 insertions, 0 deletions

diff --git a/src-vue/src/views/RepairView.vue b/src-vue/src/views/RepairView.vue
index 9de9a7f3..3d449d70 100644
--- a/src-vue/src/views/RepairView.vue
+++ b/src-vue/src/views/RepairView.vue
@@ -33,6 +33,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { GameInstall } from "../utils/GameInstall";
+import { InstallProgress } from "../../../src-tauri/bindings/InstallProgress";
 import { invoke } from "@tauri-apps/api";
 import { ReleaseCanal } from "../utils/ReleaseCanal";
 import { Store } from 'tauri-plugin-store-api';
@@ -76,6 +77,16 @@ export default defineComponent({
             );
 
             let install_northstar_result = invoke("install_northstar_caller", { gamePath: game_install.game_path, northstarPackageName: ReleaseCanal.RELEASE });
+
+            appWindow.listen<InstallProgress>(
+                'northstar-install-download-progress',
+                ({ event, payload }) => {
+                    let typed_payload = payload;
+                    console.log("current_downloaded:", typed_payload.current_downloaded);
+                    console.log("total_size:        ", typed_payload.total_size);
+                    console.log("state:             ", typed_payload.state);
+                }
+            );
             await install_northstar_result
                 .then((message) => {
                     // Send notification