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, 9 insertions, 8 deletions

diff --git a/src-vue/src/views/PlayView.vue b/src-vue/src/views/PlayView.vue
index 2f3562ef..76f4f328 100644
--- a/src-vue/src/views/PlayView.vue
+++ b/src-vue/src/views/PlayView.vue
@@ -2,10 +2,12 @@
 import { Tabs } from "../utils/Tabs";
 import PlayButton from '../components/PlayButton.vue';
 import { defineComponent } from "vue";
+import InstallProgressBar from "../components/InstallProgressBar.vue";
 
 export default defineComponent({
     components: {
-        PlayButton
+        PlayButton,
+        InstallProgressBar
     },
     computed: {
         northstarIsRunning(): boolean {
@@ -45,7 +47,9 @@ export default defineComponent({
                 {{ $t('play.unable_to_load_playercount') }}
             </div>
         </div>
-        <div>
+
+        <!-- Align play button and services state container -->
+        <div style="display: flex">
             <PlayButton />
             <div v-if="$store.state.developer_mode" id="fc_services__status">
                 <div>
@@ -58,12 +62,13 @@ export default defineComponent({
                 </div>
             </div>
         </div>
+        <InstallProgressBar />
     </div>
 </template>
 
 <style scoped>
 .fc_launch__container {
-    margin: 50px;
+    margin: 50px 50px 30px 50px;
     position: fixed;
     bottom: 0;
 }
@@ -101,13 +106,9 @@ export default defineComponent({
     border-color: var(--el-color-primary);
 }
 
-
 #fc_services__status {
-    display: inline-block;
-    position: fixed;
-    padding: 10px 20px;
     color: #e8edef;
-    bottom: 43px;
+    align-self: end;
 }
 
 .fc_version__line {